/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).


// input[type="search"] {
//   -webkit-appearance: textfield; /* 1 */
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: inherit;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*
=======================================================
Lightbox.js
Version: 0.0.6
Author: Victor Diego <victordieggo@gmail.com>
License: MIT
=======================================================
1. Base Styles
2. Buttons
3. Videos
4. Animations
5. Helpers
=======================================================
*/
/*
-------------------------------------------------------
1. Base Styles
-------------------------------------------------------
*/
.lightbox-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2em;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-wrapper {
  position: relative;
}
.lightbox-image {
  max-height: 100vh;
  vertical-align: middle;
}

/*
-------------------------------------------------------
2. Buttons
-------------------------------------------------------
*/
.lightbox-btn {
  z-index: 2;
  width: 2.2em;
  height: 2.2em;
  position: absolute;
  border-radius: 50%;
  transition: all 0.3s;
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
}
.lightbox-btn:focus, .lightbox-btn:hover {
  background-color: #333;
}
.lightbox-btn:disabled {
  cursor: initial;
  background-color: #aaa;
}
.lightbox-btn-close {
  top: -0.8em;
  right: -0.8em;
  background-size: 40%;
  background-image: url(/assets/lightbox/icon-lightbox-close-ffd9e4fa9b10f08f9b0d9b655bf87bbe4cfe04e84ad501926cfdab8f5e75cc3f.svg);
}
.lightbox-btn-next, .lightbox-btn-previous {
  top: calc(50% - 1.1em);
  background-size: 25% 80%;
  background-image: url(/assets/lightbox/icon-lightbox-arrow-bd24cd3c3959981a49ba4ce320cce2f9d65c59ae410d838e3ddaf8ca6d14d943.svg);
}
.lightbox-btn-previous {
  left: 1.5em;
  transform: rotate(180deg);
}
.lightbox-btn-next {
  right: 1.5em;
}

/*
-------------------------------------------------------
3. Videos
-------------------------------------------------------
*/
.lightbox-video-wrapper {
  width: 80vw;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}
.lightbox-video-player {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/*
-------------------------------------------------------
4. Animations
-------------------------------------------------------
*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
/*
-------------------------------------------------------
5. Helpers
-------------------------------------------------------
*/
[hidden] {
  display: none;
}

.remove-scroll {
  overflow: hidden;
}

/*
 * Animations
 */
/* ========================================================== */
/* = Global animate class                                   = */
/* ========================================================== */
body {
  backface-visibility: hidden;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

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

/* ========================================================== */
/* = Inifinte animation                                     = */
/* ========================================================== */
.infinite-animation {
  animation-iteration-count: infinite;
}

/* ========================================================== */
/* = A set of animation durations                           = */
/* ========================================================== */
.animated-timing-0 {
  animation-duration: 0.5s;
}

.animated-timing-0--force {
  animation-duration: 0.5s !important;
}

.animated-timing-1 {
  animation-duration: 1s;
}

.animated-timing-2 {
  animation-duration: 1.5s;
}

.animated-timing-3 {
  animation-duration: 2s;
}

.animated-timing-4 {
  animation-duration: 2.5s;
}

.animated-timing-5 {
  animation-duration: 3s;
}

.animated-long-timing-1 {
  animation-duration: 30s;
}

.animated-long-timing-2 {
  animation-duration: 50s;
}

.animated-long-timing-3 {
  animation-duration: 10s;
}

/* ========================================================== */
/* = A set of delay classes to stagger animation            = */
/* ========================================================== */
.delay-1 {
  animation-delay: 0.25s;
}

.delay-2 {
  animation-delay: 0.5s;
}

.delay-3 {
  animation-delay: 0.75s;
}

.delay-4 {
  animation-delay: 1000ms;
}

.delay-5 {
  animation-delay: 1250ms;
}

.delay-6 {
  animation-delay: 1500ms;
}

.delay-7 {
  animation-delay: 1750ms;
}

.delay-8 {
  animation-delay: 2000ms;
}

.delay-9 {
  animation-delay: 2250ms;
}

.delay-10 {
  animation-delay: 2500ms;
}

/* ========================================================== */
/* = Timing functions                                       = */
/* ========================================================== */
.linear {
  animation-timing-function: linear;
}

.bezier-1 {
  transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bezier-2 {
  animation-timing-function: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================================== */
/* = Subtle fade in classes                                 = */
/* ========================================================== */
@-webkit-keyframes subtle-drop-1 {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes subtle-drop-1 {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.subtle-drop-1 {
  animation-name: subtle-drop-1;
}

@-webkit-keyframes subtle-drop-1a {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes subtle-drop-1a {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.subtle-drop-1a {
  animation-name: subtle-drop-1a;
}

/* ========================================================== */
@-webkit-keyframes subtle-drop-2 {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes subtle-drop-2 {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.subtle-drop-2 {
  animation-name: subtle-drop-2;
}

/* ========================================================== */
@-webkit-keyframes subtle-drop-3 {
  0% {
    opacity: 0;
    transform: translateX(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes subtle-drop-3 {
  0% {
    opacity: 0;
    transform: translateX(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.subtle-drop-3 {
  animation-name: subtle-drop-3;
}

/* ========================================================== */
@-webkit-keyframes subtle-drop-4 {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes subtle-drop-4 {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.subtle-drop-4 {
  animation-name: subtle-drop-4;
}

/* ========================================================== */
@-webkit-keyframes subtle-drop-5 {
  0% {
    opacity: 0;
    transform: translateX(-3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes subtle-drop-5 {
  0% {
    opacity: 0;
    transform: translateX(-3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.subtle-drop-5 {
  animation-name: subtle-drop-5;
}

/* ========================================================== */
/* ========================================================== */
/* = Crude fade in classes                                 = */
/* ========================================================== */
@-webkit-keyframes crude-drop-1 {
  0% {
    opacity: 0;
    transform: translateY(5000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes crude-drop-1 {
  0% {
    opacity: 0;
    transform: translateY(5000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.crude-drop-1 {
  animation-name: crude-drop-1;
}

/* ========================================================== */
/* = Translate Y                                            = */
/* ========================================================== */
@-webkit-keyframes translatey-1 {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes translatey-1 {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
.translatey-1 {
  animation-name: translatey-1;
}

/* ========================================================== */
/* = Pulsing box shadow                                     = */
/* ========================================================== */
@-webkit-keyframes pulsing-box-shadow {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
}
@keyframes pulsing-box-shadow {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
}
.pulsing-box-shadow {
  animation-name: pulsing-box-shadow;
}

/* ========================================================== */
@-webkit-keyframes pulsing-box-shadow-2 {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
}
@keyframes pulsing-box-shadow-2 {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
}
.pulsing-box-shadow-2 {
  animation-name: pulsing-box-shadow-2;
}

/* ========================================================== */
@-webkit-keyframes pulsing-box-shadow-3 {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
}
@keyframes pulsing-box-shadow-3 {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
}
.pulsing-box-shadow-3 {
  animation-name: pulsing-box-shadow;
}

/* ========================================================== */
/* = Hover grow                                             = */
/* ========================================================== */
.hover-grow {
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -webkit-filter: blur(0);
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
}

.hover-grow:hover,
.hover-grow:focus,
.hover-grow:active {
  transform: scale(1.05);
}
@media screen and (max-width: 1200px) {
  .hover-grow:hover,
  .hover-grow:focus,
  .hover-grow:active {
    transform: scale(1);
  }
}

/* ========================================================== */
/* = Floating                                               = */
/* ========================================================== */
@-webkit-keyframes floating {
  from {
    transform: translate(0, -5px);
  }
  65% {
    transform: translate(0, 10px);
  }
  to {
    transform: translate(0, -5px);
  }
}
@keyframes floating {
  from {
    transform: translate(0, -5px);
  }
  65% {
    transform: translate(0, 10px);
  }
  to {
    transform: translate(0, -5px);
  }
}
.floating {
  animation-name: floating;
}

/* ========================================================== */
/* = Rotate                                                 = */
/* ========================================================== */
@-webkit-keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}
.spin {
  animation-name: spin;
}

/* ========================================================== */
@-webkit-keyframes spin-2 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin-2 {
  100% {
    transform: rotate(360deg);
  }
}
.spin-2 {
  animation-name: spin-2;
}

/* ========================================================== */
/* = Scale                                                  = */
/* ========================================================== */
@-webkit-keyframes scale {
  from {
    transform: scale(0.9);
  }
  65% {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
@keyframes scale {
  from {
    transform: scale(0.9);
  }
  65% {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
.scale {
  animation-name: scale;
}

/* ========================================================== */
@-webkit-keyframes scale-2 {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(12);
  }
}
@keyframes scale-2 {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(12);
  }
}
.scale-2 {
  animation-name: scale-2;
}

/* ========================================================== */
@-webkit-keyframes scale-3 {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0.25;
    transform: scale(20);
  }
}
@keyframes scale-3 {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0.25;
    transform: scale(20);
  }
}
.scale-3 {
  animation-name: scale-3;
}

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

/* ==========================================================================
a-scale-in-2
========================================================================== */
@keyframes a-scale-in-b {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.a-scale-in-b {
  animation: a-scale-in-b 0.5s;
}

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

/* ==========================================================================
a-scale-in
========================================================================== */
@keyframes a-grow {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
.a-grow {
  animation: a-grow 1.5s;
}

/* ==========================================================================
a-slide-in-up
========================================================================== */
@keyframes a-slide-in-up {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.a-slide-in-up {
  animation-name: a-slide-in-up;
}

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

/* ==========================================================================
a-scale-in-small
========================================================================== */
@keyframes a-scale-in-small {
  from {
    opacity: 0;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.c-tutorial-item {
  animation: a-scale-in-small 0.75s;
}

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

/* ==========================================================================
   5. a-zoom-in
   ========================================================================== */
@keyframes a-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.a-zoom-in {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: a-zoom-in;
}

/* ==========================================================================
   a-pulse
   ========================================================================== */
@keyframes a-pulse {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  to {
    opacity: 0;
  }
}
/**
 * A thin layer on top of normalize.css
 */
html {
  box-sizing: border-box;
}

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

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

a, button {
  transition: all 0.3s ease-out;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

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

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

input,
textarea,
select {
  -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;
}

td, th {
  padding: 0 10px;
}

/**
* This file contains all application-wide Sass variables.
*
* 1. Fonts
*
* 2. Colors
*
* 3. Elements
*/
/* ==========================================================================
1. Fonts
========================================================================== */
/**
 * 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(/bitter-1.300-latin_ext-regular.woff2) format("woff2"), url(/bitter-1.300-latin_ext-regular.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(/bitter-1.002-latin_ext-italic.woff2) format("woff2"), url(/bitter-1.002-latin_ext-italic.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(/bitter-2.110-latin_ext-700.woff2) format("woff2"), url(/bitter-2.110-latin_ext-700.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(/ibm-plex-sans-v3-latin-ext_latin-regular.woff2) format("woff2"), url(/ibm-plex-sans-v3-latin-ext_latin-regular.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(/ibm-plex-sans-v3-latin-ext_latin-500.woff2) format("woff2"), url(/ibm-plex-sans-v3-latin-ext_latin-500.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(/ibm-plex-sans-v3-latin-ext_latin-700.woff2) format("woff2"), url(/ibm-plex-sans-v3-latin-ext_latin-700.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(/ibm-plex-serif-v4-latin-ext_latin-regular.woff2) format("woff2"), url(/ibm-plex-serif-v4-latin-ext_latin-regular.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(/ibm-plex-serif-v4-latin-ext_latin-500.woff2) format("woff2"), url(/ibm-plex-serif-v4-latin-ext_latin-500.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(/ibm-plex-serif-v4-latin-ext_latin-700.woff2) format("woff2"), url(/ibm-plex-serif-v4-latin-ext_latin-700.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(/ibm-plex-mono-v1-500.woff2) format("woff2"), url(/ibm-plex-mono-v1-500.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
2. Colors
========================================================================== */
/* Blacks */
/* Greys */
/* Greens */
/* Blues */
/* Purples */
/* Reds */
/* Teals */
/* Yellows */
/* Brands */
/* Gradients */
/* ==========================================================================
3. Elements
========================================================================== */
/**
 *
 * DO NOT EDIT BASE
 *
 * Add additional color classes if required
 *
 * Every badge you'll ever need can be created from these o-button classes
 *
 *
 * Can be used for span html tags
 *
 * 1. Base badge
 *
 * 2. Video badge
 *
 * 3. Tutorial badge // Can be used to display author profile, number or checkmark
 *
 * 4. Product badge // Sale New Update
 *
 */
/* ==========================================================================
  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;
}

.o-badge--green {
  color: #ffffff;
  background: #158443;
  box-shadow: none;
}

.o-badge--black-slate {
  color: #ffffff;
  background: #2F4F4F;
  box-shadow: none;
}

.o-badge--red {
  color: #ffffff;
  background: #CF3B2B;
  box-shadow: none;
}

.o-badge--orange {
  color: #ffffff;
  background: #FD7401;
  box-shadow: none;
}

.o-badge--black {
  color: #ffffff;
  background: #3B4048;
  box-shadow: none;
}

.o-badge--blue-dark {
  color: #ffffff;
  background: #294175;
  box-shadow: none;
}

.o-badge--gold {
  color: #333333;
  background: #F3B36A;
  box-shadow: none;
}

.o-badge--green-text {
  color: #158443;
}

.o-badge--blue-text {
  color: #157CB8;
}

.o-badge--red-text {
  color: #CF3B2B;
}

.o-badge--orange-text {
  color: #FD7401;
}

.o-badge--purple-text {
  color: #9668B0;
}

.o-badge--purple {
  color: white;
  background: #9668B0;
}

/* ==========================================================================
   Video badge
   ========================================================================== */
.o-badge-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #333333;
  border: 3px solid #ffffff;
  border-radius: 12px;
  position: relative;
}
.o-badge-video .o-badge-video__video-icon {
  position: relative;
  left: 1px;
  width: 16px;
}

/* ==========================================================================
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;
  fill: #ffffff;
}

/* ==========================================================================
Product badge
========================================================================== */
.o-badge-product {
  color: #ffffff;
  border-radius: 9px 3px 9px 9px;
  box-shadow: none;
}

.o-badge-product--new {
  background: #9668B0;
}

.o-badge-product--update {
  background: #41AEA4;
}

.o-badge-product--sale {
  background: #CF3B2B;
}

.o-badge-product--free {
  background: #56B68B;
}

.o-badge-product--preorder {
  background: #3B4048;
}

/* ==========================================================================
Pro badge
========================================================================== */
.o-badge--pro {
  width: auto;
  height: auto;
  background: #157CB8;
  border-radius: 0.5625rem; /* 9/16 */
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 3px 7px;
  position: relative;
}

.o-badge--tear {
  border-radius: 9px 3px 9px 9px;
}

/*
 * Custom Mixins
 */
/* ========================================================== */
/* = Vertical align                                         = */
/* ========================================================== */
/* ========================================================== */
/* = High PPI Display background                            = */
/* ========================================================== */
/* ========================================================== */
/* = Form placeholder style                                 = */
/* ========================================================== */
/* ==========================================================================
Breakpoints
========================================================================== */
/* ==========================================================================
Buttons
========================================================================== */
/* ==========================================================================
Border Hover
========================================================================== */
/* ==========================================================================
Mobile scroll
========================================================================== */
/* ==========================================================================
Card
========================================================================== */
/* ==========================================================================
Hide Scrollbar
========================================================================== */
/**
 *
 * DO NOT EDIT BASE
 *
 * Add additional color classes if required
 *
 * Every button you'll ever need can be created from these o-button classes
 *
 * To modify use custom -l classes on html element
 *
 * Can be used for 'a' and 'button' html tags
 *
 * 1. Base button
 *
 * 2. Colors
 *
 * 3. Size
 *
 * 4. Icons within buttons with text - customise the icon color and background
 *
 * 5. Loaders within buttons -
 *
 * 6. Single button icons no text - eg. menu, close
 *
 * 7. Video
 *
 * 8. Badge / Button - Eg. Copy
 *
 * 9. Mobile menu
 *
 * 10. Custom layouts
 *
 */
/* ==========================================================================
   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 !important;
}
.o-button--green:hover {
  background: rgb(23.1, 145.2, 73.7);
}

.o-button--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: #157CB8 !important;
}
.o-button--blue:hover {
  background: rgb(22.5673170732, 133.2546341463, 197.7326829268);
}

.o-button--grey {
  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: #73859F;
}
.o-button--grey:hover {
  background: rgb(124.0762711864, 140.9093220339, 165.2237288136);
}

.o-button--grey-chateau {
  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: #C0C7CF !important;
}
.o-button--grey-chateau:hover {
  background: rgb(200.6837837838, 206.7189189189, 213.6162162162);
}

.o-button--light-grey {
  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: #EFF3F6;
}
.o-button--light-grey:hover {
  background: rgb(248.792, 250.344, 251.508);
}

.o-button--red {
  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: #CF3B2B !important;
}
.o-button--red:hover {
  background: rgb(212.9116, 68.0492, 52.3884);
}

.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(254.0523622047, 124.225984252, 15.2476377953);
}

.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(65.8908396947, 71.4748091603, 80.4091603053);
}

.o-button--dark-outline {
  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;
  border: 2px solid #3B4048;
}
.o-button--dark-outline:hover {
  border: 2px solid #73859F;
  background: rgb(65.8908396947, 71.4748091603, 80.4091603053);
}

.o-button--white-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: #ffffff;
  color: #158443;
}

.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-red {
  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: #CF3B2B;
}

.o-button--twitter {
  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: #1D83D1;
}
.o-button--twitter:hover {
  background: rgb(30.8642857143, 139.4214285714, 222.4357142857);
}

.o-button--green-outline {
  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: #158443;
  border: 2px solid #158443;
}

.o-button--green-green-outline {
  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: rgba(21, 132, 67, 0.1);
  color: #158443;
  border: 2px solid #158443;
}
.o-button--green-green-outline:hover {
  background: rgba(21, 132, 67, 0.18);
}

.o-button--green-green-outline--force {
  background: rgba(21, 132, 67, 0.1) !important;
}

.o-button--white-outline {
  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: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

.o-button--background-yellow {
  background: #F3B36A !important;
}
.o-button--background-yellow:hover {
  background: rgb(244.1403726708, 186.2223602484, 120.1596273292);
}

.o-button--disabled,
.o-button--disableable:disabled {
  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: #DBDDE0;
  cursor: not-allowed;
}
.o-button--disabled:hover,
.o-button--disableable:disabled:hover {
  background: #DBDDE0 !important;
}

.o-button:disabled {
  background: #DBDDE0 !important;
  cursor: not-allowed;
}
.o-button:disabled:hover {
  background: #DBDDE0 !important;
}

.o-button--disabled-dark:disabled {
  background: #959DA5 !important;
  cursor: not-allowed;
}
.o-button--disabled-dark:disabled:hover {
  background: #959DA5 !important;
}

.o-button--input {
  border: 0 !important;
  border-radius: 0.5625rem !important;
  padding: 0 15px !important;
}
.o-button--input:focus {
  box-shadow: none;
}

.o-button--text {
  cursor: text;
}

.o-button--flutter {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
  background: #0261CD;
  border-radius: 9px;
  font-weight: bold;
  padding-top: 18px;
  padding-bottom: 18px;
  text-decoration: none;
  color: #ffffff;
}
@media (max-width: 600px) {
  .o-button--flutter {
    font-size: 1rem !important; /* 15/16 */
  }
}
.o-button--flutter:hover {
  background: #0076F7;
}

.o-button--transparent01-text-white {
  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;
  color: #158443;
  background: #FFFFFF;
}

.o-button--transparent-text-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;
  color: #158443;
  background: rgba(21, 132, 67, 0.1);
}

.o-button--pulse {
  position: relative;
  z-index: 0;
}
.o-button--pulse:before {
  content: "";
  background-color: inherit;
  opacity: 0.2;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  left: -10px;
  top: -10px;
  border-radius: 15px;
  z-index: -1;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: a-pulse;
}

/* ==========================================================================
   Size
   ========================================================================== */
.o-button--full-col {
  display: block;
  width: 100%;
}

.o-button--large {
  height: 50px;
  padding: 0 18px;
}

.o-button--small {
  height: 42px;
  line-height: 42px;
}

.o-button--xs {
  height: 38px;
  line-height: 38px;
  padding: 0 13px;
  font-size: 0.875rem;
}

.o-button--mini {
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
}

.o-button--xxs {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: 0.75rem; /* 12/16 */
}

.o-icon-button--square {
  line-height: 1;
}
.o-icon-button--square > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.o-icon-button--square i {
  margin: 0 0 10px 0;
}

.o-button--fix-size-252 {
  width: 252px;
}

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

.o-button__svg--stroked {
  stroke-width: 1px;
}

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

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

.o-button__svg--none {
  fill: none;
}

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

.o-button__svg--grey {
  fill: #73859F;
}

.o-button__svg--grey-chateau {
  fill: #C0C7CF;
}

.o-button__svg--light-grey {
  fill: #F2F6FA;
}

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

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

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

.o-button__svg--blue {
  fill: #157CB8;
}

.o-button__svg--orange {
  fill: #FD7401;
}

.o-button__svg--red {
  fill: #CF3B2B;
}

.o-button__svg--twitter {
  fill: #1D83D1;
}

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

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

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

.o-button__icon--grey {
  background: #73859F;
}

.o-button__icon--grey-chateau {
  background: #C0C7CF;
}

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

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

.o-button__icon--red {
  background: #CF3B2B;
}

.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--large {
  width: 50px !important;
  height: 50px !important;
}

.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;
}

/* ==========================================================================
   Loaders
   ========================================================================== */
.o-button__loader-text {
  padding-left: 36px;
}

.o-button__loader-text--center {
  position: relative;
}
.o-button__loader-text--center .l-button__loader-pulse {
  left: -40px;
}

.l-button__loader-pulse {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -16px;
}

/* ==========================================================================
   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;
  position: relative;
}
.o-icon-button svg {
  display: block;
  margin: 0 auto;
}

.o-icon-button--large {
  width: 50px;
  height: 50px;
}

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

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

.o-icon-button--dark {
  background-color: #3B4048;
}
.o-icon-button--dark svg {
  fill: #C0C7CF;
}

.o-icon-button--light-grey {
  background: #EFF3F6;
}
.o-icon-button--light-grey:hover {
  background: rgb(229.208, 235.656, 240.492);
}

.o-button__icon--grey-lynch {
  background: #73859F;
}
.o-button__icon--grey-lynch:hover {
  background: rgb(105.9237288136, 125.0906779661, 152.7762711864);
}
.o-button__icon--grey-lynch svg {
  fill: #ffffff;
}

.o-button__icon--dark-blue svg {
  fill: #3B4048;
}

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

.o-text-button--green {
  color: #158443;
}

.o-text-button--black {
  color: #333333;
}

.o-text-button--clear:hover .o-button__label {
  text-decoration: none;
}

/* Apply to inside label span only */
.o-text-button--label {
  position: relative;
}
.o-text-button--label:hover {
  text-decoration: none !important;
}
.o-text-button--label:hover:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #73859F;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* ==========================================================================
Text buttons with background on hover
========================================================================== */
.o-text-button--hover {
  position: relative;
  z-index: 0;
}
.o-text-button--hover:before {
  content: "";
  position: absolute;
  width: 130%;
  height: 140%;
  background: #EFF3F6;
  z-index: -1;
  border-radius: 0.5625rem;
  left: -12%;
  opacity: 0;
  transition: opacity all 0.3s ease-out;
}
.o-text-button--hover:hover:before {
  opacity: 1;
}

/* ==========================================================================
   Buttons inside input elements eg. password show
   ========================================================================== */
.o-input-button {
  background: #DCE0E7;
  text-transform: uppercase;
  font-size: 0.6875em; /* 11/16 */
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 0.5625rem;
  color: #ffffff;
  padding: 6px 10px 4px;
  cursor: pointer;
}
.o-input-button:hover {
  background: #B9C2CF;
}

/* ==========================================================================
   7. Video
   ========================================================================== */
.o-button-video {
  width: 96px;
  height: 96px;
  background: #333333;
  border: 6px solid #ffffff;
  border-radius: 12px;
  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;
}

/* ==========================================================================
8. Badge / Button - Eg. Copy
========================================================================== */
.o-button-copy {
  width: 52px;
  height: 24px;
  background: rgba(86, 98, 115, 0.5);
  font-size: 0.6875rem; /* 11/16 */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  padding: 5px 9px 5px;
  border-radius: 0.5625rem;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 45px;
}
.o-button-copy:before {
  content: "Copy";
}
.o-button-copy:hover {
  background: #647388;
}

/* ==========================================================================
8. Button for Code Blocks
========================================================================== */
.o-button-code {
  width: 24px;
  height: 24px;
  background: rgba(86, 98, 115, 0.5);
  position: absolute;
  top: 12px;
  right: 15px;
  border-radius: 0.5625rem;
  cursor: pointer;
  background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
  background-size: cover;
}
.o-button-code:hover {
  background: #647388;
  background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
  background-size: cover;
}

/* ==========================================================================
9. Mobile menu
========================================================================== */
.o-button-menu {
  width: 48px;
  height: 48px;
  z-index: 9999;
  position: absolute;
  left: 80px;
  z-index: 9999;
  background: #434A53;
  border-radius: 120px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.o-button-menu svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff;
}

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

/* ==========================================================================
10. Arrow Buttons
========================================================================== */
.o-button-arrow {
  width: 50px;
  height: 50px;
  background: #EFF3F6;
  border-radius: 100px;
}
.o-button-arrow svg {
  width: 11px;
  height: 11px;
}

/* ==========================================================================
11. Start of content
========================================================================== */
.o-button-start-content {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
}
.o-button-start-content:focus {
  top: 0;
  left: 0;
  z-index: 9999999999;
  width: auto;
  height: 72px;
  line-height: 72px;
  padding: 0 15px;
  background-color: #157CB8;
}

/* ==========================================================================
12a. Switch
========================================================================== */
.o-button-switch {
  position: relative;
  width: auto;
  border: 3px solid #434A53;
  border-radius: 100px;
  height: 44px;
  line-height: 44px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  margin: 0;
  box-sizing: content-box;
  z-index: 0;
}
.o-button-switch li {
  width: 100%;
  text-align: center;
  font-family: "Bitter", serif;
  font-weight: 600;
  font-size: 1rem; /* 17/16 */
  color: #ffffff;
  cursor: pointer;
}
.o-button-switch .o-button-switch--active {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 10px);
  height: 100%;
  background: #158443;
  border-radius: 100px;
  padding: 10px;
  z-index: -1;
  height: 44px;
  line-height: 44px;
  margin-top: -22px;
}
.o-button-switch .o-button-switch--personal {
  left: 10px;
}
.o-button-switch .o-button-switch--team {
  right: 10px;
}

/* ==========================================================================
12b. Rounded
========================================================================== */
.o-button-round {
  display: inline-flex;
  justify-content: center;
  height: 46px;
  line-height: 46px;
  font-family: "Bitter", serif;
  color: #ffffff;
  font-weight: 700;
  border-radius: 100px;
  font-size: 1.0625rem; /* 17/16 */
  padding: 0 30px;
  cursor: pointer;
}

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

.o-button-round--green {
  background: #158443;
}

.o-button-round--disabled {
  background: #DBDDE0;
  color: #959DA5;
}

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

.l-button-center {
  width: 100%;
  text-align: center;
}
.l-button-center .o-button__label, .l-button-center .o-button__icon--right {
  margin-left: auto;
}
.l-button-center .o-button__label {
  display: inline-block;
  margin-right: -12px;
}

/* Misc */
.l-button__svg-checkmark {
  width: 14px;
  height: 11px;
  margin-top: -5px;
  margin-left: -7px;
}

.l-button__svg-checkmark-circle {
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.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-inside-input {
  position: absolute;
  top: 40px;
  right: 15px;
}

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

.l-button__svg-filter {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.l-button__svg-grid {
  width: 18px;
  height: 18px;
  margin-right: 9px;
}

.l-button__svg-clear {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.l-button__svg-clear--button {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
}

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

.l-button__svg-arrow--force {
  width: 14px;
  height: 14px;
  margin-top: -7px !important;
  margin-left: -7px !important;
}

.l-button__svg-arrow-45 {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  transform: rotate(-45deg);
}

.l-button__svg-arrow-90 {
  width: 14px;
  height: 14px;
  margin-top: -7px !important;
  margin-left: -7px !important;
  transform: rotate(90deg);
}

.l-button__svg-arrow-up-90 {
  width: 14px;
  height: 14px;
  margin-top: -7px !important;
  margin-left: -7px !important;
  transform: rotate(-90deg);
}

.l-button__svg-arrow-left {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

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

.l-button__svg-caret {
  width: 15px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.l-button__svg-right {
  position: absolute;
  right: 15px;
}

/* Search */
.l-button__search {
  width: 18px;
  height: 20px;
  top: 1px;
  margin-right: 8px;
}
.l-button__search svg {
  width: 18px;
  height: 18px;
}

/* Social */
.l-button__svg-facebook {
  width: 11px;
  position: relative;
  top: 4px;
  left: -1px;
}

.l-button__svg-twitter {
  width: 17px;
}

.l-button__svg-follow-twitter {
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  margin-top: -8.5px;
}

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

.l-button__svg-star {
  width: 15px;
  height: 15px;
}

.l-button__svg-empty-star {
  width: 15px;
  height: 15px;
  opacity: 0.33;
}

.l-button__svg-half-star {
  width: 8px;
  height: 15px;
}

.l-button__svg-more {
  width: 20px;
  height: 5px;
}

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

.l-button__svg-transform-45 {
  transform: rotate(45deg);
}

/**
 * Images
 *
 * 1. Logo
 *
 * 2. Rounded - Adds rounded border to image or figure wrapper
 *
 * 3. Profile - Common sizes for avatars and profile photos
 */
/* ==========================================================================
  1. Logo
  ========================================================================== */
div.o-header-logo {
  width: 100%;
  position: relative;
}
@media (max-width: 992px) {
  div.o-header-logo {
    width: 48px;
    height: 48px;
  }
}
div.o-header-logo svg.o-header-logo__text {
  width: 100%;
  fill: #ffffff;
}
@media (max-width: 992px) {
  div.o-header-logo svg.o-header-logo__text {
    display: none;
  }
}
div.o-header-logo svg.o-header-logo__mark {
  width: 50px;
  fill: #158443;
  position: absolute;
  top: 0;
  left: 0;
  transition: fill 0.3s;
}
@media (max-width: 992px) {
  div.o-header-logo svg.o-header-logo__mark {
    width: 48px;
    position: relative;
  }
}
div.o-header-logo a.o-header-logo__link {
  display: block;
}
div.o-header-logo a.o-header-logo__link:hover svg.o-header-logo__mark {
  fill: #ffffff;
}

/* ==========================================================================
  2. Rounded
  ========================================================================== */
.o-rounded-image {
  border-radius: 0.5625rem;
}

/* ==========================================================================
  3. Profile
  ========================================================================== */
.o-profile-pic--small, .o-profile-pic--medium, .o-profile-pic--large, .o-profile-pic--largest {
  background: #ffffff;
  border-radius: 0.5625rem;
  overflow: hidden;
}
.o-profile-pic--small img, .o-profile-pic--medium img, .o-profile-pic--large img, .o-profile-pic--largest img {
  width: 100%;
  height: auto;
}

.o-profile-pic--largest {
  width: 120px;
  height: 120px;
}

.o-profile-pic--large {
  width: 90px;
  height: 90px;
}

.o-profile-pic--medium {
  width: 54px;
  height: 54px;
}

.o-profile-pic--small {
  width: 40px;
  height: 40px;
}

.o-profile-pic--new-small {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

/**
 * Form inputs
 *
 * Generic styles for form inputs always used on a white background
 *
 * Can build any form using the following objects
 *
 * To modify layout eg. width use custom -l classes on html element
 *
 * 1. Form label
 *
 * 2. Input and textarea
 *
 * 3. Checkbox
 *
 * 4. Validation
 *
 */
/**
 * 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. Form label
   ========================================================================== */
.o-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}
.o-label .o-label__info {
  font-size: 0.6875rem;
  color: #959DA5;
}

/* ==========================================================================
   2. Regular input and textarea
   ========================================================================== */
.o-input {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-input:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}

.o-input--large {
  height: 54px;
  padding: 0 15px;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-input--large:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}

.o-input--larger {
  height: 56px;
  padding: 0 15px;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-input--larger:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}

.o-input--grey {
  border: 2px solid #D6E0EF;
}
.o-input--grey::placeholder {
  color: #9399A6;
}

.o-input--dark {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-input--dark:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-input--dark {
  background: #3B4048;
  border: 2px solid #73859F !important;
  color: #ffffff;
}
.o-input--dark::placeholder {
  color: #959DA5;
}

.o-input--shadow {
  border: none;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
}
.o-input--shadow::placeholder {
  color: #9399A6;
}
.o-input--shadow:focus {
  border: none;
  background: #ffffff;
}

.o-textarea {
  padding: 15px;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-textarea:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-textarea {
  line-height: 1.45;
  min-width: 100%;
  max-width: 100%;
  cursor: text;
  border-radius: 0.5625rem !important;
}

.o-textarea--dark {
  color: #ffffff;
  background: #3B4048;
  border: 2px solid #73859F !important;
}
.o-textarea--dark::placeholder {
  color: #959DA5;
}

.input__group {
  position: relative;
}
.input__group .input__icon {
  position: absolute;
  width: 0;
  height: 50px;
  line-height: 48px;
  text-align: center;
  margin-top: 8px;
}
.input__group .input__icon-svg--twitter {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 17px;
  top: 50%;
  margin-top: -7px;
  fill: #73859F;
}
.input__group .input__icon-svg--search {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -10px;
  fill: #6E7687;
}
.input__group .o-input {
  padding-left: 42px !important;
}

.input__group--dark .input__icon-svg--search {
  fill: #ffffff;
  margin-top: -8px;
}

.o-select select {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png);
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.o-select select select::-ms-expand {
  display: none;
}
.o-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}

.o-select--dark select {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-select--dark select:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-select--dark select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #3B4048 !important;
  border: 2px solid #73859F !important;
  color: #ffffff;
  background-image: url(/assets/svg-icons/chevron-down--white-d607f3ad865134ffa9f674c5b25b6296c4dc6c2f640d37950815eeef998f5bc3.png) !important;
  background-size: 10px !important;
  background-position: center right 15px !important;
  background-repeat: no-repeat !important;
}
.o-select--dark select select::-ms-expand {
  display: none;
}
.o-select--dark select:focus {
  background: rgba(29, 131, 209, 0.05) !important;
  background-image: url(/assets/svg-icons/chevron-down--white-d607f3ad865134ffa9f674c5b25b6296c4dc6c2f640d37950815eeef998f5bc3.png) !important;
  background-size: 10px !important;
  background-position: center right 15px !important;
  background-repeat: no-repeat !important;
}

.o-select--error select {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-select--error select:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-select--error select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #CF3B2B !important;
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png);
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.o-select--error select:focus {
  background: rgba(29, 131, 209, 0.05);
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.o-select--error select select::-ms-expand {
  display: none;
}

/* ==========================================================================
   3. Checkbox
   ========================================================================== */
.o-checkbox__wrapper {
  position: relative;
}

.o-checkbox {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 27px;
  height: 27px;
  text-indent: -9999px;
}
.o-checkbox:hover:not(:checked) ~ .checkbox__indicator {
  background: rgba(29, 131, 209, 0.05);
}
.o-checkbox .checkbox__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.o-checkbox .checkbox__input:checked ~ .checkbox__indicator {
  background: #00B87E;
  border: 1px solid #00B87E;
  border: none;
}
.o-checkbox .checkbox__input:checked ~ .checkbox__indicator svg {
  display: block;
}
.o-checkbox .checkbox__indicator {
  position: absolute;
  left: 0;
  width: 27px;
  height: 27px;
  background: #07080A;
  border-radius: 8px;
  border: 1px solid white;
  transition: all 0.3s;
}
.o-checkbox .checkbox__indicator svg {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  fill: #ffffff;
  width: 15px;
  height: 12px;
  margin: -5.5px 0 0 -7.5px;
}

.o-checkbox__title {
  display: inline-block;
  padding-top: 2px;
  padding-left: 36px;
}

.o-checkbox--dark .checkbox__indicator {
  background: none;
  border: 2px solid rgba(115, 133, 159, 0.75);
}

.o-checkbox--small {
  width: 24px;
  height: 24px;
}
.o-checkbox--small .checkbox__indicator {
  width: 24px;
  height: 24px;
}
.o-checkbox--small .checkbox__indicator svg {
  width: 13px;
  height: 10px;
  margin: -5px 0 0 -6.5px;
}

.o-checkbox--flutter .checkbox__input:checked ~ .checkbox__indicator {
  background: #0261CD !important;
  border: 2px solid #0261CD !important;
  border: none;
}

/* ==========================================================================
   4. Validation
   ========================================================================== */
.form__validation {
  position: absolute;
  left: 0;
  top: 82px;
  font-size: 0.75em; /* 12/16 */
}
@media (max-width: 600px) {
  .form__validation {
    position: relative;
    top: -15px;
  }
}

.form__validation--error {
  font-weight: 600;
  color: #CF3B2B;
}

/* ==========================================================================
5. Dropdown
========================================================================== */
.o-dropdown {
  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: white;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  color: #333333;
  position: relative;
}
.o-dropdown > span {
  display: flex;
  align-items: center;
}
.o-dropdown > span svg {
  width: 10px;
  margin-left: 10px;
}
.o-dropdown ul.o-dropdown-menu {
  width: 100%;
  top: 52px;
  left: 0;
}
.o-dropdown ul.o-dropdown-menu li a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9375rem !important;
  text-decoration: none;
}

/* ==========================================================================
6. Select
========================================================================== */
.o-select select {
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.o-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.o-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png);
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.o-select select select::-ms-expand {
  display: none;
}
.o-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}

.o-select--grey select {
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border: 0;
}
.o-select--grey select:focus {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  background-image: url(/assets/svg-icons/chevron-down-ce98912da7c096c0770fefda2e1cce62e07cdbeeddcfb94bfc98be2d7950bf74.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
  border: 0;
}

/**
 *
 *
 *
 * Base styles for common menu elements
 *
 * To modify use custom -l classes on html element
 *
 *
 * 1. Dropdown
 *
 *
 */
/* ==========================================================================
Animation
========================================================================== */
@keyframes a-slight-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.o-dropdown-menu {
  animation: a-slight-fade-in-up 0.25s;
}

/* ==========================================================================
1. Dropdown
========================================================================== */
.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;
  margin-bottom: 0;
  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 {
  font-size: 1.0625rem !important; /* 17/16 */
  margin-left: 0 !important;
}
.o-dropdown-menu li i {
  min-width: 34px;
  height: 34px;
  margin-right: 15px;
}
.o-dropdown-menu li > div span {
  color: #73859F;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 500 !important;
}
.o-dropdown-menu li a {
  width: 100%;
  color: #333333 !important;
}
.o-dropdown-menu li a:hover {
  color: #158443 !important;
}

/**
 * Feedback banners and messages
 *
 * Notify the user when they've made a change via a form or to highlight news and announcements
 *
 * 1. Base DO NOT EDIT
 *
 * 2. Class Modifiers for success, warning, danger and info messages
 *
 * 4. Validation messages
 *
 * 3. Custom layout classes
 */
/* ==========================================================================
  1. Base
  ========================================================================== */
.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 p {
  font-size: 0.9375rem;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .o-alert p {
    font-size: 0.875rem;
  }
}
.o-alert .o-alert__close {
  order: 10;
  height: 16px;
  cursor: pointer;
  background: none;
}
.o-alert .o-alert__close svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

/* ==========================================================================
  2. Class Modifiers for success, warning, danger and info messages
  ========================================================================== */
.o-alert--success {
  background: #158443;
  padding-left: 94px;
}
.o-alert--success:before {
  content: "success";
  color: #158443;
  position: absolute;
  left: 15px;
  top: 13px;
  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--danger {
  background: #CF3B2B;
  padding-left: 78px;
}
.o-alert--danger:before {
  content: "error";
  color: #CF3B2B;
  position: absolute;
  left: 15px;
  top: 13px;
  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: 13px;
  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-red {
  background: #CF3B2B;
  padding-left: 94px;
}
.o-alert--warning-red:before {
  content: "warning";
  color: #CF3B2B;
  position: absolute;
  left: 15px;
  top: 13px;
  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: 13px;
  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: #2F4F4F;
  padding-left: 68px;
}
.o-alert--info:before {
  content: "info";
  color: #2F4F4F;
  position: absolute;
  left: 15px;
  top: 13px;
  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-red {
  background: #CF3B2B;
  padding-left: 68px;
}
.o-alert--info-red:before {
  content: "info";
  color: #CF3B2B;
  position: absolute;
  left: 15px;
  top: 13px;
  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: 13px;
  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: 13px;
  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--flutter {
  background: #0261CD;
  padding: 20px;
}
.o-alert--flutter > span {
  display: flex;
}
@media (max-width: 600px) {
  .o-alert--flutter > span {
    flex-wrap: wrap;
    text-align: center;
  }
}
.o-alert--flutter > span img {
  margin-right: 20px;
}
@media (max-width: 600px) {
  .o-alert--flutter > span img {
    margin: 0 auto 15px;
  }
}

/* ==========================================================================
3. Validation messages
========================================================================== */
.o-validate-message {
  position: absolute;
  font-weight: 600;
  font-size: 0.75rem;
  color: #CF3B2B;
}

.o-validate-message--top-right {
  right: 0;
  top: -92px;
}

/* ==========================================================================
4. Custom layout classes
========================================================================== */
.l-alert-admin-top {
  margin-bottom: 27px;
}

.l-alert-sticky {
  position: fixed;
  z-index: 999999;
  bottom: 0;
  width: 100%;
  border-radius: 0;
}
@media (max-width: 992px) {
  .l-alert-sticky {
    left: 0;
    width: 100%;
  }
}

.l-alert-sticky--admin {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 0;
}
@media (max-width: 1200px) {
  .l-alert-sticky--admin {
    left: 0;
    width: 100%;
  }
}

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

/**
 *
 * 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
 *
 *
 */
/* ==========================================================================
1. Base
========================================================================== */
.o-tooltip, [data-tooltip]:before {
  background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.875rem; /* 14/16 */
  font-weight: 600;
  border-radius: 0.5625rem;
  padding: 9px 18px;
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  color: #ffffff;
  z-index: 99999;
  width: auto;
  white-space: nowrap;
}

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

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

[data-tooltip]:after {
  content: "";
  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-tooltip {
  height: 40px;
  line-height: 24px;
}
.o-tooltip:after {
  content: "";
  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;
}

/* ==========================================================================
* 4. A tooltip for inside table rows
========================================================================== */
.table-row--tooltip:before {
  opacity: 0 !important;
}
.table-row--tooltip:after {
  opacity: 0 !important;
}

/* ==========================================================================
* 5. Tooltip (Chart Style)
========================================================================== */
.o-chart-tooltip {
  display: none;
  flex-direction: column;
  padding: 12px 15px;
  color: #ffffff;
  font-size: 0.875rem; /* 14/16 */
  border-radius: 6px;
  border: 2px solid #ffffff;
  background-color: #3F444D;
  position: absolute;
  bottom: calc(100% + 8px);
  left: calc(50% - 3px);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
  text-align: center;
}
.o-chart-tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3F444D;
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -3px;
  z-index: 1;
  border-radius: 2px;
}
.o-chart-tooltip:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ffffff;
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -3px;
  z-index: 0;
  border-radius: 2px;
}
.o-chart-tooltip > span {
  font-weight: 600;
}
.o-chart-tooltip br {
  content: " ";
  display: block;
  margin: 0;
  height: 0;
}

.o-chart-tooltip--show {
  position: relative;
}
.o-chart-tooltip--show:hover .o-chart-tooltip {
  display: flex;
}

/**
 *
 * DO NOT EDIT BASE
 *
 * Add additional color classes if required
 *
 * Every tag you'll ever need can be created from these o-tag classes
 *
 * To modify use custom -l classes on html element
 *
 * Can be used for 'a' and 'button' html tags
 *
 * 1. Base tag
 *
 *
 */
/* ==========================================================================
   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: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}
.o-tag button {
  background: none;
  cursor: pointer;
  padding: 0;
}
.o-tag button svg {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}

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

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

@media (max-width: 768px) {
  .o-tag--black-mobile {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .o-tag--black-mobile svg {
    fill: #ffffff;
  }
}

.o-tag--red {
  background: #ffffff;
  border: 2px solid #CF3B2B;
  color: #333333;
}

/**
*
*
* Data components for charts and stats
*
* 1. Stat Counter
*
*/
/* ==========================================================================
1. Stat Counter
========================================================================== */
.o-stat-counter {
  height: 100%;
  text-align: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-image: url(/assets/svg-icons/donut--grey-06bcb93897cd08c1104bf65cad33c6f456c4026fc8299ab99d77121e51d710e5.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.o-stat-counter span {
  display: block;
  font-family: "Bitter", serif;
  font-weight: 700;
}
.o-stat-counter .o-stat-counter__main {
  font-size: 2.5rem; /* 48/16 */
  line-height: 2.5rem;
  letter-spacing: -1px;
  width: 100%;
  top: 18px;
  position: relative;
  align-self: center;
  text-align: center;
}
.o-stat-counter .o-stat-counter__sub {
  font-size: 0.9375rem; /* 15/16 */
  align-self: flex-end;
}

.o-stat-counter--dark {
  background-image: url(/assets/svg-icons/donut--lynch-grey-2dbc8aea5e9dbbbffe343597175e1cc45959f761ed2b57b20910c72553ed7dfd.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.o-stat-counter--dark .o-stat-counter__main, .o-stat-counter--dark .o-stat-counter__sub {
  color: #ffffff;
}

/**
 * Loading Animations 
 *
 * DO NOT EDIT
 *
 * To change size color use layout classes
 * 
 * 1. Pulse 
 *
 * 2. Circle
 *
 */
/* ==========================================================================
  1. Pulse 
  ========================================================================== */
@keyframes loader-pulse {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
.o-loader-pulse__bounce-1, .o-loader-pulse__bounce-2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-pulse 2s infinite ease-in-out;
}

.o-loader-pulse__bounce-2 {
  animation-delay: -1s;
}

/* ==========================================================================
   2. Circle 
   ========================================================================== */
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.o-loader-circle {
  width: 100px;
  height: 100px;
  position: relative;
}
.o-loader-circle .o-loader-circle__arc {
  position: absolute;
  width: 100%;
  height: 100%;
}
.o-loader-circle .o-loader-circle__arc::before, .o-loader-circle .o-loader-circle__arc::after {
  content: "";
  position: absolute;
  top: 32%;
  left: 32%;
  border: 2px solid;
  border-radius: 50%;
  width: 36%;
  height: 36%;
}
.o-loader-circle .o-loader-circle__arc::before {
  border-color: #2EA664;
  opacity: 0.3;
}
.o-loader-circle .o-loader-circle__arc::after {
  border-color: transparent;
  border-bottom-color: #2EA664;
  animation: rotate 0.75s infinite linear;
}

/* ==========================================================================
 Admin Edit Banner
 ========================================================================== */
.c-admin-edit-banner {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 12px 15px;
  z-index: 99999;
}
@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%);
  }
}

/**
 * Navigation components
 *
 * 1. Sidebar - Branded sidebar can be used anywhere as alternative navigation to horizontal use layout modifiers to change width
 *
 * 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. Circle Stepper
 *
 * 10a. Paginator
 *
 * 10b. Paginator (Dark)
 *
 */
/**
 * 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
========================================================================== */
/**
* 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+ */
}
/* Function to convert pixel font sizes to rem */
/* ==========================================================================
1. Sidebar
========================================================================== */
.c-nav-sidebar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #262626;
  width: 100%;
  height: auto;
  height: 80px;
  line-height: 80px;
  display: flex;
  align-items: center;
  min-width: auto;
  white-space: nowrap;
  padding: 0;
  overflow: hidden;
}
.c-nav-sidebar .c-nav-sidebar__wrapper {
  padding: 0 30px;
  overflow-x: auto;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-nav-sidebar .c-nav-sidebar__wrapper::-webkit-scrollbar {
  width: 0 !important;
}
.c-nav-sidebar .c-nav-sidebar__wrapper {
  -webkit-overflow-scrolling: touch;
}
.c-nav-sidebar .c-nav-sidebar__nav {
  display: flex;
}
.c-nav-sidebar a.c-nav-sidebar__item {
  display: block;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  font-family: "Bitter", serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  border-radius: 100px;
  padding: 0 20px;
  height: 44px;
  line-height: 44px;
}
.c-nav-sidebar a.c-nav-sidebar__item:hover {
  color: #ffffff;
  padding-left: 20px;
}
.c-nav-sidebar a.c-nav-sidebar__link--active {
  background: #3b4048;
  color: #ffffff;
  border: 0;
  margin: 0;
}
.c-nav-sidebar a.c-nav-sidebar__link--active:hover {
  padding-left: 20px !important;
}

/* ==========================================================================
1a. Sidebar Admin
========================================================================== */
.c-nav-sidebar-admin {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #262626;
  padding: 0 24px 120px;
  overflow: auto;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-nav-sidebar-admin::-webkit-scrollbar {
  width: 0 !important;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin {
    width: 100%;
    height: 72px;
    position: relative;
    background: #262626;
    padding: 0 0 0 30px;
  }
}
.c-nav-sidebar-admin .c-nav-sidebar__cover {
  margin-left: -24px;
  width: calc(100% + 48px);
  height: 72px;
  background: #157CB8;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .c-nav-sidebar__cover {
    display: none;
  }
}
.c-nav-sidebar-admin .o-header-logo {
  width: 240px;
  margin-top: 11px;
  margin-bottom: 5px;
  margin-left: -9px;
  position: relative;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .o-header-logo {
    display: none;
  }
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .o-header-logo a {
    display: inline-block !important;
  }
}
.c-nav-sidebar-admin .o-header-logo .o-header-logo__mark {
  width: 50px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .o-header-logo svg.o-header-logo__text {
    display: none;
  }
}
.c-nav-sidebar-admin .c-nav-sidebar__image-fill {
  margin-left: -24px;
  width: calc(100% + 48px);
  height: 122px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .c-nav-sidebar__image-fill {
    display: none;
  }
}
.c-nav-sidebar-admin .c-nav-sidebar__image-fill:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #262626;
  background: linear-gradient(0deg, rgb(38, 38, 38) 0%, rgba(38, 38, 38, 0) 100%);
  z-index: 1;
}
.c-nav-sidebar-admin .c-nav-sidebar__image-fill img {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  z-index: -1;
}
.c-nav-sidebar-admin .c-nav-sidebar__wrapper {
  padding-bottom: 30px;
  margin-top: -50px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .c-nav-sidebar__wrapper {
    display: flex;
    width: 100%;
    height: 72px;
    line-height: 72px;
    background: none;
    z-index: 9999999;
    padding-bottom: 0;
    margin-top: 0;
  }
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin nav.c-nav-sidebar__nav {
    display: flex !important;
  }
}
.c-nav-sidebar-admin button.c-nav-sidebar__menu-toggle {
  position: absolute;
  top: 15px;
  left: 75px;
  display: none;
  border-radius: 100px;
  background: #434A53;
  width: 48px;
  height: 48px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin button.c-nav-sidebar__menu-toggle {
    display: flex !important;
  }
}
.c-nav-sidebar-admin button.c-nav-sidebar__menu-toggle svg {
  display: flex;
  align-self: center;
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
.c-nav-sidebar-admin .c-nav-sidebar__section--header:first-of-type .c-nav-sidebar__section:before {
  background: none;
}
.c-nav-sidebar-admin .c-nav-sidebar__section {
  display: flex;
  align-items: center;
  height: 50px;
  cursor: initial;
  position: relative;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin .c-nav-sidebar__section {
    display: none !important;
  }
}
.c-nav-sidebar-admin .c-nav-sidebar__section:before {
  content: "";
  position: absolute;
  top: 0;
  left: -24px;
  width: calc(100% + 48px);
  height: 1px;
  background: #3B4048;
}
.c-nav-sidebar-admin .c-nav-sidebar__section svg {
  width: 17px;
  height: 17px;
  fill: #ffffff;
}
.c-nav-sidebar-admin .c-nav-sidebar__section .c-nav-sidebar__section-svg--large {
  width: 19px;
  height: 19px;
  fill: #ffffff;
  margin-right: -1px;
}
.c-nav-sidebar-admin a.c-nav-sidebar__item {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.875rem; /* 14/16 */
  font-weight: 500;
  height: 40px;
  line-height: 40px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin a.c-nav-sidebar__item {
    font-size: 0.9375rem; /* 15/16 */
    height: 72px;
    line-height: 72px;
    margin-right: 30px;
    white-space: nowrap;
  }
}
.c-nav-sidebar-admin a.c-nav-sidebar__item:hover {
  padding-left: 4px;
  color: #73859F;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin a.c-nav-sidebar__item:hover {
    padding-left: 0;
  }
}
.c-nav-sidebar-admin a.c-nav-sidebar__item:last-of-type {
  margin-bottom: 10px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin a.c-nav-sidebar__item:last-of-type {
    margin-bottom: 0;
  }
}
.c-nav-sidebar-admin a.c-nav-sidebar__link--active {
  color: #ffffff;
  background: #158443;
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin a.c-nav-sidebar__link--active {
    background: none;
    margin-left: 0;
    margin-right: 30px;
    padding-left: 0;
    border-left: 0;
    color: #73859F;
    border-bottom: 5px solid #73859F;
  }
}
.c-nav-sidebar-admin a.c-nav-sidebar__link--active:hover {
  color: #ffffff;
  padding-left: 24px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin a.c-nav-sidebar__link--active:hover {
    padding-left: 0;
    color: #73859F;
  }
}
.c-nav-sidebar-admin div.c-nav-sidebar__logo--mobile-menu {
  display: none;
  position: absolute;
  top: 0;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin div.c-nav-sidebar__logo--mobile-menu {
    display: block !important;
  }
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  background: #393E44;
  padding: 15px 24px 20px;
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(115, 133, 159, 0.2);
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin div.c-nav-sidebar__profile {
    margin-top: 18px;
    display: none;
  }
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
  display: block;
  color: #ffffff;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    font-size: 15px;
  }
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-controls {
  text-align: right;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-image img {
    width: 48px;
    height: 48px;
  }
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-button {
  padding: 0;
  line-height: 20px;
  height: 20px;
  margin-top: 4px;
  opacity: 0.75;
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-button:hover {
  opacity: 1;
}
.c-nav-sidebar-admin div.c-nav-sidebar__profile .c-nav-sidebar__profile-button svg {
  fill: #262626;
}

/* ==========================================================================
1b. Sidebar Admin (Open)
========================================================================== */
.c-nav-sidebar-admin--open .c-nav-sidebar__wrapper {
  display: block !important;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-nav-sidebar-admin--open .c-nav-sidebar__wrapper::-webkit-scrollbar {
  width: 0 !important;
}
@media (min-width: 1200px) {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper {
    overflow: initial;
  }
}
.c-nav-sidebar-admin--open .c-nav-sidebar__wrapper .c-nav-sidebar__link--active {
  border-right: none;
}

/* ==========================================================================
1a. Sidebar Admin
========================================================================== */
.c-nav-sidebar-enterprise {
  background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise {
    background: #262626;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__image-fill img {
  top: 0;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__image-fill:before {
  background: none;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section {
  flex-direction: column;
  align-items: flex-start;
  height: 86px;
  justify-content: center;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section {
    display: none;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section > span {
  display: block;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section .c-nav-sidebar-enterprise__title {
  color: #C0C7CF;
  font-size: 0.6875rem; /* 11/16 */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section .c-nav-sidebar-enterprise__subtitle {
  font-family: "Bitter", serif;
  font-size: 1.1875rem; /* 19/16 */
  font-weight: 700;
  color: #ffffff;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section-divider {
  height: 52px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__section-divider {
    display: none;
  }
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav ul {
    display: flex;
    flex-direction: row;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav ul::-webkit-scrollbar {
    width: 0 !important;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav li {
  height: 46px;
  line-height: 46px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav li {
    height: 72px;
    line-height: 72px;
    margin-right: 30px;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a {
  color: #ffffff;
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 500;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a:hover {
  padding-left: 4px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a:hover {
    padding-left: 0;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a.c-global-header__nav-link--active {
  position: relative;
  z-index: 0;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a.c-global-header__nav-link--active {
    color: #73859F;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a.c-global-header__nav-link--active:before {
  content: "";
  position: absolute;
  top: 0;
  left: -24px;
  border-radius: 0 9px 9px 0;
  width: calc(100% + 24px);
  height: 100%;
  background-color: #158443;
  z-index: -1;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__nav a.c-global-header__nav-link--active:before {
    top: auto;
    bottom: 0;
    height: 5px;
    width: 100%;
    left: 0;
    background-color: #73859F;
    border-radius: 0;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people {
  min-width: 100%;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people {
    display: none;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people > div {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  position: relative;
  margin-bottom: 15px;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people > div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people > div span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people > div span:first-of-type {
  color: #ffffff;
  font-size: 0.9375rem; /* 15/16 */
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__people > div span:last-of-type {
  color: #C0C7CF;
  font-size: 0.875rem; /* 14/16 */
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__callout {
  border: 2px solid #4F5661;
  border-radius: 0.5625rem;
  padding: 20px 20px 24px 20px;
}
@media (max-width: 1200px) {
  .c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__callout {
    display: none;
  }
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__callout h3 {
  font-size: 1.0625rem; /* 17/16 */
  color: #ffffff;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__callout ul {
  list-style: inherit;
  padding-left: 18px;
}
.c-nav-sidebar-enterprise .c-nav-sidebar__wrapper .c-nav-sidebar__callout ul li {
  color: #C0C7CF;
  font-size: 0.875rem; /* 14/16 */
}

/* ==========================================================================
   2. Toggle States for Mobile Menus
   ========================================================================== */
.s_show_mobile_menu .c-nav-sidebar__wrapper {
  display: block !important;
}
.s_show_mobile_menu .c-nav-sidebar__cover {
  display: block !important;
}

/* ==========================================================================
   3a. Main Navigation
   ========================================================================== */
header#c-global-header {
  height: 72px;
  background: #333333;
  padding: 0 25px 0 15px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99999;
}
@media (max-width: 600px) {
  header#c-global-header {
    z-index: 99999;
  }
}
header#c-global-header .c-global-header__logo {
  width: 240px;
  height: 50px;
  margin: 0;
  z-index: 99999;
}
@media (max-width: 992px) {
  header#c-global-header .c-global-header__logo {
    width: 50px;
  }
}
header#c-global-header .c-global-header__logo .o-header-logo__mark {
  width: 50px;
  height: 50px;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav {
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: 72px;
    padding-bottom: 36px;
    display: none;
  }
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav .u-toggle-dropdown .o-button--dark {
    display: none;
  }
}
header#c-global-header .c-global-header__nav.c-global-header__nav--show-menu {
  display: block !important;
}
header#c-global-header .c-global-header__nav > ul {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul {
    display: block;
    padding: 0 20px;
  }
}
header#c-global-header .c-global-header__nav > ul > li {
  font-size: 0.9375rem;
  font-weight: 600 !important;
  color: #ffffff;
  margin-left: 30px;
  position: relative;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li {
    margin-left: 0;
  }
}
header#c-global-header .c-global-header__nav > ul > li > a {
  font-weight: 600 !important;
  text-decoration: none;
  color: #ffffff;
  transition: border 0s;
}
header#c-global-header .c-global-header__nav > ul > li > a:hover {
  border-bottom: 2px solid #73859F;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li > a {
    height: 54px;
    line-height: 54px;
    font-family: "Bitter";
    font-size: 17px;
  }
}
header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
  border-bottom: 2px solid #73859F;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
    border: 0;
  }
}
header#c-global-header .c-global-header__nav > ul > li a {
  text-decoration: none;
}
header#c-global-header .c-global-header__nav > ul > li > span {
  font-weight: 600 !important;
}
@media (max-width: 600px) {
  header#c-global-header .c-global-header__nav .c-global-header__search {
    background: #333333;
    height: 48px;
    border-radius: 100px;
    width: 100%;
    margin-top: 10px;
  }
  header#c-global-header .c-global-header__nav .c-global-header__search .l-button__search {
    left: 20px;
  }
}
header#c-global-header .c-global-header__nav .c-global-header__search span {
  position: relative;
  text-decoration: none;
}
@media (max-width: 600px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span:hover:before {
    display: none;
  }
}
@media (max-width: 600px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span {
    padding-left: 24px;
  }
}
header#c-global-header .c-global-header__nav .c-global-header__search span:hover:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #73859F;
  bottom: 1px;
}
header#c-global-header .c-global-header__nav .c-global-e-header__ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
header#c-global-header .c-global-header__nav .c-global-e-header__ul > li > a.c-global-header__nav-link--active {
  padding-bottom: 25px;
}
header#c-global-header .c-global-header__user {
  margin-left: auto;
  display: flex;
  z-index: 999;
}
header#c-global-header .c-global-header__user ul {
  margin-bottom: 0;
}
header#c-global-header .c-global-header__user a {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  margin-left: 15px;
}
header#c-global-header .c-global-header__user a.c-global-header__user-login {
  transition: border 0s;
}
header#c-global-header .c-global-header__user a.c-global-header__user-login:hover {
  border-bottom: 2px solid #73859F;
}
header#c-global-header .c-global-header__user .l-button__nub {
  top: 0;
  margin-left: 2px;
}
header#c-global-header .c-global-header__user .c-global-header__action {
  width: 126px;
}
@media (max-width: 360px) {
  header#c-global-header .c-global-header__user .c-global-header__action {
    display: none;
  }
}
header#c-global-header .c-global-header__user .c-global-header__action a {
  width: 126px;
  height: 126px;
  border-radius: 100px;
  background: #158443;
  display: flex;
  align-items: center;
  font-family: "Bitter", serif;
  text-align: center;
  line-height: 1.25;
  position: absolute;
  top: -64px;
}
header#c-global-header .c-global-header__user .c-global-header__action a:hover {
  background: rgb(23.1, 145.2, 73.7);
}
header#c-global-header .c-global-header__user .c-global-header__action a span {
  position: relative;
  top: 25px;
}
header#c-global-header .c-global-header__user .c-global-header__action a span:hover {
  text-decoration: none;
}

/* ==========================================================================
   3b. Main Navigation (Enterprise)
   ========================================================================== */
header.c-global-header--enterprise {
  box-shadow: 0 2px 50px 0 rgba(0, 0, 0, 0.33);
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
}
@media (max-width: 768px) {
  header.c-global-header--enterprise {
    display: flex !important;
  }
}

/* ==========================================================================
   4. Explore: 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__upper {
  padding: 30px;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper {
    padding: 12px 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 18px;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    grid-template-columns: 1fr;
    grid-row-gap: 18px;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
  border-right: 1px solid rgba(50, 54, 58, 0.5);
  padding: 0;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
    border: 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:last-child {
  border-right: 0;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:nth-of-type(3) {
    border-right: 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower {
  background-color: #1a1a1a;
  padding: 8px 30px;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower {
    display: none;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul {
  display: flex;
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li {
  padding: 0;
  margin-right: 40px;
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li:last-child {
  margin-right: 0;
  margin-left: auto;
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.8125rem !important; /* 13/16 */
  font-weight: 400 !important;
  color: #DBDDE0 !important;
  display: flex;
  align-items: center;
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a svg {
  margin-right: 10px;
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a:hover {
  text-decoration: underline !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__lead {
  font-size: 1rem; /* 18/16 */
  color: #C0C7CF;
}
.c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
  font-family: "Bitter", serif;
  font-weight: 700 !important;
  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 span.o-dropdown-menu__subtitle {
  margin-top: 0;
  color: #C0C7CF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.8125rem; /* 13/16 */
  font-weight: 400 !important;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    color: #C0C7CF;
  }
}
.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 .c-dropdown-menu__established--no-hover:hover {
  background: none;
}
.c-dropdown-menu--expanded .c-dropdown-menu__established--no-hover:before {
  display: none;
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks li {
  height: auto;
  padding: 0;
  margin-top: 8px;
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:first-child {
  margin-top: 2px;
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:last-child {
  margin-bottom: 4px;
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a {
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: white !important;
  font-size: 0.8125rem !important;
  font-weight: 400;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a:hover {
  text-decoration: underline !important;
}

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

/* ==========================================================================
5. User: Dropdown Menu
========================================================================== */
.l-dropdown-menu-user {
  right: -22px;
  top: 42px;
}
@media (max-width: 600px) {
  .l-dropdown-menu-user {
    top: 52px;
    left: -160px;
    width: 270px;
  }
  .l-dropdown-menu-user:before {
    display: none;
  }
}
@media (max-width: 360px) {
  .l-dropdown-menu-user {
    left: auto;
    right: 10px;
  }
}
.l-dropdown-menu-user:before {
  left: auto;
  right: 45px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5625rem;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon svg {
  fill: #ffffff;
  width: 18px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--admin {
  background: #3B4048;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--admin svg {
  width: 20px;
  height: 20px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--team {
  background: #3268a6;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--team svg {
  top: -1px;
  position: relative;
  width: 21px;
  height: 21px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--subscription {
  background: #3268a6;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--subscription svg {
  position: relative;
  width: 21px;
  height: 21px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--account {
  background: #158443;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--newsletter {
  background: #157CB8;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--products {
  background: #FD7401;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--products svg {
  width: 11px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--receipt {
  background: #FCB526;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--receipt svg {
  width: 26px;
  height: 26px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks {
  background: #585E66;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks svg {
  width: 12px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--forums {
  background: #41AEA4;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--forums svg {
  width: 18px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--support {
  background: #687BAD;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--support svg {
  width: 9px;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--logout {
  background: #CF3B2B;
}
.l-dropdown-menu-user i.o-dropdown-menu__icon--logout svg {
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);
}

/* ==========================================================================
6. Pillar Navigation
========================================================================== */
nav#c-pillar-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  nav#c-pillar-navigation {
    padding: 0;
  }
}
nav#c-pillar-navigation > div {
  width: 100%;
}
nav#c-pillar-navigation ul {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: scroll;
}
@media (max-width: 600px) {
  nav#c-pillar-navigation ul {
    justify-content: flex-start;
  }
}
nav#c-pillar-navigation ul li {
  padding: 0 15px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  nav#c-pillar-navigation ul li:first-child {
    padding-left: 35px;
  }
}
@media (max-width: 768px) {
  nav#c-pillar-navigation ul li:last-child {
    padding-right: 30px;
  }
}
nav#c-pillar-navigation ul li a {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
  color: #333333;
  text-decoration: none;
}
nav#c-pillar-navigation ul li a:hover {
  color: #158443;
}
nav#c-pillar-navigation ul li a.active {
  color: #158443;
}

/* ==========================================================================
6. Footer
========================================================================== */
footer#c-global-footer {
  background-color: #333333;
  padding: 30px;
  position: relative;
  z-index: 9999999;
  overflow: hidden;
}
footer#c-global-footer:before {
  content: "";
  position: absolute;
  top: -80px;
  right: 0;
  z-index: 0;
  width: 200px;
  height: 327px;
  background-image: url(/assets/artwork/devices-outline-06aea0bcb7c18d3c7df5a7abdc003d44a2e6925a3569cec2b23c230832283d8c.svg);
  background-size: 200px;
  background-repeat: no-repeat;
  opacity: 0.3;
}
footer#c-global-footer .c-global-footer__wrapper {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
  grid-column-gap: 24px;
  position: relative;
}
@media (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper {
    margin-bottom: 30px;
  }
}
@media (max-width: 1080px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "logo logo logo logo";
  }
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo logo";
  }
}
@media (max-width: 600px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "logo";
  }
}
@media (max-width: 1080px) {
  footer#c-global-footer .c-global-footer__wrapper .c-global-footer__logo {
    grid-area: logo;
    max-width: 25%;
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper .c-global-footer__logo {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper > div {
    padding-right: 0;
  }
}
footer#c-global-footer .c-global-footer__wrapper > div .o-header-logo {
  width: 240px;
}
footer#c-global-footer .c-global-footer__wrapper > div .o-header-logo .o-header-logo__mark {
  position: relative;
  width: 40px;
  fill: #ffffff;
}
footer#c-global-footer .c-global-footer__wrapper > div h4 {
  color: #ffffff;
  font-size: 1rem; /* 18/16 */
}
footer#c-global-footer .c-global-footer__wrapper > div p {
  color: #C0C7CF;
  font-size: 0.875rem; /* 14/16 */
}
footer#c-global-footer .c-global-footer__wrapper > div ul {
  padding-left: 0;
  margin-bottom: 0;
}
@media (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr;
  }
}
footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li {
  margin-bottom: 10px;
}
footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a {
  transition: border 0s;
}
footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a:hover {
  border-bottom: 2px solid #73859F;
}
footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__newsletter-text img {
  max-width: 60px;
}
@media (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__newsletter-text img {
    display: none;
  }
}
footer#c-global-footer .c-global-footer__wrapper > div ul li a {
  color: #C0C7CF;
  font-size: 0.875rem;
  text-decoration: none;
}
footer#c-global-footer .c-global-footer__wrapper > div input {
  width: 100%;
  margin-top: 21px;
}
footer#c-global-footer .c-global-footer__wrapper > div .o-icon-button--tiny {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -12px;
}
footer#c-global-footer .c-global-footer__copyright {
  max-width: 1380px;
  margin: 50px auto 0;
  align-self: flex-end;
  position: relative;
  z-index: 1;
  border-top: 1px solid #434A53;
  padding-top: 30px;
}
footer#c-global-footer .c-global-footer__copyright ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul {
    display: block;
    text-align: center;
  }
}
footer#c-global-footer .c-global-footer__copyright ul li, footer#c-global-footer .c-global-footer__copyright ul a {
  font-size: 0.875rem; /* 14/16 */
  color: #C0C7CF;
}
footer#c-global-footer .c-global-footer__copyright ul a {
  text-decoration: none;
  transition: border 0s;
}
footer#c-global-footer .c-global-footer__copyright ul a:hover {
  border-bottom: 2px solid #73859F;
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul a {
    margin-top: 6px;
  }
}

/* ==========================================================================
8. Tabs
========================================================================== */
.c-tabs {
  display: flex;
  align-items: center;
  height: 54px;
  border-bottom: 2px solid #DBE8F3;
  width: 100%;
}
.c-tabs li {
  display: flex;
  align-items: center;
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  font-weight: 600;
  height: 100%;
  margin: 0 12px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.c-tabs li:first-child {
  margin-left: 0;
}
.c-tabs li.c-tabs--active {
  color: #157CB8;
}
.c-tabs li.c-tabs--active a {
  color: #157CB8;
}
.c-tabs li.c-tabs--active:before {
  content: "";
  bottom: -2px;
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #157CB8;
}
.c-tabs li.c-tabs--title {
  font-family: "Bitter", serif;
  font-size: 2.25rem; /* 36/16 */
  font-weight: 700;
  letter-spacing: -0.5px;
  cursor: inherit;
}
@media (max-width: 768px) {
  .c-tabs li.c-tabs--title {
    display: none;
  }
}
.c-tabs li.c-tabs--title:after {
  content: "";
  position: absolute;
  width: calc(100% + 30px);
  height: 2px;
  left: 0;
  bottom: -2px;
  background: #ffffff;
}
.c-tabs li a {
  text-decoration: none;
  color: #333333;
}

.c-tabs--dark {
  border-bottom: 2px solid #434A53;
}
.c-tabs--dark a {
  color: #C0C7CF;
}
.c-tabs--dark .c-tabs--active a {
  color: #ffffff !important;
}

.c-tabs--normalize a {
  font-size: 0.9375rem; /* 15/16 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 700;
}

.l-admin .c-tabs a {
  color: #C0C7CF;
}

.c-tabs-wrapper {
  background: #333333;
}

.c-tabs--emphasis {
  border-bottom: 0;
  height: auto;
  position: relative;
  z-index: 0;
}
@media (max-width: 768px) {
  .c-tabs--emphasis {
    width: calc(100% + 30px);
  }
}
.c-tabs--emphasis ul {
  width: 100%;
}
.c-tabs--emphasis > li > ul > li {
  border-right: 2px solid #3B4048;
  margin: 0;
}
.c-tabs--emphasis li {
  font-family: "Bitter", serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18/16 */
  letter-spacing: -0.25px;
}
.c-tabs--emphasis li span {
  font-weight: 500;
}
.c-tabs--emphasis li a {
  text-decoration: none;
  color: #ffffff;
  padding: 36px 30px;
  z-index: 1;
}
.c-tabs--emphasis li a:hover {
  background: #3B4048;
}
.c-tabs--emphasis li a svg {
  fill: #ffffff;
}
.c-tabs--emphasis li .c-tabs__link--start {
  background: #3268A6;
}
.c-tabs--emphasis li .c-tabs__link--start:hover {
  background: rgb(53.5416666667, 111.3666666667, 177.7583333333);
}
.c-tabs--emphasis li.c-tabs--active {
  background: #3B4048;
}
.c-tabs--emphasis li.c-tabs--active:before {
  content: "";
  position: absolute;
  background: #ffffff;
  bottom: -12px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  transform: rotate(45deg);
  border-radius: 3px;
  z-index: 99;
}
@media (max-width: 992px) {
  .c-tabs--emphasis li.c-tabs--active:before {
    display: none;
  }
}

/* ==========================================================================
9. Circle Stepper
========================================================================== */
.c-circle-stepper {
  display: flex;
}
.c-circle-stepper i {
  cursor: pointer;
  background: #DBDDE0;
  width: 9px;
  height: 9px;
  margin: 0 6px;
  border-radius: 100px;
}
.c-circle-stepper .c-circle-stepper--active {
  background: #158443;
}

/* ==========================================================================
   10a. Paginator
   ========================================================================== */
.c-paginator a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  text-align: center;
  color: #333333;
  line-height: 16px;
  padding: 12px 16px;
  cursor: pointer;
}
.c-paginator a:hover {
  background: #F5F8FB;
}
.c-paginator a span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-paginator a svg {
  width: 16px;
  height: 16px;
  fill: #C0C7CF;
}
.c-paginator .c-paginator__back:hover svg {
  transform: translateX(-5px);
}
.c-paginator .c-paginator__back span {
  margin-right: auto;
  margin-right: auto;
}
.c-paginator .c-paginator__back span {
  margin-left: -41px;
}
.c-paginator .c-paginator__back svg {
  transition: all 0.25s;
}
.c-paginator .c-paginator__forward:hover svg {
  transform: translateX(5px);
}
.c-paginator .c-paginator__forward span, .c-paginator .c-paginator__forward svg {
  margin-left: auto;
  margin-left: auto;
}
.c-paginator .c-paginator__forward span {
  margin-right: -41px;
}
.c-paginator .c-paginator__forward svg {
  transition: all 0.25s;
  margin-right: 24px;
}
.c-paginator .c-paginator__pages {
  display: flex;
}
.c-paginator .c-paginator__pages .c-paginator__pages--active {
  cursor: default;
  color: #0E0F14;
  background-color: #FFFFFF;
  text-decoration: none;
}
.c-paginator .c-paginator__pages a {
  padding: 12px 16px;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  margin: 0 4px;
}

.c-paginator--no-hover a:hover {
  background: none;
}

/* ==========================================================================
   10b. Paginator (Dark)
   ========================================================================== */
.c-paginator--dark a {
  color: #ffffff;
}
.c-paginator--dark a:hover {
  background: #FFFFFF;
}
.c-paginator--dark a.c-paginator__pages--active {
  color: #0E0F14;
}
.c-paginator--dark a svg {
  fill: #FFFFFF;
}

.c-paginator--dark-no-hover a:hover {
  background: none;
}

/**
* Pricing
*
* Floating card adverts containing title, paragraph, graphic and link
*
* 1. Pricing Cards
*
*/
/* ==========================================================================
1. Pricing cards
========================================================================== */
.c-price-card {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  text-align: center;
  width: 300px;
  height: 0%;
  padding: 30px 0 40px;
  margin: 0 20px;
}
.c-price-card h4 {
  font-size: 1.125rem; /* 18/16 */
  font-weight: 700;
}
.c-price-card .c-price-card__price span {
  font-family: "Bitter", serif;
}
.c-price-card .c-price-card__price .c-price-card__price-currency {
  font-size: 1.25rem; /* 20/16 */
  margin-right: -6px;
}
.c-price-card .c-price-card__price .c-price-card__price-main {
  font-size: 7.5rem; /* 140/16 */
  line-height: 100px;
  letter-spacing: -5px;
}
.c-price-card .c-price-card__price .c-price-card__price-change {
  margin-left: -6px;
  position: relative;
  top: -75px;
}
.c-price-card .c-price-card__price .c-price-card__price-main-saving {
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #FD7401;
  text-transform: uppercase;
  display: block;
}
.c-price-card .c-price-card__period {
  display: block;
  font-family: "Bitter", serif;
}
.c-price-card .c-price-card__saving {
  display: block;
  font-size: 0.875rem; /* 14/16 */
  color: #73859F;
}

/**
* Product components
*
* 1. Product Card
*
* 2. Product Card (Owned)
*
*/
/* ==========================================================================
1. Product Card
========================================================================== */
.c-product-item {
  position: relative;
  border-radius: 0.5625rem;
  padding-bottom: 27px;
  margin-top: 60px;
}
@media (max-width: 600px) {
  .c-product-item {
    padding-bottom: 0;
  }
}
.c-product-item:hover {
  background: #F2F6FA;
}
@media (max-width: 600px) {
  .c-product-item:hover {
    background: #ffffff;
  }
}
.c-product-item a {
  text-decoration: none;
}
.c-product-item .c-product-item__artwork {
  padding: 0 21px;
  margin-top: -60px;
  position: relative;
}
@media (max-width: 600px) {
  .c-product-item .c-product-item__artwork {
    padding: 0 12px;
  }
}
.c-product-item .c-product-item__artwork .o-badge {
  position: absolute;
  top: -5px;
  left: 15px;
}
.c-product-item .c-product-item__artwork img {
  max-width: 100%;
}
.c-product-item .c-product-item__content {
  padding: 0 24px;
  margin-top: 18px;
}
@media (max-width: 600px) {
  .c-product-item .c-product-item__content {
    padding: 0;
    max-height: none;
    overflow: visible;
  }
}
.c-product-item .c-product-item__title {
  font-size: 1.25rem; /* 20/16 */
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
}
@media (max-width: 600px) {
  .c-product-item .c-product-item__title {
    line-height: 1.35 !important;
  }
}
.c-product-item .c-product-item__price {
  font-family: "Bitter", serif;
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 700;
  color: #333333;
}
.c-product-item .c-product-item__price .c-product-item__price-sale {
  color: #CF3B2B;
}
.c-product-item .c-product-item__price .c-product-item__price-original {
  color: #959DA5;
  font-weight: 500;
  text-decoration: line-through;
  padding-left: 3px;
}
.c-product-item .c-product-item__description {
  font-size: 14px;
  color: #6E7687;
  margin-top: 12px;
  margin-bottom: 0;
}

/* ==========================================================================
2. Product Card (Owned)
========================================================================== */
.c-product-item--owned .c-product-item-info {
  display: none;
}
.c-product-item--owned .c-product-item__options-link {
  display: block;
  font-size: 0.875rem; /* 14/16 */
  color: #158443;
  text-decoration: underline;
  margin-top: 18px;
}
.c-product-item--owned .o-button--green {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  margin-top: -66px;
  height: 40px;
  line-height: 40px;
  padding: 9px;
}
.c-product-item--owned .o-button--green:hover .o-tooltip {
  visibility: visible;
  opacity: 1;
  left: auto;
  right: -110px;
}
.c-product-item--owned .o-button--green:hover .o-tooltip:after {
  left: auto;
  right: 11px;
}
.c-product-item--owned .o-button--green i {
  margin: 0;
}

/* ==========================================================================
3. Product Card (Hover)
========================================================================== */
.c-product-item-info {
  border-radius: 0.5625rem;
  background: #ffffff;
  padding: 24px;
  position: absolute;
  top: -65px;
  left: -350px;
  box-shadow: 0 0 24px 0 rgba(51, 51, 51, 0.3);
  z-index: 999;
  width: 350px;
  display: none;
}
.c-product-item-info .c-product-item-info__title {
  font-size: 1.5rem; /* 24/16 */
  font-weight: 700;
  padding-top: 0;
}
.c-product-item-info .c-product-item-info__subtitle {
  font-size: 0.9375rem;
  font-weight: 700;
  padding-top: 0;
}
.c-product-item-info .c-product-item-info__description {
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
}
.c-product-item-info .c-product-item-info__description a {
  color: #158443;
  text-decoration: underline;
}

.c-product-item:hover .c-product-item-info {
  display: block;
}

.c-product-item:nth-child(3n+1) .c-product-item-info {
  left: auto;
  right: -350px;
}

/**
* Rating components
*
* 1. Rating Form
*
*
*/
/* ==========================================================================
1. Rating Form
========================================================================== */
.c-rate-review > div {
  grid-template-columns: 1fr auto 1fr;
}
.c-rate-review .c-rate-review__star {
  display: inline-flex;
  justify-content: center;
  background: #CACED2;
  margin: 0 3px;
}
.c-rate-review .c-rate-review__star--green {
  background: #158443;
}

/**
* Lists
*
* List components
*
* 1. Checkmarks List
*
* 2. Onboarding Progress
*
* 3a. Admin Wrapper
*
* 3b. Admin Table Row
*
* 3c. Admin Table
*
* 3d. Admin Custom Layout Classes
*
* 4. Feature Checklist (Large)
*
* 5. Reports Table
*
*/
/* ==========================================================================
1. Checkmarks List
========================================================================== */
.c-list-checkmark {
  list-style: none;
}
.c-list-checkmark li {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  font-weight: 700;
  position: relative;
  margin-top: 15px;
  padding-left: 36px;
}
@media (max-width: 768px) {
  .c-list-checkmark li {
    font-size: 1rem;
  }
}
.c-list-checkmark li:before {
  content: "";
  width: 24px;
  height: 24px;
  background: #ffffff;
  background-image: url(/assets/svg-icons/checkmark--green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
  background-size: cover;
  border-radius: 0.5625rem;
  position: absolute;
  left: 0;
  top: 3px;
}

.c-list-checkmark--white li {
  color: #ffffff;
}

/* ==========================================================================
2. Onboarding Progress
========================================================================== */
.c-onboarding-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
}
.c-onboarding-progress li {
  min-width: 27px;
  height: 27px;
  background: #434A53;
  border-radius: 0.5625rem;
  font-family: "Bitter", serif;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  position: relative;
}
.c-onboarding-progress li .o-tooltip {
  background: #434A53;
}
.c-onboarding-progress li .o-tooltip:after {
  background: #434A53;
}
.c-onboarding-progress li .c-onboarding-progress__step {
  width: 27px;
  line-height: 26px;
}
.c-onboarding-progress li.c-onboarding-progress__bar {
  background: #DFE7F0;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  margin: 0 9px;
}
.c-onboarding-progress li.c-onboarding-progress__bar:before {
  width: 0;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--in-progress:before {
  content: "";
  width: 50%;
  height: 100%;
  border-radius: 100px;
  background: #158443;
  position: absolute;
  left: 0;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--complete {
  background: #DFE7F0;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--complete:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: #158443;
  position: absolute;
  left: 0;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--complete-animate:before {
  animation: a-grow 1s;
}
.c-onboarding-progress li.c-onboarding-progress--complete {
  background: #158443;
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
}
.c-onboarding-progress li.c-onboarding-progress--complete .c-onboarding-progress__step {
  display: none;
}
.c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip {
  background: #158443;
}
.c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip:after {
  background: #158443;
}
.c-onboarding-progress li .o-tooltip {
  visibility: visible;
  opacity: 1;
  top: -50px;
  height: 36px;
  line-height: 17px;
}
@media (max-width: 992px) {
  .c-onboarding-progress li .o-tooltip {
    display: none;
  }
}
.c-onboarding-progress li .o-tooltip:after {
  top: 20px;
}

.c-onboarding-progress--dark .c-onboarding-progress__bar {
  background: #434A53 !important;
}

/* ==========================================================================
3a. Wrapper
========================================================================== */
.c-list-item-wrapper {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 75px;
  padding: 0 24px;
  margin-bottom: 10px;
  position: relative;
}

@media (max-width: 992px) {
  .c-list-item-wrapper--mobile:before {
    content: "";
    position: absolute;
    top: 14px;
    right: 23px;
    height: calc(100% - 24px);
    width: 33px;
    background-image: url(/assets/svg-icons/overflow-indicator@2x-93b9e93a3f809a61a3be74da109c88b81ecfad0099ea34e9c235f3e694112001.png);
    background-size: 100%;
    z-index: 9999;
  }
}

/* ==========================================================================
3b. Table Row
========================================================================== */
.c-table__row {
  display: flex;
  width: 100%;
  align-items: center;
}
.c-table__row .c-table__image {
  width: 54px;
  height: 54px;
  margin-right: 15px;
  background: #D6E0EF;
  border-radius: 0.5625rem;
  overflow: hidden;
}
.c-table__row .c-table__image img {
  width: 100%;
  height: 100%;
}
.c-table__row .c-table__image--float {
  background: none;
  position: relative;
}
.c-table__row .c-table__image--float img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -27px 0 0 -27px;
}
.c-table__row .c-table__image--offset {
  margin-left: -9px;
}
.c-table__row .c-table__copy {
  flex: 1;
}
.c-table__row .c-table__copy a {
  display: block;
  text-decoration: none;
}
.c-table__row .c-table__copy a:hover .c-table__row-title {
  color: #158443;
}
.c-table__row .c-table__copy .c-table__row-title {
  font-family: "Bitter", serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s;
  padding-right: 30px;
  letter-spacing: -0.5px;
}
.c-table__row .c-table__copy .c-table__row-subtitle {
  font-size: 0.9375rem;
  text-decoration: none;
  color: #6E7687;
  padding-right: 45px;
}
.c-table__row .c-table__copy .c-table__row-subtitle a.c-table__row-subtitle-link {
  display: inline-block;
  color: #158443;
  text-decoration: underline;
}
.c-table__row .c-table__row-data {
  padding-right: 20px;
}
.c-table__row .c-table__row-data span {
  display: block;
}
.c-table__row .c-table__row-data a {
  color: #158443;
}
.c-table__row .c-table__row-data .o-badge {
  display: inline-block;
}
.c-table__row .c-table__row-data--overflow {
  text-overflow: ellipsis;
  word-break: normal !important;
  overflow: hidden;
  height: 100%;
  position: relative;
  white-space: nowrap;
}
.c-table__row .c-table__row-data--overflow span {
  text-overflow: ellipsis;
  word-break: normal !important;
  overflow: hidden;
  height: 100%;
  position: relative;
}
.c-table__row .c-table__row-data--email {
  font-size: 0.875rem; /* 14/16 */
}
.c-table__row .c-table__row-control {
  position: relative;
  margin-left: auto;
}
.c-table__row .c-table__row-control .c-table__row-checkbox {
  top: 50%;
  margin-top: -13px;
  right: 0;
}
.c-table__row .c-table__row-control .o-icon-button:hover .o-dropdown-menu {
  display: block;
}
.c-table__row .c-table__row-control .o-dropdown-menu {
  top: 33px;
  right: 0;
  width: 210px;
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 -2px 4px 0px rgba(0, 0, 0, 0.05);
}
.c-table__row .c-table__row-control .o-dropdown-menu:before {
  display: none;
}
.c-table__row .c-table__row-control .o-dropdown-menu li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9375rem; /* 15/16 */
  height: 42px;
}
.c-table__row .c-table__row-control .o-dropdown-menu li:hover {
  background: #F8FAFC;
}
@media (max-width: 992px) {
  .c-table__row .c-table__row-control .o-dropdown-menu li button {
    text-decoration: underline;
  }
}
.c-table__row .c-table__row-control--left {
  margin-left: 0 !important;
}
.c-table__row .c-table__row-control--left .c-table__row-checkbox {
  left: 0;
}

.c-table__row-align-right > div:last-child {
  text-align: right;
  padding-right: 20px;
}

@media (max-width: 992px) {
  .c-table__row--mobile {
    overflow-x: scroll;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-table__row--mobile::-webkit-scrollbar {
    width: 0 !important;
  }
  .c-table__row--mobile {
    position: relative;
  }
  .c-table__row--mobile::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-table__row--mobile .c-table__row-data {
    white-space: nowrap;
  }
}
@media (max-width: 992px) {
  .c-table__row--mobile .o-icon-button--more svg {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-table__row--mobile .o-dropdown-menu {
    display: flex !important;
    width: auto;
    position: relative;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
  }
}
@media (max-width: 992px) {
  .c-table__row--mobile .o-dropdown-menu li {
    display: flex;
    white-space: nowrap;
  }
}
@media (max-width: 992px) {
  .c-table__row--mobile .o-dropdown-menu li:hover {
    background: none !important;
  }
}

/* ==========================================================================
3c. Admin Table
========================================================================== */
.c-table-list {
  padding: 8px 24px;
}
.c-table-list .table__col-title {
  border-bottom: 1px solid #EFF3F6;
}
.c-table-list .c-table__row {
  padding: 21px 0;
  border-bottom: 1px solid #EFF3F6;
  align-items: top;
}
.c-table-list .c-table__row:last-child {
  border-bottom: 0;
}
.c-table-list .c-table__row .c-table__image {
  width: 42px;
  height: 42px;
}
.c-table-list .c-table__row .c-table__copy .c-table__row-title {
  font-size: 1.0625em;
}
.c-table-list .l-table__row--height {
  padding: 15px 0;
}
.c-table-list .c-table__header {
  padding: 10px 0;
}
.c-table-list .c-table__header span {
  font-family: "Bitter", serif;
  font-weight: 700;
  font-size: 1.125rem;
}
.c-table-list .c-table__header .c-table__header-toggle--none {
  display: flex;
  cursor: pointer;
}
.c-table-list .c-table__header .c-table__header-toggle--none span {
  font-size: 1.0625rem;
}
.c-table-list .c-table__header .c-table__header-toggle--none svg {
  display: none;
}
.c-table-list .c-table__header .c-table__header-toggle {
  display: flex;
  cursor: pointer;
}
.c-table-list .c-table__header .c-table__header-toggle span {
  font-size: 1.0625rem;
}
.c-table-list .c-table__header .c-table__header-toggle svg {
  width: 12px;
  height: 12px;
  margin-left: 7px;
  fill: #333333;
}
.c-table-list .c-table__header .c-table__header-toggle--reverse svg {
  transform: rotate(180deg);
}

.c-table-list--dark {
  background-color: transparent;
  border: 2px solid #3B4048;
}
.c-table-list--dark:before {
  background-image: none;
}
.c-table-list--dark .c-table__row {
  border-color: #434A53;
}
.c-table-list--dark .c-table__row .c-table__row-data > span {
  color: #ffffff;
}
.c-table-list--dark .c-table__row .c-table__row-data > .o-badge {
  color: #333333;
}
.c-table-list--dark .c-table__header .c-table__row-data {
  color: #ffffff;
}
.c-table-list--dark .c-table__header .c-table__row-data svg {
  fill: #ffffff;
}

/* ==========================================================================
3d. Custom Layout Classes
========================================================================== */
.l-list-item-wrapper:first-child {
  margin-top: 30px;
}

/* ==========================================================================
3e. Columns for table rows
========================================================================== */
.c-table__row--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.c-table__row--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.c-table__row--6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.c-table__row--commissions {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr);
}
@media (max-width: 768px) {
  .c-table__row--commissions {
    grid-template-columns: 200px 100px 100px 100px 100px 100px 120px;
  }
}
.c-table__row--commissions .c-table__row-data {
  padding-right: 0px;
}
.c-table__row--commissions.c-table__row-align-right > div:last-child {
  padding-right: 0px;
}

/* ==========================================================================
4. Feature Checklist (Large)
========================================================================== */
.c-feature-checklist {
  border-radius: 0.5625rem;
  overflow: hidden;
  background: #ffffff;
}
.c-feature-checklist .c-feature-checklist__entry {
  padding: 15px 27px 24px;
  position: relative;
  min-height: 120px;
}
.c-feature-checklist .c-feature-checklist__entry:nth-of-type(odd) {
  background: rgba(167, 173, 180, 0.1);
}
.c-feature-checklist .c-feature-checklist__entry--checkmark:before {
  content: "";
  position: absolute;
  right: 27px;
  top: 50%;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  background: url(/assets/svg-icons/checkmark--green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
  background-size: 100%;
}
.c-feature-checklist .c-feature-checklist__title {
  font-size: 1.3125rem; /* 21/16 */
  font-weight: 700;
  color: #333333;
  margin: 0;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .c-feature-checklist .c-feature-checklist__title {
    font-size: 1.25rem; /* 15/16 */
  }
}
.c-feature-checklist .c-feature-checklist__title .o-badge {
  position: relative;
  top: -2px;
  right: -3px;
}
.c-feature-checklist .c-feature-checklist__description {
  color: #6E7687;
  margin: 6px 0 0 0;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .c-feature-checklist .c-feature-checklist__description {
    font-size: 0.9375rem; /* 15/16 */
  }
}

.c-feature-checklist--dark {
  background: #3B4048;
}
.c-feature-checklist--dark .c-feature-checklist__title {
  color: #ffffff;
}
.c-feature-checklist--dark .c-feature-checklist__description {
  color: #C0C7CF;
}

/* ==========================================================================
5. Reports Table
========================================================================== */
.c-reports-table {
  border-collapse: separate;
  border: solid #434A53 2px;
  border-radius: 0.5625rem;
  padding: 24px;
  min-width: 1200px;
}
.c-reports-table thead th, .c-reports-table thead a {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
  padding-top: 0;
}
.c-reports-table td, .c-reports-table th {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: solid #434A53 1px;
}
.c-reports-table th {
  text-align: left;
  border-top: none;
}
.c-reports-table th a {
  color: #ffffff;
  text-decoration: none;
}
.c-reports-table td:first-child, .c-reports-table th:first-child {
  padding-left: 0;
  padding-right: 0;
  border-left: none;
}
.c-reports-table .c-modal {
  background-color: rgba(34, 34, 34, 0.9) !important;
}
.c-reports-table .c-modal .c-modal-wrapper {
  background-color: #3B4048;
  padding: 24px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__close {
  background: transparent;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__close svg {
  fill: #C0C7CF;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__header {
  position: relative;
  padding-left: 92px;
  padding-bottom: 21px;
  min-height: 80px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__header img {
  position: absolute;
  left: 0;
  top: -3px;
  width: 80px;
  height: 80px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__header h3 {
  color: #ffffff !important;
  font-size: 1.25rem; /* 20/16 */
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__header p {
  color: #C0C7CF;
  font-size: 0.9375rem; /* 15/16 */
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list {
  margin-top: 10px;
  padding-top: 12px;
  min-width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  border-top: 1px solid #434A53;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > p {
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  color: #C0C7CF;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > div {
  padding-left: 52px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > div span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > div span:first-of-type {
  color: #ffffff;
  margin-top: -3px;
}
.c-reports-table .c-modal .c-modal-wrapper .c-modal__list > div span:last-of-type {
  color: #C0C7CF;
  font-size: 0.875em; /* 14/16 */
}

/**
* License components
*
* 1. Manage Licenses
*
*/
/* ==========================================================================
1. Manage Licenses
========================================================================== */
.c-manage-licenses__number {
  width: 245px;
  height: 245px;
  background-image: url(/assets/svg-icons/donut--grey-06bcb93897cd08c1104bf65cad33c6f456c4026fc8299ab99d77121e51d710e5.png);
  background-size: cover;
}
.c-manage-licenses__number span {
  font-family: "Bitter", serif;
  font-weight: 700;
}
.c-manage-licenses__number .c-manage-licenses__number-key {
  display: block;
  font-size: 6.375rem; /* 102/16 */
  letter-spacing: -3px;
  line-height: 1;
}
.c-manage-licenses__number .c-manage-licenses__number-label {
  display: block;
  font-size: 1.25rem; /* 20/16 */
}

/**
* FAQ component
*
* Styles for Q & A's
*
* 1a. FAQ
*
* 1b. FAQ (Large)
*
* 1c. FAQ (Dark)
*
* 1d. FAQ (Yellow)
*
*/
/* ==========================================================================
1a. FAQ
========================================================================== */
.c-faq h2 {
  margin-top: 54px;
}
@media (max-width: 600px) {
  .c-faq h2 {
    font-size: 1.3125rem;
  }
}
.c-faq .c-faq__item {
  padding: 24px 0 24px 35px;
}
.c-faq .c-faq__item [role=button] {
  cursor: pointer;
}
.c-faq .c-faq__item [role=button].active i, .c-faq .c-faq__item [role=button][aria-expanded=true] i {
  transform: rotate(180deg);
}
.c-faq .c-faq__item [role=button] i {
  position: absolute;
  top: -3px;
  left: -34px;
  pointer-events: none;
  transition: transform 0.3s ease-in-out;
}
.c-faq .c-faq__item h3 {
  font-size: 1.125rem; /* 18/16 */
  line-height: 1.35 !important;
  line-height: 20px;
  position: relative;
}
.c-faq .c-faq__item p {
  position: relative;
  color: #6E7687;
  font-size: 1rem;
  margin-top: 17px;
}
@media (max-width: 600px) {
  .c-faq .c-faq__item p {
    font-size: 0.9375rem;
  }
}
.c-faq .c-faq__item p a {
  color: #158443;
  word-break: break-word;
}
.c-faq .c-faq__item p a, .c-faq .c-faq__item p b {
  font-weight: bold;
}
.c-faq .c-faq__item ul, .c-faq .c-faq__item ol {
  padding-left: 20px;
  margin-top: 17px;
  color: #6E7687;
}
.c-faq .c-faq__item ul li, .c-faq .c-faq__item ol li {
  margin-bottom: 6px;
}
.c-faq .c-faq__item ul li a, .c-faq .c-faq__item ol li a {
  color: #158443;
}
.c-faq .c-faq__item ul li {
  list-style: disc;
}
.c-faq .c-faq__item span.o-badge {
  display: inline-block;
  margin-top: 18px;
}
.c-faq .c-faq__item-body {
  display: none;
}

/* ==========================================================================
1b. FAQ (Large)
========================================================================== */
.c-faq--large .c-faq__item h3 {
  font-size: 1.25rem !important; /* 20/16 */
  margin-bottom: 0;
}

/* ==========================================================================
1c. FAQ (Dark)
========================================================================== */
.c-faq--dark .c-faq__item p {
  color: #C0C7CF;
}

/* ==========================================================================
1d. FAQ (Yellow)
========================================================================== */
.c-faq--yellow .c-faq__item h3, .c-faq--yellow .c-faq__item p {
  color: #333333 !important;
}
.c-faq--yellow .c-faq__item h3:before {
  background: #ffffff;
  background-image: url(/assets/svg-icons/question-mark--green-bf97b83396ff0c781dac1b6ccf1ee818e6e138cd33e505b8a0d154411229aeba.png);
  background-size: cover;
}
.c-faq--yellow .c-faq__item p:first-of-type:before {
  background-image: url(/assets/svg-icons/loopy-arrow--green-305d2d77e9e6c4b89c1d5aac407134f615648d8c598f51db03cc8af1cefeb60a.png);
  background-size: cover;
}

/**
 * Adverts
 *
 * Floating card adverts containing title, paragraph, graphic and link
 *
 * 1. Admin adverts
 *
 * 2. Custom layout classes
 *
 */
/* ==========================================================================
1. Admin adverts
========================================================================== */
.c-admin-advert-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.c-admin-advert-wrapper .l-half-col {
  width: calc(50% - 10px);
}
@media (max-width: 600px) {
  .c-admin-advert-wrapper .l-half-col {
    width: 100%;
  }
}

.c-admin-advert {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  display: flex;
  margin-top: 15px;
  padding: 24px 30px;
  min-height: 196px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .c-admin-advert {
    min-height: auto;
  }
}
.c-admin-advert:first-child {
  margin-top: 0;
}
.c-admin-advert > div {
  display: flex;
  flex-wrap: wrap;
}
.c-admin-advert .c-admin-advert__copy {
  padding-right: 30px;
  flex-grow: 1;
}
.c-admin-advert .c-admin-advert__copy .c-admin-advert__title {
  width: 100%;
  font-size: 1.3125rem;
  line-height: 1.25;
}
@media (max-width: 600px) {
  .c-admin-advert .c-admin-advert__copy .c-admin-advert__title {
    font-size: 1.3125rem;
  }
}
.c-admin-advert .c-admin-advert__copy .c-admin-advert__subtitle {
  width: 100%;
  font-size: 0.9375rem;
  color: #6E7687;
  margin-top: 6px;
}
.c-admin-advert .c-admin-advert__copy a {
  margin-top: 30px;
  align-self: flex-end;
}
.c-admin-advert .c-admin-advert__copy--large {
  min-height: 240px;
}
@media (max-width: 600px) {
  .c-admin-advert .c-admin-advert__copy--large {
    min-height: auto;
  }
}
.c-admin-advert .c-admin-advert__copy--large .c-admin-advert__title {
  font-size: 2.25rem;
}
@media (max-width: 600px) {
  .c-admin-advert .c-admin-advert__copy--large .c-admin-advert__title {
    font-size: 1.3125rem;
  }
}
.c-admin-advert .c-admin-advert__copy--large .c-admin-advert__subtitle {
  font-size: 1rem;
  padding-right: 10%;
}
@media (max-width: 600px) {
  .c-admin-advert .c-admin-advert__copy--large .c-admin-advert__subtitle {
    font-size: 0.9375rem;
    padding-right: 0;
  }
}
.c-admin-advert .c-admin-advert__artwork {
  width: 90px;
  height: 90px;
  align-self: center;
}
@media (min-width: 993px) and (max-width: 1080px) {
  .c-admin-advert .c-admin-advert__artwork {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 768px) {
  .c-admin-advert .c-admin-advert__artwork {
    align-self: flex-start;
    width: 60px;
    height: 60px;
  }
}
.c-admin-advert .c-admin-advert__artwork img {
  min-width: 100%;
  height: 100%;
}
.c-admin-advert .c-admin-advert__artwork--large {
  width: 210px;
  height: 210px;
}
@media (max-width: 600px) {
  .c-admin-advert .c-admin-advert__artwork--large {
    width: 60px;
    height: 60px;
  }
}

.c-admin-advert--large {
  min-height: 300px;
}
@media (max-width: 600px) {
  .c-admin-advert--large {
    min-height: auto;
  }
}

/* ==========================================================================
2. Custom layout classes
========================================================================== */
.l-custom-admin-advert--large {
  width: 360px !important;
  height: 304px !important;
  margin-top: -30px;
  margin-right: -30px;
  align-self: flex-start !important;
}
@media (min-width: 993px) and (max-width: 1080px) {
  .l-custom-admin-advert--large {
    width: 300px !important;
    height: 250px !important;
  }
}
@media (max-width: 600px) {
  .l-custom-admin-advert--large {
    width: 140px !important;
    height: 120px !important;
  }
}

/**
* Form Components
*
* Used with objects/inputs.scss
*
* 1. Title - Adds a title to group form inputs by context
*
* 2. Paragraph and CTA
*
* 3. Image/File Upload
*
* 4. Sign In / Sign Up Form
*
* 5. Hubspot Contact Form
*
*/
/* ==========================================================================
1. Title
========================================================================== */
.c-form__section-title {
  width: 100%;
  font-size: 1.1875rem;
  font-weight: 700;
  font-family: "Bitter", serif;
  border-top: 1px solid #EFF3F6;
  padding-top: 30px;
  padding-bottom: 20px;
  margin-top: 16px;
}
.c-form__section-title:first-child {
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}

/* ==========================================================================
2. Paragraph and CTA
========================================================================== */
.c-form__info-cta {
  display: grid;
  grid-template-columns: 1fr auto;
}
@media (max-width: 768px) {
  .c-form__info-cta {
    display: block !important;
  }
}
.c-form__info-cta p {
  font-size: 1rem;
  color: #6E7687;
  padding-right: 20px;
  margin-bottom: 0;
}
.c-form__info-cta a {
  white-space: nowrap;
  color: #158443;
}

/* ==========================================================================
3. Image/File Upload
========================================================================== */
.c-form__upload-photo {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.c-form__upload-photo figure.c-form__upload-photo-image .o-profile-pic {
  display: block;
  margin: 0 auto;
}
.c-form__upload-photo [class*=button]:not([class*=button__]) {
  margin-top: 18px;
}
.c-form__upload-photo p {
  font-size: 0.9375rem;
  color: #6E7687;
  margin-top: 18px;
}

/* ==========================================================================
4. Sign In / Sign Up Form
========================================================================== */
.c-login-form .o-input {
  width: 100%;
  margin-bottom: 15px;
}
@media (max-width: 992px) {
  .c-login-form > .l-fill-col {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-login-form > .l-form-col {
    width: 100%;
  }
}

.c-login-form__wrapper {
  max-width: 360px;
  margin: 0 auto;
  padding: 120px 0;
}

.c-login-form__header {
  display: flex;
  align-items: baseline;
}
.c-login-form__header h3 {
  flex-grow: 1;
}

.c-login-form__form .form__validation--error {
  position: relative;
  top: -12px;
}

.c-login-form__terms {
  font-size: 0.875rem; /* 14/16 */
  color: #959DA5;
}
.c-login-form__terms a {
  color: #158443;
}

.c-login-form__copy {
  font-size: 0.9375rem; /* 15/16 */
  color: #959DA5;
}

.c-login-form__links {
  font-family: "Bitter", serif;
  font-weight: 500;
  font-size: 0.9375rem; /* 15/16 */
  color: #158443;
  text-decoration: underline;
  cursor: pointer;
}

.c-login-form__newsletter .form__validation--error {
  top: 3px;
  left: 32px;
}

.c-login-form__newsletter-message {
  display: block;
  color: #959DA5;
  font-size: 0.9375rem; /* 15/16 */
  padding-left: 32px;
}
.c-login-form__newsletter-message a {
  color: #158443;
}

/* ==========================================================================
5. Hubspot sales contact form
========================================================================== */
.c-contact-sales-form {
  background-color: #FBFCFD;
  border: 2px solid #D6E0EF;
  padding: 30px 30px 36px 30px;
  border-radius: 0.5625rem;
}
@media (max-width: 600px) {
  .c-contact-sales-form {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
  }
}
.c-contact-sales-form form .form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 18px;
}
@media (max-width: 992px) {
  .c-contact-sales-form form .form-columns-2 {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.c-contact-sales-form form .form-columns-2 > div {
  width: 100% !important;
}
.c-contact-sales-form form .hs-form-field {
  position: relative;
}
.c-contact-sales-form form .hs-error-msgs {
  margin-top: -10px;
  margin-bottom: 20px;
}
.c-contact-sales-form form .hs-error-msgs li {
  line-height: 0;
}
.c-contact-sales-form form .hs-error-msgs .hs-error-msg {
  font-size: 0.75rem; /* 12/16 */
  color: #CF3B2B;
  line-height: 1.25;
}
.c-contact-sales-form form .hs_error_rollup .hs-error-msgs {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}
.c-contact-sales-form form .hs_error_rollup li label {
  font-size: 0.875rem; /* 14/16 */
  color: #CF3B2B;
}
.c-contact-sales-form form > fieldset {
  max-width: 100%;
}
.c-contact-sales-form form div.input {
  margin: 0 !important;
}
.c-contact-sales-form form label {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
}
.c-contact-sales-form form label .hs-form-required {
  color: #CF3B2B;
}
.c-contact-sales-form form .hs-button {
  margin-top: 20px;
  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 !important;
  border: none;
}
.c-contact-sales-form form .hs-button:hover {
  background: rgb(23.1, 145.2, 73.7);
}
.c-contact-sales-form form input[type=text], .c-contact-sales-form form input[type=email], .c-contact-sales-form form input[type=tel], .c-contact-sales-form form textarea {
  width: 100% !important;
  height: 50px;
  padding: 0 15px;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 9px;
  margin-bottom: 18px;
  font-size: 1rem;
}
.c-contact-sales-form form input[type=text]:focus, .c-contact-sales-form form input[type=email]:focus, .c-contact-sales-form form input[type=tel]:focus, .c-contact-sales-form form textarea:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.c-contact-sales-form textarea {
  height: auto;
  min-height: 108px;
  padding: 15px !important;
}
.c-contact-sales-form .hs-fieldtype-select select {
  cursor: pointer;
  width: 100%;
  height: 50px;
  padding: 0 15px !important;
  background: #ffffff;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem; /* 9/16 */
  transition: all 0.25s;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 1rem;
}
.c-contact-sales-form .hs-fieldtype-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.c-contact-sales-form .hs-fieldtype-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/../images/svg-icons/chevron-down.png);
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.c-contact-sales-form .hs-fieldtype-select select select::-ms-expand {
  display: none;
}
.c-contact-sales-form .hs-fieldtype-select select:focus {
  background: rgba(29, 131, 209, 0.05);
  background-image: url(/../images/svg-icons/chevron-down.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.c-contact-sales-form .hs-form-booleancheckbox-display input {
  width: 20px !important;
  height: 20px;
  -webkit-appearance: checkbox;
}
.c-contact-sales-form .hs-form-booleancheckbox-display > span {
  margin-left: 30px !important;
  font-size: 0.875rem; /* 14/16 */
}
.c-contact-sales-form .legal-consent-container .hs-richtext {
  margin-top: 18px;
}
.c-contact-sales-form .legal-consent-container .hs-richtext:first-of-type {
  margin-top: 0;
}
.c-contact-sales-form .legal-consent-container p {
  font-size: 0.875rem; /* 14/16 */
  color: #6E7687;
}
.c-contact-sales-form .legal-consent-container .hs-form-booleancheckbox {
  margin-top: 20px;
}

.c-contact-sales-form--dark {
  background-color: #3B4048 !important;
}
.c-contact-sales-form--dark input[type=text], .c-contact-sales-form--dark input[type=email], .c-contact-sales-form--dark input[type=tel], .c-contact-sales-form--dark textarea {
  background: #3B4048 !important;
  border: 2px solid #73859F !important;
  color: #ffffff;
}
.c-contact-sales-form--dark input[type=text]:focus, .c-contact-sales-form--dark input[type=email]:focus, .c-contact-sales-form--dark input[type=tel]:focus, .c-contact-sales-form--dark textarea:focus {
  border: 2px solid #73859F !important;
  background: #3B4048 !important;
  color: #ffffff;
}
.c-contact-sales-form--dark label {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
  color: #ffffff !important;
}
.c-contact-sales-form--dark label .hs-form-required {
  color: #CF3B2B !important;
  margin-left: 5px !important;
  margin-top: 15px !important;
}
.c-contact-sales-form--dark .hs-error-msgs {
  margin: -5px 0 15px 0 !important;
}
.c-contact-sales-form--dark .hs-error-msgs .hs-error-msg {
  font-size: 0.625rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #CF3B2B;
  border-radius: 6px;
  display: inline-flex;
  color: #ffffff;
  padding: 3px 6px;
}

/**
* Modal component
*
* Customisable to have header, content, form inputs and CTA
*
* Use c-modal__description--scroll class on content to limit height.
*
* 1a. Modal
*
* 1b. Modal (Dark)
*
* 2. Account Sign Up
*
*/
/* ==========================================================================
  1a. Modal
  ========================================================================== */
.c-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(59, 64, 72, 0.9) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  z-index: 999999 !important;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-modal::-webkit-scrollbar {
  width: 0 !important;
}
@media (max-width: 992px) {
  .c-modal {
    padding: 20px;
  }
}
.c-modal .c-modal__close {
  display: flex;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 0.5625rem;
  cursor: pointer;
  position: relative;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  justify-content: center;
}
@media (max-width: 600px) {
  .c-modal .c-modal__close {
    top: 0px !important;
    right: 0px !important;
  }
}
.c-modal .c-modal__close svg {
  width: 18px;
  height: 18px;
  transform: rotate(90deg) !important;
  fill: #333333;
}
.c-modal .c-modal__close--grey svg {
  fill: #959DA5;
}
.c-modal .c-modal__navigate {
  display: flex;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 0.5625rem;
  cursor: pointer;
  position: relative;
  position: absolute;
  top: 50%;
  margin-top: -18px;
}
.c-modal .c-modal__navigate svg {
  fill: #333333;
}
.c-modal .c-modal__navigate--left {
  left: -90px;
}
@media (max-width: 992px) {
  .c-modal .c-modal__navigate--left {
    left: auto;
    top: auto;
    bottom: 8px;
    right: 54px;
  }
}
.c-modal .c-modal__navigate--right {
  right: -90px;
}
@media (max-width: 992px) {
  .c-modal .c-modal__navigate--right {
    left: auto;
    top: auto;
    bottom: 8px;
    right: 18px;
  }
}
.c-modal .c-modal-wrapper {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
  width: 720px;
  border-radius: 0.5625rem;
  overflow: hidden;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: a-zoom-in;
  position: relative;
}
.c-modal .c-modal-wrapper--600 {
  max-width: 600px;
}
@media (max-width: 768px) {
  .c-modal .c-modal-wrapper--600 {
    max-width: 100%;
  }
}
.c-modal .c-modal-wrapper--420 {
  max-width: 420px;
}
@media (max-width: 768px) {
  .c-modal .c-modal-wrapper--420 {
    max-width: 100%;
  }
}
.c-modal .c-modal__slide {
  display: none;
}
.c-modal .c-modal__slide--show {
  display: block;
}
.c-modal .c-modal__copy {
  flex-grow: 1;
  padding: 15px 36px 24px;
}
@media (max-width: 768px) {
  .c-modal .c-modal__copy {
    padding: 27px 24px;
  }
}
.c-modal .c-modal__copy .c-modal__title {
  font-weight: 700;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__title {
    font-size: 1.875rem;
    line-height: 1.125 !important;
  }
}
.c-modal .c-modal__copy .c-modal__subtitle {
  font-weight: 500;
  font-size: 1.3125rem;
}
@media (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__subtitle {
    font-size: 1.125rem;
  }
}
.c-modal .c-modal__copy .c-modal__artwork {
  max-width: 100%;
}
.c-modal .c-modal__copy .c-modal__description p, .c-modal .c-modal__copy .c-modal__description ol, .c-modal .c-modal__copy .c-modal__description ul {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-size: 1rem;
  margin-top: 24px;
  color: #6E7687;
}
@media (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__description p, .c-modal .c-modal__copy .c-modal__description ol, .c-modal .c-modal__copy .c-modal__description ul {
    font-size: 0.9375em;
  }
}
.c-modal .c-modal__copy .c-modal__description a {
  font-weight: 400 !important;
  color: #158443 !important;
  margin-left: 0px !important;
  text-decoration: underline;
}
.c-modal .c-modal__copy .c-modal__description p:first-child {
  margin-top: 0;
}
.c-modal .c-modal__copy .c-modal__description--scroll {
  max-height: 240px;
  overflow: scroll;
  border-bottom: 1px solid #EFF3F6;
  padding-bottom: 24px;
}
.c-modal .c-modal__copy .c-modal__form .c-modal__checkbox {
  display: inline-block;
}

.c-modal--dark {
  background-color: rgba(20, 22, 30, 0.9) !important;
}
.c-modal--dark .c-modal__close {
  background-color: transparent !important;
}
.c-modal--dark .c-modal__close svg {
  fill: #DBDDE0;
}
.c-modal--dark .c-modal-wrapper {
  background-color: #3B4048;
}
.c-modal--dark .c-modal-wrapper h1, .c-modal--dark .c-modal-wrapper label {
  color: #ffffff !important;
}
.c-modal--dark .c-modal-wrapper input {
  background-color: transparent;
}
.c-modal--dark .c-modal-wrapper .form__validation--error {
  font-size: 0.625rem; /* 10/16 */
  background-color: #CF3B2B;
  border-radius: 6px;
  display: inline-flex;
  position: absolute;
  bottom: -8px;
  left: 15px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 6px;
}

/* ==========================================================================
2. Account Sign Up
========================================================================== */
.c-modal--sign-up {
  text-align: center;
  white-space: normal;
}
.c-modal--sign-up .c-modal__title {
  font-size: 1.6875em; /* 27/16 */
  padding: 0 60px;
  margin-top: 0 !important;
  color: #333333 !important;
}
@media (max-width: 600px) {
  .c-modal--sign-up .c-modal__title {
    font-size: 1.3125rem !important; /* 21/16 */
    padding: 0;
  }
}
.c-modal--sign-up .c-modal__artwork {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .c-modal--sign-up .c-modal__artwork {
    display: none;
  }
}
.c-modal--sign-up .c-modal__artwork img {
  width: 100%;
  max-width: 140px !important;
  margin: 0 auto !important;
  border: 0 !important;
}

/* ==========================================================================
3. Subscribe
========================================================================== */
.c-modal--sign-up .c-modal__artwork .c-modal__artwork--subscribe {
  max-width: 210px !important;
}
.c-modal--sign-up .o-button--green {
  color: #ffffff;
}
.c-modal--sign-up .o-button--green:hover {
  color: #ffffff;
}

/* ==========================================================================
3. Video Trailer
========================================================================== */
.c-modal--trailer .c-modal-wrapper {
  width: auto;
}

/**
* Cards
*
* Card for holding content
*
* 1. Onboarding Cards
*
* 2. Plan Card
*
* 3. Dark Plan Card
*
*/
/* ==========================================================================
1. Floating Cards
========================================================================== */
.c-floating-card {
  background: #ffffff;
  border-radius: 0.5625rem;
  border: 1px solid;
}

/* ==========================================================================
2a. Plan Card (v1)
========================================================================== */
.c-plan {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  text-align: center;
  padding: 36px 24px;
  width: 330px;
  height: 565px;
  margin-top: 30px;
  position: relative;
}
.c-plan h3 {
  font-size: 1.3125rem; /* 21/16 */
  font-weight: 600;
  margin-bottom: 0;
  padding-top: 0;
}
.c-plan .l-font-24 {
  font-size: 1.5rem;
}
.c-plan .c-plan__price-original {
  display: block;
  position: relative;
  margin-top: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.125rem; /* 18/16 */
  font-weight: 700;
  text-decoration: line-through;
  color: #333333;
}
.c-plan .c-plan__line-through {
  text-decoration: line-through;
}
.c-plan .c-plan__price {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.c-plan .c-plan__price .c-plan__price-symbol-left {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.5rem; /* 24/16 */
  font-weight: 700;
  position: absolute;
  top: 0px;
  right: 100%;
  padding-right: 4px;
}
.c-plan .c-plan__price .c-plan__price-value {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 4rem; /* 64/16 */
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: -2px;
}
@media (max-width: 992px) {
  .c-plan .c-plan__price .c-plan__price-value {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
.c-plan .c-plan__price .c-plan__price-value--long {
  font-size: 3rem; /* 52/16 */
  line-height: 3rem;
}
@media (max-width: 992px) {
  .c-plan .c-plan__price .c-plan__price-value--long {
    font-size: 2.75rem;
    line-height: 2.75rem;
  }
}
.c-plan .c-plan__price .c-plan__price-symbol-right {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.5rem; /* 24/16 */
  font-weight: 700;
  position: absolute;
  top: 0px;
  left: 100%;
  padding-left: 4px;
}
.c-plan .c-plan__price .c-plan__price-currency-string {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem; /* 16/16 */
  font-weight: 700;
  letter-spacing: -0.5px;
  position: absolute;
  bottom: 0;
  left: 100%;
  padding-left: 4px;
}
.c-plan .c-plan__time span {
  display: block;
}
.c-plan .c-plan__time .c-plan__time-month {
  font-family: "Bitter", serif;
}
.c-plan .c-plan__time .c-plan__time-save {
  font-size: 0.875rem; /* 14/16 */
  margin-top: 6px;
  opacity: 0.66;
}
.c-plan .c-plan__time .c-plan__time-price {
  display: none;
}
.c-plan .c-plan__benefits {
  margin-top: 18px;
  list-style: none;
  padding: 0 0 60px 0;
  margin: 0;
}
.c-plan .c-plan__benefits li {
  position: relative;
  padding-left: 32px;
  font-family: "Bitter", serif;
  font-weight: 700;
  text-align: left;
  margin-top: 15px;
}
@media (max-width: 1080px) {
  .c-plan .c-plan__benefits li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-plan .c-plan__benefits li:before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(/assets/svg-icons/checkmark-bounded--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
  background-size: cover;
}
.c-plan .c-plan__benefits .c-plan__benefits-link:before {
  background-image: url(/assets/svg-icons/info-bounded--green-ec1261a19dce013fb9412efc706869286972b82964f8ae552dcbb979ea88f42a.png);
  background-size: cover;
}
.c-plan .c-plan__benefits .c-plan__benefits-link a {
  position: relative !important;
  top: 0;
  left: 0;
}
.c-plan a, .c-plan .o-button {
  position: absolute;
  bottom: 36px;
  transform: translateX(-50%);
}
.c-plan .o-button--primary {
  bottom: 84px;
}
.c-plan .o-button--secondary {
  bottom: 36px;
  text-decoration: underline;
  font-size: 0.9375rem; /* 15/16 */
  white-space: nowrap;
}

.c-plan--emphasis {
  background: #158443;
  width: 336px;
  min-height: 645px;
  margin-top: 0;
}
.c-plan--emphasis .o-badge {
  position: absolute;
  top: -16px;
  color: #158443;
  border: 6px solid #158443;
  left: 50%;
  margin-left: -62px;
  box-shadow: none;
  border-radius: 0.9375rem; /* 15/16 */
}
.c-plan--emphasis .o-badge:after {
  background: #158443;
  top: 26px;
}
.c-plan--emphasis h3, .c-plan--emphasis li, .c-plan--emphasis .c-plan__price-currency-string, .c-plan--emphasis .c-plan__price-symbol-left, .c-plan--emphasis .c-plan__price-symbol-right, .c-plan--emphasis .c-plan__price-value {
  color: #ffffff;
}
.c-plan--emphasis .c-plan__time span {
  color: #ffffff;
}
.c-plan--emphasis .c-plan__benefits li:before {
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
}
.c-plan--emphasis .c-plan__benefits .c-plan__benefits--highlight:before {
  background-image: url(/assets/svg-icons/checkmark--blue-18803e2ee06f4c404b6c173497e54fbbb6e251bac81ecc8dfc030657cf775724.png);
}

.c-plan--no-price p {
  height: 222px;
  display: flex;
  align-items: center;
}

.c-plan--left {
  border-radius: 0.5625rem 0 0 0.5625rem;
}

.c-plan--right {
  border-radius: 0 0.5625rem 0.5625rem 0;
}

.c-plan--confirm {
  width: 500px !important;
  height: auto !important;
  padding-bottom: 40px !important;
}
.c-plan--confirm .o-button--green {
  margin-top: 30px;
  position: relative;
  transform: none !important;
  bottom: auto;
}

/* ==========================================================================
2b. Dark Plan Card
========================================================================== */
.c-plan--dark {
  background: none;
  border-radius: 0;
}
.c-plan--dark h3, .c-plan--dark li, .c-plan--dark p {
  color: #ffffff;
}
.c-plan--dark p {
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .c-plan--dark p {
    padding-right: 150px;
  }
}
@media (max-width: 600px) {
  .c-plan--dark p {
    padding-right: 0;
  }
}

/* ==========================================================================
3a. Plan Card (v2)
========================================================================== */
.c-plan-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 27px 24px;
  border-radius: 0.5625rem;
  border: 2px solid #D6E0EF;
  background-color: hsl(216, 43.8596491228%, 178.8235294118%);
}
.c-plan-v2 a[class*=o-button--] {
  margin-top: auto;
}
.c-plan-v2 .c-plan__head .c-plan__head__title {
  font-size: 1.5rem; /* 24/16 */
  line-height: 1;
}
.c-plan-v2 .c-plan__head .c-plan__head__description {
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
  margin-top: 6px;
}
.c-plan-v2 .c-plan__body {
  margin-top: 15px;
  padding-bottom: 36px;
}
.c-plan-v2 .c-plan__body .c-plan__features li {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
  padding-left: 34px;
  margin-top: 15px;
  position: relative;
}
.c-plan-v2 .c-plan__body .c-plan__features li:first-child {
  margin-top: 20px;
}
.c-plan-v2 .c-plan__body .c-plan__features li:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  border: 2px solid #158443;
  background-image: url(/assets/svg-icons/feature-checkmark--green-c018b040de369057d3beed9fbceb9b9afddb511683addc5241e41a7587395601.png);
  background-size: 24px 24px;
  background-position: center center;
}

/* ==========================================================================
3b. Plan Card (v2) Options
========================================================================== */
.c-plan-v2--emphasis .c-plan__head .c-plan__head__title {
  color: #ffffff;
}
.c-plan-v2--emphasis .c-plan__head .c-plan__head__description {
  color: #ffffff;
  opacity: 0.66;
}
.c-plan-v2--emphasis .c-plan__body .c-plan__price {
  color: #ffffff;
}
.c-plan-v2--emphasis .c-plan__body .c-plan__features li {
  color: #ffffff;
}
.c-plan-v2--emphasis .c-plan__body .c-plan__features li:before {
  border: 2px solid #ffffff;
  background-image: url(/assets/svg-icons/feature-checkmark--white-3b7c7b575ba84bfdee521badf0ab0274a7f995f815597b82882e81457a4e6d6c.png);
  background-size: 24px 24px;
  background-position: center center;
}

.c-plan-v2--pro {
  background-color: #157CB8;
  border: 2px solid #157CB8;
}
.c-plan-v2--pro .o-badge--pro {
  position: absolute;
  top: 24px;
  right: 24px;
}

.c-plan-v2--enterprise {
  background-color: #294175;
  border: 2px solid #294175;
}

/* ==========================================================================
3c. Plan Card (v2) Change Screen
========================================================================== */
.c-plan-v2--change {
  height: 260px;
  padding: 21px 27px 27px 27px;
}
.c-plan-v2--change .c-plan__head .o-badge {
  height: 24px;
  padding: 0 9px;
  align-items: center;
  align-content: center;
  display: flex;
}
.c-plan-v2--change .c-plan__head .c-plan__head__title {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: unset;
}
.c-plan-v2--change .c-plan__head > button {
  color: #6E7687;
  text-decoration: underline;
}
.c-plan-v2--change .c-plan__body {
  margin-top: auto;
  padding-bottom: 0;
}
.c-plan-v2--change .c-plan__body span:first-child .text-36-1 {
  font-size: 1.875rem; /* 30/16 */
}

/**
 * Testimonials
 *
 * 1. Testimonial component to use everywhere
 *
 * 2. Testimonials (Twitter Version)
 *
 */
/* ==========================================================================
1. Testimonials
========================================================================== */
/* A common wrapper for displaying a grid of testimonials */
.c-testimonial-wrapper {
  columns: 3;
  column-gap: 60px;
}
@media (max-width: 992px) {
  .c-testimonial-wrapper {
    columns: 2;
  }
}
@media (max-width: 768px) {
  .c-testimonial-wrapper {
    columns: 1;
  }
}
.c-testimonial-wrapper .c-testimonial {
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}

/* A single testimonial */
.c-testimonial {
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .c-testimonial {
    text-align: left;
  }
}
.c-testimonial:before {
  content: "";
  z-index: 0;
  width: 40px;
  height: 30px;
  background-image: url(/assets/svg-icons/punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
  background-size: cover;
  position: absolute;
  top: -10px;
  left: -10px;
  opacity: 0.5;
  z-index: -1;
}
.c-testimonial p {
  font-size: 1.0625rem; /* 17/16 */
  margin-top: 15px;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .c-testimonial p {
    font-size: 0.9375rem;
  }
}
.c-testimonial span {
  display: block;
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  font-weight: 700;
  margin-top: 15px;
}
.c-testimonial img {
  width: 48px;
  height: 48px;
  margin-top: 15px;
  border: 4px solid #ffffff;
  border-radius: 0.5625rem;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
}

.c-testimonial--dark-quote:before {
  background-image: url(/assets/svg-icons/punctutation--dark-7cbfcce11d2181f9200aec6ecdbf9ae87e3b2fc0ba69b9e50098c8cf6ef83f0d.png);
  background-size: cover;
  opacity: 0.1;
  top: 40px;
  left: 0;
}
@media (max-width: 768px) {
  .c-testimonial--dark-quote:before {
    display: none;
  }
}

/* ==========================================================================
2. Testimonials (Twitter Version)
========================================================================== */
.c-testimonial-wrapper--twitter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media (max-width: 992px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr;
  }
}
.c-testimonial-wrapper--twitter .c-testimonial--twitter {
  width: 100%;
  display: inline-block;
}

/* A single testimonial */
.c-testimonial--twitter {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  border-radius: 0.75rem; /* 12/16 */
  position: relative;
  padding: 18px 18px 48px 18px;
}
.c-testimonial--twitter .c-testimonial__upper {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-column-gap: 14px;
}
.c-testimonial--twitter .c-testimonial__upper span {
  font-size: 1rem;
  display: block;
}
.c-testimonial--twitter .c-testimonial__user {
  font-size: 1.125rem; /* 18/16 */
  font-weight: 700;
}
.c-testimonial--twitter .c-testimonial__twitter {
  font-size: 1rem;
  color: #6E7687;
  margin-top: -3px;
}
.c-testimonial--twitter .c-testimonial__date {
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-size: 0.875rem; /* 14/16 */
  color: #6E7687;
}
.c-testimonial--twitter p {
  font-size: 1rem;
  margin-top: 16px;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .c-testimonial--twitter p {
    font-size: 0.9375rem;
  }
}
.c-testimonial--twitter img {
  width: 48px;
  height: 48px;
  border-radius: 100px;
}
.c-testimonial--twitter svg {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 18px;
}

/**
* Tables
*
* Table components
*
* 1. Comparison Table
*
* 2. Version History
*
*
*/
/* ==========================================================================
1. Comparison Table
========================================================================== */
.c-comparison-table {
  border-collapse: collapse;
  border: none !important;
  margin: 0;
}
.c-comparison-table tbody tr:nth-child(even) td {
  background: #ffffff;
}
.c-comparison-table tr {
  height: 74px;
  border: none;
  background-color: #ffffff;
}
.c-comparison-table tr:last-child td {
  border-bottom: none;
}
.c-comparison-table tr:last-child td.c-comparison-table__entry--owned {
  position: relative;
}
.c-comparison-table tr:last-child td.c-comparison-table__entry--owned:before {
  content: "";
  width: 100%;
  height: 40px;
  background: #158443;
  border-radius: 0 0 0.5625rem 0.5625rem; /* 9/16 */ /* 9/16 */
  position: absolute;
  bottom: -40px;
  left: 0;
}
.c-comparison-table tr td, .c-comparison-table tr th {
  text-align: center;
  border: none;
  border-bottom: 1px solid #EFF3F6;
  border-right: 1px solid #EFF3F6;
}
.c-comparison-table tr td:first-child, .c-comparison-table tr th:first-child {
  text-align: left;
  padding-left: 0;
}
.c-comparison-table tr td:last-child, .c-comparison-table tr th:last-child {
  border-right: none;
}
.c-comparison-table th, .c-comparison-table td {
  font-family: "Bitter", serif;
}
.c-comparison-table svg {
  width: 18px;
  height: 13px;
}
.c-comparison-table .c-comparison-table__checkmark--white {
  fill: #ffffff;
}
.c-comparison-table .c-comparison-table__checkmark--green {
  fill: #158443;
}
.c-comparison-table th.c-comparison-table__entry--owned {
  position: relative;
}
.c-comparison-table th.c-comparison-table__entry--owned:before {
  content: "";
  width: 100%;
  height: 40px;
  background: #158443;
  border-radius: 0.5625rem 0.5625rem 0 0; /* 9/16 */ /* 9/16 */
  position: absolute;
  top: -40px;
  left: 0;
}
.c-comparison-table .c-comparison-table__entry--owned {
  background: #158443 !important;
  border-bottom: none;
  color: #ffffff;
}
.c-comparison-table .c-comparison-table__entry--owned .o-button--xxs {
  visibility: hidden;
}
.c-comparison-table .c-comparison-table__entry--owned .c-comparison-table__checkmark--white {
  display: inline-block;
}
.c-comparison-table .c-comparison-table__entry--owned .c-comparison-table__checkmark--green {
  display: none;
}
.c-comparison-table .c-comparison-table__entry--exempt svg {
  display: none !important;
}
.c-comparison-table .c-comparison-table__checkmark--white {
  display: none;
}
.c-comparison-table .o-button--xxs {
  margin-bottom: 15px;
}

/* ==========================================================================
2. Version History
========================================================================== */
/* ==========================================================================
   9. Version history
   ========================================================================== */
.c-version-history-table {
  padding: 28px 24px;
}
.c-version-history-table .c-version-history-table__row {
  padding: 20px 0;
  border-bottom: 1px solid #14161E;
}
.c-version-history-table .c-version-history-table__row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .c-version-history-table .c-version-history-table__row h3 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
.c-version-history-table .c-version-history-table__row p a {
  color: #CE3F00;
}
.c-version-history-table .c-version-history-table__row .c-version-history-table__meta {
  display: block;
  font-size: 0.9375rem; /* 15/16 */
  margin-top: 6px;
}
.c-version-history-table .c-version-history-table__row .c-version-history-table__links {
  margin-top: 6px;
}
.c-version-history-table .c-version-history-table__row .c-version-history-table__links a, .c-version-history-table .c-version-history-table__row .c-version-history-table__links span {
  color: #CE3F00;
}
.c-version-history-table .c-version-history-table__row ul li {
  padding: 30px 0;
  border-bottom: 1px solid #14161E;
}
.c-version-history-table .c-version-history-table__row ul li:last-child {
  border-bottom: none;
}
.c-version-history-table .c-version-history-table__row ul li a {
  color: #CE3F00;
  text-decoration: underline;
}

/* ==========================================================================
   10. Store table
   ========================================================================== */
.c-store-table {
  width: 100%;
}
.c-store-table__header th:first-of-type {
  width: 60%;
  max-width: 830px;
  text-align: left;
  padding: 0 0 22px;
}
@media (max-width: 768px) {
  .c-store-table__header tr th:not(:first-of-type) {
    display: none;
  }
}
.c-store-table__body [role=button] {
  position: relative;
  cursor: pointer;
}
.c-store-table__body [role=button].active i, .c-store-table__body [role=button][aria-expanded=true] i {
  transform: rotate(180deg);
}
.c-store-table__body [role=button] i {
  position: absolute;
  left: -34px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
.c-store-table__body [data-toggle-target*=content] {
  display: none;
}
@media (max-width: 768px) {
  .c-store-table__body tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .c-store-table__body tr td {
    display: flex;
    flex-flow: column;
  }
  .c-store-table__body tr td:before {
    content: attr(data-label);
  }
  .c-store-table__body tr td:first-child {
    width: 100%;
  }
  .c-store-table__body tr td:not(:first-of-type) {
    width: 32%;
    align-items: center;
    padding: 0 0 20px;
    font-weight: bold;
  }
}

/* ==========================================================================
  4. Receipts table
========================================================================== */
.receipts-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.receipts-table-wrapper .elementary-table.receipts-table {
  width: 100%;
}
.receipts-table-wrapper .elementary-table.receipts-table th {
  text-align: left;
}
.receipts-table-wrapper .elementary-table.receipts-table th:not(:last-of-type) {
  min-width: 80px;
}
.receipts-table-wrapper .elementary-table.receipts-table td .dropdown .dropdown-trigger {
  padding: 8px 8px;
  border-radius: 8px;
}
.receipts-table-wrapper .elementary-table.receipts-table td .dropdown .dropdown-trigger svg {
  width: 16px;
  height: 16px;
}

/*
 * Placeholders
 */
/* ========================================================== */
/* = Global Header                                          = */
/* ========================================================== */
/* ========================================================== */
/* = Pseudo Element                                         = */
/* ========================================================== */
/* ========================================================== */
/* = Gradients                                              = */
/* ========================================================== */
section.transactions-hero, section#order-list {
  background: #3a7bd5 !important; /* fallback for old browsers */
  background: linear-gradient(to left, #3a7bd5, #3a6073) !important;
}

/* ========================================================== */
/* = Background patterns                                    = */
/* ========================================================== */
/* ========================================================== */
/* = Responsive Typography                                  = */
/* ========================================================== */
@media screen and (max-width: 600px) {
  section#order-list div.block h1 {
    font-size: 1.75em !important;
    text-align: center;
  }
}

/* ========================================================== */
/* = Title detail                                           = */
/* ========================================================== */
section#preparing-order div.timeout-message div.col div.divider {
  width: 32px;
  height: 5px;
  margin: 0 auto 2.5em;
  background-image: url(/assets/artwork/divider-image-729f801b7891cfe38e9085dc7d05d087ba48ea0af594cf1fa93835d860074167.png);
  background-size: cover;
}

/* ========================================================== */
/* = BUY CTA's                                              = */
/* ========================================================== */
section#preparing-order .main-cta a#click-to-complete {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-size: 0.9375em; /* 15/16 */
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  padding: 1.25em 1.5em;
  border-radius: 3px;
}
@media screen and (max-width: 600px) {
  section#preparing-order .main-cta a#click-to-complete {
    width: 100% !important;
    text-align: center;
    font-size: 0.875em;
  }
}

section#preparing-order .main-cta a#click-to-complete {
  background: #FD7401;
  box-shadow: 0 3px 0 0 rgb(227, 102, 0);
}

/* ========================================================== */
/* = Other CTA's                                            = */
/* ========================================================== */
/* ========================================================== */
/* = Form Inputs                                            = */
/* ========================================================== */
/* ========================================================== */
/* = Floating white circles                                 = */
/* ========================================================== */
/* ========================================================== */
/* = Message and Banners.                                   = */
/* ========================================================== */
/* ========================================================== */
/* = Video Player Button                                    = */
/* ========================================================== */
.c-subscription-promo-video .c-subscription-promo-video__fake .c-subscription-promo-video__button, .c-store-video .c-store-video__fake .c-store-video__button {
  border: 0;
  font-size: 12em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transition: all 0.1s linear;
  background: none;
}
@media screen and (max-width: 568px) {
  .c-subscription-promo-video .c-subscription-promo-video__fake .c-subscription-promo-video__button, .c-store-video .c-store-video__fake .c-store-video__button {
    font-size: 9em;
  }
}
.c-subscription-promo-video .c-subscription-promo-video__fake .c-subscription-promo-video__button:before, .c-store-video .c-store-video__fake .c-store-video__button:before {
  content: "";
  background: url(/assets/artwork/play-video-button-66a997396ef9c783facd7c7afc172e49b267fb6076b71360df0184ab81523bb7.png);
  background-image: url(/assets/artwork/play-video-button-50d5101146f24f8b3bd3a815caf8f0da334381dadfbc7e86d4ff7bcda647d09f.svg);
  background-size: 136px 136px;
  background-repeat: no-repeat;
  width: 136px;
  height: 136px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -68px 0 0 -68px;
}

/* ========================================================== */
/* = Scale In Animation                                     = */
/* ========================================================== */
@keyframes a-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/**
 * 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
 *
 * 2. Card modifier
 *
 * 3. Featured modifier
 *
 *
 */
/* ==========================================================================
 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-badge-tutorial--locked, .c-tutorial-item .o-badge-tutorial--recording {
  display: 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 img.c-tutorial-item__art-image--alternate, .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress, .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
  display: none;
}
.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, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
  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 .c-tutorial-item__category {
  font-size: 1.125rem; /* 18/16 */
  font-weight: 500;
  margin-top: 9px;
  display: none;
}
.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__metadata, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short {
  color: #333333;
}
.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, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__continue, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__type {
  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;
}

/* ==========================================================================
 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__art--product {
  height: auto;
  margin-bottom: -12px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product img {
  transform: scale(0.9);
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product + .c-tutorial-item__text .c-tutorial-item__type {
  display: none !important;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product + .c-tutorial-item__text + .c-tutorial-item__number-badge .o-badge-tutorial {
  left: 8px;
  top: 162px;
}
.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__category {
  display: block !important;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
  margin-top: 8px;
}
.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__metadata-short, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__type {
  font-size: 13px;
  letter-spacing: -0.1px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__in-progress, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete {
  display: none;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__icon {
  display: flex;
  position: absolute;
  top: 12px !important;
  right: 13px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__icon .o-badge-video {
  align-self: center;
}
.c-tutorial--card .c-tutorial-item .o-badge-tutorial {
  position: absolute;
  left: 12px;
  top: 132px;
}

/* ==========================================================================
 3. Featured modifier (add to container not the tutorial)
 ========================================================================== */
.c-tutorial--featured .l-tutorial-container__wrapper {
  grid-row-gap: 30px;
}
.c-tutorial--featured .c-tutorial-item {
  width: 480px;
  min-width: 480px;
  height: 325px;
  position: relative;
}
.c-tutorial--featured .c-tutorial-item > a {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: 0.5625rem;
}
.c-tutorial--featured .c-tutorial-item > a:hover .c-tutorial-item__art img {
  transform: scale(1.3);
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__art {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__art:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, rgb(51, 51, 51) 100%);
  z-index: 1;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__art img {
  transition: 0.5s all;
  transform: scale(1.2);
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__art .o-badge {
  left: 15px;
  top: 15px;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress {
  background: rgba(0, 0, 0, 0.125);
  z-index: 99;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text {
  position: relative;
  align-self: flex-end;
  padding: 21px 24px;
  z-index: 2;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text span {
  color: #ffffff;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
  font-size: 1.875rem; /* 30/16 */
  line-height: 1.25;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
  font-size: 1.3125em; /* 21/16 */
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
  display: none;
  color: #ffffff;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
  margin-top: 21px;
  display: block !important;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
  margin-top: 3px;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short, .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__type {
  display: none !important;
}
.c-tutorial--featured .c-tutorial-item .c-tutorial-item__icon {
  position: absolute;
  right: 15px;
  top: 15px !important;
  z-index: 3;
}
.c-tutorial--featured .c-tutorial-item .o-badge-tutorial {
  display: none;
}
.c-tutorial--featured .c-tutorial-item .o-button--bookmark {
  display: none;
}

/**
* Video Player Components
*
* Classes for video player components
*
* 1. Promo Video
*
*/
/* ==========================================================================
1. Promo Video
========================================================================== */
.c-subscription-promo-video .c-subscription-promo-video__wrapper {
  position: relative;
  max-width: 678px;
  margin: 0 auto;
  border-radius: 1.25rem; /* 20/16 */
  background: #333333;
}
.c-subscription-promo-video .c-subscription-promo-video__placeholder {
  opacity: 0;
  background: #F3B36A;
  border-radius: 1.25rem;
}
.c-subscription-promo-video .c-subscription-promo-video__fake {
  background: #F3B36A url(/assets/artwork/promo-video-bg-96ecc3946d56abea1a36858b57e39ffc4dda22c0bc8782be1102ed89ec1dd572.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  border-radius: 1.25rem;
}
@media screen and (max-width: 960px) {
  .c-subscription-promo-video .c-subscription-promo-video__fake {
    height: 100%;
  }
}
.c-subscription-promo-video .c-subscription-promo-video__fake:hover:after {
  background: rgba(35, 41, 43, 0.1);
}
.c-subscription-promo-video .c-subscription-promo-video__fake:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 41, 43, 0);
  z-index: -1;
  transition: all 0.05s linear;
}
.c-subscription-promo-video .c-subscription-promo-video__fake .c-subscription-promo-video__button:before {
  background-size: 84px 84px;
  background-repeat: no-repeat;
  width: 84px;
  height: 84px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -42px 0 0 -42px;
}

/* ==========================================================================
2. Promo Video (Homepage Mar 2022)
========================================================================== */
.c-store-video {
  display: flex;
  justify-content: flex-start;
  margin-top: -16px;
  margin-right: 16px;
  margin-bottom: 16px;
  min-width: 480px;
}
@media (max-width: 992px) {
  .c-store-video {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .c-store-video {
    max-width: 100%;
    min-width: auto;
    width: calc(100% - 32px);
  }
}
.c-store-video .c-store-video__wrapper {
  position: relative;
  max-width: 512px;
  width: 100%;
  height: 305px;
  margin-left: 0;
  margin-right: auto;
  border-radius: 12px;
  background: #eff3f9;
  outline: none;
}
.c-store-video .c-store-video__wrapper:before {
  content: "";
  position: absolute;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  left: -16px;
  top: -16px;
  background: #eff3f9;
  border-radius: 24px;
}
@media (max-width: 992px) {
  .c-store-video .c-store-video__wrapper {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .c-store-video .c-store-video__wrapper {
    height: auto;
    padding-top: 56.25%;
  }
}
.c-store-video .c-store-video__placeholder {
  opacity: 0;
  border-radius: inherit;
}
.c-store-video .c-store-video__fake {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/assets/artwork/store-video-bg-laptop-88347db482a8439889b72ebffa59bde9af9df1c235117faebb4843758c6c98ea.png) center;
  background-size: cover;
  border-radius: 12px;
  z-index: 1;
  cursor: pointer;
}
.c-store-video .c-store-video__fake:hover:after {
  background: rgba(35, 41, 43, 0.1);
}
.c-store-video .c-store-video__fake:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 41, 43, 0);
  z-index: -1;
  transition: all 0.05s linear;
  border-radius: 12px;
}
.c-store-video .c-store-video__fake .c-store-video__button:before {
  width: 84px;
  height: 84px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -42px 0 0 -42px;
  background-size: 84px 84px;
  background-repeat: no-repeat;
}

/**
 *
 * Reports button and dropdown component
 *
 * 1. Button for reports filters
 *
 * 2. Dropdown for reports filters
 *
 *
 */
/* ==========================================================================
   1. Button for reports filters
   ========================================================================== */
.menu-filter {
  position: relative;
  display: flex;
}
.menu-filter .menu-filter__span {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
}

.menu-filter--emphasis .menu-filter__span {
  align-items: center;
}

/* ==========================================================================
   2a. Dropdown for reports filters
   ========================================================================== */
.menu-filter ul.menu-filter__row {
  padding: 24px 0;
  position: absolute;
  display: none;
  background: #3B4048;
  border: 4px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  color: white;
  z-index: 1;
  margin-top: 5px;
  top: 40px;
}

.menu-filter ul.menu-filter__row li .o-checkbox {
  width: 24px;
  height: 24px;
}
.menu-filter ul.menu-filter__row li .o-checkbox .checkbox__indicator {
  width: 24px;
  height: 24px;
}
.menu-filter ul.menu-filter__row li .o-checkbox .checkbox__indicator svg {
  width: 12px;
  height: 10px;
  margin: -5px 0 0 -6px;
}

.menu-filter ul.menu-filter__row .menu-filter__container {
  display: flex;
  align-items: center;
}

.menu-filter ul.menu-filter__row-date-filter {
  right: 0;
  left: auto;
  top: 32px;
}
.menu-filter ul.menu-filter__row-date-filter li div > span {
  white-space: nowrap;
}

.menu-filter ul.menu-filter__row--scrollable {
  max-height: 496px;
  overflow-y: scroll;
}

.menu-filter__row-selected-p {
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  /* 12/16 */
  line-height: 1;
  letter-spacing: 1px;
  color: #C0C7CF;
  text-transform: uppercase;
}

.menu-filter .menu-filter__span--green {
  background: rgba(21, 132, 67, 0.4);
  border: 2px solid #158443;
  box-shadow: 0px 2px 1px rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
}

/* ==========================================================================
   2b. Dropdown for reports filters (with search)
   ========================================================================== */
.menu-filter--search > ul {
  overflow-y: initial !important;
}
.menu-filter--search > ul > li:first-child, .menu-filter--search > ul > li:last-child {
  padding: 0 24px;
}
.menu-filter--search > ul .menu-filter__options {
  height: calc(100% - 160px);
  overflow-y: scroll;
  position: relative;
}
.menu-filter--search > ul .menu-filter__options::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.menu-filter--search > ul .menu-filter__options:before {
  content: "";
  width: 100%;
  height: 60px;
  background: rgb(59, 64, 72);
  background: linear-gradient(0deg, rgb(59, 64, 72) 0%, rgba(59, 64, 72, 0) 100%);
  position: absolute;
  top: -60px;
  left: 0;
}
.menu-filter--search > ul .menu-filter__options ul {
  height: 100%;
}
.menu-filter--search > ul .menu-filter__options ul li {
  position: relative;
  min-width: 100%;
  padding-left: 84px;
}
.menu-filter--search > ul .menu-filter__options ul li .o-checkbox {
  position: absolute;
  left: 0;
  top: 1px;
}
.menu-filter--search > ul .menu-filter__options ul li .o-checkbox {
  top: 50%;
  margin-top: -12px;
  left: 24px;
}
.menu-filter--search > ul .menu-filter__options ul li img {
  height: 40px;
  width: 40px;
}
.menu-filter--search > ul .menu-filter__options ul li > div {
  display: flex;
}
.menu-filter--search > ul .menu-filter__options ul li > div > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}

/**
* Charts
*
*
* 1. Bar Chart (Vertical)
*
*/
/**
 * This file contains the map between domains and their colours
 *
 *
 */
/**
* Charts
*
*
* 1. Bar Chart (Vertical)
*
*/
/* 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, .invitation-card > main h1 {
  color: #14161E;
}

/* Background color */
.bg-black-night, .chart__block, .chart__tooltip, .chart .tooltip .tooltip-text {
  background-color: #14161E;
}

/* Border color */
.bc-black-night, .chart--bar-node:after {
  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, .chart-bg-color {
  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, .chart-key.key-bg--video_course:before, .chart-bg-color--video_course, .chart-bg-color--video_course:before {
  background-color: #E34A4C;
}

/* Border color */
.bc-red-lychee, .chart-border-color--video_course {
  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, .chart-key.key-bg--book:before, .chart-bg-color--book, .chart-bg-color--book:before {
  background-color: #FF8847;
}

/* Border color */
.bc-orange-enthusiasm, .chart-border-color--book {
  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, .chart-key.key-bg--article:before, .chart-bg-color--article, .chart-bg-color--article:before {
  background-color: #157857;
}

/* Border color */
.bc-green-rainforest, .chart-border-color--article {
  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, .chart-key.key-bg--learning_path:before, .chart-bg-color--learning_path, .chart-bg-color--learning_path:before {
  background-color: #597CEE;
}

/* Border color */
.bc-blue-cornflower, .chart-border-color--learning_path {
  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, .chart__track__data, .chart__tooltip, .chart .tooltip .tooltip-text, .chart__btn, .chart-key {
  color: #FFFFFF;
}

/* Background color */
.bg-white, .chart__track:before, .chart__track:after, .chart__data__value:before, .chart__tooltip:before, .chart .tooltip .tooltip-text:before, .chart--bar-node:after {
  background-color: #FFFFFF;
}

/* Border color */
.bc-white, .chart__tooltip, .chart .tooltip .tooltip-text {
  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, .chart-key.key-bg--article:before, .chart-bg-color--article, .chart-bg-color--article:before {
  background-color: #157857;
}

.bg-light-android, .chart-key.key-bg--android:before, .chart-bg-color--android, .chart-bg-color--android:before {
  background-color: #00B87E;
}

.bg-light-flutter, .chart-key.key-bg--flutter:before, .chart-bg-color--flutter, .chart-bg-color--flutter:before {
  background-color: #2EA4DD;
}

.bg-light-gametech, .chart-key.key-bg--gametech:before, .chart-bg-color--gametech, .chart-bg-color--gametech:before {
  background-color: #B44EBF;
}

.bg-light-ios, .chart-key.key-bg--ios:before, .chart-bg-color--ios, .chart-bg-color--ios:before {
  background-color: #8763D2;
}

.bg-light-server-side-swift, .chart-key.key-bg--server-side-swift:before, .chart-bg-color--server-side-swift, .chart-bg-color--server-side-swift:before {
  background-color: #F26FAA;
}

.bg-light-professional-growth, .chart-key.key-bg--professional-growth:before, .chart-bg-color--professional-growth, .chart-bg-color--professional-growth:before {
  background-color: #E3A93D;
}

.bg-light-multi-domain, .chart-key.key-bg--multi-domain:before, .chart-bg-color--multi-domain, .chart-bg-color--multi-domain:before {
  background-color: #AC9FAB;
}

.bg-light-learning-path, .chart-key.key-bg--learning-path:before, .chart-bg-color--learning-path, .chart-bg-color--learning-path:before {
  background-color: #597CEE;
}

.bg-light-video-course, .chart-key.key-bg--video-course:before, .chart-bg-color--video-course, .chart-bg-color--video-course:before {
  background-color: #E34A4C;
}

.bg-light-book, .chart-key.key-bg--book:before, .chart-bg-color--book, .chart-bg-color--book:before {
  background-color: #FF8847;
}

.bg-light-ai, .chart-key.key-bg--ai:before, .chart-bg-color--ai, .chart-bg-color--ai:before {
  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;
}

/* 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, .invitation-card > main h1 {
  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, .invitation-card > main h1 {
  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, .invitation-card {
  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, .chart__btn {
  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, .invitation-card {
  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, .chart__track__data, .chart__btn {
  font-size: 0.75rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-16, .chart-key {
  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, .invitation-card > main h1 {
  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, .chart__tooltip, .chart .tooltip .tooltip-text {
  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;
}

.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, .chart__data__value {
  display: flex;
}

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

.display-none, .chart__tooltip, .chart .tooltip .tooltip-text {
  display: none;
}

.position-static {
  position: static;
}

.position-relative, .chart__track, .chart__btn, .chart-key, .chart--bar-node {
  position: relative;
}

.position-absolute, .chart__track:before, .chart__track:after, .chart__track__data, .chart__track__data:before, .chart__track__data:after, .chart__data__value, .chart__data__value:before, .chart__tooltip, .chart .tooltip .tooltip-text, .chart__tooltip:before, .chart .tooltip .tooltip-text:before, .chart__tooltip:after, .chart .tooltip .tooltip-text:after, .chart-key:before, .chart--bar-node:before, .chart--bar-node:after {
  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, .chart__tooltip, .chart .tooltip .tooltip-text {
  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, .chart__data__value {
  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, .chart__data__value, .chart__btn {
  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;
}

/* ==========================================================================
X. Chart (Colors)
========================================================================== */
.chart-color--video_course {
  background-color: #4EBA8B !important;
}
.chart-color--video_course:before {
  background-color: #4EBA8B !important;
}
.chart-color--video_course .chart__tooltip {
  border-color: #4EBA8B !important;
}
.chart-color--video_course .chart__tooltip:after {
  border-top-color: #4EBA8B !important;
}

.chart-color--book {
  background-color: #E1B6F1 !important;
}
.chart-color--book:before {
  background-color: #E1B6F1 !important;
}
.chart-color--book .chart__tooltip {
  border-color: #E1B6F1 !important;
}
.chart-color--book .chart__tooltip:after {
  border-top-color: #E1B6F1 !important;
}

.chart-color--article {
  background-color: #E97C30 !important;
}
.chart-color--article:before {
  background-color: #E97C30 !important;
}
.chart-color--article .chart__tooltip {
  border-color: #E97C30 !important;
}
.chart-color--article .chart__tooltip:after {
  border-top-color: #E97C30 !important;
}

.chart-color--learning_path {
  background-color: #FFFFFF !important;
}
.chart-color--learning_path:before {
  background-color: #FFFFFF !important;
}
.chart-color--learning_path .chart__tooltip {
  border-color: #FFFFFF !important;
}
.chart-color--learning_path .chart__tooltip:after {
  border-top-color: #FFFFFF !important;
}

.chart-color--ios {
  background-color: #3B82AD !important;
}
.chart-color--ios:before {
  background-color: #3B82AD !important;
}
.chart-color--ios .chart__tooltip {
  border-color: #3B82AD !important;
}
.chart-color--ios .chart__tooltip:after {
  border-top-color: #3B82AD !important;
}

.chart-color--android {
  background-color: #E6A33A !important;
}
.chart-color--android:before {
  background-color: #E6A33A !important;
}
.chart-color--android .chart__tooltip {
  border-color: #E6A33A !important;
}
.chart-color--android .chart__tooltip:after {
  border-top-color: #E6A33A !important;
}

.chart-color--flutter {
  background-color: #B45CB5 !important;
}
.chart-color--flutter:before {
  background-color: #B45CB5 !important;
}
.chart-color--flutter .chart__tooltip {
  border-color: #B45CB5 !important;
}
.chart-color--flutter .chart__tooltip:after {
  border-top-color: #B45CB5 !important;
}

.chart-color--game-tech {
  background-color: #E05650 !important;
}
.chart-color--game-tech:before {
  background-color: #E05650 !important;
}
.chart-color--game-tech .chart__tooltip {
  border-color: #E05650 !important;
}
.chart-color--game-tech .chart__tooltip:after {
  border-top-color: #E05650 !important;
}

.chart-color--macos {
  background-color: #C0C7CF !important;
}
.chart-color--macos:before {
  background-color: #C0C7CF !important;
}
.chart-color--macos .chart__tooltip {
  border-color: #C0C7CF !important;
}
.chart-color--macos .chart__tooltip:after {
  border-top-color: #C0C7CF !important;
}

.chart-color--server-side-swift {
  background-color: #C0C7CF !important;
}
.chart-color--server-side-swift:before {
  background-color: #C0C7CF !important;
}
.chart-color--server-side-swift .chart__tooltip {
  border-color: #C0C7CF !important;
}
.chart-color--server-side-swift .chart__tooltip:after {
  border-top-color: #C0C7CF !important;
}

/* ==========================================================================
X. Chart (Defaults)
========================================================================== */
.chart {
  padding: 24px;
  background-color: #14161E;
  border: 2px solid #3B4048;
  border-radius: 9px;
  min-width: 100%;
  height: 354px;
}
.chart .chart__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.chart .chart__header h3 {
  font-family: "Bitter", serif;
  font-size: 1.3125rem; /* 21/16 */
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}
.chart .chart__header a {
  position: relative;
  top: -8px;
  right: -8px;
}
.chart .chart__tooltip {
  display: none;
  flex-direction: column;
  padding: 12px 15px;
  color: #ffffff;
  font-size: 0.875rem; /* 14/16 */
  border-radius: 6px;
  border: 2px solid #ffffff;
  background-color: #3F444D;
  position: absolute;
  bottom: calc(100% + 8px);
  left: calc(50% - 3px);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
  text-align: center;
}
.chart .chart__tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3F444D;
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -3px;
  z-index: 1;
  border-radius: 2px;
}
.chart .chart__tooltip:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ffffff;
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -3px;
  z-index: 0;
  border-radius: 2px;
}
.chart .chart__tooltip > span {
  font-weight: 600;
}
.chart .chart__tooltip br {
  content: " ";
  display: block;
  margin: 0;
  height: 0;
}
.chart .chart__label {
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.chart .chart__empty {
  position: relative;
  top: calc(50% - 66px);
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #C0C7CF;
  display: block;
  text-align: center;
  font-size: 0.9375rem; /* 15/16 */
}

/* ==========================================================================
1. Bar Chart (Vertical)
========================================================================== */
.chart--bar-vertical {
  padding-bottom: 54px;
}
.chart--bar-vertical .chart__data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
  grid-column-gap: 29px;
  align-items: end;
  height: calc(100% - 66px);
}
.chart--bar-vertical .chart__data > div {
  height: 100%;
  border-radius: 4px;
  background-color: #597CEE;
  position: relative;
}
.chart--bar-vertical .chart__data > div:hover .chart__tooltip {
  display: flex;
}
.chart--bar-vertical .chart__data .chart__label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* ==========================================================================
2. Bar Chart (Column)
========================================================================== */
.chart--bar-column {
  display: flex;
  flex-direction: column;
}
.chart--bar-column .chart__data {
  display: flex;
}
.chart--bar-column .chart__data > div {
  border-radius: 9px;
  background-color: #9FCDEB;
  position: relative;
  height: 88px;
  margin-right: 10px;
}
.chart--bar-column .chart__data > div:last-child {
  margin-right: 0;
}
.chart--bar-column .chart__data > div:hover .chart__tooltip {
  display: flex;
}
.chart--bar-column .chart__key {
  margin-top: auto;
}
.chart--bar-column .chart__key li {
  font-size: 0.9375rem; /* 15/16 */
  padding-left: 18px;
  margin-top: 10px;
  color: #ffffff;
  background-color: transparent !important;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}
.chart--bar-column .chart__key li > span {
  color: #C0C7CF;
}
.chart--bar-column .chart__key li:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 100px;
  position: absolute;
  top: 6px;
  left: 0;
}

.chart--bar-column--split-keys .chart__key li {
  width: 50%;
  float: left;
}

/* ==========================================================================
3. Bar Chart (Blobs)
========================================================================== */
.chart--bar-blobs .chart__data {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(12px, 1fr));
  grid-row-gap: 8px;
  height: calc(100% - 66px);
}
.chart--bar-blobs .chart__data .chart__data__row {
  display: flex;
  padding-left: 20px;
  position: relative;
}
.chart--bar-blobs .chart__data .chart__data__row .chart__label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}
.chart--bar-blobs .chart__data .chart__data__row > div {
  border-radius: 9px;
  background-color: #9FCDEB;
  position: relative;
  height: 100%;
  margin-right: 5px;
}
.chart--bar-blobs .chart__data .chart__data__row > div:last-child {
  margin-right: 0;
}
.chart--bar-blobs .chart__data .chart__data__row > div:hover .chart__tooltip {
  display: flex;
}

/* ==========================================================================
4. Bar Chart (Node)
========================================================================== */
.chart--bar-node .chart__data {
  display: grid;
  grid-template-columns: repeat(10, 4px);
  justify-content: space-between;
  align-items: end;
  height: calc(100% - 64px);
  padding: 0 10px;
}
.chart--bar-node .chart__data .chart__tooltip {
  bottom: calc(100% + 20px);
}
.chart--bar-node .chart__data > div {
  height: 100%;
  min-height: 10%;
  border-radius: 9px;
  background-color: #9FCDEB;
  position: relative;
}
.chart--bar-node .chart__data > div:hover .chart__tooltip {
  display: flex;
}
.chart--bar-node .chart__data > div:before {
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  left: 50%;
  margin-left: -13px;
  bottom: calc(100% - 13px);
  border-radius: 100px;
}
.chart--bar-node .chart__data > div:after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  margin-left: -9px;
  bottom: calc(100% - 9px);
  border-radius: 100px;
  border: 4px solid #333333;
  background-color: #ffffff;
}

/* ==========================================================================
5. Heatmap
========================================================================== */
.chart--heatmap-color-1 {
  background-color: #2C48A1 !important;
}

.chart--heatmap-color-2 {
  background-color: #3B59BB !important;
}

.chart--heatmap-color-3 {
  background-color: #4A6BD4 !important;
}

.chart--heatmap-color-4 {
  background-color: #597CEE !important;
}

.chart--heatmap {
  height: auto;
}
.chart--heatmap .chart__scoll {
  overflow-x: scroll;
  position: relative;
}
.chart--heatmap .chart__scoll:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20px;
  top: 0;
  right: 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  display: none;
}
.chart--heatmap .chart__data {
  display: grid;
  grid-template-columns: repeat(52, 16px);
  grid-column-gap: 4px;
  position: relative;
  min-width: 1036px;
  max-width: 1036px;
  margin: 0 auto 24px;
  padding-top: 40px;
}
@media (max-width: 1280px) {
  .chart--heatmap .chart__data {
    padding-left: 50px;
  }
}
.chart--heatmap .chart__data .chart__data__axe > span {
  font-size: 1.0625rem; /* 17/16 */
  color: #ffffff;
}
.chart--heatmap .chart__data .chart__data__axe--month {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 1280px) {
  .chart--heatmap .chart__data .chart__data__axe--month {
    left: 50px;
  }
}
.chart--heatmap .chart__data .chart__data__axe--month > span {
  text-align: center;
}
.chart--heatmap .chart__data .chart__data__axe--day {
  position: absolute;
  left: -50px;
  top: 40px;
  height: calc(100% - 40px);
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
}
@media (max-width: 1280px) {
  .chart--heatmap .chart__data .chart__data__axe--day {
    left: 0;
  }
}
.chart--heatmap .chart__data .chart__data__axe--day > span {
  text-align: right;
}
.chart--heatmap .chart__data .chart__data__week {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 4px;
}
.chart--heatmap .chart__data .chart__data__week .chart__data__day {
  width: 16px;
  height: 16px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  position: relative;
}
.chart--heatmap .chart__data .chart__data__week .chart__data__day:hover .chart__tooltip {
  display: flex;
}
.chart--heatmap .chart__key {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 4px;
  width: 96px;
  position: relative;
}
.chart--heatmap .chart__key:before {
  content: "Less";
  position: absolute;
  left: -48px;
  top: -1px;
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chart--heatmap .chart__key:after {
  content: "More";
  position: absolute;
  right: -48px;
  top: -1px;
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chart--heatmap .chart__key > div {
  width: 16px;
  height: 16px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.1);
}
.chart--heatmap .chart__tooltip-wrapper {
  position: relative;
}
.chart--heatmap .chart__tooltip-wrapper:hover .chart__tooltip {
  display: inline-flex;
}
.chart--heatmap .chart__tooltip-wrapper .chart__tooltip {
  width: 186px;
  white-space: normal;
  text-align: left;
}

/* ==========================================================================
6. Learning Path
========================================================================== */
.chart--learning-path .chart__data > div {
  display: flex;
  flex-direction: column;
  position: relative;
}
.chart--learning-path .chart__data > div:nth-of-type(2) .chart__data__title {
  border-top: 1px solid #434A53;
  padding-top: 10px;
}
.chart--learning-path .chart__data > div .chart__data__title {
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}
.chart--learning-path .chart__data > div .chart__data__track {
  width: 100%;
  height: 4px;
  position: relative;
  margin-top: 48px;
  padding-bottom: 64px;
}
.chart--learning-path .chart__data > div .chart__data__track:before {
  content: "";
  width: calc(50% - 55px);
  height: 4px;
  border-radius: 100px;
  background-color: #FFFFFF;
  position: absolute;
  left: 34px;
  top: 0;
}
.chart--learning-path .chart__data > div .chart__data__track:after {
  content: "";
  width: calc(50% - 55px);
  height: 4px;
  border-radius: 100px;
  background-color: #FFFFFF;
  position: absolute;
  right: 34px;
  top: 0;
}
.chart--learning-path .chart__data > div .chart__data__track > span {
  font-size: 0.75rem; /* 12/16 */
  color: #C0C7CF;
  position: absolute;
  top: 22px;
}
.chart--learning-path .chart__data > div .chart__data__track > span:before {
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  top: -33px;
  left: 0;
  border: 4px solid #FFFFFF;
  border-radius: 100px;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--start {
  left: 0;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--middle {
  left: 50%;
  margin-left: -13px;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--middle:after {
  content: "";
  position: absolute;
  top: -25px;
  left: 8px;
  height: 10px;
  width: 5px;
  border-radius: 150px 0 0 150px;
  background-color: #E0F3FF;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--end {
  right: 0;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--end:before {
  right: 0;
  left: auto;
}
.chart--learning-path .chart__data > div .chart__data__track .chart__data__track--end:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #E0F3FF;
  border: 4px solid #14161E;
  border-radius: 100px;
  top: -29px;
  left: 8px;
}
.chart--learning-path .chart__data > div .chart__data__users {
  position: absolute;
  bottom: 95px;
  left: 12px;
  width: calc(100% - 24px);
}
.chart--learning-path .chart__data > div .chart__data__users > div {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -20px;
  z-index: 0;
}
.chart--learning-path .chart__data > div .chart__data__users > div:hover .chart__tooltip {
  display: flex;
  padding: 16px;
}
.chart--learning-path .chart__data > div .chart__data__users > div img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.chart--learning-path .chart__data > div .chart__data__users .chart__data__group {
  background-color: #14161E;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart--learning-path .chart__data > div .chart__data__users .chart__data__group > span:first-child {
  color: #ffffff;
  font-weight: 700;
}

/* ==========================================================================
X. Base
========================================================================== */
.chart__block {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  min-height: 360px;
  padding: 24px;
  border: 1px solid #3B3D43;
}
.chart__block--empty {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  font-size: 1rem;
  line-height: 24px;
  color: #D7D7D7;
}
.chart__block--empty span {
  max-width: 320px;
}
.chart__track {
  height: 4px;
  margin-top: 48px;
  padding-bottom: 48px;
}
.chart__track:before, .chart__track:after {
  content: "";
  top: 0;
  width: calc(50% - 55px);
  height: 4px;
  border-radius: 100px;
}
.chart__track:before {
  left: 34px;
}
.chart__track:after {
  right: 34px;
}
.chart__track__data {
  top: 22px;
}
.chart__track__data:before {
  content: "";
  top: -33px;
  left: 0;
  width: 26px;
  height: 26px;
  border-color: #FFFFFF;
  border-radius: 100px;
  border-width: 4px;
}
.chart__track__data:after {
  content: "";
}
.chart__data__value {
  top: 0;
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  height: 40px;
  width: 40px;
  margin-left: 24px;
  background: #14161E;
}
.chart__data__value:before {
  top: 0;
  left: 50%;
  bottom: 7px;
  width: 0px;
  height: 0px;
  border-radius: 100px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #FFFFFF transparent;
  z-index: 1;
}
.chart__data__value img {
  border-radius: 8px;
}
.chart__tooltip, .chart .tooltip .tooltip-text {
  bottom: calc(100% + 8px);
  left: calc(50% - 3px);
  flex-direction: column;
  white-space: nowrap;
  transform: translate(-50%, 0);
  z-index: 1;
  padding: 12px;
}
.chart__tooltip:before, .chart .tooltip .tooltip-text:before {
  content: "";
  top: 0;
  left: 50%;
  bottom: 7px;
  width: 0px;
  height: 0px;
  border-radius: 100px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #FFFFFF transparent;
  z-index: 1;
}
.chart__tooltip:after, .chart .tooltip .tooltip-text:after {
  content: "";
  top: 0;
  left: 50%;
  bottom: 7px;
  width: 0px;
  height: 0px;
  border-radius: 100px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #FFFFFF transparent;
  z-index: 1;
}
.chart__tooltip .ellipsis, .chart .tooltip .tooltip-text .ellipsis {
  max-width: 296px;
}
.chart__btn {
  top: 2;
  right: 2;
  height: 9;
  white-space: nowrap;
}

.chart-key {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 17px;
}
.chart-key:before {
  content: "";
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 100px;
  background-color: #AC9FAB;
}
.chart--bar-node {
  min-height: 10%;
  border-radius: 100px;
}
.chart--bar-node:before {
  content: "";
  top: 50%;
  left: 50%;
  bottom: calc(100% - 13px);
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 100px;
}
.chart--bar-node:after {
  content: "";
  top: 50%;
  left: 50%;
  bottom: calc(100% - 9px);
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 100px;
}

.chart-bg-color--learning_path:before {
  content: "";
}
.chart-bg-color--article:before {
  content: "";
}
.chart-bg-color--video_course:before {
  content: "";
}
.chart-bg-color--book:before {
  content: "";
}
.chart-bg-color--article:before {
  content: "";
}
.chart-bg-color--android:before {
  content: "";
}
.chart-bg-color--flutter:before {
  content: "";
}
.chart-bg-color--gametech:before {
  content: "";
}
.chart-bg-color--ios:before {
  content: "";
}
.chart-bg-color--server-side-swift:before {
  content: "";
}
.chart-bg-color--professional-growth:before {
  content: "";
}
.chart-bg-color--multi-domain:before {
  content: "";
}
.chart-bg-color--learning-path:before {
  content: "";
}
.chart-bg-color--video-course:before {
  content: "";
}
.chart-bg-color--book:before {
  content: "";
}
.chart-bg-color--ai:before {
  content: "";
}

.chart-border-color--learning_path:after {
  content: "";
  border-top: #597CEE;
}
.chart-border-color--article:after {
  content: "";
  border-top: #157857;
}
.chart-border-color--video_course:after {
  content: "";
  border-top: #E34A4C;
}
.chart-border-color--book:after {
  content: "";
  border-top: #FF8847;
}
.chart-border-color--article {
  border-color: #157857;
}
.chart-border-color--article:after {
  content: "";
  border-top: #157857;
}
.chart-border-color--android {
  border-color: #00B87E;
}
.chart-border-color--android:after {
  content: "";
  border-top: #00B87E;
}
.chart-border-color--flutter {
  border-color: #2EA4DD;
}
.chart-border-color--flutter:after {
  content: "";
  border-top: #2EA4DD;
}
.chart-border-color--gametech {
  border-color: #B44EBF;
}
.chart-border-color--gametech:after {
  content: "";
  border-top: #B44EBF;
}
.chart-border-color--ios {
  border-color: #8763D2;
}
.chart-border-color--ios:after {
  content: "";
  border-top: #8763D2;
}
.chart-border-color--server-side-swift {
  border-color: #F26FAA;
}
.chart-border-color--server-side-swift:after {
  content: "";
  border-top: #F26FAA;
}
.chart-border-color--professional-growth {
  border-color: #E3A93D;
}
.chart-border-color--professional-growth:after {
  content: "";
  border-top: #E3A93D;
}
.chart-border-color--multi-domain {
  border-color: #AC9FAB;
}
.chart-border-color--multi-domain:after {
  content: "";
  border-top: #AC9FAB;
}
.chart-border-color--learning-path {
  border-color: #597CEE;
}
.chart-border-color--learning-path:after {
  content: "";
  border-top: #597CEE;
}
.chart-border-color--video-course {
  border-color: #E34A4C;
}
.chart-border-color--video-course:after {
  content: "";
  border-top: #E34A4C;
}
.chart-border-color--book {
  border-color: #FF8847;
}
.chart-border-color--book:after {
  content: "";
  border-top: #FF8847;
}
.chart-border-color--ai {
  border-color: #E6978A;
}
.chart-border-color--ai:after {
  content: "";
  border-top: #E6978A;
}

/**
 * Skeleton components
 *
 */
/* ==========================================================================
   1. Base
   ========================================================================== */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
/* ==========================================================================
   2. Objects
   ========================================================================== */
.o-skeleton-card {
  background: #434A53;
}

.o-skeleton__artwork {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 100%;
  height: 160px;
}

.o-skeleton__graphic {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 64px;
  height: 64px;
}

.o-skeleton__graphic--small {
  width: 54px;
  height: 54px;
}

.o-skeleton__graphic--smaller {
  width: 40px;
  height: 40px;
}

.o-skeleton__graphic--large {
  width: 90px;
  height: 90px;
}

.o-skeleton__title {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 100%;
  height: 36px;
}

.o-skeleton__title--large {
  width: 250px;
}

.o-skeleton__subtitle {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 100%;
  height: 20px;
}

.o-skeleton__text {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 250px;
  height: 12px;
}

.o-skeleton__text--medium {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 250px;
  height: 18px;
}

.o-skeleton__text--small {
  width: 180px;
}

.o-skeleton__text--smaller {
  width: 90px;
}

.o-skeleton__button {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 120px;
  height: 42px;
}
@media (max-width: 600px) {
  .o-skeleton__button {
    display: block;
    margin-top: 9px;
  }
}

.o-skeleton-sidebar__meta-wrapper {
  margin-left: 12px;
}

.o-skeleton-sidebar__meta {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 60px;
  height: 9px;
}

.o-skeleton-sidebar__meta--small {
  width: 30px;
  margin-top: 9px;
}

.o-skeleton-sidebar__meta--large {
  width: 180px;
}

.o-skeleton-card {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  width: 100%;
  padding: 30px 24px;
}

.o-skeleton-card--small {
  padding: 24px 24px;
}

.o-skeleton-card--large {
  padding-bottom: 45px;
}

.o-skeleton-card__title {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 250px;
  height: 30px;
}

.o-skeleton-card__text {
  max-width: 100%;
  border-radius: 9px;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #646D7A;
  background: linear-gradient(to right, #3B4048 8%, #485059 18%, #3B4048 33%);
  background-size: 800px 104px;
  width: 330px;
  height: 12px;
  margin-top: 12px;
}

/**
 *
 * Layouts
 *
 * For use everywhere - saves you adding margin, widths to components objects
 *
 * 1. Wrappers
 *
 * 2. Columns
 *
 * 3. Margins
 *
 * 4. Padding
 *
 * 5. Flex
 *
 * 6. Position
 *
 * 7. Text
 *
 * 8. Fonts
 *
 * 9. Grid
 *
 * 10. Background
 *
 * 11. Overlay
 *
 * 12. Borders
 *
 */
/* ==========================================================================
1. Wrappers
========================================================================== */
.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;
  }
}

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

.l-height-auto {
  height: auto;
}

.l-height-100-percent {
  height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 992px) {
  .l-block--card-medium-tablet {
    max-width: 720px;
  }
}

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

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

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

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

.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--1440 {
  max-width: 1440px;
}

@media (max-width: 992px) {
  .l-block--678-tablet {
    max-width: 678px;
  }
}

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

.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;
  }
}

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

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

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

@media (max-width: 992px) {
  .l-block-padding-24--tablet {
    padding-left: 24px;
    padding-right: 24px;
  }
}

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

.l-min-width-100 {
  min-width: 100%;
}

/* ==========================================================================
  2. Columns
  ========================================================================== */
.l-col-140 {
  width: 140px;
}

.l-col-300 {
  width: 300px;
}

.l-full-col {
  width: 100%;
}

.l-full-col-max {
  max-width: 100%;
}

.l-full-col-force {
  width: 100% !important;
}

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

.l-width-40 {
  width: 40px;
}

.l-width-160 {
  width: 160px;
}

.l-width-205 {
  width: 205px;
}

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

.l-min-width-40 {
  min-width: 40px;
}

.l-3-4-col-force {
  width: 75% !important;
}

@media (max-width: 768px) {
  .l-full-col-mobile-large {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .l-full-col-mobile {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .l-no-max-width--tablet {
    max-width: none;
  }
}

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

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

@media (max-width: 992px) {
  .l-margin-auto-sides--tablet {
    margin-left: auto;
    margin-right: auto;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-100 {
  margin-top: 100px;
}

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

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

.l-margin-left-auto {
  margin-top: auto;
}

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

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

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

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

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

.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-8 {
  margin-left: 8px;
  margin-right: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l-margin-bottom-100 {
  margin-bottom: 100px;
}

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

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

.l-margin-bottom-210 {
  margin-bottom: 210px;
}

.l-margin-bottom-none {
  margin-bottom: 0;
}

/* Responsive margins */
@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: 992px) {
  .l-margin-tablet-30--force {
    margin-top: 30px !important;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 600px) {
  .l-margin-mobile-right-0 {
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   7. Padding
   ========================================================================== */
.l-padding-wrapper {
  padding-left: 30px;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .l-padding-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.l-no-padding {
  padding: 0 !important;
}

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

.l-padding-0 {
  padding-top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.l-padding-bottom-0 {
  padding-bottom: 0 !important;
}

.test {
  opacity: 0;
  height: 0;
  padding: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.l-padding-left-32 {
  padding-left: 32px;
}

.l-padding-left-34 {
  padding-left: 34px;
}

.l-padding-right-40 {
  padding-right: 40px;
}

.l-padding-left-42 {
  padding-left: 42px !important;
}

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

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

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

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

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

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

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

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

@media (max-width: 992px) {
  .l-no-padding-right--table {
    padding-right: 0;
  }
}

@media (max-width: 992px) {
  .l-no-padding-right--tablet {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .l-no-padding-right {
    padding-right: 0;
  }
}

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

@media (max-width: 768px) {
  .l-padding-bottom-60-mobile {
    padding-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .l-padding-bottom-0-mobile {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .l-no-padding--mobile-large {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 992px) {
  .l-no-padding-bottom--tablet {
    padding-bottom: 0 !important;
  }
}

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

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

@media (max-width: 992px) {
  .l-flex-wrap--tablet {
    flex-wrap: wrap;
  }
}

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

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

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

.l-flex-align-center {
  display: flex;
  align-items: center;
}

@media (max-width: 992px) {
  .l-flex-align-center--tablet {
    display: flex;
    align-items: center;
  }
}

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

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

.l-flex-align-stretch {
  display: flex;
  align-items: stretch;
}

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

.l-flex-justify-center {
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  .l-flex-justify-center-tablet {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .l-flex-justify-center--tablet {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .l-flex-justify-center--tablet-force {
    justify-content: center !important;
  }
}

.l-flex-justify-right {
  display: flex;
  justify-content: flex-end;
}

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

.l-flex-justify-space-between-align-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-flex-column {
  display: flex;
  flex-flow: column;
}

@media (max-width: 992px) {
  .l-flex-column--tablet {
    display: flex;
    flex-flow: column;
  }
}

@media (max-width: 992px) {
  .l-flex-column-reverse--tablet {
    display: flex;
    flex-flow: column-reverse;
  }
}

.l-flex-shrink-0 {
  flex-shrink: 0;
}

.l-flex-auto {
  flex: auto;
}

.l-flex-600 {
  flex: 600;
}

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

.l-absolute {
  position: absolute;
  top: 0;
}

.l-vertical-align-baseline {
  vertical-align: baseline;
}

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

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

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

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

@media (max-width: 768px) {
  .l-text-align-left--mobile {
    text-align: left;
  }
}

@media (max-width: 992px) {
  .l-text-align-center--tablet {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .l-text-align-center--mobile {
    text-align: center;
  }
}

.l-text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}

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

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

@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-24 {
    font-size: 1.5rem !important; /* 24/16 */
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .l-font-header--mobile-27 {
    font-size: 1.7rem !important; /* 36/16 */
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .l-font-header--mobile-36 {
    font-size: 2.25rem !important; /* 36/16 */
    line-height: 1.35;
  }
}

.l-font-spacing {
  letter-spacing: -0.5px;
}

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

.l-font-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.l-font-400 {
  font-weight: 400;
}

.l-font-400--force {
  font-weight: 400 !important;
}

.l-font-regular {
  font-weight: 500;
}

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

.l-font-bold {
  font-weight: 700;
}

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

.l-font-no-decor {
  text-decoration: none;
}

.l-font-no-decor--hover:hover {
  text-decoration: none !important;
}
.l-font-no-decor--hover:hover .o-button__label {
  text-decoration: none !important;
}

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

.l-font-underline--force {
  text-decoration: underline !important;
}

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

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

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

.l-line-height-12 {
  line-height: 1.2 !important;
}

.l-line-height-125 {
  line-height: 1.25 !important;
}

@media (max-width: 768px) {
  .l-line-height-125--mobile {
    line-height: 1.25 !important;
  }
}

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

.l-line-height-22 {
  line-height: 22px;
}

.l-line-height-23 {
  line-height: 23px;
}

.l-line-height-24 {
  line-height: 24px;
}

.l-line-height-30 {
  line-height: 30px;
}

.l-line-height-33 {
  line-height: 1.33;
}

.l-line-height-36 {
  line-height: 36px;
}

.l-line-height-42 {
  line-height: 42px;
}

.l-line-height-40 {
  line-height: 40px;
}

.l-font-13 {
  font-size: 0.8125rem;
}

.l-font-14 {
  font-size: 0.875rem; /* 14/16 */
}

.l-font-14--force {
  font-size: 0.875rem !important; /* 14/16 */
}

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

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

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

@media (max-width: 600px) {
  .l-font-16--mobile {
    font-size: 1rem !important; /* 15/16 */
  }
}

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

.l-font-18 {
  font-size: 1.125em;
}

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

.l-font-20 {
  font-size: 1.25rem; /* 20/16 */
}

.l-font-21 {
  font-size: 1.3125rem; /* 21/16 */
}

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

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

.l-font-30 {
  font-size: 1.875rem; /* 30/16 */
}

.l-font-32 {
  font-size: 2rem; /* 32/16 */
}

.l-font-36 {
  font-size: 2.25rem; /* 36/16 */
}

.l-font-36--force {
  font-size: 2.25rem !important; /* 36/16 */
}

.l-font-40 {
  font-size: 2.5rem; /* 40/16 */
}

.l-font-42 {
  font-size: 2.625rem; /* 42/16 */
}

.l-font-42--force {
  font-size: 2.625rem !important; /* 42/16 */
}

.l-font-44 {
  font-size: 2.75rem; /* 44/16 */
}

.l-font-54 {
  font-size: 3.375rem; /* 54/16 */
}

.l-font-66 {
  font-size: 4.125rem; /* 66/16 */
}

.l-font-72 {
  font-size: 4.5rem; /* 72/16 */
}

@media (max-width: 768px) {
  .l-font-42-mobile {
    font-size: 2.625em; /* 42/16 */
  }
}

.l-font-54--mobile {
  font-size: 3.375rem; /* 54/16 */
}
@media (max-width: 768px) {
  .l-font-54--mobile {
    font-size: 1.5em;
  }
}

.l-font-36--mobile {
  font-size: 2.25rem; /* 36/16 */
}
@media (max-width: 768px) {
  .l-font-36--mobile {
    font-size: 1.5em;
  }
}

@media (max-width: 768px) {
  .l-font-40--mobile {
    font-size: 2.5em;
  }
}

.l-font-42 {
  font-size: 2.625rem; /* 42/16 */
}

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

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

.l-color-grey {
  color: #73859F !important;
}

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

.l-color-grey-chateau {
  color: #C0C7CF !important;
}

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

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

.l-color-white-opacity-66 {
  color: #ffffff;
  opacity: 0.66;
}

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

@media (max-width: 768px) {
  .l-color-white--mobile {
    color: #ffffff;
  }
}

@media (max-width: 768px) {
  .l-color-white--mobile-force {
    color: #ffffff !important;
  }
}

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

.l-color-red {
  color: #CF3B2B !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;
  }
}

.l-font-label {
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #959DA5;
}

.l-font-label--grey-chateau {
  font-size: 0.75rem; /* 12/16 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #C0C7CF !important;
}

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

.l-whitespace-reset {
  white-space: normal !important;
}

.l-word-break {
  word-break: break-all;
}

.l-cursor {
  cursor: pointer;
}

/* ==========================================================================
9. Grid
========================================================================== */
.l-grid-2 {
  display: grid;
  grid-template-columns: auto auto;
}

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

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

.l-grid-billing {
  display: grid !important;
  grid-template-columns: 1fr 1px 1fr;
  grid-column-gap: 60px;
}

.l-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
  .l-grid-3 {
    display: block;
  }
}

.l-grid-3--tablet {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 992px) {
  .l-grid-3--tablet {
    display: block;
  }
}

.l-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 600px) {
  .l-grid-4 {
    display: block;
  }
}

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

.l-grid-5-250 {
  display: grid;
  grid-template-columns: 1fr 250px 1fr 1fr 1fr;
}

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

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

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

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

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

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

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

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

@media (max-width: 600px) {
  .l-grid-row-gap-20--mobile-large {
    grid-row-gap: 20px;
  }
}

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

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

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

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

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

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

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

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

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

/* ==========================================================================
10. Background
========================================================================== */
.l-background--transparent {
  background: transparent !important;
}

.l-background--grey {
  background: #F2F6FA;
}

.l-background--black {
  background: #333333;
}

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

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

.l-background--dark-blue {
  background: #294175;
}

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

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

.l-background--grey-navy {
  background: #354458;
}

.l-background--none {
  background: none !important;
}

.l-background--img-grey {
  width: 100%;
  height: 100%;
  background: url(/assets/patterns/block-bg-1f52a356a0c5dd6440388b9328756916ee44cd4f5108032072865fbfdbc8c640.png) no-repeat 50% 50%;
}

/* ==========================================================================
11. Overflow
========================================================================== */
.l-overflow-x {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.l-overflow-y {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .l-overflow-x--mobile {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.l-overflow-hidden {
  overflow: hidden;
}

.l-overflow-visible {
  overflow: visible !important;
}

.l-overflow-hide-bars {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}
.l-overflow-hide-bars::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
12. Borders
========================================================================== */
.l-no-border {
  border: none !important;
}

.l-border-radius {
  border-radius: 0.5625rem;
}

.l-border-bottom {
  border-bottom: 1px solid #F2F6FA;
}

.l-border-bottom--grey-mako {
  border-bottom: 1px solid #434A53;
}

.l-border-top--grey-mako {
  border-top: 1px solid #434A53;
}

.l-border-bottom-grey {
  border-bottom: 1px solid #DBDDE0;
}

.l-border-bottom-grey-periwinkle {
  border-bottom: 1px solid #D6E0EF;
}

.l-border-top {
  border-top: 1px solid #F2F6FA;
}

.l-border-top-grey {
  border-top: 1px solid #DBDDE0;
}

.l-border-all-periwinkle {
  border: 2px solid #D6E0EF;
}

.l-border-all-white {
  border: 2px solid #FFFFFF;
}

.l-border-all-green {
  border: 2px solid #158443;
}

.l-border-all-curious {
  border: 2px solid #157CB8;
}

.l-border-all-blue-dark {
  border: 2px solid #294175;
}

/* ==========================================================================
13. Block
========================================================================== */
.l-display-block {
  display: block;
}

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

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

.l-inline--force {
  display: inline !important;
}

.l-display-none {
  display: none;
}

/* ==========================================================================
14. Table
========================================================================== */
.l-table-padding-top-0 td {
  padding-top: 0 !important;
}

.l-table-padding-bottom-0 td {
  padding-bottom: 0 !important;
}

/* ==========================================================================
15. Float
========================================================================== */
.l-clear {
  clear: both;
}

/* ==========================================================================
16. Visibility
========================================================================== */
.l-visibility-hidden {
  visibility: hidden;
}

/* ==========================================================================
17. Box Shadow
========================================================================== */
.l-box-shadow-none {
  box-shadow: none;
}

/* ==========================================================================
18. Inputs
========================================================================== */
.l-full-col-select select {
  width: 100%;
}

/**
 *
 * Home layouts
 *
 *
 * 1. Wrapper
 *
 * 2. Hero
 *
 * 2a. Hero (Subscription)
 *
 * 3. Product grid
 *
 * 4. Subscription card grid
 *
 * 5. Subscription sales page (Hero photo)
 *
 */
/* ==========================================================================
1. Wrapper
========================================================================== */
/* ==========================================================================
2. Hero
========================================================================== */
.l-home-hero {
  background: #333333;
  background-image: url(/assets/patterns/pattern-black@2x-04e8cf9fd5871c713753a8df1330bcbab77abf8749f9d5f000b512d2916b3cf3.png);
  background-size: cover;
  padding: 72px 60px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .l-home-hero {
    padding: 60px 30px;
  }
}
.l-home-hero .l-home-hero__wrapper {
  display: flex;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1800px) {
  .l-home-hero .l-home-hero__wrapper {
    max-width: 1480px;
  }
}
@media (max-width: 992px) {
  .l-home-hero .l-home-hero__wrapper {
    flex-wrap: wrap;
  }
}
.l-home-hero .l-home-hero__content {
  padding: 0 45px 0 0;
}
@media (max-width: 1280px) {
  .l-home-hero .l-home-hero__content {
    padding: 0 45px 0 0;
  }
}
@media (max-width: 992px) {
  .l-home-hero .l-home-hero__content {
    order: 2;
    padding: 0;
  }
}
.l-home-hero .l-home-hero__content .l-home-hero__content-price span {
  font-family: "Bitter", serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18/16 */
  color: #ffffff;
  display: inline-block;
}
@media (max-width: 768px) {
  .l-home-hero .l-home-hero__content .l-home-hero__content-price span {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.l-home-hero .l-home-hero__content .l-home-hero__content-price .l-home-hero__content-price--sale {
  text-decoration: line-through;
  font-weight: 500;
  margin-left: 3px;
}
.l-home-hero .l-home-hero__content span.o-badge {
  display: inline-block;
  margin-bottom: 10px;
}
@media (max-width: 992px) {
  .l-home-hero .l-home-hero__content span.o-badge {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -24px;
  }
}
.l-home-hero .l-home-hero__content h1 {
  font-weight: 700;
  line-height: 1.125 !important;
  padding-top: 0;
}
@media (max-width: 768px) {
  .l-home-hero .l-home-hero__content h1 {
    line-height: 1.25 !important;
  }
}
.l-home-hero .l-home-hero__content p {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
}
@media (max-width: 600px) {
  .l-home-hero .l-home-hero__content p {
    font-size: 15px;
  }
}
.l-home-hero .l-home-hero__content h1, .l-home-hero .l-home-hero__content p {
  color: #ffffff;
}
.l-home-hero .l-home-hero__artwork {
  width: 100%;
  min-width: 540px;
  position: relative;
  right: 0;
  margin: 0;
}
@media (max-width: 1280px) {
  .l-home-hero .l-home-hero__artwork {
    margin-right: 0;
    min-width: 420px;
  }
}
@media (max-width: 1200px) {
  .l-home-hero .l-home-hero__artwork {
    margin-right: 0;
    min-width: 540px;
  }
}
@media (max-width: 992px) {
  .l-home-hero .l-home-hero__artwork {
    min-width: auto;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .l-home-hero .l-home-hero__artwork {
    width: 100%;
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    right: 0;
    bottom: 0;
  }
}
.l-home-hero .l-home-hero__artwork img {
  width: 100%;
}

/* ==========================================================================
2a. Hero (Subscription)
========================================================================== */
.l-home-hero-subscription {
  background: #F3B36A;
}
.l-home-hero-subscription .l-home-hero__wrapper {
  align-items: center;
  max-width: 1080px;
}
@media (max-width: 600px) {
  .l-home-hero-subscription .l-home-hero__wrapper {
    padding: 0;
  }
}
@media (max-width: 992px) {
  .l-home-hero-subscription .l-home-hero__content {
    order: 0;
    margin: 0 auto 30px;
    text-align: center;
  }
}
@media (max-width: 992px) {
  .l-home-hero-subscription .l-home-hero__content p {
    display: none;
  }
}
.l-home-hero-subscription .l-home-hero__artwork {
  min-width: auto;
  max-width: 400px;
  margin-left: auto;
}
@media (max-width: 992px) {
  .l-home-hero-subscription .l-home-hero__artwork {
    max-width: 320px;
  }
}
@media (max-width: 768px) {
  .l-home-hero-subscription .l-home-hero__artwork {
    margin-top: 0;
    top: 0;
    right: 0;
    margin-bottom: 24px;
  }
}
.l-home-hero-subscription h1 {
  font-size: 3.125em; /* 50/16 */
  max-width: 600px;
  color: #333333 !important;
}
@media (max-width: 600px) {
  .l-home-hero-subscription h1 {
    margin-bottom: 32px;
    font-size: 1.6875rem !important; /* 27/16 */
  }
}
.l-home-hero-subscription h1 .l-home-hero__content-header-price {
  font-size: 1.75rem;
  margin-top: 12px;
}
.l-home-hero-subscription p {
  max-width: 600px;
  color: #333333 !important;
}
@media (max-width: 992px) {
  .l-home-hero-subscription .l-home-hero__action {
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .l-home-hero-subscription .l-home-hero__action {
    width: 100%;
  }
}
@media (max-width: 992px) {
  .l-home-hero-subscription .l-home-hero__action .c-price-card {
    margin: 0;
  }
}
@media (max-width: 600px) {
  .l-home-hero-subscription .l-home-hero__action .c-price-card {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ==========================================================================
2b. Hero (iOS 12 Launch Party Bundle)
========================================================================== */
.l-home-hero-ios12-bundle-party {
  background: #F64E1A;
  background-image: url(/assets/patterns/pattern-red@2x-1f01b04495f22c1774c75d815ea6c9fb3bc9843537db07f95f53b10f929e6ebc.png);
  background-size: cover;
}
.l-home-hero-ios12-bundle-party .o-badge {
  background: #333333;
}
.l-home-hero-ios12-bundle-party .o-button {
  background: #333333 !important;
}
.l-home-hero-ios12-bundle-party .o-button svg {
  fill: #333333 !important;
}

/* ==========================================================================
2c. Hero (Black Friday)
========================================================================== */
.l-home-hero-black-friday {
  background: #234387;
  background-image: url("https://files.carolus.kodeco.com/patterns/store-hex-pattern.png");
  background-size: cover;
}
.l-home-hero-black-friday .l-home-hero__action {
  margin-left: auto;
}

.l-home-hero-black-friday--2019 {
  background: #333333;
  position: relative;
  z-index: 0;
}
.l-home-hero-black-friday--2019:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/patterns/bricks-pattern-bea4cb9757da49394b87508f06a431c876d0a5f82e27502819eb5b00164826ad.svg);
  z-index: -1;
  opacity: 0.25;
}
@media (max-width: 600px) {
  .l-home-hero-black-friday--2019:before {
    background-size: 600px;
  }
}
.l-home-hero-black-friday--2019:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(""), url(/assets/patterns/boxes-pattern-0be937af70c89d004792f8d237ed1ac76a26cda7b447f3d70f6e7bf559d0ca8d.svg);
  background-repeat: repeat-x, repeat-x;
  background-position: 0 -10px, 0 calc(100% + 20px);
  background-size: 49px, 600px;
  z-index: 0;
}
.l-home-hero-black-friday--2019 .l-home-hero__wrapper {
  max-width: 960px;
}
.l-home-hero-black-friday--2019 .c-price-card {
  background: transparent;
  border: 2px solid #28D7FE;
  box-shadow: inset 0 0 1vw #1041FF, 0 0 3vw #1041FF, inset 0 0 6vw #1041FF, 0 0 6vw #1041FF, 0 0 0.4vw #8BFDFE;
}
@media (max-width: 600px) {
  .l-home-hero-black-friday--2019 .c-price-card {
    border: 1px solid #28D7FE;
  }
}
.l-home-hero-black-friday--2019 .c-price-card h4, .l-home-hero-black-friday--2019 .c-price-card .c-price-card__price, .l-home-hero-black-friday--2019 .c-price-card .c-price-card__saving, .l-home-hero-black-friday--2019 .c-price-card .c-price-card__period {
  color: #ffffff;
}
.l-home-hero-black-friday--2019 .c-price-card .o-badge {
  background: none;
  color: white !important;
  font-size: 0.8125rem; /* 13/16 */
}
.l-home-hero-black-friday--2019 .l-home-hero__action {
  margin-left: auto;
}
.l-home-hero-black-friday--2019 .l-home-hero__wrapper {
  position: relative;
  z-index: 99;
}
.l-home-hero-black-friday--2019 h1 {
  font-size: 4rem;
  color: #2E3153 !important;
  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-home-hero-black-friday--2019 h1 {
    -webkit-text-stroke-width: 1px;
  }
}
.l-home-hero-black-friday--2019 .l-home-hero__content-header-sale {
  -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;
  font-size: inherit;
  display: inline;
}
@media (max-width: 600px) {
  .l-home-hero-black-friday--2019 .l-home-hero__content-header-sale {
    -webkit-text-stroke-width: 1px;
  }
}
.l-home-hero-black-friday--2019 .l-home-hero__content-header-price {
  color: white !important;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: none;
  text-shadow: none;
}

/* ==========================================================================
2d. Hero (Black Friday Books)
========================================================================== */
@media (max-width: 992px) {
  .l-home-hero-black-friday--books .o-badge-product--sale {
    position: relative !important;
    top: 0 !important;
  }
}
.l-home-hero-black-friday--books .l-home-hero__artwork {
  width: 100%;
  max-width: 600px;
  margin: 0;
}
@media (max-width: 992px) {
  .l-home-hero-black-friday--books .l-home-hero__artwork {
    margin: 18px auto 0;
  }
}
@media (max-width: 600px) {
  .l-home-hero-black-friday--books .l-home-hero__artwork {
    margin-bottom: -30px;
  }
}

/* ==========================================================================
2d. Server Side Swift
========================================================================== */
.l-home-hero-server-side-swift {
  background: #363B44 !important;
  background-image: url(/assets/patterns/sss-hero-home@2x-9b9a05d1eadd9fed6a1a3f1a78cedf45962172798f89042e9c243825f5663cae.png) !important;
  background-size: cover !important;
}
.l-home-hero-server-side-swift .l-home-hero__action {
  margin-left: auto;
}
.l-home-hero-server-side-swift h1 {
  font-size: 3.125rem;
}

/* ==========================================================================
2e. AR VR
========================================================================== */
.l-home-hero-ar-vr {
  background: #CF3C2A !important;
  background-image: url(/assets/patterns/ar-vr-hero-home@2x-ff680c93c72ab79860e51a867f586f88cc78e7d2a7e4165fd9a913ad8ec90b66.png) !important;
  background-size: cover !important;
}

/* ==========================================================================
2f. Hero (Black Friday)
========================================================================== */
.l-home-hero--spring-fling {
  background: #FFD7D6;
  background-image: url(/assets/patterns/spring-fling-hero-subscription@2x-5719738d4e90b276972e8d8f555079d790e8f4de6f38b4a810ec8b4e8756dd3e.png) !important;
  background-size: 100%;
  background-repeat: no-repeat;
}
.l-home-hero--spring-fling .l-home-hero__content h1, .l-home-hero--spring-fling .l-home-hero__content p {
  color: #333333;
}
.l-home-hero--spring-fling .l-home-hero__action {
  margin-left: auto;
}
.l-home-hero--spring-fling .c-price-card__price-main {
  font-size: 6.5rem !important;
}

/* ==========================================================================
2g. Hero (People)
========================================================================== */
.l-home-hero-subscription--people .l-team-subscription-hero__copy {
  margin-left: auto;
}
.l-home-hero-subscription--people .l-team-subscription-hero__copy h1 {
  font-size: 3.125rem;
}
.l-home-hero-subscription--people .l-team-subscription-hero__image:before {
  clip-path: polygon(0 0, 0 100%, 20% 100%) !important;
}
@media (max-width: 992px) {
  .l-home-hero-subscription--people .l-team-subscription-hero__copy {
    padding-bottom: 90px !important;
  }
}
@media (max-width: 768px) {
  .l-home-hero-subscription--people .l-team-subscription-hero__copy {
    order: 1;
  }
}

/* ==========================================================================
3. Product grid
========================================================================== */
.l-home-products-grid {
  overflow: hidden;
  padding-top: 90px !important;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1800px) {
  .l-home-products-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1480px;
  }
}
@media (max-width: 992px) {
  .l-home-products-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
}
@media (max-width: 768px) {
  .l-home-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .l-home-products-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
4. Subscription card grid
========================================================================== */
.l-home-subscription-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}
@media (max-width: 992px) {
  .l-home-subscription-card-grid {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 30px;
  }
}
@media (max-width: 768px) {
  .l-home-subscription-card-grid {
    grid-template-columns: 1fr;
  }
}
.l-home-subscription-card-grid li .c-plan-v2 {
  height: 100%;
  min-height: 500px;
}
@media (max-width: 768px) {
  .l-home-subscription-card-grid li .c-plan-v2 {
    min-height: auto;
  }
}

/* ==========================================================================
5b. Subscription sales page (v2)
========================================================================== */
.l-home-subscription-v2 {
  padding-top: 30px;
  padding-bottom: 48px;
  margin-top: 30px;
  margin-bottom: -48px;
  overflow: hidden;
}
@media (max-width: 992px) {
  .l-home-subscription-v2 .l-padding-right-40 {
    padding-right: 0;
  }
}

/* ==========================================================================
5b. Subscription sales page (Hero photo)
========================================================================== */
.l-home-subscription-photo {
  position: relative;
  margin-top: -30px;
}
@media (max-width: 992px) {
  .l-home-subscription-photo {
    margin-top: 30px;
  }
}
.l-home-subscription-photo > div {
  position: relative;
  min-width: 480px;
  width: 100%;
}
@media (max-width: 768px) {
  .l-home-subscription-photo > div {
    min-width: 100%;
  }
}
.l-home-subscription-photo > div > img {
  border-radius: 0.75rem;
}
.l-home-subscription-photo > div:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: calc(100% + 32px);
  height: 80%;
  border-radius: 0.75rem; /* 12/16 */
  background-color: #D6E0EF;
  opacity: 0.4;
  z-index: -1;
}
.l-home-subscription-photo > div > div {
  position: absolute;
  bottom: 24px;
  right: -24px;
}
@media (max-width: 768px) {
  .l-home-subscription-photo > div > div {
    right: 34px;
  }
}
@media (max-width: 350px) {
  .l-home-subscription-photo > div > div {
    bottom: 24px;
    right: 4px;
  }
}
.l-home-subscription-photo > div > div img {
  width: 100%;
  box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.25);
  border-radius: 0.9375rem; /* 15/16 */
}
.l-home-subscription-photo > div > div img:first-of-type {
  width: 230px;
  position: relative;
  right: 60px;
}
.l-home-subscription-photo > div > div img:last-of-type {
  width: 170px;
  position: absolute;
  right: -20px;
  top: 60px;
}

/**
*
* Product Layouts
*
* For use on product pages
*
* 1. Recommendations (Owned)
*
* 2a. Subscription Plans
*
* 2b. Team Subscription Plans
*
* 3. Mobile App Screenshot Scroller
*
* 4a. Book Hero
*
* 4b. Book Hero (Flutter)
*

/* ==========================================================================
1. Recommendations (Owned)
========================================================================== */
section.product-guide.l-product-recommendations div.col div.side-info {
  width: 100% !important;
  padding: 0 0 0 0 !important;
  max-width: 720px;
  margin: 0 auto;
}

/* ==========================================================================
2a. Subscription Plans
========================================================================== */
.l-subscription-plans {
  padding-top: 60px;
}
.l-subscription-plans h1 {
  color: #333333;
}
.l-subscription-plans p {
  color: #333333;
  font-size: 1.0625rem; /* 17/16 */
}
.l-subscription-plans .c-plan {
  height: auto;
  padding-bottom: 72px;
}
.l-subscription-plans .c-plan--emphasis:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 40px;
  background: #158443;
  border-radius: 0.5625rem;
}

.l-beginner-plan-artwork {
  display: block;
  max-width: 500px;
  margin: 0 auto;
}

.l-pro-plan-artwork {
  display: block;
  margin: 0 auto;
  max-width: 840px;
}

.l-company-logos {
  display: block;
  max-width: 806px;
  margin: 0 auto;
}

.l-enterprise-feature-artwork {
  display: block;
  margin: 0 auto;
  width: 83%;
}
@media (max-width: 600px) {
  .l-enterprise-feature-artwork {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .l-enterprise-feature-artwork {
    width: 100%;
  }
}

.l-enterprise--intro li {
  position: relative;
  padding-left: 34px;
  margin-top: 15px;
  font-size: 1rem; /* 16/16 */
  font-weight: 600;
}
.l-enterprise--intro li:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  border: 2px solid #158443;
  background-image: url(/assets/svg-icons/feature-checkmark--green-c018b040de369057d3beed9fbceb9b9afddb511683addc5241e41a7587395601.png);
  background-size: 24px 24px;
  background-position: center center;
}

.l-enterprise--feature-details, .l-enterprise--feature-photo {
  width: 50%;
}
@media (max-width: 992px) {
  .l-enterprise--feature-details, .l-enterprise--feature-photo {
    width: 100%;
  }
}
@media (max-width: 992px) {
  .l-enterprise--feature-details {
    display: flex;
    justify-content: center;
    text-align: center;
  }
}
.l-enterprise--feature-details > div {
  max-width: 600px;
}
.l-enterprise--feature-details:nth-child(2), .l-enterprise--feature-details:nth-child(4) {
  padding-left: 60px;
}
@media (max-width: 992px) {
  .l-enterprise--feature-details:nth-child(2), .l-enterprise--feature-details:nth-child(4) {
    padding-left: 0;
  }
}
.l-enterprise--feature-photo {
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  .l-enterprise--feature-photo {
    margin-top: 30px;
  }
}
.l-enterprise--feature-photo > div {
  position: relative;
  max-width: 530px;
}
.l-enterprise--feature-photo > div:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: calc(100% + 32px);
  height: 80%;
  border-radius: 0.75rem; /* 12/16 */
  background-color: #D6E0EF;
  opacity: 0.4;
  z-index: -1;
}
.l-enterprise--feature-photo > div > img {
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: 0.75rem;
}
.l-enterprise--feature:nth-child(1) .l-enterprise--feature-details {
  padding-right: 60px;
}
@media (max-width: 992px) {
  .l-enterprise--feature:nth-child(1) .l-enterprise--feature-details {
    padding-right: 0;
  }
}
.l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div {
  position: absolute;
  bottom: 24px;
  right: -24px;
}
.l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:first-of-type {
  width: 230px;
  position: relative;
  right: 60px;
}
@media (max-width: 650px) {
  .l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:first-of-type {
    display: none;
  }
}
.l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:last-of-type {
  width: 170px;
  position: absolute;
  right: -20px;
  top: 65px;
}
@media (max-width: 1280px) {
  .l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:last-of-type {
    right: 40px;
  }
}
@media (max-width: 992px) {
  .l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:last-of-type {
    right: -20px;
  }
}
@media (max-width: 650px) {
  .l-enterprise--feature:nth-child(1) .l-enterprise--feature-photo > div > div img:last-of-type {
    display: none;
  }
}
.l-enterprise--feature:nth-child(2) .l-enterprise--feature-photo > div > div {
  position: absolute;
  width: 260px;
  height: 205px;
  transform: translateY(-50%);
  top: 50%;
  right: -60px;
}
@media (max-width: 1280px) {
  .l-enterprise--feature:nth-child(2) .l-enterprise--feature-photo > div > div {
    right: -40px;
  }
}
@media (max-width: 650px) {
  .l-enterprise--feature:nth-child(2) .l-enterprise--feature-photo > div > div {
    display: none;
  }
}
.l-enterprise--feature:nth-child(2) .l-enterprise--feature-photo > div > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}
.l-enterprise--feature:nth-child(2) .l-enterprise--feature-photo > div > div img {
  width: 100%;
}
.l-enterprise--feature:nth-child(3) .l-enterprise--feature-details {
  padding-right: 60px;
}
@media (max-width: 992px) {
  .l-enterprise--feature:nth-child(3) .l-enterprise--feature-details {
    padding-right: 0;
  }
}
.l-enterprise--feature:nth-child(3) .l-enterprise--feature-photo > div > div {
  position: absolute;
  bottom: 40px;
  right: -60px;
  width: 300px;
  height: 200px;
  box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}
@media (max-width: 1280px) {
  .l-enterprise--feature:nth-child(3) .l-enterprise--feature-photo > div > div {
    right: auto;
    left: -40px;
  }
}
@media (max-width: 650px) {
  .l-enterprise--feature:nth-child(3) .l-enterprise--feature-photo > div > div {
    display: none;
  }
}
.l-enterprise--feature:nth-child(3) .l-enterprise--feature-photo > div > div img {
  width: 100%;
}
.l-enterprise--feature:nth-child(4) .l-enterprise--feature-photo > div > div {
  position: absolute;
  bottom: 10%;
  right: -60px;
  width: 400px;
  height: 118px;
}
@media (max-width: 1280px) {
  .l-enterprise--feature:nth-child(4) .l-enterprise--feature-photo > div > div {
    right: -40px;
  }
}
@media (max-width: 650px) {
  .l-enterprise--feature:nth-child(4) .l-enterprise--feature-photo > div > div {
    display: none;
  }
}
.l-enterprise--feature:nth-child(4) .l-enterprise--feature-photo > div > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}
.l-enterprise--feature:nth-child(4) .l-enterprise--feature-photo > div > div img {
  width: 100%;
}

/* ==========================================================================
2b. Team Subscription
========================================================================== */
.l-team-subscription-pattern {
  background-image: url(/assets/patterns/geo-pattern-team-left-99dda0c69b9315e6fe7472309bba958d018cb90e32ff5d1e594ea82e948afa66.svg), url(/assets/patterns/geo-pattern-team-right-d7cdadd7511c2647f3d5a04335fbfeec4045bcb4affc9177a302324739406572.svg);
  background-position: -70px, right -70px;
  background-size: 360px, 360px;
  background-repeat: no-repeat;
}
@media (max-width: 992px) {
  .l-team-subscription-pattern {
    background-position: -70px, right -70px;
    background-size: 210px, 210px;
  }
}

.l-team-subscription-hero .l-subscription-sales-flourish--top {
  margin-bottom: -100px;
}
.l-team-subscription-hero .l-subscription-sales-flourish--top:after {
  opacity: 0.5;
}
@media (max-width: 992px) {
  .l-team-subscription-hero .l-grid-2-fr {
    grid-template-columns: 1fr;
  }
}
.l-team-subscription-hero .l-team-subscription-hero__copy {
  padding: 30px;
  max-width: 600px;
}
@media (max-width: 992px) {
  .l-team-subscription-hero .l-team-subscription-hero__copy {
    margin: 0 auto;
  }
}
.l-team-subscription-hero h1 {
  font-size: 2.625rem; /* 42/16 */
}
@media (max-width: 992px) {
  .l-team-subscription-hero h1 {
    text-align: center;
  }
}
.l-team-subscription-hero h1 span {
  display: block;
  font-size: 1.6875rem; /* 27/16 */
  margin-top: 12px;
}
@media (max-width: 768px) {
  .l-team-subscription-hero h1 span {
    font-size: 1.3125rem; /* 21/16 */
  }
}
.l-team-subscription-hero p {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
}
@media (max-width: 992px) {
  .l-team-subscription-hero p {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-team-subscription-hero p {
    font-size: 0.9375em !important; /* 15/16 */
  }
}
.l-team-subscription-hero .c-list-checkmark {
  padding-left: 0;
}
@media (max-width: 992px) {
  .l-team-subscription-hero .c-list-checkmark {
    max-width: 300px;
    margin: 0 auto;
  }
}
.l-team-subscription-hero .c-list-checkmark li {
  font-size: 1.0625rem; /* 17/16 */
}
.l-team-subscription-hero .c-list-checkmark li:before {
  background: none;
  background-image: url(/assets/svg-icons/checkmark--green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
  background-size: cover;
}
.l-team-subscription-hero .l-team-subscription-hero__image {
  background-image: url(/assets/artwork/people-background-2@2x-b7a04992aea20d0dea922347e4240430873d52762ea5d26dd6e8ab3bdb3c33df.jpg);
  background-size: cover;
  position: relative;
}
@media (max-width: 992px) {
  .l-team-subscription-hero .l-team-subscription-hero__image {
    display: none;
  }
}
@media (max-width: 768px) {
  .l-team-subscription-hero .l-team-subscription-hero__image {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    background-image: url(/assets/artwork/people-background-2-not-cut@2x-450ff414c6b480651f4162d832226dc9805c6bf709c7d6c78758da324d4b28e8.jpg);
    background-size: cover;
  }
}
.l-team-subscription-hero .l-team-subscription-hero__image:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #F3B36A;
  clip-path: polygon(100% 0, 80% 100%, 100% 100%);
}

@media (max-width: 992px) {
  .l-team-subscription-plans {
    display: flex !important;
    flex-wrap: wrap;
  }
  .l-team-subscription-plans .c-plan--emphasis {
    width: 100% !important;
    order: 1;
    border-bottom: 2px solid #3B4048;
  }
  .l-team-subscription-plans .c-plan--no-price {
    width: 100%;
    order: 2;
  }
}
.l-team-subscription-plans .c-plan {
  width: auto;
  height: auto;
  margin-top: 0;
}

.l-team-subscription-highlight {
  text-align: center;
}
.l-team-subscription-highlight h2 {
  font-size: 3.375rem; /* 54/16 */
}
.l-team-subscription-highlight img {
  width: 100%;
}
@media (max-width: 992px) {
  .l-team-subscription-highlight img {
    max-width: 480px;
    margin: 0 auto;
  }
}
.l-team-subscription-highlight .l-team-screenshot-mobile {
  position: absolute;
  width: 192px;
  bottom: -20px;
  right: -86px;
}
@media (max-width: 992px) {
  .l-team-subscription-highlight .l-team-screenshot-mobile {
    display: none;
  }
}

/* ==========================================================================
3. Mobile App Screenshot Scroller
========================================================================== */
.l-mobile-app-iframe {
  text-align: center;
}
@media (max-width: 768px) {
  .l-mobile-app-iframe iframe {
    height: 464px;
  }
}
.l-mobile-app-iframe > span {
  display: inline-block;
  position: relative;
}
.l-mobile-app-iframe > span:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 2px;
  width: 296px;
  height: 605px;
  background-image: url(/assets/artwork/iphone-foreground@2x-ea1f082e5bbeefed5a1e8002be51465eed0d20634aa49302b0f4c8a42a5f1334.png);
  background-size: 100% 100%;
}
@media (max-width: 768px) {
  .l-mobile-app-iframe > span:before {
    width: 236px;
    height: 484px;
    top: -8px;
    left: 32px;
  }
}
.l-mobile-app-iframe > span:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  left: -14px;
  width: 328px;
  height: 630px;
  background-image: url(/assets/artwork/iphone-background@2x-567d5366a805a9f79b7f09bad4930576b8aa4f8246b8d62de9686c30f7bafee3.png);
  background-size: 100% 100%;
}
@media (max-width: 768px) {
  .l-mobile-app-iframe > span:after {
    width: 266px;
    height: 504px;
    top: -12px;
    left: 17px;
    opacity: 0.75;
  }
}
.l-mobile-app-iframe > span > span {
  overflow: hidden;
  border-radius: 40px;
}

@media (max-width: 768px) {
  .l-mobile-app-screenshot-scroller {
    margin-left: -20px;
    width: calc(100% + 40px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-mobile-app-screenshot-scroller::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media (max-width: 768px) {
  .l-mobile-app-screenshot-scroller img {
    width: auto;
    max-width: 720px;
  }
}

/* ==========================================================================
4a. Book Hero
========================================================================== */
.l-book-hero {
  max-width: 1152px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 66px;
}
@media (max-width: 1200px) {
  .l-book-hero {
    padding-left: 24px;
    padding-right: 24px;
    grid-column-gap: 40px;
  }
}
@media (max-width: 768px) {
  .l-book-hero {
    grid-template-columns: 1fr;
  }
}

.l-book-hero-artwork {
  text-align: right;
}
@media (max-width: 768px) {
  .l-book-hero-artwork {
    text-align: left;
  }
}
.l-book-hero-artwork img {
  width: 100%;
  max-width: 396px;
  border-radius: 15px;
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
}
@media (max-width: 768px) {
  .l-book-hero-artwork img {
    max-width: 194px;
    margin-bottom: 20px;
    margin-top: -20px;
  }
}

/* ==========================================================================
4b. Book Hero (FLutter)
========================================================================== */
.l-book-hero-flutter {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-column-gap: 66px;
  position: relative;
}
@media (max-width: 992px) {
  .l-book-hero-flutter {
    grid-template-columns: 1fr;
    max-width: 396px;
  }
}
.l-book-hero-flutter:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -250px;
  top: 60px;
  background: #1AC0F8;
  border-radius: 100px;
  z-index: 0;
  filter: blur(64px);
}
.l-book-hero-flutter:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -220px;
  top: 150px;
  background: #007FF7;
  border-radius: 100px;
  z-index: 0;
  opacity: 0.6;
  filter: blur(64px);
}
@media (max-width: 992px) {
  .l-book-hero-flutter .l-book-hero-artwork {
    text-align: center;
    margin-bottom: 30px;
  }
}
.l-book-hero-flutter .l-book-hero-artwork img {
  position: relative;
  z-index: 1;
}
@media (max-width: 992px) {
  .l-book-hero-flutter .l-book-hero-artwork img {
    max-width: 270px;
  }
}
@media (max-width: 768px) {
  .l-book-hero-flutter .l-book-hero-artwork img {
    margin-bottom: 0;
    margin-top: 0;
  }
}
.l-book-hero-flutter .l-book-hero-artwork div {
  position: relative;
}
.l-book-hero-flutter .l-book-hero-artwork div:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  left: -20px;
  top: -20px;
  background: #158443;
  filter: blur(104px);
  border-radius: 100px;
  z-index: 0;
}
.l-book-hero-flutter .l-book-hero-artwork div:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -20px;
  bottom: -20px;
  background: #1AC0F8;
  filter: blur(54px);
  border-radius: 100px;
  z-index: 0;
}

.l-background--flutter {
  position: relative;
  z-index: 0;
}
.l-background--flutter:before {
  content: "";
  position: absolute;
  width: 394px;
  height: 207px;
  left: -67px;
  top: 516px;
  background: #00B3F1;
  border-radius: 9px;
  z-index: -1;
  filter: blur(154px);
}
.l-background--flutter:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #B0E7FC 100%, #E4F7FF 100%);
  z-index: -2;
  opacity: 0.3;
}

.l-background--flutter-bubbles {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.l-background--flutter-bubbles:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  left: 0;
  top: 0;
  background: #158443;
  border-radius: 100px;
  z-index: -1;
  filter: blur(104px);
}
.l-background--flutter-bubbles:after {
  content: "";
  position: absolute;
  right: 50%;
  top: 30px;
  width: 90px;
  height: 90px;
  background: #007FF7;
  border-radius: 100px;
  z-index: -1;
  opacity: 0.6;
  filter: blur(64px);
}

/**
* Custom CSS for special events
*
* 1. Black Friday 2021 Subscription Sales Page
*
* 2. Black Friday 2021 Subscription Period Selector
* 
* 3. Promo Modal Black Friday 2021
*

/* ==========================================================================
1. Black Friday 2021 Subscription Sales Page
========================================================================== */
.l-black-friday-ui-sales-2021 {
  background: #0d0d0d;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-8a869542023d54d475b323a4581e6fc0657c53c8b07280ff4e0ae3ee49574de7.png);
  background-repeat: repeat-x;
  background-size: 1466px;
}
.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;
}
.l-black-friday-ui-sales-2021 p {
  color: #C0C7CF;
}
.l-black-friday-ui-sales-2021 .l-subscription-plans--teaspoon,
.l-black-friday-ui-sales-2021 .l-plan-information,
.l-black-friday-ui-sales-2021 .l-subscription-promo-video--teaspoon,
.l-black-friday-ui-sales-2021 .l-subscription-plans--end {
  background-image: none !important;
}
.l-black-friday-ui-sales-2021 .l-border-bottom-grey {
  border-color: rgba(255, 255, 255, 0.1);
}
.l-black-friday-ui-sales-2021 .l-subscription-plans--teaspoon > div > .l-text-align-center {
  color: #C0C7CF;
}
.l-black-friday-ui-sales-2021 .l-subscription-plans--teaspoon > div > .l-text-align-center a {
  color: #158443 !important;
}
.l-black-friday-ui-sales-2021 .c-plan {
  background: #0d0d0d;
  border: 3px solid #ffffff;
}
.l-black-friday-ui-sales-2021 .c-plan .c-plan__price,
.l-black-friday-ui-sales-2021 .c-plan .c-plan__time-month,
.l-black-friday-ui-sales-2021 .c-plan .c-plan__benefits li {
  color: #ffffff;
}
.l-black-friday-ui-sales-2021 .c-plan .c-plan__blurb,
.l-black-friday-ui-sales-2021 .c-plan .c-plan__time-save {
  color: #C0C7CF !important;
  opacity: 1 !important;
}
.l-black-friday-ui-sales-2021 .c-plan .c-plan__benefits li:before {
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
}
.l-black-friday-ui-sales-2021 .c-plan .o-button--green {
  background: none !important;
}
.l-black-friday-ui-sales-2021 .c-plan .o-button--green .o-button__svg--green {
  fill: #0d0d0d;
}
.l-black-friday-ui-sales-2021 .c-plan__benefits--highlight:before {
  background-image: url(/assets/svg-icons/checkmark-bounded--bf-5290d7e0b67628bfd4fd6fd9b2f6f6ba2eef5dded71f93af72cf6420cee4228e.png) !important;
  background-size: cover;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis {
  background: #0d0d0d !important;
  z-index: 1;
  border: none;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis:before {
  content: "";
  position: absolute;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  left: -3px;
  top: -3px;
  background: rgb(227, 60, 112);
  background: linear-gradient(180deg, rgb(227, 60, 112) 0%, rgb(80, 132, 248) 51%, rgb(242, 193, 75) 100%);
  border-radius: 0.5625rem;
  z-index: -1;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis:after {
  content: "";
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #0d0d0d !important;
  z-index: -1;
}
@media (max-width: 992px) {
  .l-black-friday-ui-sales-2021 .c-plan--emphasis:after {
    display: block !important;
  }
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis .c-plan__intro > .o-badge {
  background: #0d0d0d;
  border: 3px solid #E33D70;
  color: #ffffff;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis .o-button--white-blue .o-button__label {
  color: #0d0d0d;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis .o-button--white-blue .o-button__icon--blue {
  background: #0d0d0d;
}
.l-black-friday-ui-sales-2021 .c-plan--emphasis .o-button--white-blue .o-button__icon--blue svg {
  fill: #ffffff;
}
.l-black-friday-ui-sales-2021 .c-plan--left {
  right: -3px;
  opacity: 0.5;
  transition: opacity 0.5s;
}
@media (max-width: 992px) {
  .l-black-friday-ui-sales-2021 .c-plan--left {
    opacity: 1;
    right: 0;
  }
}
.l-black-friday-ui-sales-2021 .c-plan--left:hover {
  opacity: 1;
}
.l-black-friday-ui-sales-2021 .c-plan--right {
  left: -3px;
  opacity: 0.5;
  transition: opacity 0.5s;
}
@media (max-width: 992px) {
  .l-black-friday-ui-sales-2021 .c-plan--right {
    opacity: 1;
    left: 0;
  }
}
.l-black-friday-ui-sales-2021 .c-plan--right:hover {
  opacity: 1;
}
.l-black-friday-ui-sales-2021 .l-pro-plan-artwork, .l-black-friday-ui-sales-2021 .l-beginner-plan-artwork {
  filter: invert(100%);
}
.l-black-friday-ui-sales-2021 .l-professional-plan-information p, .l-black-friday-ui-sales-2021 .l-beginner-plan-information p {
  color: #C0C7CF !important;
}
.l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--blue, .l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--green, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--blue, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--green {
  background: #ffffff !important;
}
.l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--blue .o-button__label, .l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--green .o-button__label, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--blue .o-button__label, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--green .o-button__label {
  color: #0d0d0d !important;
}
.l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--blue i, .l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--green i, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--blue i, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--green i {
  background: #0d0d0d;
}
.l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--blue i svg, .l-black-friday-ui-sales-2021 .l-professional-plan-information .o-button--green i svg, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--blue i svg, .l-black-friday-ui-sales-2021 .l-beginner-plan-information .o-button--green i svg {
  fill: #ffffff;
}
.l-black-friday-ui-sales-2021 .c-subscription-promo-video p {
  color: #C0C7CF !important;
}
.l-black-friday-ui-sales-2021 .c-testimonial--twitter {
  background: #0d0d0d !important;
  z-index: 1;
  border: none;
  border-radius: 0;
}
.l-black-friday-ui-sales-2021 .c-testimonial--twitter:before {
  content: "";
  position: absolute;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  left: -3px;
  top: -3px;
  background: rgb(227, 60, 112);
  background: linear-gradient(180deg, rgb(227, 60, 112) 0%, rgb(80, 132, 248) 51%, rgb(242, 193, 75) 100%);
  border-radius: 0.5625rem;
  z-index: -1;
}
.l-black-friday-ui-sales-2021 .c-testimonial--twitter:after {
  content: "";
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #0d0d0d !important;
  z-index: -1;
  border-radius: 0.375rem; /* 6/16 */
}
.l-black-friday-ui-sales-2021 .c-testimonial--twitter .c-testimonial__user {
  color: #ffffff;
}
.l-black-friday-ui-sales-2021 .c-testimonial--twitter .c-testimonial__twitter, .l-black-friday-ui-sales-2021 .c-testimonial--twitter p, .l-black-friday-ui-sales-2021 .c-testimonial--twitter .c-testimonial__date {
  color: #C0C7CF;
}
.l-black-friday-ui-sales-2021 .c-faq p, .l-black-friday-ui-sales-2021 .c-faq ul, .l-black-friday-ui-sales-2021 .c-faq ol {
  color: #C0C7CF;
}

/* ==========================================================================
2. Black Friday 2021 Subscription Period Selector
========================================================================== */
.l-black-friday-ui-period-2021 {
  padding-top: 72px;
}
.l-black-friday-ui-period-2021 .c-global-header__logo {
  display: none;
}
.l-black-friday-ui-period-2021 section > .l-text-align-center svg {
  fill: #C0C7CF;
}
.l-black-friday-ui-period-2021 section > .l-text-align-center a {
  color: #C0C7CF !important;
}
.l-black-friday-ui-period-2021 .c-plan {
  box-shadow: none;
  background: #0d0d0d !important;
}
.l-black-friday-ui-period-2021 .c-plan:last-of-type {
  z-index: 1;
  border: none;
}
.l-black-friday-ui-period-2021 .c-plan:last-of-type:before {
  content: "";
  position: absolute;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  left: -3px;
  top: -3px;
  background: rgb(227, 60, 112);
  background: linear-gradient(180deg, rgb(227, 60, 112) 0%, rgb(80, 132, 248) 51%, rgb(242, 193, 75) 100%);
  border-radius: 0.5625rem;
  z-index: -1;
}
.l-black-friday-ui-period-2021 .c-plan:last-of-type:after {
  content: "";
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #0d0d0d !important;
  z-index: -1;
  border-radius: 0.375rem; /* 6/16 */
}
@media (max-width: 992px) {
  .l-black-friday-ui-period-2021 .c-plan:last-of-type:after {
    display: block !important;
  }
}
.l-black-friday-ui-period-2021 .c-plan:last-of-type .o-badge--save {
  background: #E33D71;
  border: 3px solid #E33D71 !important;
  color: #ffffff;
}
.l-black-friday-ui-period-2021 .c-plan .l-color-grey-raven {
  color: #C0C7CF !important;
}
.l-black-friday-ui-period-2021 .c-plan .o-button--primary {
  background: #ffffff !important;
  color: #0d0d0d;
}
.l-black-friday-ui-period-2021 .c-plan .o-button--primary i {
  background: #0d0d0d;
}
.l-black-friday-ui-period-2021 .c-plan .o-button--primary i svg {
  fill: #ffffff !important;
}

/* ==========================================================================
3. Promo Modal Black Friday 2021
========================================================================== */
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle {
  display: flex;
  flex-direction: column;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-modal__close svg {
  transform: rotate(45deg) !important;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan {
  background: #ffffff;
  border: 0;
  padding: 24px;
}
@media (max-width: 768px) {
  .l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan {
    width: 100% !important;
  }
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan > div .l-margin-30 {
  margin-top: 20px;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan .l-text-align-left {
  background: #f2f6fa;
  border-radius: 0.5625rem;
  font-size: 0.9375rem; /* 15/16 */
  padding: 18px;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan p {
  color: #6E7687 !important;
  font-size: 1rem !important;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan p:last-of-type {
  margin-top: 15px !important;
}
.l-black-friday-ui-sales-2021 .l-promo-legacy-upgrade .c-modal--billing-cycle .c-plan .o-button--green {
  background: #158443 !important;
}

/**
*
* Onboarding
*
*
* 1. Pattern
*
* 2. Mobile
*
* 3. FAQ
*
* 4. Order Table
*
* 5. Invites
*
*

/* ==========================================================================
1. Pattern
========================================================================== */
.l-team-pattern {
  background-image: url(/assets/patterns/geo-pattern-team-left-99dda0c69b9315e6fe7472309bba958d018cb90e32ff5d1e594ea82e948afa66.svg), url(/assets/patterns/geo-pattern-team-right-d7cdadd7511c2647f3d5a04335fbfeec4045bcb4affc9177a302324739406572.svg);
  background-position: -70px bottom, right -70px bottom;
  background-size: 150px, 200px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .l-team-pattern {
    background-image: none;
  }
}

/* ==========================================================================
2. Mobile
========================================================================== */
@media (max-width: 768px) {
  .l-onboarding {
    padding-top: 90px;
  }
}
.l-onboarding .c-global-header__logo {
  position: absolute;
  top: 15px;
  left: 15px;
}
.l-onboarding .o-input {
  border: 2px solid #D6E0EF;
}
.l-onboarding .o-input:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
  box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
  outline: none;
}
.l-onboarding .c-onboarding-progress {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  .l-onboarding .l-background--white {
    background: none;
  }
  .l-onboarding h1 {
    white-space: normal;
  }
  .l-onboarding .o-label {
    color: #ffffff;
  }
  .l-onboarding .o-input, .l-onboarding .o-textarea {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .l-onboarding .o-input::placeholder, .l-onboarding .o-textarea::placeholder {
    color: #959DA5;
  }
  .l-onboarding .c-manage-licenses__number {
    background-image: none;
    width: auto;
  }
  .l-onboarding .c-manage-licenses__number span {
    color: #ffffff;
  }
  .l-onboarding .c-manage-licenses__number .c-manage-licenses__number-key {
    font-size: 5.625rem; /* 90/16 */
    letter-spacing: 1px;
  }
}

@media (max-width: 768px) {
  .l-onboarding__seats-manage {
    margin-top: -90px;
    padding: 0;
  }
}

/* ==========================================================================
3. FAQ
========================================================================== */
.l-onboarding .c-modal {
  display: flex !important;
}
.l-onboarding .c-modal h1 {
  font-size: 1.5rem;
  text-align: left;
  padding-top: 24px;
  padding-left: 30px;
  padding-right: 30px;
  color: #333333;
}
.l-onboarding .c-modal .c-manage-licenses__number-key {
  color: #333333 !important;
}
.l-onboarding .c-faq h2, .l-onboarding .c-faq h3 {
  color: #ffffff;
  font-weight: 700;
}
.l-onboarding .c-faq h2 {
  font-size: 1.5rem; /* 24/16 */
}
.l-onboarding .c-faq h3 {
  font-size: 1.125rem; /* 18/16 */
}

/* ==========================================================================
4. Order Table
========================================================================== */
.l-onboarding__order-table {
  width: 100%;
  border-collapse: collapse;
}
.l-onboarding__order-table tr th:first-child {
  padding-left: 0 !important;
}
.l-onboarding__order-table tr th:last-child {
  padding-right: 0 !important;
}
.l-onboarding__order-table tr td:first-child {
  padding-left: 0;
}
.l-onboarding__order-table tr td:last-child {
  padding-right: 0;
}
.l-onboarding__order-table td, .l-onboarding__order-table th {
  border: none;
  background: none !important;
}
.l-onboarding__order-table td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.l-onboarding__order-table thead {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  letter-spacing: -0.5px;
  text-align: left;
}
@media (max-width: 768px) {
  .l-onboarding__order-table tr {
    border-color: #434A53;
  }
  .l-onboarding__order-table td, .l-onboarding__order-table th {
    color: #ffffff;
  }
  .l-onboarding__order-table .l-color-green {
    color: #ffffff;
  }
}

/* ==========================================================================
5. Invites
========================================================================== */
.l-onboarding__invites-count {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
}

/* ==========================================================================
6. Email Form Input
========================================================================== */
.o-textarea-input:focus {
  background: none;
  box-shadow: none;
  border: none;
  display: inline;
  width: auto;
  outline: none;
}
.o-textarea-input[disabled] {
  background: none;
}

/**
* Admin Layouts
*
* Custom classes for widths, margins, padding, font-sizes etc. for accounts.rw.com
*
* 1. Wrappers, Text
*
* 2. Forms
*
* 3. Sidebar
*
* 4. Loading
*
* 5. Login Screen
*
* 6. Buttons
*
* 7. Background Images
*
* 8. Debug profile page
*
* 9. Modals
*
* 10. Manage People
*
* 11. Stats Overview
*
* 12. Receipts Table
*
* 13. Left Right Table
*
* 14. Team Charts
*
* 15. Inactive State
*
*/
/* ==========================================================================
1. Wrappers, Text
========================================================================== */
.l-admin {
  background: #F2F6FA;
  padding-left: 280px;
  min-height: 100vh;
  height: 100%;
}
@media (max-width: 1200px) {
  .l-admin {
    padding-left: 0;
    padding-right: 0;
  }
}
.l-admin .c-nav-sidebar {
  width: 320px;
}
.l-admin .container {
  padding-top: 48px;
  padding-bottom: 90px;
}

.l-admin--enterprise {
  background-color: #333333;
}
.l-admin--enterprise main {
  padding-left: 310px;
  padding-right: 30px;
}
@media (max-width: 1200px) {
  .l-admin--enterprise main {
    padding: 0;
  }
}

.l-admin-big-container {
  margin: 0 -40px;
}
@media (max-width: 1200px) {
  .l-admin-big-container {
    margin: 0;
  }
}

.l-admin-xl-container {
  margin: 0 -80px;
}
@media (max-width: 1280px) {
  .l-admin-xl-container {
    margin: 0 -40px;
  }
}
@media (max-width: 992px) {
  .l-admin-xl-container {
    margin: 0;
  }
}

.admin__title {
  font-weight: 700;
  padding-top: 0;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .admin__title {
    font-size: 1.875rem !important;
  }
}

.admin__subtitle {
  font-size: 1rem;
  color: #6E7687;
  margin-top: 6px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .admin__subtitle {
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
2. Forms
========================================================================== */
.l-admin__form-card {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  margin-top: 30px;
  padding: 24px 30px 30px 30px;
}
.l-admin__form-card.c-contact-sales-form .hs-button {
  margin-top: 0;
}
.l-admin__form-card form.l-admin__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.l-admin__form-card .l-form__group {
  width: 100%;
}
.l-admin__form-card .l-form__group-checkbox {
  position: relative;
  height: 45px;
}
.l-admin__form-card .l-form__group-checkbox .o-checkbox {
  margin-left: 10px;
}
.l-admin__form-card .l-form__group--half-col {
  width: calc(50% - 10px);
  position: relative;
}
@media (max-width: 600px) {
  .l-admin__form-card .l-form__group--half-col {
    width: 100%;
  }
}
.l-admin__form-card .l-form__input {
  width: 100%;
}
.l-admin__form-card .l-form__textarea {
  width: 100%;
  min-height: 200px;
}
.l-admin__form-card p {
  font-size: 1rem;
}

.l-admin__form-card--dark {
  background: transparent;
  border: 2px solid #3B4048;
}
.l-admin__form-card--dark .c-form__section-title, .l-admin__form-card--dark p {
  color: #ffffff !important;
}
.l-admin__form-card--dark p.l-admin__form-card--error {
  color: #CF3B2B !important;
}

.l-admin__form-card--dark-clear {
  background: none;
  border-radius: 0;
  border-top: 1px solid #434A53;
  padding: 24px 0 0 0;
}
.l-admin__form-card--dark-clear .c-form__section-title {
  color: #ffffff;
}

/* ==========================================================================
3a. Navigation
========================================================================== */
.l-admin-user-settings .l-navigation-link--tutorials {
  display: block;
}
.l-admin-user-settings .l-navigation-link--tutorials-flex {
  display: inline-flex;
}
.l-admin-user-settings .l-navigation-link--store {
  display: none;
}
@media (max-width: 600px) {
  .l-admin-user-settings .l-navigation-link--store {
    display: block;
  }
}

.l-navigation-link--tutorials {
  display: none;
}
@media (max-width: 600px) {
  .l-navigation-link--tutorials {
    display: block;
  }
}

@media (max-width: 600px) {
  .l-navigation-link--tutorials-flex {
    display: block;
  }
}

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

/* ==========================================================================
3b. Sidebar
========================================================================== */
.l-block-offset-sidebar {
  margin-left: 420px;
}
@media (max-width: 992px) {
  .l-block-offset-sidebar {
    margin-left: auto;
  }
}

/* ==========================================================================
4. Loading
========================================================================== */
.l-admin__loading .o-loader-circle {
  margin: 0 auto;
}

@media (max-width: 992px) {
  .l-admin-sidebar__loading {
    height: 78px;
  }
}
.l-admin-sidebar__loading .o-loader-circle {
  margin: 0 auto;
}

/* ==========================================================================
5. Login Screen
========================================================================== */
.l-admin__logged-out {
  text-align: center;
  padding: 60px 90px;
}
@media (max-width: 600px) {
  .l-admin__logged-out {
    padding: 45px 30px;
  }
}
.l-admin__logged-out img {
  max-width: 278px;
  width: 100%;
}
@media (max-width: 600px) {
  .l-admin__logged-out img {
    max-width: 208.5px;
  }
}
.l-admin__logged-out h1 {
  margin-top: 30px;
  font-size: 40px;
}
@media (max-width: 600px) {
  .l-admin__logged-out h1 {
    font-size: 30px;
  }
}
.l-admin__logged-out .o-button {
  margin-top: 30px;
}

/* ==========================================================================
6. Buttons
========================================================================== */
.l-title-button {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 600px) {
  .l-title-button {
    position: relative;
    margin-top: 10px;
  }
}

/* ==========================================================================
7. Background Images
========================================================================== */
.l-admin-page-background {
  position: absolute;
  top: -70px;
  width: 100%;
  height: 100px;
  z-index: 0;
}
@media (max-width: 992px) {
  .l-admin-page-background {
    display: none;
  }
}

/* ==========================================================================
8. Debug Profile Page
========================================================================== */
.l-debug-profile__debug-field {
  font-size: 1.2rem;
  color: #6E7687;
  word-wrap: break-word;
}

/* ==========================================================================
9. Modals
========================================================================== */
@media (max-width: 600px) {
  .c-modal .l-onboarding__seats-manage {
    margin-top: 0;
    margin-bottom: 50px !important;
  }
}
@media (max-width: 600px) {
  .c-modal .c-manage-licenses__number {
    width: auto;
    height: auto;
    background: none;
  }
}
@media (max-width: 600px) {
  .c-modal .c-manage-licenses__number .c-manage-licenses__number-key {
    font-size: 5rem;
    margin: 0;
  }
}
@media (max-width: 600px) {
  .c-modal .c-manage-licenses__number .c-manage-licenses__number-label {
    font-size: 1.125rem;
  }
}
@media (max-width: 768px) {
  .c-modal .l-onboarding__order-table thead th {
    color: #333333;
  }
}
@media (max-width: 768px) {
  .c-modal .l-onboarding__order-table tr {
    border-color: #F2F6FA !important;
  }
  .c-modal .l-onboarding__order-table tr td {
    color: #6E7687;
  }
  .c-modal .l-onboarding__order-table tr .l-font-header {
    color: #333333;
  }
}
@media (max-width: 768px) and (max-width: 600px) {
  .c-modal .l-onboarding__order-table tr .l-font-header {
    font-size: 1.125rem; /* 18/16 */
  }
}

/* ==========================================================================
10. Manage People
========================================================================== */
.l-manage-people .l-manage-people__table-row {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 1fr 120px 42px;
  align-items: center;
}
@media (max-width: 768px) {
  .l-manage-people .l-manage-people__table-row {
    grid-template-columns: 42px 150px 200px 150px 150px 150px;
  }
}
.l-manage-people .l-manage-people__table-row .c-table__row-data {
  word-break: break-word;
}
@media (max-width: 992px) {
  .l-manage-people .l-manage-people__table-row .c-table__row-data {
    white-space: normal;
  }
}
.l-manage-people .l-manage-people__table-row .c-table__row-data .o-badge {
  background: #3B4048;
  color: #ffffff;
}
.l-manage-people .l-manage-people__table-row .c-table__row-data .o-badge--admin {
  background: #9668B0;
}
.l-manage-people .l-manage-people__table-row .c-table__row-data .o-badge--pending {
  background: #73859F;
}
@media (max-width: 992px) {
  .l-manage-people .l-manage-people__table-row .c-table__row-control {
    margin-left: 0;
  }
}
.l-manage-people .l-manage-people__table-row .c-table__row-control .o-icon-button--more {
  background-color: transparent;
}
.l-manage-people .c-modal {
  display: flex !important;
}
@media (max-width: 768px) {
  .l-manage-people .c-modal .c-modal-wrapper {
    padding-top: 24px;
  }
}
.l-manage-people .c-modal h1 {
  color: #333333;
  font-size: 1.5rem; /* 24/16 */
  text-align: left;
  padding-top: 24px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 0;
}
@media (max-width: 768px) {
  .l-manage-people .c-modal h1 {
    white-space: normal;
    padding: 0;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}
.l-manage-people .c-modal .o-label {
  margin-top: 0.75rem; /* 12/16 */
}
.l-manage-people .c-modal .l-background--white {
  margin: 0;
  padding-top: 6px;
}
.l-manage-people .c-modal .l-block {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
}
.l-manage-people .c-modal .l-onboarding__invites-count {
  color: #C0C7CF;
}
@media (max-width: 768px) {
  .l-manage-people .c-modal .l-onboarding__invites-count {
    font-size: 0.875rem; /* 14/16 */
  }
}
.l-manage-people .c-modal .l-onboarding__invites-count a {
  color: #ffffff;
}

/* ==========================================================================
11. Stats Overview
========================================================================== */
.l-stats-overview {
  display: grid;
  grid-column-gap: 18px;
  height: 120px;
}
@media (max-width: 600px) {
  .l-stats-overview {
    grid-row-gap: 18px;
    height: auto;
    margin-top: -30px;
    margin-bottom: 42px;
  }
}
.l-stats-overview .c-stat-overview__entry, .l-stats-overview .o-button {
  height: 100%;
}
@media (max-width: 992px) {
  .l-stats-overview .o-stat-counter {
    background: none;
    margin-top: -40px;
  }
}
@media (max-width: 600px) {
  .l-stats-overview .o-stat-counter {
    min-height: 120px;
    margin-top: 0;
  }
}

.l-stats-overview--5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 768px) {
  .l-stats-overview--5 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 600px) {
  .l-stats-overview--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
12. Receipts Table
========================================================================== */
@media (max-width: 768px) {
  .l-receipts-table {
    grid-template-columns: 150px 150px 100px 150px 150px;
  }
}
.l-receipts-table .c-table__row-data {
  word-break: break-word;
}
@media (max-width: 992px) {
  .l-receipts-table .c-table__row-data {
    white-space: normal;
  }
}
@media (max-width: 992px) {
  .l-receipts-table .c-table__row-control {
    padding-right: 30px;
  }
}

/* ==========================================================================
13. Left Right Table
========================================================================== */
.l-table-space-between p {
  margin: 0;
  padding: 12px 0 !important;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #EFF3F6;
}
.l-table-space-between p:last-child {
  border-bottom: 0;
}

/**
* Chart components
*
* 1. Team charts
*
*
*/
/* ==========================================================================
14. Team Charts
========================================================================== */
.l-chart-team {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  padding: 30px;
}

.l-chart-dropdown {
  width: 90px;
  position: absolute;
  right: 0;
  top: 0;
}
.l-chart-dropdown select {
  font-size: 0.875rem; /* 14/16 */
  font-weight: 700;
  width: 100%;
  height: 38px;
  margin-top: 0;
}

/* ==========================================================================
15. Inactive
========================================================================== */
.l-order-state--inactive, .l-order-state--overdue {
  position: relative;
}
.l-order-state--inactive:before, .l-order-state--overdue:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
.l-order-state--inactive .admin__title, .l-order-state--inactive .admin__subtitle, .l-order-state--inactive h3, .l-order-state--overdue .admin__title, .l-order-state--overdue .admin__subtitle, .l-order-state--overdue h3 {
  color: #DBDDE0;
}
.l-order-state--inactive .l-chart-team, .l-order-state--overdue .l-chart-team {
  position: relative;
  overflow: hidden;
}
.l-order-state--inactive .l-chart-team:before, .l-order-state--overdue .l-chart-team:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0.75;
}
.l-order-state--inactive .l-chart-dropdown, .l-order-state--overdue .l-chart-dropdown {
  color: #DBDDE0;
}
.l-order-state--inactive .l-chart-dropdown select, .l-order-state--overdue .l-chart-dropdown select {
  background-image: url(/assets/svg-icons/chevron-down--grey-28fa7c7964fb70295d0f88fbf6df1ed473326302744cebb05e206951dda25a1f.png);
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.l-order-state--inactive .l-chart-dropdown select:focus, .l-order-state--overdue .l-chart-dropdown select:focus {
  background-image: url(/assets/svg-icons/chevron-down--grey-28fa7c7964fb70295d0f88fbf6df1ed473326302744cebb05e206951dda25a1f.png) !important;
  background-size: 10px;
  background-position: center right 15px !important;
  background-repeat: no-repeat;
}
.l-order-state--inactive .l-stats-overview .o-button--grey, .l-order-state--inactive .l-stats-overview .o-button--green, .l-order-state--overdue .l-stats-overview .o-button--grey, .l-order-state--overdue .l-stats-overview .o-button--green {
  background: #DBDDE0 !important;
}
.l-order-state--inactive .l-stats-overview .o-button--grey svg, .l-order-state--inactive .l-stats-overview .o-button--green svg, .l-order-state--overdue .l-stats-overview .o-button--grey svg, .l-order-state--overdue .l-stats-overview .o-button--green svg {
  fill: #DBDDE0;
}
.l-order-state--inactive .o-input--shadow svg, .l-order-state--overdue .o-input--shadow svg {
  fill: #DBDDE0;
}
.l-order-state--inactive .o-input--shadow::placeholder, .l-order-state--overdue .o-input--shadow::placeholder {
  color: #DBDDE0;
}
.l-order-state--inactive .c-form__section-title, .l-order-state--overdue .c-form__section-title {
  color: #DBDDE0;
}
.l-order-state--inactive .o-stat-counter .o-stat-counter__main, .l-order-state--inactive .o-stat-counter .o-stat-counter__sub, .l-order-state--overdue .o-stat-counter .o-stat-counter__main, .l-order-state--overdue .o-stat-counter .o-stat-counter__sub {
  color: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .c-table__row-data, .l-order-state--overdue .c-list-item-wrapper .c-table__row-data {
  color: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .o-button--dark, .l-order-state--overdue .c-list-item-wrapper .o-button--dark {
  background: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .o-button__svg--grey-raven, .l-order-state--overdue .c-list-item-wrapper .o-button__svg--grey-raven {
  fill: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .o-badge, .l-order-state--overdue .c-list-item-wrapper .o-badge {
  color: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .c-table__header-toggle svg, .l-order-state--overdue .c-list-item-wrapper .c-table__header-toggle svg {
  fill: #DBDDE0;
}
.l-order-state--inactive .c-list-item-wrapper .checkbox__indicator, .l-order-state--overdue .c-list-item-wrapper .checkbox__indicator {
  border: 2px solid #DBDDE0;
}
.l-order-state--inactive .l-button__search, .l-order-state--overdue .l-button__search {
  fill: #C0C7CF;
}

/**
* Invitation Layouts
*
* Layouts for the invitations pages
*
* 1. Logo
*
*/
/* ==========================================================================
1. Logo
========================================================================== */
.l-invitation .c-global-header__logo {
  width: 240px;
  position: fixed;
  top: 15px;
  left: 15px;
}

/**
* Subscription Management
*
* Custom classes for user facing subscription pages
*
* 1. Backgrounds
*
* 2. Plan Cards
*
* 3. Card States
*
* 4. Cancellation Hero
*
* 5. Cancellation Form
*
* 6. Promo Upgrade
*
*/
/* ==========================================================================
1. Backgrounds
========================================================================== */
.l-card-background-documents {
  background-image: url(/assets/artwork/documents-6d3b560713c65edf4c36a4db330e8909a156f965411a119a012d0c970bcd3466.svg);
  background-size: 180px;
  background-position: top 20px right 20px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .l-card-background-documents {
    background-image: none;
  }
}

/* ==========================================================================
2. Plan Cards
========================================================================== */
.l-manage-subscription .o-alert {
  margin-bottom: 30px;
}
.l-manage-subscription .c-plan {
  width: auto;
  min-height: 520px;
  height: auto;
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan {
    background: #ffffff;
    border-radius: 0.5625rem !important;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    text-align: center;
    border-bottom: none;
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .l-manage-subscription .c-plan {
    height: auto;
    min-height: auto;
    padding-bottom: 36px;
  }
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan h3 {
    color: #333333;
  }
}
.l-manage-subscription .c-plan .c-plan__period {
  display: block;
  position: relative;
  bottom: 0;
  color: #ffffff;
  text-decoration: underline;
  transform: none;
}
@media (max-width: 992px) {
  .l-manage-subscription .c-plan .c-plan__time span {
    color: #333333;
  }
}
.l-manage-subscription .c-plan .o-badge--payment-issue {
  display: none;
  position: absolute;
  z-index: 0;
  top: -13px;
  color: #CF3B2B;
  transform: translateX(-50%);
  box-shadow: none;
  border-radius: 0.75rem; /* 12/16 */
  border: 6px solid #CF3B2B;
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan .o-button {
    top: auto;
    right: auto;
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .l-manage-subscription .c-plan > div .o-button,
  .l-manage-subscription .c-plan > .o-button {
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    transform: translateX(0);
    margin-top: 20px;
  }
}
.l-manage-subscription .c-plan .o-button--white-red {
  background: #ffffff !important;
  color: #CF3B2B !important;
}
.l-manage-subscription .c-plan .o-button--white-red svg {
  fill: #ffffff;
}
.l-manage-subscription .c-plan__subtitle {
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
  max-width: 240px;
  margin: 18px auto 0;
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan__subtitle {
    font-size: 0.875rem; /* 14/16 */
  }
}
.l-manage-subscription .c-plan__subtitle--large {
  max-width: none;
  font-size: 0.875rem;
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan__subtitle--large {
    padding: 0 20px;
  }
}
@media (max-width: 1200px) {
  .l-manage-subscription .c-plan__price {
    display: inline-block;
  }
  .l-manage-subscription .c-plan__price .c-plan__price-currency-string,
  .l-manage-subscription .c-plan__price .c-plan__price-symbol-left,
  .l-manage-subscription .c-plan__price .c-plan__price-symbol-right,
  .l-manage-subscription .c-plan__price .c-plan__price-value {
    color: #333333;
  }
}
.l-manage-subscription .c-plan__time {
  margin-top: 15px;
}
.l-manage-subscription .c-plan__time .c-plan__time-month {
  font-size: 0.9375rem; /* 15/16 */
}
.l-manage-subscription .c-plan--owned {
  background: #158443;
}
.l-manage-subscription .c-plan--owned h3,
.l-manage-subscription .c-plan--owned .c-plan__subtitle,
.l-manage-subscription .c-plan--owned .c-plan__time-month {
  color: #ffffff;
}
.l-manage-subscription .c-plan--owned .c-plan__price .c-plan__price-currency-string,
.l-manage-subscription .c-plan--owned .c-plan__price .c-plan__price-symbol-left,
.l-manage-subscription .c-plan--owned .c-plan__price .c-plan__price-symbol-right,
.l-manage-subscription .c-plan--owned .c-plan__price .c-plan__price-value {
  color: #ffffff;
}
.l-manage-subscription .c-plan--owned .c-plan__price-original {
  color: #ffffff;
}
@media (max-width: 992px) {
  .l-manage-subscription .c-plan--owned .c-plan__time span {
    color: #ffffff !important;
  }
}
.l-manage-subscription .c-plan--owned .c-plan__period {
  padding-bottom: 40px;
}
@media (max-width: 992px) {
  .l-manage-subscription .c-plan--owned .c-plan__period {
    top: 0;
  }
  .l-manage-subscription .c-plan--owned .c-plan__period:hover {
    background: none;
  }
}
@media (max-width: 768px) {
  .l-manage-subscription .c-plan--owned .c-plan__period {
    padding-bottom: 0;
  }
}
@media (max-width: 992px) {
  .l-manage-subscription .c-plan--owned .o-button--text {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan {
  min-height: auto;
}
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle h3,
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__price-currency-string,
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__price-symbol-left,
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__price-symbol-right,
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__price-value,
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__time-month {
  color: #333333 !important;
}
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__price-original {
  color: #333333 !important;
}
.l-manage-subscription .c-plan--owned .c-modal--billing-cycle .c-plan__subtitle {
  color: #6E7687;
}
.l-manage-subscription .l-admin__form-card--custom-advert img {
  width: 240px;
  margin-top: -40px;
}
@media (max-width: 768px) {
  .l-manage-subscription .l-admin__form-card--custom-advert img {
    display: none;
  }
}
.l-manage-subscription .l-admin__form-card--leave-team img {
  width: 320px;
}
@media (max-width: 768px) {
  .l-manage-subscription .l-admin__form-card--leave-team img {
    display: none;
  }
}
.l-manage-subscription .c-modal--billing-cycle {
  display: block;
  flex-wrap: wrap;
  position: fixed;
  padding-top: 120px;
  scrollbar-width: none;
}
@media (max-width: 768px) {
  .l-manage-subscription .c-modal--billing-cycle {
    padding-top: 60px;
  }
}
@media (max-width: 600px) {
  .l-manage-subscription .c-modal--billing-cycle > div {
    display: block !important;
  }
}
.l-manage-subscription .c-modal--billing-cycle .c-plan {
  padding-bottom: 110px;
  opacity: 1 !important;
  min-height: auto;
}
@media (max-width: 600px) {
  .l-manage-subscription .c-modal--billing-cycle .c-plan {
    width: 100% !important;
    margin-right: 0;
  }
}
.l-manage-subscription .c-modal--billing-cycle .c-modal__close svg {
  transform: rotate(45deg) !important;
}
.l-manage-subscription .c-modal--billing-cycle h2,
.l-manage-subscription .c-modal--billing-cycle > div {
  width: 100%;
}
.l-manage-subscription .c-modal--billing-cycle > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-manage-subscription .c-modal--billing-cycle h2 {
  font-size: 2.625rem; /* 42/16 */
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.l-manage-subscription .c-modal--billing-cycle .o-button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan__subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-weight: 500;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan__time-month {
  font-weight: 500;
}
.l-manage-subscription .c-modal--billing-cycle .o-badge {
  padding: 2px 9px;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--yearly {
  width: 300px;
  height: 420px;
  margin-right: 20px;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--yearly .o-badge {
  left: 50%;
  background: #158443;
  color: #ffffff;
  display: flex;
  border-color: #ffffff;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--monthly {
  width: 240px;
  height: 300px;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--monthly h3 {
  font-size: 1.125rem; /* 18/16 */
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--monthly .c-plan__price {
  margin-top: 24px;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--monthly .c-plan__price-value {
  font-size: 3rem;
  line-height: 3.25rem;
}
.l-manage-subscription .c-modal--billing-cycle .c-plan--monthly .c-plan__price-value--long {
  font-size: 2.5rem;
  line-height: 2.75rem;
}
@media (max-width: 992px) {
  .l-manage-subscription .c-modal--billing-cycle .c-plan--monthly .o-button {
    background: none;
  }
}

/* ==========================================================================
3. States
========================================================================== */
.l-manage-subscription--payment-issue .c-plan a.o-button {
  visibility: hidden;
}
.l-manage-subscription--payment-issue .c-plan--owned {
  background: #CF3B2B;
  opacity: 1;
}
.l-manage-subscription--payment-issue .c-plan--owned a.o-button {
  visibility: visible;
}
.l-manage-subscription--payment-issue .c-plan--owned .o-badge--payment-issue {
  display: inline-flex;
}
.l-manage-subscription--payment-issue .c-comparison-table .o-button--xxs {
  display: none;
}
.l-manage-subscription--payment-issue .c-comparison-table .c-comparison-table__entry--owned {
  background: #CF3B2B !important;
}
.l-manage-subscription--payment-issue .c-comparison-table .c-comparison-table__entry--owned:before {
  background: #CF3B2B !important;
}
.l-manage-subscription--payment-issue .l-admin__form-card--leave-team {
  background: #CF3B2B;
}
.l-manage-subscription--payment-issue .l-admin__form-card--leave-team .o-badge--payment-issue {
  position: absolute;
  top: -13px;
  left: 20px;
  color: #CF3B2B;
  box-shadow: none;
  border-radius: 0.75rem; /* 12/16 */
  border: 6px solid #CF3B2B;
}
.l-manage-subscription--payment-issue .l-admin__form-card--leave-team h2 {
  margin-top: 12px !important;
}
.l-manage-subscription--payment-issue .l-admin__form-card--leave-team h2,
.l-manage-subscription--payment-issue .l-admin__form-card--leave-team p {
  color: #ffffff;
}

/* ==========================================================================
4. Cancellation hero
========================================================================== */
section.l-cancel-subscription div.l-cancel-subscription__hero {
  display: grid;
  align-items: center;
  grid-template-columns: 0.3fr 0.7fr;
  grid-column-gap: 25px;
  padding-top: 30px;
  max-width: 912px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero > div {
    text-align: center;
  }
}
section.l-cancel-subscription div.l-cancel-subscription__hero > div img {
  width: 100%;
}
@media (max-width: 768px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero > div img {
    max-width: 166px;
  }
}
section.l-cancel-subscription div.l-cancel-subscription__hero h1 {
  font-size: 1.875rem; /* 30/16 */
}
section.l-cancel-subscription div.l-cancel-subscription__hero p {
  font-size: 1.067em;
}
@media screen and (max-width: 600px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero p {
    font-size: 0.9375em; /* 15/16 */
  }
}
section.l-cancel-subscription div.l-cancel-subscription__hero ul {
  padding: 0 0 0 1.5em;
}
@media screen and (max-width: 768px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero ul {
    padding: 0;
  }
}
section.l-cancel-subscription div.l-cancel-subscription__hero ul li {
  font-weight: 600;
  padding: 0.25em 0 0 0.25em;
  list-style: url(/assets/svg-icons/cross-11c2c63cd88a163b0d9376a0dd23ec324d3a4d34fe63cf21e8e7290fdf5eac99.svg);
}
@media screen and (max-width: 768px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero ul li {
    list-style: none;
  }
}
@media screen and (max-width: 600px) {
  section.l-cancel-subscription div.l-cancel-subscription__hero ul li {
    font-size: 0.9375em; /* 15/16 */
  }
}
section.l-cancel-subscription div.l-cancel-subscription__hero ul li a {
  text-decoration: line-through;
}

/* ==========================================================================
5. Cancellation form
========================================================================== */
/* ==========================================================================
6. Promo Upgrade
========================================================================== */
.l-promo-legacy-upgrade .l-grid-2-fr {
  grid-column-gap: 25px;
}
@media (max-width: 768px) {
  .l-promo-legacy-upgrade .l-grid-2-fr {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-promo-legacy-upgrade .l-grid-2-fr .l-font-66 {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media (max-width: 768px) {
  .l-promo-legacy-upgrade .l-grid-2-fr .l-font-36 {
    font-size: 1.875rem; /* 30/16 */
  }
}
.l-promo-legacy-upgrade img {
  width: 326px;
  margin-top: -30px;
}
@media (max-width: 768px) {
  .l-promo-legacy-upgrade img {
    margin-top: 30px;
  }
}

/**
* Subscription Sales (Teaspoon Edition)
*
* Custom classes for customer facing subscription pages
*
* 1. Subscription Promo Video
*
* 2a. Subscription Sales Page Hero
*
* 2b. Subscription Sales Page End Hero
*
* 3. Plan Information
*
* 4. Subscription Sales Page Step 2
*
* 5. Subscription Sales Page Step 2 Background
*
* 6. Comparison Table
*
*
*/
/* ==========================================================================
1. Subscription promo video
========================================================================== */
.l-subscription-promo-video--teaspoon {
  position: relative;
  overflow: hidden;
  background-image: url(/assets/patterns/shape-background-3-98a3548155f326c31e130b5c01a8d8176d2cdaaae520fdb46b8940958fe33321.svg), url(/assets/patterns/shape-background-4-4f460ddfd29f20159353515d265feff9776962aec9db526c1447687528672580.svg);
  background-size: 425px, 345px;
  background-position: top -60px left, top -60px left;
  background-repeat: no-repeat, no-repeat;
}
.l-subscription-promo-video--teaspoon h3 {
  padding: 0;
  margin: 0;
}
.l-subscription-promo-video--teaspoon p {
  margin: 12px 0 0 0;
}

.l-subscription-promo-video--enterprise .c-store-video__wrapper {
  height: 273px;
  outline: none;
}
.l-subscription-promo-video--enterprise .c-store-video__wrapper:before {
  content: "";
  position: absolute;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  left: -16px;
  top: -16px;
  background: #eff3f9;
  border-radius: 24px;
}
@media (max-width: 992px) {
  .l-subscription-promo-video--enterprise .c-store-video__wrapper {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .l-subscription-promo-video--enterprise .c-store-video__wrapper {
    height: auto;
  }
}
.l-subscription-promo-video--enterprise .c-store-video__fake {
  background: url(/assets/screenshots/video-bg-laptop-e1d30db9638b0ba2edc423dd3e04651028a507a1a20a1df349fddf0ccc85b11a.png) center;
  background-size: cover;
  z-index: auto;
}
.l-subscription-promo-video--enterprise .c-store-video__fake .lightbox-container {
  z-index: 999999;
}

/* ==========================================================================
2. Subscription Sales Page Hero
========================================================================== */
.l-subscription-plans--teaspoon {
  background-image: url(/assets/artwork/illustration-subscription-header-923bfbe189a4967a8aa7d5afda8500cc54c825927e383d2434d94171e11bbafb.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-5f2501d8a5c685432e6fec6ce3a06c14f9f69b159e45b93978d5c9bbc6ba6805.svg);
  background-size: 1500px, 100%, 1440px;
  background-position: top -120px center, top -72px right, top -60px right -60px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.l-subscription-plans--teaspoon .c-global-header__logo {
  height: 72px;
}
.l-subscription-plans--teaspoon .c-global-header__logo .o-header-logo {
  top: 10px;
  left: 15px;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon > div > .l-flex-justify-center {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .l-margin-30--force {
    margin-top: 0 !important;
  }
}
.l-subscription-plans--teaspoon .c-plan {
  height: auto;
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25) !important;
  padding: 32px 18px !important;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan {
    width: 100%;
    text-align: center;
    padding-bottom: 36px;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan:first-of-type {
    order: 1;
  }
}
.l-subscription-plans--teaspoon .c-plan h3 span.o-badge {
  display: block;
  margin: 12px auto 0;
  width: 44px;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    display: grid;
    grid-template-areas: "intro benefits" "options options";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    grid-template-areas: "intro intro" "benefits benefits" "options options";
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro {
    grid-area: intro;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__blurb {
  font-size: 0.9375rem; /* 15/16 */
  color: #333333;
  width: 200px;
  display: block;
  text-align: center;
  margin: 9px auto 0;
  opacity: 0.66;
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__blurb {
    margin-bottom: 0;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
  padding-bottom: 90px;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    grid-area: benefits;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
    margin-top: 24px !important;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__benefits li {
  font-size: 0.9375rem; /* 15/16 */
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits li:first-child {
    margin-top: 0;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    grid-area: options;
    margin-top: 30px;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options a {
    position: relative;
    transform: none;
    bottom: auto;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
  bottom: 36px;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
    bottom: auto !important;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
    bottom: 0;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    margin-top: 20px;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    white-space: normal;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--left, .l-subscription-plans--teaspoon .c-plan--right {
    border-radius: 0.5625rem;
  }
}
.l-subscription-plans--teaspoon .c-plan--emphasis {
  background: #157CB8;
  min-width: 336px;
}
.l-subscription-plans--teaspoon .c-plan--emphasis:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 40px;
  background: #157CB8;
  border-radius: 0.5625rem;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis {
    order: 0;
    min-height: auto;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis {
    min-width: auto;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis:after {
    display: none;
  }
}
.l-subscription-plans--teaspoon .c-plan--emphasis .c-plan__blurb {
  color: #ffffff !important;
}
.l-subscription-plans--teaspoon .c-plan--emphasis .o-badge {
  color: #157CB8;
  border-color: #157CB8;
}
.l-subscription-plans--teaspoon .c-plan--emphasis .o-badge--pro {
  color: #ffffff;
  border-color: #ffffff;
  position: relative;
  border-radius: 0.5625rem;
  border: 2px solid #ffffff;
  left: auto;
  margin: 0;
  top: -4px;
  margin-left: 3px;
}

/* ==========================================================================
2b. End of page subscription cards
========================================================================== */
.l-subscription-plans--end .l-subscription-plans--teaspoon {
  padding-top: 60px;
  padding-bottom: 210px;
  background-image: url(/assets/artwork/illustration-subscription-footer-3f006e8de74aa332011a3256b28af0c718119d71833066e4c1b0df5328bedd17.svg);
  background-size: 1390px, 100%, 1005, 100%;
  background-position: bottom -120px center, top left, top left, top left;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
@media (max-width: 992px) {
  .l-subscription-plans--end .l-subscription-plans--teaspoon {
    background-image: url(/assets/artwork/illustration-subscription-footer-3f006e8de74aa332011a3256b28af0c718119d71833066e4c1b0df5328bedd17.svg);
    background-size: 1390px, 100%, 1005, 100%;
    background-position: bottom -120px center, bottom left, bottom left, bottom left;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
}

/* ==========================================================================
3. Plan Information
========================================================================== */
.l-plan-information {
  background-image: url(/assets/patterns/shape-background-10-8dc6c16764b209a97f6331bcb77ae61099015f8080637db6ac1a372e5ee01295.svg), url(/assets/patterns/shape-background-9-97efed33da791e301452cb22227cb6770f95aafdb3bb2cd4c4acac7dc0ba2670.svg), url(/assets/patterns/shape-background-10-8dc6c16764b209a97f6331bcb77ae61099015f8080637db6ac1a372e5ee01295.svg);
  background-size: 1440px, 942px, 942px;
  background-position: top right, top 560px left, top 1100px right;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.l-plan-information .l-grid-2-fr {
  align-items: center;
}
@media (max-width: 768px) {
  .l-plan-information .l-grid-2-fr {
    margin-top: 40px;
  }
}
@media (max-width: 768px) {
  .l-plan-information .l-grid-2-fr > div {
    order: 1;
  }
}

@media (max-width: 768px) {
  .l-plan-information-artwork {
    order: 0 !important;
  }
}
.l-plan-information-artwork img {
  width: 100%;
}
@media (max-width: 768px) {
  .l-plan-information-artwork img {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ==========================================================================
4. Subscription Sales Page Step 2
========================================================================== */
.l-subscription-plans-billing-background {
  background-image: url(/assets/artwork/illustration-subscription-billing-421db4d793935238136a55c4d7b2a0c9fbfb8a2a9c023659d458d2d69b181c47.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-5f2501d8a5c685432e6fec6ce3a06c14f9f69b159e45b93978d5c9bbc6ba6805.svg);
  background-size: 1500px, 100%, 1440px;
  background-position: top -48px center, top -72px right, top -60px right -60px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.l-subscription-plans-billing-background .c-global-header__logo {
  height: 72px;
  overflow: hidden;
}
.l-subscription-plans-billing-background .c-global-header__logo .o-header-logo {
  top: 10px;
  left: 15px;
}

.l-subscription-plans-billing .c-plan {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  height: 380px;
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  margin-top: 0;
  padding-top: 48px;
  padding-bottom: 30px;
}
@media (max-width: 768px) {
  .l-subscription-plans-billing .c-plan {
    display: grid;
    grid-template-columns: 112px 1fr;
    grid-column-gap: 16px;
    margin-top: 16px;
    height: auto;
    padding: 24px;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans-billing .c-plan {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans-billing .c-plan:first-child {
    order: 2;
  }
}
.l-subscription-plans-billing .c-plan .o-button--primary {
  bottom: 36px;
}
@media (max-width: 768px) {
  .l-subscription-plans-billing .c-plan .o-button--primary {
    position: absolute;
    bottom: auto;
    top: 50%;
    right: 24px;
    margin-top: -23px;
    transform: translate(0);
  }
}
@media (max-width: 600px) {
  .l-subscription-plans-billing .c-plan .o-button--primary {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    margin: 10px 0 0 0;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans-billing .c-plan .l-text-align-center {
    text-align: left;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans-billing .c-plan .l-text-align-center {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans-billing .c-plan h4 {
    margin-top: 0;
  }
}
.l-subscription-plans-billing .c-plan img {
  width: 112px;
}
@media (max-width: 600px) {
  .l-subscription-plans-billing .c-plan img {
    display: none;
  }
}
.l-subscription-plans-billing .c-plan span.l-margin-16 {
  margin-top: 3px;
}
.l-subscription-plans-billing .c-plan .o-badge--save {
  position: absolute;
  top: -13px;
  left: 50%;
  background: #158443;
  color: #ffffff;
  transform: translateX(-50%);
}
.l-subscription-plans-billing .c-plan .o-badge--pro {
  background: #9668B0;
  border-color: #9668B0 !important;
}

/* ==========================================================================
6a. Comparison Table
========================================================================== */
@media (max-width: 768px) {
  .l-subscription-sales-table {
    display: none;
  }
}
@media (max-width: 992px) {
  .l-subscription-sales-table .o-button--green {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
  }
}
@media (max-width: 992px) {
  .l-subscription-sales-table .o-button--green i {
    display: none;
  }
}
.l-subscription-sales-table .c-plan {
  width: auto;
  height: 480px;
}
@media (max-width: 1200px) {
  .l-subscription-sales-table .c-plan {
    background: #ffffff;
    border-radius: 0.5625rem !important;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    text-align: center;
    border-bottom: none;
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .l-subscription-sales-table .c-plan {
    height: auto;
    padding-bottom: 36px;
  }
}
@media (max-width: 1200px) {
  .l-subscription-sales-table .c-plan h3 {
    color: #333333;
  }
}
.l-subscription-sales-table .c-plan .c-plan__period {
  display: block;
  position: relative;
  bottom: 0;
  color: #ffffff;
  text-decoration: underline;
  transform: none;
}
@media (max-width: 992px) {
  .l-subscription-sales-table .c-plan .c-plan__time span {
    color: #333333;
  }
}
.l-subscription-sales-table .c-plan .o-badge--payment-issue {
  display: none;
  position: absolute;
  z-index: 0;
  top: -13px;
  color: #CF3B2B;
  transform: translateX(-50%);
  box-shadow: none;
  border-radius: 0.75rem; /* 12/16 */
  border: 6px solid #CF3B2B;
}
@media (max-width: 1200px) {
  .l-subscription-sales-table .c-plan .o-button {
    top: auto;
    right: auto;
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .l-subscription-sales-table .c-plan > div .o-button, .l-subscription-sales-table .c-plan > .o-button {
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    transform: translateX(0);
    margin-top: 20px;
  }
}
.l-subscription-sales-table .c-plan .o-button--white-red {
  background: #ffffff !important;
  color: #CF3B2B !important;
}
.l-subscription-sales-table .c-plan .o-button--white-red svg {
  fill: #ffffff;
}
.l-subscription-sales-table .c-plan__blurb {
  font-size: 0.875rem; /* 14/16 */
  font-family: -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.5;
  max-width: 150px;
  display: block;
  margin: 10px auto;
  color: #6E7687;
}
.l-subscription-sales-table .c-plan__subtitle {
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
  max-width: 240px;
  margin: 18px auto 0;
}
@media (max-width: 1200px) {
  .l-subscription-sales-table .c-plan__subtitle {
    font-size: 0.875rem; /* 14/16 */
  }
}
.l-subscription-sales-table .c-plan__subtitle--large {
  max-width: none;
  font-size: 0.875rem;
}
@media (max-width: 1200px) {
  .l-subscription-sales-table .c-plan__subtitle--large {
    padding: 0 20px;
  }
}
.l-subscription-sales-table .c-plan__time {
  margin-top: 15px;
}
.l-subscription-sales-table .c-plan__time .c-plan__time-month {
  font-size: 0.9375rem; /* 15/16 */
}
.l-subscription-sales-table .c-plan--owned {
  background: #158443;
}
.l-subscription-sales-table .c-plan--owned h3, .l-subscription-sales-table .c-plan--owned .c-plan__subtitle, .l-subscription-sales-table .c-plan--owned .c-plan__time-month {
  color: #ffffff;
}
@media (max-width: 992px) {
  .l-subscription-sales-table .c-plan--owned .c-plan__time span {
    color: #ffffff !important;
  }
}
@media (max-width: 992px) {
  .l-subscription-sales-table .c-plan--owned .c-plan__period {
    top: 0;
  }
  .l-subscription-sales-table .c-plan--owned .c-plan__period:hover {
    background: none;
  }
}
@media (max-width: 992px) {
  .l-subscription-sales-table .c-plan--owned .o-button--text {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.l-subscription-sales-table .c-plan--owned .c-modal--billing-cycle .c-plan__subtitle {
  color: #6E7687;
}
.l-subscription-sales-table .c-modal--billing-cycle {
  display: block;
  flex-wrap: wrap;
  position: fixed;
  padding-top: 120px;
  scrollbar-width: none;
}
@media (max-width: 768px) {
  .l-subscription-sales-table .c-modal--billing-cycle {
    padding-top: 60px;
  }
}
@media (max-width: 600px) {
  .l-subscription-sales-table .c-modal--billing-cycle > div {
    display: block !important;
  }
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan {
  padding-bottom: 110px;
  opacity: 1 !important;
}
@media (max-width: 600px) {
  .l-subscription-sales-table .c-modal--billing-cycle .c-plan {
    width: 100% !important;
    margin-right: 0;
  }
}
.l-subscription-sales-table .c-modal--billing-cycle .c-modal__close svg {
  transform: rotate(45deg) !important;
}
.l-subscription-sales-table .c-modal--billing-cycle h2, .l-subscription-sales-table .c-modal--billing-cycle > div {
  width: 100%;
}
.l-subscription-sales-table .c-modal--billing-cycle > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-subscription-sales-table .c-modal--billing-cycle h2 {
  font-size: 2.625rem; /* 42/16 */
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.l-subscription-sales-table .c-modal--billing-cycle .o-button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan__subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-weight: 500;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan__time-month {
  font-weight: 500;
}
.l-subscription-sales-table .c-modal--billing-cycle .o-badge {
  padding: 2px 9px;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan--yearly {
  width: 300px;
  height: 420px;
  margin-right: 20px;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan--yearly .o-badge {
  left: 50%;
  background: #158443;
  color: #ffffff;
  display: flex;
  border-color: #ffffff;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan--monthly {
  width: 240px;
  height: 300px;
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan--monthly h3 {
  font-size: 1.125rem; /* 18/16 */
}
.l-subscription-sales-table .c-modal--billing-cycle .c-plan--monthly .c-plan__price {
  margin-top: 24px;
}
@media (max-width: 992px) {
  .l-subscription-sales-table .c-modal--billing-cycle .c-plan--monthly .o-button {
    background: none;
  }
}

/* ==========================================================================
6b. Table layout hack for split test
========================================================================== */
.l-plans--table .l-subscription-plans {
  padding-top: 0;
  padding-bottom: 30px;
}
.l-plans--table .l-subscription-plans .l-block > h1, .l-plans--table .l-subscription-plans .l-block > p {
  display: none !important;
}

/**
* Teaspoon Subscription Sales (Teaspoon Version)
*
* Custom classes for customer facing subscription pages
*
* 1. Background
*
* 2. Hero
*
* 3. Highlights
*
* 4. Sales Table
*
*

/* ==========================================================================
1. Background
========================================================================== */
.l-team-subscription--teaspoon {
  background-image: url(/assets/patterns/shape-background-19-7a675ebcd3a5b8da24b0aa92b1df330b88f127fec1a66c3dd616e82d51e049a7.svg), url(/assets/patterns/shape-background-19-7a675ebcd3a5b8da24b0aa92b1df330b88f127fec1a66c3dd616e82d51e049a7.svg);
  background-size: 988px, 988px;
  background-position: top 75px left -400px, bottom 200px left -400px;
  background-repeat: no-repeat;
}

/* ==========================================================================
2. Hero
========================================================================== */
.l-team-subscription-hero--teaspoon .l-grid-2-fr {
  grid-column-gap: 56px;
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon .l-grid-2-fr {
    grid-template-columns: 1fr;
  }
}
.l-team-subscription-hero--teaspoon .l-team-subscription-hero__copy {
  padding: 60px 0;
  max-width: 558px;
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon .l-team-subscription-hero__copy {
    margin: 0 auto;
  }
}
.l-team-subscription-hero--teaspoon h1 {
  font-size: 2.625rem; /* 42/16 */
  padding: 0;
  margin: 0;
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon h1 {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-team-subscription-hero--teaspoon h1 {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media (max-width: 600px) {
  .l-team-subscription-hero--teaspoon h1 {
    line-height: 1.125 !important;
  }
}
.l-team-subscription-hero--teaspoon h1 span {
  display: block;
  font-size: 1.6875rem; /* 27/16 */
  margin-top: 9px;
}
@media (max-width: 768px) {
  .l-team-subscription-hero--teaspoon h1 span {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon .l-team-subscription-hero__individual-price {
    text-align: center;
  }
}
.l-team-subscription-hero--teaspoon .l-team-subscription-hero__individual-price .l-font-17, .l-team-subscription-hero--teaspoon .l-team-subscription-hero__individual-price .l-font-13 {
  font-size: 1rem !important;
}
.l-team-subscription-hero--teaspoon p {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  margin-top: 12px;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon p {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-team-subscription-hero--teaspoon p {
    font-size: 0.9375em !important; /* 15/16 */
  }
}
.l-team-subscription-hero--teaspoon .l-team-subscription-hero__image {
  position: relative;
}
.l-team-subscription-hero--teaspoon .l-team-subscription-hero__image img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 992px) {
  .l-team-subscription-hero--teaspoon .l-team-subscription-hero__image {
    display: none;
  }
}

@media (max-width: 992px) {
  .l-team-subscription-plans {
    display: flex !important;
    flex-wrap: wrap;
  }
  .l-team-subscription-plans .c-plan--emphasis {
    width: 100% !important;
    order: 1;
    border-bottom: 2px solid #3B4048;
  }
  .l-team-subscription-plans .c-plan--no-price {
    width: 100%;
    order: 2;
  }
}
.l-team-subscription-plans .c-plan {
  width: auto;
  height: auto;
  margin-top: 0;
}

/* ==========================================================================
3. Highlights
========================================================================== */
.l-team-subscription-highlight-wrapper {
  background-image: url(/assets/patterns/shape-background-13-ea4f3a2058bfcbb20482610b8d6dfcb9b527ce111f14401d704043321c00239e.svg), url(/assets/patterns/shape-background-14-774db5071917b6f0a2c80f47b68d1dfa3e77a5bf2367bac87b82e66082bddd03.svg), url(/assets/patterns/shape-background-15-808befa7a54c8f05f8fe013deeb06e172d44c526a1f79ce15a045e3dc0454529.svg), url(/assets/patterns/shape-background-16-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-17-774db5071917b6f0a2c80f47b68d1dfa3e77a5bf2367bac87b82e66082bddd03.svg), url(/assets/patterns/shape-background-18-d2d35153d88d4f61763e6aa5be309cacd3015cd28f271f055b971bb3a669ecb5.svg);
  background-size: 1440px, 1440px, 1440px, 1440px, 1440px, 550px;
  background-position: top 200px left -40px, top 300px left, top 1440px right -40px, top 1540px right, top 2540px left, top 2540px left -200px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.l-team-subscription-highlight--teaspoon {
  text-align: center;
}
.l-team-subscription-highlight--teaspoon h2 {
  font-size: 2.625rem; /* 42/16 */
  line-height: 1.125;
}
.l-team-subscription-highlight--teaspoon p {
  padding-top: 18px;
  margin-bottom: 0;
}
.l-team-subscription-highlight--teaspoon img {
  width: 100%;
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  border-radius: 1.3125rem; /* 21/16 */
}
.l-team-subscription-highlight--teaspoon .l-team-screenshot-mobile {
  position: absolute;
  width: 192px;
  bottom: -20px;
  right: -86px;
}
@media (max-width: 992px) {
  .l-team-subscription-highlight--teaspoon .l-team-screenshot-mobile {
    display: none;
  }
}

/* ==========================================================================
4. Sales Table
========================================================================== */
.l-subscription-sales-table--teaspoon .c-floating-card {
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
}

/**
 *
 * SVG
 *
 *
 *
 * 1. Custom Sizes
 *
 * 2. Colors
 *
 *
 **/
/* ==========================================================================
1. Custom sizes
========================================================================== */
.l-button__svg-arrow-nav {
  transition: 0.25s all;
  width: 12px;
  height: 12px;
  margin-left: 3px;
}

.l-button__svg-arrow-to-nav {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  opacity: 0.5;
  transform: rotate(270deg);
}

.l-svg-breadcrumb {
  width: 10px;
  transform: rotate(90deg);
  height: 10px;
}

.l-svg-back {
  width: 10px;
  transform: rotate(270deg);
  height: 10px;
}

.l-svg-videos-nav {
  fill: #DBDDE0;
  width: 20px;
  height: 20px;
}

.l-svg-search-nav {
  fill: #DBDDE0;
  width: 16px;
  height: 16px;
}

.l-svg-articles-nav {
  fill: #DBDDE0;
  width: 18px;
  height: 18px;
}

.l-svg-instagram-footer {
  width: 23px;
  height: 23px;
}

.l-svg-twitter-footer {
  width: 23px;
  height: 20px;
}

.l-svg-facebook-footer {
  width: 23px;
  height: 23px;
}

.l-svg-calendar {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  fill: none;
}

.l-svg-signal-down {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  fill: #DBDDE0;
}

.l-svg-chevron-down {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  fill: #DBDDE0;
}

.l-svg-chevron-up {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  fill: #DBDDE0;
  transform: rotate(180deg);
}

/* ==========================================================================
2. Colors
========================================================================== */
.l-svg-color-white {
  fill: #ffffff !important;
}

.l-svg-color-black {
  fill: #333333;
}

.l-svg-grey-raven {
  fill: #6E7687;
}

.l-svg-grey-regent--force {
  fill: #959DA5 !important;
}

/*
 * Order
 */
/* ========================================================== */
/* = Order Prepper                                          = */
/* ========================================================== */
section#preparing-order div.block {
  background: #ffffff;
}
@media screen and (max-width: 380px) {
  section#preparing-order div.block {
    padding: 0 1.75em 4em;
  }
}
section#preparing-order div.timeout-message {
  display: none;
}
section#preparing-order div.timeout-message.visible {
  display: flex !important;
}
@media screen and (max-width: 960px) {
  section#preparing-order div.timeout-message.visible {
    display: block !important;
  }
}
@media screen and (max-width: 960px) {
  section#preparing-order div.timeout-message {
    padding: 0 0 3em;
  }
}
section#preparing-order div.timeout-message div.col {
  width: 50%;
}
@media screen and (max-width: 960px) {
  section#preparing-order div.timeout-message div.col {
    width: 100%;
    text-align: center;
  }
}
section#preparing-order div.timeout-message div.col img {
  width: 258px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  section#preparing-order div.timeout-message div.col img {
    padding: 0 2em 2em 2em;
  }
}
section#preparing-order div.timeout-message div.col h2 {
  font-size: 2.5em; /* 40/16 */
  font-weight: 600;
}
@media screen and (max-width: 600px) {
  section#preparing-order div.timeout-message div.col h2 {
    font-size: 1.75em;
  }
}
section#preparing-order div.timeout-message div.col div.divider {
  margin: 0 0 1.5em;
}
@media screen and (max-width: 960px) {
  section#preparing-order div.timeout-message div.col div.divider {
    margin: 0 auto 1.5em;
  }
}
section#preparing-order div.timeout-message div.col p {
  font-size: 1.0625em; /* 17/16 */
  opacity: 0.9;
  margin-bottom: 0;
}
section#preparing-order div.timeout-message div.col p a {
  color: #158443;
  font-weight: 600;
}
@media screen and (max-width: 600px) {
  section#preparing-order div.timeout-message div.col p {
    font-size: 0.9375em; /* 15/16 */
  }
}
section#preparing-order div.computer-terminal {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}
section#preparing-order div.computer-terminal img {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
section#preparing-order div.computer-terminal .logomark {
  width: 64px;
  height: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -72px 0 0 -32px;
}
@media screen and (max-width: 685px) {
  section#preparing-order div.computer-terminal .logomark {
    width: 32px;
    height: 32px;
    margin: -36px 0 0 -16px;
  }
}
section#preparing-order div.computer-terminal .loader-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  margin-left: -80px;
  margin-top: -120px;
}
@media screen and (max-width: 685px) {
  section#preparing-order div.computer-terminal .loader-circle {
    width: 80px;
    height: 80px;
    margin-top: -60px;
    margin-left: -40px;
  }
}
section#preparing-order div.computer-terminal .loader-line-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 160px;
  margin-left: -80px;
  margin-top: -120px;
  overflow: hidden;
  transform-origin: 80px 80px;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
@media screen and (max-width: 685px) {
  section#preparing-order div.computer-terminal .loader-line-mask {
    width: 40px;
    height: 80px;
    margin-left: -40px;
    margin-top: -60px;
    transform-origin: 40px 40px;
  }
}
section#preparing-order div.computer-terminal .loader-line-mask .loader-line {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 685px) {
  section#preparing-order div.computer-terminal .loader-line-mask .loader-line {
    width: 80px;
    height: 80px;
  }
}
section#preparing-order .main-cta {
  text-align: center;
}
section#preparing-order .main-cta a#click-to-complete {
  margin-right: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
}
@media screen and (max-width: 380px) {
  section#preparing-order .main-cta a#click-to-complete span.text {
    display: none;
  }
}

/* ========================================================== */
/* = Order Picker                                           = */
/* ========================================================== */
section#order-list div.books {
  justify-content: center;
}
section#order-list div.block {
  background: #ffffff;
  padding: 0 4em;
}
@media screen and (max-width: 685px) {
  section#order-list div.block {
    padding: 0 1.75em;
  }
}
section#order-list div.block h1 {
  font-size: 2.5em; /* 40/16 */
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5em;
  padding-top: 1.5em;
  line-height: 1.5;
  word-wrap: break-word;
}
section#order-list div.block p {
  padding: 1em 1.25em;
}
@media screen and (max-width: 685px) {
  section#order-list div.block p {
    font-size: 0.9375em; /* 15/16 */
  }
}
section#order-list div.block p > span {
  display: block;
  border-bottom: 1px dotted #DFE7F0;
  padding: 0.75em 0;
}
section#order-list div.block p > span:last-child {
  border-bottom: 0;
}
section#order-list div.block p > span span {
  font-weight: 600;
}

/*
 * Transactions
 */
/* ========================================================== */
/* = Hero customisations                                    = */
/* ========================================================== */
section.transactions-hero:before {
  background-image: url(/assets/patterns/payment@2x-17198573c267ab12c9f96517482c19eb337c203818d88594371d006ab293c10b.png) !important;
  background-size: 600px !important;
  opacity: 0.1;
}
section.transactions-hero h1 {
  padding-top: 1em !important;
}
@media screen and (max-width: 600px) {
  section.transactions-hero h1 {
    padding-top: 80px !important;
  }
}

/* ========================================================== */
/* = My Transactions                                        = */
/* ========================================================== */
section#my-transactions {
  padding: 6em 0;
}
@media screen and (max-width: 960px) {
  section#my-transactions {
    padding: 3em 0;
  }
}
section#my-transactions div#transaction-table {
  padding-left: 20px;
}
@media screen and (max-width: 960px) {
  section#my-transactions div#transaction-table {
    padding-left: 0;
  }
}
@media screen and (max-width: 685px) {
  section#my-transactions div#transaction-table {
    overflow-x: scroll;
  }
}
section#my-transactions div#transaction-table .table-contents {
  background: #ffffff;
  padding: 0 2em;
}
@media screen and (max-width: 960px) {
  section#my-transactions div#transaction-table .table-contents {
    padding: 0 1em;
  }
}
@media screen and (max-width: 685px) {
  section#my-transactions div#transaction-table .table-contents {
    padding: 0;
    width: 200%;
  }
}
section#my-transactions div#transaction-table .table-header, section#my-transactions div#transaction-table .table-row {
  display: flex;
  align-items: center;
  min-height: 76px;
}
section#my-transactions div#transaction-table .table-header .date-col, section#my-transactions div#transaction-table .table-row .date-col {
  width: 15.33%;
}
section#my-transactions div#transaction-table .table-header .product-col, section#my-transactions div#transaction-table .table-row .product-col {
  width: 34.66%;
}
section#my-transactions div#transaction-table .col {
  display: flex;
  justify-content: flex-start;
  width: 16.66%;
}
section#my-transactions div#transaction-table .table-header {
  border-top: 1px solid #DFE7F0;
  border-bottom: 1px solid #DFE7F0;
}
section#my-transactions div#transaction-table .table-header .col span {
  font-size: 1em; /* 13/16 */
  font-weight: 600;
}
section#my-transactions div#transaction-table .table-row {
  border-bottom: 1px solid #DFE7F0;
  padding: 1.5em 0;
}
section#my-transactions div#transaction-table .table-row.hide {
  display: none;
}
section#my-transactions div#transaction-table .table-row .col {
  padding-right: 20px;
}
section#my-transactions div#transaction-table .table-row .col a {
  font-weight: 600;
  color: #157CB8;
}
@media screen and (max-width: 568px) {
  section#my-transactions div#transaction-table .table-row .col a {
    padding: 0;
  }
}
section#my-transactions div#transaction-table .table-row .download-col a {
  font-size: 0.75em; /* 12/16 */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #157CB8;
  text-decoration: none;
  border: 1px solid rgba(115, 133, 159, 0.25);
  border-radius: 2px;
  padding: 0.875em 1.5em;
}
section#my-transactions div#transaction-table .table-row .download-col a:hover {
  background: rgba(115, 133, 159, 0.1);
}
section#my-transactions div#pagination {
  margin: 3em 0 0 0;
}
section#my-transactions div#pagination ul {
  padding: 0;
  margin: 0;
  text-align: center;
}
section#my-transactions div#pagination ul li {
  display: inline-block;
  list-style: none;
  font-size: 1.125em; /* 20/16 */
  padding: 0 0.275em; /* 6/16 */
}
section#my-transactions div#pagination ul li.current {
  color: #73859F;
  opacity: 0.5;
}
section#my-transactions div#pagination ul li a {
  color: #157CB8;
}
section#my-transactions div#pagination ul li a:hover {
  opacity: 0.5;
}
section#my-transactions div#pagination ul li svg {
  width: 18px;
  height: 18px;
  vertical-align: sub;
}
section#my-transactions div#pagination ul li svg use {
  fill: #157CB8;
}

/* ========================================================== */
/* = Modify table to use CSS Grid                           = */
/* ========================================================== */
.l-data-table--affiliates .table-row, .l-data-table--affiliates .table-header {
  display: grid !important;
  grid-template-columns: 28% 28% 18% 20%;
  grid-column-gap: 2%;
}
.l-data-table--affiliates .table-row .col, .l-data-table--affiliates .table-header .col {
  width: 100% !important;
  padding-right: 0 !important;
  word-break: break-all;
}
.l-data-table--affiliates .table-row .download-col, .l-data-table--affiliates .table-header .download-col {
  justify-content: flex-end !important;
}

/* ==========================================================================
1. Modules & Videos
========================================================================== */
.l-collection-modules .l-collection-modules__module {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-column-gap: 120px;
}
@media (max-width: 1080px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr 360px;
  }
}
@media (max-width: 992px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr;
  }
}
.l-collection-modules .l-collection-modules__module-episodes h2 {
  margin-top: 50px;
}
@media (max-width: 768px) {
  .l-collection-modules .l-collection-modules__module-episodes h2 {
    font-size: 1.5rem;
  }
}
.l-collection-modules .l-collection-modules__module-episodes h2:first-child {
  margin-top: 0;
}
@media (max-width: 992px) {
  .l-collection-modules .l-collection-modules__pitch-cards {
    margin-top: 60px;
  }
}
.l-collection-modules .l-collection-modules__pitch-cards h2 {
  font-size: 1.5rem; /* 24/16 */
}
.l-collection-modules .l-collection-modules__pitch-cards a {
  color: #158443;
}
.l-collection-modules .l-collection-modules__pitch-cards p, .l-collection-modules .l-collection-modules__pitch-cards ul, .l-collection-modules .l-collection-modules__pitch-cards ol {
  font-size: 0.9375rem; /* 15/16 */
}
.l-collection-modules .l-collection-modules__pitch-cards p {
  margin-top: 18px;
}
.l-collection-modules .l-collection-modules__pitch-cards ul {
  display: grid;
  grid-template-columns: 1fr;
}
.l-collection-modules .l-collection-modules__pitch-cards ul li {
  padding-left: 33px;
  font-family: "Bitter", serif;
  font-weight: 700;
  margin-top: 15px;
  position: relative;
}
.l-collection-modules .l-collection-modules__pitch-cards ul li:first-child {
  margin-top: 15px;
}
.l-collection-modules .l-collection-modules__pitch-cards ul li:before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  background-image: url(/svg-icons/checkmark--clear-green.png);
  background-size: cover;
}
.l-collection-modules .l-collection-modules__pitch-cards .l-collection-modules__trailer {
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 0.5625rem;
  position: relative;
  overflow: hidden;
}
.l-collection-modules .l-collection-modules__pitch-cards .l-collection-modules__trailer iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

/* ==========================================================================
2. "Episodes"
========================================================================== */
.c-tutorial-episode {
  position: relative;
  padding-left: 64px;
  margin-top: 20px;
}
.c-tutorial-episode:first-child {
  margin-top: 0;
}
.c-tutorial-episode:last-child:before {
  display: none;
}
.c-tutorial-episode:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  width: 6px;
  height: calc(100% - 32px);
  background: #DFE7F0;
  border-radius: 100px;
  transition: 0.75s all;
}
.c-tutorial-episode > div:last-child {
  height: 0;
}
.c-tutorial-episode a {
  color: #333333;
  text-decoration: none;
}
.c-tutorial-episode a:hover {
  color: #158443;
}
.c-tutorial-episode h4 {
  font-size: 1.3125rem; /* 21/16 */
}
.c-tutorial-episode p {
  font-size: 1rem;
  margin-top: 10px;
  color: #333333;
}
@media (max-width: 768px) {
  .c-tutorial-episode p {
    font-size: 0.9375rem;
  }
}
.c-tutorial-episode .c-tutorial-episode__length {
  font-family: "Bitter", serif;
  font-size: 1.125em; /* 18/16 */
  margin-left: 8px;
  position: relative;
  top: 3px;
}
.c-tutorial-episode .o-badge {
  margin-left: 12px;
  position: relative;
  top: 1px;
}
.c-tutorial-episode .o-badge-tutorial {
  position: absolute;
  top: -9px;
  left: 0;
  width: 46px;
  height: 46px;
  font-size: 1.1875rem; /* 19/16 */
}
.c-tutorial-episode .o-badge-tutorial svg {
  display: none;
}
.c-tutorial-episode .o-badge-syllabus {
  border-radius: 50% !important;
  font-size: 2.375rem !important; /* 38px */
}
.c-tutorial-episode .o-button--mark-as-complete {
  position: absolute;
  left: 0;
  top: -9px;
  width: 46px;
  height: 46px;
  cursor: pointer;
  z-index: 99;
}
.c-tutorial-episode .o-button--mark-as-complete:focus {
  outline: none;
}
.c-tutorial-episode .o-button--syllabus {
  cursor: default;
}

.c-tutorial-episode__number-badge .o-badge-tutorial--checkmark, .c-tutorial-episode__number-badge .o-badge-tutorial--locked {
  display: none;
}

.c-tutorial-episode--completed:before {
  background: #158443 !important;
}
.c-tutorial-episode--completed .c-tutorial-episode__number-badge {
  background: #158443;
}
.c-tutorial-episode--completed .c-tutorial-episode__number-badge .o-badge-tutorial {
  display: none;
}
.c-tutorial-episode--completed .c-tutorial-episode__number-badge .o-badge-tutorial--checkmark {
  display: flex;
}
.c-tutorial-episode--completed .c-tutorial-episode__number-badge svg {
  display: block;
}
.c-tutorial-episode--completed [data-tooltip]:before {
  left: 70px !important;
  content: attr(data-unmark-complete) !important;
}

.c-tutorial-episode--locked .o-badge-tutorial {
  display: none;
}
.c-tutorial-episode--locked .o-badge-tutorial--locked {
  display: flex;
}

/**
*
* Bootcamps
*
*
* 1. Backgrounds
*
* 2. Preparation Column (Syllabus)
*
* 3. Certificate
*
* 4. Grid (Syllabus)
*
*
**/
/* ==========================================================================
1. Backgrounds
========================================================================== */
.l-bootcamp-hero-pattern {
  background-image: url(/assets/patterns/digital-pattern-hero-63e9b9cbe5d7bd1cc0fae1e85b8250171e6cb4775cb769f1fbfbd0a04570ec56.svg);
  background-repeat: no-repeat;
  background-position: top -24px left -80px;
  background-size: 268px;
}

.l-bootcamp-syllabus-pattern {
  background-image: url(/assets/patterns/digital-pattern-syllabus-6768d25022a06d2b9d8a094848f23a0d0aab16a8632e3ef0ff4fc8f9b9f3af61.svg);
  background-repeat: no-repeat;
  background-position: top -20px left 100px;
  background-size: 110px;
}

.l-bootcamp-tutors-pattern {
  background-image: url(/assets/patterns/digital-pattern-tutors-59b3fe4566ae3a99784cbd2b42698e1a4add3c87245dae217cd49873ec350010.svg);
  background-repeat: no-repeat;
  background-position: top -4px center;
  background-size: 797px;
}

.l-bootcamp-all-tutors-pattern {
  background-image: url(/assets/patterns/digital-pattern-green-980c1eb9552c224540bd1b1af9b40335aa8c5a8958ffd84b5d9dc35b082a8993.svg);
  background-repeat: no-repeat;
  background-position: top 65px center;
  background-size: 1440px;
}

.l-bootcamp-pricing-pattern {
  background-image: url(/assets/patterns/digital-pattern-pricing-6611c619964c329ae59bed988f1d69898c076b3f1a53e10143f9cefd85f5d9ac.svg);
  background-repeat: no-repeat;
  background-position: top -4px center;
  background-size: 1188px;
}

.l-bootcamp-card-pattern {
  background-image: url(/assets/patterns/digital-pattern-bootcamp-card-2059cae9a1c872935e08fd9b40d59438ddfe3d534b9a286288c02761895d715b.svg);
  background-repeat: no-repeat;
  background-size: 325px;
}

.l-bootcamp-background {
  position: relative;
  z-index: 0;
}
.l-bootcamp-background:before {
  content: "";
  width: 1148px;
  height: 765px;
  position: absolute;
  right: 0;
  background-image: url(/assets/photos/bootcamp-ios-man@2x-8d92e6cf5ac30184cc92a95c050db511a726164521d178b902120228a8ca4a1a.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  border-radius: 0 0 0 24px;
}
@media (min-width: 1600px) {
  .l-bootcamp-background:before {
    right: auto;
    left: 50%;
    margin-left: -574px;
    border-radius: 0 0 24px 24px;
  }
}
@media (max-width: 768px) {
  .l-bootcamp-background:before {
    width: 574px;
    height: 382.5px;
    margin-left: -287px;
  }
}

.l-bootcamp-background--android {
  position: relative;
  z-index: 0;
}
.l-bootcamp-background--android:before {
  content: "";
  width: 1148px;
  height: 765px;
  position: absolute;
  right: 0;
  background-image: url(/assets/photos/bootcamp-android-intense-lady@1.5x-1d1b4554194e3d2a9c6996c3869f9d70d064faf139ae33ddceb4db50bd382e45.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  border-radius: 0 0 0 24px;
}
@media (min-width: 1600px) {
  .l-bootcamp-background--android:before {
    right: auto;
    left: 50%;
    margin-left: -574px;
    border-radius: 0 0 24px 24px;
  }
}
@media (max-width: 768px) {
  .l-bootcamp-background--android:before {
    width: 574px;
    height: 382.5px;
    margin-left: -287px;
    margin-top: 30px;
  }
}
@media (max-width: 600px) {
  .l-bootcamp-background--android:before {
    margin-top: 30px;
  }
}

.l-bootcamp-background--flutter {
  position: relative;
  z-index: 0;
}
.l-bootcamp-background--flutter:before {
  content: "";
  width: 1148px;
  height: 765px;
  position: absolute;
  right: 0;
  background-image: url(/assets/photos/bootcamp-flutter-curious-lady@1.5x-fe3fed1bf531be7d7e06eceef51e2a97efdeef08f05ff73a816056540ba3355b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  border-radius: 0 0 0 24px;
}
@media (min-width: 1600px) {
  .l-bootcamp-background--flutter:before {
    right: auto;
    left: 50%;
    margin-left: -574px;
    border-radius: 0 0 24px 24px;
  }
}
@media (max-width: 768px) {
  .l-bootcamp-background--flutter:before {
    width: 574px;
    height: 382.5px;
    margin-left: -287px;
    margin-top: 30px;
  }
}
@media (max-width: 600px) {
  .l-bootcamp-background--flutter:before {
    margin-top: 30px;
  }
}

/* ==========================================================================
2. Preparation Column (Syllabus)
========================================================================== */
.l-bootcamp-prep {
  height: fit-content;
  position: relative;
  z-index: 0;
}
.l-bootcamp-prep:before {
  content: "";
  width: 10000%;
  height: calc(100% - 30px);
  left: -36px;
  top: 30px;
  background-image: url(/assets/patterns/digital-pattern-syllabus-6768d25022a06d2b9d8a094848f23a0d0aab16a8632e3ef0ff4fc8f9b9f3af61.svg);
  background-repeat: no-repeat;
  background-position: top 120px left 400px;
  background-size: 110px;
  position: absolute;
  z-index: -1;
  border-radius: 30px;
}
@media (min-width: 1600px) {
  .l-bootcamp-prep:before {
    width: calc(100% + 72px);
    background-position: top 120px left 365px;
  }
}

/* ==========================================================================
3. Certificate
========================================================================== */
.l-bootcamp-certificate {
  height: fit-content;
  margin-top: 91px;
}

/* ==========================================================================
4. Grid (Syllabus)
========================================================================== */
.l-bootcamp-prep--grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  justify-items: center;
}
.l-bootcamp-prep--grid > p {
  text-align: left;
}

/**
 * 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.
 *
 * 1. Show/Hide states for mobile screens
 *
 */
/* ==========================================================================
1. Show/Hide states for mobile screens
========================================================================== */
@media (max-width: 600px) {
  .u-hide-mobile {
    display: none;
  }
}

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

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

@media (max-width: 992px) {
  .u-hide-tablet {
    display: none;
  }
}

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

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

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

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

.u-show-tablet {
  display: none;
}
@media (max-width: 992px) {
  .u-show-tablet {
    display: block;
  }
}

.u-show-tablet-flex--inline {
  display: none;
}
@media (max-width: 992px) {
  .u-show-tablet-flex--inline {
    display: inline-flex;
  }
}

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

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

.u-show-mobile--inline {
  display: none;
}
@media (max-width: 600px) {
  .u-show-mobile--inline {
    display: inline;
  }
}

.u-show-mobile-flex {
  display: none;
}
@media (max-width: 600px) {
  .u-show-mobile-flex {
    display: flex;
  }
}

.u-show--1040 {
  display: none;
}
@media (max-width: 1040px) {
  .u-show--1040 {
    display: block;
  }
}

/* ==========================================================================
  2. Toggle dropdown menu on hover
  ========================================================================== */
.u-toggle-dropdown:hover .o-dropdown-menu, .u-toggle-dropdown:active .o-dropdown-menu, .u-toggle-dropdown:focus .o-dropdown-menu {
  display: block;
}

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

.u-show {
  display: block !important;
}

.u-hide {
  display: none;
}

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

.c-modal .u-hide-in-modal {
  display: none;
}

.c-modal .u-show-in-modal {
  display: block;
}

.l-on-top-of-the-header {
  z-index: 100000;
}

.l-width-48 {
  width: 48px;
}

.l-box {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: #73859F;
  border-radius: 4px;
}

.turbo-progress-bar {
  z-index: 1000000;
  height: 4px;
  background-color: #158443;
}

/* Tooltip container */
.c-tooltip {
  position: relative;
  display: inline-block;
}
.c-tooltip .tooltiptext {
  visibility: hidden;
  width: 350px;
  background-color: #3b4048 !important;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  border: 5px solid #73859F !important;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}
.c-tooltip .tooltiptext:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #3b4048 transparent transparent;
}
.c-tooltip .tooltiptext:hover {
  visibility: visible !important;
}

.l-countdown-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 40px;
  justify-items: center;
}

.c-countdown {
  width: 60px;
  height: 60px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.c-countdown > span:first-child {
  color: white;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
}
.c-countdown > span:nth-child(2) {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 89px;
  position: absolute;
}

.c-bchighlight {
  margin-top: -65px;
  border-radius: 9px;
}
@media (max-width: 600px) {
  .c-bchighlight {
    height: auto;
    max-width: auto;
    margin-top: -12px;
    padding-top: 0px;
    width: 90%;
    padding-bottom: 30px;
  }
}

.c-bootcamp--shadow {
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
}

.c-bootcamp--tutor-shadow {
  box-shadow: 4px 4px 30px rgba(51, 51, 51, 0.1);
}

.outline-6-white {
  outline: 6px solid rgba(255, 255, 255, 0.3);
}

.l-cancellation-modal--close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  width: 30px;
  height: 30px;
}

.l-cancellation-modal--right-bg {
  background-color: #7fcdee;
  background-image: url(/assets/svg-icons/cancellation-illustration-bg-cf36e6896e7877e992af368de22d755f8b9c6fedcaca6382d32454b7efb0f89f.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 281px;
  height: 100%;
  border-radius: 0px 0.5625rem 0.5625rem 0px;
}
@media (max-width: 600px) {
  .l-cancellation-modal--right-bg {
    border-radius: 0px 0px 0.5625rem 0.5625rem;
  }
}
.l-cancellation-modal--right-bg img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.o-cf-radio--button {
  position: relative;
  left: 35px;
}
.o-cf-radio--button .cf-radio--button__indicator {
  left: -35px;
  border-radius: 100%;
  top: 0px;
}

.cf-radio--button__wrapper {
  color: #6E7687;
}

.cf-radio--button__wrapper:nth-of-type(1) {
  margin-top: 25px;
}

.o-checkbox .cf-radio--button__indicator {
  transition: none;
}

.o-checkbox .checkbox__input:checked ~ .cf-radio--button__indicator {
  background: url(/assets/svg-icons/cf-selected-radiobutton-fd0b10919322959e937127b223defa8b07fa8f4ebf516617280c076707dc8f0a.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.o-checkbox input[type=radio]:checked + span {
  font-weight: 700;
  color: #333333;
}

.cf-radio--button__wrapper + .cf-radio--button__wrapper {
  margin-top: 20px;
}

.l-cf-survey--footer-pattern {
  position: absolute;
  bottom: 0;
  background-image: url(/assets/patterns/cf-footer-pattern-182a03dad59803b7914f396d5b65ddc698d5d5e7c2bee90b41a3eb99a1738e36.svg);
  width: 100%;
  height: 135px;
}

.cf-list--items + .cf-list--items {
  margin-top: 20px;
}

.cf-svg-icon--span {
  width: 24px;
  height: 24px;
  border: 2px solid #158443;
  border-radius: 100%;
  display: block;
  position: relative;
}

.cf-svg-icon--span svg {
  width: 11px;
  height: 11px;
  fill: #158443;
  position: absolute;
  top: 4px;
  left: 4px;
}

.l-upcoming--card-cf {
  padding: 21px;
  background: #ffffff;
  box-shadow: 4px 4px 30px rgba(51, 51, 51, 0.075);
  border-radius: 0.5625rem;
  margin-top: 27px;
}

.l-upcoming--card-cf + .l-upcoming--card-cf {
  margin-top: 20px;
}

.o-cf-textarea {
  border: none;
  border-bottom: 3px solid #F2F6FA;
  border-radius: 0px !important;
  margin-left: 35px;
  padding: 0px;
  padding-bottom: 90px;
  resize: none;
  min-width: 802px;
}
.o-cf-textarea::placeholder {
  font-size: 21px;
  color: #6E7687;
}
.o-cf-textarea:focus {
  background: unset;
  border: unset;
  border-bottom: 3px solid #F2F6FA;
  box-shadow: unset;
  outline: none;
}

/*! 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
 */
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, .invitation-card {
  margin: 0 auto;
  max-width: 594px;
}
@media screen and (max-width: 641px) {
  .container-594, .invitation-card {
    margin: 0 24px;
  }
}

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

.w-594 {
  width: 594px;
}

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

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

.w-693 {
  width: 693px;
}

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

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

.w-792 {
  width: 792px;
}

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

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

.w-891 {
  width: 891px;
}

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

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

.w-990 {
  width: 990px;
}

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

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

.w-1089 {
  width: 1089px;
}

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

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

.w-1188 {
  width: 1188px;
}

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

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

.w-1287 {
  width: 1287px;
}

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

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

.w-1386 {
  width: 1386px;
}

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

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

.w-1485 {
  width: 1485px;
}

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

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

.w-1584 {
  width: 1584px;
}

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

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

.w-1680 {
  width: 1680px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
     8. Minimal Card
    ========================================================================== */
.card-minimal, .invitation-card {
  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, .invitation-card .card-title {
  font-size: 1.25rem;
  margin: 24px 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hidden {
  display: none;
}

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

.flex {
  display: flex;
}

.grid {
  display: grid;
}

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

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

.ellipsis, .billing .card-minimal.card-billing main .title {
  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;
}

/**
* FAQ
*
* 1. FAQ (Show/Hide)
*
*
*/
/* ==========================================================================
1. FAQ (Show/Hide)
========================================================================== */
.faq {
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
}
.faq .faq-qa {
  border-bottom: 1px solid #14161E;
}
.faq .faq-qa:last-child {
  border-bottom: none;
}
.faq div[role=button] {
  position: relative;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.faq div[role=button] .faq-question {
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .faq div[role=button] .faq-question {
    font-size: 1.125rem;
  }
}
.faq div[role=button] .btn-icon {
  top: -6px;
}
.faq div[role=button] .btn-icon svg {
  width: 12px;
  max-height: 20px;
}
.faq .faq-answer {
  padding: 0 24px 24px 24px;
}
.faq .faq-answer a {
  text-decoration: underline;
}
.faq .faq-answer p:first-of-type {
  margin-top: 0;
}
.faq .faq-answer ul:first-of-type {
  margin-top: 0;
}
.faq .faq-answer ol:first-of-type {
  margin-top: 0;
}

/**
* Hubspot Enterprise Contact Form...duplicate Murakami to React classes
*
* 1. Hubspot Form
*
*/
/* ==========================================================================
1. Hubspot Form
========================================================================== */
.hbspt-form-container {
  background-color: #14161E;
  border-radius: 16px;
  padding: 12px 32px 32px 32px;
}

.hbspt-form fieldset {
  max-width: 100% !important;
}
.hbspt-form .form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
}
@media screen and (max-width: 979px) {
  .hbspt-form .form-columns-2 {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .hbspt-form .form-columns-2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 479px) {
  .hbspt-form .form-columns-2 {
    grid-template-columns: 1fr;
  }
}
.hbspt-form .form-columns-2 > div {
  width: 100% !important;
}
.hbspt-form .hs-fieldtype-text, .hbspt-form .hs-fieldtype-textarea, .hbspt-form .hs-fieldtype-number {
  margin-top: 20px;
}
.hbspt-form .hs-fieldtype-text label, .hbspt-form .hs-fieldtype-textarea label, .hbspt-form .hs-fieldtype-number label {
  margin-left: 8px;
  color: #FFFFFF;
}
.hbspt-form .hs-fieldtype-text label .hs-form-required, .hbspt-form .hs-fieldtype-textarea label .hs-form-required, .hbspt-form .hs-fieldtype-number label .hs-form-required {
  color: #CE3F00;
}
.hbspt-form .hs-fieldtype-text .input, .hbspt-form .hs-fieldtype-textarea .input, .hbspt-form .hs-fieldtype-number .input {
  margin-right: 0 !important;
}
.hbspt-form .hs-fieldtype-text input, .hbspt-form .hs-fieldtype-text textarea, .hbspt-form .hs-fieldtype-textarea input, .hbspt-form .hs-fieldtype-textarea textarea, .hbspt-form .hs-fieldtype-number input, .hbspt-form .hs-fieldtype-number textarea {
  width: 100% !important;
  margin-top: 16px;
  border-radius: 12px;
  height: 48px;
  padding: 0 16px;
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid #8C8C8C;
  text-align: left;
}
.hbspt-form .hs-fieldtype-text input.error, .hbspt-form .hs-fieldtype-text textarea.error, .hbspt-form .hs-fieldtype-textarea input.error, .hbspt-form .hs-fieldtype-textarea textarea.error, .hbspt-form .hs-fieldtype-number input.error, .hbspt-form .hs-fieldtype-number textarea.error {
  margin: 16px 0 0 0;
  border-color: #CE3F00;
}
.hbspt-form .hs-fieldtype-text input.invalid, .hbspt-form .hs-fieldtype-text textarea.invalid, .hbspt-form .hs-fieldtype-textarea input.invalid, .hbspt-form .hs-fieldtype-textarea textarea.invalid, .hbspt-form .hs-fieldtype-number input.invalid, .hbspt-form .hs-fieldtype-number textarea.invalid {
  margin: 16px 0 0 0;
  border-color: #CE3F00;
}
.hbspt-form .hs-fieldtype-text input:focus, .hbspt-form .hs-fieldtype-text textarea:focus, .hbspt-form .hs-fieldtype-textarea input:focus, .hbspt-form .hs-fieldtype-textarea textarea:focus, .hbspt-form .hs-fieldtype-number input:focus, .hbspt-form .hs-fieldtype-number textarea:focus {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}
.hbspt-form .hs-fieldtype-text textarea, .hbspt-form .hs-fieldtype-textarea textarea, .hbspt-form .hs-fieldtype-number textarea {
  padding: 16px;
  height: auto;
  min-height: 96px;
}
.hbspt-form .hs-richtext p {
  font-size: 0.875rem;
  color: #D7D7D7;
  margin-top: 24px;
}
.hbspt-form .hs-form-booleancheckbox {
  margin-top: 24px;
}
.hbspt-form .hs-form-booleancheckbox input {
  width: 24px !important;
  height: 24px;
  cursor: pointer;
  border: 1px solid #8C8C8C;
  border-radius: 8px;
  margin-right: 10px;
}
.hbspt-form .hs-form-booleancheckbox input:checked + span::before {
  content: "✔";
  position: absolute;
  left: -12px;
  cursor: pointer;
}
.hbspt-form .hs-form-booleancheckbox span {
  font-size: 0.875rem;
  color: #D7D7D7;
  position: relative;
}
.hbspt-form .hs-submit {
  margin-top: 24px;
}
.hbspt-form .hs-submit input {
  border-radius: 12px;
  background-color: #FFFFFF;
  padding: 16px;
}
.hbspt-form .hs-error-msgs .hs-error-msg {
  font-size: 0.875rem;
  color: #CE3F00;
  margin-left: 0;
}
.hbspt-form .hs_error_rollup {
  margin-top: 24px;
}
.hbspt-form .hs_error_rollup ul li label {
  font-size: 0.875rem;
  color: #CE3F00;
}

/**
* Lists
*
* 1. Feature checklist
* 
*
*/
/* ==========================================================================
1. Feature checklist
========================================================================== */
.feature-checklist li {
  margin-top: 16px;
  padding-left: 40px;
  position: relative;
}
.feature-checklist li:first-child {
  margin-top: 0;
}
.feature-checklist li svg {
  position: absolute;
  top: 4px;
  left: 0;
  width: 24px;
  height: 24px;
  fill: #14161E;
}

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

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

.module-page-header-blue {
  background-image: url(/assets/artwork/kodeco/module-page-header-blue@1x-3721a37d1a5aa01d8013ff8f05a9dd5772c009c1f60df8ea1a38ec6b60f02b42.jpg);
  background-size: 100%;
  background-position-y: -80px;
}

/**
* Kodeco blobby/blocky module (End/start of sections)
*
* 1. Module: End
*
*/
/* ==========================================================================
1. Module: End
========================================================================== */
.module-section-top {
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 767px) {
  .module-section-top {
    padding-bottom: 40px;
  }
}

.module-section-end {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 767px) {
  .module-section-end {
    grid-template-columns: 1fr 120px;
    height: 120px;
  }
}
.module-section-end .module-section-end-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
.module-section-end .module-section-end-right {
  position: relative;
}
.module-section-end .module-section-end-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: 767px) {
  .module-section-end .module-section-end-right:before {
    width: 60px;
  }
}

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

.photo-mosaic-piece-logo {
  border: 1px solid #D7D7D7;
}
.photo-mosaic-piece-logo img {
  width: 100%;
  height: 100%;
}

/**
* Subscription Plans
*
* 1a. Subscription Plan Card (Base)
*
* 1b. Subscription Plan Card (Professional)
*
* 1c. Subscription Plan Card (Enterprise)
*
*/
/* ==========================================================================
1a. Subscription Plan Cards (Sales page)
========================================================================== */
.subscription-plan {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 32px;
  background-color: #D7D7D7;
  min-height: 528px;
  height: 100%;
  position: relative;
}
.subscription-plan.period-plan {
  background-color: #FFFFFF;
  border: 1px solid #14161E;
}
.subscription-plan .subscription-plan-saving {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 56px;
  height: 56px;
  right: 24px;
  top: 24px;
  border-radius: 12px;
  background-color: #E34A4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.subscription-plan .subscription-plan-title {
  font-size: 1.75rem;
}
@media screen and (max-width: 767px) {
  .subscription-plan .subscription-plan-title {
    max-width: 80%;
  }
}
.subscription-plan .subscription-plan-subtitle {
  margin-top: 16px;
}
.subscription-plan .subscription-plan-features {
  margin-top: 40px;
  margin-bottom: 56px;
}
.subscription-plan .subscription-plan-features li {
  margin-top: 16px;
  padding-left: 40px;
  position: relative;
}
.subscription-plan .subscription-plan-features li:first-child {
  margin-top: 0;
}
.subscription-plan .subscription-plan-features li svg {
  position: absolute;
  top: 0px;
  left: 0;
  width: 24px;
  height: 24px;
  fill: #14161E;
}
.subscription-plan .subscription-plan-price {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
@media screen and (max-width: 767px) {
  .subscription-plan .subscription-plan-price {
    flex-direction: column;
    row-gap: 32px;
    align-items: inherit;
  }
}
.subscription-plan .subscription-plan-price .subscription-plan-sale {
  display: block;
  text-decoration: line-through;
  font-size: 1rem;
}
.subscription-plan .subscription-plan-price .subscription-plan-price-currency {
  font-size: 1.75rem;
  font-weight: normal;
}
.subscription-plan .subscription-plan-price .subscription-plan-price-value {
  font-size: 1.75rem;
  font-weight: normal;
}
.subscription-plan .subscription-plan-price .subscription-plan-price-period {
  display: block;
  font-size: 1rem;
  line-height: 1;
  color: #14161E;
}
.subscription-plan .subscription-plan-price .btn-larget {
  white-space: nowrap;
}

/* ==========================================================================
1b. Subscription Plan Cards (Professional)
========================================================================== */
.subscription-plan.professional-plan {
  background-color: #14161E;
}
.subscription-plan.professional-plan .subscription-plan-title {
  color: #FFFFFF;
  max-width: 100%;
}
.subscription-plan.professional-plan .subscription-plan-subtitle,
.subscription-plan.professional-plan .subscription-plan-features li,
.subscription-plan.professional-plan .subscription-plan-sale,
.subscription-plan.professional-plan .subscription-plan-price-currency,
.subscription-plan.professional-plan .subscription-plan-price-value,
.subscription-plan.professional-plan .subscription-plan-price-period {
  color: #FFFFFF;
}
.subscription-plan.professional-plan .subscription-plan-features li svg {
  fill: #FFFFFF;
}

/* ==========================================================================
1c. Subscription Plan Cards (Enterprise)
========================================================================== */
.subscription-plan.enterprise-plan {
  background-color: #CE3F00;
}
.subscription-plan.enterprise-plan .subscription-plan-title,
.subscription-plan.enterprise-plan .subscription-plan-subtitle,
.subscription-plan.enterprise-plan .subscription-plan-features li,
.subscription-plan.enterprise-plan .subscription-plan-sale,
.subscription-plan.enterprise-plan .subscription-plan-price-currency,
.subscription-plan.enterprise-plan .subscription-plan-price-value,
.subscription-plan.enterprise-plan .subscription-plan-price-period {
  color: #FFFFFF;
}
.subscription-plan.enterprise-plan .subscription-plan-features li .badge.badge-new {
  border: unset;
  height: 26px;
  border-radius: 8px;
  letter-spacing: 1px;
}
.subscription-plan.enterprise-plan .subscription-plan-features li .badge.badge-new.pulse:before {
  border-radius: 8px;
}
.subscription-plan.enterprise-plan .subscription-plan-features li svg {
  fill: #FFFFFF;
}

/* ==========================================================================
1d. Subscription Plan Cards (Special Offers)
========================================================================== */
.subscription-plan.special-plan {
  background-color: #CE3F00;
  color: #FFFFFF;
}
.subscription-plan.special-plan .subscription-plan-title,
.subscription-plan.special-plan .subscription-plan-subtitle,
.subscription-plan.special-plan .subscription-plan-features li,
.subscription-plan.special-plan .subscription-plan-sale,
.subscription-plan.special-plan .subscription-plan-price-currency,
.subscription-plan.special-plan .subscription-plan-price-value,
.subscription-plan.special-plan .subscription-plan-price-period {
  color: #FFFFFF;
}
.subscription-plan.special-plan .subscription-plan-features li svg {
  fill: #FFFFFF;
}

/* ==========================================================================
1e. Subscription Plan Cards (Scale)
========================================================================== */
.subscription-plan-scale {
  transform: scale(0.9);
}
@media screen and (max-width: 767px) {
  .subscription-plan-scale {
    transform: none;
  }
}

/**
* Admin Layouts
*
* 1. Forms
*
*/
/* ==========================================================================
1. Forms
========================================================================== */
.cs-admin-form .hs-fieldtype-text {
  margin-top: 24px;
  position: relative;
}
.cs-admin-form .hs-fieldtype-text label {
  font-size: 1rem;
  line-height: 1rem;
  color: #FFFFFF;
}
.cs-admin-form .hs-fieldtype-text label .hs-form-required {
  color: #E34A4C;
}
.cs-admin-form .hs-fieldtype-text input {
  border: 1px solid #FFFFFF;
}
.cs-admin-form .hs-fieldtype-text input.invalid {
  border-color: #E34A4C;
}
.cs-admin-form .hs-fieldtype-textarea {
  margin-top: 24px;
  position: relative;
}
.cs-admin-form .hs-fieldtype-textarea textarea {
  min-height: 192px;
  border: 1px solid #FFFFFF;
  resize: none;
}
.cs-admin-form .hs-fieldtype-textarea textarea.invalid {
  border-color: #E34A4C;
}
.cs-admin-form .hs-submit input {
  background-color: #D7D7D7;
}
.cs-admin-form .hs-error-msgs .hs-error-msg {
  color: #E34A4C;
  position: absolute;
  top: 0;
  right: 0;
}

/**
*
* 1. License Details Header
*
* 2. Modal(s)
*
* 3. DataTable
*
*/
/* ==========================================================================
1. License Details Header
========================================================================== */
.shadow-admin-card .ldh-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 40px 0;
}
@media screen and (max-width: 767px) {
  .shadow-admin-card .ldh-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.shadow-admin-card .ldh-container .ldh-wrapper {
  height: 186px;
  background-color: #14161E;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.shadow-admin-card .ldh-container .ldh-wrapper > span {
  display: block;
}
.shadow-admin-card .ldh-container .ldh-wrapper > span.ldh-wrapper--count {
  position: relative;
  font-size: 3.75rem;
  line-height: 3.75rem;
  margin-bottom: 30px;
}
.shadow-admin-card .ldh-container .ldh-wrapper > span.ldh-wrapper--text {
  font-size: 1rem;
  line-height: 1rem;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.shadow-admin-card {
  /* ==========================================================================
  2. Modal(s)
  ========================================================================== */
}
.shadow-admin-card .modal {
  background-color: rgba(20, 22, 30, 0.9);
  overflow: auto;
}
.shadow-admin-card .modal .modal-wrapper .btn-icon > svg {
  fill: #FFFFFF;
}
.shadow-admin-card .modal .modal-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.shadow-admin-card .modal .ip-text-area {
  min-height: 192px;
  background-color: #07080A;
  border-radius: 0.75rem;
}
.shadow-admin-card .modal .ir-text {
  left: 1rem;
  bottom: 1rem;
}
.shadow-admin-card .modal .multiple-emails {
  border-radius: 0.75rem;
  cursor: pointer;
  line-height: 2.25rem;
  display: inline-flex;
  height: 40px;
  width: auto;
  max-width: 100%;
}
.shadow-admin-card .modal .multiple-emails .email {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.shadow-admin-card .modal .multiple-emails .email::-webkit-scrollbar {
  display: none;
}
.shadow-admin-card .modal .multiple-emails > span > button {
  background: none;
  cursor: pointer;
  padding: 0;
}
.shadow-admin-card .modal .multiple-emails > span > button > svg {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}
.shadow-admin-card .modal .email-errors {
  position: absolute;
  left: 0.9375rem;
  bottom: -0.5rem;
  display: inline-flex;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  background-color: #E34A4C;
  border-radius: 0.375rem;
  padding: 6px;
}

.confirmation-modal.modal-wrapper .btn-icon > svg.icon {
  fill: #FFFFFF;
}

/* ==========================================================================
3. DataTable
========================================================================== */
.elementary-table.people-table {
  background: #07080A;
  border: 1px solid #FFFFFF;
  margin-top: 25px;
}
.elementary-table.people-table tr td {
  height: 40px;
  padding: 16px 8px;
}
.elementary-table.people-table tr td:first-of-type {
  width: 24px;
}
.elementary-table.people-table tr td .btn-iconsm .dropdown {
  width: 100%;
}
.elementary-table.people-table tr td .btn-iconsm .dropdown .dropdown-menu {
  top: calc(100% + 8px);
}
.elementary-table.people-table tr td .btn-iconsm .dropdown svg {
  max-width: 16px;
  max-height: 16px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.elementary-table.people-table thead th {
  padding-left: 8px;
  padding-right: 8px;
}
.elementary-table.people-table thead th:first-of-type {
  padding-left: 24px;
  width: 24px;
}
.elementary-table.people-table thead .control:nth-child(n+1) {
  margin-bottom: 0;
}
.elementary-table.people-table thead .checkbox {
  padding-left: 0;
}
.elementary-table.people-table thead .checkbox input {
  position: absolute;
}
.elementary-table.people-table thead .checkbox .checkbox-tick {
  background-color: #07080A;
  display: flex;
  position: relative;
  right: auto;
}
.elementary-table.people-table tbody .checkbox {
  padding-left: 0;
}
.elementary-table.people-table tbody .checkbox input {
  position: absolute;
}
.elementary-table.people-table tbody .checkbox .checkbox-tick {
  background-color: #07080A;
  display: flex;
  position: relative;
  right: auto;
}
.elementary-table.people-table .tabs {
  border-bottom: none;
}
.elementary-table.people-table .tabs .tab {
  font-weight: normal;
}
.elementary-table.people-table .tabs .tab::before {
  content: "";
  background-color: #14161E;
  width: 100%;
}
.elementary-table.people-table .tabs .tab a {
  padding: 0 16px;
  border-radius: 12px;
  line-height: 1;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
.elementary-table.people-table .tabs .tab.active {
  font-weight: 700;
  border-bottom-color: #FFFFFF;
}
.elementary-table.people-table .search-svg {
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 1rem;
  margin-top: -0.5rem;
  margin-right: 0.5rem;
}
.elementary-table.people-table .search-people.search-normal {
  height: 40px;
  width: 100%;
  background: #07080A;
  border: 1px solid #FFFFFF;
}
.elementary-table.people-table .search-people.search-normal:focus {
  border: 1px solid #FF5A00;
}
.elementary-table.people-table .zebra-rows-table .zebra-row:nth-child(even) {
  background: #14161E;
}
.elementary-table.people-table .invite-text {
  color: #E3A93D;
}
.elementary-table.people-table .btn-icon svg {
  fill: #FFFFFF;
}
.elementary-table.people-table .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.elementary-table.people-table .btn-mark-complete {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.5s;
}
.elementary-table.people-table .btn-mark-complete:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.elementary-table.people-table .btn-mark-complete > span {
  display: flex;
  align-items: center;
}
.elementary-table.people-table .btn-mark-complete > span > span {
  position: relative;
  top: -1px;
}
.elementary-table.people-table .btn-mark-complete i {
  display: inline-flex;
}
.elementary-table.people-table .btn-mark-complete svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.elementary-table.people-table .bg-green-meadow {
  background-color: #00B87E;
  color: #FFFFFF;
  border-color: #00B87E !important;
}
.elementary-table.people-table .bg-green-meadow:focus {
  background-color: #00B87E;
  border-color: #00B87E !important;
}
.elementary-table.people-table .bg-green-meadow:hover {
  background-color: #157857 !important;
  border-color: #157857 !important;
}
.elementary-table.people-table .bg-green-meadow svg {
  fill: #FFFFFF;
}
.elementary-table.people-table .btn-icon-mark-complete i {
  border: none;
}
.elementary-table.people-table .btn-icon-mark-complete svg {
  margin: 0;
  position: static;
  width: 20px;
  height: 20px;
}
.elementary-table.people-table .people-cb-label {
  width: 24px;
  height: 24px;
  margin-top: -13px;
  right: 0;
  left: 0;
  top: 50%;
  cursor: pointer;
  text-indent: -9999px;
}
.elementary-table.people-table .people-cb-label > input span {
  width: 24px;
  height: 24px;
  background: #07080A;
  border: 1px solid #FFFFFF;
  border-radius: 0.5rem;
  transition-duration: 0.3s;
}
.elementary-table.people-table .people-cb-label > input svg {
  width: 10px;
  height: 8.33px;
  left: 50%;
  top: 50%;
  margin-left: -3.5px;
  margin-top: -3.5px;
}

.selection-results {
  position: fixed;
  bottom: 40px;
  width: calc(100% - 48px);
  max-width: 1680px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.selection-results .results-text {
  padding: 15px 24px 15px;
}
.selection-results .button-container {
  display: flex;
  align-items: center;
  column-gap: 8px;
  flex: inherit;
}
.selection-results svg {
  fill: #FFFFFF !important;
}

.selection-results .button-container {
  padding: 0;
}
.selection-results .button-container .remove-svg {
  max-width: 34px;
  max-height: 34px;
  margin-top: 7px;
}

/**
* Enterprise sales pages—common sections and layouts
*
* 1. Intro: Enterprise
*
* 2. Enterprise Features Breakdown
*
*/
/* ==========================================================================
1. Introduction: Enterprise
========================================================================== */
.sales-introduction-enterprise .feature-checklist {
  columns: 2;
  column-gap: 12.5%;
  min-width: 792px;
  max-width: 792px;
}
@media screen and (max-width: 839px) {
  .sales-introduction-enterprise .feature-checklist {
    columns: 1;
    min-width: auto;
  }
}
.sales-introduction-enterprise .btn-larget {
  min-width: 320px;
  background-color: #FF5A00;
}
@media screen and (max-width: 479px) {
  .sales-introduction-enterprise .btn-larget {
    width: 100%;
    min-width: auto;
  }
}
.sales-introduction-enterprise .mw-792 {
  position: relative;
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic {
  width: 382px;
  position: absolute;
  left: calc(100% + 98px);
  bottom: 0;
}
@media screen and (max-width: 1079px) {
  .sales-introduction-enterprise .sales-introduction-enterprise-mosaic {
    display: none;
  }
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece {
  background-image: url(/assets/photos/users-sprite@1.5x-b32eda77ddedda53dfbf08b1d712a614660cd24ecd9077b43d9a975b73160c31.jpg);
  background-repeat: no-repeat;
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-1 {
  background-size: 1120px;
  position: relative;
  left: 8px;
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-2 {
  background-size: 328px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  left: 304px;
}
@media screen and (max-width: 767px) {
  .sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-2 {
    left: auto;
    right: 0;
  }
}
@media screen and (max-width: 429px) {
  .sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-2 {
    top: -40px;
  }
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-3 {
  background-size: 728px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
  margin-top: 56px;
}
@media screen and (max-width: 767px) {
  .sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-3 {
    left: 50%;
    margin-left: -91px;
  }
}
.sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-4 {
  background-size: 728px;
  background-position: top 0px left -546px;
  position: absolute;
  top: 138px;
  right: 0;
  display: none;
}
@media screen and (max-width: 429px) {
  .sales-introduction-enterprise .sales-introduction-enterprise-mosaic .photo-mosaic-piece-4 {
    top: 198px;
  }
}

/* ==========================================================================
2. Enterprise Features Breakdown
========================================================================== */
.enterprise-features-report .enterprise-features-report-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  .enterprise-features-report .enterprise-features-report-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
.enterprise-features-report .enterprise-features-report-grid-outer h2 {
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .enterprise-features-report .enterprise-features-report-grid-outer h2 {
    line-height: 1.25;
  }
}
@media screen and (max-width: 1023px) {
  .enterprise-features-report .enterprise-features-report-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
.enterprise-features-report .enterprise-features-report-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1199px) {
  .enterprise-features-report .enterprise-features-report-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .enterprise-features-report .enterprise-features-report-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-features-report .enterprise-features-report-grid-inner {
    grid-template-columns: 1fr;
  }
}
.enterprise-features-report .enterprise-features-report-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
.enterprise-features-report .enterprise-features-report-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
.enterprise-features-report .enterprise-features-report-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
.enterprise-features-report .enterprise-features-report-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
3. Enterprise Dashboard
========================================================================== */
.dashboard .dashboard-grid-2 {
  display: grid;
  grid-template-columns: 0.3333fr 0.6666fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 899px) {
  .dashboard .dashboard-grid-2 {
    grid-template-columns: 1fr;
  }
}
.dashboard .dashboard-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1279px) {
  .dashboard .dashboard-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 899px) {
  .dashboard .dashboard-grid-3 {
    grid-template-columns: 1fr;
  }
}
.dashboard__daily-activity {
  margin-left: -24px;
  margin-right: -24px;
}
@media screen and (max-width: 1279px) {
  .dashboard__daily-activity-log {
    overflow: auto;
  }
}
.dashboard__daily-activity-log-block {
  position: relative;
  display: grid;
  grid-template-columns: repeat(52, 16px);
  column-gap: 4.8px;
  width: 1124px;
  margin: 0 auto;
  padding-top: 32px;
}
.dashboard__daily-activity-log-block-data-point {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 4.2px;
}
.dashboard__daily-activity-log-block-data-point a {
  border: 1px dotted #FFFFFF;
}
.dashboard__daily-activity-list-item:nth-of-type(odd) {
  background-color: #07080A;
}
.dashboard__daily-activity-list-item img {
  border-radius: 8px;
}

/* ==========================================================================
4. Enterprise Analytics
========================================================================== */
.enterprise-container .analytics .elementary-table-responsive-wrapper,
.enterprise-container .people .elementary-table-responsive-wrapper {
  position: relative;
  z-index: 0;
}
.enterprise-container .analytics .elementary-table-responsive-wrapper > div:first-of-type,
.enterprise-container .people .elementary-table-responsive-wrapper > div:first-of-type {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50px;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  border-radius: 0 16px 16px 0;
  z-index: 1;
  opacity: 0.5;
  display: none;
}
@media screen and (max-width: 1631px) {
  .enterprise-container .analytics .elementary-table-responsive-wrapper > div:first-of-type,
  .enterprise-container .people .elementary-table-responsive-wrapper > div:first-of-type {
    display: block;
  }
}
.enterprise-container .analytics .elementary-table-responsive,
.enterprise-container .people .elementary-table-responsive {
  width: 100%;
  border: 1px solid #FFFFFF;
  border-radius: 16px;
  overflow-x: auto;
  position: relative;
}
@media screen and (max-width: 1631px) {
  .enterprise-container .analytics .elementary-table-responsive,
  .enterprise-container .people .elementary-table-responsive {
    overflow-x: auto;
  }
}
.enterprise-container .analytics .elementary-table-responsive .elementary-table,
.enterprise-container .people .elementary-table-responsive .elementary-table {
  min-width: 1180px;
  border: none;
}
.enterprise-container .analytics .elementary-table,
.enterprise-container .people .elementary-table {
  background: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.enterprise-container .analytics .elementary-table thead th,
.enterprise-container .people .elementary-table thead th {
  background-color: rgba(7, 8, 10, 0.5);
}
.enterprise-container .analytics .elementary-table thead a,
.enterprise-container .people .elementary-table thead a {
  width: 100%;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  position: relative;
  text-decoration: none;
  z-index: 0;
}
.enterprise-container .analytics .elementary-table thead a:before,
.enterprise-container .people .elementary-table thead a:before {
  content: "";
  position: absolute;
  left: -12px;
  width: calc(100% + 24px);
  top: -8px;
  height: calc(100% + 16px);
  background-color: #3B3D43;
  opacity: 0;
  z-index: -1;
  border-radius: 8px;
  transition: opacity 0.5s;
}
.enterprise-container .analytics .elementary-table thead a:hover:before,
.enterprise-container .people .elementary-table thead a:hover:before {
  opacity: 1;
}
.enterprise-container .analytics .elementary-table thead a svg,
.enterprise-container .people .elementary-table thead a svg {
  width: 14px;
  height: 14px;
  fill: #FFFFFF;
}
.enterprise-container .analytics .elementary-table thead .tabs a:before,
.enterprise-container .people .elementary-table thead .tabs a:before {
  display: none !important;
}
.enterprise-container .analytics .elementary-table > :not(.people) tbody td,
.enterprise-container .people .elementary-table > :not(.people) tbody td {
  padding: 16px 40px;
  height: 72px;
}
.enterprise-container .analytics .elementary-table > :not(.people) tbody td:first-of-type, .enterprise-container .analytics .elementary-table > :not(.people) tbody td:last-of-type,
.enterprise-container .people .elementary-table > :not(.people) tbody td:first-of-type,
.enterprise-container .people .elementary-table > :not(.people) tbody td:last-of-type {
  padding-left: 48px;
}
.enterprise-container .analytics .elementary-table tbody tr:nth-child(even),
.enterprise-container .people .elementary-table tbody tr:nth-child(even) {
  background-color: rgba(7, 8, 10, 0.5);
}
.enterprise-container .analytics .elementary-table tbody tr:hover:last-of-type td:first-of-type,
.enterprise-container .people .elementary-table tbody tr:hover:last-of-type td:first-of-type {
  border-radius: 0 0 0 16px;
}
.enterprise-container .analytics .elementary-table tbody tr:hover:last-of-type td:last-of-type,
.enterprise-container .people .elementary-table tbody tr:hover:last-of-type td:last-of-type {
  border-radius: 0 0 16px 0;
}
.enterprise-container .analytics .elementary-table tbody tr:hover td,
.enterprise-container .people .elementary-table tbody tr:hover td {
  background-color: #07080A;
}
.enterprise-container .analytics .elementary-table tbody tr:hover td.empty-state,
.enterprise-container .people .elementary-table tbody tr:hover td.empty-state {
  background-color: #14161E;
  border-radius: 0 0 16px 16px !important;
}
.enterprise-container .analytics .elementary-table .checkbox-tick,
.enterprise-container .people .elementary-table .checkbox-tick {
  background-color: inherit;
  border: 1px solid #FFFFFF;
}
.enterprise-container .analytics .elementary-table :checked ~ .checkbox-tick,
.enterprise-container .people .elementary-table :checked ~ .checkbox-tick {
  background-color: #00B87E;
  border: 1px solid #00B87E;
}
.enterprise-container .analytics .elementary-table .chart__tooltip,
.enterprise-container .people .elementary-table .chart__tooltip {
  left: auto;
  right: 0;
  transform: none;
}

/* ==========================================================================
4 a. Enterprise Analytics - Modal
========================================================================== */
.enterprise-container .modal .modal-wrapper {
  background-color: #14161E;
  color: #FFFFFF;
}
.enterprise-container .modal .modal-wrapper .modal-table {
  border-bottom: 1px solid rgba(215, 215, 215, 0.1);
}
.enterprise-container .modal .modal-wrapper .ip-text-area {
  transition: background-color 0.2s;
}
.enterprise-container .modal .modal-wrapper .ip-text-area:hover {
  background-color: rgba(7, 8, 10, 0.5);
}
/* ==========================================================================
5. Enterprise Pagination
========================================================================== */
.enterprise-container ul.pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.enterprise-container ul.pagination li.page.prev, .enterprise-container ul.pagination li.page.next {
  color: #FFFFFF;
}
.enterprise-container ul.pagination li.page.prev a, .enterprise-container ul.pagination li.page.next a {
  border: none;
}
.enterprise-container ul.pagination li.page .page-link {
  background-color: inherit;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.enterprise-container ul.pagination li.page .page-link:hover {
  background-color: #3B3D43;
}
.enterprise-container ul.pagination li.page .page-link:last-of-type {
  margin-right: 0;
}
.enterprise-container ul.pagination li.page .page-link.active {
  background-color: #FFFFFF;
  color: #0E0F14;
}

/**
* Common page widths and layouts
*
* 1a. Margin auto
*
* 1b. Max widths
* 
* 1c. Padding for screen sizes
*
*/
/* ==========================================================================
1a. Margin auto
========================================================================== */
.m-auto-lr {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
1b. Max widths
========================================================================== */
.mw-1680 {
  max-width: 1680px;
}

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

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

.mw-1172 {
  max-width: 1172px;
}

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

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

/* ==========================================================================
1c. Padding for screen sizes
========================================================================== */
@media screen and (max-width: 1631px) {
  .p-lr-1584 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 1433px) {
  .p-lr-1386 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 1219px) {
  .p-lr-1172 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 1037px) {
  .p-lr-990 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 839px) {
  .p-lr-792 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/**
* Period selector
* 
*
*/
/* ==========================================================================
1. Period selector
========================================================================== */
.subscription-period-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
  min-width: 792px;
}
@media screen and (max-width: 979px) {
  .subscription-period-selector {
    min-width: auto;
  }
}
@media screen and (max-width: 767px) {
  .subscription-period-selector {
    grid-template-columns: 1fr;
    grid-row-gap: 24px;
  }
}
.subscription-period-selector .subscription-plan {
  min-height: 228px;
}
.subscription-period-selector .subscription-plan .subscription-plan-title + div {
  display: flex;
  flex-direction: column;
}

/**
*
* Product Layouts
*
* For use on product pages
*
* 1. Recommendations (Owned)
*
* 2a. Subscription Plans
*
* 2b. Team Subscription Plans
*
* 3. Mobile App Screenshot Scroller
*
* 4a. Book Hero
*
* 4b. Book Hero (Flutter)
*
*/
/* ==========================================================================
1. Recommendations (Owned)
========================================================================== */
/* ==========================================================================
2a. Subscription Plans
========================================================================== */
/* ==========================================================================
2b. Team Subscription
========================================================================== */
/* ==========================================================================
3. Mobile App Screenshot Scroller
========================================================================== */
/* ==========================================================================
4a. Book Purchase
========================================================================== */
.book-purchase {
  max-width: 759px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px;
}
@media screen and (min-width: 768px), print {
  .book-purchase {
    grid-column-gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .book-purchase {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }
}
.book-purchase-artwork {
  text-align: right;
}
@media screen and (max-width: 767px) {
  .book-purchase-artwork {
    text-align: left;
  }
}
.book-purchase-artwork img {
  width: 100%;
  border-radius: 32px;
  border: 1px solid #D7D7D7;
  max-width: 364px;
}
@media screen and (max-width: 767px) {
  .book-purchase-artwork img {
    max-width: unset;
  }
}

/* ==========================================================================
4b. Book History
========================================================================== */
.book-details {
  max-width: 1188px;
  display: grid;
  grid-template-columns: 398px 1fr;
  grid-column-gap: 99px;
}
@media screen and (min-width: 768px), print {
  .book-details {
    grid-column-gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .book-details {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }
}
.book-details-artwork {
  text-align: right;
}
@media screen and (max-width: 767px) {
  .book-details-artwork {
    text-align: left;
  }
}
.book-details-artwork img {
  width: 100%;
  border-radius: 32px;
  border: 1px solid #D7D7D7;
  max-width: 398px;
}
@media screen and (max-width: 767px) {
  .book-details-artwork img {
    max-width: unset;
  }
}

/**
* Sales pages—common sections and layouts for sales page
*
* 1. Intro: Sales
*
* 2. Choose plan
*
* 3. Team/client logos
*
* 4. Features table
*
* 5. Enterprise callout
*
* 6. Product callout
*
* 7. FAQ + Sidebar
*
* 8. Contact Enterprise Support
*
* 9. Enterprise Team Logos
*
* 10. Notifications
*
* 11. Testimonials
*
* 12. Reasons To Believe(RTBs)
*
* 13. Banner with Text
*
* 14. New Faqs
*
* 15. Program Cards
*
*/
/* ==========================================================================
1. Introduction: Sales
========================================================================== */
.sales-introduction .module-page-header:before {
  width: calc(100% - 542px);
}
@media screen and (max-width: 1199px) {
  .sales-introduction .module-page-header:before {
    width: calc(100% - 360px);
  }
}
@media screen and (max-width: 979px) {
  .sales-introduction .module-page-header:before {
    width: 100%;
  }
}
.sales-introduction .module-page-header .module-page-header-round-bottom {
  left: calc(100% - 542px);
}
@media screen and (max-width: 1199px) {
  .sales-introduction .module-page-header .module-page-header-round-bottom {
    left: calc(100% - 360px);
  }
}
.sales-introduction .module-page-header + div {
  margin-top: -160px;
}
@media screen and (max-width: 1647px) {
  .sales-introduction .module-page-header + div > div {
    padding-right: 240px;
  }
}
@media screen and (max-width: 979px) {
  .sales-introduction .module-page-header + div > div {
    max-width: 100%;
    padding-right: 0;
  }
}
.sales-introduction--container {
  max-width: 1188px;
  margin: 0 auto;
  padding: 144px 0;
  display: flex;
  gap: 80px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .sales-introduction--container {
    flex-direction: column;
    margin: 0 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sales-introduction--container {
    margin: 0 24px;
  }
}
.sales-introduction--container div:nth-child(1) h1 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 3.5rem;
}
.sales-introduction--container div:nth-child(1) p {
  font-size: 1.5rem;
  line-height: 1.875rem;
  margin-top: 32px;
}
.sales-introduction--container div:nth-child(2) > img {
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .sales-introduction--container div:nth-child(2) > img {
    width: 327px;
    border-radius: 0.75rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sales-introduction--container div:nth-child(2) > img {
    width: 375px;
  }
}

/* ==========================================================================
2. Choose plan
========================================================================== */
.select-subscription-plan {
  max-width: 1188px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .select-subscription-plan {
    margin: 0 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .select-subscription-plan {
    margin: 0 24px;
  }
}
.select-subscription-plan > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-column-gap: 16px;
}
@media screen and (max-width: 1023px) {
  .select-subscription-plan > ul {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .select-subscription-plan > ul {
    grid-template-columns: 1fr;
    grid-row-gap: 24px;
  }
}
.select-subscription-plan > div {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .select-subscription-plan > div {
    flex-direction: column;
    row-gap: 16px;
  }
}
.select-subscription-plan > div p a {
  text-decoration: underline;
}

.subscription-plan .subscription-plan-price .postfix-star::after {
  content: "*";
  padding-left: 1px;
}
.subscription-plan .subscription-plan-price .postfix-comma::after {
  content: ",";
  padding-left: 1px;
}
.subscription-plan .subscription-plan-price--wrapper {
  display: flex;
  align-items: last baseline;
}

.select-subscription-plan-single > ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 16px;
}

.select-subscription-plan-double {
  max-width: 792px;
}
.select-subscription-plan-double > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
}
@media screen and (max-width: 767px) {
  .select-subscription-plan-double > ul {
    grid-template-columns: 1fr;
    grid-row-gap: 24px;
  }
}

/* ==========================================================================
3. Team/client logos
========================================================================== */
.clients .clients-top {
  display: grid;
  grid-template-columns: 1fr 240px;
  height: 240px;
}
@media screen and (max-width: 767px) {
  .clients .clients-top {
    grid-template-columns: 1fr 120px;
    height: 120px;
  }
}
.clients .clients-top .clients-top-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
.clients .clients-top .clients-top-right {
  position: relative;
}
.clients .clients-top .clients-top-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #14161E;
}
@media screen and (max-width: 767px) {
  .clients .clients-top .clients-top-right:before {
    width: 40px;
  }
}
.clients .clients-bottom {
  background-color: #14161E;
  border-radius: 0 48px 48px 48px;
  padding-bottom: 240px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .clients .clients-bottom {
    padding-bottom: 160px;
  }
}
.clients .clients-bottom .clients-title {
  font-size: 3.5rem;
  color: #FFFFFF;
  text-align: center;
  padding-top: 40px;
}
@media screen and (max-width: 767px) {
  .clients .clients-bottom .clients-title {
    font-size: 2.5rem;
    text-align: left;
    margin-top: 40px;
    padding-top: 0;
  }
}
.clients .clients-bottom .clients-grid {
  margin-top: 80px;
  display: flex;
  white-space: nowrap;
  position: relative;
  left: -50%;
  transform: translate3d(0%, 0, 0);
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 60s;
}
.clients .clients-bottom .clients-grid > div {
  min-width: 182px;
  min-height: 182px;
  border-radius: 16px;
  border: 1px solid #D7D7D7;
  margin: 0 8px;
}
@media screen and (max-width: 767px) {
  .clients .clients-bottom .clients-grid > div {
    min-width: 98px;
    min-height: 98px;
  }
}
.clients .clients-bottom .clients-grid > div > img {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
4. 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%;
}
.features-table table thead {
  height: 104px;
  background-color: #F7F7F7;
}
.features-table table thead tr th {
  font-size: 1.25rem;
}
.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 > tr {
  border-bottom: 1px solid #14161E;
}
.features-table table tbody td {
  text-align: center;
}
.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 tbody td .badge.badge-new {
  border: unset;
  height: 26px;
  border-radius: 8px;
  letter-spacing: 1px;
}
.features-table table tbody td .badge.badge-new.pulse:before {
  border-radius: 8px;
}
.features-table table tbody div[role=button] {
  position: relative;
}
.features-table table tbody div[role=button] h4 {
  padding-left: 56px;
}
.features-table table tbody div[role=button] .btn-icon {
  position: absolute;
  top: -6px;
}
.features-table table tbody div[role=button] .btn-icon svg {
  width: 12px;
  max-height: 20px;
}
.features-table table tbody div[data-toggle-target=content] {
  padding-left: 56px;
}

.features-table table.enterprise-features {
  background-color: #14161E;
}
.features-table table.enterprise-features thead {
  background-color: #14161E;
}
.features-table table.enterprise-features thead tr {
  background-color: rgba(247, 247, 247, 0.1);
}
.features-table table.enterprise-features tbody tr {
  border-color: rgba(247, 247, 247, 0.2);
}
.features-table table.enterprise-features tbody tr:last-child {
  border-bottom: none;
}
.features-table table.enterprise-features th, .features-table table.enterprise-features td {
  color: #FFFFFF;
}
.features-table table.enterprise-features div[role=button] svg {
  fill: #FFFFFF;
}

/* ==========================================================================
5. Enterprise callout
========================================================================== */
.enterprise-callout {
  position: relative;
}
.enterprise-callout .enterprise-callout-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
.enterprise-callout .enterprise-callout-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 979px) {
  .enterprise-callout .enterprise-callout-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top > div {
    padding-bottom: 0;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-left {
    text-align: left;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-top-left h2 {
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-left .btn-larget:first-of-type {
    display: none;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-top-left .btn-larget:last-of-type {
  display: none;
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-left .btn-larget:last-of-type {
    display: inline-flex;
  }
}
@media screen and (max-width: 979px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-top-right {
    width: 100%;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .enterprise-callout-mosaic-top {
  position: relative;
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(/assets/photos/team-players-sprite@1.5x-c868ac43469bf4a00470118dafa5096c2a7e39f87603f96723fd3bbcc7e2701d.jpg);
  background-repeat: no-repeat;
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-logo {
  background-image: none;
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-1 {
  background-size: 1120px;
  position: relative;
  left: 106px;
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-2 {
  background-size: 728px;
  background-position: top 0px left -182px;
  margin-top: 40px;
  margin-left: calc(100% - 182px);
}
@media screen and (max-width: 1139px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-2 {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 0;
  }
}
@media screen and (max-width: 979px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-2 {
    margin-left: calc(100% - 182px);
    left: auto;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-3 {
  background-size: 728px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
}
@media screen and (max-width: 1139px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-4 {
  background-size: 728px;
  background-position: top 0px left -546px;
  position: absolute;
  bottom: 0;
  right: 40px;
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-4 {
    background-position: top 0px left -364px;
  }
}
@media screen and (max-width: 399px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-5 {
  position: absolute;
  top: 0;
  right: 108px;
}
@media screen and (max-width: 1039px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-5 {
    right: auto;
    left: 8px;
  }
}
@media screen and (max-width: 979px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-5 {
    right: 108px;
    left: auto;
  }
}
@media screen and (max-width: 767px) {
  .enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-5 {
    right: 20px;
    top: -120px;
  }
}
.enterprise-callout .enterprise-callout-top .enterprise-callout-mosaic .photo-mosaic-piece-6 {
  position: absolute;
  left: 8px;
}
.enterprise-callout .enterprise-callout-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  .enterprise-callout .enterprise-callout-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
.enterprise-callout .enterprise-callout-bottom .enterprise-callout-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
.enterprise-callout .enterprise-callout-bottom .enterprise-callout-bottom-right {
  position: relative;
}
.enterprise-callout .enterprise-callout-bottom .enterprise-callout-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) {
  .enterprise-callout .enterprise-callout-bottom .enterprise-callout-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
6. Product callout
========================================================================== */
.product-callout h2 {
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .product-callout h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
.product-callout > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 14%;
}
@media screen and (max-width: 979px) {
  .product-callout > div {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
.product-callout > div .product-callout-mosaic {
  position: relative;
}
@media screen and (max-width: 979px) {
  .product-callout > div .product-callout-mosaic {
    width: 576px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  .product-callout > div .product-callout-mosaic {
    max-width: 576px;
    width: 100%;
  }
}
.product-callout > div .product-callout-mosaic .photo-mosaic-piece {
  background-image: url(/assets/photos/users-sprite@1.5x-b32eda77ddedda53dfbf08b1d712a614660cd24ecd9077b43d9a975b73160c31.jpg);
  background-repeat: no-repeat;
}
.product-callout > div .product-callout-mosaic .photo-mosaic-piece-1 {
  background-size: 1120px;
  position: relative;
  left: 8px;
}
.product-callout > div .product-callout-mosaic .photo-mosaic-piece-2 {
  background-size: 328px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  left: 304px;
}
@media screen and (max-width: 767px) {
  .product-callout > div .product-callout-mosaic .photo-mosaic-piece-2 {
    left: auto;
    right: 0;
  }
}
@media screen and (max-width: 429px) {
  .product-callout > div .product-callout-mosaic .photo-mosaic-piece-2 {
    top: -40px;
  }
}
.product-callout > div .product-callout-mosaic .photo-mosaic-piece-3 {
  background-size: 728px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
  margin-top: 56px;
}
@media screen and (max-width: 767px) {
  .product-callout > div .product-callout-mosaic .photo-mosaic-piece-3 {
    left: 50%;
    margin-left: -91px;
  }
}
.product-callout > div .product-callout-mosaic .photo-mosaic-piece-4 {
  background-size: 728px;
  background-position: top 0px left -546px;
  position: absolute;
  top: 138px;
  right: 0;
}
@media screen and (max-width: 429px) {
  .product-callout > div .product-callout-mosaic .photo-mosaic-piece-4 {
    top: 198px;
  }
}

/* ==========================================================================
7. Faq + Sidebar
========================================================================== */
.faq-sidebar {
  display: grid;
  grid-template-columns: 18.75% 50% 18.75%;
  grid-column-gap: 6.25%;
}
@media screen and (max-width: 1023px) {
  .faq-sidebar {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
    max-width: 792px;
  }
}
.faq-sidebar p a {
  text-decoration: underline;
}

/* ==========================================================================
8. Contact Enterprise Support
========================================================================== */
.contact-enterprise-support {
  margin-bottom: -160px;
}
.contact-enterprise-support .module-page-header:before {
  width: 100%;
}

.contact-enterprise-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 98px;
}
@media screen and (max-width: 767px) {
  .contact-enterprise-support-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}

/* ==========================================================================
9. Enterprise Team Logos
========================================================================== */
.enterprise-team-logos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
.enterprise-team-logos > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
.enterprise-team-logos > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
10. Notifications
========================================================================== */
.notification-sales {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  top: 48px;
  padding: 15px 24px;
}
@media screen and (max-width: 1631px) {
  .notification-sales {
    width: calc(100% - 48px);
  }
}

/* ==========================================================================
11. Testimonials
========================================================================== */
section.home-testimonials {
  margin-top: 144px;
  margin-bottom: 144px;
}
section.home-testimonials h2 {
  font-size: 4.5rem;
  line-height: 1;
  text-align: center;
  max-width: 990px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials .testimonials-card--wrapper {
  margin-top: 120px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials .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;
  scroll-snap-type: x mandatory;
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials .testimonials-card--wrapper .card {
  width: 380px;
  scroll-snap-align: start;
}
@media screen and (max-width: 767px) {
  section.home-testimonials .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-title,
section.home-testimonials .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
  background-color: #FFFFFF;
}
section.home-testimonials .testimonials-card--wrapper .badge .svg {
  width: 24px;
  height: 19px;
}

.testimonials--container {
  display: flex;
  gap: 70px;
}
@media screen and (max-width: 767px) {
  .testimonials--container {
    flex-direction: column;
  }
}
.testimonials--container .testimonials--title {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 500;
  color: #FF5A00;
}
.testimonials--container .testimonials--wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
@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;
}
.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;
}

/* ==========================================================================
12. Reasons To Believe(RTBs)
========================================================================== */
.rtbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}
.rtbs--title {
  font-size: 4rem;
  line-height: 4.5rem;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .rtbs--title {
    text-align: left;
  }
}
.rtbs-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 140px;
  width: 100%;
  gap: 48px;
}
.rtbs-list-item {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 350px;
}
.rtbs-list-item--image > svg {
  width: 48px;
  height: 48px;
}
.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;
  height: 80px;
}
.rtbs-list-item--info-description {
  font-size: 1.5rem;
  line-height: 1.875rem;
}

/* ==========================================================================
13. Banner with Text
========================================================================== */
.banner-w-text--container {
  max-width: 1188px;
  margin: 0 auto;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .banner-w-text--container {
    margin: 0 24px;
    align-items: flex-start;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .banner-w-text--container {
    text-align: center;
    margin: 0 24px;
  }
}
.banner-w-text--container h2 {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 3rem;
}
.banner-w-text--container p {
  font-size: 1.25rem;
  line-height: 1.5625rem;
}

/* ==========================================================================
14. New Faqs
========================================================================== */
@media screen and (max-width: 767px) {
  .faqs h2 {
    text-align: left;
  }
}
.faqs .content-middle {
  grid-template-columns: 24.33% 66.33%;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}
@media screen and (max-width: 767px) {
  .faqs .content-middle .content-middle-right.new-faq {
    margin-top: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faqs .content-middle .content-middle-right.new-faq {
    margin-top: 80px;
  }
}
.faqs .content-middle .content-middle-right.new-faq .accordion-content details .content-description {
  padding-left: 24px;
}
.faqs .content-middle .content-middle-right.new-faq .accordion-content details summary .accordion-trigger {
  padding: 24px;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faqs .content-middle .content-middle-left.new-faq p {
    text-align: center;
  }
}

/* ==========================================================================
15. Program Cards
========================================================================== */
section.program-cards {
  margin-top: 160px;
  max-width: 1680px;
}
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%;
  margin-top: 40px;
}
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;
}
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: unset;
}
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-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;
}

/**
* Subscription Management
*
* Custom classes for user facing subscription pages
*
* 1. Base
*
* 2. Plan Cards
*
* 3. Card States
*
* 4. Cancellation
*
*/
/* ==========================================================================
1. Base
========================================================================== */
.subscription-management {
  display: flex;
  gap: 111px;
}
@media screen and (max-width: 1287px) {
  .subscription-management {
    flex-direction: column;
    gap: 80px;
  }
}

/* ==========================================================================
2. Plan Cards
========================================================================== */
@media screen and (min-width: 816px) {
  .billing {
    width: 1188px;
  }
}
@media screen and (min-width: 816px) {
  .billing.billing-narrow {
    width: 776px;
  }
}
@media screen and (max-width: 767px) {
  .billing {
    text-align: center;
  }
}
.billing-grid {
  display: flex;
  gap: 24px;
}
.billing-grid li {
  width: 100%;
  max-width: 380px;
}
@media screen and (max-width: 767px) {
  .billing-grid {
    flex-direction: column;
    align-items: center;
  }
}
.billing li .card-minimal {
  height: 100%;
}
.billing .card-minimal {
  max-width: 380px;
}
.billing .card-minimal .card-minimal-title {
  display: flex;
  align-items: flex-start;
}
.billing .card-minimal .card-minimal-title h3 {
  flex-grow: 1;
}
.billing .card-minimal .subscription-plan-saving {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: #E34A4C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.billing .card-minimal.card-billing {
  width: 380px;
  padding: unset;
  justify-content: flex-start;
}
.billing .card-minimal.card-billing.personal {
  min-height: 460px;
}
.billing .card-minimal.card-billing.enterprise {
  max-height: 460px;
}
.billing .card-minimal.card-billing header {
  background-color: #F7F7F7;
  border-radius: 16px 16px 0 0;
  font-size: 1.125rem;
  line-height: 18px;
  padding: 24px;
}
.billing .card-minimal.card-billing main {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.billing .card-minimal.card-billing main .title {
  font-size: 1.5rem;
  text-transform: capitalize;
  max-width: 230px;
}

/* ==========================================================================
3. States
========================================================================== */
/* ==========================================================================
4. Cancellation
========================================================================== */
.cancellation-acknowledgement {
  display: grid;
  column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .cancellation-acknowledgement {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 768px), print {
  .cancellation-acknowledgement {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cancellation-acknowledgement__postscript {
  grid-row: 2;
  margin-top: 20px;
}
.cancellation-acknowledgement .card-minimal {
  min-height: 462px;
}
.cancellation-acknowledgement .card-minimal li {
  display: flex;
  line-height: 1.25rem;
}
.cancellation-acknowledgement .card-minimal li:not(:first-of-type) {
  margin-top: 16px;
}
.cancellation-acknowledgement .card-minimal li svg.icon {
  width: 24px;
  height: 24px;
}
.cancellation .ml-34 {
  margin-left: 34px;
}

/* ==========================================================================
4b. Cancellation Modal
========================================================================== */
.cancellation-modal .modal-wrapper {
  max-width: 594px;
}

/* ==========================================================================
5. Pause
========================================================================== */
.pause__choices {
  display: flex;
  justify-content: center;
  gap: 16px;
}
@media screen and (max-width: 599px) {
  .pause__choices {
    flex-direction: column;
  }
}

header.header {
  z-index: 10 !important;
}

.c-nav-sidebar-admin,
.c-nav-sidebar-enterprise {
  overflow: hidden;
}
.c-nav-sidebar-admin .sidebar-image-fill,
.c-nav-sidebar-enterprise .sidebar-image-fill {
  margin-left: -24px;
  width: calc(100% + 48px);
  height: 192px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .c-nav-sidebar-admin .sidebar-image-fill,
  .c-nav-sidebar-enterprise .sidebar-image-fill {
    display: none;
  }
}
.c-nav-sidebar-admin .sidebar-image-fill:before,
.c-nav-sidebar-enterprise .sidebar-image-fill:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(51, 51, 51);
  z-index: 1;
}
.c-nav-sidebar-admin .sidebar-image-fill img,
.c-nav-sidebar-enterprise .sidebar-image-fill img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 80px;
}
.c-nav-sidebar-admin .nav-sidebar__wrapper,
.c-nav-sidebar-enterprise .nav-sidebar__wrapper {
  margin-top: -60px;
}
@media screen and (max-width: 1023px) {
  .c-nav-sidebar-admin .nav-sidebar__wrapper,
  .c-nav-sidebar-enterprise .nav-sidebar__wrapper {
    display: flex;
  }
}

.accounts-menu {
  width: 286px;
  z-index: 1;
  position: relative;
}
.accounts-menu .user-info img {
  border-radius: 12px;
  white-space: nowrap;
}
.accounts-menu .user-info .dropdown-subtitle {
  max-width: 185px;
  overflow: hidden;
  padding-bottom: 2px;
  text-overflow: ellipsis;
}
.accounts-menu:hover:before {
  opacity: 1;
}
.accounts-menu:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.2);
  filter: blur(100px);
  opacity: 0;
  transition: opacity 0.25s;
}
@media screen and (max-width: 1287px) {
  .accounts-menu {
    position: relative;
    width: calc(100% - 48px);
  }
  .accounts-menu .dropdown-menu {
    position: relative;
    margin-top: 40px;
  }
  .accounts-menu .dropdown-content {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    white-space: nowrap;
    padding-left: 4px !important;
  }
  .accounts-menu .dropdown-content::-webkit-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: none;
  }
  .accounts-menu .dropdown-content .dropdown-line {
    width: auto !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .accounts-menu .dropdown-content p.dropdown-line:nth-of-type(1) {
    display: none !important;
  }
  .accounts-menu .dropdown-content hr {
    display: none !important;
  }
}
.accounts-menu .dropdown-menu {
  width: 100%;
  position: relative;
  overflow: visible;
  margin-top: auto;
}
.accounts-menu .dropdown-menu .dropdown-line.active {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

.l-admin {
  background: #0E0F14;
  padding-left: 280px;
  min-height: 260vh;
  height: 100%;
  border-radius: 0 0 54px 0;
}
@media screen and (max-width: 1023px) {
  .l-admin {
    padding-left: 0;
    padding-right: 0;
  }
}
.l-admin .c-nav-sidebar {
  width: 320px;
}
.l-admin .container {
  padding-top: 48px;
  padding-bottom: 90px;
}

/* ==========================================================================
  Receipts Tabs
========================================================================== */
.receipts-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.receipts-tabs li a {
  background-color: #D7D7D7;
  color: #14161E;
}
.receipts-tabs li.active a {
  background-color: #14161E;
  color: #FFFFFF;
}

/**
* Invitation Layouts
*
* Layouts for the invitations pages
*
* 1. Card
*
*/
/* ==========================================================================
1. Card
========================================================================== */
@media screen and (max-width: 767px) {
  .invitation-card {
    width: auto;
  }
}
.invitation-card > main {
  display: grid;
  align-self: center;
  justify-items: center;
  text-align: center;
}
.invitation-card > main h1 {
  font-size: 2rem;
  line-height: 1.25;
}
.invitation-card > main img.invitation-hero {
  width: 88px;
}

* {
  font-family: Relative;
}

body {
  background-color: #F7F7F7;
}

.underline {
  text-decoration: underline;
}

.capitalize {
  text-transform: capitalize;
}

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

.fs-72 {
  font-size: 4.5rem;
  /* 72/16 */
}

.fs-56 {
  font-size: 3.5rem;
  /* 56/16 */
}

@media screen and (max-width: 767px) {
  .mobile-text-align-left {
    text-align: left !important;
  }
}

@media screen and (max-width: 767px) {
  .mobile-fs-40 {
    font-size: 2.5rem;
  }
}

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

.pt-144 {
  padding-top: 144px;
}

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.card-artwork-small {
  grid-template-columns: 1fr 72px;
  grid-template-rows: 72px 1fr;
}
.card-artwork-small .card-topright:before {
  width: 56px;
}
.card-artwork-small .card-artwork {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
}

@keyframes marquee {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
/* Some nastiness to try and improve the Kodeco enterprise experience temporarily */
.enterprise-container {
  margin-top: 40px;
}
.enterprise-container .c-nav-sidebar-enterprise {
  padding: 64px 16px;
  width: 260px;
  flex-shrink: 0;
}
.enterprise-container main {
  flex-grow: 1;
}
.enterprise-container main .tabs {
  border-bottom: none;
}
.enterprise-container main .tabs .tab.active::before {
  border-bottom: 2px solid #FFFFFF;
}
.enterprise-container main .tabs .tab a {
  color: #FFFFFF;
}
.enterprise-container main .badge {
  border-radius: 0.5625rem;
  border-width: 2px;
  font-size: 11px;
  font-weight: 600;
  height: auto;
  line-height: 16.5px;
  padding: 3px 7px;
  text-transform: uppercase;
  width: auto;
}
.enterprise-container main .chart__block {
  min-width: unset;
}

body > .content {
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .touch-flex-direction-column {
    flex-direction: column;
  }
}
@keyframes a-triad {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.module-section-top-black-friday {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.select-subscription-plan-black-friday:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 50%;
  left: -62px;
  margin-top: -412px;
  background-image: url(/assets/artwork/kodeco/black-friday-2022-left-4804b8042467b260ed5fb0fdf4429fd135cead5265c670a30eb16bb4d0eb5b16.png);
  background-size: cover;
  opacity: 0;
  animation: a-triad 1s;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-fill-mode: forwards;
  z-index: -1;
}
@media screen and (max-width: 1023px) {
  .select-subscription-plan-black-friday:before {
    display: none;
  }
}
.select-subscription-plan-black-friday:after {
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 50%;
  right: -62px;
  margin-top: -412px;
  background-image: url(/assets/artwork/kodeco/black-friday-2022-right-4f1f34a7db820759cd4753b32f4e7457a971ae7d3e92b13cf8bf6e504d828f0b.png);
  background-size: cover;
  opacity: 0;
  animation: a-triad 1s;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-fill-mode: forwards;
  z-index: -1;
}
@media screen and (max-width: 1023px) {
  .select-subscription-plan-black-friday:after {
    display: none;
  }
}
@media screen and (max-width: 1379px) {
  .select-subscription-plan-black-friday {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  .select-subscription-plan-black-friday .subscription-plan-reorder {
    order: 2;
  }
}
.select-subscription-plan-black-friday .subscription-plan-title > span {
  white-space: nowrap;
}
.select-subscription-plan-black-friday .subscription-plan-saving {
  background-color: #14161E !important;
  text-transform: uppercase;
  text-align: center;
  font-size: 11px;
}
@media screen and (max-width: 767px) {
  .select-subscription-plan-black-friday h2 + p {
    text-align: left;
  }
}

.h-14 {
  height: 14px;
}

.h-16 {
  height: 16px;
}

.w-14 {
  width: 14px;
}

.h-24 {
  height: 24px;
}

.w-24 {
  width: 24px;
}

.w-40 {
  width: 40px;
}

.h-40 {
  height: 40px;
}

.br-4 {
  border-radius: 4px;
}

.br-8 {
  border-radius: 8px;
}

.br-12 {
  border-radius: 12px;
}

.gap-x-29 {
  column-gap: 29px;
}

.pb-52 {
  padding-bottom: 52px;
}

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

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

.b-0 {
  bottom: 0;
}

.l-150 {
  left: 150px;
}

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

.mb-0 {
  margin-bottom: 0;
}

.bg-none {
  background: none;
}

.border-none {
  border: none;
}

.border-radius-none {
  border-radius: 0;
}

.border-bottom-dark {
  border-bottom: 1px solid #3B3D43;
}

.pb-52 {
  padding-bottom: 52px;
}

.btn-icon-arrow svg {
  max-height: 15px;
  width: 14px;
  height: 15px;
}

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

.h-40 {
  height: 40px !important;
}

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

.nmr-8 {
  margin-right: -8px;
}

.bg-blur {
  backdrop-filter: blur(10px);
}

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

@media screen and (max-width: 959px) {
  .tablet-flex-column {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
  }
  .tablet-flex-column .menu-filter__row-date-filter {
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  .mobile-flex-column-filters {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
  }
  .mobile-flex-column-filters > div {
    width: 100%;
  }
  .mobile-flex-column-filters > div > span {
    width: 100%;
    margin: 0;
  }
  .mobile-flex-column-filters > div > span .btn-iconxsm {
    margin-left: auto !important;
  }
}

[class^=btn-].bg-orange-determination:hover {
  background-color: rgb(255, 79.3737864078, 2);
}

.analytics .menu-filter .o-checkbox input:checked + .checkbox__indicator {
  background-color: #00B87E;
}
.analytics .menu-filter .o-checkbox input:checked + .checkbox__indicator ~ svg {
  display: block;
  position: absolute;
  height: 12px;
  width: 12px;
  top: 6px;
  left: 6px;
  fill: #FFFFFF;
}
.analytics .menu-filter .menu-filter__span {
  background-color: #14161E;
  padding: 10px 16px;
  transition: background-color 0.5s ease-out;
}
.analytics .menu-filter .menu-filter__span:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.analytics .menu-filter .menu-filter__span .btn-iconxsm {
  width: 12px;
  height: 12px;
}
.analytics .menu-filter .menu-filter__span .btn-iconxsm:hover {
  background-color: transparent;
}
.analytics .menu-filter .menu-filter__span.bg-orange-determination {
  background-color: #CE3F00;
}
.analytics .menu-filter .search-normal {
  width: 100%;
  height: 40px;
  background-color: #07080A;
  border-color: #FFFFFF;
}
.analytics .menu-filter .search-normal:hover {
  background-color: #3B3D43;
}
.analytics .menu-filter .search-normal:focus {
  background-color: #07080A;
  border-color: #FF5A00;
}
.analytics .menu-filter .search-normal svg {
  top: 24px;
}
.analytics .menu-filter .btn-small.bg-white {
  border-color: #FFFFFF;
  color: #14161E;
}
.analytics .menu-filter .btn-small.bg-white:hover {
  background-color: #FFFFFF;
}
.analytics .menu-filter .btn-small.bg-white:focus {
  background-color: #FFFFFF;
}
.analytics .menu-filter .btn-small.bc-white:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.analytics .menu-filter.menu-filter--search > ul .menu-filter__options ul li {
  padding: 16px 24px 16px 60px;
}
.analytics .menu-filter .menu-filter__row {
  background-color: rgb(20, 22, 30);
  border-color: rgb(255, 255, 255);
  border-width: 1px;
  color: rgb(255, 255, 255);
  display: none;
  position: absolute;
  min-width: 297px;
  z-index: 1;
  overflow-y: initial !important;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options {
  height: 288px;
  overflow-y: scroll;
  padding: 0;
  position: relative;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options img {
  border-radius: 8px !important;
  border: 1px solid #FFFFFF;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options ul .lh-1 > div {
  margin-top: 6px;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options ul li {
  min-width: 100%;
  padding: 16px 24px 16px;
  position: relative;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options ul li:hover {
  background-color: #07080A;
}
.analytics .menu-filter .menu-filter__row .menu-filter__options ul li:nth-child(even) {
  background-color: rgba(7, 8, 10, 0.5);
}
.analytics .menu-filter .menu-filter__row .menu-filter__options ul li:nth-child(even):hover {
  background-color: #07080A;
}
.analytics .tabs li.active {
  position: relative;
}
.analytics .tabs li.active a {
  color: #FFFFFF;
  font-weight: 700;
}
.analytics .tabs li.active:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;
  background-color: #FFFFFF;
  height: 2px;
}
.analytics .tabs li a {
  padding: 8px 1rem !important;
  color: #FFFFFF;
}
.analytics .tabs li a:hover {
  background-color: #3B3D43 !important;
}

/* ==========================================================================
Notifications (Move to Murakami)
========================================================================== */
.notification.success {
  background-color: #157857;
}

.notification.danger {
  background-color: #962224;
}

/* ==========================================================================
Dots
========================================================================== */
@keyframes a-dot-loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.a-dot-loader--1 {
  animation: a-dot-loader 1.5s infinite;
}

.a-dot-loader--2 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.1s;
}

.a-dot-loader--3 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.2s;
}

/* Some changes to bootcamp pages */
.bootcamp-toc {
  margin-top: 20px;
}
.bootcamp-toc h4 {
  font-size: 1.3125rem;
  font-weight: 500;
}
.bootcamp-toc p {
  font-size: 1rem;
  margin-top: 10px;
}

.select .select-custom-trigger {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select .select-custom-trigger > svg {
  position: absolute;
  top: 20px;
  right: 16px;
}
.select .select-native,
.select .select-custom {
  line-height: 1.25rem !important;
}

.bottom-6 {
  bottom: -1.5rem;
}

.bottom-94 {
  bottom: 94px;
}

.mb-30 {
  margin-bottom: 30px;
}

.h-calc-40 {
  height: calc(100% - 40px);
}

.h-calc-64 {
  height: calc(100% - 64px);
}

.h-calc-66 {
  height: calc(100% - 66px);
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.grid-cols-repeat-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-repeat-10 {
  grid-template-columns: repeat(10, 4px);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard__daily-activity-log-block-data-point {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 4.2px;
}

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

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

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

.top-neg-25 {
  top: -25%;
}

.h-22 {
  height: 5.5rem;
}

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

.w-212 {
  width: 212px;
}

.w-calc-24 {
  width: calc(100% - 24px);
}

.chart-node::before {
  position: absolute;
  top: 0;
}
.chart-node::after {
  border: 4px solid #14161E;
  position: absolute;
  top: 0;
}

.chart-before::before {
  left: auto;
  right: 0;
}

.chart__data__track {
  color: rgb(192, 199, 207);
  font-size: 12px;
  line-height: 1.45;
  position: absolute;
  top: 22px;
}

.chart-after-first-half {
  transform: translateX(-50%);
}
.chart-after-first-half::after {
  background-color: #D7D7D7;
  border-bottom-left-radius: 150px;
  border-top-left-radius: 150px;
  height: 10px;
  left: 8px;
  top: -25px;
  width: 5px;
}

.chart-after-second-half::after {
  background-color: #FFFFFF;
  border: 4px solid #14161E;
  border-radius: 100px;
  top: -29px;
  left: 8px;
  height: 18px;
  width: 18px;
}

.dashboard__daily-activity-log-block {
  position: relative;
  display: grid;
  grid-template-columns: repeat(52, 16px);
  column-gap: 4.8px;
  width: 1124px;
  margin: 0 auto;
  padding-top: 32px;
}

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

.uppercase {
  text-transform: uppercase;
}

.mr-25 {
  margin-right: 25px;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}

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

.ml-34 {
  margin-left: 34px;
}

.w-4 {
  width: 1rem;
}

.w-10 {
  width: 2.5rem;
}

.h-4 {
  height: 1rem;
}

.h-10 {
  height: 2.5rem;
}

.bg-btn-white-0\.1 {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.top-10 {
  top: 2.5rem;
}

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

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

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