*, ::before, ::after{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Source Code Pro, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
    /* TODO: These btn styles are legacy and should be refactored out */
    .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--buttonBorderColor1);
    font-size: 16px;
    font-weight: 600;
        white-space: nowrap;
        height: 48px;
}

        .btn > .c-icon {
            height: 18px;
            width: 18px;
        }
            .btn > .c-icon:first-child{
    margin-right: 12px;
}
            .btn > .c-icon:last-child{
    margin-left: 12px;
}

        .btn > .kb-shortcut{
    margin-left: 8px;
}

        .btn:disabled {
            opacity: 0.5;
        }
    .btn-simple{
    border-color: var(--borderColor5);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--textColor6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--buttonBorderColor1);
    font-size: 16px;
    font-weight: 600;
        white-space: nowrap;
        height: 48px;
}
    .btn-simple > .c-icon {
            height: 18px;
            width: 18px;
        }
    .btn-simple > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-simple > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-simple > .kb-shortcut{
    margin-left: 8px;
}
    .btn-simple:disabled {
            opacity: 0.5;
        }

        .btn-i-large > .c-icon {
            height: 16px;
            width: 16px;
        }

    .btn-small{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--buttonBorderColor1);
    font-size: 16px;
    font-weight: 600;
        white-space: nowrap;
        height: 48px;
}

    .btn-small > .c-icon {
            height: 18px;
            width: 18px;
        }

    .btn-small > .c-icon:first-child{
    margin-right: 12px;
}

    .btn-small > .c-icon:last-child{
    margin-left: 12px;
}

    .btn-small > .kb-shortcut{
    margin-left: 8px;
}

    .btn-small:disabled {
            opacity: 0.5;
        }

    .btn-small{
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    color: var(--textColor6);
        height: 36px;
}

        .btn-small > .c-icon {
            height: 14px;
            width: 14px;
        filter: var(--textColor6-filter);
        }
    .btn-small-discourage{
    border-color: var(--borderColor5);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--textColor6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--buttonBorderColor1);
    font-size: 16px;
    font-weight: 600;
        white-space: nowrap;
        height: 48px;
}
    .btn-small-discourage > .c-icon {
            height: 18px;
            width: 18px;
        }
    .btn-small-discourage > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-small-discourage > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-small-discourage > .kb-shortcut{
    margin-left: 8px;
}
    .btn-small-discourage:disabled {
            opacity: 0.5;
        }
    .btn-small-discourage{
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    color: var(--textColor6);
        height: 36px;
}
    .btn-small-discourage > .c-icon {
            height: 14px;
            width: 14px;
        filter: var(--textColor6-filter);
        }

    .btn-link-legacy{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--buttonBorderColor1);
    font-size: 16px;
    font-weight: 600;
        white-space: nowrap;
        height: 48px;
}

    .btn-link-legacy > .c-icon {
            height: 18px;
            width: 18px;
        }

    .btn-link-legacy > .c-icon:first-child{
    margin-right: 12px;
}

    .btn-link-legacy > .c-icon:last-child{
    margin-left: 12px;
}

    .btn-link-legacy > .kb-shortcut{
    margin-left: 8px;
}

    .btn-link-legacy:disabled {
            opacity: 0.5;
        }

    .btn-link-legacy{
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    color: var(--textColor6);
        height: 36px;
}

    .btn-link-legacy > .c-icon {
            height: 14px;
            width: 14px;
        filter: var(--textColor6-filter);
        }

    .btn-link-legacy{
    border-width: 0;
    padding: 0px;
        color: var(--c-prominent-link-color);
}
        .btn-link-legacy .c-icon {
            filter: var(--c-prominent-link-icon-filter);
        }

    a.text-a-subtle,
    button.text-a-subtle{
    font-weight: 400;
    line-height: 140%;
    color: var(--textColor2);
    border-bottom-width: 1px;
    border-color: var(--textColor2);
}
    .border-gradient {
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-primary {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(#130b43, #130b43),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-bgGray {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(
                var(--backgroundColorB),
                var(--backgroundColorB)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-lightPurple {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(
                var(--backgroundColorBorderGradientLightPurple),
                var(--backgroundColorBorderGradientLightPurple)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
            .btn-i-base > .c-icon:first-child{
    margin-right: 12px;
}
            .btn-i-base > .c-icon:last-child{
    margin-left: 12px;
}
        .btn-i-filled.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }
            .btn-i-filled.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }
        .btn-i-filled.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }
            .btn-i-filled.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }
        .btn-i-filled.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }
            .btn-i-filled.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }
        .btn-i-filled.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }
            .btn-i-filled.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-primary.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }

    .btn-primary.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }

    .btn-primary.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }

    .btn-primary.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }

    .btn-primary.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-primary.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-primary.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-primary.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(96 79 205 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(19 11 67 / var(--tw-border-opacity, 1));
}

        .btn-primary .c-icon {
            filter: var(--white-filter);
        }
        .btn-primary:not(:disabled):not(.--disabled):hover{
    --tw-bg-opacity: 1;
    background-color: rgb(59 42 147 / var(--tw-bg-opacity, 1));
}

    .btn-secondary.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }

    .btn-secondary.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }

    .btn-secondary.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }

    .btn-secondary.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }

    .btn-secondary.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-secondary.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-secondary.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-secondary.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-secondary {
        color: var(--colorPurpleToBrightPurple);
        background: var(--backgroundColorBtnSecondary);
        border-width: 1px;
        border-color: var(--colorPurpleToBrightPurple);
    }
        .btn-secondary > .c-icon {
            filter: var(--purple-to-bright-purple-filter);
        }
        .btn-secondary:not(:disabled):not(.--disabled):hover {
            background: var(--backgroundColorBtnSecondaryHover);
        }

    .btn-enhanced.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }

    .btn-enhanced.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }

    .btn-enhanced.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }

    .btn-enhanced.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }

    .btn-enhanced.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-enhanced.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-enhanced.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-enhanced.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-enhanced{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--textColor2);
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(92 85 137 / var(--tw-border-opacity, 1));
}
        .btn-enhanced > .c-icon {
            filter: var(--textColor2-filter);
        }
        .btn-enhanced:not(:disabled):not(.--disabled):hover {
            background: rgb(96, 79, 205, 0.02);
        }
            .btn-enhanced:not(:disabled):not(.--disabled):hover.btn-l {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-slightly-enhanced.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }

    .btn-slightly-enhanced.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }

    .btn-slightly-enhanced.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }

    .btn-slightly-enhanced.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }

    .btn-slightly-enhanced.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-slightly-enhanced.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-slightly-enhanced.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-slightly-enhanced.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-slightly-enhanced{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--textColor2);
    border-width: 1px;
    border-color: var(--borderColor4);
}
        .btn-slightly-enhanced > .c-icon {
            filter: var(--textColor2-filter);
        }
        .btn-slightly-enhanced:not(:disabled):not(.--disabled):hover {
            background: rgb(96, 79, 205, 0.02);
        }
            .btn-slightly-enhanced:not(:disabled):not(.--disabled):hover.btn-l {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.3);
            }

    .btn-default{
    color: var(--textColor2);
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(92 85 137 / var(--tw-border-opacity, 1));
}
        .btn-default > .c-icon {
            filter: var(--textColor2-filter);
        }
        .btn-default:not(:disabled):not(.--disabled):hover {
            background: rgba(0, 0, 0, 0.05);
        }

    .btn-warning.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }

    .btn-warning.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }

    .btn-warning.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }

    .btn-warning.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }

    .btn-warning.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-warning.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-warning.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }

    .btn-warning.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }

    .btn-warning{
    --tw-bg-opacity: 1;
    background-color: rgb(228 137 0 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(87 60 19 / var(--tw-border-opacity, 1));
}

        .btn-warning .c-icon {
            filter: var(--white-filter);
        }
        .btn-warning:not(:disabled):not(.--disabled):hover {
            /* TODO: Darker color */
        }

    .btn-alert{
    --tw-bg-opacity: 1;
    background-color: rgb(216 80 80 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(135 51 51 / var(--tw-border-opacity, 1));
}

        .btn-alert .c-icon {
            filter: var(--white-filter);
        }
        .btn-alert:not(:disabled):not(.--disabled):hover {
            /* TODO: Darker color */
        }

    .btn-link{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}

    .btn-link > .c-icon:first-child{
    margin-right: 12px;
}

    .btn-link > .c-icon:last-child{
    margin-left: 12px;
}

    .btn-link > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}

    .btn-link{
    color: var(--linkColor);
}
        .btn-link .c-icon {
            filter: var(--linkColor-filter);
            height: 18px;
            width: 18px;
        }

    .btn-keyboard-shortcut{
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

        .btn-keyboard-shortcut > :first-child{
    margin-right: 12px;
}
        .btn-keyboard-shortcut .--kb{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--borderColor5);
    color: var(--textColor6);
            box-shadow: 0px 1px 0px 1px rgba(var(--shadowColorKeystroke), 0.73);
}

            .btn-keyboard-shortcut .--kb .c-icon {
                height: 12px;
                width: 12px;
        filter: var(--textColor6-filter);
            }
        .btn-keyboard-shortcut .--hint{
    font-weight: 600;
    color: var(--textColor6);
}

    .btn-xxs{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}

    .btn-xxs > .c-icon:first-child{
    margin-right: 12px;
}

    .btn-xxs > .c-icon:last-child{
    margin-left: 12px;
}

    .btn-xxs > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}

    .btn-xxs {
        height: 24px;
        border-radius: 5px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }

        .btn-xxs > .c-icon {
            height: 14px;
            width: 14px;
        }
            .btn-xxs > .c-icon:first-child{
    margin-right: 6px;
}
            .btn-xxs > .c-icon:last-child{
    margin-left: 6px;
}
        .btn-xxs > .kb-shortcut{
    font-size: 13px;
}
    .btn-xs{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
    .btn-xs > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-xs > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-xs > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
    .btn-xs {
        height: 32px;
        border-radius: 5px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 14px;
    }

        .btn-xs > .c-icon {
            height: 14px;
            width: 14px;
        }
        .btn-xs > .kb-shortcut{
    font-size: 13px;
}
    .btn-s{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
    .btn-s > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-s > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-s > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
    .btn-s {
        height: 40px;
        border-radius: 5px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 15px;
        line-height: 16px;
    }

        .btn-s > .c-icon {
            height: 16px;
            width: 16px;
        }

        .btn-s > .kb-shortcut{
    font-size: 13px;
            line-height: 13px;
}
    .btn-m{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
    .btn-m > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-m > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-m > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
    .btn-m {
        height: 48px;
        border-radius: 5px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 14px;
    }
    @media (min-width: 640px){

    .btn-m{
        font-size: 16px;
    }
}

        .btn-m > .c-icon {
            height: 18px;
            width: 18px;
        }

        .btn-m > .kb-shortcut{
    font-size: 14px;
}
    .btn-l{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
    .btn-l > .c-icon:first-child{
    margin-right: 12px;
}
    .btn-l > .c-icon:last-child{
    margin-left: 12px;
}
    .btn-l > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
    .btn-l {
        height: 56px;
        border-radius: 8px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 18px;
    }

        .btn-l > .c-icon {
            height: 20px;
            width: 20px;
        }

        .btn-l > .kb-shortcut{
    font-size: 15px;
}

    [class^="btn"]:disabled {
        /* This needs to be important to override any previous fade-in animations */
        opacity: 0.5 !important;
        cursor: not-allowed;
    }
    /* Makes element scrollable on the x-axis but hides the scrollbar */
    .scroll-x-hidden{
    overflow-x: auto;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;
} /* Firefox */
        .scroll-x-hidden::-webkit-scrollbar {
            display: none; /* Chrome, Opera, Safari */
        }
        .scroll-x-hidden{
    margin-left: -20px;
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            white 20px,
            white 95%,
            transparent
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            white 20px,
            white 95%,
            transparent
        );
        padding-left: 20px;
        padding-right: 5%;
}

    @media (min-width: 768px) {
        .scroll-x-hidden {
            -webkit-mask-image: none;
            mask-image: none;
        }
    }
    .c-tooltip-base{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
    
    .theme-accessibility-dark .c-tooltip-base {
        box-shadow: 0 0 0 2px #000;
    }
    .c-tooltip-base{
    position: relative;
    z-index: 80;
        width: -moz-max-content;
        width: max-content;
}
    .c-tag{
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    line-height: 170%;
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-width: 1px;
        white-space: nowrap;
}

        .c-tag .c-icon {
            height: 16px;
            width: 16px;
            margin-right: 8px;
            filter: var(--textColor6-filter);
        }

        .c-tag.--small{
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    line-height: 150%;
}

        .c-tag.--compact{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 130%;
}

        .c-tag.--practice-mode{
    --tw-border-opacity: 1;
    border-color: rgb(19 11 67 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(92 85 137 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
}

            .c-tag.--practice-mode .c-icon {
                filter: var(--white-filter);
            }
.label-large{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
}
.text-h0{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    .text-h0{
        font-size: 40px;
    }
}
@media (min-width: 1024px){

    .text-h0{
        font-size: 48px;
    }
}
.text-h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    .text-h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    .text-h1{
        font-size: 39px;
    }
}
.text-h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .text-h2{
        font-size: 31px;
    }
}
.text-h3{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .text-h3{
        font-size: 24px;
    }
}
.text-h4{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
}
.text-h5{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
.text-h5-mono{
    font-size: 18px;
    line-height: 150%;
    color: var(--textColor1);
    font-family: Source Code Pro, monospace;
    font-weight: 700;
}
.text-h6{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
}
.text-p-small{
    line-height: 160%;
}
.text-p-small a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-small strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-small{
    font-size: 14px;
}
.text-p-base{
    line-height: 160%;
}
.text-p-base a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-base strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-base{
    font-size: 16px;
}
.text-p-large{
    line-height: 160%;
}
.text-p-large a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-large strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-large{
    font-size: 18px;
    line-height: 150%;
}
.text-p-xlarge{
    line-height: 160%;
}
.text-p-xlarge a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-xlarge strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-xlarge{
    font-size: 18px;
}
@media (min-width: 640px){

    .text-p-xlarge{
        font-size: 20px;
    }
}
.text-p-2xlarge{
    line-height: 160%;
}
.text-p-2xlarge a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-2xlarge strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-2xlarge{
    font-size: 20px;
}
@media (min-width: 640px){

    .text-p-2xlarge{
        font-size: 22px;
    }
}
@media (min-width: 768px){

    .text-p-2xlarge{
        font-size: 24px;
    }
}
.text-p-3xlarge{
    line-height: 160%;
}
.text-p-3xlarge a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.text-p-3xlarge strong{
    font-weight: 500;
    color: var(--textColor2);
}
.text-p-3xlarge{
    font-size: 20px;
}
@media (min-width: 640px){

    .text-p-3xlarge{
        font-size: 24px;
    }
}
@media (min-width: 768px){

    .text-p-3xlarge{
        font-size: 28px;
    }
}
.text-prose{
    font-size: 18px;
    line-height: 150%;
}
.text-label-code-caps{
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 138%;
    color: var(--textColor3);
}
.text-label-timestamp{
    font-size: 14px;
    line-height: 150%;
    color: var(--textColor6);
}
.text-label{
    display: block;
    font-family: Source Code Pro, monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 150%;
    color: var(--textColor2);
}
.text-radio-essential{
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor1);
}
.text-gradient {
        color: #6a01ff;
        background: -webkit-linear-gradient(
            var(--textGradientStart),
            var(--textGradientEnd)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
.text-balance {
        text-wrap: balance;
    }
.filter-twitter {
        filter: var(--filter-twitter);
    }
.filter-white,
    .white-filter {
        filter: var(--white-filter);
    }
.filter-lightGold {
        filter: var(--lightGold-filter);
    }
.filter-lightBlue {
        filter: invert(25%) sepia(55%) saturate(3687%) hue-rotate(223deg)
            brightness(94%) contrast(93%);
    }
.filter-textColor1 {
        filter: var(--textColor1-filter);
    }
.filter-textColor2 {
        filter: var(--textColor2-filter);
    }
.filter-textColor5 {
        filter: var(--textColor5-filter);
    }
.filter-textColor6 {
        filter: var(--textColor6-filter);
    }
.filter-textColor7 {
        filter: var(--textColor7-filter);
    }
.\!filter-warning {
        filter: invert(67%) sepia(54%) saturate(5119%) hue-rotate(8deg)
            brightness(98%) contrast(101%) !important;
    }
.filter-warning {
        filter: invert(67%) sepia(54%) saturate(5119%) hue-rotate(8deg)
            brightness(98%) contrast(101%);
    }
.\!filter-purple {
        filter: var(--purple-filter) !important;
    }
.filter-purple {
        filter: var(--purple-filter);
    }
/* 2E8C70 */
/* #FFD38F */
.filter-yellowPrompt {
        filter: invert(81%) sepia(28%) saturate(678%) hue-rotate(336deg)
            brightness(105%) contrast(101%);
    }
/* #F0F3F9 */
/* #9D8DF7 */
/* #A9A6BD */
.filter-prominentLinkColor {
        filter: var(--c-prominent-link-icon-filter);
    }
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none{
    pointer-events: none;
}
.visible{
    visibility: visible;
}
.invisible{
    visibility: hidden;
}
.collapse{
    visibility: collapse;
}
.static{
    position: static;
}
.fixed{
    position: fixed;
}
.\!absolute{
    position: absolute !important;
}
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
.sticky{
    position: sticky;
}
.inset-0{
    inset: 0px;
}
.-top-10{
    top: -10px;
}
.-top-24{
    top: -24px;
}
.bottom-0{
    bottom: 0px;
}
.bottom-\[25\%\]{
    bottom: 25%;
}
.left-0{
    left: 0px;
}
.left-1\/2{
    left: 50%;
}
.left-\[-40px\]{
    left: -40px;
}
.left-\[-45px\]{
    left: -45px;
}
.left-\[0px\]{
    left: 0px;
}
.left-\[50\%\]{
    left: 50%;
}
.right-0{
    right: 0px;
}
.right-\[-12px\]{
    right: -12px;
}
.right-\[-7px\]{
    right: -7px;
}
.right-\[12px\]{
    right: 12px;
}
.right-\[20px\]{
    right: 20px;
}
.right-\[2px\]{
    right: 2px;
}
.top-0{
    top: 0px;
}
.top-\[-12px\]{
    top: -12px;
}
.top-\[-7px\]{
    top: -7px;
}
.top-\[0px\]{
    top: 0px;
}
.top-\[15px\]{
    top: 15px;
}
.top-\[20px\]{
    top: 20px;
}
.top-\[2px\]{
    top: 2px;
}
.top-\[40px\]{
    top: 40px;
}
.top-\[65px\]{
    top: 65px;
}
.isolate{
    isolation: isolate;
}
.z-1{
    z-index: 1;
}
.z-\[100\]{
    z-index: 100;
}
.z-\[2\]{
    z-index: 2;
}
.z-overlay{
    z-index: 10;
}
.z-tooltip{
    z-index: 80;
}
.col-span-1{
    grid-column: span 1 / span 1;
}
.col-span-2{
    grid-column: span 2 / span 2;
}
.col-span-3{
    grid-column: span 3 / span 3;
}
.col-span-4{
    grid-column: span 4 / span 4;
}
.row-span-1{
    grid-row: span 1 / span 1;
}
.row-span-2{
    grid-row: span 2 / span 2;
}
.\!m-0{
    margin: 0px !important;
}
.m-20{
    margin: 20px;
}
.m-6{
    margin: 6px;
}
.m-\[50px\]{
    margin: 50px;
}
.m-auto{
    margin: auto;
}
.\!mx-0{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.-mx-24{
    margin-left: -24px;
    margin-right: -24px;
}
.-mx-48{
    margin-left: -48px;
    margin-right: -48px;
}
.mx-24{
    margin-left: 24px;
    margin-right: 24px;
}
.mx-\[-4px\]{
    margin-left: -4px;
    margin-right: -4px;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.my-10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.my-12{
    margin-top: 12px;
    margin-bottom: 12px;
}
.my-16{
    margin-top: 16px;
    margin-bottom: 16px;
}
.my-20{
    margin-top: 20px;
    margin-bottom: 20px;
}
.my-24{
    margin-top: 24px;
    margin-bottom: 24px;
}
.my-32{
    margin-top: 32px;
    margin-bottom: 32px;
}
.my-40{
    margin-top: 40px;
    margin-bottom: 40px;
}
.my-48{
    margin-top: 48px;
    margin-bottom: 48px;
}
.my-64{
    margin-top: 64px;
    margin-bottom: 64px;
}
.my-auto{
    margin-top: auto;
    margin-bottom: auto;
}
.\!mb-0{
    margin-bottom: 0px !important;
}
.\!mb-16{
    margin-bottom: 16px !important;
}
.\!mb-20{
    margin-bottom: 20px !important;
}
.\!mb-24{
    margin-bottom: 24px !important;
}
.\!mb-32{
    margin-bottom: 32px !important;
}
.\!mb-4{
    margin-bottom: 4px !important;
}
.\!mb-6{
    margin-bottom: 6px !important;
}
.\!mb-8{
    margin-bottom: 8px !important;
}
.\!ml-0{
    margin-left: 0px !important;
}
.\!ml-auto{
    margin-left: auto !important;
}
.\!mr-4{
    margin-right: 4px !important;
}
.\!mt-0{
    margin-top: 0px !important;
}
.-mb-16{
    margin-bottom: -16px;
}
.-mb-32{
    margin-bottom: -32px;
}
.-mr-32{
    margin-right: -32px;
}
.-mt-\[60px\]{
    margin-top: -60px;
}
.mb-0{
    margin-bottom: 0px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-12{
    margin-bottom: 12px;
}
.mb-16{
    margin-bottom: 16px;
}
.mb-2{
    margin-bottom: 2px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-24{
    margin-bottom: 24px;
}
.mb-28{
    margin-bottom: 28px;
}
.mb-32{
    margin-bottom: 32px;
}
.mb-36{
    margin-bottom: 36px;
}
.mb-4{
    margin-bottom: 4px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-44{
    margin-bottom: 44px;
}
.mb-48{
    margin-bottom: 48px;
}
.mb-56{
    margin-bottom: 56px;
}
.mb-6{
    margin-bottom: 6px;
}
.mb-60{
    margin-bottom: 60px;
}
.mb-64{
    margin-bottom: 64px;
}
.mb-8{
    margin-bottom: 8px;
}
.mb-80{
    margin-bottom: 80px;
}
.mb-96{
    margin-bottom: 96px;
}
.mb-\[-130px\]{
    margin-bottom: -130px;
}
.mb-\[-16px\]{
    margin-bottom: -16px;
}
.mb-\[48px\]{
    margin-bottom: 48px;
}
.mb-auto{
    margin-bottom: auto;
}
.ml-0{
    margin-left: 0px;
}
.ml-10{
    margin-left: 10px;
}
.ml-12{
    margin-left: 12px;
}
.ml-16{
    margin-left: 16px;
}
.ml-20{
    margin-left: 20px;
}
.ml-24{
    margin-left: 24px;
}
.ml-4{
    margin-left: 4px;
}
.ml-48{
    margin-left: 48px;
}
.ml-8{
    margin-left: 8px;
}
.ml-80{
    margin-left: 80px;
}
.ml-\[-15px\]{
    margin-left: -15px;
}
.ml-\[45px\]{
    margin-left: 45px;
}
.ml-auto{
    margin-left: auto;
}
.mr-0{
    margin-right: 0px;
}
.mr-10{
    margin-right: 10px;
}
.mr-12{
    margin-right: 12px;
}
.mr-16{
    margin-right: 16px;
}
.mr-20{
    margin-right: 20px;
}
.mr-24{
    margin-right: 24px;
}
.mr-32{
    margin-right: 32px;
}
.mr-4{
    margin-right: 4px;
}
.mr-40{
    margin-right: 40px;
}
.mr-48{
    margin-right: 48px;
}
.mr-6{
    margin-right: 6px;
}
.mr-60{
    margin-right: 60px;
}
.mr-64{
    margin-right: 64px;
}
.mr-8{
    margin-right: 8px;
}
.mr-80{
    margin-right: 80px;
}
.mr-84{
    margin-right: 84px;
}
.mr-\[-12px\]{
    margin-right: -12px;
}
.mr-\[-14px\]{
    margin-right: -14px;
}
.mr-\[-24px\]{
    margin-right: -24px;
}
.mr-\[-32px\]{
    margin-right: -32px;
}
.mr-\[-8px\]{
    margin-right: -8px;
}
.mr-\[16px\]{
    margin-right: 16px;
}
.mr-auto{
    margin-right: auto;
}
.mt-0{
    margin-top: 0px;
}
.mt-10{
    margin-top: 10px;
}
.mt-12{
    margin-top: 12px;
}
.mt-16{
    margin-top: 16px;
}
.mt-20{
    margin-top: 20px;
}
.mt-24{
    margin-top: 24px;
}
.mt-28{
    margin-top: 28px;
}
.mt-32{
    margin-top: 32px;
}
.mt-4{
    margin-top: 4px;
}
.mt-40{
    margin-top: 40px;
}
.mt-48{
    margin-top: 48px;
}
.mt-6{
    margin-top: 6px;
}
.mt-64{
    margin-top: 64px;
}
.mt-8{
    margin-top: 8px;
}
.mt-\[-16px\]{
    margin-top: -16px;
}
.mt-\[-64px\]{
    margin-top: -64px;
}
.mt-\[-7px\]{
    margin-top: -7px;
}
.mt-\[100px\]{
    margin-top: 100px;
}
.mt-\[2px\]{
    margin-top: 2px;
}
.mt-\[3px\]{
    margin-top: 3px;
}
.mt-auto{
    margin-top: auto;
}
.\!block{
    display: block !important;
}
.block{
    display: block;
}
.inline-block{
    display: inline-block;
}
.inline{
    display: inline;
}
.\!flex{
    display: flex !important;
}
.flex{
    display: flex;
}
.inline-flex{
    display: inline-flex;
}
.table{
    display: table;
}
.table-caption{
    display: table-caption;
}
.table-cell{
    display: table-cell;
}
.table-column{
    display: table-column;
}
.table-column-group{
    display: table-column-group;
}
.table-footer-group{
    display: table-footer-group;
}
.table-header-group{
    display: table-header-group;
}
.table-row-group{
    display: table-row-group;
}
.table-row{
    display: table-row;
}
.grid{
    display: grid;
}
.contents{
    display: contents;
}
.list-item{
    display: list-item;
}
.hidden{
    display: none;
}
.\!h-\[12px\]{
    height: 12px !important;
}
.\!h-\[192px\]{
    height: 192px !important;
}
.\!h-\[32px\]{
    height: 32px !important;
}
.\!h-\[40px\]{
    height: 40px !important;
}
.\!h-\[65vh\]{
    height: 65vh !important;
}
.h-100{
    height: 100%;
}
.h-32{
    height: 32px;
}
.h-48{
    height: 48px;
}
.h-\[100px\]{
    height: 100px;
}
.h-\[10px\]{
    height: 10px;
}
.h-\[12\%\]{
    height: 12%;
}
.h-\[128px\]{
    height: 128px;
}
.h-\[12px\]{
    height: 12px;
}
.h-\[13px\]{
    height: 13px;
}
.h-\[14px\]{
    height: 14px;
}
.h-\[158px\]{
    height: 158px;
}
.h-\[15px\]{
    height: 15px;
}
.h-\[168px\]{
    height: 168px;
}
.h-\[16px\]{
    height: 16px;
}
.h-\[180px\]{
    height: 180px;
}
.h-\[190px\]{
    height: 190px;
}
.h-\[200px\]{
    height: 200px;
}
.h-\[20px\]{
    height: 20px;
}
.h-\[220px\]{
    height: 220px;
}
.h-\[22px\]{
    height: 22px;
}
.h-\[24px\]{
    height: 24px;
}
.h-\[26px\]{
    height: 26px;
}
.h-\[280px\]{
    height: 280px;
}
.h-\[284px\]{
    height: 284px;
}
.h-\[32px\]{
    height: 32px;
}
.h-\[36px\]{
    height: 36px;
}
.h-\[38px\]{
    height: 38px;
}
.h-\[400px\]{
    height: 400px;
}
.h-\[40px\]{
    height: 40px;
}
.h-\[42px\]{
    height: 42px;
}
.h-\[45px\]{
    height: 45px;
}
.h-\[480px\]{
    height: 480px;
}
.h-\[48px\]{
    height: 48px;
}
.h-\[600px\]{
    height: 600px;
}
.h-\[60px\]{
    height: 60px;
}
.h-\[64px\]{
    height: 64px;
}
.h-\[67px\]{
    height: 67px;
}
.h-\[68px\]{
    height: 68px;
}
.h-\[6px\]{
    height: 6px;
}
.h-\[70px\]{
    height: 70px;
}
.h-\[76px\]{
    height: 76px;
}
.h-\[80px\]{
    height: 80px;
}
.h-\[8px\]{
    height: 8px;
}
.h-\[90px\]{
    height: 90px;
}
.h-\[96px\]{
    height: 96px;
}
.h-fill{
    height: 100%;
}
.h-full{
    height: 100%;
}
.max-h-\[180px\]{
    max-height: 180px;
}
.max-h-\[224px\]{
    max-height: 224px;
}
.max-h-\[800px\]{
    max-height: 800px;
}
.max-h-\[90vh\]{
    max-height: 90vh;
}
.min-h-\[175px\]{
    min-height: 175px;
}
.min-h-\[50vh\]{
    min-height: 50vh;
}
.min-h-\[68px\]{
    min-height: 68px;
}
.\!w-\[100\%\]{
    width: 100% !important;
}
.\!w-\[12px\]{
    width: 12px !important;
}
.\!w-\[192px\]{
    width: 192px !important;
}
.\!w-\[20px\]{
    width: 20px !important;
}
.\!w-\[32px\]{
    width: 32px !important;
}
.\!w-\[40px\]{
    width: 40px !important;
}
.\!w-\[600px\]{
    width: 600px !important;
}
.\!w-\[80\%\]{
    width: 80% !important;
}
.\!w-auto{
    width: auto !important;
}
.\!w-fit{
    width: -moz-fit-content !important;
    width: fit-content !important;
}
.w-1-2{
    width: 50%;
}
.w-1-3{
    width: 33.3%;
}
.w-100{
    width: 100%;
}
.w-\[100\%\]{
    width: 100%;
}
.w-\[100px\]{
    width: 100px;
}
.w-\[10px\]{
    width: 10px;
}
.w-\[12\%\]{
    width: 12%;
}
.w-\[125px\]{
    width: 125px;
}
.w-\[12px\]{
    width: 12px;
}
.w-\[140px\]{
    width: 140px;
}
.w-\[14px\]{
    width: 14px;
}
.w-\[15px\]{
    width: 15px;
}
.w-\[160px\]{
    width: 160px;
}
.w-\[16px\]{
    width: 16px;
}
.w-\[180px\]{
    width: 180px;
}
.w-\[190px\]{
    width: 190px;
}
.w-\[200\%\]{
    width: 200%;
}
.w-\[200px\]{
    width: 200px;
}
.w-\[20px\]{
    width: 20px;
}
.w-\[220px\]{
    width: 220px;
}
.w-\[24px\]{
    width: 24px;
}
.w-\[250px\]{
    width: 250px;
}
.w-\[25px\]{
    width: 25px;
}
.w-\[26px\]{
    width: 26px;
}
.w-\[280px\]{
    width: 280px;
}
.w-\[30px\]{
    width: 30px;
}
.w-\[32px\]{
    width: 32px;
}
.w-\[350px\]{
    width: 350px;
}
.w-\[36px\]{
    width: 36px;
}
.w-\[40px\]{
    width: 40px;
}
.w-\[45\%\]{
    width: 45%;
}
.w-\[460px\]{
    width: 460px;
}
.w-\[48px\]{
    width: 48px;
}
.w-\[50\%\]{
    width: 50%;
}
.w-\[564px\]{
    width: 564px;
}
.w-\[640px\]{
    width: 640px;
}
.w-\[64px\]{
    width: 64px;
}
.w-\[68px\]{
    width: 68px;
}
.w-\[70\%\]{
    width: 70%;
}
.w-\[72px\]{
    width: 72px;
}
.w-\[800px\]{
    width: 800px;
}
.w-\[80px\]{
    width: 80px;
}
.w-\[8px\]{
    width: 8px;
}
.w-\[96px\]{
    width: 96px;
}
.w-arbitary{
    width: 1px;
}
.w-fill{
    width: 100%;
}
.w-fit{
    width: -moz-fit-content;
    width: fit-content;
}
.w-full{
    width: 100%;
}
.min-w-\[140px\]{
    min-width: 140px;
}
.min-w-\[6px\]{
    min-width: 6px;
}
.min-w-\[800px\]{
    min-width: 800px;
}
.\!max-w-\[420px\]{
    max-width: 420px !important;
}
.max-w-\[100\%\]{
    max-width: 100%;
}
.max-w-\[150px\]{
    max-width: 150px;
}
.max-w-\[200px\]{
    max-width: 200px;
}
.max-w-\[370px\]{
    max-width: 370px;
}
.max-w-\[380px\]{
    max-width: 380px;
}
.max-w-\[40\%\]{
    max-width: 40%;
}
.max-w-\[400px\]{
    max-width: 400px;
}
.max-w-\[420px\]{
    max-width: 420px;
}
.max-w-\[443px\]{
    max-width: 443px;
}
.max-w-\[450px\]{
    max-width: 450px;
}
.max-w-\[500px\]{
    max-width: 500px;
}
.max-w-\[520px\]{
    max-width: 520px;
}
.max-w-\[540px\]{
    max-width: 540px;
}
.max-w-\[550px\]{
    max-width: 550px;
}
.max-w-\[570px\]{
    max-width: 570px;
}
.max-w-\[600px\]{
    max-width: 600px;
}
.max-w-\[620px\]{
    max-width: 620px;
}
.max-w-\[650px\]{
    max-width: 650px;
}
.max-w-\[660px\]{
    max-width: 660px;
}
.max-w-\[700px\]{
    max-width: 700px;
}
.max-w-\[750px\]{
    max-width: 750px;
}
.max-w-\[780px\]{
    max-width: 780px;
}
.max-w-\[782px\]{
    max-width: 782px;
}
.max-w-\[800px\]{
    max-width: 800px;
}
.max-w-\[820px\]{
    max-width: 820px;
}
.max-w-\[850px\]{
    max-width: 850px;
}
.max-w-\[860px\]{
    max-width: 860px;
}
.max-w-\[927px\]{
    max-width: 927px;
}
.max-w-\[940px\]{
    max-width: 940px;
}
.flex-shrink{
    flex-shrink: 1;
}
.flex-shrink-0{
    flex-shrink: 0;
}
.shrink{
    flex-shrink: 1;
}
.shrink-0{
    flex-shrink: 0;
}
.shrink-\[3\]{
    flex-shrink: 3;
}
.\!flex-grow-0{
    flex-grow: 0 !important;
}
.flex-grow{
    flex-grow: 1;
}
.grow{
    flex-grow: 1;
}
.border-collapse{
    border-collapse: collapse;
}
.-translate-x-1\/2{
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-\[0\.5px\]{
    --tw-translate-y: -0.5px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-\[100\%\]{
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-\[calc\(100\%\+8px\)\]{
    --tw-translate-y: calc(calc(100% + 8px) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full{
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\]{
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\]{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90{
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-x-\[-1\]{
    --tw-scale-x: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-fadeIn{
    animation: fadeIn 0.2s forwards;
}
.animate-fadeOut{
    animation: fadeOut 0.2s forwards;
}
@keyframes pulse{

    50%{
        opacity: .5;
    }
}
.animate-pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-slideIn{
    animation: slideIn 0.2s forwards;
}
.animate-slideOut{
    animation: slideOut 0.2s forwards;
}
@keyframes spin{

    to{
        transform: rotate(360deg);
    }
}
.animate-spin{
    animation: spin 2s linear infinite;
}
@keyframes spin{

    to{
        transform: rotate(360deg);
    }
}
.animate-spin-slow{
    animation: spin 3s linear infinite;
}
.cursor-col-resize{
    cursor: col-resize;
}
.cursor-default{
    cursor: default;
}
.cursor-not-allowed{
    cursor: not-allowed;
}
.cursor-pointer{
    cursor: pointer;
}
.cursor-row-resize{
    cursor: row-resize;
}
.select-none{
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.resize{
    resize: both;
}
.list-decimal{
    list-style-type: decimal;
}
.list-disc{
    list-style-type: disc;
}
.grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-2-auto{
    grid-template-columns: repeat(2, auto);
}
.grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-\[48px_auto\]{
    grid-template-columns: 48px auto;
}
.grid-rows-\[24px_24px\]{
    grid-template-rows: 24px 24px;
}
.flex-row{
    flex-direction: row;
}
.flex-col{
    flex-direction: column;
}
.flex-col-reverse{
    flex-direction: column-reverse;
}
.flex-wrap{
    flex-wrap: wrap;
}
.place-items-start{
    place-items: start;
}
.place-items-center{
    place-items: center;
}
.content-stretch{
    align-content: stretch;
}
.items-start{
    align-items: flex-start;
}
.items-end{
    align-items: flex-end;
}
.items-center{
    align-items: center;
}
.items-stretch{
    align-items: stretch;
}
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.gap-0{
    gap: 0px;
}
.gap-10{
    gap: 10px;
}
.gap-12{
    gap: 12px;
}
.gap-128{
    gap: 128px;
}
.gap-16{
    gap: 16px;
}
.gap-2{
    gap: 2px;
}
.gap-20{
    gap: 20px;
}
.gap-24{
    gap: 24px;
}
.gap-32{
    gap: 32px;
}
.gap-4{
    gap: 4px;
}
.gap-40{
    gap: 40px;
}
.gap-48{
    gap: 48px;
}
.gap-56{
    gap: 56px;
}
.gap-6{
    gap: 6px;
}
.gap-64{
    gap: 64px;
}
.gap-8{
    gap: 8px;
}
.gap-\[80px\]{
    gap: 80px;
}
.gap-x-16{
    -moz-column-gap: 16px;
         column-gap: 16px;
}
.gap-x-32{
    -moz-column-gap: 32px;
         column-gap: 32px;
}
.gap-x-4{
    -moz-column-gap: 4px;
         column-gap: 4px;
}
.gap-x-40{
    -moz-column-gap: 40px;
         column-gap: 40px;
}
.gap-x-80{
    -moz-column-gap: 80px;
         column-gap: 80px;
}
.gap-x-96{
    -moz-column-gap: 96px;
         column-gap: 96px;
}
.gap-y-24{
    row-gap: 24px;
}
.gap-y-32{
    row-gap: 32px;
}
.gap-y-48{
    row-gap: 48px;
}
.gap-y-8{
    row-gap: 8px;
}
.place-self-start{
    place-self: start;
}
.place-self-center{
    place-self: center;
}
.place-self-stretch{
    place-self: stretch;
}
.self-start{
    align-self: flex-start;
}
.self-end{
    align-self: flex-end;
}
.self-center{
    align-self: center;
}
.self-stretch{
    align-self: stretch;
}
.overflow-auto{
    overflow: auto;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-x-auto{
    overflow-x: auto;
}
.overflow-y-auto{
    overflow-y: auto;
}
.overflow-y-hidden{
    overflow-y: hidden;
}
.truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap{
    white-space: nowrap;
}
.whitespace-pre{
    white-space: pre;
}
.text-balance{
    text-wrap: balance;
}
.\!rounded-100{
    border-radius: 100px !important;
}
.\!rounded-24{
    border-radius: 24px !important;
}
.\!rounded-8{
    border-radius: 8px !important;
}
.rounded-100{
    border-radius: 100px;
}
.rounded-12{
    border-radius: 12px;
}
.rounded-16{
    border-radius: 16px;
}
.rounded-24{
    border-radius: 24px;
}
.rounded-3{
    border-radius: 3px;
}
.rounded-32{
    border-radius: 32px;
}
.rounded-5{
    border-radius: 5px;
}
.rounded-8{
    border-radius: 8px;
}
.rounded-\[1px\]{
    border-radius: 1px;
}
.rounded-\[5px\]{
    border-radius: 5px;
}
.rounded-circle{
    border-radius: 100%;
}
.\!border-0{
    border-width: 0 !important;
}
.\!border-1{
    border-width: 1px !important;
}
.border-1{
    border-width: 1px;
}
.border-2{
    border-width: 2px;
}
.border-4{
    border-width: 4px;
}
.border-\[1px\]{
    border-width: 1px;
}
.border-\[8px\]{
    border-width: 8px;
}
.\!border-l-1{
    border-left-width: 1px !important;
}
.border-b-1{
    border-bottom-width: 1px;
}
.border-b-2{
    border-bottom-width: 2px;
}
.border-l-1{
    border-left-width: 1px;
}
.border-l-3{
    border-left-width: 3px;
}
.border-l-6{
    border-left-width: 6px;
}
.border-t-1{
    border-top-width: 1px;
}
.border-t-2{
    border-top-width: 2px;
}
.border-t-3{
    border-top-width: 3px;
}
.border-t-4{
    border-top-width: 4px;
}
.border-none{
    border-style: none;
}
.\!border-bootcamp-fail-dark{
    --tw-border-opacity: 1 !important;
    border-color: rgb(255 87 87 / var(--tw-border-opacity, 1)) !important;
}
.\!border-borderColor5{
    border-color: var(--borderColor5) !important;
}
.\!border-orange{
    --tw-border-opacity: 1 !important;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1)) !important;
}
.\!border-transparent{
    border-color: transparent !important;
}
.border-\[\#aaa\]{
    --tw-border-opacity: 1;
    border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));
}
.border-backgroundColorNavDropdown{
    border-color: var(--backgroundColorNavDropdown);
}
.border-bootcamp-fail-dark{
    --tw-border-opacity: 1;
    border-color: rgb(255 87 87 / var(--tw-border-opacity, 1));
}
.border-bootcamp-purple{
    --tw-border-opacity: 1;
    border-color: rgb(112 41 245 / var(--tw-border-opacity, 1));
}
.border-borderColor5{
    border-color: var(--borderColor5);
}
.border-borderColor6{
    border-color: var(--borderColor6);
}
.border-borderColor7{
    border-color: var(--borderColor7);
}
.border-borderColor8{
    border-color: var(--borderColor8);
}
.border-borderLight{
    --tw-border-opacity: 1;
    border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
}
.border-borderLight2{
    --tw-border-opacity: 1;
    border-color: rgb(213 216 228 / var(--tw-border-opacity, 1));
}
.border-buttonBorderColor2{
    border-color: var(--buttonBorderColor2);
}
.border-darkGreen{
    --tw-border-opacity: 1;
    border-color: rgb(67 181 147 / var(--tw-border-opacity, 1));
}
.border-lightGold{
    --tw-border-opacity: 1;
    border-color: rgb(255 211 143 / var(--tw-border-opacity, 1));
}
.border-lightGray{
    --tw-border-opacity: 1;
    border-color: rgb(234 236 243 / var(--tw-border-opacity, 1));
}
.border-orange{
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
}
.border-primaryBtnBorder{
    --tw-border-opacity: 1;
    border-color: rgb(19 11 67 / var(--tw-border-opacity, 1));
}
.border-prominentLinkColor{
    border-color: var(--c-prominent-link-color);
}
.border-purple{
    --tw-border-opacity: 1;
    border-color: rgb(96 79 205 / var(--tw-border-opacity, 1));
}
.border-red{
    --tw-border-opacity: 1;
    border-color: rgb(235 87 87 / var(--tw-border-opacity, 1));
}
.border-successColor{
    border-color: var(--successColor);
}
.border-textColor1{
    border-color: var(--textColor1);
}
.border-transparent{
    border-color: transparent;
}
.border-veryLightBlue{
    --tw-border-opacity: 1;
    border-color: rgb(225 235 255 / var(--tw-border-opacity, 1));
}
.border-white{
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-l-borderColor4{
    border-left-color: var(--borderColor4);
}
.\!bg-\[\#eee\]{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-bootcamp-fail-light{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 247 247 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-disabledLight{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(224 223 234 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-discordBlue{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(88 101 242 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#221E31\]{
    --tw-bg-opacity: 1;
    background-color: rgb(34 30 49 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5042AD\]{
    --tw-bg-opacity: 1;
    background-color: rgb(80 66 173 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--backgroundColorConceptMastered\)\]{
    background-color: var(--backgroundColorConceptMastered);
}
.bg-\[var\(--backgroundColorImpactPage\)\]{
    background-color: var(--backgroundColorImpactPage);
}
.bg-alert{
    --tw-bg-opacity: 1;
    background-color: rgb(216 80 80 / var(--tw-bg-opacity, 1));
}
.bg-backgroundColorA{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
.bg-backgroundColorB{
    background-color: var(--backgroundColorB);
}
.bg-backgroundColorD{
    background-color: var(--backgroundColorD);
}
.bg-backgroundColorE{
    background-color: var(--backgroundColorE);
}
.bg-backgroundColorF{
    background-color: var(--backgroundColorF);
}
.bg-backgroundColorG{
    background-color: var(--backgroundColorG);
}
.bg-backgroundColorH{
    background-color: var(--backgroundColorH);
}
.bg-backgroundColorI{
    background-color: var(--backgroundColorI);
}
.bg-bgCAlert{
    background-color: var(--backgroundColorCAlert);
}
.bg-blue-500{
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-bootcamp-light-purple{
    --tw-bg-opacity: 1;
    background-color: rgb(239 237 255 / var(--tw-bg-opacity, 1));
}
.bg-bootcamp-purple{
    --tw-bg-opacity: 1;
    background-color: rgb(112 41 245 / var(--tw-bg-opacity, 1));
}
.bg-borderLight{
    --tw-bg-opacity: 1;
    background-color: rgb(203 201 217 / var(--tw-bg-opacity, 1));
}
.bg-darkBlueViolet{
    --tw-bg-opacity: 1;
    background-color: rgb(40 35 57 / var(--tw-bg-opacity, 1));
}
.bg-darkSuccessGreen{
    --tw-bg-opacity: 1;
    background-color: rgb(46 140 112 / var(--tw-bg-opacity, 1));
}
.bg-darkThemeBackgroundColor{
    background-color: var(--darkThemeBackgroundColor);
}
.bg-disabledLight{
    --tw-bg-opacity: 1;
    background-color: rgb(224 223 234 / var(--tw-bg-opacity, 1));
}
.bg-evenLighterBlue{
    --tw-bg-opacity: 1;
    background-color: rgb(236 242 255 / var(--tw-bg-opacity, 1));
}
.bg-gray{
    --tw-bg-opacity: 1;
    background-color: rgb(169 166 189 / var(--tw-bg-opacity, 1));
}
.bg-gray-800{
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-lightGold{
    --tw-bg-opacity: 1;
    background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
}
.bg-lightOrange{
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 225 / var(--tw-bg-opacity, 1));
}
.bg-lightPurple{
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1));
}
.bg-lightPurpleDarkened{
    --tw-bg-opacity: 1;
    background-color: rgb(242 240 252 / var(--tw-bg-opacity, 1));
}
.bg-purple{
    --tw-bg-opacity: 1;
    background-color: rgb(96 79 205 / var(--tw-bg-opacity, 1));
}
.bg-red{
    --tw-bg-opacity: 1;
    background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1));
}
.bg-russianViolet{
    --tw-bg-opacity: 1;
    background-color: rgb(48 43 66 / var(--tw-bg-opacity, 1));
}
.bg-textColor1{
    background-color: var(--textColor1);
}
.bg-transparent{
    background-color: transparent;
}
.bg-unnamed15{
    --tw-bg-opacity: 1;
    background-color: rgb(240 243 249 / var(--tw-bg-opacity, 1));
}
.bg-veryLightBlue{
    --tw-bg-opacity: 1;
    background-color: rgb(225 235 255 / var(--tw-bg-opacity, 1));
}
.bg-veryLightBlue2{
    --tw-bg-opacity: 1;
    background-color: rgb(226 235 255 / var(--tw-bg-opacity, 1));
}
.bg-veryLightRed{
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 237 / var(--tw-bg-opacity, 1));
}
.bg-warning{
    --tw-bg-opacity: 1;
    background-color: rgb(228 137 0 / var(--tw-bg-opacity, 1));
}
.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-opacity-95{
    --tw-bg-opacity: 0.95;
}
.bg-\[url\(graphics\/impact-highlight\.svg\)\]{
    background-image: url("/assets/graphics/impact-highlight-d40d6d0a2b56ab059d525422ad6460a2d46aa9c7.svg");
}
.bg-\[url\(photos\/chart-bg\.jpg\)\]{
    background-image: url("/assets/photos/chart-bg-aebc5789d9121c149ca86024b7c6269bc04a64fc.jpg");
}
.bg-gradient-to-b{
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[var\(--backgroundColorA\)\]{
    --tw-gradient-from: var(--backgroundColorA) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gradientProgressBarA{
    --tw-gradient-from: #2200FF var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 0 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[var\(--backgroundColorE\)\]{
    --tw-gradient-to: var(--backgroundColorE) var(--tw-gradient-to-position);
}
.to-gradientProgressBarB{
    --tw-gradient-to: #9E00FF var(--tw-gradient-to-position);
}
.bg-\[length\:100\%_100\%\]{
    background-size: 100% 100%;
}
.bg-\[length\:90px\]{
    background-size: 90px;
}
.bg-cover{
    background-size: cover;
}
.bg-center{
    background-position: center;
}
.bg-repeat{
    background-repeat: repeat;
}
.\!p-0{
    padding: 0px !important;
}
.\!p-16{
    padding: 16px !important;
}
.\!p-48{
    padding: 48px !important;
}
.p-0{
    padding: 0px;
}
.p-12{
    padding: 12px;
}
.p-16{
    padding: 16px;
}
.p-20{
    padding: 20px;
}
.p-24{
    padding: 24px;
}
.p-32{
    padding: 32px;
}
.p-4{
    padding: 4px;
}
.p-40{
    padding: 40px;
}
.p-8{
    padding: 8px;
}
.\!px-16{
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.\!px-24{
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.\!px-40{
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.\!px-6{
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.\!py-12{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.\!py-16{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.\!py-8{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.px-10{
    padding-left: 10px;
    padding-right: 10px;
}
.px-12{
    padding-left: 12px;
    padding-right: 12px;
}
.px-16{
    padding-left: 16px;
    padding-right: 16px;
}
.px-20{
    padding-left: 20px;
    padding-right: 20px;
}
.px-24{
    padding-left: 24px;
    padding-right: 24px;
}
.px-32{
    padding-left: 32px;
    padding-right: 32px;
}
.px-4{
    padding-left: 4px;
    padding-right: 4px;
}
.px-40{
    padding-left: 40px;
    padding-right: 40px;
}
.px-48{
    padding-left: 48px;
    padding-right: 48px;
}
.px-8{
    padding-left: 8px;
    padding-right: 8px;
}
.px-\[18px\]{
    padding-left: 18px;
    padding-right: 18px;
}
.px-\[21px\]{
    padding-left: 21px;
    padding-right: 21px;
}
.py-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.py-12{
    padding-top: 12px;
    padding-bottom: 12px;
}
.py-16{
    padding-top: 16px;
    padding-bottom: 16px;
}
.py-2{
    padding-top: 2px;
    padding-bottom: 2px;
}
.py-20{
    padding-top: 20px;
    padding-bottom: 20px;
}
.py-24{
    padding-top: 24px;
    padding-bottom: 24px;
}
.py-28{
    padding-top: 28px;
    padding-bottom: 28px;
}
.py-32{
    padding-top: 32px;
    padding-bottom: 32px;
}
.py-4{
    padding-top: 4px;
    padding-bottom: 4px;
}
.py-40{
    padding-top: 40px;
    padding-bottom: 40px;
}
.py-48{
    padding-top: 48px;
    padding-bottom: 48px;
}
.py-56{
    padding-top: 56px;
    padding-bottom: 56px;
}
.py-6{
    padding-top: 6px;
    padding-bottom: 6px;
}
.py-8{
    padding-top: 8px;
    padding-bottom: 8px;
}
.py-\[11px\]{
    padding-top: 11px;
    padding-bottom: 11px;
}
.py-\[12px\]{
    padding-top: 12px;
    padding-bottom: 12px;
}
.\!pb-28{
    padding-bottom: 28px !important;
}
.\!pb-8{
    padding-bottom: 8px !important;
}
.\!pl-16{
    padding-left: 16px !important;
}
.\!pt-0{
    padding-top: 0px !important;
}
.pb-0{
    padding-bottom: 0px;
}
.pb-12{
    padding-bottom: 12px;
}
.pb-128{
    padding-bottom: 128px;
}
.pb-16{
    padding-bottom: 16px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-24{
    padding-bottom: 24px;
}
.pb-32{
    padding-bottom: 32px;
}
.pb-40{
    padding-bottom: 40px;
}
.pb-48{
    padding-bottom: 48px;
}
.pb-56{
    padding-bottom: 56px;
}
.pb-6{
    padding-bottom: 6px;
}
.pb-60{
    padding-bottom: 60px;
}
.pb-64{
    padding-bottom: 64px;
}
.pb-80{
    padding-bottom: 80px;
}
.pb-\[46\.25\%\]{
    padding-bottom: 46.25%;
}
.pb-\[56\.25\%\]{
    padding-bottom: 56.25%;
}
.pl-12{
    padding-left: 12px;
}
.pl-16{
    padding-left: 16px;
}
.pl-20{
    padding-left: 20px;
}
.pl-24{
    padding-left: 24px;
}
.pl-40{
    padding-left: 40px;
}
.pl-8{
    padding-left: 8px;
}
.pl-\[70px\]{
    padding-left: 70px;
}
.pr-12{
    padding-right: 12px;
}
.pr-32{
    padding-right: 32px;
}
.pr-40{
    padding-right: 40px;
}
.pr-8{
    padding-right: 8px;
}
.pt-10{
    padding-top: 10px;
}
.pt-12{
    padding-top: 12px;
}
.pt-16{
    padding-top: 16px;
}
.pt-20{
    padding-top: 20px;
}
.pt-24{
    padding-top: 24px;
}
.pt-28{
    padding-top: 28px;
}
.pt-32{
    padding-top: 32px;
}
.pt-40{
    padding-top: 40px;
}
.pt-48{
    padding-top: 48px;
}
.pt-60{
    padding-top: 60px;
}
.pt-64{
    padding-top: 64px;
}
.pt-8{
    padding-top: 8px;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-justify{
    text-align: justify;
}
.align-top{
    vertical-align: top;
}
.\!font-body{
    font-family: var(--body-font) !important;
}
.font-body{
    font-family: var(--body-font);
}
.font-mono{
    font-family: Source Code Pro, monospace;
}
.font-spartan{
    font-family: League Spartan;
}
.\!text-14{
    font-size: 14px !important;
}
.\!text-15{
    font-size: 15px !important;
}
.\!text-16{
    font-size: 16px !important;
}
.\!text-17{
    font-size: 17px !important;
}
.\!text-18{
    font-size: 18px !important;
}
.\!text-\[16px\]{
    font-size: 16px !important;
}
.\!text-\[19px\]{
    font-size: 19px !important;
}
.\!text-\[24px\]{
    font-size: 24px !important;
}
.\!text-\[30px\]{
    font-size: 30px !important;
}
.\!text-\[44px\]{
    font-size: 44px !important;
}
.text-12{
    font-size: 12px;
}
.text-13{
    font-size: 13px;
}
.text-14{
    font-size: 14px;
}
.text-15{
    font-size: 15px;
}
.text-16{
    font-size: 16px;
}
.text-17{
    font-size: 17px;
}
.text-18{
    font-size: 18px;
}
.text-20{
    font-size: 20px;
}
.text-21{
    font-size: 21px;
}
.text-22{
    font-size: 22px;
}
.text-24{
    font-size: 24px;
}
.text-32{
    font-size: 32px;
}
.text-40{
    font-size: 40px;
}
.text-48{
    font-size: 48px;
}
.text-64{
    font-size: 64px;
}
.text-\[11px\]{
    font-size: 11px;
}
.text-\[13px\]{
    font-size: 13px;
}
.text-\[15px\]{
    font-size: 15px;
}
.text-\[18px\]{
    font-size: 18px;
}
.text-\[19px\]{
    font-size: 19px;
}
.text-\[25px\]{
    font-size: 25px;
}
.text-\[26px\]{
    font-size: 26px;
}
.text-\[60px\]{
    font-size: 60px;
}
.\!font-bold{
    font-weight: 700 !important;
}
.\!font-semibold{
    font-weight: 600 !important;
}
.font-bold{
    font-weight: 700;
}
.font-light{
    font-weight: 300;
}
.font-medium{
    font-weight: 500;
}
.font-normal{
    font-weight: 400;
}
.font-semibold{
    font-weight: 600;
}
.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}
.normal-case{
    text-transform: none;
}
.italic{
    font-style: italic;
}
.not-italic{
    font-style: normal;
}
.\!leading-150{
    line-height: 150% !important;
}
.leading-100{
    line-height: 100%;
}
.leading-120{
    line-height: 120%;
}
.leading-130{
    line-height: 130%;
}
.leading-140{
    line-height: 140%;
}
.leading-150{
    line-height: 150%;
}
.leading-160{
    line-height: 160%;
}
.leading-170{
    line-height: 170%;
}
.leading-\[140\%\]{
    line-height: 140%;
}
.leading-\[18px\]{
    line-height: 18px;
}
.leading-\[24px\]{
    line-height: 24px;
}
.leading-huge{
    line-height: 170%;
}
.leading-none{
    line-height: 1;
}
.leading-paragraph{
    line-height: 150%;
}
.leading-regular{
    line-height: 138%;
}
.leading-tight{
    line-height: 125%;
}
.\!text-textCAlertLabel{
    color: var(--textColorCAlertLabel) !important;
}
.\!text-textColor1{
    color: var(--textColor1) !important;
}
.\!text-white{
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#666\]{
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}
.text-\[\#777\]{
    --tw-text-opacity: 1;
    color: rgb(119 119 119 / var(--tw-text-opacity, 1));
}
.text-\[\#F0F3F9\]{
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
}
.text-\[\#F7B000\]{
    --tw-text-opacity: 1;
    color: rgb(247 176 0 / var(--tw-text-opacity, 1));
}
.text-\[\#cc5500\]{
    --tw-text-opacity: 1;
    color: rgb(204 85 0 / var(--tw-text-opacity, 1));
}
.text-\[\#fafaff\]{
    --tw-text-opacity: 1;
    color: rgb(250 250 255 / var(--tw-text-opacity, 1));
}
.text-\[blue\]{
    --tw-text-opacity: 1;
    color: rgb(0 0 255 / var(--tw-text-opacity, 1));
}
.text-adaptivePurple{
    color: var(--colorPurpleToBrightPurple);
}
.text-alert{
    --tw-text-opacity: 1;
    color: rgb(216 80 80 / var(--tw-text-opacity, 1));
}
.text-aliceBlue{
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
}
.text-backgroundColorA{
    --tw-text-opacity: 1;
    color: rgb(var(--backgroundColorA-RGB) / var(--tw-text-opacity, 1));
}
.text-backgroundColorH{
    color: var(--backgroundColorH);
}
.text-black{
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-bootcamp-fail-dark{
    --tw-text-opacity: 1;
    color: rgb(255 87 87 / var(--tw-text-opacity, 1));
}
.text-bootcamp-purple{
    --tw-text-opacity: 1;
    color: rgb(112 41 245 / var(--tw-text-opacity, 1));
}
.text-borderLight{
    --tw-text-opacity: 1;
    color: rgb(203 201 217 / var(--tw-text-opacity, 1));
}
.text-btnBorder{
    --tw-text-opacity: 1;
    color: rgb(92 85 137 / var(--tw-text-opacity, 1));
}
.text-danger{
    --tw-text-opacity: 1;
    color: rgb(216 80 80 / var(--tw-text-opacity, 1));
}
.text-darkSuccessGreen{
    --tw-text-opacity: 1;
    color: rgb(46 140 112 / var(--tw-text-opacity, 1));
}
.text-disabledLabel{
    --tw-text-opacity: 1;
    color: rgb(118 112 159 / var(--tw-text-opacity, 1));
}
.text-everyoneLovesAGreen{
    --tw-text-opacity: 1;
    color: rgb(52 159 127 / var(--tw-text-opacity, 1));
}
.text-gray{
    --tw-text-opacity: 1;
    color: rgb(169 166 189 / var(--tw-text-opacity, 1));
}
.text-gray-500{
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-healthyGreen{
    --tw-text-opacity: 1;
    color: rgb(0 181 0 / var(--tw-text-opacity, 1));
}
.text-lightBlue{
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
.text-lightGold{
    --tw-text-opacity: 1;
    color: rgb(255 211 143 / var(--tw-text-opacity, 1));
}
.text-linkColor{
    color: var(--linkColor);
}
.text-midnightBlue{
    --tw-text-opacity: 1;
    color: rgb(19 11 67 / var(--tw-text-opacity, 1));
}
.text-orange{
    --tw-text-opacity: 1;
    color: rgb(246 150 5 / var(--tw-text-opacity, 1));
}
.text-primary-blue{
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
.text-prominentLinkColor{
    color: var(--c-prominent-link-color);
}
.text-purple{
    --tw-text-opacity: 1;
    color: rgb(96 79 205 / var(--tw-text-opacity, 1));
}
.text-red{
    --tw-text-opacity: 1;
    color: rgb(235 87 87 / var(--tw-text-opacity, 1));
}
.text-red-500{
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-700{
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-textCAlert{
    color: var(--textColorCAlert);
}
.text-textCAlertLabel{
    color: var(--textColorCAlertLabel);
}
.text-textColor1{
    color: var(--textColor1);
}
.text-textColor1NoDark{
    color: var(--textColor1-no-dark);
}
.text-textColor2{
    color: var(--textColor2);
}
.text-textColor5{
    color: var(--textColor5);
}
.text-textColor6{
    color: var(--textColor6);
}
.text-textColor7{
    color: var(--textColor7);
}
.text-warning{
    --tw-text-opacity: 1;
    color: rgb(228 137 0 / var(--tw-text-opacity, 1));
}
.text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
    text-decoration-line: underline;
}
.line-through{
    text-decoration-line: line-through;
}
.antialiased{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.opacity-60{
    opacity: 0.6;
}
.opacity-90{
    opacity: 0.9;
}
.opacity-\[0\.2\]{
    opacity: 0.2;
}
.opacity-\[0\.3\]{
    opacity: 0.3;
}
.opacity-\[0\.5\]{
    opacity: 0.5;
}
.opacity-\[0\.6\]{
    opacity: 0.6;
}
.opacity-\[0\.7\]{
    opacity: 0.7;
}
.\!shadow-none{
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.\!shadow-xsZ1v2{
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.15) !important;
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.\!shadow-xsZ1v3{
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.4) !important;
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-base{
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-baseZ1{
    --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-buttonS{
    --tw-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.4);
    --tw-shadow-colored: 0px 4px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lgZ1{
    --tw-shadow: var(--box-shadow-lgZ1);
    --tw-shadow-colored: var(--box-shadow-lgZ1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lgv2{
    --tw-shadow: 0px 4px 42px rgba(var(--shadowColorMain), 0.6);
    --tw-shadow-colored: 0px 4px 42px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-smZ1{
    --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xsZ1{
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xsZ1v2{
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.15);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xsZ1v3{
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.4);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline{
    outline-style: solid;
}
.blur{
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia{
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter-none{
    filter: none !important;
}
.backdrop-filter{
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.ease-out{
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.focus-within\:focused-input:focus-within{
    border-color: var(--linkColor);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0px 0px 2px 2px var(--inputBoxShadowColorFocus);
    --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .focus-within\:focused-input:focus-within {
        box-shadow: 0 0 0 2px #000;
    }
@media (min-width: 768px){
    .md\:text-h2{
        font-size: 28px;
        font-weight: 700;
        line-height: 140%;
        color: var(--textColor1);
    }
    @media (min-width: 768px){

        .md\:text-h2{
            font-size: 31px;
        }
    }
    .md\:text-h4{
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        color: var(--textColor1);
    }
}
@media (min-width: 1280px){

    .xl\:text-p-base{
        line-height: 160%;
    }

        .xl\:text-p-base a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
        .xl\:text-p-base strong{
        font-weight: 500;
        color: var(--textColor2);
    }
    .xl\:text-p-base{
        font-size: 16px;
    }
}
.hover\:cursor-pointer:hover{
    cursor: pointer;
}
.hover\:cursor-text:hover{
    cursor: text;
}
.hover\:bg-backgroundColorD:hover{
    background-color: var(--backgroundColorD);
}
.hover\:bg-backgroundColorHoverMenuTrack:hover{
    background-color: var(--backgroundColorHoverMenuTrack);
}
.hover\:text-prominentLinkColor:hover{
    color: var(--c-prominent-link-color);
}
.hover\:underline:hover{
    text-decoration-line: underline;
}
.hover\:shadow-baseZ1:hover{
    --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-smZ1:hover{
    --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:block{
    display: block;
}
.child\:mx-6 > *{
    margin-left: 6px;
    margin-right: 6px;
}
.child\:px-12 > *{
    padding-left: 12px;
    padding-right: 12px;
}
.child\:py-10 > *{
    padding-top: 10px;
    padding-bottom: 10px;
}
.child\:text-14 > *{
    font-size: 14px;
}
@media (min-width: 640px){

    .sm\:static{
        position: static;
    }

    .sm\:left-0{
        left: 0px;
    }

    .sm\:float-right{
        float: right;
    }

    .sm\:mb-0{
        margin-bottom: 0px;
    }

    .sm\:mb-24{
        margin-bottom: 24px;
    }

    .sm\:mb-32{
        margin-bottom: 32px;
    }

    .sm\:mb-64{
        margin-bottom: 64px;
    }

    .sm\:mb-8{
        margin-bottom: 8px;
    }

    .sm\:ml-16{
        margin-left: 16px;
    }

    .sm\:ml-24{
        margin-left: 24px;
    }

    .sm\:ml-40{
        margin-left: 40px;
    }

    .sm\:mr-12{
        margin-right: 12px;
    }

    .sm\:mr-16{
        margin-right: 16px;
    }

    .sm\:mr-24{
        margin-right: 24px;
    }

    .sm\:mr-32{
        margin-right: 32px;
    }

    .sm\:mr-40{
        margin-right: 40px;
    }

    .sm\:block{
        display: block;
    }

    .sm\:inline{
        display: inline;
    }

    .sm\:flex{
        display: flex;
    }

    .sm\:hidden{
        display: none;
    }

    .sm\:h-\[140px\]{
        height: 140px;
    }

    .sm\:w-\[140px\]{
        width: 140px;
    }

    .sm\:w-\[220px\]{
        width: 220px;
    }

    .sm\:w-\[400px\]{
        width: 400px;
    }

    .sm\:w-\[fit-content\]{
        width: -moz-fit-content;
        width: fit-content;
    }

    .sm\:w-auto{
        width: auto;
    }

    .sm\:w-unset{
        width: unset;
    }

    .sm\:min-w-\[440px\]{
        min-width: 440px;
    }

    .sm\:grow-0{
        flex-grow: 0;
    }

    .sm\:translate-x-0{
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:translate-y-0{
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .sm\:flex-nowrap{
        flex-wrap: nowrap;
    }

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

    .sm\:gap-20{
        gap: 20px;
    }

    .sm\:gap-24{
        gap: 24px;
    }

    .sm\:gap-y-0{
        row-gap: 0px;
    }

    .sm\:p-32{
        padding: 32px;
    }

    .sm\:p-40{
        padding: 40px;
    }

    .sm\:py-8{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .sm\:pb-32{
        padding-bottom: 32px;
    }

    .sm\:pb-56{
        padding-bottom: 56px;
    }

    .sm\:pl-32{
        padding-left: 32px;
    }

    .sm\:pr-48{
        padding-right: 48px;
    }

    .sm\:pt-32{
        padding-top: 32px;
    }

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

    .sm\:text-32{
        font-size: 32px;
    }
}
@media (min-width: 768px){

    .md\:bottom-\[45\%\]{
        bottom: 45%;
    }

    .md\:my-56{
        margin-top: 56px;
        margin-bottom: 56px;
    }

    .md\:mb-0{
        margin-bottom: 0px;
    }

    .md\:mb-12{
        margin-bottom: 12px;
    }

    .md\:mb-16{
        margin-bottom: 16px;
    }

    .md\:mb-2{
        margin-bottom: 2px;
    }

    .md\:mb-20{
        margin-bottom: 20px;
    }

    .md\:mb-32{
        margin-bottom: 32px;
    }

    .md\:mb-36{
        margin-bottom: 36px;
    }

    .md\:mb-4{
        margin-bottom: 4px;
    }

    .md\:mb-40{
        margin-bottom: 40px;
    }

    .md\:mb-48{
        margin-bottom: 48px;
    }

    .md\:mb-56{
        margin-bottom: 56px;
    }

    .md\:mb-8{
        margin-bottom: 8px;
    }

    .md\:mb-auto{
        margin-bottom: auto;
    }

    .md\:ml-16{
        margin-left: 16px;
    }

    .md\:ml-24{
        margin-left: 24px;
    }

    .md\:ml-32{
        margin-left: 32px;
    }

    .md\:ml-40{
        margin-left: 40px;
    }

    .md\:ml-64{
        margin-left: 64px;
    }

    .md\:ml-auto{
        margin-left: auto;
    }

    .md\:mr-12{
        margin-right: 12px;
    }

    .md\:mr-16{
        margin-right: 16px;
    }

    .md\:mr-24{
        margin-right: 24px;
    }

    .md\:mr-32{
        margin-right: 32px;
    }

    .md\:mr-64{
        margin-right: 64px;
    }

    .md\:mr-auto{
        margin-right: auto;
    }

    .md\:mt-0{
        margin-top: 0px;
    }

    .md\:mt-32{
        margin-top: 32px;
    }

    .md\:mt-48{
        margin-top: 48px;
    }

    .md\:mt-56{
        margin-top: 56px;
    }

    .md\:block{
        display: block;
    }

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

    .md\:inline{
        display: inline;
    }

    .md\:flex{
        display: flex;
    }

    .md\:grid{
        display: grid;
    }

    .md\:hidden{
        display: none;
    }

    .md\:h-\[10\.8\%\]{
        height: 10.8%;
    }

    .md\:h-\[118px\]{
        height: 118px;
    }

    .md\:h-\[40px\]{
        height: 40px;
    }

    .md\:h-\[48px\]{
        height: 48px;
    }

    .md\:h-\[500px\]{
        height: 500px;
    }

    .md\:h-\[60px\]{
        height: 60px;
    }

    .md\:h-\[68px\]{
        height: 68px;
    }

    .md\:h-auto{
        height: auto;
    }

    .md\:w-\[10\.8\%\]{
        width: 10.8%;
    }

    .md\:w-\[118px\]{
        width: 118px;
    }

    .md\:w-\[150px\]{
        width: 150px;
    }

    .md\:w-\[290px\]{
        width: 290px;
    }

    .md\:w-\[33\%\]{
        width: 33%;
    }

    .md\:w-\[40px\]{
        width: 40px;
    }

    .md\:w-\[48px\]{
        width: 48px;
    }

    .md\:w-\[500px\]{
        width: 500px;
    }

    .md\:w-\[60px\]{
        width: 60px;
    }

    .md\:w-\[unset\]{
        width: unset;
    }

    .md\:w-auto{
        width: auto;
    }

    .md\:max-w-\[374px\]{
        max-width: 374px;
    }

    .md\:max-w-\[380px\]{
        max-width: 380px;
    }

    .md\:max-w-\[500px\]{
        max-width: 500px;
    }

    .md\:max-w-\[840px\]{
        max-width: 840px;
    }

    .md\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-2-auto{
        grid-template-columns: repeat(2, auto);
    }

    .md\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

    .md\:flex-col{
        flex-direction: column;
    }

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

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

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

    .md\:gap-0{
        gap: 0px;
    }

    .md\:gap-32{
        gap: 32px;
    }

    .md\:gap-64{
        gap: 64px;
    }

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

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

    .md\:border-l-6{
        border-left-width: 6px;
    }

    .md\:border-t-0{
        border-top-width: 0;
    }

    .md\:p-32{
        padding: 32px;
    }

    .md\:px-24{
        padding-left: 24px;
        padding-right: 24px;
    }

    .md\:px-32{
        padding-left: 32px;
        padding-right: 32px;
    }

    .md\:px-40{
        padding-left: 40px;
        padding-right: 40px;
    }

    .md\:px-48{
        padding-left: 48px;
        padding-right: 48px;
    }

    .md\:px-64{
        padding-left: 64px;
        padding-right: 64px;
    }

    .md\:px-80{
        padding-left: 80px;
        padding-right: 80px;
    }

    .md\:py-16{
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .md\:py-32{
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .md\:py-40{
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .md\:py-8{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .md\:pb-128{
        padding-bottom: 128px;
    }

    .md\:pb-16{
        padding-bottom: 16px;
    }

    .md\:pb-40{
        padding-bottom: 40px;
    }

    .md\:pb-64{
        padding-bottom: 64px;
    }

    .md\:pb-\[158px\]{
        padding-bottom: 158px;
    }

    .md\:pt-32{
        padding-top: 32px;
    }

    .md\:pt-40{
        padding-top: 40px;
    }

    .md\:pt-48{
        padding-top: 48px;
    }

    .md\:pt-56{
        padding-top: 56px;
    }

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

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

    .md\:text-14{
        font-size: 14px;
    }

    .md\:text-16{
        font-size: 16px;
    }

    .md\:shadow-lgZ1{
        --tw-shadow: var(--box-shadow-lgZ1);
        --tw-shadow-colored: var(--box-shadow-lgZ1);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}
@media (min-width: 1024px){

    .lg\:static{
        position: static;
    }

    .lg\:top-0{
        top: 0px;
    }

    .lg\:col-span-1{
        grid-column: span 1 / span 1;
    }

    .lg\:mb-0{
        margin-bottom: 0px;
    }

    .lg\:mb-128{
        margin-bottom: 128px;
    }

    .lg\:mb-72{
        margin-bottom: 72px;
    }

    .lg\:mb-8{
        margin-bottom: 8px;
    }

    .lg\:ml-0{
        margin-left: 0px;
    }

    .lg\:ml-128{
        margin-left: 128px;
    }

    .lg\:ml-24{
        margin-left: 24px;
    }

    .lg\:ml-32{
        margin-left: 32px;
    }

    .lg\:ml-40{
        margin-left: 40px;
    }

    .lg\:ml-48{
        margin-left: 48px;
    }

    .lg\:ml-80{
        margin-left: 80px;
    }

    .lg\:ml-auto{
        margin-left: auto;
    }

    .lg\:mr-128{
        margin-right: 128px;
    }

    .lg\:mr-20{
        margin-right: 20px;
    }

    .lg\:mr-32{
        margin-right: 32px;
    }

    .lg\:mr-64{
        margin-right: 64px;
    }

    .lg\:mr-8{
        margin-right: 8px;
    }

    .lg\:mt-0{
        margin-top: 0px;
    }

    .lg\:mt-96{
        margin-top: 96px;
    }

    .lg\:block{
        display: block;
    }

    .lg\:inline{
        display: inline;
    }

    .lg\:flex{
        display: flex;
    }

    .lg\:grid{
        display: grid;
    }

    .lg\:hidden{
        display: none;
    }

    .lg\:h-\[9\%\]{
        height: 9%;
    }

    .lg\:w-1-3{
        width: 33.3%;
    }

    .lg\:w-\[300px\]{
        width: 300px;
    }

    .lg\:w-\[350px\]{
        width: 350px;
    }

    .lg\:w-\[40\%\]{
        width: 40%;
    }

    .lg\:w-\[400px\]{
        width: 400px;
    }

    .lg\:w-\[564px\]{
        width: 564px;
    }

    .lg\:w-\[800px\]{
        width: 800px;
    }

    .lg\:w-\[9\%\]{
        width: 9%;
    }

    .lg\:w-arbitary{
        width: 1px;
    }

    .lg\:w-auto{
        width: auto;
    }

    .lg\:max-w-1-2{
        max-width: 50%;
    }

    .lg\:max-w-\[510px\]{
        max-width: 510px;
    }

    .lg\:max-w-\[640px\]{
        max-width: 640px;
    }

    .lg\:max-w-\[700px\]{
        max-width: 700px;
    }

    .lg\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

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

    .lg\:flex-col{
        flex-direction: column;
    }

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

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

    .lg\:gap-128{
        gap: 128px;
    }

    .lg\:gap-32{
        gap: 32px;
    }

    .lg\:gap-4{
        gap: 4px;
    }

    .lg\:gap-x-\[unset\]{
        -moz-column-gap: unset;
             column-gap: unset;
    }

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

    .lg\:border-t-1{
        border-top-width: 1px;
    }

    .lg\:px-32{
        padding-left: 32px;
        padding-right: 32px;
    }

    .lg\:px-40{
        padding-left: 40px;
        padding-right: 40px;
    }

    .lg\:px-64{
        padding-left: 64px;
        padding-right: 64px;
    }

    .lg\:py-24{
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .lg\:py-40{
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .lg\:pb-16{
        padding-bottom: 16px;
    }

    .lg\:pt-0{
        padding-top: 0px;
    }

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

    .lg\:text-48{
        font-size: 48px;
    }
}
@media (min-width: 1280px){

    .xl\:col-span-2{
        grid-column: span 2 / span 2;
    }

    .xl\:mb-0{
        margin-bottom: 0px;
    }

    .xl\:mb-12{
        margin-bottom: 12px;
    }

    .xl\:ml-40{
        margin-left: 40px;
    }

    .xl\:ml-80{
        margin-left: 80px;
    }

    .xl\:mr-48{
        margin-right: 48px;
    }

    .xl\:mr-\[-100px\]{
        margin-right: -100px;
    }

    .xl\:mr-auto{
        margin-right: auto;
    }

    .xl\:mt-0{
        margin-top: 0px;
    }

    .xl\:block{
        display: block;
    }

    .xl\:h-\[8\%\]{
        height: 8%;
    }

    .xl\:w-\[8\%\]{
        width: 8%;
    }

    .xl\:w-arbitary{
        width: 1px;
    }

    .xl\:max-w-\[450px\]{
        max-width: 450px;
    }

    .xl\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

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

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

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

    .xl\:gap-128{
        gap: 128px;
    }

    .xl\:gap-64{
        gap: 64px;
    }

    .xl\:px-32{
        padding-left: 32px;
        padding-right: 32px;
    }

    .xl\:py-24{
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .xl\:pb-16{
        padding-bottom: 16px;
    }
}
@media (min-width: 1200px){

    .mxl\:flex{
        display: flex;
    }
}
@media (min-width: 480px){

    .xs\:flex{
        display: flex;
    }
}
.\[\&_button\]\:p-4 button{
    padding: 4px;
}
body{
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    font-size: 14px;
    scroll-behavior: smooth;

    /* This stops the page jumping around on Windows
       when the scrollbar appears or disappears. */
    overflow-y: scroll;
    overflow-x: auto;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    /*
         * app/images/bg-pattern.svg
         * https://pattern.monster/hexagon-1/
         * https://base64.guru/converter/encode/image/svg
         * */
    --hex-bg-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ncGF0dGVybklkJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxkZWZzPjxwYXR0ZXJuIGlkPSdhJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB3aWR0aD0nMjknIGhlaWdodD0nNTAuMTE1JyBwYXR0ZXJuVHJhbnNmb3JtPSdzY2FsZSgyKSByb3RhdGUoMCknPjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J2hzbGEoMCwwJSwxMDAlLDEpJy8+PHBhdGggZD0nTTE0LjQ5OCAxNi44NThMMCA4LjQ4OC4wMDItOC4yNTdsMTQuNS04LjM3NEwyOS04LjI2bC0uMDAyIDE2Ljc0NXptMCA1MC4wNkwwIDU4LjU0OGwuMDAyLTE2Ljc0NSAxNC41LTguMzczTDI5IDQxLjhsLS4wMDIgMTYuNzQ0ek0yOC45OTYgNDEuOGwtMTQuNDk4LTguMzcuMDAyLTE2Ljc0NEwyOSA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXptLTI5IDBsLTE0LjQ5OC04LjM3LjAwMi0xNi43NDRMMCA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXonICBzdHJva2Utd2lkdGg9JzAuNScgc3Ryb2tlPSdoc2xhKDI1OSwgMCUsIDkwJSwgMSknIGZpbGw9J25vbmUnLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAlJyBoZWlnaHQ9JzgwMCUnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC0zOCwtNi40NiknIGZpbGw9J3VybCgjYSknLz48L3N2Zz4K");
    --c-perk-a-width: 325px;
}
@media screen and (prefers-reduced-motion: reduce) {
    body {
        scroll-behavior: auto;
    }
}
code{
    line-height: 160%;
    white-space: pre-wrap;
}
.js-focus-visible :focus {
    outline: 5px auto -webkit-focus-ring-color;
}
.js-focus-visible :focus:not(.focus-visible) {
        outline: none;
    }
pre{
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    line-height: 160%;
}
/*******************/
/* HTML/Body Setup */
/*******************/
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/**************/
/* Containers */
/**************/
.sm-container,
.md-container,
.lg-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.sm-container {
    max-width: 1056px;
    padding: 0 var(--container-padding-x);
}
.md-container {
    max-width: 1248px;
    padding: 0 var(--container-padding-x);
}
.lg-container {
    max-width: 1440px;
    padding: 0 var(--container-padding-x);
}
[data-react-data] {
    /* width: 100%; */
    /* height: 100%; */
}
.c-react-component.--fitted {
        width: -moz-fit-content;
        width: fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
.c-count-bubble{
    border-radius: 100px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 200%;
    color: var(--textColor6);
}
/* Override the tailwind default */
img {
    max-width: none;
}
/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/poppins-v20-latin-regular-ac6d71b4d5fdd2b3dabc9a06ff6c001e4251da0b.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("/assets/poppins-v20-latin-500-0da2d17e738f46d2a09e6fb7969da451719a9820.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("/assets/poppins-v20-latin-600-179f97ec0275f09603a8db94d4380eb584d81cd5.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("/assets/poppins-v20-latin-700-cb726212d5d525021752a1d8470a0fb593e0c49e.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    src: url("/assets/poppins-v20-latin-800-6d11d743bc3cfb169d70bc86450f18351dc1a905.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    src: url("/assets/poppins-v20-latin-900-ec0cbbcb4600e691cb24a63451f758727f90a306.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/source-code-pro-v22-latin_latin-ext-regular-ac7e13e27e17f830518f9899f1928cb5bfde3c3b.woff2")
        format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 500;
    src: url("/assets/source-code-pro-v22-latin_latin-ext-500-aabbd63e822a756f9d66e2f6743b123d4bb883c9.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-600 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 600;
    src: url("/assets/source-code-pro-v22-latin_latin-ext-600-d4ebfed15e97c778d1ed45406560f438d5950081.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 700;
    src: url("/assets/source-code-pro-v22-latin_latin-ext-700-7cdf600f5a9ff03092674611f8057ed93273c264.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "League Spartan";
    font-style: normal;
    font-weight: 700;
    src: url("/assets/LeagueSpartan-Bold-59c7c900c06b1f3df1bf1784e20d475cae9c5418.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@keyframes zoomIn {
    from {
        transform: scale(0, 0);
        opacity: 0;
    }
    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes zoomOut {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }
    to {
        transform: scale(0, 0);
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
:root {
    /* TODO: Rename these to match figma */
    --c-6E82AA: #6e82aa;
    --c-211D2F: #211d2f;
    --c-2E57E8: #2e57e8;
    --c-76709F: #76709f;
    --c-5C5589: #5c5589;
    --c-130B43: #130b43;
    --c-130b43: #130b43;
    --c-CBC9D9: #cbc9d9;
    --c-322C44: #322c44;
    --c-3F3A5A: #3f3a5a;
    --c-6D6986: #6d6986;
    --c-6A93FF: #6a93ff;
    --c-533F56: #533f56;
    --c-8480A0: #8480a0;
    --c-EAECF3: #eaecf3;
    --c-26282D: #26282d;
    --c-000000: #000000;
    --c-FFFFFF: #ffffff;
    --c-FBFCFE: #fbfcfe;
    --c-282339: #282339;
    --c-A9A6BD: #a9a6bd;
    --c-604FCD: #604fcd;
    --c-B0A8E3: #b0a8e3;
    --c-433F56: #433f56;
    --c-4FCDA7: #4fcda7;
    --c-F0F3F9: #f0f3f9;
    --c-D5D8E4: #d5d8e4;
    --c-F4F7FD: #f4f7fd;
    --c-E1EBFF: #e1ebff;
    --c-C8D5EF: #c8d5ef;
    --c-FAFAFF: #fafaff;
    --c-E8EDF7: #e8edf7;
    --c-F6F7FB: #f6f7fb;
    --c-403A66: #403a66;
    --c-6A6781: #6a6781;
    --c-3A3557: #3a3557;
    --c-302B42: #302b42;
    --c-4A475F: #4a475f;
    --c-191525: #191525;
    --c-2F2943: #2f2943;
    --c-A7B7D6: #a7b7d6;
    --c-7097FF: #7097ff;

    --darkThemeBackgroundColor: var(--c-282339);
    --track-color-c: 52, 19, 148;
    --track-color-csharp: 19, 140, 148;
    --track-color-cpp: 130, 19, 148;
    --track-color-kotlin: 249, 138, 10;
    --track-color-javascript: 240, 219, 79;
    --track-color-ruby: 235, 87, 87;
    --track-color-bash: 0, 0, 0;
    --track-color-clojure: 88, 129, 216;
    --track-color-coffeescript: 205, 124, 79;
    --track-color-common-lisp: 45, 58, 62;
    --track-color-crystal: 0, 0, 0;
    --track-color-d: 193, 95, 94;
    --track-color-dart: 44, 183, 246;
    --track-color-elm: 95, 180, 203;
    --track-color-emacs-lisp: 127, 93, 182;
    --track-color-erlang: 169, 5, 51;
    --track-color-f: 48, 185, 219;
    --track-color-go: 0, 172, 215;
    --track-color-haskell: 94, 81, 135;
    --track-color-java: 234, 45, 46;
    --track-color-julia: 64, 99, 216;
    --track-color-lua: 0, 0, 125;
    --track-color-ocaml: 237, 110, 13;
    --track-color-perl5: 0, 115, 161;
    --track-color-python: 55, 112, 160;
    --track-color-elixir: 125, 65, 164;
    --track-color-fsharp: 48, 185, 219;
    --track-color-mips: 98, 65, 192;
    --track-color-nim: 239, 199, 67;
    --track-color-clojurescript: 99, 177, 50;
    --track-color-ceylon: 52, 73, 94;
    --track-color-ballerina: 81, 194, 192;
    --track-color-cf: 12, 42, 114;
    --track-color-cfml: 52, 23, 114;
    --track-color-delphi: 243, 39, 53;
    --track-color-ecmascript: 248, 220, 61;
    --track-color-groovy: 97, 156, 188;
    --track-color-haxe: 246, 135, 18;
    --track-color-idris: 138, 8, 25;
    --track-color-lfe: 102, 120, 40;
    --track-color-objective-c: 11, 90, 157;
    --track-color-raku: 255, 51, 102;
    --track-color-pharo-smalltalk: 43, 152, 216;
    --track-color-php: 80, 94, 156;
    --track-color-plsql: 248, 0, 0;
    --track-color-powershell: 54, 40, 123;
    --track-color-prolog: 241, 75, 37;
    --track-color-purescript: 20, 22, 26;
    --track-color-r: 87, 87, 94;
    --track-color-racket: 159, 29, 32;
    --track-color-reasonml: 221, 75, 57;
    --track-color-rust: 57, 46, 46;
    --track-color-scala: 222, 52, 35;
    --track-color-scheme: 0, 0, 0;
    --track-color-sml: 118, 73, 214;
    --track-color-swift: 240, 81, 56;
    --track-color-tcl: 30, 92, 179;
    --track-color-typescript: 49, 120, 198;
    --track-color-vimscript: 1, 152, 51;
    --track-color-vbnet: 0, 78, 140;
    --track-color-x86-64-assembly: 98, 65, 192;
    --track-color-gnu-apl: 0, 0, 0;

    --filter-twitter: invert(51%) sepia(82%) saturate(2086%) hue-rotate(175deg)
        brightness(98%) contrast(93%);
    --filter-CBC9D9: invert(93%) sepia(8%) saturate(833%) hue-rotate(199deg)
        brightness(90%) contrast(88%);
    --filter-E2EBFF: invert(86%) sepia(12%) saturate(630%) hue-rotate(194deg)
        brightness(103%) contrast(107%);
    --filter-59D2AE: invert(74%) sepia(71%) saturate(309%) hue-rotate(106deg)
        brightness(89%) contrast(88%);
    --filter-FFFFFF: invert(99%) sepia(33%) saturate(62%) hue-rotate(352deg)
        brightness(109%) contrast(100%);
    --filter-2E57E8: invert(21%) sepia(78%) saturate(3537%) hue-rotate(227deg)
        brightness(98%) contrast(85%);
    --filter-7097FF: invert(57%) sepia(30%) saturate(2773%) hue-rotate(199deg)
        brightness(101%) contrast(101%);
    --filter-E2CB2D: invert(73%) sepia(100%) saturate(350%) hue-rotate(3deg)
        brightness(94%) contrast(94%);

    /* textColor6 dark-mode variant */
    --filter-A9A6BD: invert(75%) sepia(8%) saturate(561%) hue-rotate(208deg)
        brightness(90%) contrast(90%);

    --container-padding-x: 16px;
}
@media (min-width: 768px) {
:root {
        --container-padding-x: 32px
}
    }
.theme-light {
    --backgroundColorA: var(--c-FFFFFF);
    --backgroundColorA-RGB: 255 255 255;
    --backgroundColorB: var(--c-FBFCFE);
    --backgroundColorC: var(--c-EAECF3);
    --backgroundColorD: var(--c-F0F3F9);
    --backgroundColorE: var(--c-F4F7FD);
    --backgroundColorF: var(--c-FAFAFF);
    --backgroundColorG: var(--c-F6F7FB);
    --backgroundColorH: var(--c-130B43);
    /* veryLightBlue */
    --backgroundColorI: #e1ebff;
    --backgroundColorITransparent: rgba(225, 235, 255, 0);
    --backgroundColorBorderGradientLightPurple: #FAFAFF;
    --backgroundColorNotifications: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #fff4e3, #fff4e3);
    --backgroundColorNotificationsCount: #EB5757;
    --backgroundColorAnnouncementBar: #130B43;
    --backgroundColorSiteFooter: #130B43;
    --backgroundColorTracksListState: #FFF3E1;
    --backgroundColorMentoringRequestedStatusInfo: #FFF3E1;
    --backgroundColorCAlert: #FFF3E1;
    --backgroundColorTextblockCautionContent: #FFFDFA;
    --textColorCAlert: #955D09;
    --textColorCAlertLabel: #3E2705;
    --backgroundColorTracksListJoined: #E1EBFF;
    --backgroundColorTracksListNew: #FFF3E1;
    --backgroundColorIterationCommentsUnread: #FFF3E1;
    --borderColorIterationCommentsUnread: #F69605;
    --textColorIterationCommentsUnread: #26282D;
    --borderColorIterationActive: #2E57E8;
    --textColorIterationActive: #26282D;
    --backgroundColorEDAvailable: #fff;
    --backgroundColorEDIterated: #6A93FF;
    --backgroundColorMentorTrackSelectorSelected: #6A93FF;
    --backgroundColorExerciseStatusTagInProgress: #E1EBFF;
    --backgroundColorExerciseStatusTagLocked: #E1EBFF;
    --backgroundColorConceptMastered: #E7FDF6;
    --backgroundColorConceptLocked: #EAECF3;
    --backgroundColorCompletedHeading: #B8EADB;
    --backgroundColorCReputation: var(--backgroundColorA);
    --backgroundColorEditorActiveLine: #e1ebff88;
    --backgroundColorTeamHeader: linear-gradient(
        180deg,
        var(--backgroundColorE) 0%,
        var(--backgroundColorA) 100%
    );
    --backgroundColorTeamInfoBox: #E1EBFF;
    --backgroundColorImpactPage: #fff;
    --backgroundColorNotificationsUnreadDot: #2E57E8;
    --backgroundColorBuildToolingStatus: white;
    --backgroundColorBtnSecondary: #FAFAFF;
    --backgroundColorBtnSecondaryHover: #f2f0fc;
    --backgroundColorMentorTestimonialsNew: #FFD38F;
    --backgroundColorExternalCTA: #F9F8FF;
    --backgroundColorEasyTag: #EFFFF1;
    --backgroundColorMediumTag: #F7F5E0;
    --backgroundColorHardTag: #F4EBE5;
    --backgroundColorDangerSection: #FFEDED;
    --backgroundColorDonationsFormSelected: #E2EBFF;
    --backgroundColorContributingAdvanced: #FAFAFF;
    --backgroundColorSummaryStatusFailed: #FDEAEA;
    --backgroundColorSummaryStatusFailedBar: #EB5757;
    --backgroundColorReputationInfo: #26282D;
    --backgroundColorNavDropdown: #F0F3F9;
    --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
    --backgroundColorHoverMenuTrack: #fafaff;
    --backgroundColorPerkContainer: #f8f5ff;
    --backgroundColorStarButtonStarred: #fbf6e9;

    --backgroundImpactPageHeader: linear-gradient(
            180deg,
            rgba(251, 251, 255, 0) 79.36%,
            #f4f4fd 100%
        ),
        linear-gradient(
            180deg,
            #fafaff 0%,
            rgba(250, 250, 255, 0.677852) 24.48%,
            rgba(250, 250, 255, 0) 77.6%,
            #fafaff 100%
        ),
        var(--hex-bg-image), #fafaff;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM1IDIuODg3YTEwIDEwIDAgMCAxIDEwIDBsMjQuNjQgMTQuMjI2YTEwIDEwIDAgMCAxIDUgOC42NnYyOC40NTNhMTAgMTAgMCAwIDEtNSA4LjY2TDQ1IDc3LjExNGExMCAxMCAwIDAgMS0xMCAwTDEwLjM1OSA2Mi44ODdhMTAgMTAgMCAwIDEtNS04LjY2VjI1Ljc3NGExMCAxMCAwIDAgMSA1LTguNjZsMjQuNjQtMTQuMjI3eiIvPjxwYXRoIGZpbGw9IiMxMzBCNDMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTY3Ljc2NiAyMC4zNiA0My4xMjUgNi4xMzVhNi4yNSA2LjI1IDAgMCAwLTYuMjUgMEwxMi4yMzQgMjAuMzYxYTYuMjUgNi4yNSAwIDAgMC0zLjEyNSA1LjQxM3YyOC40NTNhNi4yNSA2LjI1IDAgMCAwIDMuMTI1IDUuNDEybDI0LjY0IDE0LjIyN2E2LjI1IDYuMjUgMCAwIDAgNi4yNSAwbDI0LjY0Mi0xNC4yMjdhNi4yNSA2LjI1IDAgMCAwIDMuMTI1LTUuNDEzVjI1Ljc3NGE2LjI1IDYuMjUgMCAwIDAtMy4xMjUtNS40MTN6TTQ1IDIuODg4YTEwIDEwIDAgMCAwLTEwIDBMMTAuMzU5IDE3LjExM2ExMCAxMCAwIDAgMC01IDguNjZ2MjguNDUzYTEwIDEwIDAgMCAwIDUgOC42NmwyNC42NCAxNC4yMjdhMTAgMTAgMCAwIDAgMTAgMGwyNC42NDItMTQuMjI2YTEwIDEwIDAgMCAwIDUtOC42NlYyNS43NzRhMTAgMTAgMCAwIDAtNS04LjY2TDQ1IDIuODg2eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
    --textColorCReputation: var(--textColor7);

    --c-prominent-link-bg: #e1ebff;

    --newBadgeIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDQuNzMyMDVDMTEuNjE4OCA0LjM3NDc5IDEyLjM4MTIgNC4zNzQ3OSAxMyA0LjczMjA1TDIwLjM5MjMgOUMyMS4wMTExIDkuMzU3MjcgMjEuMzkyMyAxMC4wMTc1IDIxLjM5MjMgMTAuNzMyMVYxOS4yNjc5QzIxLjM5MjMgMTkuOTgyNSAyMS4wMTExIDIwLjY0MjcgMjAuMzkyMyAyMUwxMyAyNS4yNjc5QzEyLjM4MTIgMjUuNjI1MiAxMS42MTg4IDI1LjYyNTIgMTEgMjUuMjY3OUwzLjYwNzcgMjFDMi45ODg4OSAyMC42NDI3IDIuNjA3NyAxOS45ODI1IDIuNjA3NyAxOS4yNjhWMTAuNzMyMUMyLjYwNzcgMTAuMDE3NSAyLjk4ODg5IDkuMzU3MjcgMy42MDc3IDlMMTEgNC43MzIwNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMiIgeTE9IjMiIHgyPSIxMiIgeTI9IjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    --newTestimonialIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43NSAzLjc1MDAyQzguOTM5MzMgMy43NDQ1MiA1LjQyNTY4IDUuODA2OTUgMy41NzI4IDkuMTM2ODNDMS43MTk5MSAxMi40NjY3IDEuODE5NTMgMTYuNTM5NyAzLjgzMyAxOS43NzVMMC43NSAyNi4yNUw3LjIyNSAyMy4xNjdDMTEuMDExMyAyNS41MjExIDE1Ljg3MTQgMjUuMjI3NCAxOS4zNDY2IDIyLjQzNDVDMjIuODIxOSAxOS42NDE2IDI0LjE1NDQgMTQuOTU4NSAyMi42NzAxIDEwLjc1NDRDMjEuMTg1OSA2LjU1MDI4IDE3LjIwODQgMy43NDE5MiAxMi43NSAzLjc1MDAyWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzUgMTYuNUMxNS43NSAxOC4xNTY5IDE0LjQwNjkgMTkuNSAxMi43NSAxOS41QzExLjA5MzEgMTkuNSA5Ljc1IDE4LjE1NjkgOS43NSAxNi41SDE1Ljc1WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MV9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04LjI1IDEyLjM3NUM4LjA0Mjg5IDEyLjM3NSA3Ljg3NSAxMi41NDI5IDcuODc1IDEyLjc1QzcuODc1IDEyLjk1NzEgOC4wNDI4OSAxMy4xMjUgOC4yNSAxMy4xMjVDOC40NTcxMSAxMy4xMjUgOC42MjUgMTIuOTU3MSA4LjYyNSAxMi43NUM4LjYyNSAxMi41NDI5IDguNDU3MTEgMTIuMzc1IDguMjUgMTIuMzc1IiBzdHJva2U9InVybCgjcGFpbnQyX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjI1IDEyLjM3NUMxNy4wNDI5IDEyLjM3NSAxNi44NzUgMTIuNTQyOSAxNi44NzUgMTIuNzVDMTYuODc1IDEyLjk1NzEgMTcuMDQyOSAxMy4xMjUgMTcuMjUgMTMuMTI1QzE3LjQ1NzEgMTMuMTI1IDE3LjYyNSAxMi45NTcxIDE3LjYyNSAxMi43NUMxNy42MjUgMTIuNTQyOSAxNy40NTcxIDEyLjM3NSAxNy4yNSAxMi4zNzUiIHN0cm9rZT0idXJsKCNwYWludDNfbGluZWFyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMi4wMDk4IiB5MT0iMy43NSIgeDI9IjEyLjAwOTgiIHkyPSIyNi4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxMi43NSIgeTE9IjE2LjUiIHgyPSIxMi43NSIgeTI9IjE5LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iOC4zNzUiIHkxPSIxMi4zNzUiIHgyPSI4LjM3NSIgeTI9IjEzLjM3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIxNy4zNzUiIHkxPSIxMi4zNzUiIHgyPSIxNy4zNzUiIHkyPSIxMy4zNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");

    --colorPurpleToBrightPurple: #604FCD;
    --purple-to-bright-purple-filter: invert(26%) sepia(66%) saturate(1727%)
        hue-rotate(229deg) brightness(103%) contrast(88%);

    /* used at background linear-gradients */
    --backgroundColorJ: #fbfbff;
    /* lightBlue */
    --fillColorProgress: #2e57e8;
    --borderColor1: var(--c-000000);
    --borderColor3: var(--c-26282D);
    --borderColor4: var(--c-6D6986);
    --borderColor5: var(--c-CBC9D9);
    --borderColor6: var(--c-D5D8E4);
    --borderColor7: var(--c-EAECF3);
    --borderColor8: #EAECF3;
    --borderColor9: var(--c-FFFFFF);

    --borderColorContributionTasksTag: #E2EBFF;
    --borderColorContributorCreditBlock: #d5d8e4;
    --borderColorExerciseStatusTagInProgress: #2E57E8;
    --borderColorDocsDashed: #d5d8e4;
    --borderColorTracksListV3: var(--textColor2);
    /* textColor1 and textColor2 has different dark-themes */
    --textColor1: var(--c-130B43);
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-130B43);
    --textColor3: var(--c-26282D);
    --textColor5: var(--c-3F3A5A);
    --textColor6: var(--c-5C5589);
    --textColor7: var(--c-76709F);
    --textColor8: var(--c-E1EBFF);
    --textColor9: var(--c-FFFFFF);
    /* inline codeblock - gotToLoveAPurple - needs a theme-dark pair  */
    --textColor10: #271b72;
    --textColorExerciseStatusTagInProgress: #2E57E8;
    --textColorTracksListState: #26282D;
    --textColorTracksListJoined: #2E57E8;
    --textColorTracksListNew: #F69605;
    --textColorTrackBreadcrumbs: #2E57E8;
    --textColorLastNavElement: #604FCD;
    --textColorCommentsCount: var(--textColor6);
    --textColorMentorTestimonialsNew: var(--textColor5);
    --textColorMentoringRequestedStatusInfo: #26282D;
    --textColorMentorTrackSelectorSelected: #26282D;
    --textColorProgressTextCompleted: #2E8C70;
    --c-prominent-link-color: #2E57E8;
    --textGradientStart: #2200ff;
    --textGradientEnd: #9e00ff;
    --textColorSoftEmphasis: #333;
    --textColorPerkCTA: #604FCD;

    --shadowColorED: 0, 80, 255;
    --shadowColorMain: 79, 114, 205;
    /* applied only on tracks/[track] Your mentoring slots (.slots .discussion) */
    --shadowColorSecondary: rgba(var(--shadowColorMain), 0.3);
    --shadowColorNotificationBell: 156, 130, 38;
    --shadowColorKeystroke: 203, 201, 217;

    --color22: #c8d5ef;

    --linkColor: var(--c-2E57E8);
    --buttonBorderColor1: var(--c-26282D);
    --buttonBorderColor2: var(--c-A9A6BD);
    --inputBackgroundColor: var(--c-FFFFFF);
    --inputBorderColor: var(--c-8480A0);
    --inputBorderColorFocus: var(--c-2E57E8);
    --inputBoxShadowColorFocus: rgba(46, 87, 232, 0.25);
    --tabBackgroundColorSelected: #E1EBFF;
    --tabBackgroundColorSelectedLocked: #E1EBFF;
    --tabBorderColorSelected: var(--c-A7B7D6);
    --modalBackgroundColor: rgba(251, 252, 254, 0.7);
    --lockedColor: var(--c-E8EDF7);
    --paginationCurrentBorderColor: var(--c-6E82AA);
    --paginationCurrentBackgroundColor: var(--c-E1EBFF);
    --chartBorderColor: var(--c-D5D8E4);
    --successColor: #3db591;

    --box-shadow-sm: 0px 4px 16px 0px rgb(var(--shadowColorMain), 0.1);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.3);

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    /* -- HLJS light --  */
    /* Atom One Light by Daniel Gamage
    Original One Light Syntax theme from https://github.com/atom/one-light-syntax */

    --hljs-base: none;
    --hljs-mono-1: #383a42;
    --hljs-mono-2: #686b77;
    --hljs-mono-3: #a0a1a7;
    --hljs-hue-1: #0184bb;
    --hljs-hue-2: #4078f2;
    --hljs-hue-3: #a626a4;
    --hljs-hue-4: #50a14f;
    --hljs-hue-5: #e45649;
    --hljs-hue-5-2: #c91243;
    --hljs-hue-6: #986801;
    --hljs-hue-6-2: #c18401;

    --diffDarkGreen: #a9e7c8;
    --diffLightGreen: #e5f8ee;
    --diffDarkRed: #f5adad;
    --diffLightRed: #fce6e6;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --notifications-active-filter: invert(76%) sepia(54%) saturate(3406%)
        hue-rotate(349deg) brightness(92%) contrast(111%);
    --notifications-inactive-filter: invert(17%) sepia(25%) saturate(368%)
        hue-rotate(188deg) brightness(93%) contrast(86%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --tracks-list-joined-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);

    --c-prominent-link-icon-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --white-filter: var(--filter-FFFFFF);
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);
    --purple-light-white-dark-filter: var(--purple-filter);
    --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
        hue-rotate(229deg) brightness(92%) contrast(89%);
    --selected-tab-icon-filter: var(--purple-filter);

    /* TODO: Replace with purple-filter */
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --textColor1-filter: invert(10%) sepia(35%) saturate(3157%)
        hue-rotate(231deg) brightness(99%) contrast(113%);
    --textColor2-filter: invert(7%) sepia(25%) saturate(7470%)
        hue-rotate(241deg) brightness(100%) contrast(107%);
    --textColor3-filter: invert(13%) sepia(4%) saturate(1617%)
        hue-rotate(185deg) brightness(93%) contrast(91%);
    --textColor5-filter: invert(22%) sepia(33%) saturate(565%)
        hue-rotate(209deg) brightness(96%) contrast(93%);
    --textColor6-filter: invert(35%) sepia(3%) saturate(6422%)
        hue-rotate(208deg) brightness(94%) contrast(87%);
    --textColor7-filter: invert(47%) sepia(9%) saturate(1718%)
        hue-rotate(208deg) brightness(94%) contrast(83%);
    --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%);
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    --buttonBorderColor1: invert(10%) sepia(2%) saturate(5253%)
        hue-rotate(186deg) brightness(92%) contrast(84%);
    --yellow-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%);
    /* #A7B7D6 */
    --mid-gray-filter: invert(72%) sepia(16%) saturate(458%) hue-rotate(181deg)
        brightness(101%) contrast(84%);
    --lightGold-filter: invert(87%) sepia(66%) saturate(518%) hue-rotate(308deg)
        brightness(102%) contrast(101%);
    --linkColor-filter: var(--filter-2E57E8);

    --iconFilterMentorDiscussionWidget: var(--orange-filter);
    --iconFilterCommentsCount: var(--textColor6-filter);
    --iconFilterNotificationsProminentLink: var(--linkColor-filter);
    --iconFilterEDConcept: var(--textColor7-filter);
    --iconFilterCaution: none;

    --exercise-header-gradient: linear-gradient(
        180deg,
        #e1ebff 0%,
        rgba(225, 235, 255, 0) 100%
    );

    background-color: var(--backgroundColorB);

    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;
}
.theme-light img.c-img-dark-theme {
        display: none;
    }
body.namespace-.controller-insiders.theme-light,
.theme-dark {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
}
body.namespace-.controller-insiders.theme-light img.c-img-invertible, .theme-dark img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.theme-light img.c-img-light-theme, .theme-dark img.c-img-light-theme {
        display: none;
    }
/* =============== SYSTEM =============== */
@media (prefers-color-scheme: dark) {
    .theme-system {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
    /* backgroundColorF dark variant */
    --c-progress-bg: #191525;
    --page-dashboard-background-image: rgba(40, 35, 57, 0);
    }
}
@media (prefers-color-scheme: light) {
    .theme-system {
    --backgroundColorA: var(--c-FFFFFF);
    --backgroundColorA-RGB: 255 255 255;
    --backgroundColorB: var(--c-FBFCFE);
    --backgroundColorC: var(--c-EAECF3);
    --backgroundColorD: var(--c-F0F3F9);
    --backgroundColorE: var(--c-F4F7FD);
    --backgroundColorF: var(--c-FAFAFF);
    --backgroundColorG: var(--c-F6F7FB);
    --backgroundColorH: var(--c-130B43);
    /* veryLightBlue */
    --backgroundColorI: #e1ebff;
    --backgroundColorITransparent: rgba(225, 235, 255, 0);
    --backgroundColorBorderGradientLightPurple: #FAFAFF;
    --backgroundColorNotifications: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #fff4e3, #fff4e3);
    --backgroundColorNotificationsCount: #EB5757;
    --backgroundColorAnnouncementBar: #130B43;
    --backgroundColorSiteFooter: #130B43;
    --backgroundColorTracksListState: #FFF3E1;
    --backgroundColorMentoringRequestedStatusInfo: #FFF3E1;
    --backgroundColorCAlert: #FFF3E1;
    --backgroundColorTextblockCautionContent: #FFFDFA;
    --textColorCAlert: #955D09;
    --textColorCAlertLabel: #3E2705;
    --backgroundColorTracksListJoined: #E1EBFF;
    --backgroundColorTracksListNew: #FFF3E1;
    --backgroundColorIterationCommentsUnread: #FFF3E1;
    --borderColorIterationCommentsUnread: #F69605;
    --textColorIterationCommentsUnread: #26282D;
    --borderColorIterationActive: #2E57E8;
    --textColorIterationActive: #26282D;
    --backgroundColorEDAvailable: #fff;
    --backgroundColorEDIterated: #6A93FF;
    --backgroundColorMentorTrackSelectorSelected: #6A93FF;
    --backgroundColorExerciseStatusTagInProgress: #E1EBFF;
    --backgroundColorExerciseStatusTagLocked: #E1EBFF;
    --backgroundColorConceptMastered: #E7FDF6;
    --backgroundColorConceptLocked: #EAECF3;
    --backgroundColorCompletedHeading: #B8EADB;
    --backgroundColorCReputation: var(--backgroundColorA);
    --backgroundColorEditorActiveLine: #e1ebff88;
    --backgroundColorTeamHeader: linear-gradient(
        180deg,
        var(--backgroundColorE) 0%,
        var(--backgroundColorA) 100%
    );
    --backgroundColorTeamInfoBox: #E1EBFF;
    --backgroundColorImpactPage: #fff;
    --backgroundColorNotificationsUnreadDot: #2E57E8;
    --backgroundColorBuildToolingStatus: white;
    --backgroundColorBtnSecondary: #FAFAFF;
    --backgroundColorBtnSecondaryHover: #f2f0fc;
    --backgroundColorMentorTestimonialsNew: #FFD38F;
    --backgroundColorExternalCTA: #F9F8FF;
    --backgroundColorEasyTag: #EFFFF1;
    --backgroundColorMediumTag: #F7F5E0;
    --backgroundColorHardTag: #F4EBE5;
    --backgroundColorDangerSection: #FFEDED;
    --backgroundColorDonationsFormSelected: #E2EBFF;
    --backgroundColorContributingAdvanced: #FAFAFF;
    --backgroundColorSummaryStatusFailed: #FDEAEA;
    --backgroundColorSummaryStatusFailedBar: #EB5757;
    --backgroundColorReputationInfo: #26282D;
    --backgroundColorNavDropdown: #F0F3F9;
    --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
    --backgroundColorHoverMenuTrack: #fafaff;
    --backgroundColorPerkContainer: #f8f5ff;
    --backgroundColorStarButtonStarred: #fbf6e9;

    --backgroundImpactPageHeader: linear-gradient(
            180deg,
            rgba(251, 251, 255, 0) 79.36%,
            #f4f4fd 100%
        ),
        linear-gradient(
            180deg,
            #fafaff 0%,
            rgba(250, 250, 255, 0.677852) 24.48%,
            rgba(250, 250, 255, 0) 77.6%,
            #fafaff 100%
        ),
        var(--hex-bg-image), #fafaff;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM1IDIuODg3YTEwIDEwIDAgMCAxIDEwIDBsMjQuNjQgMTQuMjI2YTEwIDEwIDAgMCAxIDUgOC42NnYyOC40NTNhMTAgMTAgMCAwIDEtNSA4LjY2TDQ1IDc3LjExNGExMCAxMCAwIDAgMS0xMCAwTDEwLjM1OSA2Mi44ODdhMTAgMTAgMCAwIDEtNS04LjY2VjI1Ljc3NGExMCAxMCAwIDAgMSA1LTguNjZsMjQuNjQtMTQuMjI3eiIvPjxwYXRoIGZpbGw9IiMxMzBCNDMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTY3Ljc2NiAyMC4zNiA0My4xMjUgNi4xMzVhNi4yNSA2LjI1IDAgMCAwLTYuMjUgMEwxMi4yMzQgMjAuMzYxYTYuMjUgNi4yNSAwIDAgMC0zLjEyNSA1LjQxM3YyOC40NTNhNi4yNSA2LjI1IDAgMCAwIDMuMTI1IDUuNDEybDI0LjY0IDE0LjIyN2E2LjI1IDYuMjUgMCAwIDAgNi4yNSAwbDI0LjY0Mi0xNC4yMjdhNi4yNSA2LjI1IDAgMCAwIDMuMTI1LTUuNDEzVjI1Ljc3NGE2LjI1IDYuMjUgMCAwIDAtMy4xMjUtNS40MTN6TTQ1IDIuODg4YTEwIDEwIDAgMCAwLTEwIDBMMTAuMzU5IDE3LjExM2ExMCAxMCAwIDAgMC01IDguNjZ2MjguNDUzYTEwIDEwIDAgMCAwIDUgOC42NmwyNC42NCAxNC4yMjdhMTAgMTAgMCAwIDAgMTAgMGwyNC42NDItMTQuMjI2YTEwIDEwIDAgMCAwIDUtOC42NlYyNS43NzRhMTAgMTAgMCAwIDAtNS04LjY2TDQ1IDIuODg2eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
    --textColorCReputation: var(--textColor7);

    --c-prominent-link-bg: #e1ebff;

    --newBadgeIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDQuNzMyMDVDMTEuNjE4OCA0LjM3NDc5IDEyLjM4MTIgNC4zNzQ3OSAxMyA0LjczMjA1TDIwLjM5MjMgOUMyMS4wMTExIDkuMzU3MjcgMjEuMzkyMyAxMC4wMTc1IDIxLjM5MjMgMTAuNzMyMVYxOS4yNjc5QzIxLjM5MjMgMTkuOTgyNSAyMS4wMTExIDIwLjY0MjcgMjAuMzkyMyAyMUwxMyAyNS4yNjc5QzEyLjM4MTIgMjUuNjI1MiAxMS42MTg4IDI1LjYyNTIgMTEgMjUuMjY3OUwzLjYwNzcgMjFDMi45ODg4OSAyMC42NDI3IDIuNjA3NyAxOS45ODI1IDIuNjA3NyAxOS4yNjhWMTAuNzMyMUMyLjYwNzcgMTAuMDE3NSAyLjk4ODg5IDkuMzU3MjcgMy42MDc3IDlMMTEgNC43MzIwNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMiIgeTE9IjMiIHgyPSIxMiIgeTI9IjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    --newTestimonialIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43NSAzLjc1MDAyQzguOTM5MzMgMy43NDQ1MiA1LjQyNTY4IDUuODA2OTUgMy41NzI4IDkuMTM2ODNDMS43MTk5MSAxMi40NjY3IDEuODE5NTMgMTYuNTM5NyAzLjgzMyAxOS43NzVMMC43NSAyNi4yNUw3LjIyNSAyMy4xNjdDMTEuMDExMyAyNS41MjExIDE1Ljg3MTQgMjUuMjI3NCAxOS4zNDY2IDIyLjQzNDVDMjIuODIxOSAxOS42NDE2IDI0LjE1NDQgMTQuOTU4NSAyMi42NzAxIDEwLjc1NDRDMjEuMTg1OSA2LjU1MDI4IDE3LjIwODQgMy43NDE5MiAxMi43NSAzLjc1MDAyWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzUgMTYuNUMxNS43NSAxOC4xNTY5IDE0LjQwNjkgMTkuNSAxMi43NSAxOS41QzExLjA5MzEgMTkuNSA5Ljc1IDE4LjE1NjkgOS43NSAxNi41SDE1Ljc1WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MV9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04LjI1IDEyLjM3NUM4LjA0Mjg5IDEyLjM3NSA3Ljg3NSAxMi41NDI5IDcuODc1IDEyLjc1QzcuODc1IDEyLjk1NzEgOC4wNDI4OSAxMy4xMjUgOC4yNSAxMy4xMjVDOC40NTcxMSAxMy4xMjUgOC42MjUgMTIuOTU3MSA4LjYyNSAxMi43NUM4LjYyNSAxMi41NDI5IDguNDU3MTEgMTIuMzc1IDguMjUgMTIuMzc1IiBzdHJva2U9InVybCgjcGFpbnQyX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjI1IDEyLjM3NUMxNy4wNDI5IDEyLjM3NSAxNi44NzUgMTIuNTQyOSAxNi44NzUgMTIuNzVDMTYuODc1IDEyLjk1NzEgMTcuMDQyOSAxMy4xMjUgMTcuMjUgMTMuMTI1QzE3LjQ1NzEgMTMuMTI1IDE3LjYyNSAxMi45NTcxIDE3LjYyNSAxMi43NUMxNy42MjUgMTIuNTQyOSAxNy40NTcxIDEyLjM3NSAxNy4yNSAxMi4zNzUiIHN0cm9rZT0idXJsKCNwYWludDNfbGluZWFyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMi4wMDk4IiB5MT0iMy43NSIgeDI9IjEyLjAwOTgiIHkyPSIyNi4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxMi43NSIgeTE9IjE2LjUiIHgyPSIxMi43NSIgeTI9IjE5LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iOC4zNzUiIHkxPSIxMi4zNzUiIHgyPSI4LjM3NSIgeTI9IjEzLjM3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIxNy4zNzUiIHkxPSIxMi4zNzUiIHgyPSIxNy4zNzUiIHkyPSIxMy4zNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");

    --colorPurpleToBrightPurple: #604FCD;
    --purple-to-bright-purple-filter: invert(26%) sepia(66%) saturate(1727%)
        hue-rotate(229deg) brightness(103%) contrast(88%);

    /* used at background linear-gradients */
    --backgroundColorJ: #fbfbff;
    /* lightBlue */
    --fillColorProgress: #2e57e8;
    --borderColor1: var(--c-000000);
    --borderColor3: var(--c-26282D);
    --borderColor4: var(--c-6D6986);
    --borderColor5: var(--c-CBC9D9);
    --borderColor6: var(--c-D5D8E4);
    --borderColor7: var(--c-EAECF3);
    --borderColor8: #EAECF3;
    --borderColor9: var(--c-FFFFFF);

    --borderColorContributionTasksTag: #E2EBFF;
    --borderColorContributorCreditBlock: #d5d8e4;
    --borderColorExerciseStatusTagInProgress: #2E57E8;
    --borderColorDocsDashed: #d5d8e4;
    --borderColorTracksListV3: var(--textColor2);
    /* textColor1 and textColor2 has different dark-themes */
    --textColor1: var(--c-130B43);
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-130B43);
    --textColor3: var(--c-26282D);
    --textColor5: var(--c-3F3A5A);
    --textColor6: var(--c-5C5589);
    --textColor7: var(--c-76709F);
    --textColor8: var(--c-E1EBFF);
    --textColor9: var(--c-FFFFFF);
    /* inline codeblock - gotToLoveAPurple - needs a theme-dark pair  */
    --textColor10: #271b72;
    --textColorExerciseStatusTagInProgress: #2E57E8;
    --textColorTracksListState: #26282D;
    --textColorTracksListJoined: #2E57E8;
    --textColorTracksListNew: #F69605;
    --textColorTrackBreadcrumbs: #2E57E8;
    --textColorLastNavElement: #604FCD;
    --textColorCommentsCount: var(--textColor6);
    --textColorMentorTestimonialsNew: var(--textColor5);
    --textColorMentoringRequestedStatusInfo: #26282D;
    --textColorMentorTrackSelectorSelected: #26282D;
    --textColorProgressTextCompleted: #2E8C70;
    --c-prominent-link-color: #2E57E8;
    --textGradientStart: #2200ff;
    --textGradientEnd: #9e00ff;
    --textColorSoftEmphasis: #333;
    --textColorPerkCTA: #604FCD;

    --shadowColorED: 0, 80, 255;
    --shadowColorMain: 79, 114, 205;
    /* applied only on tracks/[track] Your mentoring slots (.slots .discussion) */
    --shadowColorSecondary: rgba(var(--shadowColorMain), 0.3);
    --shadowColorNotificationBell: 156, 130, 38;
    --shadowColorKeystroke: 203, 201, 217;

    --color22: #c8d5ef;

    --linkColor: var(--c-2E57E8);
    --buttonBorderColor1: var(--c-26282D);
    --buttonBorderColor2: var(--c-A9A6BD);
    --inputBackgroundColor: var(--c-FFFFFF);
    --inputBorderColor: var(--c-8480A0);
    --inputBorderColorFocus: var(--c-2E57E8);
    --inputBoxShadowColorFocus: rgba(46, 87, 232, 0.25);
    --tabBackgroundColorSelected: #E1EBFF;
    --tabBackgroundColorSelectedLocked: #E1EBFF;
    --tabBorderColorSelected: var(--c-A7B7D6);
    --modalBackgroundColor: rgba(251, 252, 254, 0.7);
    --lockedColor: var(--c-E8EDF7);
    --paginationCurrentBorderColor: var(--c-6E82AA);
    --paginationCurrentBackgroundColor: var(--c-E1EBFF);
    --chartBorderColor: var(--c-D5D8E4);
    --successColor: #3db591;

    --box-shadow-sm: 0px 4px 16px 0px rgb(var(--shadowColorMain), 0.1);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.3);

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    /* -- HLJS light --  */
    /* Atom One Light by Daniel Gamage
    Original One Light Syntax theme from https://github.com/atom/one-light-syntax */

    --hljs-base: none;
    --hljs-mono-1: #383a42;
    --hljs-mono-2: #686b77;
    --hljs-mono-3: #a0a1a7;
    --hljs-hue-1: #0184bb;
    --hljs-hue-2: #4078f2;
    --hljs-hue-3: #a626a4;
    --hljs-hue-4: #50a14f;
    --hljs-hue-5: #e45649;
    --hljs-hue-5-2: #c91243;
    --hljs-hue-6: #986801;
    --hljs-hue-6-2: #c18401;

    --diffDarkGreen: #a9e7c8;
    --diffLightGreen: #e5f8ee;
    --diffDarkRed: #f5adad;
    --diffLightRed: #fce6e6;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --notifications-active-filter: invert(76%) sepia(54%) saturate(3406%)
        hue-rotate(349deg) brightness(92%) contrast(111%);
    --notifications-inactive-filter: invert(17%) sepia(25%) saturate(368%)
        hue-rotate(188deg) brightness(93%) contrast(86%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --tracks-list-joined-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);

    --c-prominent-link-icon-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --white-filter: var(--filter-FFFFFF);
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);
    --purple-light-white-dark-filter: var(--purple-filter);
    --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
        hue-rotate(229deg) brightness(92%) contrast(89%);
    --selected-tab-icon-filter: var(--purple-filter);

    /* TODO: Replace with purple-filter */
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --textColor1-filter: invert(10%) sepia(35%) saturate(3157%)
        hue-rotate(231deg) brightness(99%) contrast(113%);
    --textColor2-filter: invert(7%) sepia(25%) saturate(7470%)
        hue-rotate(241deg) brightness(100%) contrast(107%);
    --textColor3-filter: invert(13%) sepia(4%) saturate(1617%)
        hue-rotate(185deg) brightness(93%) contrast(91%);
    --textColor5-filter: invert(22%) sepia(33%) saturate(565%)
        hue-rotate(209deg) brightness(96%) contrast(93%);
    --textColor6-filter: invert(35%) sepia(3%) saturate(6422%)
        hue-rotate(208deg) brightness(94%) contrast(87%);
    --textColor7-filter: invert(47%) sepia(9%) saturate(1718%)
        hue-rotate(208deg) brightness(94%) contrast(83%);
    --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%);
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    --buttonBorderColor1: invert(10%) sepia(2%) saturate(5253%)
        hue-rotate(186deg) brightness(92%) contrast(84%);
    --yellow-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%);
    /* #A7B7D6 */
    --mid-gray-filter: invert(72%) sepia(16%) saturate(458%) hue-rotate(181deg)
        brightness(101%) contrast(84%);
    --lightGold-filter: invert(87%) sepia(66%) saturate(518%) hue-rotate(308deg)
        brightness(102%) contrast(101%);
    --linkColor-filter: var(--filter-2E57E8);

    --iconFilterMentorDiscussionWidget: var(--orange-filter);
    --iconFilterCommentsCount: var(--textColor6-filter);
    --iconFilterNotificationsProminentLink: var(--linkColor-filter);
    --iconFilterEDConcept: var(--textColor7-filter);
    --iconFilterCaution: none;

    --exercise-header-gradient: linear-gradient(
        180deg,
        #e1ebff 0%,
        rgba(225, 235, 255, 0) 100%
    );

    background-color: var(--backgroundColorB);

    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;
    /* veryLightBlue */
    --c-progress-bg: #e1ebff;
    --page-dashboard-background-image: linear-gradient(
        180deg,
        #e1ebff 70px,
        rgba(225, 235, 255, 0) 290px
    );
    }
}
/* =============== SEPIA =============== */
.theme-sepia {
    --backgroundColorA: var(--c-FFFFFF);
    --backgroundColorA-RGB: 255 255 255;
    --backgroundColorB: var(--c-FBFCFE);
    --backgroundColorC: var(--c-EAECF3);
    --backgroundColorD: var(--c-F0F3F9);
    --backgroundColorE: var(--c-F4F7FD);
    --backgroundColorF: var(--c-FAFAFF);
    --backgroundColorG: var(--c-F6F7FB);
    --backgroundColorH: var(--c-130B43);
    /* veryLightBlue */
    --backgroundColorI: #e1ebff;
    --backgroundColorITransparent: rgba(225, 235, 255, 0);
    --backgroundColorBorderGradientLightPurple: #FAFAFF;
    --backgroundColorNotifications: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #fff4e3, #fff4e3);
    --backgroundColorNotificationsCount: #EB5757;
    --backgroundColorAnnouncementBar: #130B43;
    --backgroundColorSiteFooter: #130B43;
    --backgroundColorTracksListState: #FFF3E1;
    --backgroundColorMentoringRequestedStatusInfo: #FFF3E1;
    --backgroundColorCAlert: #FFF3E1;
    --backgroundColorTextblockCautionContent: #FFFDFA;
    --textColorCAlert: #955D09;
    --textColorCAlertLabel: #3E2705;
    --backgroundColorTracksListJoined: #E1EBFF;
    --backgroundColorTracksListNew: #FFF3E1;
    --backgroundColorIterationCommentsUnread: #FFF3E1;
    --borderColorIterationCommentsUnread: #F69605;
    --textColorIterationCommentsUnread: #26282D;
    --borderColorIterationActive: #2E57E8;
    --textColorIterationActive: #26282D;
    --backgroundColorEDAvailable: #fff;
    --backgroundColorEDIterated: #6A93FF;
    --backgroundColorMentorTrackSelectorSelected: #6A93FF;
    --backgroundColorExerciseStatusTagInProgress: #E1EBFF;
    --backgroundColorExerciseStatusTagLocked: #E1EBFF;
    --backgroundColorConceptMastered: #E7FDF6;
    --backgroundColorConceptLocked: #EAECF3;
    --backgroundColorCompletedHeading: #B8EADB;
    --backgroundColorCReputation: var(--backgroundColorA);
    --backgroundColorEditorActiveLine: #e1ebff88;
    --backgroundColorTeamHeader: linear-gradient(
        180deg,
        var(--backgroundColorE) 0%,
        var(--backgroundColorA) 100%
    );
    --backgroundColorTeamInfoBox: #E1EBFF;
    --backgroundColorImpactPage: #fff;
    --backgroundColorNotificationsUnreadDot: #2E57E8;
    --backgroundColorBuildToolingStatus: white;
    --backgroundColorBtnSecondary: #FAFAFF;
    --backgroundColorBtnSecondaryHover: #f2f0fc;
    --backgroundColorMentorTestimonialsNew: #FFD38F;
    --backgroundColorExternalCTA: #F9F8FF;
    --backgroundColorEasyTag: #EFFFF1;
    --backgroundColorMediumTag: #F7F5E0;
    --backgroundColorHardTag: #F4EBE5;
    --backgroundColorDangerSection: #FFEDED;
    --backgroundColorDonationsFormSelected: #E2EBFF;
    --backgroundColorContributingAdvanced: #FAFAFF;
    --backgroundColorSummaryStatusFailed: #FDEAEA;
    --backgroundColorSummaryStatusFailedBar: #EB5757;
    --backgroundColorReputationInfo: #26282D;
    --backgroundColorNavDropdown: #F0F3F9;
    --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
    --backgroundColorHoverMenuTrack: #fafaff;
    --backgroundColorPerkContainer: #f8f5ff;
    --backgroundColorStarButtonStarred: #fbf6e9;

    --backgroundImpactPageHeader: linear-gradient(
            180deg,
            rgba(251, 251, 255, 0) 79.36%,
            #f4f4fd 100%
        ),
        linear-gradient(
            180deg,
            #fafaff 0%,
            rgba(250, 250, 255, 0.677852) 24.48%,
            rgba(250, 250, 255, 0) 77.6%,
            #fafaff 100%
        ),
        var(--hex-bg-image), #fafaff;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM1IDIuODg3YTEwIDEwIDAgMCAxIDEwIDBsMjQuNjQgMTQuMjI2YTEwIDEwIDAgMCAxIDUgOC42NnYyOC40NTNhMTAgMTAgMCAwIDEtNSA4LjY2TDQ1IDc3LjExNGExMCAxMCAwIDAgMS0xMCAwTDEwLjM1OSA2Mi44ODdhMTAgMTAgMCAwIDEtNS04LjY2VjI1Ljc3NGExMCAxMCAwIDAgMSA1LTguNjZsMjQuNjQtMTQuMjI3eiIvPjxwYXRoIGZpbGw9IiMxMzBCNDMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTY3Ljc2NiAyMC4zNiA0My4xMjUgNi4xMzVhNi4yNSA2LjI1IDAgMCAwLTYuMjUgMEwxMi4yMzQgMjAuMzYxYTYuMjUgNi4yNSAwIDAgMC0zLjEyNSA1LjQxM3YyOC40NTNhNi4yNSA2LjI1IDAgMCAwIDMuMTI1IDUuNDEybDI0LjY0IDE0LjIyN2E2LjI1IDYuMjUgMCAwIDAgNi4yNSAwbDI0LjY0Mi0xNC4yMjdhNi4yNSA2LjI1IDAgMCAwIDMuMTI1LTUuNDEzVjI1Ljc3NGE2LjI1IDYuMjUgMCAwIDAtMy4xMjUtNS40MTN6TTQ1IDIuODg4YTEwIDEwIDAgMCAwLTEwIDBMMTAuMzU5IDE3LjExM2ExMCAxMCAwIDAgMC01IDguNjZ2MjguNDUzYTEwIDEwIDAgMCAwIDUgOC42NmwyNC42NCAxNC4yMjdhMTAgMTAgMCAwIDAgMTAgMGwyNC42NDItMTQuMjI2YTEwIDEwIDAgMCAwIDUtOC42NlYyNS43NzRhMTAgMTAgMCAwIDAtNS04LjY2TDQ1IDIuODg2eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
    --textColorCReputation: var(--textColor7);

    --c-prominent-link-bg: #e1ebff;

    --newBadgeIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDQuNzMyMDVDMTEuNjE4OCA0LjM3NDc5IDEyLjM4MTIgNC4zNzQ3OSAxMyA0LjczMjA1TDIwLjM5MjMgOUMyMS4wMTExIDkuMzU3MjcgMjEuMzkyMyAxMC4wMTc1IDIxLjM5MjMgMTAuNzMyMVYxOS4yNjc5QzIxLjM5MjMgMTkuOTgyNSAyMS4wMTExIDIwLjY0MjcgMjAuMzkyMyAyMUwxMyAyNS4yNjc5QzEyLjM4MTIgMjUuNjI1MiAxMS42MTg4IDI1LjYyNTIgMTEgMjUuMjY3OUwzLjYwNzcgMjFDMi45ODg4OSAyMC42NDI3IDIuNjA3NyAxOS45ODI1IDIuNjA3NyAxOS4yNjhWMTAuNzMyMUMyLjYwNzcgMTAuMDE3NSAyLjk4ODg5IDkuMzU3MjcgMy42MDc3IDlMMTEgNC43MzIwNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMiIgeTE9IjMiIHgyPSIxMiIgeTI9IjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    --newTestimonialIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43NSAzLjc1MDAyQzguOTM5MzMgMy43NDQ1MiA1LjQyNTY4IDUuODA2OTUgMy41NzI4IDkuMTM2ODNDMS43MTk5MSAxMi40NjY3IDEuODE5NTMgMTYuNTM5NyAzLjgzMyAxOS43NzVMMC43NSAyNi4yNUw3LjIyNSAyMy4xNjdDMTEuMDExMyAyNS41MjExIDE1Ljg3MTQgMjUuMjI3NCAxOS4zNDY2IDIyLjQzNDVDMjIuODIxOSAxOS42NDE2IDI0LjE1NDQgMTQuOTU4NSAyMi42NzAxIDEwLjc1NDRDMjEuMTg1OSA2LjU1MDI4IDE3LjIwODQgMy43NDE5MiAxMi43NSAzLjc1MDAyWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzUgMTYuNUMxNS43NSAxOC4xNTY5IDE0LjQwNjkgMTkuNSAxMi43NSAxOS41QzExLjA5MzEgMTkuNSA5Ljc1IDE4LjE1NjkgOS43NSAxNi41SDE1Ljc1WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MV9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04LjI1IDEyLjM3NUM4LjA0Mjg5IDEyLjM3NSA3Ljg3NSAxMi41NDI5IDcuODc1IDEyLjc1QzcuODc1IDEyLjk1NzEgOC4wNDI4OSAxMy4xMjUgOC4yNSAxMy4xMjVDOC40NTcxMSAxMy4xMjUgOC42MjUgMTIuOTU3MSA4LjYyNSAxMi43NUM4LjYyNSAxMi41NDI5IDguNDU3MTEgMTIuMzc1IDguMjUgMTIuMzc1IiBzdHJva2U9InVybCgjcGFpbnQyX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjI1IDEyLjM3NUMxNy4wNDI5IDEyLjM3NSAxNi44NzUgMTIuNTQyOSAxNi44NzUgMTIuNzVDMTYuODc1IDEyLjk1NzEgMTcuMDQyOSAxMy4xMjUgMTcuMjUgMTMuMTI1QzE3LjQ1NzEgMTMuMTI1IDE3LjYyNSAxMi45NTcxIDE3LjYyNSAxMi43NUMxNy42MjUgMTIuNTQyOSAxNy40NTcxIDEyLjM3NSAxNy4yNSAxMi4zNzUiIHN0cm9rZT0idXJsKCNwYWludDNfbGluZWFyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMi4wMDk4IiB5MT0iMy43NSIgeDI9IjEyLjAwOTgiIHkyPSIyNi4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxMi43NSIgeTE9IjE2LjUiIHgyPSIxMi43NSIgeTI9IjE5LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iOC4zNzUiIHkxPSIxMi4zNzUiIHgyPSI4LjM3NSIgeTI9IjEzLjM3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIxNy4zNzUiIHkxPSIxMi4zNzUiIHgyPSIxNy4zNzUiIHkyPSIxMy4zNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");

    --colorPurpleToBrightPurple: #604FCD;
    --purple-to-bright-purple-filter: invert(26%) sepia(66%) saturate(1727%)
        hue-rotate(229deg) brightness(103%) contrast(88%);

    /* used at background linear-gradients */
    --backgroundColorJ: #fbfbff;
    /* lightBlue */
    --fillColorProgress: #2e57e8;
    --borderColor1: var(--c-000000);
    --borderColor3: var(--c-26282D);
    --borderColor4: var(--c-6D6986);
    --borderColor5: var(--c-CBC9D9);
    --borderColor6: var(--c-D5D8E4);
    --borderColor7: var(--c-EAECF3);
    --borderColor8: #EAECF3;
    --borderColor9: var(--c-FFFFFF);

    --borderColorContributionTasksTag: #E2EBFF;
    --borderColorContributorCreditBlock: #d5d8e4;
    --borderColorExerciseStatusTagInProgress: #2E57E8;
    --borderColorDocsDashed: #d5d8e4;
    --borderColorTracksListV3: var(--textColor2);
    /* textColor1 and textColor2 has different dark-themes */
    --textColor1: var(--c-130B43);
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-130B43);
    --textColor3: var(--c-26282D);
    --textColor5: var(--c-3F3A5A);
    --textColor6: var(--c-5C5589);
    --textColor7: var(--c-76709F);
    --textColor8: var(--c-E1EBFF);
    --textColor9: var(--c-FFFFFF);
    /* inline codeblock - gotToLoveAPurple - needs a theme-dark pair  */
    --textColor10: #271b72;
    --textColorExerciseStatusTagInProgress: #2E57E8;
    --textColorTracksListState: #26282D;
    --textColorTracksListJoined: #2E57E8;
    --textColorTracksListNew: #F69605;
    --textColorTrackBreadcrumbs: #2E57E8;
    --textColorLastNavElement: #604FCD;
    --textColorCommentsCount: var(--textColor6);
    --textColorMentorTestimonialsNew: var(--textColor5);
    --textColorMentoringRequestedStatusInfo: #26282D;
    --textColorMentorTrackSelectorSelected: #26282D;
    --textColorProgressTextCompleted: #2E8C70;
    --c-prominent-link-color: #2E57E8;
    --textGradientStart: #2200ff;
    --textGradientEnd: #9e00ff;
    --textColorSoftEmphasis: #333;
    --textColorPerkCTA: #604FCD;

    --shadowColorED: 0, 80, 255;
    --shadowColorMain: 79, 114, 205;
    /* applied only on tracks/[track] Your mentoring slots (.slots .discussion) */
    --shadowColorSecondary: rgba(var(--shadowColorMain), 0.3);
    --shadowColorNotificationBell: 156, 130, 38;
    --shadowColorKeystroke: 203, 201, 217;

    --color22: #c8d5ef;

    --linkColor: var(--c-2E57E8);
    --buttonBorderColor1: var(--c-26282D);
    --buttonBorderColor2: var(--c-A9A6BD);
    --inputBackgroundColor: var(--c-FFFFFF);
    --inputBorderColor: var(--c-8480A0);
    --inputBorderColorFocus: var(--c-2E57E8);
    --inputBoxShadowColorFocus: rgba(46, 87, 232, 0.25);
    --tabBackgroundColorSelected: #E1EBFF;
    --tabBackgroundColorSelectedLocked: #E1EBFF;
    --tabBorderColorSelected: var(--c-A7B7D6);
    --modalBackgroundColor: rgba(251, 252, 254, 0.7);
    --lockedColor: var(--c-E8EDF7);
    --paginationCurrentBorderColor: var(--c-6E82AA);
    --paginationCurrentBackgroundColor: var(--c-E1EBFF);
    --chartBorderColor: var(--c-D5D8E4);
    --successColor: #3db591;

    --box-shadow-sm: 0px 4px 16px 0px rgb(var(--shadowColorMain), 0.1);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.3);

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    /* -- HLJS light --  */
    /* Atom One Light by Daniel Gamage
    Original One Light Syntax theme from https://github.com/atom/one-light-syntax */

    --hljs-base: none;
    --hljs-mono-1: #383a42;
    --hljs-mono-2: #686b77;
    --hljs-mono-3: #a0a1a7;
    --hljs-hue-1: #0184bb;
    --hljs-hue-2: #4078f2;
    --hljs-hue-3: #a626a4;
    --hljs-hue-4: #50a14f;
    --hljs-hue-5: #e45649;
    --hljs-hue-5-2: #c91243;
    --hljs-hue-6: #986801;
    --hljs-hue-6-2: #c18401;

    --diffDarkGreen: #a9e7c8;
    --diffLightGreen: #e5f8ee;
    --diffDarkRed: #f5adad;
    --diffLightRed: #fce6e6;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --notifications-active-filter: invert(76%) sepia(54%) saturate(3406%)
        hue-rotate(349deg) brightness(92%) contrast(111%);
    --notifications-inactive-filter: invert(17%) sepia(25%) saturate(368%)
        hue-rotate(188deg) brightness(93%) contrast(86%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --tracks-list-joined-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);

    --c-prominent-link-icon-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --white-filter: var(--filter-FFFFFF);
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);
    --purple-light-white-dark-filter: var(--purple-filter);
    --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
        hue-rotate(229deg) brightness(92%) contrast(89%);
    --selected-tab-icon-filter: var(--purple-filter);

    /* TODO: Replace with purple-filter */
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --textColor1-filter: invert(10%) sepia(35%) saturate(3157%)
        hue-rotate(231deg) brightness(99%) contrast(113%);
    --textColor2-filter: invert(7%) sepia(25%) saturate(7470%)
        hue-rotate(241deg) brightness(100%) contrast(107%);
    --textColor3-filter: invert(13%) sepia(4%) saturate(1617%)
        hue-rotate(185deg) brightness(93%) contrast(91%);
    --textColor5-filter: invert(22%) sepia(33%) saturate(565%)
        hue-rotate(209deg) brightness(96%) contrast(93%);
    --textColor6-filter: invert(35%) sepia(3%) saturate(6422%)
        hue-rotate(208deg) brightness(94%) contrast(87%);
    --textColor7-filter: invert(47%) sepia(9%) saturate(1718%)
        hue-rotate(208deg) brightness(94%) contrast(83%);
    --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%);
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    --buttonBorderColor1: invert(10%) sepia(2%) saturate(5253%)
        hue-rotate(186deg) brightness(92%) contrast(84%);
    --yellow-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%);
    /* #A7B7D6 */
    --mid-gray-filter: invert(72%) sepia(16%) saturate(458%) hue-rotate(181deg)
        brightness(101%) contrast(84%);
    --lightGold-filter: invert(87%) sepia(66%) saturate(518%) hue-rotate(308deg)
        brightness(102%) contrast(101%);
    --linkColor-filter: var(--filter-2E57E8);

    --iconFilterMentorDiscussionWidget: var(--orange-filter);
    --iconFilterCommentsCount: var(--textColor6-filter);
    --iconFilterNotificationsProminentLink: var(--linkColor-filter);
    --iconFilterEDConcept: var(--textColor7-filter);
    --iconFilterCaution: none;

    --exercise-header-gradient: linear-gradient(
        180deg,
        #e1ebff 0%,
        rgba(225, 235, 255, 0) 100%
    );

    background-color: var(--backgroundColorB);

    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;
    /* veryLightBlue */
    --c-progress-bg: #e1ebff;
    --page-dashboard-background-image: linear-gradient(
        180deg,
        #e1ebff 70px,
        rgba(225, 235, 255, 0) 290px
    );
    filter: sepia(1);
}
/* =============== ACCESSIBILITY DARK =============== */
html:has(body.theme-accessibility-dark) {
        background: #222;
        filter: invert(100%) hue-rotate(180deg);
    }
html body.namespace-bootcamp {
    --backgroundColorA: var(--c-FFFFFF);
    --backgroundColorA-RGB: 255 255 255;
    --backgroundColorB: var(--c-FBFCFE);
    --backgroundColorC: var(--c-EAECF3);
    --backgroundColorD: var(--c-F0F3F9);
    --backgroundColorE: var(--c-F4F7FD);
    --backgroundColorF: var(--c-FAFAFF);
    --backgroundColorG: var(--c-F6F7FB);
    --backgroundColorH: var(--c-130B43);
    /* veryLightBlue */
    --backgroundColorI: #e1ebff;
    --backgroundColorITransparent: rgba(225, 235, 255, 0);
    --backgroundColorBorderGradientLightPurple: #FAFAFF;
    --backgroundColorNotifications: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #fff4e3, #fff4e3);
    --backgroundColorNotificationsCount: #EB5757;
    --backgroundColorAnnouncementBar: #130B43;
    --backgroundColorSiteFooter: #130B43;
    --backgroundColorTracksListState: #FFF3E1;
    --backgroundColorMentoringRequestedStatusInfo: #FFF3E1;
    --backgroundColorCAlert: #FFF3E1;
    --backgroundColorTextblockCautionContent: #FFFDFA;
    --textColorCAlert: #955D09;
    --textColorCAlertLabel: #3E2705;
    --backgroundColorTracksListJoined: #E1EBFF;
    --backgroundColorTracksListNew: #FFF3E1;
    --backgroundColorIterationCommentsUnread: #FFF3E1;
    --borderColorIterationCommentsUnread: #F69605;
    --textColorIterationCommentsUnread: #26282D;
    --borderColorIterationActive: #2E57E8;
    --textColorIterationActive: #26282D;
    --backgroundColorEDAvailable: #fff;
    --backgroundColorEDIterated: #6A93FF;
    --backgroundColorMentorTrackSelectorSelected: #6A93FF;
    --backgroundColorExerciseStatusTagInProgress: #E1EBFF;
    --backgroundColorExerciseStatusTagLocked: #E1EBFF;
    --backgroundColorConceptMastered: #E7FDF6;
    --backgroundColorConceptLocked: #EAECF3;
    --backgroundColorCompletedHeading: #B8EADB;
    --backgroundColorCReputation: var(--backgroundColorA);
    --backgroundColorEditorActiveLine: #e1ebff88;
    --backgroundColorTeamHeader: linear-gradient(
        180deg,
        var(--backgroundColorE) 0%,
        var(--backgroundColorA) 100%
    );
    --backgroundColorTeamInfoBox: #E1EBFF;
    --backgroundColorImpactPage: #fff;
    --backgroundColorNotificationsUnreadDot: #2E57E8;
    --backgroundColorBuildToolingStatus: white;
    --backgroundColorBtnSecondary: #FAFAFF;
    --backgroundColorBtnSecondaryHover: #f2f0fc;
    --backgroundColorMentorTestimonialsNew: #FFD38F;
    --backgroundColorExternalCTA: #F9F8FF;
    --backgroundColorEasyTag: #EFFFF1;
    --backgroundColorMediumTag: #F7F5E0;
    --backgroundColorHardTag: #F4EBE5;
    --backgroundColorDangerSection: #FFEDED;
    --backgroundColorDonationsFormSelected: #E2EBFF;
    --backgroundColorContributingAdvanced: #FAFAFF;
    --backgroundColorSummaryStatusFailed: #FDEAEA;
    --backgroundColorSummaryStatusFailedBar: #EB5757;
    --backgroundColorReputationInfo: #26282D;
    --backgroundColorNavDropdown: #F0F3F9;
    --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
    --backgroundColorHoverMenuTrack: #fafaff;
    --backgroundColorPerkContainer: #f8f5ff;
    --backgroundColorStarButtonStarred: #fbf6e9;

    --backgroundImpactPageHeader: linear-gradient(
            180deg,
            rgba(251, 251, 255, 0) 79.36%,
            #f4f4fd 100%
        ),
        linear-gradient(
            180deg,
            #fafaff 0%,
            rgba(250, 250, 255, 0.677852) 24.48%,
            rgba(250, 250, 255, 0) 77.6%,
            #fafaff 100%
        ),
        var(--hex-bg-image), #fafaff;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM1IDIuODg3YTEwIDEwIDAgMCAxIDEwIDBsMjQuNjQgMTQuMjI2YTEwIDEwIDAgMCAxIDUgOC42NnYyOC40NTNhMTAgMTAgMCAwIDEtNSA4LjY2TDQ1IDc3LjExNGExMCAxMCAwIDAgMS0xMCAwTDEwLjM1OSA2Mi44ODdhMTAgMTAgMCAwIDEtNS04LjY2VjI1Ljc3NGExMCAxMCAwIDAgMSA1LTguNjZsMjQuNjQtMTQuMjI3eiIvPjxwYXRoIGZpbGw9IiMxMzBCNDMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTY3Ljc2NiAyMC4zNiA0My4xMjUgNi4xMzVhNi4yNSA2LjI1IDAgMCAwLTYuMjUgMEwxMi4yMzQgMjAuMzYxYTYuMjUgNi4yNSAwIDAgMC0zLjEyNSA1LjQxM3YyOC40NTNhNi4yNSA2LjI1IDAgMCAwIDMuMTI1IDUuNDEybDI0LjY0IDE0LjIyN2E2LjI1IDYuMjUgMCAwIDAgNi4yNSAwbDI0LjY0Mi0xNC4yMjdhNi4yNSA2LjI1IDAgMCAwIDMuMTI1LTUuNDEzVjI1Ljc3NGE2LjI1IDYuMjUgMCAwIDAtMy4xMjUtNS40MTN6TTQ1IDIuODg4YTEwIDEwIDAgMCAwLTEwIDBMMTAuMzU5IDE3LjExM2ExMCAxMCAwIDAgMC01IDguNjZ2MjguNDUzYTEwIDEwIDAgMCAwIDUgOC42NmwyNC42NCAxNC4yMjdhMTAgMTAgMCAwIDAgMTAgMGwyNC42NDItMTQuMjI2YTEwIDEwIDAgMCAwIDUtOC42NlYyNS43NzRhMTAgMTAgMCAwIDAtNS04LjY2TDQ1IDIuODg2eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
    --textColorCReputation: var(--textColor7);

    --c-prominent-link-bg: #e1ebff;

    --newBadgeIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDQuNzMyMDVDMTEuNjE4OCA0LjM3NDc5IDEyLjM4MTIgNC4zNzQ3OSAxMyA0LjczMjA1TDIwLjM5MjMgOUMyMS4wMTExIDkuMzU3MjcgMjEuMzkyMyAxMC4wMTc1IDIxLjM5MjMgMTAuNzMyMVYxOS4yNjc5QzIxLjM5MjMgMTkuOTgyNSAyMS4wMTExIDIwLjY0MjcgMjAuMzkyMyAyMUwxMyAyNS4yNjc5QzEyLjM4MTIgMjUuNjI1MiAxMS42MTg4IDI1LjYyNTIgMTEgMjUuMjY3OUwzLjYwNzcgMjFDMi45ODg4OSAyMC42NDI3IDIuNjA3NyAxOS45ODI1IDIuNjA3NyAxOS4yNjhWMTAuNzMyMUMyLjYwNzcgMTAuMDE3NSAyLjk4ODg5IDkuMzU3MjcgMy42MDc3IDlMMTEgNC43MzIwNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMiIgeTE9IjMiIHgyPSIxMiIgeTI9IjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    --newTestimonialIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43NSAzLjc1MDAyQzguOTM5MzMgMy43NDQ1MiA1LjQyNTY4IDUuODA2OTUgMy41NzI4IDkuMTM2ODNDMS43MTk5MSAxMi40NjY3IDEuODE5NTMgMTYuNTM5NyAzLjgzMyAxOS43NzVMMC43NSAyNi4yNUw3LjIyNSAyMy4xNjdDMTEuMDExMyAyNS41MjExIDE1Ljg3MTQgMjUuMjI3NCAxOS4zNDY2IDIyLjQzNDVDMjIuODIxOSAxOS42NDE2IDI0LjE1NDQgMTQuOTU4NSAyMi42NzAxIDEwLjc1NDRDMjEuMTg1OSA2LjU1MDI4IDE3LjIwODQgMy43NDE5MiAxMi43NSAzLjc1MDAyWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzUgMTYuNUMxNS43NSAxOC4xNTY5IDE0LjQwNjkgMTkuNSAxMi43NSAxOS41QzExLjA5MzEgMTkuNSA5Ljc1IDE4LjE1NjkgOS43NSAxNi41SDE1Ljc1WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MV9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04LjI1IDEyLjM3NUM4LjA0Mjg5IDEyLjM3NSA3Ljg3NSAxMi41NDI5IDcuODc1IDEyLjc1QzcuODc1IDEyLjk1NzEgOC4wNDI4OSAxMy4xMjUgOC4yNSAxMy4xMjVDOC40NTcxMSAxMy4xMjUgOC42MjUgMTIuOTU3MSA4LjYyNSAxMi43NUM4LjYyNSAxMi41NDI5IDguNDU3MTEgMTIuMzc1IDguMjUgMTIuMzc1IiBzdHJva2U9InVybCgjcGFpbnQyX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjI1IDEyLjM3NUMxNy4wNDI5IDEyLjM3NSAxNi44NzUgMTIuNTQyOSAxNi44NzUgMTIuNzVDMTYuODc1IDEyLjk1NzEgMTcuMDQyOSAxMy4xMjUgMTcuMjUgMTMuMTI1QzE3LjQ1NzEgMTMuMTI1IDE3LjYyNSAxMi45NTcxIDE3LjYyNSAxMi43NUMxNy42MjUgMTIuNTQyOSAxNy40NTcxIDEyLjM3NSAxNy4yNSAxMi4zNzUiIHN0cm9rZT0idXJsKCNwYWludDNfbGluZWFyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMi4wMDk4IiB5MT0iMy43NSIgeDI9IjEyLjAwOTgiIHkyPSIyNi4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxMi43NSIgeTE9IjE2LjUiIHgyPSIxMi43NSIgeTI9IjE5LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iOC4zNzUiIHkxPSIxMi4zNzUiIHgyPSI4LjM3NSIgeTI9IjEzLjM3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIxNy4zNzUiIHkxPSIxMi4zNzUiIHgyPSIxNy4zNzUiIHkyPSIxMy4zNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");

    --colorPurpleToBrightPurple: #604FCD;
    --purple-to-bright-purple-filter: invert(26%) sepia(66%) saturate(1727%)
        hue-rotate(229deg) brightness(103%) contrast(88%);

    /* used at background linear-gradients */
    --backgroundColorJ: #fbfbff;
    /* lightBlue */
    --fillColorProgress: #2e57e8;
    --borderColor1: var(--c-000000);
    --borderColor3: var(--c-26282D);
    --borderColor4: var(--c-6D6986);
    --borderColor5: var(--c-CBC9D9);
    --borderColor6: var(--c-D5D8E4);
    --borderColor7: var(--c-EAECF3);
    --borderColor8: #EAECF3;
    --borderColor9: var(--c-FFFFFF);

    --borderColorContributionTasksTag: #E2EBFF;
    --borderColorContributorCreditBlock: #d5d8e4;
    --borderColorExerciseStatusTagInProgress: #2E57E8;
    --borderColorDocsDashed: #d5d8e4;
    --borderColorTracksListV3: var(--textColor2);
    /* textColor1 and textColor2 has different dark-themes */
    --textColor1: var(--c-130B43);
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-130B43);
    --textColor3: var(--c-26282D);
    --textColor5: var(--c-3F3A5A);
    --textColor6: var(--c-5C5589);
    --textColor7: var(--c-76709F);
    --textColor8: var(--c-E1EBFF);
    --textColor9: var(--c-FFFFFF);
    /* inline codeblock - gotToLoveAPurple - needs a theme-dark pair  */
    --textColor10: #271b72;
    --textColorExerciseStatusTagInProgress: #2E57E8;
    --textColorTracksListState: #26282D;
    --textColorTracksListJoined: #2E57E8;
    --textColorTracksListNew: #F69605;
    --textColorTrackBreadcrumbs: #2E57E8;
    --textColorLastNavElement: #604FCD;
    --textColorCommentsCount: var(--textColor6);
    --textColorMentorTestimonialsNew: var(--textColor5);
    --textColorMentoringRequestedStatusInfo: #26282D;
    --textColorMentorTrackSelectorSelected: #26282D;
    --textColorProgressTextCompleted: #2E8C70;
    --c-prominent-link-color: #2E57E8;
    --textGradientStart: #2200ff;
    --textGradientEnd: #9e00ff;
    --textColorSoftEmphasis: #333;
    --textColorPerkCTA: #604FCD;

    --shadowColorED: 0, 80, 255;
    --shadowColorMain: 79, 114, 205;
    /* applied only on tracks/[track] Your mentoring slots (.slots .discussion) */
    --shadowColorSecondary: rgba(var(--shadowColorMain), 0.3);
    --shadowColorNotificationBell: 156, 130, 38;
    --shadowColorKeystroke: 203, 201, 217;

    --color22: #c8d5ef;

    --linkColor: var(--c-2E57E8);
    --buttonBorderColor1: var(--c-26282D);
    --buttonBorderColor2: var(--c-A9A6BD);
    --inputBackgroundColor: var(--c-FFFFFF);
    --inputBorderColor: var(--c-8480A0);
    --inputBorderColorFocus: var(--c-2E57E8);
    --inputBoxShadowColorFocus: rgba(46, 87, 232, 0.25);
    --tabBackgroundColorSelected: #E1EBFF;
    --tabBackgroundColorSelectedLocked: #E1EBFF;
    --tabBorderColorSelected: var(--c-A7B7D6);
    --modalBackgroundColor: rgba(251, 252, 254, 0.7);
    --lockedColor: var(--c-E8EDF7);
    --paginationCurrentBorderColor: var(--c-6E82AA);
    --paginationCurrentBackgroundColor: var(--c-E1EBFF);
    --chartBorderColor: var(--c-D5D8E4);
    --successColor: #3db591;

    --box-shadow-sm: 0px 4px 16px 0px rgb(var(--shadowColorMain), 0.1);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.3);

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    /* -- HLJS light --  */
    /* Atom One Light by Daniel Gamage
    Original One Light Syntax theme from https://github.com/atom/one-light-syntax */

    --hljs-base: none;
    --hljs-mono-1: #383a42;
    --hljs-mono-2: #686b77;
    --hljs-mono-3: #a0a1a7;
    --hljs-hue-1: #0184bb;
    --hljs-hue-2: #4078f2;
    --hljs-hue-3: #a626a4;
    --hljs-hue-4: #50a14f;
    --hljs-hue-5: #e45649;
    --hljs-hue-5-2: #c91243;
    --hljs-hue-6: #986801;
    --hljs-hue-6-2: #c18401;

    --diffDarkGreen: #a9e7c8;
    --diffLightGreen: #e5f8ee;
    --diffDarkRed: #f5adad;
    --diffLightRed: #fce6e6;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --notifications-active-filter: invert(76%) sepia(54%) saturate(3406%)
        hue-rotate(349deg) brightness(92%) contrast(111%);
    --notifications-inactive-filter: invert(17%) sepia(25%) saturate(368%)
        hue-rotate(188deg) brightness(93%) contrast(86%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --tracks-list-joined-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);

    --c-prominent-link-icon-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --white-filter: var(--filter-FFFFFF);
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);
    --purple-light-white-dark-filter: var(--purple-filter);
    --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
        hue-rotate(229deg) brightness(92%) contrast(89%);
    --selected-tab-icon-filter: var(--purple-filter);

    /* TODO: Replace with purple-filter */
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --textColor1-filter: invert(10%) sepia(35%) saturate(3157%)
        hue-rotate(231deg) brightness(99%) contrast(113%);
    --textColor2-filter: invert(7%) sepia(25%) saturate(7470%)
        hue-rotate(241deg) brightness(100%) contrast(107%);
    --textColor3-filter: invert(13%) sepia(4%) saturate(1617%)
        hue-rotate(185deg) brightness(93%) contrast(91%);
    --textColor5-filter: invert(22%) sepia(33%) saturate(565%)
        hue-rotate(209deg) brightness(96%) contrast(93%);
    --textColor6-filter: invert(35%) sepia(3%) saturate(6422%)
        hue-rotate(208deg) brightness(94%) contrast(87%);
    --textColor7-filter: invert(47%) sepia(9%) saturate(1718%)
        hue-rotate(208deg) brightness(94%) contrast(83%);
    --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%);
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    --buttonBorderColor1: invert(10%) sepia(2%) saturate(5253%)
        hue-rotate(186deg) brightness(92%) contrast(84%);
    --yellow-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%);
    /* #A7B7D6 */
    --mid-gray-filter: invert(72%) sepia(16%) saturate(458%) hue-rotate(181deg)
        brightness(101%) contrast(84%);
    --lightGold-filter: invert(87%) sepia(66%) saturate(518%) hue-rotate(308deg)
        brightness(102%) contrast(101%);
    --linkColor-filter: var(--filter-2E57E8);

    --iconFilterMentorDiscussionWidget: var(--orange-filter);
    --iconFilterCommentsCount: var(--textColor6-filter);
    --iconFilterNotificationsProminentLink: var(--linkColor-filter);
    --iconFilterEDConcept: var(--textColor7-filter);
    --iconFilterCaution: none;

    --exercise-header-gradient: linear-gradient(
        180deg,
        #e1ebff 0%,
        rgba(225, 235, 255, 0) 100%
    );

    background-color: var(--backgroundColorB);

    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;
    /* veryLightBlue */
    --c-progress-bg: #e1ebff;
    --page-dashboard-background-image: linear-gradient(
        180deg,
        #e1ebff 70px,
        rgba(225, 235, 255, 0) 290px
    );
    }
.theme-accessibility-dark {
    --backgroundColorA: var(--c-FFFFFF);
    --backgroundColorA-RGB: 255 255 255;
    --backgroundColorB: var(--c-FBFCFE);
    --backgroundColorC: var(--c-EAECF3);
    --backgroundColorD: var(--c-F0F3F9);
    --backgroundColorE: var(--c-F4F7FD);
    --backgroundColorF: var(--c-FAFAFF);
    --backgroundColorG: var(--c-F6F7FB);
    --backgroundColorH: var(--c-130B43);
    /* veryLightBlue */
    --backgroundColorI: #e1ebff;
    --backgroundColorITransparent: rgba(225, 235, 255, 0);
    --backgroundColorBorderGradientLightPurple: #FAFAFF;
    --backgroundColorNotifications: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #fff4e3, #fff4e3);
    --backgroundColorNotificationsCount: #EB5757;
    --backgroundColorAnnouncementBar: #130B43;
    --backgroundColorSiteFooter: #130B43;
    --backgroundColorTracksListState: #FFF3E1;
    --backgroundColorMentoringRequestedStatusInfo: #FFF3E1;
    --backgroundColorCAlert: #FFF3E1;
    --backgroundColorTextblockCautionContent: #FFFDFA;
    --textColorCAlert: #955D09;
    --textColorCAlertLabel: #3E2705;
    --backgroundColorTracksListJoined: #E1EBFF;
    --backgroundColorTracksListNew: #FFF3E1;
    --backgroundColorIterationCommentsUnread: #FFF3E1;
    --borderColorIterationCommentsUnread: #F69605;
    --textColorIterationCommentsUnread: #26282D;
    --borderColorIterationActive: #2E57E8;
    --textColorIterationActive: #26282D;
    --backgroundColorEDAvailable: #fff;
    --backgroundColorEDIterated: #6A93FF;
    --backgroundColorMentorTrackSelectorSelected: #6A93FF;
    --backgroundColorExerciseStatusTagInProgress: #E1EBFF;
    --backgroundColorExerciseStatusTagLocked: #E1EBFF;
    --backgroundColorConceptMastered: #E7FDF6;
    --backgroundColorConceptLocked: #EAECF3;
    --backgroundColorCompletedHeading: #B8EADB;
    --backgroundColorCReputation: var(--backgroundColorA);
    --backgroundColorEditorActiveLine: #e1ebff88;
    --backgroundColorTeamHeader: linear-gradient(
        180deg,
        var(--backgroundColorE) 0%,
        var(--backgroundColorA) 100%
    );
    --backgroundColorTeamInfoBox: #E1EBFF;
    --backgroundColorImpactPage: #fff;
    --backgroundColorNotificationsUnreadDot: #2E57E8;
    --backgroundColorBuildToolingStatus: white;
    --backgroundColorBtnSecondary: #FAFAFF;
    --backgroundColorBtnSecondaryHover: #f2f0fc;
    --backgroundColorMentorTestimonialsNew: #FFD38F;
    --backgroundColorExternalCTA: #F9F8FF;
    --backgroundColorEasyTag: #EFFFF1;
    --backgroundColorMediumTag: #F7F5E0;
    --backgroundColorHardTag: #F4EBE5;
    --backgroundColorDangerSection: #FFEDED;
    --backgroundColorDonationsFormSelected: #E2EBFF;
    --backgroundColorContributingAdvanced: #FAFAFF;
    --backgroundColorSummaryStatusFailed: #FDEAEA;
    --backgroundColorSummaryStatusFailedBar: #EB5757;
    --backgroundColorReputationInfo: #26282D;
    --backgroundColorNavDropdown: #F0F3F9;
    --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
    --backgroundColorHoverMenuTrack: #fafaff;
    --backgroundColorPerkContainer: #f8f5ff;
    --backgroundColorStarButtonStarred: #fbf6e9;

    --backgroundImpactPageHeader: linear-gradient(
            180deg,
            rgba(251, 251, 255, 0) 79.36%,
            #f4f4fd 100%
        ),
        linear-gradient(
            180deg,
            #fafaff 0%,
            rgba(250, 250, 255, 0.677852) 24.48%,
            rgba(250, 250, 255, 0) 77.6%,
            #fafaff 100%
        ),
        var(--hex-bg-image), #fafaff;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM1IDIuODg3YTEwIDEwIDAgMCAxIDEwIDBsMjQuNjQgMTQuMjI2YTEwIDEwIDAgMCAxIDUgOC42NnYyOC40NTNhMTAgMTAgMCAwIDEtNSA4LjY2TDQ1IDc3LjExNGExMCAxMCAwIDAgMS0xMCAwTDEwLjM1OSA2Mi44ODdhMTAgMTAgMCAwIDEtNS04LjY2VjI1Ljc3NGExMCAxMCAwIDAgMSA1LTguNjZsMjQuNjQtMTQuMjI3eiIvPjxwYXRoIGZpbGw9IiMxMzBCNDMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTY3Ljc2NiAyMC4zNiA0My4xMjUgNi4xMzVhNi4yNSA2LjI1IDAgMCAwLTYuMjUgMEwxMi4yMzQgMjAuMzYxYTYuMjUgNi4yNSAwIDAgMC0zLjEyNSA1LjQxM3YyOC40NTNhNi4yNSA2LjI1IDAgMCAwIDMuMTI1IDUuNDEybDI0LjY0IDE0LjIyN2E2LjI1IDYuMjUgMCAwIDAgNi4yNSAwbDI0LjY0Mi0xNC4yMjdhNi4yNSA2LjI1IDAgMCAwIDMuMTI1LTUuNDEzVjI1Ljc3NGE2LjI1IDYuMjUgMCAwIDAtMy4xMjUtNS40MTN6TTQ1IDIuODg4YTEwIDEwIDAgMCAwLTEwIDBMMTAuMzU5IDE3LjExM2ExMCAxMCAwIDAgMC01IDguNjZ2MjguNDUzYTEwIDEwIDAgMCAwIDUgOC42NmwyNC42NCAxNC4yMjdhMTAgMTAgMCAwIDAgMTAgMGwyNC42NDItMTQuMjI2YTEwIDEwIDAgMCAwIDUtOC42NlYyNS43NzRhMTAgMTAgMCAwIDAtNS04LjY2TDQ1IDIuODg2eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
    --textColorCReputation: var(--textColor7);

    --c-prominent-link-bg: #e1ebff;

    --newBadgeIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDQuNzMyMDVDMTEuNjE4OCA0LjM3NDc5IDEyLjM4MTIgNC4zNzQ3OSAxMyA0LjczMjA1TDIwLjM5MjMgOUMyMS4wMTExIDkuMzU3MjcgMjEuMzkyMyAxMC4wMTc1IDIxLjM5MjMgMTAuNzMyMVYxOS4yNjc5QzIxLjM5MjMgMTkuOTgyNSAyMS4wMTExIDIwLjY0MjcgMjAuMzkyMyAyMUwxMyAyNS4yNjc5QzEyLjM4MTIgMjUuNjI1MiAxMS42MTg4IDI1LjYyNTIgMTEgMjUuMjY3OUwzLjYwNzcgMjFDMi45ODg4OSAyMC42NDI3IDIuNjA3NyAxOS45ODI1IDIuNjA3NyAxOS4yNjhWMTAuNzMyMUMyLjYwNzcgMTAuMDE3NSAyLjk4ODg5IDkuMzU3MjcgMy42MDc3IDlMMTEgNC43MzIwNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMiIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMiIgeTE9IjMiIHgyPSIxMiIgeTI9IjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    --newTestimonialIcon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43NSAzLjc1MDAyQzguOTM5MzMgMy43NDQ1MiA1LjQyNTY4IDUuODA2OTUgMy41NzI4IDkuMTM2ODNDMS43MTk5MSAxMi40NjY3IDEuODE5NTMgMTYuNTM5NyAzLjgzMyAxOS43NzVMMC43NSAyNi4yNUw3LjIyNSAyMy4xNjdDMTEuMDExMyAyNS41MjExIDE1Ljg3MTQgMjUuMjI3NCAxOS4zNDY2IDIyLjQzNDVDMjIuODIxOSAxOS42NDE2IDI0LjE1NDQgMTQuOTU4NSAyMi42NzAxIDEwLjc1NDRDMjEuMTg1OSA2LjU1MDI4IDE3LjIwODQgMy43NDE5MiAxMi43NSAzLjc1MDAyWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzUgMTYuNUMxNS43NSAxOC4xNTY5IDE0LjQwNjkgMTkuNSAxMi43NSAxOS41QzExLjA5MzEgMTkuNSA5Ljc1IDE4LjE1NjkgOS43NSAxNi41SDE1Ljc1WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MV9saW5lYXIpIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04LjI1IDEyLjM3NUM4LjA0Mjg5IDEyLjM3NSA3Ljg3NSAxMi41NDI5IDcuODc1IDEyLjc1QzcuODc1IDEyLjk1NzEgOC4wNDI4OSAxMy4xMjUgOC4yNSAxMy4xMjVDOC40NTcxMSAxMy4xMjUgOC42MjUgMTIuOTU3MSA4LjYyNSAxMi43NUM4LjYyNSAxMi41NDI5IDguNDU3MTEgMTIuMzc1IDguMjUgMTIuMzc1IiBzdHJva2U9InVybCgjcGFpbnQyX2xpbmVhcikiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjI1IDEyLjM3NUMxNy4wNDI5IDEyLjM3NSAxNi44NzUgMTIuNTQyOSAxNi44NzUgMTIuNzVDMTYuODc1IDEyLjk1NzEgMTcuMDQyOSAxMy4xMjUgMTcuMjUgMTMuMTI1QzE3LjQ1NzEgMTMuMTI1IDE3LjYyNSAxMi45NTcxIDE3LjYyNSAxMi43NUMxNy42MjUgMTIuNTQyOSAxNy40NTcxIDEyLjM3NSAxNy4yNSAxMi4zNzUiIHN0cm9rZT0idXJsKCNwYWludDNfbGluZWFyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjciIHI9IjUuNSIgZmlsbD0iI0VCNTc1NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxMi4wMDk4IiB5MT0iMy43NSIgeDI9IjEyLjAwOTgiIHkyPSIyNi4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxMi43NSIgeTE9IjE2LjUiIHgyPSIxMi43NSIgeTI9IjE5LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iOC4zNzUiIHkxPSIxMi4zNzUiIHgyPSI4LjM3NSIgeTI9IjEzLjM3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjIwMEZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMDBGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIxNy4zNzUiIHkxPSIxMi4zNzUiIHgyPSIxNy4zNzUiIHkyPSIxMy4zNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIyMDBGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTAwRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");

    --colorPurpleToBrightPurple: #604FCD;
    --purple-to-bright-purple-filter: invert(26%) sepia(66%) saturate(1727%)
        hue-rotate(229deg) brightness(103%) contrast(88%);

    /* used at background linear-gradients */
    --backgroundColorJ: #fbfbff;
    /* lightBlue */
    --fillColorProgress: #2e57e8;
    --borderColor1: var(--c-000000);
    --borderColor3: var(--c-26282D);
    --borderColor4: var(--c-6D6986);
    --borderColor5: var(--c-CBC9D9);
    --borderColor6: var(--c-D5D8E4);
    --borderColor7: var(--c-EAECF3);
    --borderColor8: #EAECF3;
    --borderColor9: var(--c-FFFFFF);

    --borderColorContributionTasksTag: #E2EBFF;
    --borderColorContributorCreditBlock: #d5d8e4;
    --borderColorExerciseStatusTagInProgress: #2E57E8;
    --borderColorDocsDashed: #d5d8e4;
    --borderColorTracksListV3: var(--textColor2);
    /* textColor1 and textColor2 has different dark-themes */
    --textColor1: var(--c-130B43);
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-130B43);
    --textColor3: var(--c-26282D);
    --textColor5: var(--c-3F3A5A);
    --textColor6: var(--c-5C5589);
    --textColor7: var(--c-76709F);
    --textColor8: var(--c-E1EBFF);
    --textColor9: var(--c-FFFFFF);
    /* inline codeblock - gotToLoveAPurple - needs a theme-dark pair  */
    --textColor10: #271b72;
    --textColorExerciseStatusTagInProgress: #2E57E8;
    --textColorTracksListState: #26282D;
    --textColorTracksListJoined: #2E57E8;
    --textColorTracksListNew: #F69605;
    --textColorTrackBreadcrumbs: #2E57E8;
    --textColorLastNavElement: #604FCD;
    --textColorCommentsCount: var(--textColor6);
    --textColorMentorTestimonialsNew: var(--textColor5);
    --textColorMentoringRequestedStatusInfo: #26282D;
    --textColorMentorTrackSelectorSelected: #26282D;
    --textColorProgressTextCompleted: #2E8C70;
    --c-prominent-link-color: #2E57E8;
    --textGradientStart: #2200ff;
    --textGradientEnd: #9e00ff;
    --textColorSoftEmphasis: #333;
    --textColorPerkCTA: #604FCD;

    --shadowColorED: 0, 80, 255;
    --shadowColorMain: 79, 114, 205;
    /* applied only on tracks/[track] Your mentoring slots (.slots .discussion) */
    --shadowColorSecondary: rgba(var(--shadowColorMain), 0.3);
    --shadowColorNotificationBell: 156, 130, 38;
    --shadowColorKeystroke: 203, 201, 217;

    --color22: #c8d5ef;

    --linkColor: var(--c-2E57E8);
    --buttonBorderColor1: var(--c-26282D);
    --buttonBorderColor2: var(--c-A9A6BD);
    --inputBackgroundColor: var(--c-FFFFFF);
    --inputBorderColor: var(--c-8480A0);
    --inputBorderColorFocus: var(--c-2E57E8);
    --inputBoxShadowColorFocus: rgba(46, 87, 232, 0.25);
    --tabBackgroundColorSelected: #E1EBFF;
    --tabBackgroundColorSelectedLocked: #E1EBFF;
    --tabBorderColorSelected: var(--c-A7B7D6);
    --modalBackgroundColor: rgba(251, 252, 254, 0.7);
    --lockedColor: var(--c-E8EDF7);
    --paginationCurrentBorderColor: var(--c-6E82AA);
    --paginationCurrentBackgroundColor: var(--c-E1EBFF);
    --chartBorderColor: var(--c-D5D8E4);
    --successColor: #3db591;

    --box-shadow-sm: 0px 4px 16px 0px rgb(var(--shadowColorMain), 0.1);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.15);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.3);

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    /* -- HLJS light --  */
    /* Atom One Light by Daniel Gamage
    Original One Light Syntax theme from https://github.com/atom/one-light-syntax */

    --hljs-base: none;
    --hljs-mono-1: #383a42;
    --hljs-mono-2: #686b77;
    --hljs-mono-3: #a0a1a7;
    --hljs-hue-1: #0184bb;
    --hljs-hue-2: #4078f2;
    --hljs-hue-3: #a626a4;
    --hljs-hue-4: #50a14f;
    --hljs-hue-5: #e45649;
    --hljs-hue-5-2: #c91243;
    --hljs-hue-6: #986801;
    --hljs-hue-6-2: #c18401;

    --diffDarkGreen: #a9e7c8;
    --diffLightGreen: #e5f8ee;
    --diffDarkRed: #f5adad;
    --diffLightRed: #fce6e6;

    /* https://codepen.io/sosuke/pen/Pjoqqp */
    --notifications-active-filter: invert(76%) sepia(54%) saturate(3406%)
        hue-rotate(349deg) brightness(92%) contrast(111%);
    --notifications-inactive-filter: invert(17%) sepia(25%) saturate(368%)
        hue-rotate(188deg) brightness(93%) contrast(86%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --tracks-list-joined-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);

    --c-prominent-link-icon-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    --white-filter: var(--filter-FFFFFF);
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);
    --purple-light-white-dark-filter: var(--purple-filter);
    --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
        hue-rotate(229deg) brightness(92%) contrast(89%);
    --selected-tab-icon-filter: var(--purple-filter);

    /* TODO: Replace with purple-filter */
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --textColor1-filter: invert(10%) sepia(35%) saturate(3157%)
        hue-rotate(231deg) brightness(99%) contrast(113%);
    --textColor2-filter: invert(7%) sepia(25%) saturate(7470%)
        hue-rotate(241deg) brightness(100%) contrast(107%);
    --textColor3-filter: invert(13%) sepia(4%) saturate(1617%)
        hue-rotate(185deg) brightness(93%) contrast(91%);
    --textColor5-filter: invert(22%) sepia(33%) saturate(565%)
        hue-rotate(209deg) brightness(96%) contrast(93%);
    --textColor6-filter: invert(35%) sepia(3%) saturate(6422%)
        hue-rotate(208deg) brightness(94%) contrast(87%);
    --textColor7-filter: invert(47%) sepia(9%) saturate(1718%)
        hue-rotate(208deg) brightness(94%) contrast(83%);
    --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%);
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    --buttonBorderColor1: invert(10%) sepia(2%) saturate(5253%)
        hue-rotate(186deg) brightness(92%) contrast(84%);
    --yellow-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%);
    /* #A7B7D6 */
    --mid-gray-filter: invert(72%) sepia(16%) saturate(458%) hue-rotate(181deg)
        brightness(101%) contrast(84%);
    --lightGold-filter: invert(87%) sepia(66%) saturate(518%) hue-rotate(308deg)
        brightness(102%) contrast(101%);
    --linkColor-filter: var(--filter-2E57E8);

    --iconFilterMentorDiscussionWidget: var(--orange-filter);
    --iconFilterCommentsCount: var(--textColor6-filter);
    --iconFilterNotificationsProminentLink: var(--linkColor-filter);
    --iconFilterEDConcept: var(--textColor7-filter);
    --iconFilterCaution: none;

    --exercise-header-gradient: linear-gradient(
        180deg,
        #e1ebff 0%,
        rgba(225, 235, 255, 0) 100%
    );

    background-color: var(--backgroundColorB);

    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;
    /* veryLightBlue */
    --c-progress-bg: #e1ebff;
    --page-dashboard-background-image: linear-gradient(
        180deg,
        #e1ebff 70px,
        rgba(225, 235, 255, 0) 290px
    );
}
.theme-accessibility-dark button:hover, .theme-accessibility-dark a:hover {
            outline: 1px dashed;
            outline-offset: 4px;
        }
.theme-accessibility-dark{

    --c-prominent-link-color: #f0f;
    --c-prominent-link-icon-filter: invert(18%) sepia(100%) saturate(2923%)
        hue-rotate(293deg) brightness(120%) contrast(134%);
    --box-shadow-sm: 0 0 0 2px #000;
    --box-shadow-base: 0 0 0 2px #000;
    --box-shadow-lg: 0 0 0 2px #000;
    --box-shadow-lgZ1: 0 0 0 2px #000;
    --nav-backgroundColor: #e2e8f3;
}
/* negate the filter */
/* img:not(#site-header .c-icon):not(.theme-preference-form-button
            .c-icon):not(#page-insiders .feature .c-icon), */
.theme-accessibility-dark img:not(.c-icon):not(.logo):not(.c-icon.graphic):not(.c-icon.--hex img):not(#page-journey .c-track-icon),
    
    .theme-accessibility-dark img[src*="/assets/graphics"],
    
    .theme-accessibility-dark .img,
    
    .theme-accessibility-dark iframe,
    
    .theme-accessibility-dark .c-avatar,
    
    .theme-accessibility-dark .c-notification,
    
    .theme-accessibility-dark .c-icon.c-exercise-icon:not(#page-journey .c-exercise-icon),
    
    .theme-accessibility-dark .c-icon.filter-none,
    
    .theme-accessibility-dark .c-track-icon:not(#page-journey .c-track-icon),
    
    .theme-accessibility-dark .c-primary-reputation:not(#page-journey .c-primary-reputation),
    
    .theme-accessibility-dark .impact-chart-container,
    
    .theme-accessibility-dark .theme-preference-form-button,
    
    .theme-accessibility-dark .c-badge-medallion,
    
    .theme-accessibility-dark #site-footer,
    
    .theme-accessibility-dark #page-journey,
    
    .theme-accessibility-dark #journey-view,
    
    .theme-accessibility-dark #impact-page .logos .gobridge,
    
    .theme-accessibility-dark #page-journey article.overview-tab header.section-header .c-icon img,
    
    .theme-accessibility-dark #page-organisation-supporters .logos .gobridge,
    
    .theme-accessibility-dark .emoji {
        filter: invert(100%) hue-rotate(180deg);
    }
.theme-accessibility-dark .theme-preference-form-button .c-icon {
            filter: contrast(1);
        }
.theme-accessibility-dark .shadow-buttonS,
    .theme-accessibility-dark .shadow-xsZ1,
    .theme-accessibility-dark .shadow-xsZ1_dark,
    .theme-accessibility-dark .shadow-dark_xsZ1,
    .theme-accessibility-dark .shadow-xsZ1v2,
    .theme-accessibility-dark .shadow-xsZ1v3,
    .theme-accessibility-dark .shadow-sm,
    .theme-accessibility-dark .shadow-smZ1,
    .theme-accessibility-dark .shadow-base,
    .theme-accessibility-dark .shadow-baseZ1,
    .theme-accessibility-dark .shadow-baseZ1v2,
    .theme-accessibility-dark .shadow-lg,
    .theme-accessibility-dark .shadow-lgv2,
    .theme-accessibility-dark .shadow-lgZ1,
    .theme-accessibility-dark .shadow-inputSelected,
    .theme-accessibility-dark .shadow-keystroke,
    .theme-accessibility-dark .shadow-launching,
    .theme-accessibility-dark .shadow-navDropdown,
    .theme-accessibility-dark #page-insiders .feature,
    .theme-accessibility-dark #page-dashboard section.actions-section {
        box-shadow: 0 0 0 2px #000 !important;
    }
.theme-accessibility-dark #page-dashboard section.actions-section {
        border-radius: 0px;
    }
.theme-accessibility-dark #page-donate .c-donations-form {
            box-shadow: 0 0 0 2px #000 !important;
        }
/* Refactoring these, and putting them next to the ones above creates circular dependency */
.theme-accessibility-dark .c-concepts-map .track .layer .card:not(.locked) {
        box-shadow: 0 0 0 2px #000;
    }
.theme-accessibility-dark .c-concepts-map .track .layer .card:not(.locked):hover {
            box-shadow: 0 0 0 4px #000;
        }
.theme-accessibility-dark .c-ed.--completed:hover, .theme-accessibility-dark .c-ed.--published:hover {
                box-shadow: 0 0 0 2px #000;
            }
.theme-accessibility-dark .c-ed.--in_progress:not(.disabled), .theme-accessibility-dark .c-ed.--iterated:not(.disabled), .theme-accessibility-dark .c-ed.--started:not(.disabled) {
                box-shadow: 0 0 0 2px #000;
            }
.theme-accessibility-dark .c-ed.--in_progress:not(.disabled):hover, .theme-accessibility-dark .c-ed.--iterated:not(.disabled):hover, .theme-accessibility-dark .c-ed.--started:not(.disabled):hover {
                    box-shadow: 0 0 0 4px #000;
                }
.theme-accessibility-dark .c-ed.--available.disabled {
                box-shadow: 0 0 0 2px #000;
            }
.theme-accessibility-dark .c-ed.--available:not(.disabled) {
                box-shadow: 0 0 0 2px #000;
            }
.theme-accessibility-dark .c-ed.--available:not(.disabled):hover {
                    box-shadow: 0 0 0 4px #000;
                }
.theme-accessibility-dark #site-header .nav-element .nav-element-dropdown {
        outline: none;
    }
.theme-accessibility-dark #page-insiders .c-insiders-prompt {
            color: var(--textColor1);
        }
.theme-accessibility-dark #page-insiders .lg-container {
            background: var(--backgroundColorA);
        }
.theme-accessibility-dark #page-insiders details {
            background: var(--backgroundColorB);
        }
.theme-accessibility-dark #page-insiders details summary::after {
                filter: invert(100%);
            }
.theme-accessibility-dark #page-insiders details a {
                color: #f0f;
            }
.theme-accessibility-dark #page-insiders {
        color: var(--textColor1);
    }
.theme-accessibility-dark #page-insiders h1,
        .theme-accessibility-dark #page-insiders h2,
        .theme-accessibility-dark #page-insiders h3,
        .theme-accessibility-dark #page-insiders h4 {
            color: var(--textColor1) !important;
        }
.theme-accessibility-dark #page-insiders .gradient-container,
        .theme-accessibility-dark #page-insiders .feature {
            background: var(--backgroundColorA) !important;
        }
.theme-accessibility-dark #page-insiders .gradient-container .c-icon, .theme-accessibility-dark #page-insiders .feature .c-icon {
                filter: hue-rotate(45deg);
            }
.theme-accessibility-dark #page-insiders .feature a{
    color: var(--c-prominent-link-color) !important;
}
.theme-accessibility-dark .nav-dropdown-track-list{
    gap: 8px;
}
.e-hover-grow {
    transition: background-color 0.2s ease-out, transform 0.2s ease-out,
        box-shadow 0.2s ease-out;
}
.e-hover-grow:hover {
        transform: scale(1.03);
        --tw-shadow: var(--box-shadow-lgZ1);
        --tw-shadow-colored: var(--box-shadow-lgZ1);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .theme-accessibility-dark .e-hover-grow:hover {
        box-shadow: 0 0 0 2px #000;
    }
input:not([type="submit"]),
.c-faux-input,
textarea{
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark input:not([type="submit"]),
    .theme-accessibility-dark 
.c-faux-input,
    .theme-accessibility-dark 
textarea {
        box-shadow: 0 0 0 2px #000;
    }
input:not([type="submit"]),
.c-faux-input,
textarea{
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    line-height: 160%;
    color: var(--textColor2);
    background-color: var(--inputBackgroundColor);
}
input:not([type="submit"])::-moz-placeholder, .c-faux-input::-moz-placeholder, textarea::-moz-placeholder{
    color: var(--textColor7);
}
input:not([type="submit"])::placeholder, .c-faux-input::placeholder, textarea::placeholder{
    color: var(--textColor7);
}
input:not([type="submit"]):focus,
    input:not([type="submit"]):focus-within,
    .c-faux-input:focus,
    .c-faux-input:focus-within,
    textarea:focus,
    textarea:focus-within{
    border-color: var(--inputBorderColorFocus);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0px 0px 2px 2px var(--inputBoxShadowColorFocus);
    --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark input:not([type="submit"]):focus,
    .theme-accessibility-dark 
    input:not([type="submit"]):focus-within,
    .theme-accessibility-dark 
    .c-faux-input:focus,
    .theme-accessibility-dark 
    .c-faux-input:focus-within,
    .theme-accessibility-dark 
    textarea:focus,
    .theme-accessibility-dark 
    textarea:focus-within {
        box-shadow: 0 0 0 2px #000;
    }
input:not([type="submit"]):focus,
    input:not([type="submit"]):focus-within,
    .c-faux-input:focus,
    .c-faux-input:focus-within,
    textarea:focus,
    textarea:focus-within{
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}
/* maybe make this default for all inputs */
.portable-input::-moz-placeholder{
    color: var(--textColor6) !important;
}
.portable-input::placeholder{
    color: var(--textColor6) !important;
}
.c-faux-input{
    display: flex;
    align-items: center;
    overflow: hidden;
}
.c-faux-input .c-icon {
        filter: var(--textColor2-filter);
    }
.c-faux-input .icon{
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
.c-faux-input .c-icon,
    .c-faux-input .icon {
        width: 16px;
        margin-right: 16px;
    }
.c-faux-input input{
    flex-grow: 1;
    border-radius: 0;
    border-width: 0;
    padding: 0px;
    background-color: transparent !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
        field-sizing: content;
}
.c-shapes{
    position: relative;
}
.c-shapes:before,
    .c-shapes:after {
        content: "";
        position: absolute;
        top: 30px;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        max-height: 170px;
        display: none;
    }
.c-react-wrapper-common-introducer.c-shapes:before,.c-react-wrapper-common-introducer
    .c-shapes:after {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-shapes:before,.c-react-wrapper-common-introducer .c-introducer
    .c-shapes:after {
        display: flex;
    }
.c-introducer.c-shapes:before,.c-introducer
    .c-shapes:after {
        display: none;
    }
@media (min-width: 640px){

    .c-shapes:before,
    .c-shapes:after{
        display: flex;
            width: 17%;
    }
}
@media (min-width: 768px) {
.c-shapes:before,
    .c-shapes:after {
            width: 13%
    }
        }
@media (min-width: 1024px) {
.c-shapes:before,
    .c-shapes:after {
            width: 8%
    }
        }
.c-shapes:before {
        left: 5%;
    }
@media (min-width: 768px) {
.c-shapes:before {
            left: 10%
    }
        }
.c-shapes:after {
        right: 5%;
    }
@media (min-width: 768px) {
.c-shapes:after {
            right: 10%
    }
        }
.c-shapes.c-shapes-1:before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTQiIGhlaWdodD0iMTQzIiB2aWV3Qm94PSIwIDAgOTQgMTQzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNTUgMjYuOTA5Mkw2OC45MzMyIDEzLjA1MzZMODIuODY2MyAyNi45MDkyTDY4LjkzMzIgNDAuNzY0N0w1NSAyNi45MDkyWiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYzLjg2NjggMjQuMzlMNzQuNjMzMyAxMy42ODM0Qzc2LjIwNzMgMTIuMTE4MiA3OC43NTkzIDEyLjExODIgODAuMzMzMyAxMy42ODM0TDkxLjA5OTggMjQuMzlDOTIuNjczOCAyNS45NTUzIDkyLjY3MzggMjguNDkzIDkxLjA5OTggMzAuMDU4Mkw4MC4zMzMzIDQwLjc2NDhDNzguNzU5MyA0Mi4zMyA3Ni4yMDczIDQyLjMzIDc0LjYzMzMgNDAuNzY0OEw2My44NjY4IDMwLjA1ODJDNjIuMjkyOCAyOC40OTMgNjIuMjkyOCAyNS45NTUzIDYzLjg2NjggMjQuMzlaTTY2LjQwMDEgMjYuOTA5MkM2Ni4yMjUyIDI3LjA4MzEgNjYuMjI1MiAyNy4zNjUxIDY2LjQwMDEgMjcuNTM5TDc3LjE2NjYgMzguMjQ1NkM3Ny4zNDE1IDM4LjQxOTUgNzcuNjI1MSAzOC40MTk1IDc3LjggMzguMjQ1Nkw4OC41NjY1IDI3LjUzOUM4OC43NDE0IDI3LjM2NTEgODguNzQxNCAyNy4wODMxIDg4LjU2NjUgMjYuOTA5Mkw3Ny44IDE2LjIwMjZDNzcuNjI1MSAxNi4wMjg3IDc3LjM0MTUgMTYuMDI4NyA3Ny4xNjY2IDE2LjIwMjZMNjYuNDAwMSAyNi45MDkyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNNS4yOTczMiAxMjAuOTZDNS45OTY4NyAxMjAuMjY0IDcuMTMxMDYgMTIwLjI2NCA3LjgzMDYxIDEyMC45NkwxNy4zMzA1IDEzMC40MDdDMTguMDMgMTMxLjEwMiAxOC4wMyAxMzIuMjMgMTcuMzMwNSAxMzIuOTI2QzE2LjYzMDkgMTMzLjYyMiAxNS40OTY3IDEzMy42MjIgMTQuNzk3MiAxMzIuOTI2TDUuMjk3MzIgMTIzLjQ3OUM0LjU5Nzc2IDEyMi43ODMgNC41OTc3NiAxMjEuNjU1IDUuMjk3MzIgMTIwLjk2WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMS4yNjY1NSAxMjguOTc2QzEuOTY2MSAxMjguMjggMy4xMDAzIDEyOC4yOCAzLjc5OTg1IDEyOC45NzZMMTMuMjk5NyAxMzguNDIzQzEzLjk5OTMgMTM5LjExOSAxMy45OTkzIDE0MC4yNDYgMTMuMjk5NyAxNDAuOTQyQzEyLjYwMDIgMTQxLjYzOCAxMS40NjYgMTQxLjYzOCAxMC43NjY0IDE0MC45NDJMMS4yNjY1NSAxMzEuNDk1QzAuNTY3MDAzIDEzMC43OTkgMC41NjcwMDIgMTI5LjY3MiAxLjI2NjU1IDEyOC45NzZaIiBmaWxsPSIjMTMwQjQzIi8+Cjwvc3ZnPgo=");

        height: 142px !important;
        width: 94px !important;
    }
.c-shapes.c-shapes-1:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMTE3IiB2aWV3Qm94PSIwIDAgMzAgMTE3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAwLjcwMDQzOUgxOC43NDgzVjE5LjUyMTFIMFYwLjcwMDQzOVoiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY2OTg1IDQuOTc3NzhIMjIuMTU3MkMyNC4yNzUxIDQuOTc3NzggMjUuOTkyMSA2LjcwMTM0IDI1Ljk5MjEgOC44Mjc0N1YyMy4zNzA3QzI1Ljk5MjEgMjUuNDk2OCAyNC4yNzUxIDI3LjIyMDQgMjIuMTU3MiAyNy4yMjA0SDcuNjY5ODVDNS41NTE5IDI3LjIyMDQgMy44MzQ5NiAyNS40OTY4IDMuODM0OTYgMjMuMzcwN1Y4LjgyNzQ3QzMuODM0OTYgNi43MDEzNSA1LjU1MTkgNC45Nzc3OCA3LjY2OTg1IDQuOTc3NzhaTTcuNjY5ODUgOC4zOTk3M0M3LjQzNDUyIDguMzk5NzMgNy4yNDM3NSA4LjU5MTIzIDcuMjQzNzUgOC44Mjc0N1YyMy4zNzA3QzcuMjQzNzUgMjMuNjA3IDcuNDM0NTIgMjMuNzk4NSA3LjY2OTg1IDIzLjc5ODVIMjIuMTU3MkMyMi4zOTI1IDIzLjc5ODUgMjIuNTgzMyAyMy42MDcgMjIuNTgzMyAyMy4zNzA3VjguODI3NDdDMjIuNTgzMyA4LjU5MTIzIDIyLjM5MjUgOC4zOTk3MyAyMi4xNTcyIDguMzk5NzNINy42Njk4NVoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTAyLjM4MkMxNy4zNDk2IDEwMy4zMSAxNi41OTk4IDEwNC4wNjMgMTUuNjc0OCAxMDQuMDYzQzE0Ljc0OTggMTA0LjA2MyAxNCAxMDMuMzEgMTQgMTAyLjM4MkMxNCAxMDEuNDUzIDE0Ljc0OTggMTAwLjcwMSAxNS42NzQ4IDEwMC43MDFDMTYuNTk5OCAxMDAuNzAxIDE3LjM0OTYgMTAxLjQ1MyAxNy4zNDk2IDEwMi4zODJaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0xNy4zNDk2IDEwOC40MzRDMTcuMzQ5NiAxMDkuMzYzIDE2LjU5OTggMTEwLjExNSAxNS42NzQ4IDExMC4xMTVDMTQuNzQ5OCAxMTAuMTE1IDE0IDEwOS4zNjMgMTQgMTA4LjQzNEMxNCAxMDcuNTA2IDE0Ljc0OTggMTA2Ljc1MyAxNS42NzQ4IDEwNi43NTNDMTYuNTk5OCAxMDYuNzUzIDE3LjM0OTYgMTA3LjUwNiAxNy4zNDk2IDEwOC40MzRaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0xNy4zNDk2IDExNC40ODdDMTcuMzQ5NiAxMTUuNDE1IDE2LjU5OTggMTE2LjE2OCAxNS42NzQ4IDExNi4xNjhDMTQuNzQ5OCAxMTYuMTY4IDE0IDExNS40MTUgMTQgMTE0LjQ4N0MxNCAxMTMuNTU4IDE0Ljc0OTggMTEyLjgwNSAxNS42NzQ4IDExMi44MDVDMTYuNTk5OCAxMTIuODA1IDE3LjM0OTYgMTEzLjU1OCAxNy4zNDk2IDExNC40ODdaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDEwMi4zODJDMjMuMzc4OSAxMDMuMzEgMjIuNjI5MSAxMDQuMDYzIDIxLjcwNDEgMTA0LjA2M0MyMC43NzkxIDEwNC4wNjMgMjAuMDI5MyAxMDMuMzEgMjAuMDI5MyAxMDIuMzgyQzIwLjAyOTMgMTAxLjQ1MyAyMC43NzkxIDEwMC43IDIxLjcwNDEgMTAwLjdDMjIuNjI5MSAxMDAuNyAyMy4zNzg5IDEwMS40NTMgMjMuMzc4OSAxMDIuMzgyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjMuMzc4OSAxMDguNDM0QzIzLjM3ODkgMTA5LjM2MyAyMi42MjkxIDExMC4xMTUgMjEuNzA0MSAxMTAuMTE1QzIwLjc3OTEgMTEwLjExNSAyMC4wMjkzIDEwOS4zNjMgMjAuMDI5MyAxMDguNDM0QzIwLjAyOTMgMTA3LjUwNiAyMC43NzkxIDEwNi43NTMgMjEuNzA0MSAxMDYuNzUzQzIyLjYyOTEgMTA2Ljc1MyAyMy4zNzg5IDEwNy41MDYgMjMuMzc4OSAxMDguNDM0WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjMuMzc4OSAxMTQuNDg3QzIzLjM3ODkgMTE1LjQxNSAyMi42MjkxIDExNi4xNjggMjEuNzA0MSAxMTYuMTY4QzIwLjc3OTEgMTE2LjE2OCAyMC4wMjkzIDExNS40MTUgMjAuMDI5MyAxMTQuNDg3QzIwLjAyOTMgMTEzLjU1OCAyMC43NzkxIDExMi44MDUgMjEuNzA0MSAxMTIuODA1QzIyLjYyOTEgMTEyLjgwNSAyMy4zNzg5IDExMy41NTggMjMuMzc4OSAxMTQuNDg3WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4MiAxMDIuMzgyQzI5LjQwODIgMTAzLjMxIDI4LjY1ODQgMTA0LjA2MyAyNy43MzM0IDEwNC4wNjNDMjYuODA4NCAxMDQuMDYzIDI2LjA1ODYgMTAzLjMxIDI2LjA1ODYgMTAyLjM4MkMyNi4wNTg2IDEwMS40NTMgMjYuODA4NCAxMDAuNyAyNy43MzM0IDEwMC43QzI4LjY1ODQgMTAwLjcgMjkuNDA4MiAxMDEuNDUzIDI5LjQwODIgMTAyLjM4MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTI5LjQwODIgMTA4LjQzNEMyOS40MDgyIDEwOS4zNjMgMjguNjU4NCAxMTAuMTE1IDI3LjczMzQgMTEwLjExNUMyNi44MDg0IDExMC4xMTUgMjYuMDU4NiAxMDkuMzYzIDI2LjA1ODYgMTA4LjQzNEMyNi4wNTg2IDEwNy41MDYgMjYuODA4NCAxMDYuNzUzIDI3LjczMzQgMTA2Ljc1M0MyOC42NTg0IDEwNi43NTMgMjkuNDA4MiAxMDcuNTA2IDI5LjQwODIgMTA4LjQzNFoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTI5LjQwODIgMTE0LjQ4N0MyOS40MDgyIDExNS40MTUgMjguNjU4NCAxMTYuMTY4IDI3LjczMzQgMTE2LjE2OEMyNi44MDg0IDExNi4xNjggMjYuMDU4NiAxMTUuNDE1IDI2LjA1ODYgMTE0LjQ4N0MyNi4wNTg2IDExMy41NTggMjYuODA4NCAxMTIuODA1IDI3LjczMzQgMTEyLjgwNUMyOC42NTg0IDExMi44MDUgMjkuNDA4MiAxMTMuNTU4IDI5LjQwODIgMTE0LjQ4N1oiIGZpbGw9IiMxMzBCNDMiLz4KPC9zdmc+Cg==");
        height: 116px !important;
        width: 29px !important;
    }
.c-shapes-impact{
    position: relative;
}
.c-shapes-impact:before,
    .c-shapes-impact:after {
        content: "";
        position: absolute;
        height: 100%;
        background-repeat: no-repeat;
        top: 0px;
        background-size: contain;
        max-height: 170px;
        display: none;
    }
.c-react-wrapper-common-introducer.c-shapes-impact:before,.c-react-wrapper-common-introducer
    .c-shapes-impact:after {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-shapes-impact:before,.c-react-wrapper-common-introducer .c-introducer
    .c-shapes-impact:after {
        display: flex;
    }
.c-introducer.c-shapes-impact:before,.c-introducer
    .c-shapes-impact:after {
        display: none;
    }
@media (min-width: 640px){

    .c-shapes-impact:before,
    .c-shapes-impact:after{
        display: flex;
            width: 17%;
    }
}
@media (min-width: 768px) {
.c-shapes-impact:before,
    .c-shapes-impact:after {
            width: 13%
    }
        }
@media (min-width: 1024px) {
.c-shapes-impact:before,
    .c-shapes-impact:after {
            width: 8%
    }
        }
.c-shapes-impact:before {
        left: 1%;
    }
@media (min-width: 1280px) {
.c-shapes-impact:before {
            left: 5%
    }
        }
.c-shapes-impact:after {
        right: 1%;
    }
@media (min-width: 1280px) {
.c-shapes-impact:after {
            right: 5%
    }
        }
.c-shapes-impact.c-shapes-1:before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMTE3IiB2aWV3Qm94PSIwIDAgMzAgMTE3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAwLjcwMDQzOUgxOC43NDgzVjE5LjUyMTFIMFYwLjcwMDQzOVoiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY2OTg1IDQuOTc3NzhIMjIuMTU3MkMyNC4yNzUxIDQuOTc3NzggMjUuOTkyMSA2LjcwMTM0IDI1Ljk5MjEgOC44Mjc0N1YyMy4zNzA3QzI1Ljk5MjEgMjUuNDk2OCAyNC4yNzUxIDI3LjIyMDQgMjIuMTU3MiAyNy4yMjA0SDcuNjY5ODVDNS41NTE5IDI3LjIyMDQgMy44MzQ5NiAyNS40OTY4IDMuODM0OTYgMjMuMzcwN1Y4LjgyNzQ3QzMuODM0OTYgNi43MDEzNSA1LjU1MTkgNC45Nzc3OCA3LjY2OTg1IDQuOTc3NzhaTTcuNjY5ODUgOC4zOTk3M0M3LjQzNDUyIDguMzk5NzMgNy4yNDM3NSA4LjU5MTIzIDcuMjQzNzUgOC44Mjc0N1YyMy4zNzA3QzcuMjQzNzUgMjMuNjA3IDcuNDM0NTIgMjMuNzk4NSA3LjY2OTg1IDIzLjc5ODVIMjIuMTU3MkMyMi4zOTI1IDIzLjc5ODUgMjIuNTgzMyAyMy42MDcgMjIuNTgzMyAyMy4zNzA3VjguODI3NDdDMjIuNTgzMyA4LjU5MTIzIDIyLjM5MjUgOC4zOTk3MyAyMi4xNTcyIDguMzk5NzNINy42Njk4NVoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTAyLjM4MkMxNy4zNDk2IDEwMy4zMSAxNi41OTk4IDEwNC4wNjMgMTUuNjc0OCAxMDQuMDYzQzE0Ljc0OTggMTA0LjA2MyAxNCAxMDMuMzEgMTQgMTAyLjM4MkMxNCAxMDEuNDUzIDE0Ljc0OTggMTAwLjcwMSAxNS42NzQ4IDEwMC43MDFDMTYuNTk5OCAxMDAuNzAxIDE3LjM0OTYgMTAxLjQ1MyAxNy4zNDk2IDEwMi4zODJaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0xNy4zNDk2IDEwOC40MzRDMTcuMzQ5NiAxMDkuMzYzIDE2LjU5OTggMTEwLjExNSAxNS42NzQ4IDExMC4xMTVDMTQuNzQ5OCAxMTAuMTE1IDE0IDEwOS4zNjMgMTQgMTA4LjQzNEMxNCAxMDcuNTA2IDE0Ljc0OTggMTA2Ljc1MyAxNS42NzQ4IDEwNi43NTNDMTYuNTk5OCAxMDYuNzUzIDE3LjM0OTYgMTA3LjUwNiAxNy4zNDk2IDEwOC40MzRaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0xNy4zNDk2IDExNC40ODdDMTcuMzQ5NiAxMTUuNDE1IDE2LjU5OTggMTE2LjE2OCAxNS42NzQ4IDExNi4xNjhDMTQuNzQ5OCAxMTYuMTY4IDE0IDExNS40MTUgMTQgMTE0LjQ4N0MxNCAxMTMuNTU4IDE0Ljc0OTggMTEyLjgwNSAxNS42NzQ4IDExMi44MDVDMTYuNTk5OCAxMTIuODA1IDE3LjM0OTYgMTEzLjU1OCAxNy4zNDk2IDExNC40ODdaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDEwMi4zODJDMjMuMzc4OSAxMDMuMzEgMjIuNjI5MSAxMDQuMDYzIDIxLjcwNDEgMTA0LjA2M0MyMC43NzkxIDEwNC4wNjMgMjAuMDI5MyAxMDMuMzEgMjAuMDI5MyAxMDIuMzgyQzIwLjAyOTMgMTAxLjQ1MyAyMC43NzkxIDEwMC43IDIxLjcwNDEgMTAwLjdDMjIuNjI5MSAxMDAuNyAyMy4zNzg5IDEwMS40NTMgMjMuMzc4OSAxMDIuMzgyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjMuMzc4OSAxMDguNDM0QzIzLjM3ODkgMTA5LjM2MyAyMi42MjkxIDExMC4xMTUgMjEuNzA0MSAxMTAuMTE1QzIwLjc3OTEgMTEwLjExNSAyMC4wMjkzIDEwOS4zNjMgMjAuMDI5MyAxMDguNDM0QzIwLjAyOTMgMTA3LjUwNiAyMC43NzkxIDEwNi43NTMgMjEuNzA0MSAxMDYuNzUzQzIyLjYyOTEgMTA2Ljc1MyAyMy4zNzg5IDEwNy41MDYgMjMuMzc4OSAxMDguNDM0WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjMuMzc4OSAxMTQuNDg3QzIzLjM3ODkgMTE1LjQxNSAyMi42MjkxIDExNi4xNjggMjEuNzA0MSAxMTYuMTY4QzIwLjc3OTEgMTE2LjE2OCAyMC4wMjkzIDExNS40MTUgMjAuMDI5MyAxMTQuNDg3QzIwLjAyOTMgMTEzLjU1OCAyMC43NzkxIDExMi44MDUgMjEuNzA0MSAxMTIuODA1QzIyLjYyOTEgMTEyLjgwNSAyMy4zNzg5IDExMy41NTggMjMuMzc4OSAxMTQuNDg3WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4MiAxMDIuMzgyQzI5LjQwODIgMTAzLjMxIDI4LjY1ODQgMTA0LjA2MyAyNy43MzM0IDEwNC4wNjNDMjYuODA4NCAxMDQuMDYzIDI2LjA1ODYgMTAzLjMxIDI2LjA1ODYgMTAyLjM4MkMyNi4wNTg2IDEwMS40NTMgMjYuODA4NCAxMDAuNyAyNy43MzM0IDEwMC43QzI4LjY1ODQgMTAwLjcgMjkuNDA4MiAxMDEuNDUzIDI5LjQwODIgMTAyLjM4MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTI5LjQwODIgMTA4LjQzNEMyOS40MDgyIDEwOS4zNjMgMjguNjU4NCAxMTAuMTE1IDI3LjczMzQgMTEwLjExNUMyNi44MDg0IDExMC4xMTUgMjYuMDU4NiAxMDkuMzYzIDI2LjA1ODYgMTA4LjQzNEMyNi4wNTg2IDEwNy41MDYgMjYuODA4NCAxMDYuNzUzIDI3LjczMzQgMTA2Ljc1M0MyOC42NTg0IDEwNi43NTMgMjkuNDA4MiAxMDcuNTA2IDI5LjQwODIgMTA4LjQzNFoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTI5LjQwODIgMTE0LjQ4N0MyOS40MDgyIDExNS40MTUgMjguNjU4NCAxMTYuMTY4IDI3LjczMzQgMTE2LjE2OEMyNi44MDg0IDExNi4xNjggMjYuMDU4NiAxMTUuNDE1IDI2LjA1ODYgMTE0LjQ4N0MyNi4wNTg2IDExMy41NTggMjYuODA4NCAxMTIuODA1IDI3LjczMzQgMTEyLjgwNUMyOC42NTg0IDExMi44MDUgMjkuNDA4MiAxMTMuNTU4IDI5LjQwODIgMTE0LjQ4N1oiIGZpbGw9IiMxMzBCNDMiLz4KPC9zdmc+Cg==");
        height: 116px !important;
        width: 29px !important;
    }
.c-shapes-impact.c-shapes-1:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTQiIGhlaWdodD0iMTQzIiB2aWV3Qm94PSIwIDAgOTQgMTQzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNTUgMjYuOTA5Mkw2OC45MzMyIDEzLjA1MzZMODIuODY2MyAyNi45MDkyTDY4LjkzMzIgNDAuNzY0N0w1NSAyNi45MDkyWiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYzLjg2NjggMjQuMzlMNzQuNjMzMyAxMy42ODM0Qzc2LjIwNzMgMTIuMTE4MiA3OC43NTkzIDEyLjExODIgODAuMzMzMyAxMy42ODM0TDkxLjA5OTggMjQuMzlDOTIuNjczOCAyNS45NTUzIDkyLjY3MzggMjguNDkzIDkxLjA5OTggMzAuMDU4Mkw4MC4zMzMzIDQwLjc2NDhDNzguNzU5MyA0Mi4zMyA3Ni4yMDczIDQyLjMzIDc0LjYzMzMgNDAuNzY0OEw2My44NjY4IDMwLjA1ODJDNjIuMjkyOCAyOC40OTMgNjIuMjkyOCAyNS45NTUzIDYzLjg2NjggMjQuMzlaTTY2LjQwMDEgMjYuOTA5MkM2Ni4yMjUyIDI3LjA4MzEgNjYuMjI1MiAyNy4zNjUxIDY2LjQwMDEgMjcuNTM5TDc3LjE2NjYgMzguMjQ1NkM3Ny4zNDE1IDM4LjQxOTUgNzcuNjI1MSAzOC40MTk1IDc3LjggMzguMjQ1Nkw4OC41NjY1IDI3LjUzOUM4OC43NDE0IDI3LjM2NTEgODguNzQxNCAyNy4wODMxIDg4LjU2NjUgMjYuOTA5Mkw3Ny44IDE2LjIwMjZDNzcuNjI1MSAxNi4wMjg3IDc3LjM0MTUgMTYuMDI4NyA3Ny4xNjY2IDE2LjIwMjZMNjYuNDAwMSAyNi45MDkyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNNS4yOTczMiAxMjAuOTZDNS45OTY4NyAxMjAuMjY0IDcuMTMxMDYgMTIwLjI2NCA3LjgzMDYxIDEyMC45NkwxNy4zMzA1IDEzMC40MDdDMTguMDMgMTMxLjEwMiAxOC4wMyAxMzIuMjMgMTcuMzMwNSAxMzIuOTI2QzE2LjYzMDkgMTMzLjYyMiAxNS40OTY3IDEzMy42MjIgMTQuNzk3MiAxMzIuOTI2TDUuMjk3MzIgMTIzLjQ3OUM0LjU5Nzc2IDEyMi43ODMgNC41OTc3NiAxMjEuNjU1IDUuMjk3MzIgMTIwLjk2WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMS4yNjY1NSAxMjguOTc2QzEuOTY2MSAxMjguMjggMy4xMDAzIDEyOC4yOCAzLjc5OTg1IDEyOC45NzZMMTMuMjk5NyAxMzguNDIzQzEzLjk5OTMgMTM5LjExOSAxMy45OTkzIDE0MC4yNDYgMTMuMjk5NyAxNDAuOTQyQzEyLjYwMDIgMTQxLjYzOCAxMS40NjYgMTQxLjYzOCAxMC43NjY0IDE0MC45NDJMMS4yNjY1NSAxMzEuNDk1QzAuNTY3MDAzIDEzMC43OTkgMC41NjcwMDIgMTI5LjY3MiAxLjI2NjU1IDEyOC45NzZaIiBmaWxsPSIjMTMwQjQzIi8+Cjwvc3ZnPgo=");

        height: 142px !important;
        width: 94px !important;
    }
.t-b-mips {
    border-color: rgb(var(--track-color-mips));
}
.t-b-cpp {
    border-color: rgb(var(--track-color-cpp));
}
.t-b-fsharp {
    border-color: rgb(var(--track-color-fsharp));
}
.t-b-csharp {
    border-color: rgb(var(--track-color-csharp));
}
.t-b-c {
    border-color: rgb(var(--track-color-c));
}
.t-b-ruby {
    border-color: rgb(var(--track-color-ruby));
}
.t-b-kotlin {
    border-color: rgb(var(--track-color-kotlin));
}
.t-b-javascript {
    border-color: rgb(var(--track-color-javascript));
}
.t-b-bash {
    border-color: rgb(var(--track-color-bash));
}
.t-b-clojure {
    border-color: rgb(var(--track-color-clojure));
}
.t-b-coffeescript {
    border-color: rgb(var(--track-color-coffeescript));
}
.t-b-common-lisp {
    border-color: rgb(var(--track-color-common-lisp));
}
.t-b-crystal {
    border-color: rgb(var(--track-color-crystal));
}
.t-b-d {
    border-color: rgb(var(--track-color-d));
}
.t-b-dart {
    border-color: rgb(var(--track-color-dart));
}
.t-b-elm {
    border-color: rgb(var(--track-color-elm));
}
.t-b-emacs-lisp {
    border-color: rgb(var(--track-color-emacs-lisp));
}
.t-b-erlang {
    border-color: rgb(var(--track-color-erlang));
}
.t-b-f {
    border-color: rgb(var(--track-color-f));
}
.t-b-go {
    border-color: rgb(var(--track-color-go));
}
.t-b-haskell {
    border-color: rgb(var(--track-color-haskell));
}
.t-b-java {
    border-color: rgb(var(--track-color-java));
}
.t-b-julia {
    border-color: rgb(var(--track-color-julia));
}
.t-b-lua {
    border-color: rgb(var(--track-color-lua));
}
.t-b-ocaml {
    border-color: rgb(var(--track-color-ocaml));
}
.t-b-perl5 {
    border-color: rgb(var(--track-color-perl5));
}
.t-b-python {
    border-color: rgb(var(--track-color-python));
}
.t-b-elixir {
    border-color: rgb(var(--track-color-elixir));
}
.t-b-nim {
    border-color: rgb(var(--track-color-nim));
}
.t-b-clojurescript {
    border-color: rgb(var(--track-color-clojurescript));
}
.t-b-ceylon {
    border-color: rgb(var(--track-color-celyon));
}
.t-b-ballerina {
    border-color: rgb(var(--track-color-ballernia));
}
.t-b-cf {
    border-color: rgb(var(--track-color-cf));
}
.t-b-cfml {
    border-color: rgb(var(--track-color-cfml));
}
.t-b-delphi {
    border-color: rgb(var(--track-color-delphi));
}
.t-b-groovy {
    border-color: rgb(var(--track-color-groovy));
}
.t-b-haxe {
    border-color: rgb(var(--track-color-haxe));
}
.t-b-idris {
    border-color: rgb(var(--track-color-idris));
}
.t-b-lfe {
    border-color: rgb(var(--track-color-lfe));
}
.t-b-objective-c {
    border-color: rgb(var(--track-color-objective-c));
}
.t-b-raku {
    border-color: rgb(var(--track-color-raku));
}
.t-b-pharo-smalltalk {
    border-color: rgb(var(--track-color-pharo-smalltalk));
}
.t-b-php {
    border-color: rgb(var(--track-color-php));
}
.t-b-plsql {
    border-color: rgb(var(--track-color-plsql));
}
.t-b-powershell {
    border-color: rgb(var(--track-color-powershell));
}
.t-b-prolog {
    border-color: rgb(var(--track-color-prolog));
}
.t-b-purescript {
    border-color: rgb(var(--track-color-purescript));
}
.t-b-r {
    border-color: rgb(var(--track-color-r));
}
.t-b-racket {
    border-color: rgb(var(--track-color-racket));
}
.t-b-reasonml {
    border-color: rgb(var(--track-color-reasonml));
}
.t-b-rust {
    border-color: rgb(var(--track-color-rust));
}
.t-b-scala {
    border-color: rgb(var(--track-color-scala));
}
.t-b-scheme {
    border-color: rgb(var(--track-color-scheme));
}
.t-b-sml {
    border-color: rgb(var(--track-color-sml));
}
.t-b-swift {
    border-color: rgb(var(--track-color-swift));
}
.t-b-tcl {
    border-color: rgb(var(--track-color-tcl));
}
.t-b-typescript {
    border-color: rgb(var(--track-color-typescript));
}
.t-b-vimscript {
    border-color: rgb(var(--track-color-vimscript));
}
.t-b-vbnet {
    border-color: rgb(var(--track-color-vbnet));
}
.t-b-x86-64-assembly {
    border-color: rgb(var(--track-color-x86-64-assembly));
}
.t-b-gnu-apl {
    border-color: rgb(var(--track-color-gnu-apl));
}
.c-skeleton-loader{
    display: flex;
    flex-direction: column;
}
@keyframes skeletonShimmer {
        100% {
            transform: translateX(100%);
        }
    }
.c-skeleton-loader .skeleton-text{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.c-skeleton-loader .skeleton-box{
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: var(--textColor6);
    opacity: 0.2;
}
.c-skeleton-loader .skeleton-box::after{
    position: absolute;
    inset: 0px;
            transform: translateX(-100%);
            background-image: linear-gradient(
                90deg,
                rgba(255,255,255, 0) 0,
                rgba(255,255,255, 0.2) 20%,
                rgba(255,255,255, 0.5) 60%,
                rgba(255,255,255, 0)
            );
            animation: skeletonShimmer 1s infinite;
            content: "";
}
.c-skeleton-loader .skeleton-box.line{
    height: 1em;
    border-radius: 3px;
}
.c-skeleton-loader .skeleton-box.circle{
    border-radius: 100%;
}
.c-skeleton-loader .skeleton-box.tag{
    border-radius: 100px;
}
.c-skeleton-loader .skeleton-box.hex {
            -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
            mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-clip: border-box;
        }
.c-skeleton-loader .skeleton-box.circle,
        .c-skeleton-loader .skeleton-box.rect,
        .c-skeleton-loader .skeleton-box.hex{
    flex-shrink: 0;
}
.c-skeleton-loader .skeleton-box.hidden-under-md{
    display: none;
}
.c-react-wrapper-common-introducer.c-skeleton-loader .skeleton-box.hidden-under-md {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-skeleton-loader .skeleton-box.hidden-under-md {
        display: flex;
    }
.c-introducer.c-skeleton-loader .skeleton-box.hidden-under-md {
        display: none;
    }
@media (min-width: 768px){

    .c-skeleton-loader .skeleton-box.hidden-under-md{
        display: inline-block;
    }
}
.c-skeleton-loader .skeleton-box.hidden-under-lg{
    display: none;
}
.c-react-wrapper-common-introducer.c-skeleton-loader .skeleton-box.hidden-under-lg {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-skeleton-loader .skeleton-box.hidden-under-lg {
        display: flex;
    }
.c-introducer.c-skeleton-loader .skeleton-box.hidden-under-lg {
        display: none;
    }
@media (min-width: 1024px){

    .c-skeleton-loader .skeleton-box.hidden-under-lg{
        display: inline-block;
    }
}
.c-generic-tooltip{
    z-index: 80;
    background-color: var(--textColor1-no-dark);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    /* this one doesn't need a dark mode */
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-radius: 8px;
    box-shadow: 0px 4px 24px 0px #00000026;

    max-width: 500px;
}
.c-generic-tooltip p + p{
    margin-top: 8px;
}
/* Keep until deleted everywhere */
.c-user-tooltip{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-user-tooltip {
        box-shadow: 0 0 0 2px #000;
    }
.c-user-tooltip{
    position: relative;
    z-index: 80;
        width: -moz-max-content;
        width: max-content;

    width: 460px;
}
.c-user-tooltip .heading{
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.c-user-tooltip .heading .c-avatar {
            width: 48px;
            height: 48px;
            margin-right: 16px;
        }
.c-user-tooltip .heading .identifier{
    flex-grow: 1;
}
.c-user-tooltip .heading .identifier .name{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor3);
}
.c-user-tooltip .heading .identifier .handle{
    font-size: 15px;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor6);
}
.c-user-tooltip .bio{
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 150%;
}
.c-user-tooltip .location{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}
.c-user-tooltip .location .c-icon {
            height: 16px;
            width: 16px;
            margin-right: 12px;
        filter: var(--textColor6-filter);
        }
.c-exercise-tooltip{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-exercise-tooltip {
        box-shadow: 0 0 0 2px #000;
    }
.c-exercise-tooltip{
    position: relative;
    z-index: 80;
        width: -moz-max-content;
        width: max-content;
    min-height: 124px;
    min-width: 400px;
    display: grid;
    place-items: center;
}
.c-exercise-tooltip .c-exercise-widget .--action-icon{
    display: none;
}
.c-react-wrapper-common-introducer.c-exercise-tooltip .c-exercise-widget .--action-icon {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-exercise-tooltip .c-exercise-widget .--action-icon {
        display: flex;
    }
.c-introducer.c-exercise-tooltip .c-exercise-widget .--action-icon {
        display: none;
    }
.c-exercise-tooltip .c-exercise-widget .--blurb {
            max-width: 350px;
            margin-left: -80px;
        }
.c-perk-a{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--borderColor5);
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
    padding-bottom: 12px;
    text-align: left;
    font-size: 14px;
    line-height: 140%;
}
.c-perk-a:hover{
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.c-perk-a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    background: var(--backgroundColorPerkContainer);

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(112 41 245 / var(--tw-border-opacity, 1));
}
.c-perk-a .logo {
        max-width: 50%;
        height: auto;
        max-height: 35px;
    }
.c-perk-a .tag{
    margin-left: auto;
    margin-right: -16px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 16px;
    padding-right: 12px;
        background: #eee;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        font-weight: 500;
        --tw-bg-opacity: 1;
        background-color: rgb(112 41 245 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.c-perk-a .offer{
    font-size: 14px;
    margin-bottom: 6px;
}
.c-perk-a .offer strong{
    font-weight: 600;
}
.c-perk-a .cta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
        color: var(--textColorPerkCTA);
}
.c-perk-a .cta img{
    height: 10px;
            filter: var(--purple-light-white-dark-filter);
}
.c-perk-a .cta img:last-child {
                opacity: 0.5;
            }
.theme-light .c-perk-a .logo-dark{
    display: none;
}
.c-react-wrapper-common-introducer.theme-light .c-perk-a .logo-dark {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-light .c-perk-a .logo-dark {
        display: flex;
    }
.c-introducer.theme-light .c-perk-a .logo-dark {
        display: none;
    }
.theme-dark .c-perk-a .logo-light{
    display: none;
}
.c-react-wrapper-common-introducer.theme-dark .c-perk-a .logo-light {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-dark .c-perk-a .logo-light {
        display: flex;
    }
.c-introducer.theme-dark .c-perk-a .logo-light {
        display: none;
    }
.c-textblock-note,
.c-textblock-caution,
.c-textblock-advanced{
    border-radius: 8px;
    border-width: 2px;
    overflow: hidden;
}
.c-textblock-note .c-textblock-header, .c-textblock-caution .c-textblock-header, .c-textblock-advanced .c-textblock-header{
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom-width: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    display: flex;
    align-items: center;
}
.c-textblock-note .c-textblock-header:before, .c-textblock-caution .c-textblock-header:before, .c-textblock-advanced .c-textblock-header:before {
            content: "";
            width: 16px;
            height: 16px;
            margin-right: 12px;
            background-size: contain;
            background-position: center center;
        }
.c-textblock-note .c-textblock-content, .c-textblock-caution .c-textblock-content, .c-textblock-advanced .c-textblock-content{
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
.c-textblock-note{
    border-color: var(--backgroundColorI);
}
.c-textblock-note .c-textblock-header{
    border-color: var(--backgroundColorI);
    background-color: var(--backgroundColorI);
    color: var(--textColor6);
}
.c-textblock-note .c-textblock-header:before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMTJIMTBDOS40NDc3MiAxMiA5IDExLjU1MjMgOSAxMVY4LjVDOSA4LjIyMzg2IDguNzc2MTQgOCA4LjUgOEg4IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTguNzUgNS41QzguNjExOTMgNS41IDguNSA1LjYxMTkzIDguNSA1Ljc1QzguNSA1Ljg4ODA3IDguNjExOTMgNiA4Ljc1IDZDOC44ODgwNyA2IDkgNS44ODgwNyA5IDUuNzVDOSA1LjYxMTkzIDguODg4MDcgNS41IDguNzUgNS41VjUuNSIgc3Ryb2tlPSIjNUM1NTg5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAxNi41QzEzLjE0MjEgMTYuNSAxNi41IDEzLjE0MjEgMTYuNSA5QzE2LjUgNC44NTc4NiAxMy4xNDIxIDEuNSA5IDEuNUM0Ljg1Nzg2IDEuNSAxLjUgNC44NTc4NiAxLjUgOUMxLjUgMTMuMTQyMSA0Ljg1Nzg2IDE2LjUgOSAxNi41WiIgc3Ryb2tlPSIjNUM1NTg5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
            filter: var(--iconFilterCaution);
        }
.c-textblock-note .c-textblock-content{
    background-color: var(--backgroundColorB);
}
.c-textblock-caution{
    --tw-border-opacity: 1;
    border-color: rgb(228 137 0 / var(--tw-border-opacity, 1));
}
.c-textblock-caution .c-textblock-header{
    --tw-border-opacity: 1;
    border-color: rgb(228 137 0 / var(--tw-border-opacity, 1));
        color: var(--textColorCAlert);
        background: var(--backgroundColorCAlert);
}
.c-textblock-caution .c-textblock-header:before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTMuNUM4Ljg2MTkzIDEzLjUgOC43NSAxMy42MTE5IDguNzUgMTMuNzVDOC43NSAxMy44ODgxIDguODYxOTMgMTQgOSAxNEM5LjEzODA3IDE0IDkuMjUgMTMuODg4MSA5LjI1IDEzLjc1QzkuMjUgMTMuNjExOSA5LjEzODA3IDEzLjUgOSAxMy41VjEzLjUiIHN0cm9rZT0iIzk1NUQwOSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOSAxMS41VjYuNSIgc3Ryb2tlPSIjOTU1RDA5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuMDgwNyAyLjE3MzM2QzkuODc4MjYgMS43NjEyOCA5LjQ1OTExIDEuNTAwMTggOS4wMDAwMSAxLjUwMDE4QzguNTQwOSAxLjUwMDE4IDguMTIxNzUgMS43NjEyOCA3LjkxOTM0IDIuMTczMzZMMS42MDQwMSAxNS4wMzg3QzEuNDQ5NDYgMTUuMzUzMSAxLjQ2ODE0IDE1LjcyNSAxLjY1MzQzIDE2LjAyMjNDMS44Mzg3MSAxNi4zMTk2IDIuMTY0MzQgMTYuNTAwMyAyLjUxNDY3IDE2LjVIMTUuNDg1M0MxNS44MzU3IDE2LjUwMDMgMTYuMTYxMyAxNi4zMTk2IDE2LjM0NjYgMTYuMDIyM0MxNi41MzE5IDE1LjcyNSAxNi41NTA2IDE1LjM1MzEgMTYuMzk2IDE1LjAzODdMMTAuMDgwNyAyLjE3MzM2WiIgc3Ryb2tlPSIjOTU1RDA5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
            filter: var(--iconFilterCaution);
        }
.c-textblock-caution .c-textblock-content {
        background: var(--backgroundColorTextblockCautionContent);
    }
.c-textblock-advanced{
    border-color: var(--textColor2);
}
.c-textblock-advanced .c-textblock-header{
    border-color: var(--textColor2);
        background: var(--borderColorTracksListV3);
        --tw-text-opacity: 1;
        color: rgb(240 243 249 / var(--tw-text-opacity, 1));
}
.c-textblock-advanced .c-textblock-header:before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMTJIMTBDOS40NDc3MiAxMiA5IDExLjU1MjMgOSAxMVY4LjVDOSA4LjIyMzg2IDguNzc2MTQgOCA4LjUgOEg4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik04Ljc1IDUuNUM4LjYxMTkzIDUuNSA4LjUgNS42MTE5MyA4LjUgNS43NUM4LjUgNS44ODgwNyA4LjYxMTkzIDYgOC43NSA2QzguODg4MDcgNiA5IDUuODg4MDcgOSA1Ljc1QzkgNS42MTE5MyA4Ljg4ODA3IDUuNSA4Ljc1IDUuNVY1LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDE2LjVDMTMuMTQyMSAxNi41IDE2LjUgMTMuMTQyMSAxNi41IDlDMTYuNSA0Ljg1Nzg2IDEzLjE0MjEgMS41IDkgMS41QzQuODU3ODYgMS41IDEuNSA0Ljg1Nzg2IDEuNSA5QzEuNSAxMy4xNDIxIDQuODU3ODYgMTYuNSA5IDE2LjVaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
        }
.c-textblock-advanced .c-textblock-content {
        background: var(--backgroundColorTextblockCautionContent);
    }
.c-spinner {
    height: 24px;
    width: 24px;
    animation: spin 3s linear infinite;
}
.c-tooltip-spinner{
    align-self: center;
    height: 30px;
    width: 30px;
    animation: spin 3s linear infinite;
    filter: var(--textColor7-filter);
}
.c-financial-amount{
    display: flex;
    align-items: center;
}
.c-financial-amount .currency{
    align-self: flex-start;
}
.c-financial-amount .dollars {
        line-height: 0.9;
    }
.c-financial-amount .cents{
    align-self: flex-end;
}
.c-automated-feedback .feedback-header{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.c-automated-feedback .feedback-header > .c-avatar,
        .c-automated-feedback .feedback-header > .c-icon {
            height: 32px;
            width: 32px;
            margin-right: 16px;
        }
.c-automated-feedback .feedback-header .info{
    font-size: 15px;
    font-weight: 500;
    line-height: 160%;
    color: var(--textColor6);
}
.c-automated-feedback .feedback-header .info strong{
    font-weight: 600;
    color: var(--textColor1);
}
.c-automated-feedback .c-textual-content{
    font-size: 15px;
    line-height: 150%;
    color: var(--textColor1);
        max-width: 100%;
}
.c-automated-feedback .byline{
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--textColor6);
}
.c-automated-feedback .byline .c-avatar {
            height: 32px;
            width: 32px;
            margin-right: 12px;
        }
.c-automated-feedback .byline .c-reputation{
    margin-left: 12px;
}
.c-automated-feedback.analyzer-feedback .explanation{
    margin-top: 16px;
    border-top-width: 2px;
    border-color: var(--borderColor6);
    padding-top: 16px;
    font-size: 15px;
    line-height: 160%;
}
.c-automated-feedback.analyzer-feedback .explanation a{
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--c-prominent-link-color);
    margin-right: 8px;
}
.c-automated-feedback.analyzer-feedback .explanation a .c-icon {
                height: 12px;
                width: 12px;
                margin-left: 6px;
        filter: var(--c-prominent-link-icon-filter);
            }
.c-automated-feedback.analyzer-feedback .summary{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 225 / var(--tw-bg-opacity, 1));
    font-size: 15px;
    font-weight: 500;
    line-height: 160%;
    --tw-text-opacity: 1;
    color: rgb(71 48 12 / var(--tw-text-opacity, 1));
    margin-bottom: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}
.c-automated-feedback.analyzer-feedback .comment + .comment{
    margin-top: 16px;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 236 243 / var(--tw-border-opacity, 1));
    padding-top: 16px;
}
.c-automated-feedback.analyzer-feedback .comment{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.c-automated-feedback.analyzer-feedback .comment .tag{
    border-radius: 3px;
    font-family: Source Code Pro, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 170%;
    margin-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.c-automated-feedback.analyzer-feedback .comment .tag.essential{
    --tw-bg-opacity: 1;
    background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.c-automated-feedback.analyzer-feedback .comment .tag.recommended{
    --tw-bg-opacity: 1;
    background-color: rgb(228 137 0 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.c-share-button {
    background: linear-gradient(180deg, #2200ff 0%, #9e00ff 100%);
    box-shadow: 0px 1px 0px 1px rgba(var(--shadowColorKeystroke), 0.6);
    padding: 2px;
    border-radius: 5px;
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-share-button {
        box-shadow: 0 0 0 2px #000;
    }
.c-share-button {
    height: 40px;
    display: flex;
    align-items: stretch;
}
.c-share-button .inner{
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    font-weight: 600;
    color: var(--textColor1);
        border-radius: 3px;
}
.c-share-button .inner .c-icon {
            height: 21px;
            width: 21px;
            margin-right: 8px;
        }
.c-social-icon{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    transition: box-shadow 0.2s;
    border-radius: 100px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-social-icon {
        box-shadow: 0 0 0 2px #000;
    }
.c-social-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 140%;
    color: var(--textColor2);
}
.c-social-icon:hover{
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-social-icon:hover {
        box-shadow: 0 0 0 2px #000;
    }
.c-social-icon .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 8px;
    }
.c-social-icon.twitter > .c-icon {
        filter: var(--filter-twitter);
    }
.c-social-icon + .c-social-icon{
    margin-left: 8px;
}
@media (min-width: 768px){

    .c-social-icon{
        flex-direction: column;
        border-radius: 100%;
        padding: 0px;
    }

    .c-social-icon .c-icon{
        margin-right: 0px;
        margin-bottom: 8px;
    }

    .c-social-icon + .social-icon{
        margin-left: 16px;
    }
.c-social-icon {
        height: 96px;
        width: 96px
}

        .c-social-icon .c-icon {
            height: 32px;
            width: 32px;
        }
}
.c-blog-post{
    display: block;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding: 16px;
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-blog-post {
        box-shadow: 0 0 0 2px #000;
    }
.c-blog-post .img{
    padding-top: 56%;
    margin-bottom: 12px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.c-blog-post .new{
    --tw-bg-opacity: 1;
    background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(51 54 63 / var(--tw-text-opacity, 1));
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-flex;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}
.c-blog-post .title{
    margin-bottom: 4px;
    overflow: hidden;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 44px; /* Fallback for max 2 lines */
}
.c-blog-post .byline{
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor6);
}
.c-blog-post .byline > *{
    display: inline;
}
.c-react-wrapper-donations-with-modal-form {
    width: 100%;
    max-width: 570px;
    flex-shrink: 0;
    position: relative;
}
.c-donations-form{
    display: flex;
    flex-direction: column;
}
.c-donations-form .--tabs{
    display: flex;
    align-items: center;
    overflow: hidden;
        border-radius: 8px 8px 0 0;
}
.c-donations-form .--tabs .c-tab{
    padding-top: 20px;
    padding-bottom: 20px;
    width: 50%;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%;
    color: var(--textColor6);
}
@media (min-width: 768px){

    .c-donations-form .--tabs .c-tab{
        font-size: 18px;
    }
}
.c-donations-form .--tabs .c-tab{
    background-color: var(--backgroundColorG);
    border-bottom-width: 3px;
    border-color: var(--borderColor6);

            /* Override styles from .c-tab */
            display: block;
            align-items: center;
            padding-left: 0;
            padding-right: 0;
            border-radius: 0;
            margin: 0;
}
.c-donations-form .--tabs .c-tab.selected{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--c-prominent-link-color);
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-donations-form .--tabs .c-tab.selected {
        box-shadow: 0 0 0 2px #000;
    }
.c-donations-form .--tabs .c-tab.selected{
    z-index: 1;
    border-color: var(--c-prominent-link-color);
}
.c-donations-form .--content{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    position: relative;
        border-radius: 0 0 8px 8px;
}
.c-donations-form .--content .existing-subscription{
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 225 / var(--tw-bg-opacity, 1));
            background: var(--backgroundColorCAlert);
            color: var(--textColorCAlert);
            border-radius: 8px;
            border-width: 2px;
            --tw-border-opacity: 1;
            border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
            font-size: 15px;
            line-height: 150%;
            margin-left: 24px;
            margin-right: 24px;
            margin-top: 24px;
            margin-bottom: 16px;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 24px;
            padding-right: 24px;
}
.c-donations-form .--content .existing-subscription strong{
    font-size: 15px;
    font-weight: 500;
}
.c-donations-form .--content .existing-subscription a{
    text-decoration-line: underline;
}
.c-donations-form .--content .extra-cta{
    border-radius: 8px;
            background: var(--backgroundColorBorderGradientLightPurple);
            text-align: center;
            font-weight: 500;
            line-height: 150%;
            color: var(--textColor6);
            margin-left: 24px;
            margin-right: 24px;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 24px;
            padding-right: 24px;
}
.c-donations-form .--content .extra-cta button{
    font-weight: 600;
    text-decoration-line: underline;
}
.c-donations-form .--content .form-cover{
    position: absolute;
            top: 150px;
            left: 0;
            bottom: 0;
            right: 0;
            background: var(--backgroundColorDonationFormCover);
            z-index: 10;
            cursor: not-allowed;
}
.c-donations-form .--content .amounts{
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom-width: 1px;
    border-color: var(--borderColor6);
}
.c-donations-form .--content .amounts .preset-amounts{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -moz-column-gap: 16px;
         column-gap: 16px;
    margin-bottom: 20px;
}
.c-donations-form .--content .amounts .preset-amounts button{
    color: var(--textColor6);
}
.c-donations-form .--content .amounts .preset-amounts button.selected{
    color: var(--c-prominent-link-color);
    border-width: 2px;
    border-color: var(--c-prominent-link-color);
                        background: var(--backgroundColorDonationsFormSelected);
}
.c-donations-form .--content .amounts h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor6);
    margin-bottom: 8px;
}
.c-donations-form .--content .amounts .c-faux-input input {
                    min-width: 0;
                    flex-grow: 1;
                    line-height: 34px;
                }
.c-donations-form .--content .amounts .c-faux-input.selected {
                    background: var(--backgroundColorDonationsFormSelected);
                    border-width: 1px;
                    border-color: var(--c-prominent-link-color);
                    box-shadow: 0px 0px 0px 1px #2e57e8,
                        0px 0px 2px 2px var(--inputBoxShadowColorFocus);
                }
.c-donations-form .--content .amounts .c-faux-input.selected input{
    font-weight: 600;
    color: var(--c-prominent-link-color);
}
.c-donations-form .--content form{
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
}
.c-donations-form .--content .email-container {
            margin-top: -8px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom-width: 1px;
            border-color: var(--borderColor6);
        }
.c-donations-form .--content .email-container label{
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor6);
    margin-bottom: 8px;
}
.c-donations-form .--content .email-container input{
    width: 100%;
}
.c-donations-form .--content .card-container{
    border-radius: 8px;
    background-color: var(--backgroundColorC);
    padding: 6px;
}
.c-donations-form .--content .card-container .title{
    padding-bottom: 6px;
    text-align: center;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor5);
}
.c-donations-form .--content .card-container .card-element{
    border-radius: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
}
.c-donations-form .--content .card-container .card-element button{
    margin-top: 12px;
    width: 100%;
}
.c-donations-form .--content .extra-info{
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 160%;
    color: var(--textColor6);
}
.c-donations-form .g-recaptcha{
    height: 78px;
}
.c-donation-card-error{
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(208 59 59 / var(--tw-text-opacity, 1));
    border-radius: 8px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(208 59 59 / var(--tw-border-opacity, 1));
    background-color: var(--backgroundColorSummaryStatusFailed);
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
}
@keyframes toastSlideIn {
    from {
        bottom: -100px;
        opacity: 0;
    }
    to {
        bottom: 32px;
        opacity: 1;
    }
}
@keyframes toastSlideOut {
    from {
        bottom: 32px;
        opacity: 1;
    }
    to {
        bottom: -100px;
        opacity: 0;
    }
}
.c-toast{
    position: fixed;
    display: flex;
    align-items: center;
    border-radius: 100px;
    background-color: var(--textColor2);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    bottom: 24px;
    right: 24px;

    animation: toastSlideIn 0.5s ease-out 0s 1 normal forwards,
        toastSlideOut 0.5s ease-in 4s 1 normal forwards;
}
.c-toast .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 12px;
    }
.c-toast span{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor9);
}
.c-contributions-summary{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}
@media (min-width: 1024px){

    .c-contributions-summary{
        flex-direction: row;
    }
}
.c-contributions-summary .summary{
    flex-grow: 1;
    width: 100%;
}
@media (min-width: 1024px){

    .c-contributions-summary .summary{
        max-width: 650px;
    }
}
.c-contributions-summary .summary .c-primary-reputation{
    margin-bottom: 32px;
}
.c-contributions-summary .summary .c-primary-reputation .c-icon{
    margin-left: 8px;
}
.c-contributions-summary .summary .c-track-select{
    margin-bottom: 24px;
}
.c-contributions-summary .summary .category{
    display: flex;
    align-items: center;
    margin-bottom: 16px;

            /* This aligns it to the select box above */

            padding-left: 6px;

            padding-right: 6px;
}
@media (min-width: 768px){

    .c-contributions-summary .summary .category{
        padding-left: 20px;
        padding-right: 89px;
    }
}
.c-contributions-summary .summary .category .c-icon {
                height: 48px;
                width: 48px;
                margin-right: 16px;
            }
.c-contributions-summary .summary .category .c-icon.--hex {
                background-image: var(--backgroundImageHex);
            }
.c-contributions-summary .summary .category .c-icon.--hex img,
                .c-contributions-summary .summary .category .c-icon.--hex svg {
                    width: 37%;
                    height: 37%;
                }
.c-contributions-summary .summary .category .info{
    flex-grow: 1;
}
.c-contributions-summary .summary .category .info .title{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
.c-contributions-summary .summary .category .info .subtitle{
    font-size: 15px;
    line-height: 170%;
    color: var(--textColor2);
}
.c-contributions-summary .summary .category .reputation{
    font-size: 15px;
    line-height: 170%;
    color: var(--textColor6);
}
.c-contributions-summary .chart-container{
    display: none;
}
.c-react-wrapper-common-introducer.c-contributions-summary .chart-container {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-contributions-summary .chart-container {
        display: flex;
    }
.c-introducer.c-contributions-summary .chart-container {
        display: none;
    }
@media (min-width: 1024px){

    .c-contributions-summary .chart-container{
        display: block;
    }
}
.c-contributions-summary .chart-container {
        width: 600px;
        position: relative;
        margin-left: auto;
        padding: 150px 100px;
    }
.c-contributions-summary .chart-container .label{
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
    position: absolute;
            min-width: 122px;
}
.c-contributions-summary .chart-container .label .c-icon {
                height: 54px;
                width: 54px;
                margin-bottom: 8px;
            }
.c-contributions-summary .chart-container .label .c-icon.--hex {
                background-image: var(--backgroundImageHex);
            }
.c-contributions-summary .chart-container .label .c-icon.--hex img,
                .c-contributions-summary .chart-container .label .c-icon.--hex svg {
                    width: 37%;
                    height: 37%;
                }
.c-contributions-summary .chart-container .label .title{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-contributions-summary .chart-container .label .subtitle{
    font-size: 15px;
    line-height: 160%;
    color: var(--textColor2);
}
.c-contributions-summary .chart-container .chart {
            width: 400px;
            height: 400px;
        }
.theme-light,
.theme-accessibility-dark {
    /* veryLightBlue */
    --c-progress-bg: #e1ebff;
}
.theme-dark {
    /* backgroundColorF dark variant */
    --c-progress-bg: #191525;
}
.c-progress {
    background: var(--c-progress-bg);
    width: 100%;
    border-radius: 100px;
    display: flex;
    align-items: center;
    height: 16px;
}
.c-progress.--small,
        .c-progress.--small .bar {
            height: 12px;
            min-width: 12px;
        }
.c-progress.--large,
        .c-progress.--large .bar {
            height: 24px;
            min-width: 24px;
        }
.c-progress.--completed .bar {
            background: linear-gradient(to right, #4fcda7 0%, #269345 100%),
                linear-gradient(0deg, #4fcda7, #4fcda7);
        }
.c-progress .bar {
        height: 16px;
        min-width: 16px;
        /* background: linear-gradient(to bottom, #2200ff 0%, #9e00ff 100%); */
        background: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
        border-radius: 100px;
    }
.c-progress:not(.--completed) .completed-icon {
            display: none;
        }
.c-progress .c-track-icon{
    position: relative;
    margin-left: auto;
        height: 48px;
        width: 48px;
}
.c-progress .c-track-icon + .completed-icon {
        top: -12px;
        left: -5px;
        margin-right: -19px;
        height: 24px;
        width: 24px;
    }
.c-progress .completed-icon{
    position: relative;
    margin-left: auto;
        margin-left: -10px;
        height: 32px;
        width: 32px;
}
.c-progress .completed-icon .c-icon.completed {
            height: 100%;
            width: 100%;
        }
.c-progress .unlock-icon{
    margin-left: auto;
        background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(255, 255, 255, 0) 100%
            ),
            #fff4e3;
        box-shadow: 0px 4px 24px rgba(156, 130, 38, 0.4);
        border-radius: 100%;
        padding: 12px;
}
.c-progress .unlock-icon .c-icon {
            height: 16px;
            width: 16px;
            filter: var(--orange-filter);
        }
.c-site-update{
    position: relative;
    display: flex;
    margin-bottom: 24px;
}
.c-site-update:before {
        content: "";
        position: absolute;
        background-color: var(--borderColor7);
        width: 2px;
        top: -32px;
        left: 24px;
        bottom: -32px;
    }
.c-site-update:first-child:before {
            top: 43px;
        }
.c-site-update:last-child:before {
            display: none;
        }
.c-site-update > .c-icon,
    .c-site-update > .c-exercise-icon,
    .c-site-update > .c-track-icon,
    .c-site-update > .c-concept-icon{
    position: relative;
    margin-right: 24px;
    z-index: 1;
        height: 50px;
        width: 50px;
}
.c-site-update > .c-concept-icon{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
.c-site-update .content{
    flex-grow: 1;
}
.c-site-update .standard{
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.c-site-update .standard .info{
    margin-right: 16px;
}
.c-site-update .standard .info .desc{
    font-size: 18px;
    line-height: 150%;
}
.c-site-update .standard .info .desc em{
    font-weight: 500;
    font-style: normal;
}
.c-site-update .standard .info .desc a{
    font-weight: 600;
    border-bottom-width: 1px;
    border-color: var(--textColor6);
}
.c-site-update .standard .info .desc a:hover{
    border-color: var(--c-prominent-link-color);
    color: var(--c-prominent-link-color);
}
.c-site-update .standard .info time{
    font-size: 14px;
    line-height: 160%;
    color: var(--textColor6);
}
.c-site-update .standard .c-faces{
    margin-left: auto;
    flex-shrink: 0;
}
.c-site-update .standard .c-faces .c-avatar {
                height: 32px;
                width: 32px;
            }
.c-site-update .expanded{
    margin-top: 20px;
    border-radius: 8px;
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-site-update .expanded {
        box-shadow: 0 0 0 2px #000;
    }
.c-site-update .expanded{
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
.c-site-update .expanded .header{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.c-site-update .expanded .header .c-icon {
                height: 48px;
                width: 48px;
                margin-right: 16px;
            }
.c-site-update .expanded .header .title{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
}
.c-site-update .expanded .header .byline{
    font-size: 16px;
    line-height: 180%;
    color: var(--textColor6);
    display: flex;
    align-items: center;
}
.c-site-update .expanded .header .byline .c-avatar {
                    height: 24px;
                    width: 24px;
                    margin-right: 12px;
                }
.c-site-update .expanded .header .byline strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-site-update .expanded .description{
    line-height: 160%;
}
.c-site-update .expanded .description a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-site-update .expanded .description strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-site-update .expanded .description{
    font-size: 16px;
}
.c-site-update .expanded .description:not(:last-child){
    margin-bottom: 20px;
}
.c-site-update .expanded .description p{
    margin-bottom: 8px;
}
.c-site-update .expanded .description ul{
    list-style-type: disc;
    padding-left: 20px;
}
.c-site-update .expanded .description ul p{
    margin-bottom: 0px;
}
.c-site-update .expanded .pull-request{
    display: flex;
    align-items: center;
    border-width: 1px;
    border-color: var(--borderColor6);
    margin-bottom: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    border-radius: 8px;
}
.c-site-update .expanded .pull-request .c-icon {
                height: 42px;
                width: 42px;
                margin-right: 32px;
            }
.c-site-update .expanded .pull-request .pr-title{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-site-update .expanded .pull-request .pr-details{
    line-height: 160%;
}
.c-site-update .expanded .pull-request .pr-details a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-site-update .expanded .pull-request .pr-details strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-site-update .expanded .pull-request .pr-details{
    font-size: 14px;
    color: var(--textColor6);
    margin-right: 24px;
}
.c-site-update .expanded .pull-request .merged{
    margin-left: auto;
}
.c-site-update .expanded .pull-request .merged .c-icon {
                    height: 24px;
                    width: 24px;
                    margin-right: 12px;
                }
.c-site-update .expanded .pull-request .merged{
    display: flex;
    align-items: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(46 140 112 / var(--tw-text-opacity, 1));
}
.c-site-update .expanded .c-exercise-widget{
    border-width: 1px;
    border-color: var(--borderColor6);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
body.namespace-.controller-journey #site-footer, body.namespace-.controller-insiders #site-footer {
        margin-top: 0px;
        background: #191525;
    }
body.namespace-.controller-journey #site-footer .external-section, body.namespace-.controller-insiders #site-footer .external-section {
            background: none;
            box-shadow: none;
        }
body.namespace-.controller-journey #site-footer .external-section .bottom, body.namespace-.controller-insiders #site-footer .external-section .bottom {
                background: none;
            }
body.namespace-.controller-journey #site-footer .external-section .btn-enhanced.btn-l, body.namespace-.controller-insiders #site-footer .external-section .btn-enhanced.btn-l {
                box-shadow: none;
            }
#site-footer {
    /* Show this through JS to avoid CLS */
    display: none;
    background: var(--backgroundColorSiteFooter);

    margin-top: 100px;
}
@media (min-width: 1024px) {
#site-footer {
        margin-top: 200px
}
    }
#site-footer{
    border-top-width: 8px;
    --tw-border-opacity: 1;
    border-color: rgb(96 79 205 / var(--tw-border-opacity, 1));
}
#site-footer .external-section {
        box-shadow: 0px 4px 24px 0px #00000026;
        background: linear-gradient(
                180deg,
                #271b72 0%,
                rgba(39, 27, 114, 0) 48.1%,
                #271b72 100%
            ),
            linear-gradient(0deg, #271b72, #271b72), var(--hex-bg-image);

        background-size: 100%;
        background-position: -190px;
    }
#site-footer .external-section .c-icon{
    margin-bottom: 24px;
            width: 133px;
            height: 24px;
            filter: var(--filter-FFFFFF);
}
#site-footer .external-section h2{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .external-section p{
    --tw-text-opacity: 1;
    color: rgb(225 235 255 / var(--tw-text-opacity, 1));
            max-width: 640px;
}
#site-footer .external-section .btn-enhanced{
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .external-section .bottom {
            background: linear-gradient(
                180deg,
                rgba(39, 27, 114, 0) 0%,
                #190f5c 100%
            );
            height: 64px;
        }
#site-footer hr {
        border-top: 2px solid #453a8f;
    }
#site-footer hr.c-divider {
        filter: var(--filter-59D2AE);
    }
#site-footer .nfp{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 52px;
}
#site-footer .nfp > .c-icon {
            width: 64px;
            height: 64px;
            margin-bottom: 24px;
        }
#site-footer .nfp h2{
    --tw-text-opacity: 1;
    color: rgb(250 250 255 / var(--tw-text-opacity, 1));

            max-width: 610px;
}
#site-footer .nfp h3{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .nfp p{
    --tw-text-opacity: 1;
    color: rgb(250 250 255 / var(--tw-text-opacity, 1));
}
#site-footer .nfp p strong{
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .nfp p{
            max-width: 800px;
            margin-bottom: 32px;
}
#site-footer .nfp .c-react-wrapper-donations-footer-form {
            width: 100%;
            max-width: 1024px;
            position: relative;
        }
#site-footer .nfp .donations-form .amounts{
    flex-grow: 1;
    display: grid;
    gap: 16px;
                grid-template:
                    "a b" auto
                    "c d" auto
                    "e e" auto / 1fr 1fr;
}
@media (min-width: 640px) {
#site-footer .nfp .donations-form .amounts {
                    grid-template:
                        "a b c" auto
                        "d e e" auto / 1fr 1fr 1fr
            }
                }
#site-footer .nfp .donations-form .amounts button{
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(80 66 173 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(39 27 114 / var(--tw-bg-opacity, 1));
    border-radius: 8px;
}
#site-footer .nfp .donations-form .amounts button.selected{
    --tw-bg-opacity: 1;
    background-color: rgb(80 66 173 / var(--tw-bg-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(80 66 173 / var(--tw-border-opacity, 1));
}
#site-footer .nfp .donations-form .amounts h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor6);
    margin-bottom: 8px;
}
#site-footer .nfp .donations-form .amounts .c-faux-input {
                    grid-area: e;
                    padding-top: 4px;
                    padding-bottom: 4px;
                    color: var(--textColor1);
                    border-width: 1px;
                    --tw-border-opacity: 1;
                    border-color: rgb(80 66 173 / var(--tw-border-opacity, 1));
                    --tw-bg-opacity: 1;
                    background-color: rgb(39 27 114 / var(--tw-bg-opacity, 1));
                    border-radius: 8px;
                }
#site-footer .nfp .donations-form .amounts .c-faux-input .icon{
    --tw-text-opacity: 1;
    color: rgb(157 148 218 / var(--tw-text-opacity, 1));
}
#site-footer .nfp .donations-form .amounts .c-faux-input input {
                        min-width: 0;
                        flex-grow: 1;
                        line-height: 30px;
                        border-left-color: #9d94da !important;
                    }
#site-footer .nfp .donations-form .amounts .c-faux-input input::-moz-placeholder{
    --tw-text-opacity: 1;
    color: rgb(157 148 218 / var(--tw-text-opacity, 1));
}
#site-footer .nfp .donations-form .amounts .c-faux-input input::placeholder{
    --tw-text-opacity: 1;
    color: rgb(157 148 218 / var(--tw-text-opacity, 1));
}
#site-footer .nfp .donations-form .amounts .c-faux-input.selected{
    --tw-bg-opacity: 1;
    background-color: rgb(80 66 173 / var(--tw-bg-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(80 66 173 / var(--tw-border-opacity, 1));
                        box-shadow: 0px 0px 0px 1px #2e57e8,
                            0px 0px 2px 2px var(--inputBoxShadowColorFocus);
}
#site-footer .nfp .donations-form .amounts .c-faux-input.selected input{
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
#site-footer .nfp .donations-form .continue-btn {
                    width: 250px;
                    height: auto
            }
                }
#site-footer .nfp .donations-form .continue-btn{
    --tw-bg-opacity: 1;
    background-color: rgb(31 163 120 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .nfp .donations-form .continue-btn .c-icon {
                    filter: var(--white-filter);
                }
#site-footer .site-links li, #site-footer .tracks li{
    margin-bottom: 8px;
}
#site-footer .site-links li a, #site-footer .tracks li a{
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(200 213 239 / var(--tw-text-opacity, 1));
}
#site-footer .site-links h3{
    font-size: 16px;
    font-weight: 700;
    line-height: 160%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .site-links hr.c-divider{
    margin-top: 16px;
    margin-bottom: 20px;
}
#site-footer .site-links .col{
    margin-bottom: 20px;
}
#site-footer .socials{
    display: flex;
    align-items: center;
    justify-content: center;
}
#site-footer .socials .icon {
            height: 48px;
            width: 48px;
            display: grid;
            place-items: center;
            border-radius: 100%;
            margin-left: 12px;
            margin-right: 12px;
        }
#site-footer .socials .icon .c-icon {
                height: 24px;
                width: 24px;
                filter: var(--filter-FFFFFF);
            }
#site-footer .socials .icon.twitter {
                background: #1da1f2;
            }
#site-footer .socials .icon.facebook {
                background: #4267b2;
            }
#site-footer .socials .icon.github {
                background: #6e82aa;
            }
#site-footer .tracks{
    display: flex;
    flex-direction: column;
}
#site-footer .tracks h2{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .tracks h3{
    margin-bottom: 12px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#site-footer .tracks p{
    --tw-text-opacity: 1;
    color: rgb(250 250 255 / var(--tw-text-opacity, 1));
}
#site-footer .tracks p a {
                color: #fae54e;
                font-weight: 600;
            }
#site-footer .legals{
    font-size: 16px;
    line-height: 160%;
    --tw-text-opacity: 1;
    color: rgb(200 213 239 / var(--tw-text-opacity, 1));
}
#site-footer .legals a{
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(250 250 255 / var(--tw-text-opacity, 1));
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(200 213 239 / var(--tw-border-opacity, 1));
}
#site-footer .legals .copyright{
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(225 235 255 / var(--tw-text-opacity, 1));
    flex-shrink: 0;
}
body.namespace-tracks.controller-exercises.action-edit #site-header,
    body.namespace-tracks.controller-exercises.action-edit #site-footer,
    body.namespace-mentoring.controller-discussions.action-show #site-header,
    body.namespace-mentoring.controller-discussions.action-show #site-footer,
    body.namespace-mentoring.controller-representations.action-new #site-header,
    body.namespace-mentoring.controller-representations.action-new #site-footer,
    body.namespace-mentoring.controller-requests.action-show #site-header,
    body.namespace-mentoring.controller-requests.action-show #site-footer,
    body.namespace-mentoring.controller-automation.action-edit #site-header,
    body.namespace-mentoring.controller-automation.action-edit #site-footer,
    body.namespace-tracks.controller-mentor_requests.action-new #site-header,
    body.namespace-tracks.controller-mentor_requests.action-new #site-footer,
    body.namespace-tracks.controller-mentor_requests.action-show #site-header,
    body.namespace-tracks.controller-mentor_requests.action-show #site-footer,
    body.namespace-tracks.controller-mentor_discussions.action-show #site-header,
    body.namespace-tracks.controller-mentor_discussions.action-show #site-footer,
    body.namespace-training_data.controller-code_tags_samples.action-show #site-header,
    body.namespace-training_data.controller-code_tags_samples.action-show #site-footer,
    body.namespace-bootcamp.controller-frontend.action-index #site-header,
    body.namespace-bootcamp.controller-frontend.action-index #site-footer,
    body.controller-user_onboarding.action-show #site-header,
    body.controller-user_onboarding.action-show #site-footer,
    body.devise #site-header,
    body.devise #site-footer {
        display: none !important;
    }
body.keyboard-navigation .nav-element:hover .nav-element-dropdown,
body.keyboard-navigation .nav-element:hover .arrow{
    display: none !important;
}
#site-header{
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    position: sticky;
    top: 0px;
}
@media (min-width: 1024px){

    #site-header{
        position: static;
    }
}
#site-header {

    /* This is needed to raise the menu above other components */

    z-index: 40;
}
#site-header .announcement-bar{
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%;
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
        background: var(--backgroundColorAnnouncementBar);
}
#site-header .announcement-bar strong{
    margin-left: 4px;
    margin-right: 4px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 211 143 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
}
#site-header .announcement-bar .lg-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px){

    #site-header .announcement-bar .lg-container{
        flex-direction: row;
    }
}
#site-header .announcement-bar .lg-container .text-container{
    flex-direction: row;
}
@media (min-width: 640px){

    #site-header .announcement-bar .lg-container .text-container{
        display: flex;
    }
}
#site-header .announcement-bar .lg-container .c-icon{
    margin-right: 8px;
    display: none;
}
.c-react-wrapper-common-introducer#site-header .announcement-bar .lg-container .c-icon {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .announcement-bar .lg-container .c-icon {
        display: flex;
    }
.c-introducer#site-header .announcement-bar .lg-container .c-icon {
        display: none;
    }
@media (min-width: 640px){

    #site-header .announcement-bar .lg-container .c-icon{
        display: block;
    }
}
#site-header .announcement-bar .lg-container .c-icon {
                filter: none !important;
                height: 24px;
                width: 24px;
            }
#site-header .container {
        /* Should be py-12 when other components have been added */
        display: flex;
        align-items: center;
        height: 64px;
    }
#site-header .exercism-link {
        /* todo remove this */
        display: flex;
        align-items: center;
        gap: 6px;
        margin-right: 32px;
        flex-shrink: 0;
        max-width: 45px;
    }
@media (min-width: 640px){

    #site-header .exercism-link{
        max-width: unset;
    }
}
@media (min-width: 1024px){

    #site-header .exercism-link{
        max-width: 32px;
    }
}
@media (min-width: 1280px){

    #site-header .exercism-link{
        max-width: unset;
    }
}
#site-header .exercism-link {
        overflow: hidden;
    }
#site-header .exercism-link .c-icon {
        filter: var(--textColor1-filter);
            height: 35px;
            width: 194px;
    }
@media (min-width: 640px) {
            #site-header .exercism-link .c-icon {
                height: 24px;
                width: 133px;
            }
        }
#site-header .docs-search{
    display: none;
}
.c-react-wrapper-common-introducer#site-header .docs-search {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .docs-search {
        display: flex;
    }
.c-introducer#site-header .docs-search {
        display: none;
    }
#site-header .docs-search{
    flex-grow: 1;
}
#site-header .docs-search input{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
            width: 100%;
            max-width: 540px;
}
#site-header nav{
    display: none;
}
.c-react-wrapper-common-introducer#site-header nav {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header nav {
        display: flex;
    }
.c-introducer#site-header nav {
        display: none;
    }
@media (min-width: 1024px){

    #site-header nav{
        margin-right: 16px;
        display: block;
    }
}
#site-header nav ul{
    display: flex;
    align-items: center;
}
#site-header nav li.selected a{
    color: var(--textColor2);
}
#site-header nav.signed-in{
    flex-grow: 1;
}
#site-header nav.signed-out{
    margin-right: auto;
}
#site-header .user-section{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
#site-header .user-section .new-testimonial,
        #site-header .user-section .new-badge {
            width: 28px;
            height: 28px;
            margin-right: 36px;
            background-position: center center;
            background-repeat: no-repeat;
            display: none;
        }
.c-react-wrapper-common-introducer#site-header .user-section .new-testimonial,.c-react-wrapper-common-introducer
        #site-header .user-section .new-badge {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .user-section .new-testimonial,.c-react-wrapper-common-introducer .c-introducer
        #site-header .user-section .new-badge {
        display: flex;
    }
.c-introducer#site-header .user-section .new-testimonial,.c-introducer
        #site-header .user-section .new-badge {
        display: none;
    }
@media (min-width: 640px){

    #site-header .user-section .new-testimonial,
        #site-header .user-section .new-badge{
        display: block;
    }
}
#site-header .user-section .new-testimonial {
            background-image: var(--newTestimonialIcon);
        }
#site-header .user-section .new-badge {
            background-image: var(--newBadgeIcon);
        }
#site-header .user-section .c-notification{
    margin-left: 8px;
    margin-right: 48px;
}
#site-header .user-section .c-react-wrapper-dropdowns-reputation{
    display: none;
}
.c-react-wrapper-common-introducer#site-header .user-section .c-react-wrapper-dropdowns-reputation {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .user-section .c-react-wrapper-dropdowns-reputation {
        display: flex;
    }
.c-introducer#site-header .user-section .c-react-wrapper-dropdowns-reputation {
        display: none;
    }
@media (min-width: 1024px){

    #site-header .user-section .c-react-wrapper-dropdowns-reputation{
        margin-right: 48px;
    }
}
@media (min-width: 1280px){

    #site-header .user-section .c-react-wrapper-dropdowns-reputation{
        display: block;
    }
}
#site-header .user-section .c-react-wrapper-dropdowns-dropdown {
            min-width: 74px;
        }
#site-header .user-menu{
    display: flex;
    align-items: center;
}
#site-header .user-menu .c-avatar {
            height: 42px;
            width: 42px;
            margin-right: 16px;
            box-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
        }
#site-header .user-menu .c-icon {
            height: 16px;
            width: 16px;
        filter: var(--textColor6-filter);
        }
#site-header .user-menu-dropdown,
    #site-header .explore-menu-dropdown{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #site-header .user-menu-dropdown,
    .theme-accessibility-dark 
    #site-header .explore-menu-dropdown {
        box-shadow: 0 0 0 2px #000;
    }
#site-header .user-menu-dropdown,
    #site-header .explore-menu-dropdown{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 20px;
}
@media (min-width: 1280px){

    #site-header .user-menu-dropdown li.site-link, #site-header .explore-menu-dropdown li.site-link{
        display: none;
    }
}
#site-header .user-menu-dropdown li.new a:after, #site-header .explore-menu-dropdown li.new a:after {
                /* text-14px + pt-6 + pb-6 */
                height: 26px;
                content: "New";
                background-image: url("/assets/icons/sparkle-warning-9b702069d191cdf620c9d5a96718087c96fc1edb.svg");
                background-size: 12px;
                background-position: 8px center;
                background-repeat: no-repeat;
                /* most of this is copied from site_header.rb L70 */
                /* pl-24 = pl-8 + bg-size 12px + mr-4 */
                margin-left: 8px;
                display: flex;
                align-items: center;
                border-radius: 100px;
                --tw-bg-opacity: 1;
                background-color: rgb(255 243 225 / var(--tw-bg-opacity, 1));
                padding-top: 6px;
                padding-bottom: 6px;
                padding-right: 8px;
                padding-left: 24px;
                font-size: 13px;
                font-weight: 600;
                --tw-text-opacity: 1;
                color: rgb(228 137 0 / var(--tw-text-opacity, 1));
            }
#site-header .user-menu-dropdown li.opt a,
            #site-header .user-menu-dropdown li.opt form.button_to button,
            #site-header .explore-menu-dropdown li.opt a,
            #site-header .explore-menu-dropdown li.opt form.button_to button{
    display: flex;
    font-weight: 500;
    color: var(--textColor6);
    font-size: 16px;
    line-height: 170%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
#site-header .user-menu-dropdown li.opt a:hover, #site-header .user-menu-dropdown li.opt form.button_to button:hover, #site-header .explore-menu-dropdown li.opt a:hover, #site-header .explore-menu-dropdown li.opt form.button_to button:hover{
    background-color: var(--backgroundColorD);
    color: var(--textColor5);
}
#site-header .user-menu-dropdown {
        min-width: 350px;
    }
#site-header .user-menu-dropdown li.profile a{
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
}
#site-header .user-menu-dropdown li.profile a .c-avatar {
                    height: 42px;
                    width: 42px;
                    margin-right: 16px;
                    box-shadow: 0px 4px 16px 0px
                        rgba(var(--shadowColorMain), 0.3);
                }
#site-header .user-menu-dropdown li.profile a .info{
    flex-grow: 1;
}
#site-header .user-menu-dropdown li.profile a .info .name{
    font-size: 18px;
    font-weight: 600;
    line-height: 125%;
    color: var(--textColor1);
}
#site-header .user-menu-dropdown li.profile a .info .handle{
    font-size: 16px;
    font-weight: 500;
    line-height: 125%;
    color: var(--textColor6);
}
#site-header .user-menu-dropdown li.profile a .c-icon {
                    height: 16px;
                    width: 16px;
        filter: var(--textColor6-filter);
        margin-left: 32px;
                }
#site-header .user-menu-dropdown li.opt a,
            #site-header .user-menu-dropdown li.opt form.button_to button{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}
@media (min-width: 1024px){

    #site-header .user-menu-dropdown li.opt a,
            #site-header .user-menu-dropdown li.opt form.button_to button{
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
#site-header .user-menu-dropdown li.opt form.button_to button{
    width: 100%;
}
#site-header .user-menu-dropdown li.site-link.donate{
    position: relative;
}
#site-header .user-menu-dropdown li.site-link.donate:after {
                content: "";
                border-bottom-width: 1px;
                border-color: var(--borderColor7);
                height: 1px;
                bottom: -8px;
                left: 0;
                right: 0;
                position: absolute;
            }
#site-header .user-menu-dropdown li.site-link.donate{
    margin-bottom: 16px;
}
#site-header .user-menu-dropdown li.reputation{
    margin-bottom: 20px;
}
@media (min-width: 1280px){

    #site-header .user-menu-dropdown li.reputation{
        display: none;
    }
}
#site-header .user-menu-dropdown li.reputation .c-primary-reputation{
    margin-right: 0px;
}
#site-header .auth-buttons{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
#site-header .auth-buttons a:nth-child(2){
    margin-left: 8px;
}
#site-header .auth-buttons a,
    #site-header .explore-menu {
        height: 40px;
        font-size: 15px;
    }
@media (min-width: 1024px){

    #site-header .auth-buttons a,
    #site-header .explore-menu{
        font-size: 14px;
            height: 32px;
    }
}
#site-header .explore-menu{
    margin-left: 20px;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 1024px){

    #site-header .explore-menu{
        display: none;
    }
}
#site-header .explore-menu .c-icon {
            filter: var(--textColor2-filter);
        }
#site-header .explore-menu-dropdown{
    padding-top: 8px;
    padding-bottom: 8px;
}
#site-header .explore-menu-dropdown li.opt a{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}
@media screen and (max-width: 500px) {
            /* This is the Popper dropdown, which doesn't have a class */
            #site-header .user-menu + *, #site-header .explore-menu + * {
                position: fixed !important;
                transform: none !important;
                inset: 0px 0px 0px auto !important;
                display: flex;
            }
                #site-header .user-menu + * > ul, #site-header .explore-menu + * > ul {
                    border-radius: 0px !important;
                    --tw-shadow: var(--box-shadow-lgZ1) !important;
                    --tw-shadow-colored: var(--box-shadow-lgZ1) !important;
                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                }

    .theme-accessibility-dark #site-header .user-menu + * > ul,
    .theme-accessibility-dark  #site-header .explore-menu + * > ul {
        box-shadow: 0 0 0 2px #000 !important;
    }
    }
@media screen and (max-width: 410px) {
        #site-header .user-menu,
        #site-header .explore-menu,
        #site-header .auth-buttons a{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
        #site-header .user-menu,
        #site-header .explore-menu{
        margin-left: 12px;
    }
    }
@media screen and (max-width: 340px) {
        #site-header .exercism-link{
        display: none;
    }
.c-react-wrapper-common-introducer#site-header .exercism-link {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .exercism-link {
        display: flex;
    }
.c-introducer#site-header .exercism-link {
        display: none;
    }
    }
body.controller-docs,
body.namespace-docs{
    background-color: var(--backgroundColorB);
}
body.controller-docs #site-header, body.namespace-docs #site-header{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-width: 0;
}
body.controller-docs #site-header .exercism-link, body.namespace-docs #site-header .exercism-link{
    margin-right: 32px;
}
body.controller-docs #site-header .docs-search, body.namespace-docs #site-header .docs-search {
            /* TODO: Readd once implemented */
            /* @apply block; */
        }
body.controller-about,
body.namespace-about{
    background-color: var(--backgroundColorB);
}
body.controller-about #site-header, body.namespace-about #site-header{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-width: 0;
}
body.controller-about #site-header .exercism-link, body.namespace-about #site-header .exercism-link{
    margin-right: 32px;
}
body:not(.controller-pages.action-index) #site-header .auth-buttons + .c-react-wrapper-dropdowns-dropdown{
    min-width: 135px;
}
@media (min-width: 1024px){

    body:not(.controller-pages.action-index) #site-header .auth-buttons + .c-react-wrapper-dropdowns-dropdown{
        min-width: 0;
    }
}
#site-header {
    --nav-backgroundColor: var(--backgroundColorNavDropdown);
    --nav-highlightColor: var(--backgroundColorA);
}
#site-header .nav-element{
    position: relative;
    cursor: default;
}
#site-header .nav-element span{
    padding: 24px;
}
#site-header .nav-element .nav-element-label{
    font-size: 16px;
    font-weight: 600;
    color: var(--textColor6);
}
#site-header .nav-element .nav-element-link,
        #site-header .nav-element .nav-element-label{
    position: relative;
    display: flex;
    align-items: center;
}
#site-header .nav-element .nav-element-link:hover + .nav-element-dropdown ul li:first-child .nav-dropdown-element, #site-header .nav-element .nav-element-link:focus-within + .nav-element-dropdown ul li:first-child .nav-dropdown-element, #site-header .nav-element .nav-element-label:hover + .nav-element-dropdown ul li:first-child .nav-dropdown-element, #site-header .nav-element .nav-element-label:focus-within + .nav-element-dropdown ul li:first-child .nav-dropdown-element {
                            background: var(--nav-highlightColor);
                            visibility: visible;
                        }
#site-header .nav-element .nav-element-link:hover + .nav-element-dropdown ul li:first-child .nav-dropdown-view, #site-header .nav-element .nav-element-link:focus-within + .nav-element-dropdown ul li:first-child .nav-dropdown-view, #site-header .nav-element .nav-element-label:hover + .nav-element-dropdown ul li:first-child .nav-dropdown-view, #site-header .nav-element .nav-element-label:focus-within + .nav-element-dropdown ul li:first-child .nav-dropdown-view {
                            display: inherit;
                        }
#site-header .nav-element:hover .nav-element-dropdown,
            #site-header .nav-element:hover .arrow,
            #site-header .nav-element:focus-within .nav-element-dropdown,
            #site-header .nav-element:focus-within .arrow {
                display: inherit;
                opacity: 1;
                visibility: visible;
            }
#site-header .nav-element:hover .arrow, #site-header .nav-element:focus-within .arrow {
                transform: translateX(-50%) translateY(0) rotate(45deg);
            }
#site-header .nav-element:hover .nav-element-dropdown, #site-header .nav-element:focus-within .nav-element-dropdown {
                transform: translateY(0);
            }
#site-header .nav-element .nav-element-dropdown,
        #site-header .nav-element .arrow{
    position: absolute;
    opacity: 0;
            transition: transform 150ms ease-in-out, opacity 200ms ease-in-out;
            visibility: hidden;
}
#site-header .nav-element .arrow {
            --a-size: 15px;
            z-index: -1;
            width: var(--a-size);
            height: var(--a-size);
            bottom: 0;
            left: 50%;
            background-color: var(--nav-backgroundColor);
            clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
            transform: translateX(-50%) translateY(-10px) rotate(45deg);
            border-radius: 3px;
            vertical-align: middle;
        }
#site-header .nav-element.insiders .arrow {
                /* bottom:-10px; */
                z-index: 50;
                --tw-bg-opacity: 1;
                background-color: rgb(40 35 57 / var(--tw-bg-opacity, 1));
            }
#site-header .nav-element.insiders .nav-element-label:after {
                    content: "";
                    background: url("/assets/icons/insiders-d0418ec8b59d21a8852f7326404fa20b2d21785d.svg");
                    margin-left: 6px;
                    margin-bottom: 3px;
                    height: 16px;
                    width: 16px;
                    background-size: cover;
                }
#site-header .nav-element.insiders .nav-element-dropdown {
                /* @apply !visible !opacity-[1]; */
                height: auto !important;
                outline: none;
            }
#site-header .nav-element.insiders .nav-element-dropdown .nav-dropdown-view {
        border-style: solid !important;
        border-color: transparent !important;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff) !important;
        background-origin: border-box !important;
        background-clip: padding-box, border-box !important;
        height: auto !important;
        overflow: hidden;
        border-width: 2px !important;
        padding: 0px !important;
        top: -10px !important;
    }
#site-header .nav-element.insiders .nav-element-dropdown .nav-dropdown-view .nav-dropdown-view-content{
    display: flex;
    flex-direction: column;
}
#site-header .nav-element .nav-element-dropdown {
            --dropdown-offset: 0px;
            --nd-ul-width: 320px;
            --nd-view-width: 420px;
            --nd-height: 420px;
            --nd-width: calc(var(--nd-ul-width) + var(--nd-view-width));

            height: var(--nd-height);
            width: var(--nd-width);
            left: var(--dropdown-offset);
            top: 64px;
            z-index: 40;
            transform: translateY(-10px);
            border-radius: 8px;
            --tw-shadow: 0px 6px 28px 4px rgba(var(--shadowColorMain), 0.5);
            --tw-shadow-colored: 0px 6px 28px 4px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

    .theme-accessibility-dark #site-header .nav-element .nav-element-dropdown {
        box-shadow: 0 0 0 2px #000;
    }
#site-header .nav-element .nav-element-dropdown {
            background: var(--nav-backgroundColor);
            outline: 8px solid var(--nav-backgroundColor);
        }
#site-header .nav-element .nav-element-dropdown.only-view {
                width: var(--nd-view-width);
            }
#site-header .nav-element .nav-element-dropdown.only-view .nav-dropdown-view{
    position: absolute;
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
                    background: var(--nav-highlightColor);
                    height: var(--nd-height);
                    top: var(--nd-height);
                    width: var(--nd-view-width);
                    top: 0;
}
#site-header .nav-element .nav-element-dropdown:before {
                content: "";
                position: absolute;
                inset: 0px;
                margin: -8px;
            }
#site-header .nav-element .nav-element-dropdown.has-view .nav-dropdown-element{
    gap: 12px;
}
#site-header .nav-element .nav-element-dropdown.has-view .nav-element-link .c-icon {
                        height: 48px;
                        width: 48px;
                    }
#site-header .nav-element .nav-element-dropdown.has-no-view {
                width: auto;
                height: auto;
            }
#site-header .nav-element .nav-element-dropdown.has-no-view ul {
                    width: auto;
                }
#site-header .nav-element .nav-element-dropdown.has-no-view ul li{
    padding-right: 0px;
}
#site-header .nav-element .nav-element-dropdown.has-no-view .nav-dropdown-element{
    gap: 16px;
}
#site-header .nav-element .nav-element-dropdown.has-no-view .nav-element-link .c-icon {
                        height: 24px;
                        width: 24px;
                    }
#site-header .nav-element .nav-element-dropdown ul{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-right: 0px;
    position: relative;
    height: 100%;
                width: var(--nd-ul-width);
}
#site-header .nav-element .nav-element-dropdown ul li{
    width: 100%;
    padding-right: 8px;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-view{
    position: absolute;
    display: none;
    overflow: auto;
    border-radius: 8px;
}
.c-react-wrapper-common-introducer#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-view {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-view {
        display: flex;
    }
.c-introducer#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-view {
        display: none;
    }
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-view {
                        background: var(--nav-highlightColor);
                        height: var(--nd-height);
                        top: var(--nd-height);
                        width: var(--nd-view-width);
                        transform: translate(100%, -100%);
                        right: 0;
                    }
#site-header .nav-element .nav-element-dropdown ul li:hover .nav-dropdown-view, #site-header .nav-element .nav-element-dropdown ul li:focus-within .nav-dropdown-view {
                            display: inherit;
                        }
#site-header .nav-element .nav-element-dropdown ul li:hover .nav-dropdown-element, #site-header .nav-element .nav-element-dropdown ul li:focus-within .nav-dropdown-element {
                            background: var(--nav-highlightColor);
                        }
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element{
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element h6{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 2px;
    color: var(--textColor1);
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element h6 .new{
    --tw-bg-opacity: 1;
    background-color: rgb(246 150 5 / var(--tw-bg-opacity, 1));
    font-size: 11px;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    margin-left: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 8px;
    display: inline;
    vertical-align: top;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element p{
    line-height: 160%;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element p strong{
    font-weight: 500;
    color: var(--textColor2);
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element p{
    font-size: 14px;
    color: var(--textColor1);
                            /* li-width - (padding*2+icon-size*2+gap) */
                            /* width: calc(var(--nd-ul-width) - 72px); */
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-dropdown-element .c-icon.external-icon{
    margin-left: auto;
    height: 16px;
    width: 16px;
}
#site-header .nav-element .nav-element-dropdown ul li .nav-element-link:before{
    position: absolute;
    inset: 0px;
    margin: -8px;
    margin-top: 0px;
                            content: "";
}
#site-header .nav-element .nav-element-dropdown ul li .nav-element-link{
    white-space: nowrap;
    cursor: pointer;
}
#site-header .nav-element .nav-element-dropdown ul li:first-child .nav-element-link:before{
    margin-top: -8px;
}
#site-header .nav-element .nav-element-dropdown ul li:last-child{
    flex-grow: 1;
}
#site-header section.c-zero-section{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
#site-header #journey-view{
    position: absolute;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    border-radius: 8px;
    background-size: cover;
        background-image: url("/assets/hero-journey-c0c204cabd518ee1818ca8fe99df2dc80f445010.svg");
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-position: 35%;
}
#site-header #journey-view .journey-contents {
            background-color: rgba(106, 147, 255, 0.8);
            margin: 16px;
            border-radius: 16px;
            padding-top: 8px;
            padding-bottom: 8px;
            height: -moz-fit-content;
            height: fit-content;
        }
#site-header #journey-view .journey-contents .content{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}
#site-header #journey-view .journey-contents .content span{
    padding: 0px;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(19 11 67 / var(--tw-text-opacity, 1));
}
#site-header #journey-view .journey-contents .content .c-icon {
                    width: 20px;
                    height: 20px;
        filter: invert(10%) sepia(35%) saturate(3157%) hue-rotate(231deg)
            brightness(99%) contrast(113%);
                }
@media (prefers-reduced-motion: reduce) {
        #site-header .nav-element-dropdown,
        #site-header .arrow {
            transition: none !important;
        }
    }
.theme-light #site-header .nav-element.insiders .nav-element-label:after{
    opacity: 0.75;
}
.c-toggle-button {
    --switch-size: 18px;
    --switch-w: calc(var(--switch-size) * 2);
    --switch-h: var(--switch-size);
    --switch-p: calc(var(--switch-size) / 6);
    --left-p: calc(var(--switch-p) * 2 / 3);
    --transformX: calc(
        var(--switch-w) - var(--switch-size) -
            calc(var(--switch-p) - var(--left-p))
    );
    --shape-size: calc(var(--switch-h) - var(--switch-p));
    --toggle-off-color: #F0F3F9;
    --toggle-on-color: #F2F0FC;
    --toggle-off-bg: #A9A6BD;
    --toggle-on-bg: #604FCD;
    --transition-speed: 300ms;
}
.c-toggle-button .switch {
        position: relative;
        display: inline-block;
        width: var(--switch-w);
        height: var(--switch-h);
    }
.c-toggle-button .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
.c-toggle-button .switch input:checked + .slider {
                background-color: var(--toggle-on-bg);
            }
.c-toggle-button .switch input:checked + .slider:before {
                    transform: translateX(var(--transformX));
                    background: var(--toggle-on-color);
                }
.c-toggle-button .switch input:focus + .slider {
                box-shadow: 0 0 1px var(--dark-bg);
            }
.c-toggle-button .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--toggle-off-bg);
        transition: var(--transition-speed);
    }
.c-toggle-button .slider.round {
            border-radius: var(--switch-h);
        }
.c-toggle-button .slider:before{
    position: absolute;
    margin: auto;
    border-radius: 100%;
            background: var(--toggle-off-color);
            content: "";
            height: var(--shape-size);
            width: var(--shape-size);
            left: var(--left-p);
            top: 0;
            bottom: 0;
            transition: all var(--transition-speed) ease;
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}
.theme-light .c-header-with-bg, .theme-accessibility-dark .c-header-with-bg {
        background: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;

        background-size: 100%;
        background-position: -190px;
    }
.theme-dark .c-header-with-bg {
        background: #191525;
    }
@media (prefers-color-scheme: dark) {
        .theme-system .c-header-with-bg {
            background: #191525 !important;
        }
}
@media (prefers-color-scheme: light) {
        .theme-system .c-header-with-bg {
            background: linear-gradient(
                    180deg,
                    rgba(251, 251, 255, 0) 79.36%,
                    #f4f4fd 100%
                ),
                linear-gradient(
                    180deg,
                    #fafaff 0%,
                    rgba(250, 250, 255, 0.677852) 24.48%,
                    rgba(250, 250, 255, 0) 77.6%,
                    #fafaff 100%
                ),
                var(--hex-bg-image), #fafaff;

            background-size: 100%;
            background-position: -190px;
        }
}
@keyframes badgeCommonPulse {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(240, 243, 249, 1));
    }

    100% {
        filter: drop-shadow(0px 0px 40px rgba(240, 243, 249, 0));
    }
}
@keyframes badgeRarePulse {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(219, 240, 255, 1));
    }

    100% {
        filter: drop-shadow(0px 0px 40px rgba(219, 240, 255, 0));
    }
}
@keyframes badgeUltimatePulse {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(255, 230, 0, 1));
    }

    100% {
        filter: drop-shadow(0px 0px 40px rgba(255, 230, 0, 0));
    }
}
@keyframes badgeLegendaryPulse {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(255, 0, 0, 1));
    }

    100% {
        filter: drop-shadow(0px 0px 40px rgba(255, 0, 0, 0));
    }
}
.c-badge-medallion {
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.c-badge-medallion .c-icon {
        height: 45%;
        width: 45%;
    }
.c-badge-medallion .--unknown{
    font-family: Source Code Pro, monospace;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
}
.c-badge-medallion.--common.--unrevealed {
        animation: badgeCommonPulse 2s infinite ease-in;
    }
.c-badge-medallion.--rare.--unrevealed {
        animation: badgeRarePulse 2s infinite ease-in;
    }
.c-badge-medallion.--ultimate.--unrevealed {
        animation: badgeUltimatePulse 2s infinite ease-in;
    }
.c-badge-medallion.--legendary.--unrevealed {
        animation: badgeLegendaryPulse 2s infinite ease-in;
    }
.c-badge-medallion.--common {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yOCAyLjMwOTQxQzMwLjQ3NTMgMC44ODAzNDQgMzMuNTI0OCAwLjg4MDM0NSAzNiAyLjMwOTQxTDU1LjcxMjkgMTMuNjkwNkM1OC4xODgxIDE1LjExOTcgNTkuNzEyOSAxNy43NjA3IDU5LjcxMjkgMjAuNjE4OFY0My4zODEyQzU5LjcxMjkgNDYuMjM5MyA1OC4xODgxIDQ4Ljg4MDMgNTUuNzEyOSA1MC4zMDk0TDM2IDYxLjY5MDZDMzMuNTI0OCA2My4xMTk3IDMwLjQ3NTMgNjMuMTE5NyAyOCA2MS42OTA2TDguMjg3MjMgNTAuMzA5NEM1LjgxMjAyIDQ4Ljg4MDMgNC4yODcyMyA0Ni4yMzkzIDQuMjg3MjMgNDMuMzgxMlYyMC42MTg4QzQuMjg3MjMgMTcuNzYwNyA1LjgxMjAyIDE1LjExOTcgOC4yODcyMyAxMy42OTA2TDI4IDIuMzA5NDFaIiBmaWxsPSIjRjBGM0Y5Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTQuMjEyOSAxNi4yODg3TDM0LjUgNC45MDc0OEMzMi45NTMgNC4wMTQzMiAzMS4wNDcxIDQuMDE0MzIgMjkuNSA0LjkwNzQ4TDkuNzg3MjMgMTYuMjg4N0M4LjI0MDIzIDE3LjE4MTggNy4yODcyMyAxOC44MzI1IDcuMjg3MjMgMjAuNjE4OFY0My4zODEyQzcuMjg3MjMgNDUuMTY3NSA4LjI0MDIzIDQ2LjgxODIgOS43ODcyMyA0Ny43MTEzTDI5LjUgNTkuMDkyNUMzMS4wNDcxIDU5Ljk4NTcgMzIuOTUzIDU5Ljk4NTcgMzQuNSA1OS4wOTI1TDU0LjIxMjkgNDcuNzExM0M1NS43NTk5IDQ2LjgxODIgNTYuNzEyOSA0NS4xNjc1IDU2LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU2LjcxMjkgMTguODMyNSA1NS43NTk5IDE3LjE4MTggNTQuMjEyOSAxNi4yODg3Wk0zNiAyLjMwOTQxQzMzLjUyNDggMC44ODAzNDUgMzAuNDc1MyAwLjg4MDM0NCAyOCAyLjMwOTQxTDguMjg3MjMgMTMuNjkwNkM1LjgxMjAyIDE1LjExOTcgNC4yODcyMyAxNy43NjA3IDQuMjg3MjMgMjAuNjE4OFY0My4zODEyQzQuMjg3MjMgNDYuMjM5MyA1LjgxMjAyIDQ4Ljg4MDMgOC4yODcyMyA1MC4zMDk0TDI4IDYxLjY5MDZDMzAuNDc1MyA2My4xMTk3IDMzLjUyNDggNjMuMTE5NyAzNiA2MS42OTA2TDU1LjcxMjkgNTAuMzA5NEM1OC4xODgxIDQ4Ljg4MDMgNTkuNzEyOSA0Ni4yMzkzIDU5LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU5LjcxMjkgMTcuNzYwNyA1OC4xODgxIDE1LjExOTcgNTUuNzEyOSAxMy42OTA2TDM2IDIuMzA5NDFaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTIuNjE0NyAxOC4zNjZMMzMuNSA3LjMzMDEzQzMyLjU3MTggNi43OTQyMyAzMS40MjgyIDYuNzk0MjMgMzAuNSA3LjMzMDEzTDExLjM4NTMgMTguMzY2QzEwLjQ1NzEgMTguOTAxOSA5Ljg4NTI1IDE5Ljg5MjMgOS44ODUyNSAyMC45NjQxVjQzLjAzNTlDOS44ODUyNSA0NC4xMDc3IDEwLjQ1NzEgNDUuMDk4MSAxMS4zODUzIDQ1LjYzNEwzMC41IDU2LjY2OTlDMzEuNDI4MiA1Ny4yMDU4IDMyLjU3MTggNTcuMjA1OCAzMy41IDU2LjY2OTlMNTIuNjE0NyA0NS42MzRDNTMuNTQyOSA0NS4wOTgxIDU0LjExNDcgNDQuMTA3NyA1NC4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1NC4xMTQ3IDE5Ljg5MjMgNTMuNTQyOSAxOC45MDE5IDUyLjYxNDcgMTguMzY2Wk0zNSA0LjczMjA1QzMzLjE0MzYgMy42NjAyNiAzMC44NTY0IDMuNjYwMjYgMjkgNC43MzIwNUw5Ljg4NTI1IDE1Ljc2OEM4LjAyODg1IDE2LjgzOTggNi44ODUyNSAxOC44MjA1IDYuODg1MjUgMjAuOTY0MVY0My4wMzU5QzYuODg1MjUgNDUuMTc5NSA4LjAyODg1IDQ3LjE2MDMgOS44ODUyNSA0OC4yMzIxTDI5IDU5LjI2OEMzMC44NTY0IDYwLjMzOTcgMzMuMTQzNiA2MC4zMzk3IDM1IDU5LjI2OEw1NC4xMTQ3IDQ4LjIzMjFDNTUuOTcxMSA0Ny4xNjAzIDU3LjExNDcgNDUuMTc5NSA1Ny4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1Ny4xMTQ3IDE4LjgyMDUgNTUuOTcxMSAxNi44Mzk4IDU0LjExNDcgMTUuNzY4TDM1IDQuNzMyMDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
        filter: drop-shadow(0px 0px 12px rgba(200, 200, 200, 0.6));
        --tw-text-opacity: 1;
        color: rgb(80 83 89 / var(--tw-text-opacity, 1));
    }
.c-badge-medallion.--rare {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yOCAyLjMwOTQxQzMwLjQ3NTMgMC44ODAzNDQgMzMuNTI0OCAwLjg4MDM0NSAzNiAyLjMwOTQxTDU1LjcxMjkgMTMuNjkwNkM1OC4xODgxIDE1LjExOTcgNTkuNzEyOSAxNy43NjA3IDU5LjcxMjkgMjAuNjE4OFY0My4zODEyQzU5LjcxMjkgNDYuMjM5MyA1OC4xODgxIDQ4Ljg4MDMgNTUuNzEyOSA1MC4zMDk0TDM2IDYxLjY5MDZDMzMuNTI0OCA2My4xMTk3IDMwLjQ3NTMgNjMuMTE5NyAyOCA2MS42OTA2TDguMjg3MjMgNTAuMzA5NEM1LjgxMjAyIDQ4Ljg4MDMgNC4yODcyMyA0Ni4yMzkzIDQuMjg3MjMgNDMuMzgxMlYyMC42MTg4QzQuMjg3MjMgMTcuNzYwNyA1LjgxMjAyIDE1LjExOTcgOC4yODcyMyAxMy42OTA2TDI4IDIuMzA5NDFaIiBmaWxsPSIjOUZCNEZGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTQuMjEyOSAxNi4yODg3TDM0LjUgNC45MDc0OEMzMi45NTMgNC4wMTQzMiAzMS4wNDcxIDQuMDE0MzIgMjkuNSA0LjkwNzQ4TDkuNzg3MjMgMTYuMjg4N0M4LjI0MDIzIDE3LjE4MTggNy4yODcyMyAxOC44MzI1IDcuMjg3MjMgMjAuNjE4OFY0My4zODEyQzcuMjg3MjMgNDUuMTY3NSA4LjI0MDIzIDQ2LjgxODIgOS43ODcyMyA0Ny43MTEzTDI5LjUgNTkuMDkyNUMzMS4wNDcxIDU5Ljk4NTcgMzIuOTUzIDU5Ljk4NTcgMzQuNSA1OS4wOTI1TDU0LjIxMjkgNDcuNzExM0M1NS43NTk5IDQ2LjgxODIgNTYuNzEyOSA0NS4xNjc1IDU2LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU2LjcxMjkgMTguODMyNSA1NS43NTk5IDE3LjE4MTggNTQuMjEyOSAxNi4yODg3Wk0zNiAyLjMwOTQxQzMzLjUyNDggMC44ODAzNDUgMzAuNDc1MyAwLjg4MDM0NCAyOCAyLjMwOTQxTDguMjg3MjMgMTMuNjkwNkM1LjgxMjAyIDE1LjExOTcgNC4yODcyMyAxNy43NjA3IDQuMjg3MjMgMjAuNjE4OFY0My4zODEyQzQuMjg3MjMgNDYuMjM5MyA1LjgxMjAyIDQ4Ljg4MDMgOC4yODcyMyA1MC4zMDk0TDI4IDYxLjY5MDZDMzAuNDc1MyA2My4xMTk3IDMzLjUyNDggNjMuMTE5NyAzNiA2MS42OTA2TDU1LjcxMjkgNTAuMzA5NEM1OC4xODgxIDQ4Ljg4MDMgNTkuNzEyOSA0Ni4yMzkzIDU5LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU5LjcxMjkgMTcuNzYwNyA1OC4xODgxIDE1LjExOTcgNTUuNzEyOSAxMy42OTA2TDM2IDIuMzA5NDFaIiBmaWxsPSIjMDAxNDRCIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTIuNjE0NyAxOC4zNjZMMzMuNSA3LjMzMDEzQzMyLjU3MTggNi43OTQyMyAzMS40MjgyIDYuNzk0MjMgMzAuNSA3LjMzMDEzTDExLjM4NTMgMTguMzY2QzEwLjQ1NzEgMTguOTAxOSA5Ljg4NTI1IDE5Ljg5MjMgOS44ODUyNSAyMC45NjQxVjQzLjAzNTlDOS44ODUyNSA0NC4xMDc3IDEwLjQ1NzEgNDUuMDk4MSAxMS4zODUzIDQ1LjYzNEwzMC41IDU2LjY2OTlDMzEuNDI4MiA1Ny4yMDU4IDMyLjU3MTggNTcuMjA1OCAzMy41IDU2LjY2OTlMNTIuNjE0NyA0NS42MzRDNTMuNTQyOSA0NS4wOTgxIDU0LjExNDcgNDQuMTA3NyA1NC4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1NC4xMTQ3IDE5Ljg5MjMgNTMuNTQyOSAxOC45MDE5IDUyLjYxNDcgMTguMzY2Wk0zNSA0LjczMjA1QzMzLjE0MzYgMy42NjAyNiAzMC44NTY0IDMuNjYwMjYgMjkgNC43MzIwNUw5Ljg4NTI1IDE1Ljc2OEM4LjAyODg1IDE2LjgzOTggNi44ODUyNSAxOC44MjA1IDYuODg1MjUgMjAuOTY0MVY0My4wMzU5QzYuODg1MjUgNDUuMTc5NSA4LjAyODg1IDQ3LjE2MDMgOS44ODUyNSA0OC4yMzIxTDI5IDU5LjI2OEMzMC44NTY0IDYwLjMzOTcgMzMuMTQzNiA2MC4zMzk3IDM1IDU5LjI2OEw1NC4xMTQ3IDQ4LjIzMjFDNTUuOTcxMSA0Ny4xNjAzIDU3LjExNDcgNDUuMTc5NSA1Ny4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1Ny4xMTQ3IDE4LjgyMDUgNTUuOTcxMSAxNi44Mzk4IDU0LjExNDcgMTUuNzY4TDM1IDQuNzMyMDVaIiBmaWxsPSIjREJGMEZGIi8+Cjwvc3ZnPgo=");
        filter: drop-shadow(0px 0px 12px rgba(219, 240, 255, 0.6));
        --tw-text-opacity: 1;
        color: rgb(0 20 75 / var(--tw-text-opacity, 1));
    }
.c-badge-medallion.--ultimate {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yOCAyLjMwOTQxQzMwLjQ3NTMgMC44ODAzNDQgMzMuNTI0OCAwLjg4MDM0NSAzNiAyLjMwOTQxTDU1LjcxMjkgMTMuNjkwNkM1OC4xODgxIDE1LjExOTcgNTkuNzEyOSAxNy43NjA3IDU5LjcxMjkgMjAuNjE4OFY0My4zODEyQzU5LjcxMjkgNDYuMjM5MyA1OC4xODgxIDQ4Ljg4MDMgNTUuNzEyOSA1MC4zMDk0TDM2IDYxLjY5MDZDMzMuNTI0OCA2My4xMTk3IDMwLjQ3NTMgNjMuMTE5NyAyOCA2MS42OTA2TDguMjg3MjMgNTAuMzA5NEM1LjgxMjAyIDQ4Ljg4MDMgNC4yODcyMyA0Ni4yMzkzIDQuMjg3MjMgNDMuMzgxMlYyMC42MTg4QzQuMjg3MjMgMTcuNzYwNyA1LjgxMjAyIDE1LjExOTcgOC4yODcyMyAxMy42OTA2TDI4IDIuMzA5NDFaIiBmaWxsPSIjRjY5NjA1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTQuMjEyOSAxNi4yODg3TDM0LjUgNC45MDc0OEMzMi45NTMgNC4wMTQzMiAzMS4wNDcxIDQuMDE0MzIgMjkuNSA0LjkwNzQ4TDkuNzg3MjMgMTYuMjg4N0M4LjI0MDIzIDE3LjE4MTggNy4yODcyMyAxOC44MzI1IDcuMjg3MjMgMjAuNjE4OFY0My4zODEyQzcuMjg3MjMgNDUuMTY3NSA4LjI0MDIzIDQ2LjgxODIgOS43ODcyMyA0Ny43MTEzTDI5LjUgNTkuMDkyNUMzMS4wNDcxIDU5Ljk4NTcgMzIuOTUzIDU5Ljk4NTcgMzQuNSA1OS4wOTI1TDU0LjIxMjkgNDcuNzExM0M1NS43NTk5IDQ2LjgxODIgNTYuNzEyOSA0NS4xNjc1IDU2LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU2LjcxMjkgMTguODMyNSA1NS43NTk5IDE3LjE4MTggNTQuMjEyOSAxNi4yODg3Wk0zNiAyLjMwOTQxQzMzLjUyNDggMC44ODAzNDUgMzAuNDc1MyAwLjg4MDM0NCAyOCAyLjMwOTQxTDguMjg3MjMgMTMuNjkwNkM1LjgxMjAyIDE1LjExOTcgNC4yODcyMyAxNy43NjA3IDQuMjg3MjMgMjAuNjE4OFY0My4zODEyQzQuMjg3MjMgNDYuMjM5MyA1LjgxMjAyIDQ4Ljg4MDMgOC4yODcyMyA1MC4zMDk0TDI4IDYxLjY5MDZDMzAuNDc1MyA2My4xMTk3IDMzLjUyNDggNjMuMTE5NyAzNiA2MS42OTA2TDU1LjcxMjkgNTAuMzA5NEM1OC4xODgxIDQ4Ljg4MDMgNTkuNzEyOSA0Ni4yMzkzIDU5LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU5LjcxMjkgMTcuNzYwNyA1OC4xODgxIDE1LjExOTcgNTUuNzEyOSAxMy42OTA2TDM2IDIuMzA5NDFaIiBmaWxsPSIjMDAxNDRCIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTIuNjE0NyAxOC4zNjZMMzMuNSA3LjMzMDEzQzMyLjU3MTggNi43OTQyMyAzMS40MjgyIDYuNzk0MjMgMzAuNSA3LjMzMDEzTDExLjM4NTMgMTguMzY2QzEwLjQ1NzEgMTguOTAxOSA5Ljg4NTI1IDE5Ljg5MjMgOS44ODUyNSAyMC45NjQxVjQzLjAzNTlDOS44ODUyNSA0NC4xMDc3IDEwLjQ1NzEgNDUuMDk4MSAxMS4zODUzIDQ1LjYzNEwzMC41IDU2LjY2OTlDMzEuNDI4MiA1Ny4yMDU4IDMyLjU3MTggNTcuMjA1OCAzMy41IDU2LjY2OTlMNTIuNjE0NyA0NS42MzRDNTMuNTQyOSA0NS4wOTgxIDU0LjExNDcgNDQuMTA3NyA1NC4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1NC4xMTQ3IDE5Ljg5MjMgNTMuNTQyOSAxOC45MDE5IDUyLjYxNDcgMTguMzY2Wk0zNSA0LjczMjA1QzMzLjE0MzYgMy42NjAyNiAzMC44NTY0IDMuNjYwMjYgMjkgNC43MzIwNUw5Ljg4NTI1IDE1Ljc2OEM4LjAyODg1IDE2LjgzOTggNi44ODUyNSAxOC44MjA1IDYuODg1MjUgMjAuOTY0MVY0My4wMzU5QzYuODg1MjUgNDUuMTc5NSA4LjAyODg1IDQ3LjE2MDMgOS44ODUyNSA0OC4yMzIxTDI5IDU5LjI2OEMzMC44NTY0IDYwLjMzOTcgMzMuMTQzNiA2MC4zMzk3IDM1IDU5LjI2OEw1NC4xMTQ3IDQ4LjIzMjFDNTUuOTcxMSA0Ny4xNjAzIDU3LjExNDcgNDUuMTc5NSA1Ny4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1Ny4xMTQ3IDE4LjgyMDUgNTUuOTcxMSAxNi44Mzk4IDU0LjExNDcgMTUuNzY4TDM1IDQuNzMyMDVaIiBmaWxsPSIjRkZEMjQxIi8+Cjwvc3ZnPgo=");
        filter: drop-shadow(0px 0px 12px rgba(255, 230, 0, 0.6));
        --tw-text-opacity: 1;
        color: rgb(86 0 0 / var(--tw-text-opacity, 1));
    }
.c-badge-medallion.--legendary {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yOCAyLjMwOTQxQzMwLjQ3NTMgMC44ODAzNDQgMzMuNTI0OCAwLjg4MDM0NSAzNiAyLjMwOTQxTDU1LjcxMjkgMTMuNjkwNkM1OC4xODgxIDE1LjExOTcgNTkuNzEyOSAxNy43NjA3IDU5LjcxMjkgMjAuNjE4OFY0My4zODEyQzU5LjcxMjkgNDYuMjM5MyA1OC4xODgxIDQ4Ljg4MDMgNTUuNzEyOSA1MC4zMDk0TDM2IDYxLjY5MDZDMzMuNTI0OCA2My4xMTk3IDMwLjQ3NTMgNjMuMTE5NyAyOCA2MS42OTA2TDguMjg3MjMgNTAuMzA5NEM1LjgxMjAyIDQ4Ljg4MDMgNC4yODcyMyA0Ni4yMzkzIDQuMjg3MjMgNDMuMzgxMlYyMC42MTg4QzQuMjg3MjMgMTcuNzYwNyA1LjgxMjAyIDE1LjExOTcgOC4yODcyMyAxMy42OTA2TDI4IDIuMzA5NDFaIiBmaWxsPSIjRUI1NzU3Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTQuMjEyOSAxNi4yODg3TDM0LjUgNC45MDc0OEMzMi45NTMgNC4wMTQzMiAzMS4wNDcxIDQuMDE0MzIgMjkuNSA0LjkwNzQ4TDkuNzg3MjMgMTYuMjg4N0M4LjI0MDIzIDE3LjE4MTggNy4yODcyMyAxOC44MzI1IDcuMjg3MjMgMjAuNjE4OFY0My4zODEyQzcuMjg3MjMgNDUuMTY3NSA4LjI0MDIzIDQ2LjgxODIgOS43ODcyMyA0Ny43MTEzTDI5LjUgNTkuMDkyNUMzMS4wNDcxIDU5Ljk4NTcgMzIuOTUzIDU5Ljk4NTcgMzQuNSA1OS4wOTI1TDU0LjIxMjkgNDcuNzExM0M1NS43NTk5IDQ2LjgxODIgNTYuNzEyOSA0NS4xNjc1IDU2LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU2LjcxMjkgMTguODMyNSA1NS43NTk5IDE3LjE4MTggNTQuMjEyOSAxNi4yODg3Wk0zNiAyLjMwOTQxQzMzLjUyNDggMC44ODAzNDUgMzAuNDc1MyAwLjg4MDM0NCAyOCAyLjMwOTQxTDguMjg3MjMgMTMuNjkwNkM1LjgxMjAyIDE1LjExOTcgNC4yODcyMyAxNy43NjA3IDQuMjg3MjMgMjAuNjE4OFY0My4zODEyQzQuMjg3MjMgNDYuMjM5MyA1LjgxMjAyIDQ4Ljg4MDMgOC4yODcyMyA1MC4zMDk0TDI4IDYxLjY5MDZDMzAuNDc1MyA2My4xMTk3IDMzLjUyNDggNjMuMTE5NyAzNiA2MS42OTA2TDU1LjcxMjkgNTAuMzA5NEM1OC4xODgxIDQ4Ljg4MDMgNTkuNzEyOSA0Ni4yMzkzIDU5LjcxMjkgNDMuMzgxMlYyMC42MTg4QzU5LjcxMjkgMTcuNzYwNyA1OC4xODgxIDE1LjExOTcgNTUuNzEyOSAxMy42OTA2TDM2IDIuMzA5NDFaIiBmaWxsPSIjMDAxNDRCIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTIuNjE0NyAxOC4zNjZMMzMuNSA3LjMzMDEzQzMyLjU3MTggNi43OTQyMyAzMS40MjgyIDYuNzk0MjMgMzAuNSA3LjMzMDEzTDExLjM4NTMgMTguMzY2QzEwLjQ1NzEgMTguOTAxOSA5Ljg4NTI1IDE5Ljg5MjMgOS44ODUyNSAyMC45NjQxVjQzLjAzNTlDOS44ODUyNSA0NC4xMDc3IDEwLjQ1NzEgNDUuMDk4MSAxMS4zODUzIDQ1LjYzNEwzMC41IDU2LjY2OTlDMzEuNDI4MiA1Ny4yMDU4IDMyLjU3MTggNTcuMjA1OCAzMy41IDU2LjY2OTlMNTIuNjE0NyA0NS42MzRDNTMuNTQyOSA0NS4wOTgxIDU0LjExNDcgNDQuMTA3NyA1NC4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1NC4xMTQ3IDE5Ljg5MjMgNTMuNTQyOSAxOC45MDE5IDUyLjYxNDcgMTguMzY2Wk0zNSA0LjczMjA1QzMzLjE0MzYgMy42NjAyNiAzMC44NTY0IDMuNjYwMjYgMjkgNC43MzIwNUw5Ljg4NTI1IDE1Ljc2OEM4LjAyODg1IDE2LjgzOTggNi44ODUyNSAxOC44MjA1IDYuODg1MjUgMjAuOTY0MVY0My4wMzU5QzYuODg1MjUgNDUuMTc5NSA4LjAyODg1IDQ3LjE2MDMgOS44ODUyNSA0OC4yMzIxTDI5IDU5LjI2OEMzMC44NTY0IDYwLjMzOTcgMzMuMTQzNiA2MC4zMzk3IDM1IDU5LjI2OEw1NC4xMTQ3IDQ4LjIzMjFDNTUuOTcxMSA0Ny4xNjAzIDU3LjExNDcgNDUuMTc5NSA1Ny4xMTQ3IDQzLjAzNTlWMjAuOTY0MUM1Ny4xMTQ3IDE4LjgyMDUgNTUuOTcxMSAxNi44Mzk4IDU0LjExNDcgMTUuNzY4TDM1IDQuNzMyMDVaIiBmaWxsPSIjRkY5MzkzIi8+Cjwvc3ZnPgo=");
        filter: drop-shadow(0px 0px 12px rgba(255, 0, 0, 0.8));
        --tw-text-opacity: 1;
        color: rgb(75 0 0 / var(--tw-text-opacity, 1));
    }
.c-badge{
    display: flex;
    align-items: flex-start;
    text-align: left;
}
.c-badge .c-badge-medallion {
        height: 64px;
        width: 64px;
        flex-shrink: 0;
    }
.c-badge .--info{
    margin-left: 16px;
}
.c-badge .--info .--name{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-badge .--info .--desc{
    font-size: 15px;
    line-height: 160%;
    color: var(--textColor6);
}
.c-bg-img{
    background-size: cover;
    background-position: center;
}
.c-avatar{
    flex-shrink: 0;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
}
@keyframes copiedFadeOut {
    0% {
        opacity: 1;
        top: var(--message-top-position);
    }

    100% {
        opacity: 0;
        top: calc(var(--message-top-position) - 25px);
    }
}
.c-react-wrapper-common-copy-to-clipboard-button {
    min-height: 50px;
}
.c-copy-text-to-clipboard {
    --message-top-position: 0px;
    position: relative;
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--borderColor4);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    font-weight: 400;
    color: var(--textColor2);
    display: flex;
    width: 100%;
    align-items: center;
}
.c-copy-text-to-clipboard .text{
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 130%;
        -webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
}
.c-copy-text-to-clipboard .c-icon {
        height: 24px;
        width: 24px;
        margin-left: 16px;
        filter: var(--textColor3-filter);
    }
.c-copy-text-to-clipboard .message {
        position: absolute;
        background-color: var(--backgroundColorH);
        z-index: 80;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 40px;
        padding-right: 16px;
        line-height: 150%;
        color: var(--textColor9);
        border-radius: 8px;
        font-family: var(--body-font);
        font-weight: 600;
        box-shadow: 0px 4px 24px 0px #00000026;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiM1OUQyQUUiLz4KPHBhdGggZD0iTTEwLjg1NjkgNS4xNDI2NEw3LjAyMzk3IDEwLjYxNzlDNi45MjEzOCAxMC43NjU0IDYuNzU0MTggMTAuODU0NSA2LjU3NDYgMTAuODU3NEM2LjM5NTAzIDEwLjg2MDQgNi4yMjQ5NyAxMC43NzY5IDYuMTE3NTYgMTAuNjMyOUw1LjE0MjU4IDkuMzMzMTIiIHN0cm9rZT0iIzEzMEI0MyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
        background-repeat: no-repeat;
        background-position: 16px center;
        margin-left: -53px;
        animation: copiedFadeOut 0.7s ease-in forwards;
    }
.c-copy-text-to-clipboard.center-message .message {
            left: 50%;
        }
.c-details > summary{
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
        list-style-type: none;
}
.c-details > summary::marker,
        .c-details > summary::-webkit-details-marker{
    display: none;
}
.c-react-wrapper-common-introducer.c-details > summary::marker,.c-react-wrapper-common-introducer
        .c-details > summary::-webkit-details-marker {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-details > summary::marker,.c-react-wrapper-common-introducer .c-introducer
        .c-details > summary::-webkit-details-marker {
        display: flex;
    }
.c-introducer.c-details > summary::marker,.c-introducer
        .c-details > summary::-webkit-details-marker {
        display: none;
    }
.c-details > summary .--summary-inner > .c-icon.--closed-icon,
            .c-details > summary .--summary-inner > .c-icon.--open-icon {
                height: 12px;
                width: 12px;
        filter: var(--textColor6-filter);
        margin-left: 16px;
            }
.c-details[open] > summary .--closed-icon{
    display: none !important;
}
.c-react-wrapper-common-introducer.c-details[open] > summary .--closed-icon {
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
    }
.c-react-wrapper-common-introducer .c-introducer.c-details[open] > summary .--closed-icon {
        display: flex !important;
    }
.c-introducer.c-details[open] > summary .--closed-icon {
        display: none !important;
    }
.c-details:not([open]) > summary .--open-icon{
    display: none !important;
}
.c-react-wrapper-common-introducer.c-details:not([open]) > summary .--open-icon {
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
    }
.c-react-wrapper-common-introducer .c-introducer.c-details:not([open]) > summary .--open-icon {
        display: flex !important;
    }
.c-introducer.c-details:not([open]) > summary .--open-icon {
        display: none !important;
    }
.btn-i-filled.c-combo-button {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }
.btn-i-filled.c-combo-button:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }
.c-combo-button.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }
.c-combo-button.btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }
.c-combo-button.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }
.c-combo-button.btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }
.c-combo-button.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }
.c-combo-button.btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }
.c-combo-button.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }
.c-combo-button.btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }
.c-combo-button{
    --tw-bg-opacity: 1;
    background-color: rgb(96 79 205 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(19 11 67 / var(--tw-border-opacity, 1));
}
.c-combo-button .c-icon {
            filter: var(--white-filter);
        }
.c-combo-button:not(:disabled):not(.--disabled):hover{
    --tw-bg-opacity: 1;
    background-color: rgb(59 42 147 / var(--tw-bg-opacity, 1));
}
.c-combo-button{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
.c-combo-button > .c-icon:first-child{
    margin-right: 12px;
}
.c-combo-button > .c-icon:last-child{
    margin-left: 12px;
}
.c-combo-button > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
.c-combo-button {
        height: 40px;
        border-radius: 5px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 15px;
        line-height: 16px;
    }
.c-combo-button > .c-icon {
            height: 16px;
            width: 16px;
        }
.c-combo-button > .kb-shortcut{
    font-size: 13px;
            line-height: 13px;
}
#page-landing header .lg-container .c-combo-button:hover {
                    transform: scale(1.03);
                    transition: transform 0.3s ease-out;
                }
.c-combo-button{
    display: flex;
    align-items: stretch;
    padding: 0px;

    box-shadow: 0px 3px 6px rgba(var(--shadowColorMain), 0.4);
}
.c-combo-button.--disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }
.c-combo-button.--disabled .--primary-segment,
        .c-combo-button.--disabled .--dropdown-segment {
            cursor: not-allowed;
        }
.c-combo-button .--primary-segment.--disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }
.c-combo-button:not(.--disabled):hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(96 79 205 / var(--tw-bg-opacity, 1)) !important;
}
.c-combo-button:not(.--disabled) .--primary-segment:hover:not(.--disabled):not(:disabled), .c-combo-button:not(.--disabled) .--dropdown-segment:hover:not(.--disabled):not(:disabled){
    --tw-bg-opacity: 1;
    background-color: rgb(59 42 147 / var(--tw-bg-opacity, 1));
}
.c-combo-button .--primary-segment,
    .c-combo-button .--dropdown-segment {
        transition: background 0.1s ease-in;
    }
.c-combo-button .--primary-segment{
    display: flex;
    align-items: center;
    font-weight: 600;
    padding-left: 16px;
    padding-right: 16px;
    border-right-width: 1px;
    border-color: var(--borderColor3);
}
.c-combo-button .--dropdown-segment{
    display: grid;
    place-items: center;
    padding-left: 12px;
    padding-right: 12px;
}
.c-combo-button .--dropdown-segment .c-icon {
            height: 13px;
            width: 13px;
            color: #cbc9d9;
        }
.c-flash .--notice,
    .c-flash .--alert,
    .c-flash .--errors{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 170%;
    border-radius: 8px;
    border-width: 2px;
}
.c-flash .--notice{
    background-color: rgba(89, 210, 174, 0.15);
    --tw-text-opacity: 1;
    color: rgb(34 132 102 / var(--tw-text-opacity, 1));
}
.c-flash .--alert{
    background-color: rgba(235, 87, 87, 0.15);
    --tw-text-opacity: 1;
    color: rgb(235 87 87 / var(--tw-text-opacity, 1));
}
.c-flash .--errors{
    background-color: rgba(235, 87, 87, 0.15);
    --tw-text-opacity: 1;
    color: rgb(235 87 87 / var(--tw-text-opacity, 1));
}
.c-icon{
    flex-shrink: 0;
    position: relative;
}
.c-icon img {
        filter: var(--textColor2-filter);
    }
.c-icon.--hex{
    flex-shrink: 0;
    position: relative;
    display: grid;
    place-items: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.theme-light .c-icon.--hex,
.theme-accessibility-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.theme-light .c-icon.--hex img,
    .theme-light .c-icon.--hex svg,
    .theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg {
        width: 45%;
        height: 45%;
    }
.theme-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
}
.theme-dark .c-icon.--hex img,
    .theme-dark .c-icon.--hex svg {
        width: 37%;
        height: 37%;
    }
@media (prefers-color-scheme: light) {
    .theme-system .c-icon.--hex {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K") !important;
    }

        .theme-system .c-icon.--hex img,
        .theme-system .c-icon.--hex svg {
            width: 45%;
            height: 45%;
        }
}
@media (prefers-color-scheme: dark) {
    .theme-system .c-icon.--hex {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K") !important;
    }

        .theme-system .c-icon.--hex img,
        .theme-system .c-icon.--hex svg {
            width: 37%;
            height: 37%;
        }
}
.c-track-icon.--mips {
        --track-icon-color: var(--track-color-mips);
    }
.c-track-icon.--cpp {
        --track-icon-color: var(--track-color-cpp);
    }
.c-track-icon.--fsharp {
        --track-icon-color: var(--track-color-fsharp);
    }
.c-track-icon.--csharp {
        --track-icon-color: var(--track-color-csharp);
    }
.c-track-icon.--c {
        --track-icon-color: var(--track-color-c);
    }
.c-track-icon.--ruby {
        --track-icon-color: var(--track-color-ruby);
    }
.c-track-icon.--kotlin {
        --track-icon-color: var(--track-color-kotlin);
    }
.c-track-icon.--javascript {
        --track-icon-color: var(--track-color-javascript);
    }
.c-track-icon.--bash {
        --track-icon-color: var(--track-color-bash);
    }
.c-track-icon.--clojure {
        --track-icon-color: var(--track-color-clojure);
    }
.c-track-icon.--coffeescript {
        --track-icon-color: var(--track-color-coffeescript);
    }
.c-track-icon.--common-lisp {
        --track-icon-color: var(--track-color-common-lisp);
    }
.c-track-icon.--crystal {
        --track-icon-color: var(--track-color-crystal);
    }
.c-track-icon.--d {
        --track-icon-color: var(--track-color-d);
    }
.c-track-icon.--dart {
        --track-icon-color: var(--track-color-dart);
    }
.c-track-icon.--elm {
        --track-icon-color: var(--track-color-elm);
    }
.c-track-icon.--emacs-lisp {
        --track-icon-color: var(--track-color-emacs-lisp);
    }
.c-track-icon.--erlang {
        --track-icon-color: var(--track-color-erlang);
    }
.c-track-icon.--f {
        --track-icon-color: var(--track-color-f);
    }
.c-track-icon.--go {
        --track-icon-color: var(--track-color-go);
    }
.c-track-icon.--haskell {
        --track-icon-color: var(--track-color-haskell);
    }
.c-track-icon.--java {
        --track-icon-color: var(--track-color-java);
    }
.c-track-icon.--julia {
        --track-icon-color: var(--track-color-julia);
    }
.c-track-icon.--lua {
        --track-icon-color: var(--track-color-lua);
    }
.c-track-icon.--ocaml {
        --track-icon-color: var(--track-color-ocaml);
    }
.c-track-icon.--perl5 {
        --track-icon-color: var(--track-color-perl5);
    }
.c-track-icon.--python {
        --track-icon-color: var(--track-color-python);
    }
.c-track-icon.--elixir {
        --track-icon-color: var(--track-color-elixir);
    }
.c-track-icon.--nim {
        --track-icon-color: var(--track-color-nim);
    }
.c-track-icon.--clojurescript {
        --track-icon-color: var(--track-color-clojurescript);
    }
.c-track-icon.--ceylon {
        --track-icon-color: var(--track-color-celyon);
    }
.c-track-icon.--ballerina {
        --track-icon-color: var(--track-color-ballernia);
    }
.c-track-icon.--cf {
        --track-icon-color: var(--track-color-cf);
    }
.c-track-icon.--cfml {
        --track-icon-color: var(--track-color-cfml);
    }
.c-track-icon.--delphi {
        --track-icon-color: var(--track-color-delphi);
    }
.c-track-icon.--groovy {
        --track-icon-color: var(--track-color-groovy);
    }
.c-track-icon.--haxe {
        --track-icon-color: var(--track-color-haxe);
    }
.c-track-icon.--idris {
        --track-icon-color: var(--track-color-idris);
    }
.c-track-icon.--lfe {
        --track-icon-color: var(--track-color-lfe);
    }
.c-track-icon.--objective-c {
        --track-icon-color: var(--track-color-objective-c);
    }
.c-track-icon.--raku {
        --track-icon-color: var(--track-color-raku);
    }
.c-track-icon.--pharo-smalltalk {
        --track-icon-color: var(--track-color-pharo-smalltalk);
    }
.c-track-icon.--php {
        --track-icon-color: var(--track-color-php);
    }
.c-track-icon.--plsql {
        --track-icon-color: var(--track-color-plsql);
    }
.c-track-icon.--powershell {
        --track-icon-color: var(--track-color-powershell);
    }
.c-track-icon.--prolog {
        --track-icon-color: var(--track-color-prolog);
    }
.c-track-icon.--purescript {
        --track-icon-color: var(--track-color-purescript);
    }
.c-track-icon.--r {
        --track-icon-color: var(--track-color-r);
    }
.c-track-icon.--racket {
        --track-icon-color: var(--track-color-racket);
    }
.c-track-icon.--reasonml {
        --track-icon-color: var(--track-color-reasonml);
    }
.c-track-icon.--rust {
        --track-icon-color: var(--track-color-rust);
    }
.c-track-icon.--scala {
        --track-icon-color: var(--track-color-scala);
    }
.c-track-icon.--scheme {
        --track-icon-color: var(--track-color-scheme);
    }
.c-track-icon.--sml {
        --track-icon-color: var(--track-color-sml);
    }
.c-track-icon.--swift {
        --track-icon-color: var(--track-color-swift);
    }
.c-track-icon.--tcl {
        --track-icon-color: var(--track-color-tcl);
    }
.c-track-icon.--typescript {
        --track-icon-color: var(--track-color-typescript);
    }
.c-track-icon.--vimscript {
        --track-icon-color: var(--track-color-vimscript);
    }
.c-track-icon.--vbnet {
        --track-icon-color: var(--track-color-vbnet);
    }
.c-track-icon.--x86-64-assembly {
        --track-icon-color: var(--track-color-x86-64-assembly);
    }
.c-track-icon.--gnu-apl {
        --track-icon-color: var(--track-color-gnu-apl);
    }
.c-react-wrapper-track-iteration-summary {
    min-height: 48px;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    width: 100%;
    height: 100%;
}
.c-react-wrapper-track-iteration-summary-slim {
    min-height: 25px;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    width: 100%;
    height: 100%;
}
.c-iteration-summary{
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.c-iteration-summary.--slim > .--info > .--idx > h3{
    font-size: 15px;
}
.c-iteration-summary.--slim > .--info > .--idx > .--latest{
    display: none;
}
.c-react-wrapper-common-introducer.c-iteration-summary.--slim > .--info > .--idx > .--latest {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-iteration-summary.--slim > .--info > .--idx > .--latest {
        display: flex;
    }
.c-introducer.c-iteration-summary.--slim > .--info > .--idx > .--latest {
        display: none;
    }
.c-iteration-summary.--slim > .--info > .--details{
    display: none;
}
.c-react-wrapper-common-introducer.c-iteration-summary.--slim > .--info > .--details {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-iteration-summary.--slim > .--info > .--details {
        display: flex;
    }
.c-introducer.c-iteration-summary.--slim > .--info > .--details {
        display: none;
    }
.c-iteration-summary.--slim > .--time{
    display: flex;
    margin-left: 48px;
    font-size: 13px;
    color: var(--textColor6);
}
.c-iteration-summary > .--upload-method-icon {
        height: 24px;
        width: 24px;
        margin-right: 16px;
        color: var(--textColor5);
        filter: var(--textColor2-filter);
    }
.c-iteration-summary > .--info{
    flex-grow: 1;
}
.c-iteration-summary > .--info > .--idx{
    display: flex;
    align-items: center;
}
.c-iteration-summary > .--info > .--idx > h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 170%;
    color: var(--textColor2);
    margin-right: 12px;
}
.c-iteration-summary > .--info > .--idx > .--dot{
    margin-right: 16px;
    border-radius: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(46 87 232 / var(--tw-bg-opacity, 1));
                height: 8px;
                width: 8px;
}
.c-iteration-summary > .--info > .--idx > .--latest,
            .c-iteration-summary > .--info > .--idx > .--published{
    font-weight: 500;
    color: var(--textColor6);
    border-radius: 5px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
    padding-left: 8px;
    padding-right: 8px;
                font-size: 12px;
                line-height: 20px;
                display: none;
}
.c-react-wrapper-common-introducer.c-iteration-summary > .--info > .--idx > .--latest,.c-react-wrapper-common-introducer
            .c-iteration-summary > .--info > .--idx > .--published {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-iteration-summary > .--info > .--idx > .--latest,.c-react-wrapper-common-introducer .c-introducer
            .c-iteration-summary > .--info > .--idx > .--published {
        display: flex;
    }
.c-introducer.c-iteration-summary > .--info > .--idx > .--latest,.c-introducer
            .c-iteration-summary > .--info > .--idx > .--published {
        display: none;
    }
@media (min-width: 768px){

    .c-iteration-summary > .--info > .--idx > .--latest,
            .c-iteration-summary > .--info > .--idx > .--published{
        display: block;
    }
}
.c-iteration-summary > .--info > .--idx > .--latest + .--published{
    margin-left: 8px;
}
.c-iteration-summary > .--info > .--details{
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    color: var(--textColor6);
}
.c-iteration-summary .--out-of-date{
    display: flex;
    align-items: center;
    margin-right: 24px;
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(246 150 5 / var(--tw-text-opacity, 1));
}
.c-iteration-summary .--out-of-date .c-icon {
            height: 16px;
            width: 16px;
            filter: var(--orange-filter);
            margin-right: 12px;
        }
.c-iteration-summary > .c-copy-text-to-clipboard{
    margin-left: 32px;
    border-color: var(--borderColor6);
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-iteration-summary > .c-copy-text-to-clipboard {
        box-shadow: 0 0 0 2px #000;
    }
.c-iteration-summary > .c-copy-text-to-clipboard{
    width: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
        height: 40px;
}
.c-iteration-summary > .c-copy-text-to-clipboard .c-icon {
        filter: var(--textColor6-filter);
        margin: 0px;
            height: 16px;
            width: 16px;
    }
.c-iteration-summary .--feedback{
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--borderColor5);
    display: flex;
    align-items: center;
    margin-left: 16px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.c-iteration-summary .--feedback .c-icon {
            height: 16px;
            width: 16px;
        filter: var(--textColor6-filter);
        margin-right: 12px;
        }
.c-iteration-summary .--feedback .--count{
    font-family: Source Code Pro, monospace;
    font-size: 15px;
    font-weight: 700;
    line-height: 120%;
    color: var(--textColor3);
    display: flex;
    align-items: center;
}
.c-iteration-summary .--feedback .--count.--essential{
    --tw-text-opacity: 1;
    color: rgb(208 59 59 / var(--tw-text-opacity, 1));
}
.c-iteration-summary .--feedback .--count.--actionable{
    --tw-text-opacity: 1;
    color: rgb(246 150 5 / var(--tw-text-opacity, 1));
}
.c-iteration-summary .--feedback .--count + .--count{
    border-left-width: 1px;
    border-color: var(--borderColor5);
    margin-left: 12px;
    padding-left: 12px;
}
.c-iteration-summary > .--time{
    display: none;
}
.c-react-wrapper-common-introducer.c-iteration-summary > .--time {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-iteration-summary > .--time {
        display: flex;
    }
.c-introducer.c-iteration-summary > .--time {
        display: none;
    }
.c-accordion-section{
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    padding-top: 16px;
    padding-bottom: 16px;
}
.c-accordion-section > button{
    display: flex;
    align-items: center;
}
.c-accordion-section > button > .c-icon {
            height: 24px;
            width: 24px;
            margin-right: 16px;
        filter: var(--textColor6-filter);
        }
.c-accordion-section > button > .--title{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
}
.c-accordion-section > div{
    padding-top: 16px;
}
.c-underline {
    font-style: normal;
    background-image: linear-gradient(to right, #fae54d 0%, #fae54d 100%);
    background-position: left bottom 0%;
    background-repeat: repeat-x;
    background-size: 1px 4px;
}
.c-about-nav{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-bottom-width: 1px;
    margin-top: -8px;
    border-color: rgba(96, 79, 205, 0.2);
}
/* anotherPurple * 0.2 */
.c-about-nav .container{
    display: flex;
    flex-grow: 1;
}
.c-about-nav ul{
    overflow-x: auto;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;
}
.c-about-nav ul::-webkit-scrollbar {
            display: none; /* Chrome, Opera, Safari */
        }
.c-about-nav ul{
    margin-left: -20px;
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            white 20px,
            white 95%,
            transparent
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            white 20px,
            white 95%,
            transparent
        );
        padding-left: 20px;
        padding-right: 5%;
}
@media (min-width: 768px) {
        .c-about-nav ul {
            -webkit-mask-image: none;
            mask-image: none;
        }
    }
.c-about-nav ul{
    display: flex;
    gap: 32px;
}
@media (min-width: 768px){

    .c-about-nav ul{
        gap: 40px;
    }
}
.c-about-nav li{
    white-space: nowrap;
    border-bottom-width: 3px;
    border-color: transparent;
}
.c-about-nav li a{
    font-size: 16px;
    font-weight: 500;
    line-height: 200%;
    color: var(--textColor6);
    margin-top: 8px;
    margin-bottom: 8px;
    display: block;
}
.c-about-nav li a .c-icon {
                height: 24px;
                width: 24px;
                filter: var(--purple-filter);
            }
.c-about-nav li:hover a{
    color: var(--textColor1);
}
.c-about-nav li.selected{
    border-color: var(--colorPurpleToBrightPurple);
}
.c-about-nav li.selected a{
    color: var(--colorPurpleToBrightPurple);
}
.c-iterations-footer{
    display: flex;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    overflow-x: auto;
    z-index: 1;

    background: linear-gradient(
        180deg,
        var(--backgroundColorB) 0%,
        var(--backgroundColorB) 50%
    );
    box-shadow: 0px -4px 16px var(--backgroundColorB);
}
.c-iterations-footer .iterations{
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 20px;
    margin-right: 24px;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 16px;
    padding-bottom: 16px;
}
.c-iterations-footer .iterations .iteration {
            height: 32px;
            width: 32px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
            font-family: Source Code Pro, monospace;
            font-size: 13px;
            font-weight: 600;
            flex-shrink: 0;
        }
.c-iterations-footer .iterations .iteration .comments {
                top: -12px;
                left: 20px;
                position: absolute;
                border-radius: 5px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-left: 6px;
                padding-right: 6px;
                border-width: 1px;
                --tw-border-opacity: 1;
                border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
                --tw-bg-opacity: 1;
                background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
                font-family: Source Code Pro, monospace;
                font-size: 13px;
                font-weight: 600;
                color: var(--textColor3);
            }
.c-iterations-footer .iterations .iteration .comments.unread {
                    color: var(--textColorIterationCommentsUnread);
                    background: var(--backgroundColorIterationCommentsUnread);
                    border-color: var(--borderColorIterationCommentsUnread);
                }
.c-iterations-footer .iterations .iteration .new {
                top: -12px;
                left: 20px;
                position: absolute;
                border-radius: 5px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-left: 6px;
                padding-right: 6px;
                border-width: 1px;
                --tw-border-opacity: 1;
                border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
                --tw-bg-opacity: 1;
                background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
                font-family: Source Code Pro, monospace;
                font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
                color: var(--textColor3);
            }
.c-iterations-footer .iterations .iteration.active {
                color: var(--textColorIterationActive);
                border-color: var(--borderColorIterationActive);
                background: var(--backgroundColorTeamInfoBox);
            }
.c-iterations-footer .iterations .previous{
    margin-left: 64px;
    margin-right: 12px;
}
.c-iterations-footer .settings-button{
    margin-left: auto;
}
.c-iterations-footer .settings-button .c-icon {
            height: 16px;
            width: 16px;
        }
.c-solution-iterations{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.c-solution-iterations .c-iteration-summary{
    flex-grow: 0;
}
.c-solution-iterations .c-results-zone{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
.c-solution-iterations .c-results-zone .c-iteration-pane{
    height: 1px;
}
.c-solution-iterations .c-copy-text-to-clipboard .message {
            right: 0;
        }
.c-solution-iterations .c-iterations-footer{
    flex-grow: 0;
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
}
.c-solution-iterations .c-iterations-footer .iterations{
    padding-top: 0px;
    padding-bottom: 0px;
}
.c-solution-iterations .c-iterations-footer .publish-settings-button{
    margin-left: auto;
    border-color: var(--borderColor6);
    padding-left: 0px;
    padding-right: 0px;
}
.c-solution-iterations .c-iterations-footer .publish-settings-button .c-icon {
                filter: var(--textColor6-filter);
            }
@keyframes progress0To100 {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
.c-loading-bar{
    width: 100%;
    border-radius: 100px;
    --tw-bg-opacity: 1;
    background-color: rgb(225 235 255 / var(--tw-bg-opacity, 1));
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 6px;
}
.c-loading-bar .bar {
        height: 6px;
        min-width: 6px;
        background: linear-gradient(to bottom, #2200ff 0%, #9e00ff 100%);
        border-radius: 100px;

        animation: progress0To100 normal forwards;
        animation-timing-function: cubic-bezier(0.82, 0.27, 0.05, 0.92);
        animation-iteration-count: 1;
        animation-duration: 3s;
    }
.c-loading-overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    z-index: 150;
    display: none;
}
.c-react-wrapper-common-introducer.c-loading-overlay {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-loading-overlay {
        display: flex;
    }
.c-introducer.c-loading-overlay {
        display: none;
    }
.c-loading-overlay {
    opacity: 0.5;
}
.c-loading-overlay.--loading{
    display: block;
}
.c-loading-suspense {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: fadeIn 0.2s linear 0.3s 1 normal forwards;
}
.c-loading-suspense:before {
        content: "";
        background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3Bpbm5lciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuYSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6IGN1cnJlbnRDb2xvcjsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDEuNXB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8dGl0bGU+bG9hZGluZy1jaXJjbGU8L3RpdGxlPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iNS44MTQiIHkxPSI0LjI1MyIgeDI9IjcuNTc4IiB5Mj0iNi42OCIgLz4KICA8bGluZSBjbGFzcz0iYSIgeDE9IjIiIHkxPSI5LjUwMyIgeDI9IjQuODUzIiB5Mj0iMTAuNDMiIC8+CiAgPGxpbmUgY2xhc3M9ImEiIHgxPSIyIiB5MT0iMTUuOTkyIiB4Mj0iNC44NTMiIHkyPSIxNS4wNjUiIC8+CiAgPGxpbmUgY2xhc3M9ImEiIHgxPSI1LjgxNCIgeTE9IjIxLjI0MiIgeDI9IjcuNTc4IiB5Mj0iMTguODE1IiAvPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iMTEuOTg2IiB5MT0iMjMuMjQ3IiB4Mj0iMTEuOTg2IiB5Mj0iMjAuMjQ3IiAvPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iMTguMTU4IiB5MT0iMjEuMjQyIiB4Mj0iMTYuMzk0IiB5Mj0iMTguODE1IiAvPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iMjEuOTcyIiB5MT0iMTUuOTkyIiB4Mj0iMTkuMTE5IiB5Mj0iMTUuMDY1IiAvPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iMjEuOTcyIiB5MT0iOS41MDMiIHgyPSIxOS4xMTkiIHkyPSIxMC40MyIgLz4KICA8bGluZSBjbGFzcz0iYSIgeDE9IjE4LjE1OCIgeTE9IjQuMjUzIiB4Mj0iMTYuMzk0IiB5Mj0iNi42OCIgLz4KICA8bGluZSBjbGFzcz0iYSIgeDE9IjExLjk4NiIgeTE9IjAuNzQ3IiB4Mj0iMTEuOTg2IiB5Mj0iNi43NDciIC8+Cjwvc3ZnPgo=");
        width: 80px;
        height: 80px;
        background-size: contain;
        background-position: center;
        animation: spin 6s linear infinite;
        opacity: 0.2;
    }
.c-responsive-table-wrapper{
    margin-top: 24px;
    margin-bottom: 24px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-responsive-table-wrapper {
        box-shadow: 0 0 0 2px #000;
    }
.c-share-panel{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}
.c-share-panel h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
    margin-bottom: 12px;
}
.c-share-panel .btns{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
.c-share-panel .btns a:not(:last-child){
    margin-right: 12px;
}
.c-share-panel .btns a{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 160%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border-radius: 5px;
            background: #ff4500;
            display: flex;
            align-items: center;
}
.c-share-panel .btns a .c-icon {
                height: 16px;
                width: 16px;
                margin-right: 12px;
                filter: var(--white-filter);
            }
.c-share-panel .btns a.devto {
                background: #000;
            }
.c-share-panel .btns a.linkedin {
                background: #2867b2;
            }
.c-share-panel .btns a.reddit {
                background: #ff4500;
            }
.c-share-panel .btns a.twitter {
                background: #1da1f2;
            }
.c-share-panel .btns a.facebook {
                background: #4267b2;
            }
.c-split-pane{
    display: flex;
    flex-grow: 1;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
}
.c-split-pane > .--split-lhs {
        height: 100%;
        min-width: 10%;
    }
.c-split-pane > .--split-rhs {
        height: 100%;
        min-width: 10%;
        flex: 1 1;
    }
.c-split-pane > .--split-divider {
        cursor: col-resize;
        height: 100%;
        width: 1px;
        background: transparent;
        position: relative;
        z-index: 5;
    }
.c-split-pane > .--split-divider:before,
        .c-split-pane > .--split-divider:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 5;
        }
.c-split-pane > .--split-divider:before {
            right: 0;
            width: 5px;
        }
.c-split-pane > .--split-divider:after {
            left: 0;
            width: 5px;
        }
.c-heading-with-count{
    display: flex;
    align-items: center;
}
.c-heading-with-count .--text{
    margin-right: 16px;
    display: flex;
    align-items: center;
}
.c-heading-with-count .--text .c-icon {
            height: 24px;
            width: 24px;
            margin-right: 16px;
        }
.c-heading-with-count .--count{
    border-radius: 100px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 170%;
    color: var(--textColor6);
    border-width: 1px;
    border-color: var(--borderColor5);
}
.c-prominent-link{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 170%;
    color: var(--c-prominent-link-color);
}
.c-prominent-link .c-icon {
        height: 16px;
        width: 16px;
        filter: var(--c-prominent-link-icon-filter);
    }
.c-prominent-link .c-icon:first-child{
    margin-right: 12px;
}
.c-prominent-link .c-icon:last-child{
    margin-left: 12px;
}
.c-prominent-link.--with-bg{
    justify-content: center;
    border-radius: 100px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
        background: var(--c-prominent-link-bg);
}
.c-reputation{
    flex-shrink: 0;
    border-radius: 100px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 236 243 / var(--tw-border-opacity, 1));
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-reputation {
        box-shadow: 0 0 0 2px #000;
    }
.c-reputation {
    background: var(--backgroundColorCReputation);
    color: var(--textColorCReputation);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
}
.c-reputation .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 6px;
        filter: var(--textColor6-filter);
    }
.c-primary-reputation{
    border-radius: 100px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-primary-reputation {
        box-shadow: 0 0 0 2px #000;
    }
.c-primary-reputation{
    position: relative;
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border-width: 3px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 200%;
        border-radius: 100px;
        padding-left: 16px;
        padding-right: 16px;

    /* These shouldn't change for theme */
    color: #fbfcfe;

    /* Gradient is reversed to normal */
    background-image: linear-gradient(#130b43, #130b43),
        linear-gradient(#9e00ff, #2200ff);
}
.c-primary-reputation .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 8px;
        filter: var(--primary-reputation-filter);
    }
.c-primary-reputation.--small {
        height: 30px;
        font-size: 13px;
        line-height: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
.c-primary-reputation.--small .c-icon {
            height: 16px;
            width: 16px;
        }
.c-primary-reputation.--large{
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 180%;
}
.c-primary-reputation .--notification{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        height: 21px;
        width: 21px;
        top: -7px;
        right: -7px;
        transform: scale(0);
        transition: transform 0.5s ease-out;
}
.c-primary-reputation .--notification:after{
    border-radius: 100%;
            background: var(--backgroundColorNotificationsCount);
            content: "";
            width: 15px;
            height: 15px;
}
.c-primary-reputation .--notification.unseen {
            transform: scale(1);
        }
/* This component requires you to set a line-height */
.c-tab{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 100px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--textColor6);
    margin-right: 8px;
}
.c-tab .count{
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--textColor6);
}
.c-tab .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 12px;
        filter: var(--textColor6-filter);
    }
.c-tab.selected{
    background-color: var(--tabBackgroundColorSelected);
    font-weight: 600;
    color: var(--textColor2);
}
.c-tab.selected .c-icon{
    margin-right: 12px;
            filter: var(--selected-tab-icon-filter);
}
.c-tab.selected.locked {
            background: var(--tabBackgroundColorSelectedLocked);
        }
.c-tab.locked{
    color: var(--textColor7);
    cursor: not-allowed;
}
.c-tab.locked .c-icon {
            filter: var(--textColor7-filter);
        }
.c-tab.locked:after {
            content: "";
            height: 24px;
            width: 24px;
            margin-left: 16px;

            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9IiNFMkVCRkYiLz4KPHJlY3Qgd2lkdGg9IjEwLjUiIGhlaWdodD0iMTAuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi43NSA2Ljc1KSIgZmlsbD0iI0UyRUJGRiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguMzkwNjIgMTIuNTE1NkM4LjM5MDYyIDExLjY4NzIgOS4wNjIyIDExLjAxNTYgOS44OTA2MiAxMS4wMTU2SDE0LjEwOTRDMTQuOTM3OCAxMS4wMTU2IDE1LjYwOTQgMTEuNjg3MiAxNS42MDk0IDEyLjUxNTZWMTUuNDIxOUMxNS42MDk0IDE2LjI1MDMgMTQuOTM3OCAxNi45MjE5IDE0LjEwOTQgMTYuOTIxOUg5Ljg5MDYzQzkuMDYyMiAxNi45MjE5IDguMzkwNjIgMTYuMjUwMyA4LjM5MDYyIDE1LjQyMTlWMTIuNTE1NloiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik05LjcwMzEyIDExLjAxNTZWOS4zNzVDOS43MDMxMiA4LjEwNjQ3IDEwLjczMTUgNy4wNzgxMiAxMiA3LjA3ODEyQzEzLjI2ODUgNy4wNzgxMiAxNC4yOTY5IDguMTA2NDcgMTQuMjk2OSA5LjM3NVYxMS4wMTU2IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTIgMTMuMzEyNVYxNC42MjUiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
            background-size: contain;
        }
/* This functionality stops the tab resizing when the
     * font-size changes in .selected */
.c-tab span{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.c-tab span:after {
            content: attr(data-text);
            content: attr(data-text) / "";
            height: 0;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
            visibility: hidden;
            overflow: hidden;
            font-weight: 600;
        }
/* TODO: Does @media nesting work like this with Postcss */
@media speech {
.c-tab span:after {
                display: none
        }
            }
.c-tab.--small{
    font-size: 14px;
    font-weight: 600;
}
.c-tab.--small .c-icon {
            height: 16px;
            width: 16px;
            margin-right: 12px;
        }
.light-theme .c-tab {
}
.dark-theme .c-tab {
}
.c-tab-2{
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor6);
    border-bottom-width: 4px;
    border-color: transparent;
}
@media (min-width: 768px){

    .c-tab-2{
        margin-right: 24px;
        font-size: 18px;
    }
}
.c-tab-2 .c-icon {
        height: 24px;
        width: 24px;
        margin-right: 16px;
        filter: var(--textColor6-filter);
    }
.c-tab-2 .count{
    margin-left: 12px;
    border-radius: 100px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 200%;
    color: var(--textColor6);
}
.c-tab-2.selected {
        color: var(--colorPurpleToBrightPurple);
        border-color: var(--colorPurpleToBrightPurple);
    }
.c-tab-2.selected .c-icon {
            filter: var(--purple-to-bright-purple-filter);
        }
.c-tab-2.selected .count {
            color: var(--colorPurpleToBrightPurple);
            border-color: var(--colorPurpleToBrightPurple);
        }
.c-tab-2.locked{
    color: var(--textColor7);
}
.c-tab-2.locked .c-icon {
            filter: var(--textColor7-filter);
        }
.c-tab-2.locked:after {
            content: "";
            height: 24px;
            width: 24px;
            margin-left: 16px;

            background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjRUFFQ0YzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC44NTY5MyAxMi42NDI2QzguODU2OTMgMTEuODE0MiA5LjUyODUxIDExLjE0MjYgMTAuMzU2OSAxMS4xNDI2SDEzLjY0MjZDMTQuNDcxMSAxMS4xNDI2IDE1LjE0MjYgMTEuODE0MiAxNS4xNDI2IDEyLjY0MjZWMTQuNzg1NEMxNS4xNDI2IDE1LjYxMzkgMTQuNDcxMSAxNi4yODU0IDEzLjY0MjYgMTYuMjg1NEgxMC4zNTY5QzkuNTI4NSAxNi4yODU0IDguODU2OTMgMTUuNjEzOSA4Ljg1NjkzIDE0Ljc4NTRWMTIuNjQyNloiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS45OTk3NiAxMS4xNDI3VjkuNzE0MTFDOS45OTk3NiA4LjYwOTU0IDEwLjg5NTIgNy43MTQxMSAxMS45OTk4IDcuNzE0MTFDMTMuMTA0MyA3LjcxNDExIDEzLjk5OTggOC42MDk1NCAxMy45OTk4IDkuNzE0MTFWMTEuMTQyNyIgc3Ryb2tlPSIjNUM1NTg5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS45OTk4IDEzLjQyODVDMTEuOTIwOSAxMy40Mjg1IDExLjg1NjkgMTMuNDkyNCAxMS44NTY5IDEzLjU3MTNDMTEuODU2OSAxMy42NTAyIDExLjkyMDkgMTMuNzE0MiAxMS45OTk4IDEzLjcxNDJDMTIuMDc4NyAxMy43MTQyIDEyLjE0MjYgMTMuNjUwMiAxMi4xNDI2IDEzLjU3MTNDMTIuMTQyNyAxMy41MzM0IDEyLjEyNzcgMTMuNDk3IDEyLjEwMDkgMTMuNDcwMkMxMi4wNzQxIDEzLjQ0MzQgMTIuMDM3NyAxMy40Mjg0IDExLjk5OTggMTMuNDI4NVYxMy40Mjg1IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
            background-size: contain;
        }
.c-tab-2 span{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}
.c-tab-2 span:after {
            content: attr(data-text);
            content: attr(data-text) / "";
            height: 0;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
            visibility: hidden;
            overflow: hidden;
            font-weight: 600;
        }
/* TODO: Does @media nesting work like this with Postcss */
@media speech {
.c-tab-2 span:after {
                display: none
        }
            }
.c-textual-content{
    font-family: var(--body-font);
}
.c-textual-content img {
        max-width: 100%;
    }
.c-textual-content.--large *{
    font-size: 16px;
}
@media (min-width: 768px) {
            .c-textual-content.--large *{
        font-size: 18px;
    }
        }
.c-textual-content.--large > *{
    margin-bottom: 16px;
}
.c-textual-content.--large > *:last-child{
    margin-bottom: 0px;
}
/************/
/* HEADINGS */
/************/
.c-textual-content.--large h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .c-textual-content.--large h2{
        font-size: 24px;
    }
}
.c-textual-content.--large h2{
    margin-bottom: 8px;
}
.c-textual-content.--large h3{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.c-textual-content.--large h4{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.c-textual-content.--large h5{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.c-textual-content.--large h6{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.c-textual-content.--large * + h3{
    margin-top: 32px;
}
.c-textual-content.--large p{
    margin-bottom: 12px;
}
.c-textual-content.--base *{
    font-size: 16px;
}
.c-textual-content.--base > *:not(:first-child){
    margin-top: 12px;
}
.c-textual-content.--base > *:last-child{
    margin-bottom: 0px;
}
/************/
/* HEADINGS */
/************/
.c-textual-content.--base h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .c-textual-content.--base h2{
        font-size: 24px;
    }
}
.c-textual-content.--base h2{
    margin-bottom: 8px;
    font-size: 24px;
}
.c-textual-content.--base h3{
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 8px;
    font-size: 18px;
}
.c-textual-content.--base * + h3{
    margin-top: 32px;
}
/******************/
/* Block Elements */
/******************/
.c-textual-content.--base p{
    margin-bottom: 8px;
}
.c-textual-content.--small *{
    font-size: 15px;
}
.c-textual-content.--small > *:not(:first-child){
    margin-top: 12px;
}
.c-textual-content.--small > *:last-child{
    margin-bottom: 0px;
}
/************/
/* HEADINGS */
/************/
.c-textual-content.--small h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .c-textual-content.--small h2{
        font-size: 24px;
    }
}
.c-textual-content.--small h2{
    margin-bottom: 4px;
    font-size: 21px;
}
.c-textual-content.--small h3{
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
    font-size: 18px;
}
.c-textual-content.--small h4{
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
    font-size: 16px;
}
.c-textual-content.--small * + h3{
    margin-top: 32px;
}
/******************/
/* Block Elements */
/******************/
.c-textual-content.--small p{
    margin-bottom: 8px;
}
/*************/
/* Footnotes */
/*************/
.c-textual-content .footnotes *{
    font-size: 14px;
}
.c-textual-content .footnotes{
    margin-top: 20px;
    border-top-width: 1px;
    border-color: var(--borderColor6);
    padding-top: 20px;
}
@media (min-width: 768px) {
        .c-textual-content .footnotes *{
        font-size: 16px;
    }
    }
/* This is necessary else the rules above override
     * the ones below */
.c-textual-content.--large *, .c-textual-content.--base *, .c-textual-content.--small *{
    line-height: 160%;
            overflow-wrap: anywhere;
            -webkit-hyphens: auto;
                    hyphens: auto;
}
.c-textual-content.--large table *, .c-textual-content.--base table *, .c-textual-content.--small table * {
            overflow-wrap: initial;
            -webkit-hyphens: initial;
                    hyphens: initial;
        }
/******************/
/* Block elements */
/*****************/
.c-textual-content.--large blockquote, .c-textual-content.--base blockquote, .c-textual-content.--small blockquote{
    border-left-width: 4px;
    border-color: var(--borderColor5);
    padding-left: 24px;
    color: var(--textColor6);
    margin-top: 16px;
    margin-bottom: 24px;
}
.c-textual-content.--large blockquote strong, .c-textual-content.--base blockquote strong, .c-textual-content.--small blockquote strong{
    font-weight: 500;
}
.c-textual-content.--large .c-textblock-note,
        .c-textual-content.--large .c-textblock-caution,
        .c-textual-content.--large .c-textblock-advanced,
        .c-textual-content.--base .c-textblock-note,
        .c-textual-content.--base .c-textblock-caution,
        .c-textual-content.--base .c-textblock-advanced,
        .c-textual-content.--small .c-textblock-note,
        .c-textual-content.--small .c-textblock-caution,
        .c-textual-content.--small .c-textblock-advanced{
    margin-top: 12px;
    margin-bottom: 24px;
}
/*******************/
/* Inline elements */
/*******************/
.c-textual-content.--large a, .c-textual-content.--base a, .c-textual-content.--small a{
    font-weight: 600;
            color: var(--c-prominent-link-color);
}
.c-textual-content.--large a .c-icon, .c-textual-content.--base a .c-icon, .c-textual-content.--small a .c-icon {
                filter: var(--c-prominent-link-icon-filter);
            }
.c-textual-content.--large strong, .c-textual-content.--base strong, .c-textual-content.--small strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-textual-content.--large em, .c-textual-content.--base em, .c-textual-content.--small em{
    font-style: italic;
}
.c-textual-content.--large strikethrough, .c-textual-content.--base strikethrough, .c-textual-content.--small strikethrough{
    text-decoration-line: line-through;
}
/*********/
/* Lists */
/*********/
.c-textual-content.--large ul,
        .c-textual-content.--large ol,
        .c-textual-content.--base ul,
        .c-textual-content.--base ol,
        .c-textual-content.--small ul,
        .c-textual-content.--small ol{
    margin-bottom: 24px;
            margin-left: 14px;
}
.c-textual-content.--large ul li, .c-textual-content.--large ol li, .c-textual-content.--base ul li, .c-textual-content.--base ol li, .c-textual-content.--small ul li, .c-textual-content.--small ol li {
                margin-left: 6px;
                margin-top: 0px;
                margin-bottom: 8px;
                padding-left: 4px;
            }
.c-textual-content.--large ul li, .c-textual-content.--base ul li, .c-textual-content.--small ul li{
    list-style-type: disc;
}
.c-textual-content.--large ol li, .c-textual-content.--base ol li, .c-textual-content.--small ol li{
    list-style-type: decimal;
}
/*********/
/* Code */
/*********/
/* Block-level code blocks */
.c-textual-content.--large pre, .c-textual-content.--base pre, .c-textual-content.--small pre{
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--borderColor5);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    margin-bottom: 24px;
    font-size: 16px;
    overflow: hidden;
}
.c-textual-content.--large pre code, .c-textual-content.--base pre code, .c-textual-content.--small pre code{
    display: block;
    overflow: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
}
/* Inline code blocks */
.c-textual-content.--large :not(pre) > code, .c-textual-content.--base :not(pre) > code, .c-textual-content.--small :not(pre) > code{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 138%;
    color: var(--textColor10);
            background: var(--backgroundColorI);
}
.c-textual-content.--large a:not(pre) > code, .c-textual-content.--base a:not(pre) > code, .c-textual-content.--small a:not(pre) > code{
    color: var(--c-prominent-link-color);
}
.c-textual-content.--large table, .c-textual-content.--base table, .c-textual-content.--small table{
    margin-top: 16px;
    margin-bottom: 16px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    overflow: hidden;
    border-radius: 5px;
}
.c-textual-content.--large table td,
            .c-textual-content.--large table th,
            .c-textual-content.--base table td,
            .c-textual-content.--base table th,
            .c-textual-content.--small table td,
            .c-textual-content.--small table th{
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
}
.c-textual-content.--large table th, .c-textual-content.--base table th, .c-textual-content.--small table th{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    line-height: 150%;
    color: var(--textColor2);
    border-bottom-width: 2px;
    border-color: var(--borderColor6);
    font-size: 14px;
}
.c-textual-content.--large table td, .c-textual-content.--base table td, .c-textual-content.--small table td{
    border-bottom-width: 1px;
    border-color: var(--borderColor6);
}
.c-textual-content.--large table tr:last-child td, .c-textual-content.--base table tr:last-child td, .c-textual-content.--small table tr:last-child td{
    border-bottom-width: 0;
}
@media (min-width: 768px) {
        /* This is necessary else the rules above override
     * the ones below */
            .c-textual-content.--large *, .c-textual-content.--base *, .c-textual-content.--small * {
                overflow-wrap: initial;
                -webkit-hyphens: initial;
                        hyphens: initial;
            }
}
.c-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}
.c-pagination a,
    .c-pagination button,
    .c-pagination .--pagination-more{
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    color: var(--textColor6);
    border-width: 1px;
    border-color: transparent;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
@media (min-width: 640px){

    .c-pagination a,
    .c-pagination button,
    .c-pagination .--pagination-more{
        padding-left: 16px;
        padding-right: 16px;
    }
}
.c-pagination a,
    .c-pagination button{
    border-radius: 5px;
    border-color: var(--borderColor5);
}
.c-pagination a.current, .c-pagination button.current{
    border-color: var(--paginationCurrentBorderColor);
    background-color: var(--paginationCurrentBackgroundColor);
    color: var(--textColor2);
}
.c-pagination .--pagination-lhs,
    .c-pagination .--pagination-rhs{
    display: flex;
        flex: 1 1;
}
.c-pagination .--pagination-lhs a + a,
        .c-pagination .--pagination-lhs button + button,
        .c-pagination .--pagination-rhs a + a,
        .c-pagination .--pagination-rhs button + button{
    margin-left: 12px;
}
.c-pagination .--pagination-lhs button:disabled,
        .c-pagination .--pagination-lhs a:disabled,
        .c-pagination .--pagination-rhs button:disabled,
        .c-pagination .--pagination-rhs a:disabled{
    background-color: var(--backgroundColorD);
    color: var(--textColor7);
    border-color: transparent;
}
.c-pagination .--pagination-lhs{
    justify-content: flex-start;
}
.c-pagination .--pagination-pages{
    flex-grow: 1;
    justify-content: center;
}
.c-pagination .--pagination-pages button,
        .c-pagination .--pagination-pages a{
    margin-left: 6px;
    margin-right: 6px;
}
.c-pagination .--pagination-pages{
    display: none;
}
.c-react-wrapper-common-introducer.c-pagination .--pagination-pages {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-pagination .--pagination-pages {
        display: flex;
    }
.c-introducer.c-pagination .--pagination-pages {
        display: none;
    }
@media (min-width: 768px){

    .c-pagination .--pagination-pages{
        display: flex;
    }
}
.c-pagination .--pagination-rhs{
    justify-content: flex-end;
}
.c-modal{
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modalBackgroundColor);
}
.c-modal.--cover{
    background-color: var(--backgroundColorB);
}
.c-modal.--cover .--modal-container{
    align-items: flex-start;
            overflow-y: auto;
}
.c-modal.--cover .--modal-container .--modal-content{
    padding-top: 48px;
    padding-bottom: 48px;
                width: 100%;
                /* min-height: 100%; */
}
.c-modal .--modal-container{
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}
.c-modal .--modal-container .--close-button{
    position: fixed;
    border-radius: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(69 58 143 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-modal .--modal-container .--close-button {
        box-shadow: 0 0 0 2px #000;
    }
.c-modal .--modal-container .--close-button{
    border-width: 2px;
    border-color: transparent;
    z-index: 100;
    display: grid;
    place-items: center;

            cursor: pointer;
            top: 48px;
            right: 48px;
            height: 64px;
            width: 64px;
}
.c-modal .--modal-container .--close-button .c-icon {
                height: 32px;
                width: 32px;
                filter: var(--filter-FFFFFF);
            }
.c-modal .--modal-container .--close-button:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(167 183 214 / var(--tw-bg-opacity, 1));
}
.c-modal .--modal-container .--close-button:active,
            .c-modal .--modal-container .--close-button:focus{
    --tw-bg-opacity: 1;
    background-color: rgb(200 213 239 / var(--tw-bg-opacity, 1));
}
.c-modal .--modal-container .--close-button:focus{
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(69 58 143 / var(--tw-border-opacity, 1));
    --tw-shadow: 0px 0px 0px 3px rgba(35, 0, 255, 0.3);
    --tw-shadow-colored: 0px 0px 0px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.c-modal .--modal-container .--close-button:hover .c-icon, .c-modal .--modal-container .--close-button:active .c-icon, .c-modal .--modal-container .--close-button:focus .c-icon {
                    filter: var(--dark-purple-filter);
                }
.c-modal.--cover .--modal-content-inner{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-radius: 8px;
    --tw-shadow: var(--box-shadow-lgZ1);
    --tw-shadow-colored: var(--box-shadow-lgZ1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-modal.--cover .--modal-content-inner {
        box-shadow: 0 0 0 2px #000;
    }
.c-modal.--cover .--modal-content-inner{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
}
.c-modal:not(.--cover) .--modal-content{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-radius: 8px;
    --tw-shadow: var(--box-shadow-lgZ1);
    --tw-shadow-colored: var(--box-shadow-lgZ1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-modal:not(.--cover) .--modal-content {
        box-shadow: 0 0 0 2px #000;
    }
.c-modal:not(.--cover) .--modal-content{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 32px;
    padding-bottom: 32px;

            max-height: 90%;
            overflow-y: auto;
}
.c-radio-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}
.c-radio-wrapper input{
    position: absolute;
        opacity: 0;
        width: 1em;
        height: 1em;
}
.c-radio-wrapper input:hover{
    cursor: pointer;
}
.c-radio-wrapper .row{
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.c-radio-wrapper input:checked + .row {
        background: var(--row-selected-background-color);
    }
.c-radio-wrapper input:checked + .row > .c-radio:before {
            transform: scale(1);
        }
.c-radio {
    /* This keeps it relative to the font-size of the parent */
    width: 1em;
    height: 1em;
    border-radius: 100%;
    border-width: 1px;
    border-color: var(--inputBorderColor);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.c-radio:before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        box-shadow: inset 0.5em 0.5em currentColor;
        transition: 180ms transform ease-in-out;
        transform: scale(0);
        cursor: pointer;
        border-radius: 100%;
        color: var(--textColor5);
    }
label.c-checkbox-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}
label.c-checkbox-wrapper input{
    position: absolute;
    cursor: pointer;
        opacity: 0;
        width: 1em;
        height: 1em;
}
label.c-checkbox-wrapper .row{
    display: flex;
    flex-grow: 1;
    align-items: center;
        transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
label.c-checkbox-wrapper input:checked + .row {
        background: var(--row-selected-background-color) !important;
        border-color: var(--row-selected-border-color) !important;
    }
label.c-checkbox-wrapper input:disabled + .row {
        opacity: 0.7;
        cursor: not-allowed;
    }
label.c-checkbox-wrapper input:disabled + .row .c-checkbox {
            cursor: not-allowed;
        }
label.c-checkbox-wrapper input:checked + .row .c-checkbox .c-icon {
            transform: scale(1);
        }
label.c-checkbox-wrapper .c-checkbox{
    margin-right: 16px;
    flex-shrink: 0;
}
.c-checkbox {
    height: 21px;
    width: 21px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--inputBorderColor);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--textColor3);
}
.c-checkbox .c-icon {
        height: 9px;
        width: 9px;
        transition: transform 0.2s linear;
        transform: scale(0);
        filter: var(--textColor1-filter);
    }
.c-select{
    display: grid;
    align-items: center;
    font-size: 16px;
    line-height: 170%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    grid-template-areas: "select";
}
.c-select select {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background-color: transparent;
        cursor: inherit;
        outline: none;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 20px;
        padding-right: 80px;
        color: var(--textColor1);
        grid-area: select;
    }
.c-select:after{
    background-color: var(--textColor1);
    margin-right: 20px;

        content: "";
        width: 13px;
        height: 8px;
        clip-path: polygon(0 0, 0 10%, 50% 100%, 100% 10%, 100% 0, 50% 90%);
        grid-area: select;
        justify-self: end;
}
.c-select:focus-within{
    border-color: var(--inputBorderColorFocus);
}
.c-single-select,
.c-multi-select{
    position: relative;
    flex-shrink: 0;
}
.c-single-select > button,
    .c-single-select > .c-results-zone > button,
    .c-multi-select > button,
    .c-multi-select > .c-results-zone > button{
    display: flex;
    align-items: center;
    border-width: 1px;
    border-color: var(--buttonBorderColor2);
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-single-select > button,
    .theme-accessibility-dark 
    .c-single-select > .c-results-zone > button,
    .theme-accessibility-dark 
    .c-multi-select > button,
    .theme-accessibility-dark 
    .c-multi-select > .c-results-zone > button {
        box-shadow: 0 0 0 2px #000;
    }
.c-single-select > button,
    .c-single-select > .c-results-zone > button,
    .c-multi-select > button,
    .c-multi-select > .c-results-zone > button{
    width: 100%;
    text-align: left;
        white-space: nowrap;
}
.c-single-select > .--options, .c-multi-select > .--options{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-single-select > .--options,
    .theme-accessibility-dark  .c-multi-select > .--options {
        box-shadow: 0 0 0 2px #000;
    }
.c-single-select > .--options, .c-multi-select > .--options{
    position: relative;
    z-index: 50;
    padding: 8px;
        min-width: 100%;
}
.c-single-select > .--options label .row, .c-multi-select > .--options label .row{
    border-radius: 8px;
}
.c-single-select button:disabled{
    cursor: not-allowed;
        filter: blur(1px);
}
.c-single-select > button,
    .c-single-select > .c-results-zone > button {
        height: 48px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 16px;
        line-height: 150%;
    }
.c-single-select > button > .value, .c-single-select > .c-results-zone > button > .value{
    margin-right: auto;
}
.c-single-select > button > .action-icon, .c-single-select > .c-results-zone > button > .action-icon {
            height: 16px;
            width: 16px;
            margin-left: 0px;
            margin-right: 0px;
        }
@media (min-width: 480px){

    .c-single-select > button > .action-icon, .c-single-select > .c-results-zone > button > .action-icon{
        margin-left: 24px;
    }
}
.c-single-select > button > .action-icon, .c-single-select > .c-results-zone > button > .action-icon {
            filter: var(--textColor2-filter);
        }
.c-single-select > .--options {
        max-height: 50vh;
        overflow-y: auto;
    }
.c-single-select > .--options label.c-radio-wrapper {
            --row-selected-background-color: var(--backgroundColorD);
        }
.c-single-select > .--options label.c-radio-wrapper .row{
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;

                /* padding-right: 81px; /1* This needs to line up with the dropdown *1/ */
                /* min-width: 360px; */
                font-size: 16px;
                line-height: 150%;
}
.c-single-select > .--options label.c-radio-wrapper .row > .c-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 20px;
                }
/* See also single-select */
.c-multi-select > button{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 24px;
    padding-right: 24px;
    text-align: left;
}
.c-multi-select > button .--info{
    margin-right: auto;
}
.c-multi-select > button .--label{
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 150%;
    color: var(--textColor6);
}
.c-multi-select > button .--selected-value{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
}
.c-multi-select > button .action-icon {
            height: 16px;
            width: 16px;
            margin-left: 24px;
            margin-right: 0px;
        filter: var(--textColor6-filter);
        }
.c-multi-select > .--options {
        max-height: 50vh;
        overflow-y: auto;
    }
.c-multi-select > .--options li + li {
            margin-top: 4px;
        }
.c-multi-select > .--options label.c-checkbox-wrapper {
            --row-selected-background-color: var(--backgroundColorD);
        }
.c-multi-select > .--options label.c-checkbox-wrapper .row{
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
                padding-right: 81px; /* This needs to line up with the dropdown */
                min-width: 360px;
                min-height: 48px;
}
.c-multi-select > .--options label.c-checkbox-wrapper .row .c-checkbox{
    margin-right: 24px;
}
.c-multi-select > .--options label.c-checkbox-wrapper .row > .c-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                    filter: var(--textColor6-filter);
                }
.c-multi-select > .--options label.c-checkbox-wrapper .row .title{
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}
.c-multi-select > .--options label.c-checkbox-wrapper .row .description{
    font-size: 14px;
    line-height: 140%;
}
.c-multi-select > .--options label.c-checkbox-wrapper input:checked + .row .c-icon {
                    filter: var(--textColor2-filter);
                }
.c-multi-select > .--options label.c-checkbox-wrapper input:checked + .row .title{
    font-weight: 600;
    color: var(--textColor2);
}
.c-track-select.--size-inline button,
        .c-track-select.--size-inline > .c-results-zone > button{
    border-style: none;
    padding: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.c-track-select.--size-inline button .c-icon.all,
            .c-track-select.--size-inline button .c-track-icon,
            .c-track-select.--size-inline > .c-results-zone > button .c-icon.all,
            .c-track-select.--size-inline > .c-results-zone > button .c-track-icon {
                height: 42px;
                width: 42px;
            }
.c-track-select.--size-inline button .action-icon, .c-track-select.--size-inline > .c-results-zone > button .action-icon{
    margin-left: 16px;
}
.c-track-select.--size-inline .--options {
            margin-left: -24px;
        }
.c-track-select.--size-inline .--options label.c-radio-wrapper .row .c-icon,
                    .c-track-select.--size-inline .--options label.c-radio-wrapper .row .c-track-icon {
                        width: 42px;
                        height: 42px;
                        margin-right: 16px;
                    }
.c-track-select.--size-single button .c-icon.all,
            .c-track-select.--size-single button .c-track-icon,
            .c-track-select.--size-single > .c-results-zone > button .c-icon.all,
            .c-track-select.--size-single > .c-results-zone > button .c-track-icon {
                height: 32px;
                width: 32px;
                margin-right: 12px;
            }
.c-track-select.--size-single label.c-radio-wrapper .row .c-icon,
                .c-track-select.--size-single label.c-radio-wrapper .row .c-track-icon {
                    width: 32px;
                    height: 32px;
                    margin-right: 12px;
                }
.c-track-select.--size-automation button .c-icon.all,
            .c-track-select.--size-automation button .c-track-icon,
            .c-track-select.--size-automation > .c-results-zone > button .c-icon.all,
            .c-track-select.--size-automation > .c-results-zone > button .c-track-icon {
                height: 32px;
                width: 32px;
                margin-right: 12px;
            }
.c-track-select.--size-automation label.c-radio-wrapper .row .c-icon,
                .c-track-select.--size-automation label.c-radio-wrapper .row .c-track-icon {
                    width: 32px;
                    height: 32px;
                    margin-right: 12px;
                }
.c-track-select.--size-multi button,
        .c-track-select.--size-multi > .c-results-zone > button {
            height: 56px;
        }
.c-track-select.--size-multi button .c-icon.all,
            .c-track-select.--size-multi button .c-track-icon,
            .c-track-select.--size-multi > .c-results-zone > button .c-icon.all,
            .c-track-select.--size-multi > .c-results-zone > button .c-track-icon {
                height: 40px;
                width: 40px;
                margin-right: 16px;
            }
.c-track-select.--size-multi button .track-title, .c-track-select.--size-multi > .c-results-zone > button .track-title{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
}
.c-track-select.--size-multi label.c-radio-wrapper .row .c-icon,
                .c-track-select.--size-multi label.c-radio-wrapper .row .c-track-icon {
                    width: 42px;
                    height: 42px;
                    margin-right: 16px;
                }
.c-track-select.--size-large button,
        .c-track-select.--size-large > .c-results-zone > button {
            height: 72px;
        }
.c-track-select.--size-large button .c-icon.all,
            .c-track-select.--size-large button .c-track-icon,
            .c-track-select.--size-large > .c-results-zone > button .c-icon.all,
            .c-track-select.--size-large > .c-results-zone > button .c-track-icon {
                height: 40px;
                width: 40px;
                margin-right: 16px;
            }
.c-track-select.--size-large button .track-title, .c-track-select.--size-large > .c-results-zone > button .track-title{
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
}
.c-track-select.--size-large label.c-radio-wrapper .row .c-icon,
                .c-track-select.--size-large label.c-radio-wrapper .row .c-track-icon {
                    width: 42px;
                    height: 42px;
                    margin-right: 16px;
                }
.c-track-select.--size-large label.c-radio-wrapper .row .count {
                    margin-right: 62px; /* Line this up with the button */
                }
.c-track-select > button .value, .c-track-select > .c-results-zone > button .value{
    display: flex;
    align-items: center;
}
.c-track-select > button .track-title, .c-track-select > .c-results-zone > button .track-title{
    flex-grow: 1;
            white-space: nowrap;
}
.c-track-select > button .count, .c-track-select > .c-results-zone > button .count{
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor6);
    margin-left: 20px;
    margin-right: 20px;
}
.c-track-select .--options {
        width: -moz-max-content;
        width: max-content;
    }
.c-track-select .--options label.c-radio-wrapper .row {
                white-space: nowrap;
            }
.c-track-select .--options label.c-radio-wrapper .row .title{
    flex-grow: 1;
}
.c-track-select .--options label.c-radio-wrapper .row .count{
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: var(--textColor6);
    margin-left: 24px;
}
.c-track-select .--options button{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 170%;
            color: var(--c-prominent-link-color);
            width: 100%;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 16px;
            padding-right: 16px;
}
.c-track-select .--options button .c-icon {
                height: 16px;
                width: 16px;
                margin-right: 12px;
                filter: var(--c-prominent-link-icon-filter);
            }
.c-react-wrapper-insiders-status{
    min-height: 160px;
}
.c-insiders-prompt{
    display: flex;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    border-radius: 16px;
    border-width: 2px;
}
.c-insiders-prompt:before{
    height: 24px;
    width: 24px;
    align-self: center;
    flex-shrink: 0;
}
.c-insiders-prompt.--ineligible{
    margin-bottom: 20px;
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border-width: 2px;
        color: var(--textColor1);
        gap: 8px;
}
.c-insiders-prompt.--ineligible:before {
            content: "";
            background: url("/assets/icons/lightbulb-idea-db7117064ce8c0501a0b16d6281ddb86ac80f4a1.svg");
            height: 24px;
            width: 24px;
            background-size: cover;
            filter: var(--notifications-active-filter);
        }
.c-insiders-prompt.--unset{
    margin-bottom: 36px;
    --tw-border-opacity: 1;
    border-color: rgb(255 211 143 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 211 143 / var(--tw-text-opacity, 1));
        background-color: rgba(255,211,143, 0.16);
}
.c-insiders-prompt.--unset:before {
            content: url("/assets/icons/spinner-small-7dc687c82d41f88c722865e4801a967a5be31442.svg");
        filter: invert(81%) sepia(28%) saturate(678%) hue-rotate(336deg)
            brightness(105%) contrast(101%);
            animation: spin 2s linear infinite;
        }
.c-insiders-prompt.--already-insider{
    margin-bottom: 36px;
    --tw-border-opacity: 1;
    border-color: rgb(89 210 174 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(89 210 174 / var(--tw-text-opacity, 1));
        background-color: rgba(89,210,174, 0.16);
}
.c-insiders-prompt.--already-insider:before {
            content: url("/assets/icons/check-circle-2-626cade4a89d42b66abe9e4955c1f6571eeba169.svg");
        filter: invert(44%) sepia(52%) saturate(498%) hue-rotate(111deg)
            brightness(94%) contrast(86%);
        }
.c-user-activity{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-user-activity {
        box-shadow: 0 0 0 2px #000;
    }
.c-user-activity{
    display: flex;
    flex-direction: row;
}
.c-user-activity .--descriptive-icon {
        height: 24px;
        width: 24px;
        margin-right: 24px;
    }
.c-user-activity .--info{
    flex-grow: 1;
}
.c-user-activity .--info .--description{
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    line-height: 150%;
}
.c-user-activity .--info .--description .--exercise{
    display: flex;
    font-weight: 500;
}
.c-user-activity .--info .--description .--exercise .c-icon {
                    height: 24px;
                    width: 24px;
                    margin-left: 12px;
                    margin-right: 12px;
                }
.c-user-activity .--info time{
    font-size: 14px;
    line-height: 150%;
    color: var(--textColor6);
}
.c-user-activity .--action-icon {
        height: 16px;
        width: 16px;
        margin-left: 24px;
        align-self: center;
    }
.c-user-activity-submitted-iteration .--iteration{
    margin-top: 12px;
    border-radius: 8px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 201 217 / var(--tw-border-opacity, 1));
    --tw-shadow: var(--box-shadow-sm);
    --tw-shadow-colored: var(--box-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-user-activity-submitted-iteration .--iteration {
        box-shadow: 0 0 0 2px #000;
    }
.c-user-activity-submitted-iteration .--iteration{
    margin-bottom: 12px;
    display: flex;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
}
.c-user-activity-submitted-iteration .--iteration .c-iteration-summary{
    flex-grow: 1;
}
.c-search-bar{
    position: relative;
    display: flex;
    align-items: stretch;
}
@media (min-width: 1024px){

    .c-search-bar{
        align-items: center;
    }
}
.c-search-bar > .container{
    display: flex;
    align-items: center;
}
.c-search-bar input.--search:not(:last-child){
    margin-right: 24px;
}
.c-search-bar input.--search:disabled{
    cursor: not-allowed;
            filter: blur(1px);
}
.c-search-bar input.--search{
    width: 1px;
    flex-grow: 1;
    height: 48px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 40px;

        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: 12px center;
}
.c-search-bar input.--search.--right{
    padding-left: 16px;
    padding-right: 40px;
        background-size: 20px 20px;
        background-position: right 16px center;
}
.c-search-bar .--filter-btn,
    .c-search-bar .--reset-btn{
    display: flex;
    align-items: center;
    height: 48px;
    padding-left: 12px;
    padding-right: 12px;
    border-width: 2px;
    font-size: 16px;
    font-weight: 600;
}
.c-search-bar .--filter-btn{
    flex-shrink: 0;
    margin-right: 40px;
    border-radius: 5px;
    padding-left: 12px;
    padding-right: 12px;
    border-color: var(--buttonBorderColor1);
}
.c-search-bar .--filter-btn:focus{
    border-color: var(--inputBorderColorFocus);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-shadow: 0px 0px 2px 2px var(--inputBoxShadowColorFocus);
    --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-search-bar .--filter-btn:focus {
        box-shadow: 0 0 0 2px #000;
    }
.c-search-bar .--filter-btn .c-icon {
            height: 18px;
            width: 18px;
        filter: var(--textColor5-filter);
        }
@media (min-width: 768px){

    .c-search-bar .--filter-btn{
        padding-left: 24px;
        padding-right: 24px;
    }
}
.c-search-bar .--reset-btn{
    border-color: transparent;
    color: var(--linkColor);
}
.c-search-bar .--reset-btn .c-icon{
    margin-right: 12px;
            height: 18px;
            width: 18px;
            filter: var(--linkColor-filter);
}
.theme-light .c-search-bar input.--search, .theme-accessibility-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6Izc2NzA5RjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
.theme-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6I0E5QTZCRDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
.c-iteration-pane{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-color: var(--backgroundColorB);
}
.c-iteration-pane .c-copy-text-to-clipboard {
        --message-top-position: 25px;
        position: static;
        border-radius: 0;
        border-left-width: 1px;
        border-style: none;
        margin-left: 32px;
        border-color: var(--borderColor7);
        background-color: transparent;
        width: auto;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 8px;
        padding-right: 8px;
        height: 36px;
    }
.c-iteration-pane .c-copy-text-to-clipboard .c-icon {
        filter: var(--textColor6-filter);
        margin: 0px;
            height: 16px;
            width: 16px;
    }
.c-iteration-pane .tabs{
    display: flex;
    align-items: center;
    background-color: var(--backgroundColorB);
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
}
.c-iteration-pane .tabs .c-tab{
    display: grid;
    place-items: center;
    background-color: var(--backgroundColorB);
    margin-right: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 150%;
    color: var(--textColor6);
    border-right-width: 1px;
    border-color: var(--borderColor7);
    border-radius: 0;
            margin-bottom: -1px;
            border-bottom-width: 1px;
}
.c-iteration-pane .tabs .c-tab.selected{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    font-weight: 500;
    color: var(--textColor2);
                border-bottom: 1px solid transparent;
}
.c-iteration-pane .code code{
    padding-top: 16px;
    padding-bottom: 16px;
}
.c-test-tabs{
    display: flex;
    align-items: center;
    background-color: var(--backgroundColorB);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
}
.c-test-tabs .c-tab{
    display: grid;
    place-items: center;
    background-color: var(--backgroundColorB);
    margin-right: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 150%;
    color: var(--textColor6);
    border-right-width: 1px;
    border-color: var(--borderColor7);
    border-radius: 0;
        margin-bottom: -1px;
        border-bottom-width: 1px;
}
.c-test-tabs .c-tab.selected{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    font-weight: 500;
    color: var(--textColor2);
            border-bottom: 1px solid transparent;
}
.c-explainer{
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 12px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 248 255 / var(--tw-bg-opacity, 1));
    /* TODO: Work out if this is correct */
    border: 2px solid RGB(158, 0, 255);
}
.c-explainer > .c-icon {
        height: 48px;
        width: 48px;
        margin-right: 24px;
    }
.c-explainer > .--content h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-explainer > .--content p{
    line-height: 160%;
}
.c-explainer > .--content p a{
    color: var(--c-prominent-link-color);
}
.c-explainer > button{
    padding: 8px;
}
.c-explainer > button > .c-icon {
            height: 15px;
            width: 15px;
            margin-left: 8px;
        }
hr.c-divider {
    border: none !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIgMTNsOC40LTlMMjYgMTYgMzkuMiA0LjkgNTMgMTZsOS4zLTEwLjJMNzYuNCAxNiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: var(--textColor2-filter);

    height: 20px;
    width: 74.4px;
}
hr.c-divider.--small {
        height: 14px;
        width: 41px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCA0MSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgOC41TDYuMiA0TDE0IDEwTDIwLjYgNC40NUwyNy41IDEwTDMyLjE1IDQuOUwzOS4yIDEwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4K");
    }
hr.c-divider.--large {
        height: 28px;
        width: 124px;
    }
hr.c-divider.--dark {
    }
.c-faces{
    position: relative;
    display: flex;
    height: 32px;
}
.c-faces .face:not(:first-child) {
            margin-left: -16px;
        }
.c-faces .face{
        transition: margin 0.2s ease-out;
}
.c-faces .face .c-avatar,
        .c-faces .face.c-avatar {
            height: 32px;
            width: 32px;
        }
.c-faces .counter{
    display: grid;
    place-content: center;
    border-radius: 100%;
    background-color: var(--backgroundColorG);
    font-size: 13px;
    font-weight: 600;
    color: var(--textColor6);
    margin-left: -16px;
        width: 32px;
        height: 32px;
}
.c-faces-with-overflow-counter{
    position: relative;
    display: flex;
}
.c-faces-with-overflow-counter .face:not(:first-child) {
            margin-left: -16px;
        }
.c-faces-with-overflow-counter .face{
        transition: margin 0.2s ease-out;
}
.c-faces-with-overflow-counter .face .c-avatar,
        .c-faces-with-overflow-counter .face.c-avatar {
            height: 32px;
            width: 32px;
        }
.c-faces-with-overflow-counter .overflow-counter{
    display: grid;
    place-content: center;
    border-radius: 100%;
    background-color: var(--backgroundColorG);
    font-size: 13px;
    font-weight: 600;
    color: var(--textColor6);
    margin-left: -16px;
        width: 32px;
        height: 32px;
}
.c-results-zone {
    position: relative;
}
.c-results-zone .--fetching-overlay{
    display: flex;
    justify-content: center;
    padding-top: 48px;
    display: none;
}
.c-react-wrapper-common-introducer.c-results-zone .--fetching-overlay {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-results-zone .--fetching-overlay {
        display: flex;
    }
.c-introducer.c-results-zone .--fetching-overlay {
        display: none;
    }
.c-results-zone .--fetching-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--backgroundColorA-RGB) / 0.8);
    }
.c-results-zone .--fetching-overlay .c-icon {
            width: 64px;
            height: 64px;
            filter: var(--textColor7-filter);
        }
.c-results-zone.--fetching .--fetching-overlay{
    display: flex;
}
.c-react-wrapper-common-introducer {
    /* We get rid of this parent container when
     * things are hidden, rather than the child */
    transition: min-height 0.2s ease-in, max-height 0.2s ease-in,
        margin 0.2s ease-in, opacity 0.15s ease-in;
    overflow: hidden;
}
@media (min-width: 1024px){

    .c-react-wrapper-common-introducer{
        max-height: 160px;
        min-height: 130px;
    }
}
.c-react-wrapper-common-introducer{
    margin-top: 8px;
    margin-bottom: 40px;
}
.c-react-wrapper-common-introducer.hidden {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.hidden {
        display: flex;
    }
.c-introducer {
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border-radius: 12px;
        border-width: 2px;
        --tw-bg-opacity: 1;
        background-color: rgb(249 248 255 / var(--tw-bg-opacity, 1));
        --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3);
        --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .theme-accessibility-dark .c-introducer {
        box-shadow: 0 0 0 2px #000;
    }
.c-introducer{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
}
@media (min-width: 1024px){

    .c-introducer{
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}
.c-introducer{
    flex-direction: row;
    align-items: center;
}
@media (min-width: 1024px){

    .c-introducer{
        display: flex;
    }
}
.c-introducer.hidden {
        display: none;
    }
.c-introducer.--small{
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
}
.c-introducer.--small .visual-icon{
    height: 20px;
    width: 20px;
}
@media (min-width: 1024px){

    .c-introducer.--small .visual-icon{
        height: 48px;
        width: 48px;
    }
}
.c-introducer.--small .visual-icon{
    margin-right: 24px;
}
.c-introducer.--small .info h2,
            .c-introducer.--small .info h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
}
.c-introducer.--small .info p{
    line-height: 160%;
}
.c-introducer.--small .info p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-introducer.--small .info p strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-introducer.--small .info p{
    font-size: 14px;
}
.c-introducer.--small .close{
    padding-right: 0px;
}
.c-introducer.--small .close .c-icon {
                width: 16px;
                height: 16px;
            }
.c-introducer .visual-icon{
    height: 48px;
    width: 48px;
}
@media (min-width: 1024px){

    .c-introducer .visual-icon{
        height: 102px;
        width: 102px;
    }
}
.c-introducer .visual-icon{
    margin-bottom: 8px;
    margin-left: 32px;
}
@media (min-width: 1024px){

    .c-introducer .visual-icon{
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 32px;
    }
}
.c-introducer .visual-icon{
    float: right;
}
@media (min-width: 1024px){

    .c-introducer .visual-icon{
        float: none;
    }
}
.c-introducer .info h2,
        .c-introducer .info h3{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-introducer .info p{
    line-height: 160%;
}
.c-introducer .info p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-introducer .info p strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-introducer .info p{
    font-size: 16px;
}
@media (min-width: 1024px){

    .c-introducer .info p{
        max-width: 680px;
    }
}
.c-introducer .info p{
    margin-bottom: 8px;
}
@media (min-width: 1024px){

    .c-introducer .info p{
        margin-bottom: 0px;
    }
}
.c-introducer .info p a{
    font-weight: 500;
    color: var(--c-prominent-link-color);
}
@media (min-width: 1024px){

    .c-introducer .close{
        margin-left: auto;
        flex-shrink: 0;
        padding: 12px;
        filter: var(--textColor6-filter);
    }
}
.c-introducer .close .c-icon {
            width: 24px;
            height: 24px;
        }
.c-track-filter {
    /* Stop jumping around */
    min-width: 75px;
}
.c-track-filter button{
    display: flex;
    align-items: center;
}
.c-track-filter button .c-track-icon {
            width: 42px;
            height: 42px;
        }
.c-track-filter button .action-icon {
            width: 13px;
            height: 13px;
        }
.c-tracks-zero-section .track-icons{
    position: relative;
    margin-bottom: 20px;
    display: flex;
}
.c-tracks-zero-section .track-icons .c-track-icon {
            height: 64px;
            width: 64px;
            margin-left: -18px;
        }
.c-zero-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-zero-section {
        box-shadow: 0 0 0 2px #000;
    }
.c-zero-section{
    text-align: center;
    margin-bottom: 24px;
}
.c-zero-section .c-icon {
        width: 96px;
        height: 96px;
        margin-bottom: 16px;
    }
.c-zero-section h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.c-zero-section p{
    line-height: 160%;
}
.c-zero-section p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-zero-section p strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-zero-section p{
    font-size: 16px;
    color: var(--textColor6);
}
.c-zero-section p + *{
    margin-top: 20px;
}
.c-iteration-processing-status{
    display: flex;
    align-items: center;
}
.c-iteration-processing-status .--dot{
    border-radius: 100%;
        height: 8px;
        width: 8px;
}
.c-iteration-processing-status .c-icon {
        height: 16px;
        width: 16px;
    }
.c-iteration-processing-status .--status{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 12px;
    display: none;
}
.c-react-wrapper-common-introducer.c-iteration-processing-status .--status {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-iteration-processing-status .--status {
        display: flex;
    }
.c-introducer.c-iteration-processing-status .--status {
        display: none;
    }
@media (min-width: 768px){

    .c-iteration-processing-status .--status{
        display: block;
    }
}
.c-iteration-processing-status.--processing{
    --tw-text-opacity: 1;
    color: rgb(246 150 5 / var(--tw-text-opacity, 1));
}
.c-iteration-processing-status.--processing .c-icon {
            filter: var(--processing-orange-filter);
        }
.c-iteration-processing-status.--passed{
    --tw-text-opacity: 1;
    color: rgb(67 181 147 / var(--tw-text-opacity, 1));
}
.c-iteration-processing-status.--passed .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(67 181 147 / var(--tw-bg-opacity, 1));
}
.c-iteration-processing-status.--failed{
    --tw-text-opacity: 1;
    color: rgb(235 87 87 / var(--tw-text-opacity, 1));
}
.c-iteration-processing-status.--failed .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1));
}
.c-test-run .progress,
        .c-test-run .progress .bar {
            height: 4px;
        }
.c-test-run .progress.failed:not(.grouped-by-task),
        .c-test-run .progress.errored {
            background: var(--backgroundColorSummaryStatusFailed);
        }
.c-test-run .progress.failed:not(.grouped-by-task) .bar, .c-test-run .progress.errored .bar {
                background: var(--backgroundColorSummaryStatusFailedBar);
            }
.c-test-run .progress.failed.grouped-by-task{
    --tw-bg-opacity: 1;
    background-color: rgb(225 235 255 / var(--tw-bg-opacity, 1));
}
.c-test-run .progress.failed.grouped-by-task .bar {
                background: linear-gradient(180deg, #2200ff 0%, #9e00ff 100%);
            }
.c-test-run .progress.passed{
    background-color: rgba(79,205,167,0.15);
}
.c-test-run .progress.passed .bar{
    --tw-bg-opacity: 1;
    background-color: rgb(79 205 167 / var(--tw-bg-opacity, 1));
}
.c-test-run .summary-status{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 8px;
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    line-height: 160%;
}
.c-test-run .summary-status .--dot{
    margin-right: 12px;
    border-radius: 100%;
            height: 8px;
            width: 8px;
}
.c-test-run .summary-status.failed:not(.grouped-by-task),
        .c-test-run .summary-status.errored {
            background: var(--backgroundColorSummaryStatusFailed);
            text-transform: uppercase;
            --tw-text-opacity: 1;
            color: rgb(235 87 87 / var(--tw-text-opacity, 1));
        }
.c-test-run .summary-status.failed:not(.grouped-by-task) .--dot, .c-test-run .summary-status.errored .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1));
}
.c-test-run .summary-status.failed.grouped-by-task {
            background: var(--backgroundColorExerciseStatusTagLocked);
            color: var(--textColor2);
        }
.c-test-run .summary-status.failed.grouped-by-task .--dot{
    display: none;
}
.c-react-wrapper-common-introducer.c-test-run .summary-status.failed.grouped-by-task .--dot {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-test-run .summary-status.failed.grouped-by-task .--dot {
        display: flex;
    }
.c-introducer.c-test-run .summary-status.failed.grouped-by-task .--dot {
        display: none;
    }
.c-test-run .summary-status.passed{
    background-color: rgba(79,205,167,0.15);
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(67 181 147 / var(--tw-text-opacity, 1));
}
.c-test-run .summary-status.passed .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(67 181 147 / var(--tw-bg-opacity, 1));
}
.c-test-run .error-message{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
}
.c-test-run .error-message h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 12px;
}
.c-test-run .error-message pre {
            white-space: pre-wrap;
        }
.c-test-run .ops-error{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
}
.c-test-run .ops-error p{
    line-height: 160%;
}
.c-test-run .ops-error p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-test-run .ops-error p strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-test-run .ops-error p{
    font-size: 16px;
    margin-bottom: 12px;
}
.c-test-run .success-box{
    display: flex;
    border-radius: 8px;
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-test-run .success-box {
        box-shadow: 0 0 0 2px #000;
    }
.c-test-run .success-box{
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 16px;
    margin-bottom: 40px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
}
.c-test-run .success-box > .c-icon {
            height: 64px;
            width: 64px;
            margin-right: 16px;
        }
.c-test-run .success-box h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.c-test-run .success-box p{
    line-height: 160%;
}
.c-test-run .success-box p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.c-test-run .success-box p strong{
    font-weight: 500;
    color: var(--textColor2);
}
.c-test-run .success-box p{
    font-size: 14px;
    margin-bottom: 16px;
}
.c-test-run .tests-list b, .c-test-run .v1-message b{
    font-weight: 600;
}
.c-test-run .v1-message{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
        white-space: pre-wrap;
}
.c-test-run .tests-grouped-by-status{
    padding-left: 24px;
    padding-right: 24px;
}
.c-test-run .tests-grouped-by-status .tests-group-summary{
    display: inline-block;
}
.c-test-run .tests-grouped-by-status .tests-group-summary .--summary-inner{
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 100px;
    border-width: 2px;
    border-color: var(--borderColor6);
    font-size: 14px;
    font-weight: 600;
    color: var(--textColor2);
}
.c-test-run .tests-grouped-by-status .tests-group-summary{
    margin-bottom: 12px;
}
.c-test-run .tests-grouped-by-status .tests-group-summary .c-icon.indicator {
                height: 24px;
                width: 24px;
                margin-right: 16px;
            }
.c-test-run .tests-grouped-by-status .--summary-inner .c-icon.--closed-icon,
                .c-test-run .tests-grouped-by-status .--summary-inner .c-icon.--open-icon {
        filter: var(--textColor6-filter);
    }
.c-test-run .tests-grouped-by-task{
    padding-bottom: 16px;
}
.c-test-run .tests-grouped-by-task .tests-group{
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: var(--borderColor8);
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.c-test-run .tests-grouped-by-task .tests-group:first-child{
    border-top-width: 0;
                margin-top: -16px;
}
.c-test-run .tests-grouped-by-task .tests-group:last-child{
    border-bottom-width: 0;
}
.c-test-run .tests-grouped-by-task .tests-group-summary{
    display: inline-block;
}
.c-test-run .tests-grouped-by-task .tests-group-summary + *{
    margin-top: 12px;
}
.c-test-run .tests-grouped-by-task .tests-group-summary .--summary-inner{
    display: flex;
    align-items: center;
}
.c-test-run .tests-grouped-by-task .tests-group-summary .--summary-inner .c-icon.--closed-icon,
                    .c-test-run .tests-grouped-by-task .tests-group-summary .--summary-inner .c-icon.--open-icon{
    margin-left: 24px;
                        height: 16px;
                        width: 16px;
        filter: var(--textColor6-filter);
}
.c-test-run .tests-grouped-by-task .tests-group-summary .task-marker{
    margin-right: 20px;
    margin-top: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 3px;
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
    flex-shrink: 0;
    align-self: flex-start;
}
.c-test-run .tests-grouped-by-task .tests-group-summary .task-marker.passed{
    --tw-bg-opacity: 1;
    background-color: rgb(67 181 147 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.c-test-run .tests-grouped-by-task .tests-group-summary .task-marker.pending{
    --tw-bg-opacity: 1;
    background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 54 63 / var(--tw-text-opacity, 1));
}
.c-test-run .tests-grouped-by-task .tests-group-summary .title{
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor2);
}
.c-test-run .tests-grouped-by-task .tests-group-summary .c-icon.indicator{
    flex-shrink: 0;
    align-self: flex-start;
                height: 16px;
                width: 16px;
                margin-top: 6px;
                margin-left: 8px;
}
.c-test-run .c-test-summary{
    display: flex;
    flex-direction: column;
    font-family: Source Code Pro, monospace;
    margin-bottom: 12px;
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--borderColor6);
}
.c-test-run .c-test-summary[open]{
    background-color: var(--backgroundColorG);
}
.c-test-run .c-test-summary[open] .--summary{
    margin-bottom: 6px;
}
.c-test-run .c-test-summary:not([open]){
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
.c-test-run .c-test-summary:not([open]) .--summary {
            }
.c-test-run .c-test-summary .--summary .--summary-inner{
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 24px;
    padding-right: 24px;
}
.c-test-run .c-test-summary .--summary .--summary-inner .c-icon {
        filter: var(--textColor6-filter);
    }
.c-test-run .c-test-summary .--summary .--status{
    margin-right: 24px;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 170%;
                width: 70px;
}
.c-test-run .c-test-summary .--summary .--status .--dot {
                    height: 8px;
                    width: 8px;
                    margin-right: 12px;
                    border-radius: 100%;
                }
.c-test-run .c-test-summary .--summary .--summary-details{
    flex-grow: 1;
}
.c-test-run .c-test-summary .--summary .--summary-details .--summary-idx{
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor6);
}
.c-test-run .c-test-summary .--summary .--summary-details .--summary-name{
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 140%;
}
.c-test-run .c-test-summary .--explanation{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 8px;
}
.c-test-run .c-test-summary .--explanation .--info{
    margin-bottom: 16px;
}
.c-test-run .c-test-summary .--explanation .--info h3{
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 170%;
    color: var(--textColor3);
}
.c-test-run .c-test-summary .--explanation .--info pre{
    overflow-y: auto;
    white-space: pre-wrap;
    border-radius: 8px;
    background-color: var(--backgroundColorB);
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
}
.c-test-run .c-test-summary.pass summary .--status{
    --tw-text-opacity: 1;
    color: rgb(67 181 147 / var(--tw-text-opacity, 1));
}
.c-test-run .c-test-summary.pass summary .--status .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(67 181 147 / var(--tw-bg-opacity, 1));
}
.c-test-run .c-test-summary.error summary .--status, .c-test-run .c-test-summary.fail summary .--status{
    --tw-text-opacity: 1;
    color: rgb(235 87 87 / var(--tw-text-opacity, 1));
}
.c-test-run .c-test-summary.error summary .--status .--dot, .c-test-run .c-test-summary.fail summary .--status .--dot{
    --tw-bg-opacity: 1;
    background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1));
}
.c-test-run .instructions-btn{
    border-color: var(--borderColor6);
    color: var(--textColor1);
}
/*  

this could be turned into one alert, with common props, then have variants below
- success
- caution
- danger

this is c-alert--caution
*/
.c-alert {
    background: var(--backgroundColorCAlert);
    color: var(--textColorCAlert);
    border-radius: 8px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 500;
    line-height: 150%;
}
.c-alert strong{
    font-weight: 600;
    color: var(--textColor2);
}
.c-alert--danger {
    background: var(--backgroundColorCAlert);
    color: var(--textColorCAlert);
    border-radius: 8px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 500;
    line-height: 150%;
}
.c-alert--danger strong{
    font-weight: 600;
    color: var(--textColor2);
}
.c-alert--danger{
    --tw-border-opacity: 1;
    border-color: rgb(216 80 80 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(216 80 80 / var(--tw-text-opacity, 1));
    background: var(--backgroundColorCAlert);
}
.c-alert--danger_dark {
    background: var(--backgroundColorCAlert);
    color: var(--textColorCAlert);
    border-radius: 8px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 500;
    line-height: 150%;
}
.c-alert--danger_dark strong{
    font-weight: 600;
    color: var(--textColor2);
}
.c-alert--danger_dark{
    --tw-border-opacity: 1;
    border-color: rgb(216 80 80 / var(--tw-border-opacity, 1));
    color: rgb(216 80 80 / var(--tw-text-opacity, 1));
    background: var(--backgroundColorCAlert);
    --tw-bg-opacity: 1;
    background-color: rgb(47 33 33 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 112 112 / var(--tw-text-opacity, 1));
}
/*
 * Based on Diff to HTML (diff2html.css)
 * Author: rtfpessoa
 */
.c-diff{
    padding-top: 12px;
    padding-bottom: 12px;

    /*
     * Changes Highlight
     */

    /* & .d2h-info { */
    /*     background-color: #f8fafd; */
    /*     color: rgba(0, 0, 0, 0.3); */
    /*     border-color: #d5e4f2; */
    /* } */
}
.c-diff .hljs {
        background: none !important;
    }
.c-diff .d2h-diff-table{
    font-family: Source Code Pro, monospace;
    line-height: 160%;
    width: 100%;
}
.c-diff .d2h-diff-tbody tr:first-child,
    .c-diff .d2h-file-header {
        display: none;
    }
.c-diff .d2h-files-diff {
        display: block;
        width: 100%;
    }
.c-diff .d2h-diff-tbody tr{
    display: flex;
}
.c-diff .d2h-diff-tbody tr td.d2h-del:not(.d2h-code-linenumber),
            .c-diff .d2h-diff-tbody tr td.d2h-ins:not(.d2h-code-linenumber){
    flex-grow: 1;
}
.c-diff .d2h-diff-tbody tr td.d2h-del,
            .c-diff .d2h-diff-tbody tr td.d2h-ins{
    padding: 0px;
}
.c-diff .d2h-code-linenumber{
    color: var(--textColor6);
        text-align: right;
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 90px;
}
.c-diff .d2h-code-linenumber .line-num1,
        .c-diff .d2h-code-linenumber .line-num2{
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
}
.c-diff .d2h-code-linenumber.d2h-ins {
            background: var(--diffDarkGreen);
        }
.c-diff .d2h-code-linenumber.d2h-del {
            background: var(--diffDarkRed);
        }
/* Adds a null char for if there is no content */
.c-diff .d2h-code-linenumber:after {
            content: "\200b";
        }
.c-diff td.d2h-ins > .d2h-code-line {
        background: var(--diffLightGreen);
    }
.c-diff td.d2h-del > .d2h-code-line {
        background: var(--diffLightRed);
    }
.c-diff .d2h-code-line {
        white-space: nowrap;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        width: 100%;
        display: flex;
        align-items: center;
    }
.c-diff .d2h-code-line ins,
        .c-diff .d2h-code-line del {
            display: inline-block;
            margin-top: -1px;
            text-decoration: none;
            border-radius: 1px;
            text-align: left;
            vertical-align: middle;
        }
.c-diff .d2h-code-line ins {
            background: var(--diffDarkGreen);
        }
.c-diff .d2h-code-line del {
            background: var(--diffDarkRed);
        }
.c-diff .d2h-code-line.d2h-ins {
            background: rgba(79, 205, 144, 0.15);
        }
.c-diff .d2h-code-line.d2h-del {
            /* TODO background color */
        }
.c-diff .d2h-code-line .d2h-code-line-prefix {
            width: 20px;
            text-align: center;
            font-weight: 600;
        }
.c-diff .d2h-code-line .d2h-code-line-ctn {
            word-wrap: normal;
            white-space: pre;
            -webkit-user-select: text;
               -moz-user-select: text;
                    user-select: text;
        }
.c-diff .d2h-emptyplaceholder {
        /* background-color: #f1f1f1; */
        /* border-color: #e1e1e1; */
    }
.c-diff .d2h-code-linenumber,
    .c-diff .d2h-code-line-prefix,
    .c-diff .d2h-emptyplaceholder {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.c-diff .d2h-code-linenumber {
        direction: rtl;
    }
.c-cli-walkthrough img {
        max-width: 100%;
    }
/* All of this can be removed once we make the 
     * content into textual content */
.c-cli-walkthrough .passage > p,
        .c-cli-walkthrough .passage > ul,
        .c-cli-walkthrough .passage > pre{
    font-size: 18px;
    line-height: 160%;
    margin-bottom: 16px;
}
.c-cli-walkthrough .passage ul,
        .c-cli-walkthrough .passage ol{
    margin-bottom: 24px;
            margin-left: 14px;
}
.c-cli-walkthrough .passage ul li, .c-cli-walkthrough .passage ol li {
                margin-left: 6px;
                margin-top: 0px;
                margin-bottom: 8px;
            }
.c-cli-walkthrough .passage ul li{
    list-style-type: disc;
}
.c-cli-walkthrough .passage ol li{
    list-style-type: decimal;
}
.c-cli-walkthrough .passage a{
    font-weight: 600;
    color: var(--c-prominent-link-color);
}
.c-cli-walkthrough .passage strong{
    font-weight: 600;
}
.c-cli-walkthrough .passage em{
    font-style: italic;
}
.c-cli-walkthrough .passage strikethrough{
    text-decoration-line: line-through;
}
.c-cli-walkthrough .passage h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    .c-cli-walkthrough .passage h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    .c-cli-walkthrough .passage h1{
        font-size: 39px;
    }
}
.c-cli-walkthrough .passage h1{
    margin-bottom: 16px;
}
.c-cli-walkthrough .passage > pre{
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--borderColor5);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    margin-bottom: 24px;
    font-size: 16px;
    overflow: hidden;
}
.c-cli-walkthrough .passage > pre code{
    display: block;
    overflow: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
}
.c-cli-walkthrough .passage hr{
    border-color: var(--borderColor6);
    margin-top: 36px;
    margin-bottom: 32px;
}
.c-cli-walkthrough .passage h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 24px;
}
.c-cli-walkthrough .passage h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 16px;
}
.c-cli-walkthrough .passage ul:last-child{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0px;
}
.c-cli-walkthrough .passage ul:last-child li{
    margin: 0px;
    margin-right: 24px;
    margin-bottom: 24px;
    list-style-type: none;
}
/* Only enhance buttons in the final p/ul */
.btn-i-filled.c-cli-walkthrough .passage > :last-child a[data-passage] {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }
.btn-i-filled.c-cli-walkthrough .passage > :last-child a[data-passage]:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-xs:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-s:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-m:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage].btn-l:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage]{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    color: var(--textColor2);
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(92 85 137 / var(--tw-border-opacity, 1));
}
.c-cli-walkthrough .passage > :last-child a[data-passage] > .c-icon {
            filter: var(--textColor2-filter);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage]:not(:disabled):not(.--disabled):hover {
            background: rgb(96, 79, 205, 0.02);
        }
.c-cli-walkthrough .passage > :last-child a[data-passage]:not(:disabled):not(.--disabled):hover.btn-l {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.6);
            }
.btn-enhanced:not(:disabled):not(.--disabled):hover.c-cli-walkthrough .passage > :last-child a[data-passage] {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.6);
            }
.btn-slightly-enhanced:not(:disabled):not(.--disabled):hover.c-cli-walkthrough .passage > :last-child a[data-passage] {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.3);
            }
.c-cli-walkthrough .passage > :last-child a[data-passage]{
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;

        transition: background-color 0.1s ease-in;
}
.c-cli-walkthrough .passage > :last-child a[data-passage] > .c-icon:first-child{
    margin-right: 12px;
}
.c-cli-walkthrough .passage > :last-child a[data-passage] > .c-icon:last-child{
    margin-left: 12px;
}
.c-cli-walkthrough .passage > :last-child a[data-passage] > .kb-shortcut{
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    margin-left: 8px;
            line-height: 1;
}
.c-cli-walkthrough .passage > :last-child a[data-passage] {
        height: 56px;
        border-radius: 8px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 18px;
    }
.c-cli-walkthrough .passage > :last-child a[data-passage] > .c-icon {
            height: 20px;
            width: 20px;
        }
.c-cli-walkthrough .passage > :last-child a[data-passage] > .kb-shortcut{
    font-size: 15px;
}
.c-cli-walkthrough .passage > :last-child a[data-passage]{
    display: inline-flex;
}
body.namespace-.controller-journey #site-footer .external-section .btn-enhanced.c-cli-walkthrough .passage > :last-child a[data-passage], body.namespace-.controller-insiders #site-footer .external-section .btn-enhanced.c-cli-walkthrough .passage > :last-child a[data-passage] {
                box-shadow: none;
            }
body.namespace-.controller-journey #site-footer .external-section .c-cli-walkthrough .passage > :last-child a[data-passage].btn-l, body.namespace-.controller-insiders #site-footer .external-section .c-cli-walkthrough .passage > :last-child a[data-passage].btn-l {
                box-shadow: none;
            }
#site-footer .external-section .c-cli-walkthrough .passage > :last-child a[data-passage]{
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.c-cli-walkthrough .passage > :last-child a[data-passage] {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
        }
button.c-cli-walkthrough-button{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border-radius: 8px;
        border-width: 2px;
        --tw-bg-opacity: 1;
        background-color: rgb(225 235 255 / var(--tw-bg-opacity, 1));
        text-align: left;
}
button.c-cli-walkthrough-button .graphical-icon {
        height: 48px;
        width: 48px;
        margin-right: 16px;
    }
button.c-cli-walkthrough-button .info{
    flex-grow: 1;
}
button.c-cli-walkthrough-button .info .--title{
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
button.c-cli-walkthrough-button .info .--explanation{
    margin: 0px;
    font-size: 14px;
    line-height: 160%;
}
button.c-cli-walkthrough-button .modal-icon {
        height: 16px;
        width: 16px;
        margin-left: 24px;
        filter: var(--textColor6-filter);
    }
.c-youtube-container{
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding-bottom: 56.25%;
    /* padding-top: 30px; */
    height: 0;
}
.c-youtube-container iframe,
    .c-youtube-container object,
    .c-youtube-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.c-vimeo-container{
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.c-vimeo-container iframe,
    .c-vimeo-container object,
    .c-vimeo-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.c-vimeo-container iframe .vp-center, .c-vimeo-container object .vp-center, .c-vimeo-container embed .vp-center {
            background: blue;
        }
.m-donations-form.c-modal .--modal-content {
        width: 550px;
        max-width: 100%;
        padding: 0px;
    }
.m-donation-confirmation .--modal-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
        max-width: 780px;
}
.m-donation-confirmation .--modal-content .c-badge-medallion {
            height: 40px;
            width: 40px;
            margin-right: 8px;
        }
.m-donation-confirmation .--modal-content .c-icon.main-icon {
            height: 64px;
            width: 64px;
            margin-bottom: 20px;
        }
.m-donation-confirmation .--modal-content .badge-container{
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(255 211 143 / var(--tw-border-opacity, 1));
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 24px;
    padding-right: 24px;
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .m-donation-confirmation .--modal-content .badge-container {
        box-shadow: 0 0 0 2px #000;
    }
.m-donation-confirmation .--modal-content .badge-container {
            background: var(--backgroundColorCAlert);
        }
.m-badge.c-modal.--cover.--common {
        --rgb: var(--commonBadge-RGB);
        --rgb-fill: var(--commonBadgeFill-RGB);
        --rgb-shadow: var(--commonBadgeShadow-RGB);
    }
.m-badge.c-modal.--cover.--rare {
        --rgb: var(--rareBadge-RGB);
        --rgb-fill: var(--rareBadgeFill-RGB);
        --rgb-shadow: var(--rareBadgeShadow-RGB);
    }
.m-badge.c-modal.--cover.--ultimate {
        --rgb: var(--ultimateBadge-RGB);
        --rgb-fill: var(--ultimateBadgeFill-RGB);
        --rgb-shadow: var(--ultimateBadgeShadow-RGB);
    }
.m-badge.c-modal.--cover.--legendary {
        --rgb: var(--legendaryBadge-RGB);
        --rgb-fill: var(--legendaryBadgeFill-RGB);
        --rgb-shadow: var(--legendaryBadgeShadow-RGB);
    }
.m-badge.c-modal.--cover{

    background: rgba(34, 30, 49, 0.8);
}
.m-badge.c-modal.--cover .--modal-container{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 96px;
    padding-bottom: 48px;
}
.m-badge.c-modal.--cover .--modal-content {
        max-width: 740px;
        min-height: auto;
        background: rgba(34, 30, 49, 1);
        box-shadow: 0px 2px 24px 0 rgb(var(--rgb-shadow));
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 48px;
        padding-bottom: 64px;
        position: relative;
        overflow: visible;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
.m-badge.c-modal.--cover .c-badge-medallion {
        height: 80px;
        width: 80px;
        margin-bottom: 24px;
    }
.m-badge.c-modal.--cover h2{
    font-family: Source Code Pro, monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 130%;
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
    margin-bottom: 12px;
}
.m-badge.c-modal.--cover .name{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    .m-badge.c-modal.--cover .name{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    .m-badge.c-modal.--cover .name{
        font-size: 39px;
    }
}
.m-badge.c-modal.--cover .name{
    margin-bottom: 20px;
}
.m-badge.c-modal.--cover .rarity{
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 3px;
        background: rgb(var(--rgb));
        color: rgb(var(--rgb-fill));
}
.m-badge.c-modal.--cover hr.c-divider {
        filter: var(--textColor7-filter);
        margin-bottom: 28px;
    }
.m-badge.c-modal.--cover .reason{
    line-height: 160%;
}
.m-badge.c-modal.--cover .reason a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.m-badge.c-modal.--cover .reason strong{
    font-weight: 500;
    color: var(--textColor2);
}
.m-badge.c-modal.--cover .reason{
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 4px;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(240 243 249 / var(--tw-text-opacity, 1));
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}
.m-badge.c-modal.--cover .earned-at{
    line-height: 160%;
}
.m-badge.c-modal.--cover .earned-at a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
.m-badge.c-modal.--cover .earned-at strong{
    font-weight: 500;
    color: var(--textColor2);
}
.m-badge.c-modal.--cover .earned-at{
    font-size: 16px;
    margin-bottom: 32px;
    --tw-text-opacity: 1;
    color: rgb(203 201 217 / var(--tw-text-opacity, 1));
}
.m-badge.c-modal.--cover .num-awardees {
        /* TODO */
        background: #191525;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }
.m-badge.c-modal.--cover .num-awardees .c-icon {
            height: 16px;
            width: 16px;
            margin-right: 8px;
            filter: var(--white-filter);
        }
.m-badge.c-modal.--cover .num-awardees strong{
    margin-right: 8px;
}
.m-badge.c-modal.--cover .percentage-awardees strong{
    font-weight: 500;
    color: var(--textColor1);
}
.c-modal.m-test-run .--modal-content{
    padding: 0px;
        border-radius: 0 0 5px 5px;
        max-width: 1000px;
}
.m-welcome.c-modal.--cover {
    background: var(--modalBackgroundColor);
}
.m-welcome.c-modal.--cover .--modal-container {
        padding: 50px 0;
    }
.m-welcome.c-modal.--cover .wrapper {
        overflow-y: scroll;
        max-height: 100%;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
.m-welcome.c-modal.--cover .--modal-content {
        padding: 0;
        max-height: none;
        margin-top: 20px;
        margin-bottom: 40px;
        --tw-bg-opacity: 1;
        background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 48px;
        padding-right: 48px;
        border-radius: 16px;
        --tw-shadow: var(--box-shadow-lgZ1);
        --tw-shadow-colored: var(--box-shadow-lgZ1);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .theme-accessibility-dark .m-welcome.c-modal.--cover .--modal-content {
        box-shadow: 0 0 0 2px #000;
    }
.m-welcome.c-modal.--cover .--modal-content{
    display: flex;
    align-items: stretch;
        width: 100%;
        /* Developer: max-width: 1180px; */
        /* Start: max-width: 590px; */
        /* Beginners */
        max-width: 620px;
}
.m-welcome.c-modal.--cover .--modal-content .view-changer-btn{
    pointer-events: auto;
    height: 56px;
    cursor: pointer;
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--borderColor1);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}
.m-welcome.c-modal.--cover .lhs{
    flex-grow: 1;
}
.m-welcome.c-modal.--cover .lhs header{
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.m-welcome.c-modal.--cover .lhs header h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
                line-height: 1.25;
}
@media (min-width: 768px){

    .m-welcome.c-modal.--cover .lhs header h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    .m-welcome.c-modal.--cover .lhs header h1{
        font-size: 36px;
    }
}
.m-welcome.c-modal.--cover .lhs header h1{
    margin-bottom: 12px;
}
.m-welcome.c-modal.--cover .lhs header p{
    font-size: 18px;
    line-height: 170%;
}
.m-welcome.c-modal.--cover .lhs header p strong{
    font-weight: 500;
}
.m-welcome.c-modal.--cover .lhs h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    .m-welcome.c-modal.--cover .lhs h2{
        font-size: 24px;
    }
}
.m-welcome.c-modal.--cover .lhs h2{
    margin-bottom: 6px;
}
.m-welcome.c-modal.--cover .lhs p{
    font-size: 16px;
    line-height: 170%;
}
.m-welcome.c-modal.--cover .lhs .improvements{
    margin-top: 24px;
    margin-bottom: 32px;
}
.m-welcome.c-modal.--cover .lhs .improvements .improvement{
    display: flex;
    align-items: flex-start;
}
.m-welcome.c-modal.--cover .lhs .improvements .improvement + .improvement{
    margin-top: 24px;
}
.m-welcome.c-modal.--cover .lhs .improvements .improvement .c-icon {
                    height: 64px;
                    width: 64px;
                    margin-right: 24px;
                    flex-shrink: 0;
                }
.m-welcome.c-modal.--cover .lhs .improvements .improvement h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 4px;
}
.m-welcome.c-modal.--cover .lhs .improvements .improvement p{
    color: var(--textColor3);
}
.m-welcome.c-modal.--cover .rhs{
    margin-left: 48px;
    flex-shrink: 0;
        width: 460px;
}
.m-welcome.c-modal.--cover .rhs .video{
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
}
.m-welcome.c-modal.--cover .rhs .video iframe,
            .m-welcome.c-modal.--cover .rhs .video object,
            .m-welcome.c-modal.--cover .rhs .video embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
.m-welcome.c-modal.--cover .rhs .thank-you{
    background-color: var(--backgroundColorD);
    border-radius: 8px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 32px;
    padding-right: 32px;
}
.m-welcome.c-modal.--cover .rhs .thank-you h3{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
.m-welcome.c-modal.--cover .rhs .thank-you p{
    font-size: 16px;
    line-height: 150%;
}
.m-welcome.c-modal.--cover .bubbles{
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.m-welcome.c-modal.--cover .bubbles .bubble{
    font-size: 14px;
    font-weight: 500;
    border-width: 1px;
            border-color: rgba(96, 79, 205, 0.8);
            box-shadow: 0 0 10px rgba(96, 79, 205, 0.2);
            border-radius: 12px;
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 12px;
            padding-right: 12px;
            --tw-text-opacity: 1;
            color: rgb(96 79 205 / var(--tw-text-opacity, 1));
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
}
.m-welcome.c-modal.--cover .bubbles .bubble img{
    display: inline;
    height: 16px;
    width: 16px;
}
.m-welcome.c-modal.--cover .bubbles .bubble strong{
    font-weight: 600;
}
.m-welcome.c-modal.--cover .quote{
    position: relative;
    margin-bottom: 40px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        -moz-column-break-inside: avoid;
             break-inside: avoid;
        display: inline-block;
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
        border-radius: 12px;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 12px;
        padding-bottom: 12px;
}
.m-welcome.c-modal.--cover .quote .words{
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.m-welcome.c-modal.--cover .quote .words p{
    display: inline;
}
.m-welcome.c-modal.--cover .quote .words p strong{
    font-weight: 600;
}
.m-welcome.c-modal.--cover .quote .words .mark {
                height: 12px;
                width: 16px;
                opacity: 0.7;
                --tw-grayscale: grayscale(100%);
                filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
            }
.m-welcome.c-modal.--cover .quote .words .left-mark{
    align-self: flex-start;
    margin-top: 8px;
}
.m-welcome.c-modal.--cover .quote .words .right-mark {
                transform: scaleX(-1);
                margin-left: 6px;
                display: inline;
            }
.m-welcome.c-modal.--cover .quote .stars{
    margin-bottom: 8px;
    height: 21px;
    width: 110px;
            background-image: url("/assets/bootcamp/stars-c54fe5f49cf6f3c0c4f92ac83927332493eea9b8.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100px;
            margin-left: auto;
            left: 16px;
            border-radius: 20px;
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.m-welcome.c-modal.--cover .quote .person{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 16px;
    border-radius: 20px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
            filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}
.m-welcome.c-modal.--cover .quote .person img{
    height: 40px;
    width: 40px;
    border-radius: 100%;
}
.m-welcome.c-modal.--cover .quote .person .text{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.m-welcome.c-modal.--cover .quote .person .name{
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
}
@media (min-width: 768px){

    .m-welcome.c-modal.--cover .quote .person .name{
        font-size: 16px;
    }
}
.m-welcome.c-modal.--cover .quote .person .description{
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
}
@media (min-width: 768px){

    .m-welcome.c-modal.--cover .quote .person .description{
        font-size: 16px;
    }
}
.m-welcome.c-modal.--cover .--modal-content {
        position: relative;
        overflow: hidden;
    }
.m-welcome.c-modal.--cover .curtains {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0px;
        background-image: url("/assets/graphics/curtains-eb8737b8f8c1ee4fbc196e08b59e2f7a41a5adaa.png");
        background-size: 620px 860px;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
.m-welcome.c-modal.--cover .lhs {
        z-index: 1;
        position: relative;
    }
.c-modal.m-testimonial .--modal-container{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 80px;
    padding-bottom: 48px;
}
@media (min-width: 768px){

    .c-modal.m-testimonial .--modal-container{
        padding-left: 48px;
        padding-right: 48px;
    }
}
.c-modal.m-testimonial .--modal-container .--modal-content {
            width: 100%;
            max-width: 780px;
            min-height: auto;
            padding: 0px;
            position: relative;
            overflow: visible;
            --tw-bg-opacity: 1;
            background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
            border-radius: 8px;
            --tw-shadow: var(--box-shadow-lgZ1);
            --tw-shadow-colored: var(--box-shadow-lgZ1);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

    .theme-accessibility-dark .c-modal.m-testimonial .--modal-container .--modal-content {
        box-shadow: 0 0 0 2px #000;
    }
.c-modal.m-testimonial .avatar-group{
    position: absolute;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
}
.c-modal.m-testimonial .avatar-group .c-avatar {
            width: 80px;
            height: 80px;
            filter: drop-shadow(
                0px -5px 42px rgba(var(--shadowColorMain), 0.3)
            );
        }
.c-modal.m-testimonial .testimonial-section{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
}
.c-modal.m-testimonial .testimonial-section .content{
    font-size: 25px;
}
@media (min-width: 768px){

    .c-modal.m-testimonial .testimonial-section .content{
        font-size: 31px;
    }
}
.c-modal.m-testimonial .testimonial-section .content{
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor2);
    margin-top: 32px;
    margin-bottom: 16px;
}
.c-modal.m-testimonial .testimonial-section .student{
    margin-bottom: 4px;
    display: flex;
    color: var(--textColor5);
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
@media (min-width: 768px){
    .c-modal.m-testimonial .testimonial-section .student{
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        color: var(--textColor1);
    }
}
.c-modal.m-testimonial .testimonial-section .student strong{
    font-weight: 600;
    color: var(--textColor2);
}
.c-modal.m-testimonial .testimonial-section .exercise{
    display: flex;
    align-items: center;
    line-height: 160%;
    color: var(--textColor6);
    font-size: 14px;
}
@media (min-width: 768px){

    .c-modal.m-testimonial .testimonial-section .exercise{
        font-size: 17px;
    }
}
.c-modal.m-testimonial .testimonial-section .exercise{
    margin-bottom: 0px;
}
@media (min-width: 768px){

    .c-modal.m-testimonial .testimonial-section .exercise{
        margin-bottom: 16px;
    }
}
.c-modal.m-testimonial .testimonial-section .exercise strong{
    font-weight: 500;
    margin-left: 6px;
    margin-right: 6px;
}
.c-modal.m-testimonial .testimonial-section .exercise .c-track-icon {
                height: 32px;
                width: 32px;
                margin-left: 8px;
                margin-right: 8px;
            }
.c-modal.m-testimonial .testimonial-section .exercise .track-title{
    display: none;
}
.c-react-wrapper-common-introducer.c-modal.m-testimonial .testimonial-section .exercise .track-title {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-modal.m-testimonial .testimonial-section .exercise .track-title {
        display: flex;
    }
.c-introducer.c-modal.m-testimonial .testimonial-section .exercise .track-title {
        display: none;
    }
@media (min-width: 768px){

    .c-modal.m-testimonial .testimonial-section .exercise .track-title{
        display: block;
    }
}
.c-modal.m-testimonial .testimonial-section .exercise .track-title{
    font-weight: 600;
    color: var(--textColor2);
}
.c-modal.m-testimonial .testimonial-section time{
    display: none;
}
.c-react-wrapper-common-introducer.c-modal.m-testimonial .testimonial-section time {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.c-modal.m-testimonial .testimonial-section time {
        display: flex;
    }
.c-introducer.c-modal.m-testimonial .testimonial-section time {
        display: none;
    }
@media (min-width: 768px){

    .c-modal.m-testimonial .testimonial-section time{
        display: block;
    }
}
.c-modal.m-testimonial .testimonial-section time{
    font-size: 16px;
    line-height: 160%;
    color: var(--textColor6);
}
.c-modal.m-testimonial .c-share-panel{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 24px;
    padding-bottom: 32px;
    border-top-width: 1px;
    border-color: var(--borderColor6);
}
.m-cli-walkthrough.c-modal.--cover .--modal-container{
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 96px;
    padding-bottom: 48px;
}
.m-cli-walkthrough.c-modal.--cover .--modal-content {
        max-width: 1020px;
        min-height: auto;
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 80px;
        padding-bottom: 40px;
        position: relative;
        overflow: visible;
        --tw-bg-opacity: 1;
        background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        border-radius: 8px;
        --tw-shadow: var(--box-shadow-lgZ1);
        --tw-shadow-colored: var(--box-shadow-lgZ1);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .theme-accessibility-dark .m-cli-walkthrough.c-modal.--cover .--modal-content {
        box-shadow: 0 0 0 2px #000;
    }
.m-cli-walkthrough.c-modal.--cover .wizard-icon {
        height: 128px;
        width: 128px;
        position: absolute;
        top: -64px;
        margin-left: -64px;
        left: 50%;
    }
.c-dropdown-generic-menu{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-dropdown-generic-menu {
        box-shadow: 0 0 0 2px #000;
    }
.c-dropdown-generic-menu{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    z-index: 50;
}
.c-dropdown-generic-menu li button,
        .c-dropdown-generic-menu li a{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 500;
    color: var(--textColor6);
    font-size: 16px;
    line-height: 170%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    display: flex;
    align-items: center;
}
.c-dropdown-generic-menu li button .emoji, .c-dropdown-generic-menu li a .emoji {
                line-height: 16px;
            }
.c-dropdown-generic-menu li button .c-icon:first-child,
            .c-dropdown-generic-menu li button .emoji,
            .c-dropdown-generic-menu li a .c-icon:first-child,
            .c-dropdown-generic-menu li a .emoji {
                width: 16px;
                height: 16px;
                margin-right: 16px;
            }
.c-dropdown-generic-menu li button .c-icon.external-link, .c-dropdown-generic-menu li a .c-icon.external-link {
                width: 12px;
                height: 12px;
                margin-left: 16px;
            }
.c-dropdown-generic-menu li button .c-icon, .c-dropdown-generic-menu li a .c-icon {
        filter: var(--textColor6-filter);
    }
.c-dropdown-generic-menu li button:hover, .c-dropdown-generic-menu li a:hover{
    background-color: var(--backgroundColorD);
    color: var(--textColor5);
}
.c-share-dropdown{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark .c-share-dropdown {
        box-shadow: 0 0 0 2px #000;
    }
.c-share-dropdown{
    position: relative;
    z-index: 50;
    max-width: 644px;
}
#page-approaches-show header{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lgZ1);
    --tw-shadow-colored: var(--box-shadow-lgZ1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-approaches-show header {
        box-shadow: 0 0 0 2px #000;
    }
#page-approaches-show header .c-shapes:before {
            top: 0px;
            left: -100px;
        }
#page-approaches-show header .c-shapes:after {
            top: 0px;
            right: -100px;
        }
#page-approaches-show header .c-avatar,
        #page-approaches-show header .overflow-counter {
            height: 40px;
            width: 40px;
        }
#page-approaches-show article{
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-approaches-show article {
        box-shadow: 0 0 0 2px #000;
    }
#page-approaches-show article {

        margin-top: -35px;
    }
@media (min-width: 768px) {
#page-approaches-show article {
            margin-top: -128px
    }
        }
#page-approaches-show article .c-react-wrapper-common-share-button{
    margin-left: auto;
}
#page-approaches-show article .share-bar .main-graphic {
                height: 64px;
                width: 64px;
                margin-right: 24px;
            }
#page-approaches-show article .published-at{
    display: block;
}
@media (min-width: 768px){

    #page-approaches-show article .published-at{
        display: flex;
    }
}
#page-approaches-show article .published-at{
    margin-bottom: 24px;
    margin-top: 24px;
    padding-top: 16px;
    border-top-width: 1px;
    border-color: var(--borderColor6);
    font-size: 16px;
    line-height: 150%;
    color: var(--textColor6);
}
@media (min-width: 768px){

    #page-approaches-show article .published-at{
        align-self: flex-start;
    }

    #page-approaches-show article .published-at button{
        margin-left: 4px;
    }
}
#page-approaches-show .c-faces-with-overflow-counter{
    display: none;
}
.c-react-wrapper-common-introducer#page-approaches-show .c-faces-with-overflow-counter {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#page-approaches-show .c-faces-with-overflow-counter {
        display: flex;
    }
.c-introducer#page-approaches-show .c-faces-with-overflow-counter {
        display: none;
    }
@media (min-width: 768px){

    #page-approaches-show .c-faces-with-overflow-counter{
        display: flex;
    }
}
#page-approaches-index .dig-deeper-snippet .c-responsive-table-wrapper {
            all: unset;
        }
#page-approaches-index .dig-deeper-snippet .c-responsive-table-wrapper table{
    width: 100%;
    text-align: left;
}
#page-approaches-index .c-textual-content.--base.dig-deeper-introduction h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-approaches-index .c-textual-content.--base.dig-deeper-introduction h2{
        font-size: 31px;
    }
}
#page-approaches-index .c-textual-content.--base.dig-deeper-introduction h3{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-approaches-index .c-textual-content.--base.dig-deeper-introduction h3{
        font-size: 24px;
    }
}
#page-approaches-index .c-textual-content.--base.dig-deeper-introduction h4{
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--textColor1);
}
#page-articles-show header{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lgZ1);
    --tw-shadow-colored: var(--box-shadow-lgZ1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-articles-show header {
        box-shadow: 0 0 0 2px #000;
    }
#page-articles-show header .c-shapes:before {
            top: 0px;
            left: -100px;
        }
#page-articles-show header .c-shapes:after {
            top: 0px;
            right: -100px;
        }
#page-articles-show header .c-avatar {
            height: 40px;
            width: 40px;
        }
#page-articles-show header .c-react-wrapper-track-credits{
    height: 32px;
}
#page-articles-show article{
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-articles-show article {
        box-shadow: 0 0 0 2px #000;
    }
#page-articles-show article {

        margin-top: -35px;
    }
@media (min-width: 768px) {
#page-articles-show article {
            margin-top: -128px
    }
        }
#page-articles-show article .c-react-wrapper-common-share-button{
    margin-left: auto;
}
#page-articles-show article .share-bar .main-graphic {
                height: 64px;
                width: 64px;
                margin-right: 24px;
            }
#page-articles-show article .published-at{
    display: block;
}
@media (min-width: 768px){

    #page-articles-show article .published-at{
        display: flex;
    }
}
#page-articles-show article .published-at{
    margin-bottom: 24px;
    margin-top: 24px;
    padding-top: 16px;
    border-top-width: 1px;
    border-color: var(--borderColor6);
    font-size: 16px;
    line-height: 150%;
    color: var(--textColor6);
}
@media (min-width: 768px){

    #page-articles-show article .published-at{
        align-self: flex-start;
    }

    #page-articles-show article .published-at button{
        margin-left: 4px;
    }
}
#page-articles-show .c-faces-with-overflow-counter{
    display: none;
}
.c-react-wrapper-common-introducer#page-articles-show .c-faces-with-overflow-counter {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#page-articles-show .c-faces-with-overflow-counter {
        display: flex;
    }
.c-introducer#page-articles-show .c-faces-with-overflow-counter {
        display: none;
    }
@media (min-width: 768px){

    #page-articles-show .c-faces-with-overflow-counter{
        display: flex;
    }
}
#page-donate header{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    position: relative;
}
#page-donate header .lg-container:before {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAzIiBoZWlnaHQ9IjEwNyIgdmlld0JveD0iMCAwIDEwMyAxMDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDg3LjUwNzFMMTMuNTM4OCA3NC4wMDU1TDI3LjA3NzcgODcuNTA3MUwxMy41Mzg4IDEwMS4wMDlMMCA4Ny41MDcxWiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNjE1NzQgODUuMDUyM0wxOS4wNzc2IDc0LjYxOTNDMjAuNjA3IDczLjA5NCAyMy4wODY3IDczLjA5NCAyNC42MTYyIDc0LjYxOTNMMzUuMDc4IDg1LjA1MjNDMzYuNjA3NCA4Ni41Nzc1IDM2LjYwNzQgODkuMDUwNCAzNS4wNzggOTAuNTc1NkwyNC42MTYyIDEwMS4wMDlDMjMuMDg2NyAxMDIuNTM0IDIwLjYwNyAxMDIuNTM0IDE5LjA3NzYgMTAxLjAwOUw4LjYxNTc0IDkwLjU3NTZDNy4wODYzIDg5LjA1MDQgNy4wODYyOSA4Ni41Nzc1IDguNjE1NzQgODUuMDUyM1pNMTEuMDc3MyA4Ny41MDcxQzEwLjkwNzQgODcuNjc2NiAxMC45MDc0IDg3Ljk1MTMgMTEuMDc3MyA4OC4xMjA4TDIxLjUzOTIgOTguNTUzOEMyMS43MDkxIDk4LjcyMzMgMjEuOTg0NiA5OC43MjMzIDIyLjE1NDYgOTguNTUzOEwzMi42MTY0IDg4LjEyMDhDMzIuNzg2MyA4Ny45NTEzIDMyLjc4NjMgODcuNjc2NiAzMi42MTY0IDg3LjUwNzFMMjIuMTU0NiA3Ny4wNzQxQzIxLjk4NDYgNzYuOTA0NiAyMS43MDkxIDc2LjkwNDYgMjEuNTM5MiA3Ny4wNzQxTDExLjA3NzMgODcuNTA3MVoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTU5LjU4MzggMS4wOTA4OEM2MC4yNjM1IDAuNDEyOTk3IDYxLjM2NTYgMC40MTI5OTYgNjIuMDQ1NCAxLjA5MDg4TDcxLjI3NjQgMTAuMjk2NUM3MS45NTYyIDEwLjk3NDQgNzEuOTU2MiAxMi4wNzM0IDcxLjI3NjQgMTIuNzUxM1YxMi43NTEzQzcwLjU5NjYgMTMuNDI5MiA2OS40OTQ1IDEzLjQyOTIgNjguODE0OCAxMi43NTEzTDU5LjU4MzggMy41NDU3MUM1OC45MDQgMi44Njc4MyA1OC45MDQgMS43Njg3NiA1OS41ODM4IDEuMDkwODhWMS4wOTA4OFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTU1LjY2NzIgOC45MDIxQzU2LjM0NyA4LjIyNDIxIDU3LjQ0OTEgOC4yMjQyMSA1OC4xMjg4IDguOTAyMUw2Ny4zNTk4IDE4LjEwNzdDNjguMDM5NiAxOC43ODU2IDY4LjAzOTYgMTkuODg0NyA2Ny4zNTk4IDIwLjU2MjVWMjAuNTYyNUM2Ni42ODAxIDIxLjI0MDQgNjUuNTc4IDIxLjI0MDQgNjQuODk4MiAyMC41NjI1TDU1LjY2NzIgMTEuMzU2OUM1NC45ODc1IDEwLjY3OSA1NC45ODc1IDkuNTc5OTggNTUuNjY3MiA4LjkwMjFWOC45MDIxWiIgZmlsbD0iIzMzMzYzRiIvPgo8L3N2Zz4K");
            }
#page-donate header .lg-container:after {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIxIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgMTIxIDY0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNODQuNTYwMiA0Ny4zODY0TDk4LjAyNjEgMzMuODg0OEwxMTEuNDkyIDQ3LjM4NjRMOTguMDI2MSA2MC44ODc5TDg0LjU2MDIgNDcuMzg2NFoiIGZpbGw9IiM1OUQyQUUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05My4xMjk4IDQ0LjkzMTVMMTAzLjUzNSAzNC40OTg1QzEwNS4wNTYgMzIuOTczMiAxMDcuNTIzIDMyLjk3MzIgMTA5LjA0NCAzNC40OTg1TDExOS40NDkgNDQuOTMxNUMxMjAuOTcxIDQ2LjQ1NjcgMTIwLjk3MSA0OC45Mjk2IDExOS40NDkgNTAuNDU0OUwxMDkuMDQ0IDYwLjg4NzlDMTA3LjUyMyA2Mi40MTMxIDEwNS4wNTYgNjIuNDEzMSAxMDMuNTM1IDYwLjg4NzlMOTMuMTI5OCA1MC40NTQ5QzkxLjYwODYgNDguOTI5NiA5MS42MDg2IDQ2LjQ1NjcgOTMuMTI5OCA0NC45MzE1Wk05NS41NzgxIDQ3LjM4NjNDOTUuNDA5MSA0Ny41NTU4IDk1LjQwOTEgNDcuODMwNiA5NS41NzgxIDQ4TDEwNS45ODQgNTguNDMzQzEwNi4xNTMgNTguNjAyNSAxMDYuNDI3IDU4LjYwMjUgMTA2LjU5NiA1OC40MzNMMTE3LjAwMSA0OEMxMTcuMTcgNDcuODMwNiAxMTcuMTcgNDcuNTU1OCAxMTcuMDAxIDQ3LjM4NjNMMTA2LjU5NiAzNi45NTMzQzEwNi40MjcgMzYuNzgzOCAxMDYuMTUzIDM2Ljc4MzggMTA1Ljk4NCAzNi45NTMzTDk1LjU3ODEgNDcuMzg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTAgMEgxOS4wNDM2VjE5LjA5NDFIMFYwWiIgZmlsbD0iI0ZBRTU0RSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNzkwNiA0LjMzOTU0SDIyLjUwNjFDMjQuNjU3NCA0LjMzOTU0IDI2LjQwMTQgNi4wODgxNCAyNi40MDE0IDguMjQ1MTVWMjIuOTk5N0MyNi40MDE0IDI1LjE1NjcgMjQuNjU3NCAyNi45MDUzIDIyLjUwNjEgMjYuOTA1M0g3Ljc5MDZDNS42MzkzIDI2LjkwNTMgMy44OTUzMiAyNS4xNTY3IDMuODk1MzIgMjIuOTk5N1Y4LjI0NTE1QzMuODk1MzIgNi4wODgxNCA1LjYzOTMgNC4zMzk1NCA3Ljc5MDYgNC4zMzk1NFpNNy43OTA2IDcuODExMTlDNy41NTE1NyA3LjgxMTE5IDcuMzU3NzkgOC4wMDU0OCA3LjM1Nzc5IDguMjQ1MTVWMjIuOTk5N0M3LjM1Nzc5IDIzLjIzOTMgNy41NTE1NyAyMy40MzM2IDcuNzkwNiAyMy40MzM2SDIyLjUwNjFDMjIuNzQ1MSAyMy40MzM2IDIyLjkzODkgMjMuMjM5MyAyMi45Mzg5IDIyLjk5OTdWOC4yNDUxNUMyMi45Mzg5IDguMDA1NDggMjIuNzQ1MSA3LjgxMTE5IDIyLjUwNjEgNy44MTExOUg3Ljc5MDZaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPg==");
            }
#page-donate header .c-shapes:before {
            max-width: 7%;
        }
#page-donate header .c-icon {
            height: 160px;
            width: 160px;
            margin-bottom: 8px;
        }
#page-donate header h1{
    margin-bottom: 16px;
    text-align: center;
            max-width: 940px;
}
#page-donate header h1 strong{
    font-weight: 700;
}
#page-donate article{
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px){

    #page-donate article{
        display: flex;
        flex-direction: row-reverse;
            /*     grid-template: */
            /*         "video form" auto */
            /*         "info form" auto / auto auto; */

            /*     & section.video-section { */
            /*         grid-area: video; */
            /*     } */
            /*     & section.info-section { */
            /*         grid-area: info; */
            /*     } */
            /*     & section.form-section { */
            /*         grid-area: form; */
            /*         @apply pl-48; */
            /*     } */
            /* } */
    }
            #page-donate article section.form-section {
                /*grid-area: form;*/
                padding-left: 48px;
            }
}
#page-donate .c-progress{
    position: relative;
}
#page-donate .c-progress .target-icon {
            right: 0px;
        }
#page-donate .c-progress .current-icon{
    --tw-bg-opacity: 1;
    background-color: rgb(158 0 255 / var(--tw-bg-opacity, 1));
    position: absolute;
            height: 34px;
            width: 34px;
            box-shadow: 0px 4px 24px 0px #9c822666;
            display: grid;
            place-items: center;
            border-radius: 100%;
}
#page-donate .c-progress .target-icon{
    position: absolute;
            height: 48px;
            width: 48px;
            background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.5) 0%,
                    rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(0deg, #fff4e3, #fff4e3);
            box-shadow: 0px 4px 24px 0px #9c822666;
            display: grid;
            place-items: center;
            border-radius: 100%;
}
#page-donate .c-progress .target-icon .c-icon {
                height: 40px;
                width: 40px;
                padding-left: 7px;
            }
#page-donate .c-progress .actual-number {
            position: absolute;
            bottom: -65px;
            border-radius: 8px;
            --tw-bg-opacity: 1;
            background-color: rgb(158 0 255 / var(--tw-bg-opacity, 1));
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 12px;
            padding-right: 12px;
            font-size: 16px;
            font-weight: 500;
            line-height: 150%;
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }
#page-donate .c-progress .actual-number:before {
                content: "";
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDIyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4zMzY5IDBMMjEuOTAwNCA3LjVIMC43NzMzNDdMMTEuMzM2OSAwWiIgZmlsbD0iIzlFMDBGRiIvPgo8L3N2Zz4K");
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                top: -8px;
                right: 58px;
                height: 10px;
                width: 25px;
            }
#page-donate .c-progress .goal {
            position: absolute;
            bottom: -65px;
            right: -15px;
            border-radius: 8px;
            --tw-bg-opacity: 1;
            background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 12px;
            padding-right: 12px;
            font-size: 16px;
            font-weight: 500;
            line-height: 150%;
            color: var(--textColor1-no-dark);
        }
#page-donate .c-progress .goal:before {
                content: "";
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDIyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4zMzY5IDBMMjEuOTAwNCA3LjVIMC43NzMzNDdMMTEuMzM2OSAwWiIgZmlsbD0iI0ZGRDM4RiIvPgo8L3N2Zz4K");
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                top: -8px;
                right: 30px;
                height: 10px;
                width: 25px;
            }
#page-donate .steps{
    display: flex;
    align-items: center;
    align-self: flex-start;
    padding-bottom: 32px;
}
#page-donate .steps li{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    display: flex;
    align-items: center;
}
#page-donate .steps li + li{
    margin-left: 40px;
}
#page-donate .steps img {
            height: 16px;
            width: 16px;
            margin-left: 8px;
        }
#page-donate .summary{
    border-top-width: 1px;
    border-color: var(--borderColor6);
    padding-top: 32px;
    padding-bottom: 32px;
}
#page-donate .summary .item{
    margin-right: 48px;
}
#page-donate .summary .value{
    font-size: 32px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
    margin-bottom: 2px;
}
#page-donate .summary .metric{
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor5);
}
#page-donate .video {
        background: #d5d8e4;
    }
#page-donate .c-react-wrapper-donations-with-modal-form{
    z-index: 1;
        max-width: none;
}
@media (min-width: 1024px) {
#page-donate .c-react-wrapper-donations-with-modal-form {
            width: 570px;
            margin-top: -138px;
            min-height: 400px
    }
        }
#page-donate .c-donations-form{
    border-radius: 8px;
        box-shadow: 0px 4px 32px 0px rgba(var(--shadowColorMain), 0.5);
        max-width: none;
}
@media (min-width: 1024px){

    #page-donate .c-donations-form{
        margin-left: auto;
            max-width: 570px;
    }
}
#page-landing{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
}
#page-landing header .lg-container .lhs{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
#page-landing header .lg-container p {
                max-width: 680px;
            }
#page-landing header .lg-container p strong{
    font-weight: 600;
}
#page-landing header .lg-container .graphic{
    flex-grow: 1;
    place-items: center;
                max-width: 530px;
}
#page-landing header .lg-container .graphic > .c-icon {
                    height: 80px;
                    width: 100px;
                }
@media (min-width: 768px) {
                    #page-landing header .lg-container .graphic > .c-icon {
                        width: 448px;
                        height: 360px;
                    }
                }
#page-landing header .lg-container .btn-primary:hover, #page-landing header .lg-container .btn-secondary:hover {
                    transform: scale(1.03);
                    transition: transform 0.3s ease-out;
                }
#page-landing header .organisation {
            max-width: 690px;
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border-width: 2px;
        position: relative;
        display: flex;
        border-radius: 8px;
        --tw-bg-opacity: 1;
        background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1));
        --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
        --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

    .theme-accessibility-dark #page-landing header .organisation {
        box-shadow: 0 0 0 2px #000;
    }
#page-landing header .organisation:after{
    position: absolute;
    border-radius: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(96 79 205 / var(--tw-bg-opacity, 1));
    display: grid;
    place-items: center;
                font-size: 32px;
                width: 48px;
                height: 48px;
                content: "🦄";
                bottom: -24px;
                left: 50%;
                margin-left: -24px;
}
#page-landing header .organisation .c-icon {
                height: 21px;
                width: 116px;
            }
#page-landing header .organisation a {
                white-space: nowrap;
            }
@media (min-width: 768px) {
                #page-landing header .organisation > .c-icon{
        margin-right: 24px;
    }
                #page-landing header .organisation:after {
                    bottom: auto;
                    left: auto;
                    margin-left: auto;

                    right: -24px;
                    top: 50%;
                    margin-top: -24px;
                }
            }
#page-landing .feature .c-icon {
            height: 40px;
            width: 40px;
            margin-bottom: 8px;
        }
@media (min-width: 1024px){

    #page-landing .feature .c-icon{
        margin-bottom: 12px;
                height: 48px;
                width: 48px;
    }
}
#page-landing .feature h3{
    margin-bottom: 6px;
}
#page-landing section .lg-container{
    display: flex;
    flex-direction: column;
}
#page-landing .section-header{
    position: relative;
    display: flex;
    flex-direction: column;
}
#page-landing .section-header .c-icon {
            height: 64px;
            width: 64px;
            margin-bottom: 12px;
        }
@media (min-width: 768px){

    #page-landing .section-header .c-icon{
        margin-bottom: 16px;
                height: 80px;
                width: 80px;
    }
}
#page-landing .section-header h2 {
            max-width: 740px;
        }
#page-landing .section-header h2 strong{
    font-weight: 700;
}
#page-landing .section-header .c-divider{
    margin-top: 20px;
    margin-bottom: 16px;
            transform: scale(0.8);
}
@media (min-width: 768px){

    #page-landing .section-header .c-divider{
        margin-top: 24px;
        margin-bottom: 20px;
                transform: scale(1);
    }
#page-landing section.tracks-section .section-header .c-icon{
        margin-bottom: 20px;
    }
}
#page-landing section.tracks-section .lg-container:before,
            #page-landing section.tracks-section .lg-container:after {
                background-size: contain;
                content: "";
                position: absolute;
            }
@media screen and (max-width: 1024px) {
#page-landing section.tracks-section .lg-container:before,
            #page-landing section.tracks-section .lg-container:after {
                    transform: scale(0.8);
            }
                }
@media (max-width: 850px){

    #page-landing section.tracks-section .lg-container:before,
            #page-landing section.tracks-section .lg-container:after{
        display: none;
    }
}
#page-landing section.tracks-section .lg-container:before {
                left: 96px;
                top: 62px;
            }
@media (min-width: 1024px) {
#page-landing section.tracks-section .lg-container:before {
                    left: 5%
            }
                }
#page-landing section.tracks-section .lg-container:after {
                right: 32px;
                top: 79px;
            }
@media screen and (max-width: 1024px) {
#page-landing section.tracks-section .lg-container:after {
                    right: 5%
            }
                }
#page-landing section.tracks-section .tracks{
    margin-bottom: 80px;
}
#page-landing section.tracks-section .track{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;

            transition: transform 0.2s ease-out;
}
#page-landing section.tracks-section .track:hover {
                transform: scale(1.1);
            }
#page-landing section.tracks-section .track:hover .c-track-icon {
                    filter: drop-shadow(
                        0px 6px 3px rgba(var(--track-icon-color), 0.3)
                    );
                }
#page-landing section.tracks-section .track .c-track-icon {
                width: 80px;
                height: 80px;
                margin-bottom: 12px;
                flex-shrink: 0;
                filter: drop-shadow(
                    0px 5px 2px rgba(var(--track-icon-color), 0.2)
                );
            }
#page-landing section.tracks-section .track .title{
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 140%;
    color: var(--textColor1);
    font-family: Source Code Pro, monospace;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#page-landing section.tracks-section .track .students.count{
    font-family: Source Code Pro, monospace;
    font-size: 16px;
    font-weight: 500;
    line-height: 170%;
    --tw-text-opacity: 1;
    color: rgb(110 130 170 / var(--tw-text-opacity, 1));
}
#page-landing section.tracks-section .cta{
    display: grid;
    place-items: center;
}
#page-landing section.tracks-section .cta a {
                margin-top: -22px;
            }
#page-landing section.exercises-section {
        background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%);
    }
@media (min-width: 1024px) {
#page-landing section.exercises-section .main-graphic {
                margin-right: calc(0px - var(--container-padding-x))
        }
            }
#page-landing section.exercises-section .exercises .exercise{
    display: flex;
    margin-bottom: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 32px;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-base);
    --tw-shadow-colored: var(--box-shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-landing section.exercises-section .exercises .exercise {
        box-shadow: 0 0 0 2px #000;
    }
#page-landing section.exercises-section .exercises .exercise .c-icon.c-exercise-icon {
                    height: 48px;
                    width: 48px;
                    margin-right: 24px;
                }
#page-landing section.exercises-section .exercises .exercise .exercise-info{
    flex-grow: 1;
}
#page-landing section.exercises-section .exercises .exercise .exercise-info h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
#page-landing section.exercises-section .exercises .exercise .exercise-info p{
    line-height: 160%;
}
#page-landing section.exercises-section .exercises .exercise .exercise-info p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
#page-landing section.exercises-section .exercises .exercise .exercise-info p strong{
    font-weight: 500;
    color: var(--textColor2);
}
#page-landing section.exercises-section .exercises .exercise .exercise-info p{
    font-size: 16px;
    margin: 0px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
}
#page-landing section.exercises-section .exercises .exercise .track-icons{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 16px;
}
#page-landing section.exercises-section .exercises .exercise .track-icons .c-track-icon {
                        height: 40px;
                        width: 40px;
                        margin-left: -20px;
                        flex-shrink: 0;
                    }
#page-landing section.mentoring-section{
    position: relative;
        background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%);
}
@media (min-width: 768px) {
            #page-landing section.mentoring-section:before {
                content: "";
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzA4IiBoZWlnaHQ9IjE0OCIgdmlld0JveD0iMCAwIDMwOCAxNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMDIuNjIyIDMuNTQ5MDdDMzE0LjA0OCAzLjU0OTA3IDMxNC4wNDggMTQ1LjI5MiAyLjYyMDA5IDE0NS4yOTIiIHN0cm9rZT0iI0NCQzlEOSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtZGFzaGFycmF5PSI2IDkiLz4KPG1hc2sgaWQ9InBhdGgtMi1pbnNpZGUtMSIgZmlsbD0id2hpdGUiPgo8ZWxsaXBzZSBjeD0iMi42MjAxIiBjeT0iMTQ1LjI5MiIgcng9IjIuNjIwMSIgcnk9IjIuNzA4NDYiLz4KPC9tYXNrPgo8ZWxsaXBzZSBjeD0iMi42MjAxIiBjeT0iMTQ1LjI5MiIgcng9IjIuNjIwMSIgcnk9IjIuNzA4NDYiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yLjI0MDIgMTQ1LjI5MkMyLjI0MDIgMTQ1LjI0NCAyLjI2MTQ5IDE0NS4xNzggMi4zMTY1OSAxNDUuMTIxQzIuMzczMzkgMTQ1LjA2MiAyLjQ4MjczIDE0NSAyLjYyMDEgMTQ1VjE1MUM1LjgxNyAxNTEgOC4yNDAyIDE0OC4zNSA4LjI0MDIgMTQ1LjI5MkgyLjI0MDJaTTIuNjIwMSAxNDVDMi43NTc0NiAxNDUgMi44NjY4MSAxNDUuMDYyIDIuOTIzNjEgMTQ1LjEyMUMyLjk3ODcxIDE0NS4xNzggMyAxNDUuMjQ0IDMgMTQ1LjI5MkgtM0MtMyAxNDguMzUgLTAuNTc2ODA1IDE1MSAyLjYyMDEgMTUxVjE0NVpNMyAxNDUuMjkyQzMgMTQ1LjMzOSAyLjk3ODcxIDE0NS40MDUgMi45MjM2MSAxNDUuNDYyQzIuODY2ODEgMTQ1LjUyMSAyLjc1NzQ2IDE0NS41ODMgMi42MjAxIDE0NS41ODNWMTM5LjU4M0MtMC41NzY4MDUgMTM5LjU4MyAtMyAxNDIuMjMzIC0zIDE0NS4yOTJIM1pNMi42MjAxIDE0NS41ODNDMi40ODI3MyAxNDUuNTgzIDIuMzczMzkgMTQ1LjUyMSAyLjMxNjU5IDE0NS40NjJDMi4yNjE0OSAxNDUuNDA1IDIuMjQwMiAxNDUuMzM5IDIuMjQwMiAxNDUuMjkySDguMjQwMkM4LjI0MDIgMTQyLjIzMyA1LjgxNyAxMzkuNTgzIDIuNjIwMSAxMzkuNTgzVjE0NS41ODNaIiBmaWxsPSIjQ0JDOUQ5IiBtYXNrPSJ1cmwoI3BhdGgtMi1pbnNpZGUtMSkiLz4KPG1hc2sgaWQ9InBhdGgtNC1pbnNpZGUtMiIgZmlsbD0id2hpdGUiPgo8ZWxsaXBzZSBjeD0iMzAyLjYyMSIgY3k9IjMuNTQ5MDMiIHJ4PSIyLjYyMDEiIHJ5PSIyLjcwODQ2Ii8+CjwvbWFzaz4KPGVsbGlwc2UgY3g9IjMwMi42MjEiIGN5PSIzLjU0OTAzIiByeD0iMi42MjAxIiByeT0iMi43MDg0NiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMwMi4yNDIgMy41NDkwM0MzMDIuMjQyIDMuNTAxNDYgMzAyLjI2MyAzLjQzNTMgMzAyLjMxOCAzLjM3ODM0QzMwMi4zNzUgMy4zMTk2MyAzMDIuNDg0IDMuMjU3NDkgMzAyLjYyMiAzLjI1NzQ5VjkuMjU3NDlDMzA1LjgxOCA5LjI1NzQ5IDMwOC4yNDIgNi42MDcxNiAzMDguMjQyIDMuNTQ5MDNIMzAyLjI0MlpNMzAyLjYyMiAzLjI1NzQ5QzMwMi43NTkgMy4yNTc0OSAzMDIuODY4IDMuMzE5NjMgMzAyLjkyNSAzLjM3ODM0QzMwMi45OCAzLjQzNTMgMzAzLjAwMSAzLjUwMTQ2IDMwMy4wMDEgMy41NDkwM0gyOTcuMDAxQzI5Ny4wMDEgNi42MDcxNiAyOTkuNDI1IDkuMjU3NDkgMzAyLjYyMiA5LjI1NzQ5VjMuMjU3NDlaTTMwMy4wMDEgMy41NDkwM0MzMDMuMDAxIDMuNTk2NiAzMDIuOTggMy42NjI3NiAzMDIuOTI1IDMuNzE5NzJDMzAyLjg2OCAzLjc3ODQ0IDMwMi43NTkgMy44NDA1OCAzMDIuNjIyIDMuODQwNThWLTIuMTU5NDJDMjk5LjQyNSAtMi4xNTk0MiAyOTcuMDAxIDAuNDkwOTAzIDI5Ny4wMDEgMy41NDkwM0gzMDMuMDAxWk0zMDIuNjIyIDMuODQwNThDMzAyLjQ4NCAzLjg0MDU4IDMwMi4zNzUgMy43Nzg0NCAzMDIuMzE4IDMuNzE5NzJDMzAyLjI2MyAzLjY2Mjc2IDMwMi4yNDIgMy41OTY2IDMwMi4yNDIgMy41NDkwM0gzMDguMjQyQzMwOC4yNDIgMC40OTA5MDMgMzA1LjgxOCAtMi4xNTk0MiAzMDIuNjIyIC0yLjE1OTQyVjMuODQwNThaIiBmaWxsPSIjQ0JDOUQ5IiBtYXNrPSJ1cmwoI3BhdGgtNC1pbnNpZGUtMikiLz4KPC9zdmc+Cg==");
                position: absolute;
                top: 0;
                margin-left: -20px;
                left: 50%;
                width: 306px;
                height: 148px;
                background-repeat: no-repeat;
                background-size: contain;
            }
        }
#page-landing section.mentoring-section .lg-container{
    position: relative;
}
#page-landing section.mentoring-section .lg-container:before,
            #page-landing section.mentoring-section .lg-container:after {
                background-size: contain;
                content: "";
                position: absolute;
            }
@media screen and (max-width: 1024px) {
#page-landing section.mentoring-section .lg-container:before,
            #page-landing section.mentoring-section .lg-container:after {
                    transform: scale(0.8);
            }
                }
@media (max-width: 850px){

    #page-landing section.mentoring-section .lg-container:before,
            #page-landing section.mentoring-section .lg-container:after{
        display: none;
    }
}
#page-landing section.mentoring-section .lg-container:before {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTQiIGhlaWdodD0iMTU4IiB2aWV3Qm94PSIwIDAgOTQgMTU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNTUgNDEuOTA5Mkw2OC45MzMyIDI4LjA1MzZMODIuODY2MyA0MS45MDkyTDY4LjkzMzIgNTUuNzY0N0w1NSA0MS45MDkyWiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYzLjg2NjcgMzkuMzlMNzQuNjMzMyAyOC42ODM0Qzc2LjIwNzMgMjcuMTE4MiA3OC43NTkyIDI3LjExODIgODAuMzMzMiAyOC42ODM0TDkxLjA5OTcgMzkuMzlDOTIuNjczNyA0MC45NTUzIDkyLjY3MzcgNDMuNDkzIDkxLjA5OTcgNDUuMDU4Mkw4MC4zMzMyIDU1Ljc2NDhDNzguNzU5MiA1Ny4zMyA3Ni4yMDczIDU3LjMzIDc0LjYzMzMgNTUuNzY0OEw2My44NjY3IDQ1LjA1ODJDNjIuMjkyOCA0My40OTMgNjIuMjkyOCA0MC45NTUzIDYzLjg2NjcgMzkuMzlaTTY2LjQwMDEgNDEuOTA5MkM2Ni4yMjUyIDQyLjA4MzEgNjYuMjI1MiA0Mi4zNjUxIDY2LjQwMDEgNDIuNTM5TDc3LjE2NjYgNTMuMjQ1NkM3Ny4zNDE1IDUzLjQxOTUgNzcuNjI1IDUzLjQxOTUgNzcuNzk5OSA1My4yNDU2TDg4LjU2NjQgNDIuNTM5Qzg4Ljc0MTMgNDIuMzY1MSA4OC43NDEzIDQyLjA4MzEgODguNTY2NCA0MS45MDkyTDc3Ljc5OTkgMzEuMjAyNkM3Ny42MjUgMzEuMDI4NyA3Ny4zNDE1IDMxLjAyODcgNzcuMTY2NiAzMS4yMDI2TDY2LjQwMDEgNDEuOTA5MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTUuMjk3MzIgMTM1Ljk2QzUuOTk2ODcgMTM1LjI2NCA3LjEzMTA2IDEzNS4yNjQgNy44MzA2MSAxMzUuOTZMMTcuMzMwNSAxNDUuNDA3QzE4LjAzIDE0Ni4xMDIgMTguMDMgMTQ3LjIzIDE3LjMzMDUgMTQ3LjkyNkMxNi42MzA5IDE0OC42MjIgMTUuNDk2NyAxNDguNjIyIDE0Ljc5NzIgMTQ3LjkyNkw1LjI5NzMyIDEzOC40NzlDNC41OTc3NyAxMzcuNzgzIDQuNTk3NzcgMTM2LjY1NSA1LjI5NzMyIDEzNS45NloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTEuMjY2NjcgMTQzLjk3NkMxLjk2NjIzIDE0My4yOCAzLjEwMDQyIDE0My4yOCAzLjc5OTk4IDE0My45NzZMMTMuMjk5OSAxNTMuNDIzQzEzLjk5OTQgMTU0LjExOSAxMy45OTk0IDE1NS4yNDYgMTMuMjk5OSAxNTUuOTQyQzEyLjYwMDMgMTU2LjYzOCAxMS40NjYxIDE1Ni42MzggMTAuNzY2NiAxNTUuOTQyTDEuMjY2NjcgMTQ2LjQ5NUMwLjU2NzEyMSAxNDUuNzk5IDAuNTY3MTIgMTQ0LjY3MiAxLjI2NjY3IDE0My45NzZaIiBmaWxsPSIjMTMwQjQzIi8+Cjwvc3ZnPgo=");
                height: 156px;
                width: 94px;
                left: var(--container-padding-x);
                top: 0px;
            }
@media screen and (max-width: 1240px) {
#page-landing section.mentoring-section .lg-container:before {
                    display: none
            }
                }
#page-landing section.mentoring-section .lg-container:after {
                background-image: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTg2IiBoZWlnaHQ9IjE1MiIgdmlld0JveD0iMCAwIDE4NiAxNTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuNzAwNDM5SDE4Ljc0ODNWMTkuNTIxMUgwVjAuNzAwNDM5WiIgZmlsbD0iI0ZBRTU0RSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNjY5ODUgNC45Nzc3OEgyMi4xNTcyQzI0LjI3NTEgNC45Nzc3OCAyNS45OTIxIDYuNzAxMzQgMjUuOTkyMSA4LjgyNzQ3VjIzLjM3MDdDMjUuOTkyMSAyNS40OTY4IDI0LjI3NTEgMjcuMjIwNCAyMi4xNTcyIDI3LjIyMDRINy42Njk4NUM1LjU1MTkgMjcuMjIwNCAzLjgzNDk2IDI1LjQ5NjggMy44MzQ5NiAyMy4zNzA3VjguODI3NDdDMy44MzQ5NiA2LjcwMTM1IDUuNTUxOSA0Ljk3Nzc4IDcuNjY5ODUgNC45Nzc3OFpNNy42Njk4NSA4LjM5OTczQzcuNDM0NTIgOC4zOTk3MyA3LjI0Mzc1IDguNTkxMjMgNy4yNDM3NSA4LjgyNzQ3VjIzLjM3MDdDNy4yNDM3NSAyMy42MDcgNy40MzQ1MiAyMy43OTg1IDcuNjY5ODUgMjMuNzk4NUgyMi4xNTcyQzIyLjM5MjUgMjMuNzk4NSAyMi41ODMzIDIzLjYwNyAyMi41ODMzIDIzLjM3MDdWOC44Mjc0N0MyMi41ODMzIDguNTkxMjMgMjIuMzkyNSA4LjM5OTczIDIyLjE1NzIgOC4zOTk3M0g3LjY2OTg1WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMTcuMzQ5NiAxMDIuMzgyQzE3LjM0OTYgMTAzLjMxIDE2LjU5OTggMTA0LjA2MyAxNS42NzQ4IDEwNC4wNjNDMTQuNzQ5OCAxMDQuMDYzIDE0IDEwMy4zMSAxNCAxMDIuMzgyQzE0IDEwMS40NTMgMTQuNzQ5OCAxMDAuNzAxIDE1LjY3NDggMTAwLjcwMUMxNi41OTk4IDEwMC43MDEgMTcuMzQ5NiAxMDEuNDUzIDE3LjM0OTYgMTAyLjM4MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTA4LjQzNEMxNy4zNDk2IDEwOS4zNjMgMTYuNTk5OCAxMTAuMTE1IDE1LjY3NDggMTEwLjExNUMxNC43NDk4IDExMC4xMTUgMTQgMTA5LjM2MyAxNCAxMDguNDM0QzE0IDEwNy41MDYgMTQuNzQ5OCAxMDYuNzUzIDE1LjY3NDggMTA2Ljc1M0MxNi41OTk4IDEwNi43NTMgMTcuMzQ5NiAxMDcuNTA2IDE3LjM0OTYgMTA4LjQzNFoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTE0LjQ4N0MxNy4zNDk2IDExNS40MTUgMTYuNTk5OCAxMTYuMTY4IDE1LjY3NDggMTE2LjE2OEMxNC43NDk4IDExNi4xNjggMTQgMTE1LjQxNSAxNCAxMTQuNDg3QzE0IDExMy41NTggMTQuNzQ5OCAxMTIuODA1IDE1LjY3NDggMTEyLjgwNUMxNi41OTk4IDExMi44MDUgMTcuMzQ5NiAxMTMuNTU4IDE3LjM0OTYgMTE0LjQ4N1oiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTIzLjM3ODkgMTAyLjM4MkMyMy4zNzg5IDEwMy4zMSAyMi42MjkxIDEwNC4wNjMgMjEuNzA0MSAxMDQuMDYzQzIwLjc3OTEgMTA0LjA2MyAyMC4wMjkzIDEwMy4zMSAyMC4wMjkzIDEwMi4zODJDMjAuMDI5MyAxMDEuNDUzIDIwLjc3OTEgMTAwLjcgMjEuNzA0MSAxMDAuN0MyMi42MjkxIDEwMC43IDIzLjM3ODkgMTAxLjQ1MyAyMy4zNzg5IDEwMi4zODJaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDEwOC40MzRDMjMuMzc4OSAxMDkuMzYzIDIyLjYyOTEgMTEwLjExNSAyMS43MDQxIDExMC4xMTVDMjAuNzc5MSAxMTAuMTE1IDIwLjAyOTMgMTA5LjM2MyAyMC4wMjkzIDEwOC40MzRDMjAuMDI5MyAxMDcuNTA2IDIwLjc3OTEgMTA2Ljc1MyAyMS43MDQxIDEwNi43NTNDMjIuNjI5MSAxMDYuNzUzIDIzLjM3ODkgMTA3LjUwNiAyMy4zNzg5IDEwOC40MzRaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDExNC40ODdDMjMuMzc4OSAxMTUuNDE1IDIyLjYyOTEgMTE2LjE2OCAyMS43MDQxIDExNi4xNjhDMjAuNzc5MSAxMTYuMTY4IDIwLjAyOTMgMTE1LjQxNSAyMC4wMjkzIDExNC40ODdDMjAuMDI5MyAxMTMuNTU4IDIwLjc3OTEgMTEyLjgwNSAyMS43MDQxIDExMi44MDVDMjIuNjI5MSAxMTIuODA1IDIzLjM3ODkgMTEzLjU1OCAyMy4zNzg5IDExNC40ODdaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yOS40MDg0IDEwMi4zODJDMjkuNDA4NCAxMDMuMzEgMjguNjU4NiAxMDQuMDYzIDI3LjczMzYgMTA0LjA2M0MyNi44MDg3IDEwNC4wNjMgMjYuMDU4OCAxMDMuMzEgMjYuMDU4OCAxMDIuMzgyQzI2LjA1ODggMTAxLjQ1MyAyNi44MDg3IDEwMC43IDI3LjczMzYgMTAwLjdDMjguNjU4NiAxMDAuNyAyOS40MDg0IDEwMS40NTMgMjkuNDA4NCAxMDIuMzgyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4NCAxMDguNDM0QzI5LjQwODQgMTA5LjM2MyAyOC42NTg2IDExMC4xMTUgMjcuNzMzNiAxMTAuMTE1QzI2LjgwODcgMTEwLjExNSAyNi4wNTg4IDEwOS4zNjMgMjYuMDU4OCAxMDguNDM0QzI2LjA1ODggMTA3LjUwNiAyNi44MDg3IDEwNi43NTMgMjcuNzMzNiAxMDYuNzUzQzI4LjY1ODYgMTA2Ljc1MyAyOS40MDg0IDEwNy41MDYgMjkuNDA4NCAxMDguNDM0WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4NCAxMTQuNDg3QzI5LjQwODQgMTE1LjQxNSAyOC42NTg2IDExNi4xNjggMjcuNzMzNiAxMTYuMTY4QzI2LjgwODcgMTE2LjE2OCAyNi4wNTg4IDExNS40MTUgMjYuMDU4OCAxMTQuNDg3QzI2LjA1ODggMTEzLjU1OCAyNi44MDg3IDExMi44MDUgMjcuNzMzNiAxMTIuODA1QzI4LjY1ODYgMTEyLjgwNSAyOS40MDg0IDExMy41NTggMjkuNDA4NCAxMTQuNDg3WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMTcxLjIzMyAxMjguMDc1QzE3MS40OTIgMTI4LjA1OSAxNzEuNjY2IDEyOC4zMzggMTcxLjUzOCAxMjguNTY0TDE2Mi43NjEgMTQ0LjE1QzE2Mi42MzkgMTQ0LjM2NyAxNjIuMzMgMTQ0LjM3MyAxNjIuMTk5IDE0NC4xNjJMMTUzLjE3NCAxMjkuNjY0QzE1My4wNDIgMTI5LjQ1MiAxNTMuMTg0IDEyOS4xNzcgMTUzLjQzMSAxMjkuMTYyTDE3MS4yMzMgMTI4LjA3NVoiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNTkuNTgzIDEzNEMxNTkuMzQgMTM0LjAyMSAxNTkuMjA1IDEzNC4yOTMgMTU5LjMzNCAxMzQuNTAxTDE2Ny43NzYgMTQ4LjA2MkMxNjcuOTA1IDE0OC4yNyAxNjguMjA4IDE0OC4yNjggMTY4LjMzMyAxNDguMDU3TDE3Ny4zNzIgMTMyLjk1OUMxNzcuNTEgMTMyLjcyOSAxNzcuMzI5IDEzMi40NCAxNzcuMDYzIDEzMi40NjNMMTU5LjU4MyAxMzRaTTE3OS42MTUgMTM0LjMxM0wxNzAuNTc3IDE0OS40MTFDMTY5LjQ0NCAxNTEuMzAyIDE2Ni43MjEgMTUxLjMyNiAxNjUuNTU2IDE0OS40NTRMMTU3LjExNSAxMzUuODkzQzE1NS45NSAxMzQuMDIxIDE1Ny4xNjUgMTMxLjU3NSAxNTkuMzU1IDEzMS4zODNMMTc2LjgzNSAxMjkuODQ2QzE3OS4yMzEgMTI5LjYzNSAxODAuODU0IDEzMi4yNDMgMTc5LjYxNSAxMzQuMzEzWiIgZmlsbD0iIzEzMEI0MyIvPgo8L3N2Zz4K");
                height: 151px;
                width: 185px;
                right: var(--container-padding-x);
                top: 15px;
            }
@media screen and (max-width: 124444) {
#page-landing section.mentoring-section .lg-container:after {
                    display: none
            }
                }
#page-landing section.mentoring-section .top-graphic {
            width: 280px;
            height: 250px;

            @screen-md {
                width: 210px;
                height: 188px;
            }
        }
#page-landing section.mentoring-section .main-graphic {
            width: 100%;
        }
#page-landing section.mentoring-section .section-header {
            max-width: 680px;
        }
#page-landing section.mentoring-section h2 {
            max-width: 550px;
        }
#page-landing section.tracks-section .lg-container, #page-landing section.mentoring-section .lg-container{
    position: relative;
}
#page-landing section.tracks-section .lg-container:before, #page-landing section.mentoring-section .lg-container:before {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTQiIGhlaWdodD0iMTU4IiB2aWV3Qm94PSIwIDAgOTQgMTU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNTUgNDEuOTA5Mkw2OC45MzMyIDI4LjA1MzZMODIuODY2MyA0MS45MDkyTDY4LjkzMzIgNTUuNzY0N0w1NSA0MS45MDkyWiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYzLjg2NjcgMzkuMzlMNzQuNjMzMyAyOC42ODM0Qzc2LjIwNzMgMjcuMTE4MiA3OC43NTkyIDI3LjExODIgODAuMzMzMiAyOC42ODM0TDkxLjA5OTcgMzkuMzlDOTIuNjczNyA0MC45NTUzIDkyLjY3MzcgNDMuNDkzIDkxLjA5OTcgNDUuMDU4Mkw4MC4zMzMyIDU1Ljc2NDhDNzguNzU5MiA1Ny4zMyA3Ni4yMDczIDU3LjMzIDc0LjYzMzMgNTUuNzY0OEw2My44NjY3IDQ1LjA1ODJDNjIuMjkyOCA0My40OTMgNjIuMjkyOCA0MC45NTUzIDYzLjg2NjcgMzkuMzlaTTY2LjQwMDEgNDEuOTA5MkM2Ni4yMjUyIDQyLjA4MzEgNjYuMjI1MiA0Mi4zNjUxIDY2LjQwMDEgNDIuNTM5TDc3LjE2NjYgNTMuMjQ1NkM3Ny4zNDE1IDUzLjQxOTUgNzcuNjI1IDUzLjQxOTUgNzcuNzk5OSA1My4yNDU2TDg4LjU2NjQgNDIuNTM5Qzg4Ljc0MTMgNDIuMzY1MSA4OC43NDEzIDQyLjA4MzEgODguNTY2NCA0MS45MDkyTDc3Ljc5OTkgMzEuMjAyNkM3Ny42MjUgMzEuMDI4NyA3Ny4zNDE1IDMxLjAyODcgNzcuMTY2NiAzMS4yMDI2TDY2LjQwMDEgNDEuOTA5MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTUuMjk3MzIgMTM1Ljk2QzUuOTk2ODcgMTM1LjI2NCA3LjEzMTA2IDEzNS4yNjQgNy44MzA2MSAxMzUuOTZMMTcuMzMwNSAxNDUuNDA3QzE4LjAzIDE0Ni4xMDIgMTguMDMgMTQ3LjIzIDE3LjMzMDUgMTQ3LjkyNkMxNi42MzA5IDE0OC42MjIgMTUuNDk2NyAxNDguNjIyIDE0Ljc5NzIgMTQ3LjkyNkw1LjI5NzMyIDEzOC40NzlDNC41OTc3NyAxMzcuNzgzIDQuNTk3NzcgMTM2LjY1NSA1LjI5NzMyIDEzNS45NloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTEuMjY2NjcgMTQzLjk3NkMxLjk2NjIzIDE0My4yOCAzLjEwMDQyIDE0My4yOCAzLjc5OTk4IDE0My45NzZMMTMuMjk5OSAxNTMuNDIzQzEzLjk5OTQgMTU0LjExOSAxMy45OTk0IDE1NS4yNDYgMTMuMjk5OSAxNTUuOTQyQzEyLjYwMDMgMTU2LjYzOCAxMS40NjYxIDE1Ni42MzggMTAuNzY2NiAxNTUuOTQyTDEuMjY2NjcgMTQ2LjQ5NUMwLjU2NzEyMSAxNDUuNzk5IDAuNTY3MTIgMTQ0LjY3MiAxLjI2NjY3IDE0My45NzZaIiBmaWxsPSIjMTMwQjQzIi8+Cjwvc3ZnPgo=");
                height: 156px;
                width: 94px;
            }
#page-landing section.tracks-section .lg-container:after, #page-landing section.mentoring-section .lg-container:after {
                background-image: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTg2IiBoZWlnaHQ9IjE1MiIgdmlld0JveD0iMCAwIDE4NiAxNTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuNzAwNDM5SDE4Ljc0ODNWMTkuNTIxMUgwVjAuNzAwNDM5WiIgZmlsbD0iI0ZBRTU0RSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNjY5ODUgNC45Nzc3OEgyMi4xNTcyQzI0LjI3NTEgNC45Nzc3OCAyNS45OTIxIDYuNzAxMzQgMjUuOTkyMSA4LjgyNzQ3VjIzLjM3MDdDMjUuOTkyMSAyNS40OTY4IDI0LjI3NTEgMjcuMjIwNCAyMi4xNTcyIDI3LjIyMDRINy42Njk4NUM1LjU1MTkgMjcuMjIwNCAzLjgzNDk2IDI1LjQ5NjggMy44MzQ5NiAyMy4zNzA3VjguODI3NDdDMy44MzQ5NiA2LjcwMTM1IDUuNTUxOSA0Ljk3Nzc4IDcuNjY5ODUgNC45Nzc3OFpNNy42Njk4NSA4LjM5OTczQzcuNDM0NTIgOC4zOTk3MyA3LjI0Mzc1IDguNTkxMjMgNy4yNDM3NSA4LjgyNzQ3VjIzLjM3MDdDNy4yNDM3NSAyMy42MDcgNy40MzQ1MiAyMy43OTg1IDcuNjY5ODUgMjMuNzk4NUgyMi4xNTcyQzIyLjM5MjUgMjMuNzk4NSAyMi41ODMzIDIzLjYwNyAyMi41ODMzIDIzLjM3MDdWOC44Mjc0N0MyMi41ODMzIDguNTkxMjMgMjIuMzkyNSA4LjM5OTczIDIyLjE1NzIgOC4zOTk3M0g3LjY2OTg1WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMTcuMzQ5NiAxMDIuMzgyQzE3LjM0OTYgMTAzLjMxIDE2LjU5OTggMTA0LjA2MyAxNS42NzQ4IDEwNC4wNjNDMTQuNzQ5OCAxMDQuMDYzIDE0IDEwMy4zMSAxNCAxMDIuMzgyQzE0IDEwMS40NTMgMTQuNzQ5OCAxMDAuNzAxIDE1LjY3NDggMTAwLjcwMUMxNi41OTk4IDEwMC43MDEgMTcuMzQ5NiAxMDEuNDUzIDE3LjM0OTYgMTAyLjM4MloiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTA4LjQzNEMxNy4zNDk2IDEwOS4zNjMgMTYuNTk5OCAxMTAuMTE1IDE1LjY3NDggMTEwLjExNUMxNC43NDk4IDExMC4xMTUgMTQgMTA5LjM2MyAxNCAxMDguNDM0QzE0IDEwNy41MDYgMTQuNzQ5OCAxMDYuNzUzIDE1LjY3NDggMTA2Ljc1M0MxNi41OTk4IDEwNi43NTMgMTcuMzQ5NiAxMDcuNTA2IDE3LjM0OTYgMTA4LjQzNFoiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTE3LjM0OTYgMTE0LjQ4N0MxNy4zNDk2IDExNS40MTUgMTYuNTk5OCAxMTYuMTY4IDE1LjY3NDggMTE2LjE2OEMxNC43NDk4IDExNi4xNjggMTQgMTE1LjQxNSAxNCAxMTQuNDg3QzE0IDExMy41NTggMTQuNzQ5OCAxMTIuODA1IDE1LjY3NDggMTEyLjgwNUMxNi41OTk4IDExMi44MDUgMTcuMzQ5NiAxMTMuNTU4IDE3LjM0OTYgMTE0LjQ4N1oiIGZpbGw9IiMxMzBCNDMiLz4KPHBhdGggZD0iTTIzLjM3ODkgMTAyLjM4MkMyMy4zNzg5IDEwMy4zMSAyMi42MjkxIDEwNC4wNjMgMjEuNzA0MSAxMDQuMDYzQzIwLjc3OTEgMTA0LjA2MyAyMC4wMjkzIDEwMy4zMSAyMC4wMjkzIDEwMi4zODJDMjAuMDI5MyAxMDEuNDUzIDIwLjc3OTEgMTAwLjcgMjEuNzA0MSAxMDAuN0MyMi42MjkxIDEwMC43IDIzLjM3ODkgMTAxLjQ1MyAyMy4zNzg5IDEwMi4zODJaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDEwOC40MzRDMjMuMzc4OSAxMDkuMzYzIDIyLjYyOTEgMTEwLjExNSAyMS43MDQxIDExMC4xMTVDMjAuNzc5MSAxMTAuMTE1IDIwLjAyOTMgMTA5LjM2MyAyMC4wMjkzIDEwOC40MzRDMjAuMDI5MyAxMDcuNTA2IDIwLjc3OTEgMTA2Ljc1MyAyMS43MDQxIDEwNi43NTNDMjIuNjI5MSAxMDYuNzUzIDIzLjM3ODkgMTA3LjUwNiAyMy4zNzg5IDEwOC40MzRaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yMy4zNzg5IDExNC40ODdDMjMuMzc4OSAxMTUuNDE1IDIyLjYyOTEgMTE2LjE2OCAyMS43MDQxIDExNi4xNjhDMjAuNzc5MSAxMTYuMTY4IDIwLjAyOTMgMTE1LjQxNSAyMC4wMjkzIDExNC40ODdDMjAuMDI5MyAxMTMuNTU4IDIwLjc3OTEgMTEyLjgwNSAyMS43MDQxIDExMi44MDVDMjIuNjI5MSAxMTIuODA1IDIzLjM3ODkgMTEzLjU1OCAyMy4zNzg5IDExNC40ODdaIiBmaWxsPSIjMTMwQjQzIi8+CjxwYXRoIGQ9Ik0yOS40MDg0IDEwMi4zODJDMjkuNDA4NCAxMDMuMzEgMjguNjU4NiAxMDQuMDYzIDI3LjczMzYgMTA0LjA2M0MyNi44MDg3IDEwNC4wNjMgMjYuMDU4OCAxMDMuMzEgMjYuMDU4OCAxMDIuMzgyQzI2LjA1ODggMTAxLjQ1MyAyNi44MDg3IDEwMC43IDI3LjczMzYgMTAwLjdDMjguNjU4NiAxMDAuNyAyOS40MDg0IDEwMS40NTMgMjkuNDA4NCAxMDIuMzgyWiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4NCAxMDguNDM0QzI5LjQwODQgMTA5LjM2MyAyOC42NTg2IDExMC4xMTUgMjcuNzMzNiAxMTAuMTE1QzI2LjgwODcgMTEwLjExNSAyNi4wNTg4IDEwOS4zNjMgMjYuMDU4OCAxMDguNDM0QzI2LjA1ODggMTA3LjUwNiAyNi44MDg3IDEwNi43NTMgMjcuNzMzNiAxMDYuNzUzQzI4LjY1ODYgMTA2Ljc1MyAyOS40MDg0IDEwNy41MDYgMjkuNDA4NCAxMDguNDM0WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMjkuNDA4NCAxMTQuNDg3QzI5LjQwODQgMTE1LjQxNSAyOC42NTg2IDExNi4xNjggMjcuNzMzNiAxMTYuMTY4QzI2LjgwODcgMTE2LjE2OCAyNi4wNTg4IDExNS40MTUgMjYuMDU4OCAxMTQuNDg3QzI2LjA1ODggMTEzLjU1OCAyNi44MDg3IDExMi44MDUgMjcuNzMzNiAxMTIuODA1QzI4LjY1ODYgMTEyLjgwNSAyOS40MDg0IDExMy41NTggMjkuNDA4NCAxMTQuNDg3WiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBkPSJNMTcxLjIzMyAxMjguMDc1QzE3MS40OTIgMTI4LjA1OSAxNzEuNjY2IDEyOC4zMzggMTcxLjUzOCAxMjguNTY0TDE2Mi43NjEgMTQ0LjE1QzE2Mi42MzkgMTQ0LjM2NyAxNjIuMzMgMTQ0LjM3MyAxNjIuMTk5IDE0NC4xNjJMMTUzLjE3NCAxMjkuNjY0QzE1My4wNDIgMTI5LjQ1MiAxNTMuMTg0IDEyOS4xNzcgMTUzLjQzMSAxMjkuMTYyTDE3MS4yMzMgMTI4LjA3NVoiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNTkuNTgzIDEzNEMxNTkuMzQgMTM0LjAyMSAxNTkuMjA1IDEzNC4yOTMgMTU5LjMzNCAxMzQuNTAxTDE2Ny43NzYgMTQ4LjA2MkMxNjcuOTA1IDE0OC4yNyAxNjguMjA4IDE0OC4yNjggMTY4LjMzMyAxNDguMDU3TDE3Ny4zNzIgMTMyLjk1OUMxNzcuNTEgMTMyLjcyOSAxNzcuMzI5IDEzMi40NCAxNzcuMDYzIDEzMi40NjNMMTU5LjU4MyAxMzRaTTE3OS42MTUgMTM0LjMxM0wxNzAuNTc3IDE0OS40MTFDMTY5LjQ0NCAxNTEuMzAyIDE2Ni43MjEgMTUxLjMyNiAxNjUuNTU2IDE0OS40NTRMMTU3LjExNSAxMzUuODkzQzE1NS45NSAxMzQuMDIxIDE1Ny4xNjUgMTMxLjU3NSAxNTkuMzU1IDEzMS4zODNMMTc2LjgzNSAxMjkuODQ2QzE3OS4yMzEgMTI5LjYzNSAxODAuODU0IDEzMi4yNDMgMTc5LjYxNSAxMzQuMzEzWiIgZmlsbD0iIzEzMEI0MyIvPgo8L3N2Zz4K");
                height: 151px;
                width: 185px;
            }
body.namespace-auth.user-signed_out turbo-frame{
    display: flex;
    flex-grow: 1;
}
#page-auth {
    --lhs-width: 550px;
    background: linear-gradient(360deg, #5141bd 0%, #3e2ea5 100%),
        linear-gradient(0deg, #2f2768, #2f2768);
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
@media (min-width: 768px){

    #page-auth{
        flex-direction: row;
    }
}
#page-auth section.form-section{
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 48px;
    padding-right: 48px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        margin: 0 auto;
        width: 100%;
        flex-grow: 1;
}
@media (min-width: 768px) {
#page-auth section.form-section {
            max-width: 520px
    }
        }
@media (min-width: 1024px) {
#page-auth section.form-section {
            max-width: 38%
    }
        }
#page-auth section.form-section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page-auth section.form-section > .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 1024px) {
#page-auth section.form-section > .inner {
                width: 100%;
                max-width: var(--lhs-width)
        }
            }
#page-auth section.form-section .logo{
    margin-bottom: 12px;
    display: block;
}
#page-auth section.form-section .logo img {
                height: 32px;
                width: 177px;
            }
#page-auth section.form-section p.tagline{
    font-size: 16px;
    line-height: 150%;
    color: var(--textColor3);
    text-align: center;
    margin-bottom: 32px;
}
#page-auth section.form-section .intro{
    margin-top: 40px;
    margin-bottom: 16px;
    width: 100%;
}
#page-auth section.form-section .intro h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-auth section.form-section .intro h2{
        font-size: 24px;
    }
}
#page-auth section.form-section .intro h2{
    margin-bottom: 12px;
    text-align: left;
}
#page-auth section.form-section .intro p{
    text-align: left;
    font-size: 16px;
    line-height: 170%;
}
#page-auth section.form-section .intro p + p{
    margin-top: 12px;
}
#page-auth section.form-section .intro p a{
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
#page-auth section.form-section .intro p a:hover{
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(46 87 232 / var(--tw-border-opacity, 1));
}
#page-auth section.form-section .github-btn{
    margin-bottom: 24px;
    width: 100%;
}
#page-auth section.form-section .github-btn button{
    width: 100%;
}
#page-auth section.form-section .github-btn .c-icon {
                height: 16px;
                width: 16px;
                margin-right: 16px;
            }
#page-auth section.form-section .divider{
    position: relative;
    margin-bottom: 16px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 160%;
}
#page-auth section.form-section .divider span{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
                z-index: 2;
}
#page-auth section.form-section .divider:before{
    position: absolute;
    --tw-bg-opacity: 1;
    background-color: rgb(203 201 217 / var(--tw-bg-opacity, 1));

                content: "";
                z-index: 1;
                height: 1px;
                left: 0;
                right: 0;
                top: 50%;
}
#page-auth section.form-section .c-flash{
    margin-bottom: 16px;
    width: 100%;
}
#page-auth section.form-section form.new_user{
    margin-bottom: 24px;
    margin-top: 8px;
    width: 100%;
}
#page-auth section.form-section form.new_user .field{
    margin-bottom: 16px;
}
#page-auth section.form-section form.new_user .field:focus-within label{
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
#page-auth section.form-section form.new_user .field label,
                #page-auth section.form-section form.new_user .field .label{
    margin-bottom: 8px;
    display: block;
    font-family: Source Code Pro, monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 160%;
}
#page-auth section.form-section form.new_user .field input{
    width: 100%;
}
#page-auth section.form-section form.new_user .field .forgotten-password{
    margin-top: 12px;
    display: inline-block;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
#page-auth section.form-section form.new_user button{
    margin-top: 24px;
    width: 100%;
}
#page-auth section.form-section .devise-links{
    font-size: 16px;
    line-height: 160%;
}
#page-auth section.form-section .devise-links .link{
    text-align: center;
}
#page-auth section.form-section .devise-links .link + .link{
    margin-top: 8px;
}
#page-auth section.form-section .devise-links a{
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
#page-auth section.information-section{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
        max-height: 100vh;
        padding-top: 80px;
        padding-bottom: 80px;
        padding-left: 32px;
        padding-right: 32px;
        position: sticky;
        top: 0;
        display: none;
}
.c-react-wrapper-common-introducer#page-auth section.information-section {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#page-auth section.information-section {
        display: flex;
    }
.c-introducer#page-auth section.information-section {
        display: none;
    }
@media (min-width: 1024px){

    #page-auth section.information-section{
        display: flex;
    }
}
#page-auth section.information-section .content{
    margin-top: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page-auth section.information-section .content h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-auth section.information-section .content h2{
        font-size: 24px;
    }
}
#page-auth section.information-section .content h2{
    margin-bottom: 12px;
    color: var(--textColor9);
}
#page-auth section.information-section .content p{
    line-height: 160%;
}
#page-auth section.information-section .content p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
#page-auth section.information-section .content p strong{
    font-weight: 500;
    color: var(--textColor2);
}
#page-auth section.information-section .content p{
    font-size: 18px;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(225 235 255 / var(--tw-text-opacity, 1));
                max-width: 720px;
}
#page-auth section.information-section .content p strong{
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#page-auth section.information-section .content .icons{
    margin-top: 32px;
    display: flex;
    align-items: center;
}
#page-auth section.information-section .content .icons .c-track-icon {
                    height: 64px;
                    width: 64px;
                    margin-right: 16px;
                }
#page-auth section.information-section .content .icons .more{
    margin-left: 8px;
    font-weight: 600;
    color: var(--textColor9);
}
.theme-light,
.theme-accessibility-dark {
    --page-dashboard-background-image: linear-gradient(
        180deg,
        #e1ebff 70px,
        rgba(225, 235, 255, 0) 290px
    );
}
.theme-dark {
    --page-dashboard-background-image: rgba(40, 35, 57, 0);
}
#page-dashboard {
    background-image: var(--page-dashboard-background-image);
}
#page-dashboard article{
    padding-top: 32px;
}
#page-dashboard .rhs{
    min-width: 350px;
    max-width: 410px;
    margin-left: 60px;
    flex-shrink: 0;
    flex-grow: 0;
}
#page-dashboard .summary-bar{
    display: block;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    padding-top: 10px;
    padding-bottom: 10px;
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-dashboard .summary-bar {
        box-shadow: 0 0 0 2px #000;
    }
#page-dashboard .summary-bar .container{
    display: flex;
    align-items: center;
}
#page-dashboard .summary-bar .c-avatar {
            height: 48px;
            width: 48px;
            margin-right: 16px;
            flex-shrink: 0;
        }
#page-dashboard .summary-bar .info{
    flex-grow: 1;
}
#page-dashboard .summary-bar .info .handle{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
#page-dashboard .summary-bar .info .extra{
    line-height: 170%;
    color: var(--textColor6);
}
#page-dashboard .summary-bar .badges{
    display: flex;
    align-items: center;
}
#page-dashboard .summary-bar .badges .c-badge-medallion{
    margin-left: 8px;
                height: 48px;
                width: 48px;
}
#page-dashboard .summary-bar .badges .count{
    font-size: 15px;
    font-weight: 600;
    color: var(--textColor6);
    margin-left: 12px;
}
#page-dashboard .summary-bar .journey{
    margin-left: 32px;
    padding-left: 32px;
    border-left-width: 1px;
    border-color: var(--borderColor6);
}
#page-dashboard .summary-bar .journey .c-prominent-link{
    border-radius: 8px;
}
#page-dashboard .summary-bar .journey .c-prominent-link .graphic{
    margin-left: 0px;
    margin-right: 12px;
                    height: 24px;
                    width: 24px;
}
/* & header.dashboard-header { */
/*     @apply flex lg:flex-row flex-col gap-y-48 items-center pt-32 mb-48; */
#page-dashboard .header-intro{
    display: flex;
}
#page-dashboard .header-intro .c-icon {
            width: 64px;
            height: 64px;
            filter: var(--white-filter-when-dark);
            margin-right: 32px;
            flex-shrink: 0;
        }
#page-dashboard .header-intro .content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#page-dashboard .header-intro h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    #page-dashboard .header-intro h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    #page-dashboard .header-intro h1{
        font-size: 39px;
    }
}
#page-dashboard .header-intro h1{
    margin-bottom: 8px;
}
#page-dashboard .header-intro p.welcome{
    line-height: 160%;
}
#page-dashboard .header-intro p.welcome a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
#page-dashboard .header-intro p.welcome strong{
    font-weight: 500;
    color: var(--textColor2);
}
#page-dashboard .header-intro p.welcome{
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 16px;
    margin-right: 40px;
    max-width: 700px;
}
#page-dashboard .header-intro p.welcome strong{
    font-weight: 500;
    color: var(--textColor2);
}
#page-dashboard .header-intro p.cta{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 225 / var(--tw-bg-opacity, 1));
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor2);
}
#page-dashboard .header-intro p.cta strong{
    font-weight: 600;
}
#page-dashboard .header-intro p.cta a{
    color: var(--c-prominent-link-color);
}
/* & .decorations { */
/*     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU2IiBoZWlnaHQ9IjcyIiB2aWV3Qm94PSIwIDAgMTU2IDcyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzQuMTY2IDUzLjk0NEwyMS45NDQyIDQxLjcyMjFMOS43MjIzMyA1My45NDRMMjEuOTQ0MiA2Ni4xNjU4TDM0LjE2NiA1My45NDRaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjYuMzg4NyA1MS43MjE5TDE2Ljk0NDYgNDIuMjc3N0MxNS41NjM5IDQwLjg5NzEgMTMuMzI1NCA0MC44OTcxIDExLjk0NDggNDIuMjc3N0wyLjUwMDYgNTEuNzIxOUMxLjExOTkzIDUzLjEwMjUgMS4xMTk5MyA1NS4zNDExIDIuNTAwNiA1Ni43MjE3TDExLjk0NDggNjYuMTY1OUMxMy4zMjU0IDY3LjU0NjUgMTUuNTYzOSA2Ny41NDY1IDE2Ljk0NDYgNjYuMTY1OUwyNi4zODg3IDU2LjcyMTdDMjcuNzY5NCA1NS4zNDExIDI3Ljc2OTQgNTMuMTAyNSAyNi4zODg3IDUxLjcyMTlaTTI0LjE2NjYgNTMuOTQ0QzI0LjMyIDU0LjA5NzQgMjQuMzIgNTQuMzQ2MiAyNC4xNjY2IDU0LjQ5OTZMMTQuNzIyNCA2My45NDM3QzE0LjU2OSA2NC4wOTcxIDE0LjMyMDMgNjQuMDk3MSAxNC4xNjY5IDYzLjk0MzdMNC43MjI3NSA1NC40OTk2QzQuNTY5MzUgNTQuMzQ2MiA0LjU2OTM1IDU0LjA5NzQgNC43MjI3NSA1My45NDRMMTQuMTY2OSA0NC40OTk5QzE0LjMyMDMgNDQuMzQ2NSAxNC41NjkgNDQuMzQ2NSAxNC43MjI0IDQ0LjQ5OTlMMjQuMTY2NiA1My45NDRaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0xNTUuMTY2IDBIMTM3Ljg4MlYxNy4yODQzSDE1NS4xNjZWMFoiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDguMDk1IDMuOTI4MjJIMTM0LjczOUMxMzIuNzg3IDMuOTI4MjIgMTMxLjIwNCA1LjUxMTA4IDEzMS4yMDQgNy40NjM2NVYyMC44MTk3QzEzMS4yMDQgMjIuNzcyMyAxMzIuNzg3IDI0LjM1NTEgMTM0LjczOSAyNC4zNTUxSDE0OC4wOTVDMTUwLjA0OCAyNC4zNTUxIDE1MS42MzEgMjIuNzcyMyAxNTEuNjMxIDIwLjgxOTdWNy40NjM2NUMxNTEuNjMxIDUuNTExMDkgMTUwLjA0OCAzLjkyODIyIDE0OC4wOTUgMy45MjgyMlpNMTQ4LjA5NSA3LjA3MDgyQzE0OC4zMTIgNy4wNzA4MiAxNDguNDg4IDcuMjQ2NyAxNDguNDg4IDcuNDYzNjVWMjAuODE5N0MxNDguNDg4IDIxLjAzNjYgMTQ4LjMxMiAyMS4yMTI1IDE0OC4wOTUgMjEuMjEyNUgxMzQuNzM5QzEzNC41MjIgMjEuMjEyNSAxMzQuMzQ3IDIxLjAzNjYgMTM0LjM0NyAyMC44MTk3VjcuNDYzNjVDMTM0LjM0NyA3LjI0NjcgMTM0LjUyMiA3LjA3MDgyIDEzNC43MzkgNy4wNzA4MkgxNDguMDk1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjAuMDc4IDE2LjU0NEM2MC4wNzggMTcuMzk2NyA2MC43NjkzIDE4LjA4OCA2MS42MjIgMTguMDg4QzYyLjQ3NDcgMTguMDg4IDYzLjE2NiAxNy4zOTY3IDYzLjE2NiAxNi41NDRDNjMuMTY2IDE1LjY5MTMgNjIuNDc0NyAxNSA2MS42MjIgMTVDNjAuNzY5MyAxNSA2MC4wNzggMTUuNjkxMyA2MC4wNzggMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjAuMDc4IDIyLjEwMjVDNjAuMDc4IDIyLjk1NTIgNjAuNzY5MyAyMy42NDY1IDYxLjYyMiAyMy42NDY1QzYyLjQ3NDcgMjMuNjQ2NSA2My4xNjYgMjIuOTU1MiA2My4xNjYgMjIuMTAyNUM2My4xNjYgMjEuMjQ5OCA2Mi40NzQ3IDIwLjU1ODUgNjEuNjIyIDIwLjU1ODVDNjAuNzY5MyAyMC41NTg1IDYwLjA3OCAyMS4yNDk4IDYwLjA3OCAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjAuMDc4IDI3LjY2MDhDNjAuMDc4IDI4LjUxMzYgNjAuNzY5MyAyOS4yMDQ4IDYxLjYyMiAyOS4yMDQ4QzYyLjQ3NDcgMjkuMjA0OCA2My4xNjYgMjguNTEzNiA2My4xNjYgMjcuNjYwOEM2My4xNjYgMjYuODA4MSA2Mi40NzQ3IDI2LjExNjggNjEuNjIyIDI2LjExNjhDNjAuNzY5MyAyNi4xMTY4IDYwLjA3OCAyNi44MDgxIDYwLjA3OCAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNTQuNTE5NCAxNi41NDRDNTQuNTE5NCAxNy4zOTY3IDU1LjIxMDcgMTguMDg4IDU2LjA2MzQgMTguMDg4QzU2LjkxNjEgMTguMDg4IDU3LjYwNzQgMTcuMzk2NyA1Ny42MDc0IDE2LjU0NEM1Ny42MDc0IDE1LjY5MTMgNTYuOTE2MSAxNSA1Ni4wNjM0IDE1QzU1LjIxMDcgMTUgNTQuNTE5NCAxNS42OTEzIDU0LjUxOTQgMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNTQuNTE5NCAyMi4xMDI1QzU0LjUxOTQgMjIuOTU1MiA1NS4yMTA3IDIzLjY0NjUgNTYuMDYzNCAyMy42NDY1QzU2LjkxNjEgMjMuNjQ2NSA1Ny42MDc0IDIyLjk1NTIgNTcuNjA3NCAyMi4xMDI1QzU3LjYwNzQgMjEuMjQ5OCA1Ni45MTYxIDIwLjU1ODUgNTYuMDYzNCAyMC41NTg1QzU1LjIxMDcgMjAuNTU4NSA1NC41MTk0IDIxLjI0OTggNTQuNTE5NCAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNTQuNTE5NCAyNy42NjA4QzU0LjUxOTQgMjguNTEzNiA1NS4yMTA3IDI5LjIwNDggNTYuMDYzNCAyOS4yMDQ4QzU2LjkxNjEgMjkuMjA0OCA1Ny42MDc0IDI4LjUxMzYgNTcuNjA3NCAyNy42NjA4QzU3LjYwNzQgMjYuODA4MSA1Ni45MTYxIDI2LjExNjggNTYuMDYzNCAyNi4xMTY4QzU1LjIxMDcgMjYuMTE2OCA1NC41MTk0IDI2LjgwODEgNTQuNTE5NCAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDguOTYwOCAxNi41NDRDNDguOTYwOCAxNy4zOTY3IDQ5LjY1MjEgMTguMDg4IDUwLjUwNDggMTguMDg4QzUxLjM1NzUgMTguMDg4IDUyLjA0ODggMTcuMzk2NyA1Mi4wNDg4IDE2LjU0NEM1Mi4wNDg4IDE1LjY5MTMgNTEuMzU3NSAxNSA1MC41MDQ4IDE1QzQ5LjY1MjEgMTUgNDguOTYwOCAxNS42OTEzIDQ4Ljk2MDggMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDguOTYwOCAyMi4xMDI1QzQ4Ljk2MDggMjIuOTU1MiA0OS42NTIxIDIzLjY0NjUgNTAuNTA0OCAyMy42NDY1QzUxLjM1NzUgMjMuNjQ2NSA1Mi4wNDg4IDIyLjk1NTIgNTIuMDQ4OCAyMi4xMDI1QzUyLjA0ODggMjEuMjQ5OCA1MS4zNTc1IDIwLjU1ODUgNTAuNTA0OCAyMC41NTg1QzQ5LjY1MjEgMjAuNTU4NSA0OC45NjA4IDIxLjI0OTggNDguOTYwOCAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDguOTYwOCAyNy42NjA4QzQ4Ljk2MDggMjguNTEzNiA0OS42NTIxIDI5LjIwNDggNTAuNTA0OCAyOS4yMDQ4QzUxLjM1NzUgMjkuMjA0OCA1Mi4wNDg4IDI4LjUxMzYgNTIuMDQ4OCAyNy42NjA4QzUyLjA0ODggMjYuODA4MSA1MS4zNTc1IDI2LjExNjggNTAuNTA0OCAyNi4xMTY4QzQ5LjY1MjEgMjYuMTE2OCA0OC45NjA4IDI2LjgwODEgNDguOTYwOCAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8L3N2Zz4K"); */
/*     height: 71px; */
/*     width: 155px; */
/*     background-size: 155px; */
/*     @apply flex-shrink-0 mr-20; */
/*     @apply self-start; */
/*     @apply xl:block hidden; */
/* } */
/* .social-icons-container { */
/*     @apply flex; */
/* } */
/* } */
#page-dashboard article{
    margin-bottom: 48px;
    display: flex;
    flex-direction: row;
}
#page-dashboard section.actions-section{
    margin-bottom: 40px;
    display: flex;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));

        box-shadow: 0px 4px 42px rgba(var(--shadowColorMain), 0.15);
}
#page-dashboard section.actions-section .action {
            width: 25%;
            --tw-bg-opacity: 1;
            background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 24px;
            text-align: center;
            font-size: 16px;
            line-height: 150%;
            border-right-width: 1px;
            border-color: var(--borderColor7);
        }
#page-dashboard section.actions-section .action:last-child{
    border-right-width: 0;
}
#page-dashboard section.actions-section .action:hover {
                box-shadow: var(--box-shadow-lgZ1);
                border-radius: 5px;
                z-index: 2;
                border-color: transparent;
            }
#page-dashboard section.actions-section .action .c-icon {
                height: 96px;
                width: 96px;
                margin-bottom: 12px;
            }
#page-dashboard section.posts-section{
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
}
#page-dashboard section.posts-section h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-dashboard section.posts-section h2{
        font-size: 24px;
    }
}
#page-dashboard section.posts-section h2{
    margin-bottom: 24px;
}
#page-dashboard section.posts-section .posts{
    margin-bottom: 24px;
    display: grid;
    gap: 16px;
            grid-template-columns: repeat(3, 1fr);
}
#page-dashboard section.posts-section .c-prominent-link{
    align-self: center;
}
#page-dashboard section.activity-section h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-dashboard section.activity-section h2{
        font-size: 24px;
    }
}
#page-dashboard section.activity-section h2{
    margin-bottom: 24px;
}
#page-dashboard section.activity-section .c-site-update {
            max-width: 800px;
        }
#page-dashboard section.tracks-section{
    margin-bottom: 48px;
}
#page-dashboard section.tracks-section .c-heading-with-count{
    margin-bottom: 16px;
}
#page-dashboard section.tracks-section .tracks{
    margin-bottom: 24px;
}
#page-dashboard section.tracks-section .tracks .track{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
#page-dashboard section.tracks-section .tracks .track .c-track-icon{
    margin-right: 16px;
    flex-shrink: 0;
                    height: 54px;
                    width: 54px;
}
#page-dashboard section.tracks-section .tracks .track .info{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
#page-dashboard section.tracks-section .tracks .track .info .title{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
#page-dashboard section.tracks-section .tracks .track .info progress{
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 8px;
                        height: 8px;
}
#page-dashboard section.tracks-section .tracks .track .info progress::-webkit-progress-bar {
                            background: var(--backgroundColorI);
                        }
#page-dashboard section.tracks-section .tracks .track .info progress[value]::-webkit-progress-value {
                                background: var(--fillColorProgress);
                            }
#page-dashboard section.tracks-section .tracks .track .info .counts{
    font-weight: 500;
    color: var(--textColor6);
}
#page-dashboard section.tracks-section .tracks .track .action-icon{
    margin-left: 60px;
    color: var(--textColor6);
                    height: 16px;
                    width: 16px;
        filter: var(--textColor6-filter);
}
#page-dashboard section.mentoring-section{
    margin-bottom: 48px;
}
#page-dashboard section.mentoring-section .track-icons{
    position: relative;
    display: flex;
}
#page-dashboard section.mentoring-section .track-icons .c-track-icon {
                height: 32px;
                width: 32px;
                margin-left: -12px;
            }
#page-dashboard section.mentoring-section .discussions{
    margin-bottom: 24px;
    flex-direction: column;
}
#page-dashboard section.mentoring-section .discussions .c-mentor-discussion-summary{
    margin-bottom: 20px;
}
#page-dashboard section.mentoring-section .discussions .c-mentor-discussion-summary .c-icon {
        filter: var(--textColor6-filter);
    }
#page-onboarding .faux-site-header{
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        height: 64px;
        display: flex;
        align-items: center;
}
#page-onboarding .faux-site-header .c-icon {
            height: 24px;
            width: 132px;
        }
#page-onboarding{
    padding-bottom: 80px;
}
#page-onboarding header{
    display: flex;
    align-items: center;
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    margin-bottom: 32px;
    padding-top: 32px;
    padding-bottom: 40px;
}
#page-onboarding header .content{
    flex-grow: 1;
}
#page-onboarding header .content h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    #page-onboarding header .content h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    #page-onboarding header .content h1{
        font-size: 39px;
    }
}
#page-onboarding header .content h1{
    margin-bottom: 12px;
}
#page-onboarding header .content p{
    font-size: 18px;
    line-height: 170%;
    color: var(--textColor3);
                max-width: 740px;
}
#page-onboarding header .content p strong{
    font-weight: 500;
}
#page-onboarding header .c-icon {
            height: 160px;
            width: 160px;
            margin-left: 64px;
            flex-shrink: 0;
        }
#page-onboarding section{
    margin-bottom: 32px;
}
#page-onboarding section h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #page-onboarding section h2{
        font-size: 31px;
    }
}
#page-onboarding section h2{
    margin-bottom: 16px;
}
#page-onboarding section .box{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-onboarding section .box {
        box-shadow: 0 0 0 2px #000;
    }
#page-onboarding section .box{
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 24px;
    padding-bottom: 32px;
}
#page-onboarding section p,
        #page-onboarding section li{
    font-size: 16px;
    line-height: 150%;
            max-width: 740px;
}
#page-onboarding section p strong, #page-onboarding section li strong{
    font-weight: 500;
}
#page-onboarding section a{
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--c-prominent-link-color);
}
#page-onboarding section a .c-icon {
                height: 12px;
                width: 12px;
                margin-left: 6px;
        filter: var(--c-prominent-link-icon-filter);
            }
#page-onboarding section ul {
            margin-left: 14px;
        }
#page-onboarding section ul li {
                margin-left: 6px;
                list-style-type: disc;
            }
#page-onboarding section ul li + li{
    margin-top: 12px;
}
#page-onboarding section p + ul{
    margin-top: 12px;
}
#page-onboarding section p + p{
    margin-top: 16px;
}
#page-onboarding section ul + p{
    margin-top: 24px;
}
#page-onboarding section label.c-checkbox-wrapper{
    border-radius: 8px;
    background-color: var(--backgroundColorD);
    margin-top: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}
#page-mentoring-external-request{
    position: relative;
}
#page-mentoring-external-request .lg-container{
    padding-top: 40px;
}
#page-mentoring-external-request .c-avatar {
        height: 96px;
        width: 96px;
        margin-bottom: 24px;
    }
#mentor-external-page .top-section{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #mentor-external-page .top-section {
        box-shadow: 0 0 0 2px #000;
    }
#mentor-external-page .top-section{
    text-align: center;
}
#mentor-external-page .top-section .lg-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 48px;
}
#mentor-external-page .top-section .lg-container:before {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTY5IDM0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzNC4yNDkgNDguMzIzNkMxMzQuMjQ5IDU3Ljc1MzcgMTQxLjg5MyA2NS4zOTg0IDE1MS4zMjQgNjUuMzk4NEMxNjAuNzU0IDY1LjM5ODQgMTY4LjM5OCA1Ny43NTM3IDE2OC4zOTggNDguMzIzNkMxNjguMzk4IDM4Ljg5MzQgMTYwLjc1NCAzMS4yNDg4IDE1MS4zMjQgMzEuMjQ4OEMxNDEuODkzIDMxLjI0ODggMTM0LjI0OSAzOC44OTM0IDEzNC4yNDkgNDguMzIzNloiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDMuODUzIDU0LjAxNTJDMTM2LjU4NCA1NC4wMTUyIDEzMC42OTIgNDguMTIyNSAxMzAuNjkyIDQwLjg1MzRDMTMwLjY5MiAzMy41ODQzIDEzNi41ODQgMjcuNjkxNiAxNDMuODUzIDI3LjY5MTZDMTUxLjEyMiAyNy42OTE2IDE1Ny4wMTUgMzMuNTg0MyAxNTcuMDE1IDQwLjg1MzRDMTU3LjAxNSA0OC4xMjI1IDE1MS4xMjIgNTQuMDE1MiAxNDMuODUzIDU0LjAxNTJaTTE0My44NTMgNTkuNzA2OEMxMzMuNDQxIDU5LjcwNjggMTI1IDUxLjI2NTkgMTI1IDQwLjg1MzRDMTI1IDMwLjQ0MSAxMzMuNDQxIDIyIDE0My44NTMgMjJDMTU0LjI2NiAyMiAxNjIuNzA3IDMwLjQ0MSAxNjIuNzA3IDQwLjg1MzRDMTYyLjcwNyA1MS4yNjU5IDE1NC4yNjYgNTkuNzA2OCAxNDMuODUzIDU5LjcwNjhaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0wIDMxMC42ODdMMjIuMTM1MSAyODguNTUyTDQ0LjI3MDIgMzEwLjY4N0wyMi4xMzUxIDMzMi44MjJMMCAzMTAuNjg3WiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjA4NjEgMzA2LjY2M0wzMS4xOTA1IDI4OS41NThDMzMuNjkxMSAyODcuMDU4IDM3Ljc0NTIgMjg3LjA1OCA0MC4yNDU4IDI4OS41NThMNTcuMzUwMiAzMDYuNjYzQzU5Ljg1MDcgMzA5LjE2MyA1OS44NTA3IDMxMy4yMTggNTcuMzUwMiAzMTUuNzE4TDQwLjI0NTggMzMyLjgyMkMzNy43NDUzIDMzNS4zMjMgMzMuNjkxMSAzMzUuMzIzIDMxLjE5MDUgMzMyLjgyMkwxNC4wODYxIDMxNS43MThDMTEuNTg1NiAzMTMuMjE4IDExLjU4NTYgMzA5LjE2MyAxNC4wODYxIDMwNi42NjNaTTE4LjExMDcgMzEwLjY4N0MxNy44MzI4IDMxMC45NjUgMTcuODMyOCAzMTEuNDE2IDE4LjExMDcgMzExLjY5NEwzNS4yMTUxIDMyOC43OThDMzUuNDkyOSAzMjkuMDc2IDM1Ljk0MzQgMzI5LjA3NiAzNi4yMjEyIDMyOC43OThMNTMuMzI1NiAzMTEuNjkzQzUzLjYwMzUgMzExLjQxNiA1My42MDM1IDMxMC45NjUgNTMuMzI1NiAzMTAuNjg3TDM2LjIyMTIgMjkzLjU4M0MzNS45NDM0IDI5My4zMDUgMzUuNDkyOSAyOTMuMzA1IDM1LjIxNTEgMjkzLjU4M0wxOC4xMTA3IDMxMC42ODdaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ1IDMuNTU3MjVDMjIuMTE0NSA1LjUyMTg2IDIwLjUyMTkgNy4xMTQ1IDE4LjU1NzIgNy4xMTQ1QzE2LjU5MjYgNy4xMTQ1IDE1IDUuNTIxODYgMTUgMy41NTcyNUMxNSAxLjU5MjYzIDE2LjU5MjYgMCAxOC41NTcyIDBDMjAuNTIxOSAwIDIyLjExNDUgMS41OTI2MyAyMi4xMTQ1IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ3IDE2LjM2MzRDMjIuMTE0NyAxOC4zMjggMjAuNTIyIDE5LjkyMDYgMTguNTU3NCAxOS45MjA2QzE2LjU5MjggMTkuOTIwNiAxNS4wMDAyIDE4LjMyOCAxNS4wMDAyIDE2LjM2MzRDMTUuMDAwMiAxNC4zOTg4IDE2LjU5MjggMTIuODA2MiAxOC41NTc0IDEyLjgwNjJDMjAuNTIyIDEyLjgwNjIgMjIuMTE0NyAxNC4zOTg4IDIyLjExNDcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTIyLjExNDcgMjkuMTY5NkMyMi4xMTQ3IDMxLjEzNDIgMjAuNTIyIDMyLjcyNjggMTguNTU3NCAzMi43MjY4QzE2LjU5MjggMzIuNzI2OCAxNS4wMDAyIDMxLjEzNDIgMTUuMDAwMiAyOS4xNjk2QzE1LjAwMDIgMjcuMjA0OSAxNi41OTI4IDI1LjYxMjMgMTguNTU3NCAyNS42MTIzQzIwLjUyMiAyNS42MTIzIDIyLjExNDcgMjcuMjA0OSAyMi4xMTQ3IDI5LjE2OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDMuNTU3MjVDMzQuOTIwNyA1LjUyMTg2IDMzLjMyODEgNy4xMTQ1IDMxLjM2MzUgNy4xMTQ1QzI5LjM5ODggNy4xMTQ1IDI3LjgwNjIgNS41MjE4NiAyNy44MDYyIDMuNTU3MjVDMjcuODA2MiAxLjU5MjYzIDI5LjM5ODggMCAzMS4zNjM1IDBDMzMuMzI4MSAwIDM0LjkyMDcgMS41OTI2MyAzNC45MjA3IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDE2LjM2MzRDMzQuOTIwNyAxOC4zMjggMzMuMzI4MSAxOS45MjA2IDMxLjM2MzUgMTkuOTIwNkMyOS4zOTg4IDE5LjkyMDYgMjcuODA2MiAxOC4zMjggMjcuODA2MiAxNi4zNjM0QzI3LjgwNjIgMTQuMzk4OCAyOS4zOTg4IDEyLjgwNjIgMzEuMzYzNSAxMi44MDYyQzMzLjMyODEgMTIuODA2MiAzNC45MjA3IDE0LjM5ODggMzQuOTIwNyAxNi4zNjM0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMzQuOTIwNyAyOS4xNjk2QzM0LjkyMDcgMzEuMTM0MiAzMy4zMjgxIDMyLjcyNjggMzEuMzYzNSAzMi43MjY4QzI5LjM5ODggMzIuNzI2OCAyNy44MDYyIDMxLjEzNDIgMjcuODA2MiAyOS4xNjk2QzI3LjgwNjIgMjcuMjA0OSAyOS4zOTg4IDI1LjYxMjMgMzEuMzYzNSAyNS42MTIzQzMzLjMyODEgMjUuNjEyMyAzNC45MjA3IDI3LjIwNDkgMzQuOTIwNyAyOS4xNjk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAzLjU1NzI1QzQ3LjcyNjcgNS41MjE4NiA0Ni4xMzQxIDcuMTE0NSA0NC4xNjk1IDcuMTE0NUM0Mi4yMDQ5IDcuMTE0NSA0MC42MTIyIDUuNTIxODYgNDAuNjEyMiAzLjU1NzI1QzQwLjYxMjIgMS41OTI2MyA0Mi4yMDQ5IDAgNDQuMTY5NSAwQzQ2LjEzNDEgMCA0Ny43MjY3IDEuNTkyNjMgNDcuNzI2NyAzLjU1NzI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAxNi4zNjM0QzQ3LjcyNjcgMTguMzI4IDQ2LjEzNDEgMTkuOTIwNiA0NC4xNjk1IDE5LjkyMDZDNDIuMjA0OSAxOS45MjA2IDQwLjYxMjIgMTguMzI4IDQwLjYxMjIgMTYuMzYzNEM0MC42MTIyIDE0LjM5ODggNDIuMjA0OSAxMi44MDYyIDQ0LjE2OTUgMTIuODA2MkM0Ni4xMzQxIDEyLjgwNjIgNDcuNzI2NyAxNC4zOTg4IDQ3LjcyNjcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTQ3LjcyNjcgMjkuMTY5NkM0Ny43MjY3IDMxLjEzNDIgNDYuMTM0MSAzMi43MjY4IDQ0LjE2OTUgMzIuNzI2OEM0Mi4yMDQ5IDMyLjcyNjggNDAuNjEyMiAzMS4xMzQyIDQwLjYxMjIgMjkuMTY5NkM0MC42MTIyIDI3LjIwNDkgNDIuMjA0OSAyNS42MTIzIDQ0LjE2OTUgMjUuNjEyM0M0Ni4xMzQxIDI1LjYxMjMgNDcuNzI2NyAyNy4yMDQ5IDQ3LjcyNjcgMjkuMTY5NloiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTk3LjQxNTMgMTY5LjAxMkM5OC41MjY2IDE2Ny45MDEgMTAwLjMyOCAxNjcuOTAxIDEwMS40NCAxNjkuMDEyTDExNi41MzIgMTg0LjEwNEMxMTcuNjQzIDE4NS4yMTYgMTE3LjY0MyAxODcuMDE4IDExNi41MzIgMTg4LjEyOUMxMTUuNDIxIDE4OS4yNCAxMTMuNjE5IDE4OS4yNCAxMTIuNTA3IDE4OC4xMjlMOTcuNDE1MyAxNzMuMDM3Qzk2LjMwMzkgMTcxLjkyNSA5Ni4zMDM5IDE3MC4xMjQgOTcuNDE1MyAxNjkuMDEyWiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTEuMDEyMyAxODEuODE4QzkyLjEyMzYgMTgwLjcwNyA5My45MjU1IDE4MC43MDcgOTUuMDM2OCAxODEuODE4TDExMC4xMjkgMTk2LjkxMUMxMTEuMjQgMTk4LjAyMiAxMTEuMjQgMTk5LjgyNCAxMTAuMTI5IDIwMC45MzVDMTA5LjAxOCAyMDIuMDQ2IDEwNy4yMTYgMjAyLjA0NiAxMDYuMTA0IDIwMC45MzVMOTEuMDEyMyAxODUuODQzQzg5LjkwMDkgMTg0LjczMiA4OS45MDA5IDE4Mi45MyA5MS4wMTIzIDE4MS44MThaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPg==");
            }
#mentor-external-page .top-section .lg-container:after {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEzIDMyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzOSA3Ny42ODc1TDE2MS4xMzUgNTUuNTUyNEwxODMuMjcgNzcuNjg3NUwxNjEuMTM1IDk5LjgyMjZMMTM5IDc3LjY4NzVaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUzLjA4NiA3My42NjNMMTcwLjE5MSA1Ni41NTg2QzE3Mi42OTEgNTQuMDU4MSAxNzYuNzQ1IDU0LjA1ODEgMTc5LjI0NiA1Ni41NTg2TDE5Ni4zNSA3My42NjNDMTk4Ljg1MSA3Ni4xNjM2IDE5OC44NTEgODAuMjE3OCAxOTYuMzUgODIuNzE4M0wxNzkuMjQ2IDk5LjgyMjdDMTc2Ljc0NSAxMDIuMzIzIDE3Mi42OTEgMTAyLjMyMyAxNzAuMTkxIDk5LjgyMjdMMTUzLjA4NiA4Mi43MTgzQzE1MC41ODYgODAuMjE3OCAxNTAuNTg2IDc2LjE2MzYgMTUzLjA4NiA3My42NjNaTTE1Ny4xMTEgNzcuNjg3NkMxNTYuODMzIDc3Ljk2NTQgMTU2LjgzMyA3OC40MTU5IDE1Ny4xMTEgNzguNjkzN0wxNzQuMjE1IDk1Ljc5ODJDMTc0LjQ5MyA5Ni4wNzYgMTc0Ljk0MyA5Ni4wNzYgMTc1LjIyMSA5NS43OTgyTDE5Mi4zMjYgNzguNjkzN0MxOTIuNjA0IDc4LjQxNTkgMTkyLjYwNCA3Ny45NjU0IDE5Mi4zMjYgNzcuNjg3NkwxNzUuMjIxIDYwLjU4MzJDMTc0Ljk0MyA2MC4zMDU0IDE3NC40OTMgNjAuMzA1NCAxNzQuMjE1IDYwLjU4MzJMMTU3LjExMSA3Ny42ODc2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMCAwSDMxLjMwMzhWMzEuMzAzOEgwVjBaIiBmaWxsPSIjRkFFNTRFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODA2NCA3LjExNDVIMzYuOTk1N0M0MC41MzIgNy4xMTQ1IDQzLjM5ODggOS45ODEyNCA0My4zOTg4IDEzLjUxNzVWMzcuNzA2OEM0My4zOTg4IDQxLjI0MzEgNDAuNTMyIDQ0LjEwOTkgMzYuOTk1NyA0NC4xMDk5SDEyLjgwNjRDOS4yNzAxMyA0NC4xMDk5IDYuNDAzMzggNDEuMjQzMSA2LjQwMzM4IDM3LjcwNjhWMTMuNTE3NUM2LjQwMzM4IDkuOTgxMjUgOS4yNzAxMiA3LjExNDUgMTIuODA2NCA3LjExNDVaTTEyLjgwNjQgMTIuODA2MUMxMi40MTM1IDEyLjgwNjEgMTIuMDk1IDEzLjEyNDYgMTIuMDk1IDEzLjUxNzVWMzcuNzA2OEMxMi4wOTUgMzguMDk5OCAxMi40MTM1IDM4LjQxODMgMTIuODA2NCAzOC40MTgzSDM2Ljk5NTdDMzcuMzg4NiAzOC40MTgzIDM3LjcwNzIgMzguMDk5OCAzNy43MDcyIDM3LjcwNjhWMTMuNTE3NUMzNy43MDcyIDEzLjEyNDYgMzcuMzg4NiAxMi44MDYxIDM2Ljk5NTcgMTIuODA2MUgxMi44MDY0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyOSAxODAuNzk2QzY3LjU5MjkgMTgyLjM0MSA2Ni4zNDA5IDE4My41OTMgNjQuNzk2NSAxODMuNTkzQzYzLjI1MjEgMTgzLjU5MyA2Mi4wMDAxIDE4Mi4zNDEgNjIuMDAwMSAxODAuNzk2QzYyLjAwMDEgMTc5LjI1MiA2My4yNTIxIDE3OCA2NC43OTY1IDE3OEM2Ni4zNDA5IDE3OCA2Ny41OTI5IDE3OS4yNTIgNjcuNTkyOSAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyNyAxOTAuODYzQzY3LjU5MjcgMTkyLjQwOCA2Ni4zNDA3IDE5My42NiA2NC43OTYzIDE5My42NkM2My4yNTIgMTkzLjY2IDYyIDE5Mi40MDggNjIgMTkwLjg2M0M2MiAxODkuMzE5IDYzLjI1MiAxODguMDY3IDY0Ljc5NjMgMTg4LjA2N0M2Ni4zNDA3IDE4OC4wNjcgNjcuNTkyNyAxODkuMzE5IDY3LjU5MjcgMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTY3LjU5MjcgMjAwLjkzQzY3LjU5MjcgMjAyLjQ3NSA2Ni4zNDA3IDIwMy43MjcgNjQuNzk2MyAyMDMuNzI3QzYzLjI1MiAyMDMuNzI3IDYyIDIwMi40NzUgNjIgMjAwLjkzQzYyIDE5OS4zODYgNjMuMjUyIDE5OC4xMzQgNjQuNzk2MyAxOTguMTM0QzY2LjM0MDcgMTk4LjEzNCA2Ny41OTI3IDE5OS4zODYgNjcuNTkyNyAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE4MC43OTZDNzcuNjU5OCAxODIuMzQxIDc2LjQwNzkgMTgzLjU5MyA3NC44NjM1IDE4My41OTNDNzMuMzE5MSAxODMuNTkzIDcyLjA2NzEgMTgyLjM0MSA3Mi4wNjcxIDE4MC43OTZDNzIuMDY3MSAxNzkuMjUyIDczLjMxOTEgMTc4IDc0Ljg2MzUgMTc4Qzc2LjQwNzkgMTc4IDc3LjY1OTggMTc5LjI1MiA3Ny42NTk4IDE4MC43OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE5MC44NjNDNzcuNjU5OCAxOTIuNDA4IDc2LjQwNzkgMTkzLjY2IDc0Ljg2MzUgMTkzLjY2QzczLjMxOTEgMTkzLjY2IDcyLjA2NzEgMTkyLjQwOCA3Mi4wNjcxIDE5MC44NjNDNzIuMDY3MSAxODkuMzE5IDczLjMxOTEgMTg4LjA2NyA3NC44NjM1IDE4OC4wNjdDNzYuNDA3OSAxODguMDY3IDc3LjY1OTggMTg5LjMxOSA3Ny42NTk4IDE5MC44NjNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDIwMC45M0M3Ny42NTk4IDIwMi40NzUgNzYuNDA3OSAyMDMuNzI3IDc0Ljg2MzUgMjAzLjcyN0M3My4zMTkxIDIwMy43MjcgNzIuMDY3MSAyMDIuNDc1IDcyLjA2NzEgMjAwLjkzQzcyLjA2NzEgMTk5LjM4NiA3My4zMTkxIDE5OC4xMzQgNzQuODYzNSAxOTguMTM0Qzc2LjQwNzkgMTk4LjEzNCA3Ny42NTk4IDE5OS4zODYgNzcuNjU5OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik04Ny43MjY4IDE4MC43OTZDODcuNzI2OCAxODIuMzQxIDg2LjQ3NDggMTgzLjU5MyA4NC45MzA0IDE4My41OTNDODMuMzg2IDE4My41OTMgODIuMTM0MSAxODIuMzQxIDgyLjEzNDEgMTgwLjc5NkM4Mi4xMzQxIDE3OS4yNTIgODMuMzg2IDE3OCA4NC45MzA0IDE3OEM4Ni40NzQ4IDE3OCA4Ny43MjY4IDE3OS4yNTIgODcuNzI2OCAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNODcuNzI2OCAxOTAuODYzQzg3LjcyNjggMTkyLjQwOCA4Ni40NzQ4IDE5My42NiA4NC45MzA0IDE5My42NkM4My4zODYgMTkzLjY2IDgyLjEzNDEgMTkyLjQwOCA4Mi4xMzQxIDE5MC44NjNDODIuMTM0MSAxODkuMzE5IDgzLjM4NiAxODguMDY3IDg0LjkzMDQgMTg4LjA2N0M4Ni40NzQ4IDE4OC4wNjcgODcuNzI2OCAxODkuMzE5IDg3LjcyNjggMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTg3LjcyNjggMjAwLjkzQzg3LjcyNjggMjAyLjQ3NSA4Ni40NzQ4IDIwMy43MjcgODQuOTMwNCAyMDMuNzI3QzgzLjM4NiAyMDMuNzI3IDgyLjEzNDEgMjAyLjQ3NSA4Mi4xMzQxIDIwMC45M0M4Mi4xMzQxIDE5OS4zODYgODMuMzg2IDE5OC4xMzQgODQuOTMwNCAxOTguMTM0Qzg2LjQ3NDggMTk4LjEzNCA4Ny43MjY4IDE5OS4zODYgODcuNzI2OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0xODguNDQ0IDI4Ni4yNjZDMTg4Ljg3NiAyODYuMjM5IDE4OS4xNjUgMjg2LjcwMyAxODguOTUyIDI4Ny4wOEwxNzQuMjk3IDMxMy4wMDNDMTc0LjA5MyAzMTMuMzYzIDE3My41NzggMzEzLjM3NCAxNzMuMzU5IDMxMy4wMjNMMTU4LjI5IDI4OC45MDhDMTU4LjA3IDI4OC41NTcgMTU4LjMwNiAyODguMDk5IDE1OC43MiAyODguMDc0TDE4OC40NDQgMjg2LjI2NloiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjguOTkxIDI5Ni4xMkMxNjguNTg1IDI5Ni4xNTYgMTY4LjM1OSAyOTYuNjA4IDE2OC41NzUgMjk2Ljk1NEwxODIuNjcgMzE5LjUxQzE4Mi44ODYgMzE5Ljg1NiAxODMuMzkxIDMxOS44NTIgMTgzLjYwMiAzMTkuNTAyTDE5OC42OTMgMjk0LjM5QzE5OC45MjMgMjk0LjAwNyAxOTguNjIyIDI5My41MjYgMTk4LjE3NyAyOTMuNTY1TDE2OC45OTEgMjk2LjEyWk0yMDIuNDM4IDI5Ni42NDFMMTg3LjM0NyAzMjEuNzUzQzE4NS40NTYgMzI0Ljg5OSAxODAuOTEgMzI0LjkzOSAxNzguOTY1IDMyMS44MjZMMTY0Ljg3IDI5OS4yNjlDMTYyLjkyNSAyOTYuMTU3IDE2NC45NTMgMjkyLjA4OCAxNjguNjEgMjkxLjc2OEwxOTcuNzk2IDI4OS4yMTJDMjAxLjc5OCAyODguODYxIDIwNC41MDggMjkzLjE5OCAyMDIuNDM4IDI5Ni42NDFaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPgoK");
            }
#mentor-external-page .top-section .c-icon:not(.c-primary-reputation .c-icon, .info-link .c-icon) {
            width: 160px;
            height: 160px;
            margin-bottom: 20px;
        }
#mentor-external-page .top-section h1{
    font-size: 32px;
    font-weight: 700;
    color: var(--textColor1);
        line-height: 1.25;
}
@media (min-width: 768px){

    #mentor-external-page .top-section h1{
        font-size: 34px;
    }
}
@media (min-width: 1024px){

    #mentor-external-page .top-section h1{
        font-size: 39px;
    }
}
#mentor-external-page .top-section h1{
    margin-bottom: 16px;
}
#mentor-external-page .top-section p {
            max-width: 770px;
            font-size: 18px;
            line-height: 170%;
        }
#mentor-external-page .top-section p a{
    font-weight: 500;
    color: var(--colorPurpleToBrightPurple);
}
#mentor-external-page .top-section p.unsure {
            max-width: none;
            margin-top: 24px;
            margin-bottom: 40px;
            border-radius: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 24px;
            padding-right: 24px;
            background-color: var(--backgroundColorI);
            font-weight: 500;
        }
#mentor-external-page .top-section p.unsure a{
    color: var(--c-prominent-link-color);
}
#mentor-external-page .top-section .c-react-wrapper-mentoring-try-mentoring-button{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#mentor-external-page .video-section{
    padding-top: 64px;
    padding-bottom: 64px;
    margin-left: auto;
    margin-right: auto;
        max-width: 1024px;
}
#mentor-external-page .reasons-section h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #mentor-external-page .reasons-section h2{
        font-size: 31px;
    }
}
#mentor-external-page .reasons-section h2{
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#mentor-external-page .reasons-section h2:after {
                content: "";
                width: 50px;
                margin-top: 24px;
                border-bottom-width: 3px;
                border-color: var(--colorPurpleToBrightPurple);
            }
#mentor-external-page .reasons-section .reasons{
    display: grid;
    justify-items: center;
    -moz-column-gap: 48px;
         column-gap: 48px;
}
#mentor-external-page .reasons-section .reasons .reason{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
                max-width: 500px;
}
#mentor-external-page .reasons-section .reasons .reason .c-icon {
                    height: 64px;
                    width: 64px;
                    margin-bottom: 24px;
        filter: var(--textColor1-filter);
                }
#mentor-external-page .reasons-section .reasons .reason h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
#mentor-external-page .reasons-section .reasons .reason p{
    font-size: 16px;
    line-height: 160%;
}
#mentor-external-page .reasons-section .reasons .reason{
    margin-bottom: 16px;
}
@media (min-width: 768px){

    #mentor-external-page .reasons-section .reasons .reason{
        margin-bottom: 0px;
    }
}
#page-community .theme-light,
    #page-community .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }
#page-community .theme-dark {
        --headerBackground: #191525;
    }
#page-community header{
    position: absolute;
        width: 100%;
        height: 501px;
        left: 0px;
        top: 64px;

        background: var(--headerBackground);
}
#page-community .message-count{
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor6);
    display: flex;
    align-items: center;
}
#page-community .message-count img {
        filter: var(--textColor6-filter);
        margin-right: 12px;
    }
#page-community .explore-link{
    display: flex;
    place-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(46 87 232 / var(--tw-text-opacity, 1));
}
#page-community .explore-link:after {
            content: url("/assets/icons/arrow-right-0f5e363467e0c55fe280b4864639a9c677afa0d2.svg");
            height: 16px;
            width: 16px;
            margin-left: 12px;
        filter: invert(25%) sepia(55%) saturate(3687%) hue-rotate(223deg)
            brightness(94%) contrast(93%);
        }
#page-community .contributors-list{
    margin-bottom: 80px;
}
#page-community .contributors-list > .container .highlights{
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
}
#page-community .contributors-list > .container .highlights .highlight{
    border-width: 1px;
    border-color: var(--borderColor6);
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-community .contributors-list > .container .highlights .highlight {
        box-shadow: 0 0 0 2px #000;
    }
#page-community .contributors-list > .container .highlights .highlight{
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    align-items: center;
}
#page-community .contributors-list > .container .highlights .highlight .emoji{
    font-size: 24px;
    line-height: 140%;
    margin-right: 24px;
}
#page-community .contributors-list > .container .highlights .highlight .c-avatar {
                        height: 48px;
                        width: 48px;
                        margin-right: 20px;
                    }
#page-community .contributors-list > .container .highlights .highlight .new{
    border-radius: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 120%;
    margin-right: 24px;
}
#page-community .contributors-list > .container .highlights .highlight .info .title{
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor6);
}
#page-community .contributors-list > .container .highlights .highlight .info .handle{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
}
#page-community .contributors-list > .container .c-search-bar{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
#page-community .contributors-list > .container .c-search-bar .tabs{
    display: flex;
    align-items: center;
}
#page-community .contributors-list > .container .c-search-bar .tabs .c-tab-2{
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    color: var(--textColor6);
    border-bottom-width: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#page-community .contributors-list > .container .c-search-bar .tabs .c-tab-2.selected{
    font-weight: 600;
    color: var(--textColor2);
}
#page-community .contributors-list > .container .c-single-select{
    margin-left: 12px;
}
#page-community .contributors-list .contributors{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #page-community .contributors-list .contributors {
        box-shadow: 0 0 0 2px #000;
    }
#page-community .contributors-list .contributors .contributor{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom-width: 1px;
    border-color: var(--borderColor7);
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px){

    #page-community .contributors-list .contributors .contributor{
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 8px;
        padding-bottom: 8px;
        flex-direction: row;
        align-items: center;
    }
}
#page-community .contributors-list .contributors .contributor .rank{
    flex-shrink: 0;
    text-align: center;
    font-weight: 500;
    line-height: 150%;
    color: var(--textColor6);
    margin-right: 24px;
                    width: 40px;
}
@media (min-width: 1024px) {
#page-community .contributors-list .contributors .contributor .rank {
                        width: 60px
                }
                    }
#page-community .contributors-list .contributors .contributor .c-avatar {
                    height: 48px;
                    width: 48px;
                    margin-right: 16px;
                }
#page-community .contributors-list .contributors .contributor .info {
                    max-width: 570px;
                    margin-right: 24px;
                }
#page-community .contributors-list .contributors .contributor .info h3{
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor2);
}
#page-community .contributors-list .contributors .contributor .info p{
    line-height: 150%;
    color: var(--textColor6);
}
#page-community .contributors-list .contributors .contributor .c-primary-reputation {
                    transform: scale(0.8);
                    transform-origin: 0 50%;
                }
@media (min-width: 768px){

    #page-community .contributors-list .contributors .contributor .c-primary-reputation{
        margin-left: auto;
                        transform: unset;
    }
}
#page-community .contributors-list .contributors .contributor .c-icon.action-icon {
                    height: 16px;
                    width: 16px;
                    margin-left: 96px;
        filter: var(--textColor6-filter);
                }
#page-community .contributors-list .contributors .c-pagination{
    margin-top: 32px;
                padding: 8px 24px;
}
#page-community .new{
    border-radius: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 211 143 / var(--tw-bg-opacity, 1));
    font-family: Source Code Pro, monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 140%;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}
body.namespace-community.controller-stories.action-show{
    background-color: var(--backgroundColorB);
}
#page-community-story header {
        background: linear-gradient(180deg, #130b43 0%, #3c097d 100%);
        background-size: 100%;
    }
#page-community-story .back-link{
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
    font-size: 16px;
    font-weight: 600;
    line-height: 170%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#page-community-story .youtube-link{
    display: flex;
    align-items: center;
    border-radius: 100px;
    --tw-bg-opacity: 1;
    background-color: rgb(216 26 26 / var(--tw-bg-opacity, 1));
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    white-space: nowrap;
}
#page-community-story p {
        background: none;
    }
#page-community-story details{
    color: var(--textColor2);
    margin-bottom: 48px;
    border-radius: 12px;
    --tw-bg-opacity: 1;
    background-color: rgb(80 66 173 / var(--tw-bg-opacity, 1));
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 16px;
    line-height: 150%;
}
#page-community-story details summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-weight: 600;
}
#page-community-story details summary:after {
                content: url("/assets/icons/chevron-right-4edf20ec1116acf2e371e8ff03809451274a7b32.svg");
        filter: var(--white-filter);
        display: block;
                width: 16px;
                height: 16px;
                transition: all 150ms;
            }
#page-community-story details p{
    line-height: 160%;
}
#page-community-story details p a:not(.btn-primary) {
            color: var(--c-prominent-link-color);
            font-weight: 500;
        }
#page-community-story details p strong{
    font-weight: 500;
    color: var(--textColor2);
}
#page-community-story details p{
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 12px;
}
#page-community-story details[open] summary:after{
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#challenge-external-page .top-section{
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
    --tw-shadow: var(--box-shadow-lg);
    --tw-shadow-colored: var(--box-shadow-lg);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #challenge-external-page .top-section {
        box-shadow: 0 0 0 2px #000;
    }
#challenge-external-page .top-section{
    text-align: center;
}
#challenge-external-page .top-section .lg-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#challenge-external-page .top-section .lg-container:before {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTY5IDM0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzNC4yNDkgNDguMzIzNkMxMzQuMjQ5IDU3Ljc1MzcgMTQxLjg5MyA2NS4zOTg0IDE1MS4zMjQgNjUuMzk4NEMxNjAuNzU0IDY1LjM5ODQgMTY4LjM5OCA1Ny43NTM3IDE2OC4zOTggNDguMzIzNkMxNjguMzk4IDM4Ljg5MzQgMTYwLjc1NCAzMS4yNDg4IDE1MS4zMjQgMzEuMjQ4OEMxNDEuODkzIDMxLjI0ODggMTM0LjI0OSAzOC44OTM0IDEzNC4yNDkgNDguMzIzNloiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDMuODUzIDU0LjAxNTJDMTM2LjU4NCA1NC4wMTUyIDEzMC42OTIgNDguMTIyNSAxMzAuNjkyIDQwLjg1MzRDMTMwLjY5MiAzMy41ODQzIDEzNi41ODQgMjcuNjkxNiAxNDMuODUzIDI3LjY5MTZDMTUxLjEyMiAyNy42OTE2IDE1Ny4wMTUgMzMuNTg0MyAxNTcuMDE1IDQwLjg1MzRDMTU3LjAxNSA0OC4xMjI1IDE1MS4xMjIgNTQuMDE1MiAxNDMuODUzIDU0LjAxNTJaTTE0My44NTMgNTkuNzA2OEMxMzMuNDQxIDU5LjcwNjggMTI1IDUxLjI2NTkgMTI1IDQwLjg1MzRDMTI1IDMwLjQ0MSAxMzMuNDQxIDIyIDE0My44NTMgMjJDMTU0LjI2NiAyMiAxNjIuNzA3IDMwLjQ0MSAxNjIuNzA3IDQwLjg1MzRDMTYyLjcwNyA1MS4yNjU5IDE1NC4yNjYgNTkuNzA2OCAxNDMuODUzIDU5LjcwNjhaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0wIDMxMC42ODdMMjIuMTM1MSAyODguNTUyTDQ0LjI3MDIgMzEwLjY4N0wyMi4xMzUxIDMzMi44MjJMMCAzMTAuNjg3WiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjA4NjEgMzA2LjY2M0wzMS4xOTA1IDI4OS41NThDMzMuNjkxMSAyODcuMDU4IDM3Ljc0NTIgMjg3LjA1OCA0MC4yNDU4IDI4OS41NThMNTcuMzUwMiAzMDYuNjYzQzU5Ljg1MDcgMzA5LjE2MyA1OS44NTA3IDMxMy4yMTggNTcuMzUwMiAzMTUuNzE4TDQwLjI0NTggMzMyLjgyMkMzNy43NDUzIDMzNS4zMjMgMzMuNjkxMSAzMzUuMzIzIDMxLjE5MDUgMzMyLjgyMkwxNC4wODYxIDMxNS43MThDMTEuNTg1NiAzMTMuMjE4IDExLjU4NTYgMzA5LjE2MyAxNC4wODYxIDMwNi42NjNaTTE4LjExMDcgMzEwLjY4N0MxNy44MzI4IDMxMC45NjUgMTcuODMyOCAzMTEuNDE2IDE4LjExMDcgMzExLjY5NEwzNS4yMTUxIDMyOC43OThDMzUuNDkyOSAzMjkuMDc2IDM1Ljk0MzQgMzI5LjA3NiAzNi4yMjEyIDMyOC43OThMNTMuMzI1NiAzMTEuNjkzQzUzLjYwMzUgMzExLjQxNiA1My42MDM1IDMxMC45NjUgNTMuMzI1NiAzMTAuNjg3TDM2LjIyMTIgMjkzLjU4M0MzNS45NDM0IDI5My4zMDUgMzUuNDkyOSAyOTMuMzA1IDM1LjIxNTEgMjkzLjU4M0wxOC4xMTA3IDMxMC42ODdaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ1IDMuNTU3MjVDMjIuMTE0NSA1LjUyMTg2IDIwLjUyMTkgNy4xMTQ1IDE4LjU1NzIgNy4xMTQ1QzE2LjU5MjYgNy4xMTQ1IDE1IDUuNTIxODYgMTUgMy41NTcyNUMxNSAxLjU5MjYzIDE2LjU5MjYgMCAxOC41NTcyIDBDMjAuNTIxOSAwIDIyLjExNDUgMS41OTI2MyAyMi4xMTQ1IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ3IDE2LjM2MzRDMjIuMTE0NyAxOC4zMjggMjAuNTIyIDE5LjkyMDYgMTguNTU3NCAxOS45MjA2QzE2LjU5MjggMTkuOTIwNiAxNS4wMDAyIDE4LjMyOCAxNS4wMDAyIDE2LjM2MzRDMTUuMDAwMiAxNC4zOTg4IDE2LjU5MjggMTIuODA2MiAxOC41NTc0IDEyLjgwNjJDMjAuNTIyIDEyLjgwNjIgMjIuMTE0NyAxNC4zOTg4IDIyLjExNDcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTIyLjExNDcgMjkuMTY5NkMyMi4xMTQ3IDMxLjEzNDIgMjAuNTIyIDMyLjcyNjggMTguNTU3NCAzMi43MjY4QzE2LjU5MjggMzIuNzI2OCAxNS4wMDAyIDMxLjEzNDIgMTUuMDAwMiAyOS4xNjk2QzE1LjAwMDIgMjcuMjA0OSAxNi41OTI4IDI1LjYxMjMgMTguNTU3NCAyNS42MTIzQzIwLjUyMiAyNS42MTIzIDIyLjExNDcgMjcuMjA0OSAyMi4xMTQ3IDI5LjE2OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDMuNTU3MjVDMzQuOTIwNyA1LjUyMTg2IDMzLjMyODEgNy4xMTQ1IDMxLjM2MzUgNy4xMTQ1QzI5LjM5ODggNy4xMTQ1IDI3LjgwNjIgNS41MjE4NiAyNy44MDYyIDMuNTU3MjVDMjcuODA2MiAxLjU5MjYzIDI5LjM5ODggMCAzMS4zNjM1IDBDMzMuMzI4MSAwIDM0LjkyMDcgMS41OTI2MyAzNC45MjA3IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDE2LjM2MzRDMzQuOTIwNyAxOC4zMjggMzMuMzI4MSAxOS45MjA2IDMxLjM2MzUgMTkuOTIwNkMyOS4zOTg4IDE5LjkyMDYgMjcuODA2MiAxOC4zMjggMjcuODA2MiAxNi4zNjM0QzI3LjgwNjIgMTQuMzk4OCAyOS4zOTg4IDEyLjgwNjIgMzEuMzYzNSAxMi44MDYyQzMzLjMyODEgMTIuODA2MiAzNC45MjA3IDE0LjM5ODggMzQuOTIwNyAxNi4zNjM0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMzQuOTIwNyAyOS4xNjk2QzM0LjkyMDcgMzEuMTM0MiAzMy4zMjgxIDMyLjcyNjggMzEuMzYzNSAzMi43MjY4QzI5LjM5ODggMzIuNzI2OCAyNy44MDYyIDMxLjEzNDIgMjcuODA2MiAyOS4xNjk2QzI3LjgwNjIgMjcuMjA0OSAyOS4zOTg4IDI1LjYxMjMgMzEuMzYzNSAyNS42MTIzQzMzLjMyODEgMjUuNjEyMyAzNC45MjA3IDI3LjIwNDkgMzQuOTIwNyAyOS4xNjk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAzLjU1NzI1QzQ3LjcyNjcgNS41MjE4NiA0Ni4xMzQxIDcuMTE0NSA0NC4xNjk1IDcuMTE0NUM0Mi4yMDQ5IDcuMTE0NSA0MC42MTIyIDUuNTIxODYgNDAuNjEyMiAzLjU1NzI1QzQwLjYxMjIgMS41OTI2MyA0Mi4yMDQ5IDAgNDQuMTY5NSAwQzQ2LjEzNDEgMCA0Ny43MjY3IDEuNTkyNjMgNDcuNzI2NyAzLjU1NzI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAxNi4zNjM0QzQ3LjcyNjcgMTguMzI4IDQ2LjEzNDEgMTkuOTIwNiA0NC4xNjk1IDE5LjkyMDZDNDIuMjA0OSAxOS45MjA2IDQwLjYxMjIgMTguMzI4IDQwLjYxMjIgMTYuMzYzNEM0MC42MTIyIDE0LjM5ODggNDIuMjA0OSAxMi44MDYyIDQ0LjE2OTUgMTIuODA2MkM0Ni4xMzQxIDEyLjgwNjIgNDcuNzI2NyAxNC4zOTg4IDQ3LjcyNjcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTQ3LjcyNjcgMjkuMTY5NkM0Ny43MjY3IDMxLjEzNDIgNDYuMTM0MSAzMi43MjY4IDQ0LjE2OTUgMzIuNzI2OEM0Mi4yMDQ5IDMyLjcyNjggNDAuNjEyMiAzMS4xMzQyIDQwLjYxMjIgMjkuMTY5NkM0MC42MTIyIDI3LjIwNDkgNDIuMjA0OSAyNS42MTIzIDQ0LjE2OTUgMjUuNjEyM0M0Ni4xMzQxIDI1LjYxMjMgNDcuNzI2NyAyNy4yMDQ5IDQ3LjcyNjcgMjkuMTY5NloiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTk3LjQxNTMgMTY5LjAxMkM5OC41MjY2IDE2Ny45MDEgMTAwLjMyOCAxNjcuOTAxIDEwMS40NCAxNjkuMDEyTDExNi41MzIgMTg0LjEwNEMxMTcuNjQzIDE4NS4yMTYgMTE3LjY0MyAxODcuMDE4IDExNi41MzIgMTg4LjEyOUMxMTUuNDIxIDE4OS4yNCAxMTMuNjE5IDE4OS4yNCAxMTIuNTA3IDE4OC4xMjlMOTcuNDE1MyAxNzMuMDM3Qzk2LjMwMzkgMTcxLjkyNSA5Ni4zMDM5IDE3MC4xMjQgOTcuNDE1MyAxNjkuMDEyWiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTEuMDEyMyAxODEuODE4QzkyLjEyMzYgMTgwLjcwNyA5My45MjU1IDE4MC43MDcgOTUuMDM2OCAxODEuODE4TDExMC4xMjkgMTk2LjkxMUMxMTEuMjQgMTk4LjAyMiAxMTEuMjQgMTk5LjgyNCAxMTAuMTI5IDIwMC45MzVDMTA5LjAxOCAyMDIuMDQ2IDEwNy4yMTYgMjAyLjA0NiAxMDYuMTA0IDIwMC45MzVMOTEuMDEyMyAxODUuODQzQzg5LjkwMDkgMTg0LjczMiA4OS45MDA5IDE4Mi45MyA5MS4wMTIzIDE4MS44MThaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPg==");
            }
#challenge-external-page .top-section .lg-container:after {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEzIDMyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzOSA3Ny42ODc1TDE2MS4xMzUgNTUuNTUyNEwxODMuMjcgNzcuNjg3NUwxNjEuMTM1IDk5LjgyMjZMMTM5IDc3LjY4NzVaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUzLjA4NiA3My42NjNMMTcwLjE5MSA1Ni41NTg2QzE3Mi42OTEgNTQuMDU4MSAxNzYuNzQ1IDU0LjA1ODEgMTc5LjI0NiA1Ni41NTg2TDE5Ni4zNSA3My42NjNDMTk4Ljg1MSA3Ni4xNjM2IDE5OC44NTEgODAuMjE3OCAxOTYuMzUgODIuNzE4M0wxNzkuMjQ2IDk5LjgyMjdDMTc2Ljc0NSAxMDIuMzIzIDE3Mi42OTEgMTAyLjMyMyAxNzAuMTkxIDk5LjgyMjdMMTUzLjA4NiA4Mi43MTgzQzE1MC41ODYgODAuMjE3OCAxNTAuNTg2IDc2LjE2MzYgMTUzLjA4NiA3My42NjNaTTE1Ny4xMTEgNzcuNjg3NkMxNTYuODMzIDc3Ljk2NTQgMTU2LjgzMyA3OC40MTU5IDE1Ny4xMTEgNzguNjkzN0wxNzQuMjE1IDk1Ljc5ODJDMTc0LjQ5MyA5Ni4wNzYgMTc0Ljk0MyA5Ni4wNzYgMTc1LjIyMSA5NS43OTgyTDE5Mi4zMjYgNzguNjkzN0MxOTIuNjA0IDc4LjQxNTkgMTkyLjYwNCA3Ny45NjU0IDE5Mi4zMjYgNzcuNjg3NkwxNzUuMjIxIDYwLjU4MzJDMTc0Ljk0MyA2MC4zMDU0IDE3NC40OTMgNjAuMzA1NCAxNzQuMjE1IDYwLjU4MzJMMTU3LjExMSA3Ny42ODc2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMCAwSDMxLjMwMzhWMzEuMzAzOEgwVjBaIiBmaWxsPSIjRkFFNTRFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODA2NCA3LjExNDVIMzYuOTk1N0M0MC41MzIgNy4xMTQ1IDQzLjM5ODggOS45ODEyNCA0My4zOTg4IDEzLjUxNzVWMzcuNzA2OEM0My4zOTg4IDQxLjI0MzEgNDAuNTMyIDQ0LjEwOTkgMzYuOTk1NyA0NC4xMDk5SDEyLjgwNjRDOS4yNzAxMyA0NC4xMDk5IDYuNDAzMzggNDEuMjQzMSA2LjQwMzM4IDM3LjcwNjhWMTMuNTE3NUM2LjQwMzM4IDkuOTgxMjUgOS4yNzAxMiA3LjExNDUgMTIuODA2NCA3LjExNDVaTTEyLjgwNjQgMTIuODA2MUMxMi40MTM1IDEyLjgwNjEgMTIuMDk1IDEzLjEyNDYgMTIuMDk1IDEzLjUxNzVWMzcuNzA2OEMxMi4wOTUgMzguMDk5OCAxMi40MTM1IDM4LjQxODMgMTIuODA2NCAzOC40MTgzSDM2Ljk5NTdDMzcuMzg4NiAzOC40MTgzIDM3LjcwNzIgMzguMDk5OCAzNy43MDcyIDM3LjcwNjhWMTMuNTE3NUMzNy43MDcyIDEzLjEyNDYgMzcuMzg4NiAxMi44MDYxIDM2Ljk5NTcgMTIuODA2MUgxMi44MDY0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyOSAxODAuNzk2QzY3LjU5MjkgMTgyLjM0MSA2Ni4zNDA5IDE4My41OTMgNjQuNzk2NSAxODMuNTkzQzYzLjI1MjEgMTgzLjU5MyA2Mi4wMDAxIDE4Mi4zNDEgNjIuMDAwMSAxODAuNzk2QzYyLjAwMDEgMTc5LjI1MiA2My4yNTIxIDE3OCA2NC43OTY1IDE3OEM2Ni4zNDA5IDE3OCA2Ny41OTI5IDE3OS4yNTIgNjcuNTkyOSAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyNyAxOTAuODYzQzY3LjU5MjcgMTkyLjQwOCA2Ni4zNDA3IDE5My42NiA2NC43OTYzIDE5My42NkM2My4yNTIgMTkzLjY2IDYyIDE5Mi40MDggNjIgMTkwLjg2M0M2MiAxODkuMzE5IDYzLjI1MiAxODguMDY3IDY0Ljc5NjMgMTg4LjA2N0M2Ni4zNDA3IDE4OC4wNjcgNjcuNTkyNyAxODkuMzE5IDY3LjU5MjcgMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTY3LjU5MjcgMjAwLjkzQzY3LjU5MjcgMjAyLjQ3NSA2Ni4zNDA3IDIwMy43MjcgNjQuNzk2MyAyMDMuNzI3QzYzLjI1MiAyMDMuNzI3IDYyIDIwMi40NzUgNjIgMjAwLjkzQzYyIDE5OS4zODYgNjMuMjUyIDE5OC4xMzQgNjQuNzk2MyAxOTguMTM0QzY2LjM0MDcgMTk4LjEzNCA2Ny41OTI3IDE5OS4zODYgNjcuNTkyNyAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE4MC43OTZDNzcuNjU5OCAxODIuMzQxIDc2LjQwNzkgMTgzLjU5MyA3NC44NjM1IDE4My41OTNDNzMuMzE5MSAxODMuNTkzIDcyLjA2NzEgMTgyLjM0MSA3Mi4wNjcxIDE4MC43OTZDNzIuMDY3MSAxNzkuMjUyIDczLjMxOTEgMTc4IDc0Ljg2MzUgMTc4Qzc2LjQwNzkgMTc4IDc3LjY1OTggMTc5LjI1MiA3Ny42NTk4IDE4MC43OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE5MC44NjNDNzcuNjU5OCAxOTIuNDA4IDc2LjQwNzkgMTkzLjY2IDc0Ljg2MzUgMTkzLjY2QzczLjMxOTEgMTkzLjY2IDcyLjA2NzEgMTkyLjQwOCA3Mi4wNjcxIDE5MC44NjNDNzIuMDY3MSAxODkuMzE5IDczLjMxOTEgMTg4LjA2NyA3NC44NjM1IDE4OC4wNjdDNzYuNDA3OSAxODguMDY3IDc3LjY1OTggMTg5LjMxOSA3Ny42NTk4IDE5MC44NjNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDIwMC45M0M3Ny42NTk4IDIwMi40NzUgNzYuNDA3OSAyMDMuNzI3IDc0Ljg2MzUgMjAzLjcyN0M3My4zMTkxIDIwMy43MjcgNzIuMDY3MSAyMDIuNDc1IDcyLjA2NzEgMjAwLjkzQzcyLjA2NzEgMTk5LjM4NiA3My4zMTkxIDE5OC4xMzQgNzQuODYzNSAxOTguMTM0Qzc2LjQwNzkgMTk4LjEzNCA3Ny42NTk4IDE5OS4zODYgNzcuNjU5OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik04Ny43MjY4IDE4MC43OTZDODcuNzI2OCAxODIuMzQxIDg2LjQ3NDggMTgzLjU5MyA4NC45MzA0IDE4My41OTNDODMuMzg2IDE4My41OTMgODIuMTM0MSAxODIuMzQxIDgyLjEzNDEgMTgwLjc5NkM4Mi4xMzQxIDE3OS4yNTIgODMuMzg2IDE3OCA4NC45MzA0IDE3OEM4Ni40NzQ4IDE3OCA4Ny43MjY4IDE3OS4yNTIgODcuNzI2OCAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNODcuNzI2OCAxOTAuODYzQzg3LjcyNjggMTkyLjQwOCA4Ni40NzQ4IDE5My42NiA4NC45MzA0IDE5My42NkM4My4zODYgMTkzLjY2IDgyLjEzNDEgMTkyLjQwOCA4Mi4xMzQxIDE5MC44NjNDODIuMTM0MSAxODkuMzE5IDgzLjM4NiAxODguMDY3IDg0LjkzMDQgMTg4LjA2N0M4Ni40NzQ4IDE4OC4wNjcgODcuNzI2OCAxODkuMzE5IDg3LjcyNjggMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTg3LjcyNjggMjAwLjkzQzg3LjcyNjggMjAyLjQ3NSA4Ni40NzQ4IDIwMy43MjcgODQuOTMwNCAyMDMuNzI3QzgzLjM4NiAyMDMuNzI3IDgyLjEzNDEgMjAyLjQ3NSA4Mi4xMzQxIDIwMC45M0M4Mi4xMzQxIDE5OS4zODYgODMuMzg2IDE5OC4xMzQgODQuOTMwNCAxOTguMTM0Qzg2LjQ3NDggMTk4LjEzNCA4Ny43MjY4IDE5OS4zODYgODcuNzI2OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0xODguNDQ0IDI4Ni4yNjZDMTg4Ljg3NiAyODYuMjM5IDE4OS4xNjUgMjg2LjcwMyAxODguOTUyIDI4Ny4wOEwxNzQuMjk3IDMxMy4wMDNDMTc0LjA5MyAzMTMuMzYzIDE3My41NzggMzEzLjM3NCAxNzMuMzU5IDMxMy4wMjNMMTU4LjI5IDI4OC45MDhDMTU4LjA3IDI4OC41NTcgMTU4LjMwNiAyODguMDk5IDE1OC43MiAyODguMDc0TDE4OC40NDQgMjg2LjI2NloiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjguOTkxIDI5Ni4xMkMxNjguNTg1IDI5Ni4xNTYgMTY4LjM1OSAyOTYuNjA4IDE2OC41NzUgMjk2Ljk1NEwxODIuNjcgMzE5LjUxQzE4Mi44ODYgMzE5Ljg1NiAxODMuMzkxIDMxOS44NTIgMTgzLjYwMiAzMTkuNTAyTDE5OC42OTMgMjk0LjM5QzE5OC45MjMgMjk0LjAwNyAxOTguNjIyIDI5My41MjYgMTk4LjE3NyAyOTMuNTY1TDE2OC45OTEgMjk2LjEyWk0yMDIuNDM4IDI5Ni42NDFMMTg3LjM0NyAzMjEuNzUzQzE4NS40NTYgMzI0Ljg5OSAxODAuOTEgMzI0LjkzOSAxNzguOTY1IDMyMS44MjZMMTY0Ljg3IDI5OS4yNjlDMTYyLjkyNSAyOTYuMTU3IDE2NC45NTMgMjkyLjA4OCAxNjguNjEgMjkxLjc2OEwxOTcuNzk2IDI4OS4yMTJDMjAxLjc5OCAyODguODYxIDIwNC41MDggMjkzLjE5OCAyMDIuNDM4IDI5Ni42NDFaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPgoK");
            }
/* & .c-icon { */
/*     width: 160px; */
/*     height: 160px; */
/*     @apply mb-20; */
/* } */
#challenge-external-page .top-section p {
            max-width: 770px;
            font-size: 18px;
            line-height: 170%;
        }
#challenge-external-page .top-section p a{
    font-weight: 500;
    color: var(--colorPurpleToBrightPurple);
}
#challenge-external-page .top-section p.unsure {
            max-width: none;
            border-radius: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 24px;
            padding-right: 24px;
            background-color: var(--backgroundColorI);
            font-weight: 500;
        }
#challenge-external-page .top-section p.unsure a{
    color: var(--c-prominent-link-color);
}
#challenge-external-page .top-section .c-react-wrapper-mentoring-try-mentoring-button{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#challenge-external-page .video-section{
    padding-top: 64px;
    padding-bottom: 64px;
    margin-left: auto;
    margin-right: auto;
        max-width: 1024px;
}
#challenge-external-page .reasons-section h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: var(--textColor1);
}
@media (min-width: 768px){

    #challenge-external-page .reasons-section h2{
        font-size: 31px;
    }
}
#challenge-external-page .reasons-section h2{
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#challenge-external-page .reasons-section h2:after {
                content: "";
                width: 50px;
                margin-top: 24px;
                border-bottom-width: 3px;
                border-color: var(--colorPurpleToBrightPurple);
            }
#challenge-external-page .reasons-section .reasons{
    display: grid;
    justify-items: center;
    -moz-column-gap: 48px;
         column-gap: 48px;
}
#challenge-external-page .reasons-section .reasons .reason{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
                max-width: 500px;
}
#challenge-external-page .reasons-section .reasons .reason .c-icon {
                    height: 64px;
                    width: 64px;
                    margin-bottom: 24px;
        filter: var(--textColor1-filter);
                }
#challenge-external-page .reasons-section .reasons .reason h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--textColor1);
    margin-bottom: 8px;
}
#challenge-external-page .reasons-section .reasons .reason p{
    font-size: 16px;
    line-height: 160%;
}
#challenge-external-page .reasons-section .reasons .reason{
    margin-bottom: 16px;
}
@media (min-width: 768px){

    #challenge-external-page .reasons-section .reasons .reason{
        margin-bottom: 0px;
    }
}
#challenge-12in23-page .top-section{
    padding-top: 32px;
    padding-bottom: 40px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        background: linear-gradient(
            180deg,
            var(--backgroundColorA) 80%,
            var(--backgroundColorC) 100%
        );
}
#challenge-12in23-page article{
    padding-top: 48px;
    padding-bottom: 48px;
}
#challenge-12in23-page article p {
            max-width: 770px;
        }
#challenge-12in23-page article p a{
    font-weight: 500;
    color: var(--colorPurpleToBrightPurple);
}
#challenge-12in23-page article p.cta {
            max-width: none;
            margin-top: 24px;
            margin-bottom: 48px;
            border-radius: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 24px;
            padding-right: 24px;
            background-color: var(--backgroundColorI);
            font-weight: 500;
        }
#challenge-12in23-page article p.cta a{
    color: var(--c-prominent-link-color);
}
#challenge-12in23-page progress,
    #challenge-12in23-page .progress{
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    overflow: hidden;
    border-radius: 8px;
    margin-top: auto;
    margin-bottom: 8px;
        height: 8px;
}
#challenge-12in23-page progress::-webkit-progress-bar{
    background-color: var(--backgroundColorI);
}
#challenge-12in23-page progress[value]::-webkit-progress-value{
    background-color: var(--c-prominent-link-color);
}
#challenge-12in23-page .progress{
    background-color: var(--successColor);
}
#challenge-12in23-page .count{
    margin-top: 8px;
    font-weight: 500;
}
#challenge-48in24-page .top-section{
    padding-top: 32px;
    padding-bottom: 40px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1));
        background: linear-gradient(
            180deg,
            var(--backgroundColorA) 80%,
            var(--backgroundColorC) 100%
        );
}
#challenge-48in24-page article{
    padding-top: 48px;
    padding-bottom: 48px;
}
#challenge-48in24-page article p {
            max-width: 770px;
        }
#challenge-48in24-page article p a{
    font-weight: 500;
    color: var(--colorPurpleToBrightPurple);
}
#challenge-48in24-page article p.cta {
            max-width: none;
            margin-top: 24px;
            margin-bottom: 48px;
            border-radius: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 24px;
            padding-right: 24px;
            background-color: var(--backgroundColorI);
            font-weight: 500;
        }
#challenge-48in24-page article p.cta a{
    color: var(--c-prominent-link-color);
}
#challenge-48in24-page article .exercises .exercise{
    border-radius: 8px;
    border-width: 8px;
    background-color: var(--backgroundColorB);
    --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3);
    --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .theme-accessibility-dark #challenge-48in24-page article .exercises .exercise {
        box-shadow: 0 0 0 2px #000;
    }
#challenge-48in24-page article .exercises .exercise{
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}
#challenge-48in24-page article .exercises .exercise.in-progress{
    --tw-border-opacity: 1;
    border-color: rgb(246 150 5 / var(--tw-border-opacity, 1));
}
#challenge-48in24-page article .exercises .exercise.in-progress:before {
                        content: "";
                        background-image: url("/assets/icons/pending-circle-orange-b1dca948cdf79822e963dd1a3b3e427872efe86b.svg");
                        border-radius: 100px;
                        --tw-bg-opacity: 1;
                        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
                    }
#challenge-48in24-page article .exercises .exercise.not-started{
    border-color: transparent;
}
#challenge-48in24-page article .exercises .exercise.in-progress{
    border-color: var(--textColor7);
}
#challenge-48in24-page article .exercises .exercise.in-progress .info .exercise-icon{
    display: block;
}
#challenge-48in24-page article .exercises .exercise.bronze{
    --tw-border-opacity: 1;
    border-color: rgb(221 143 67 / var(--tw-border-opacity, 1));
                    box-shadow: 0 0 10px 4px #9d4f03;
}
#challenge-48in24-page article .exercises .exercise.bronze .info:before {
                        content: "";
                        background-image: url("/assets/icons/challenge-48in24-bronze-32f1a5379a9eb7e30dd324a2dbf5b87ac18abb97.svg");
                    }
#challenge-48in24-page article .exercises .exercise.silver{
    --tw-border-opacity: 1;
    border-color: rgb(192 192 192 / var(--tw-border-opacity, 1));
                    box-shadow: 0 0 10px 4px #707070;
}
#challenge-48in24-page article .exercises .exercise.silver .info:before {
                        content: "";
                        background-image: url("/assets/icons/challenge-48in24-silver-4ddb3d5e7fb4b26f6cea5c7e4c1a3ad993ff7945.svg");
                    }
#challenge-48in24-page article .exercises .exercise.gold{
    --tw-border-opacity: 1;
    border-color: rgb(255 229 0 / var(--tw-border-opacity, 1));
                    box-shadow: 0 0 10px 4px #cdb800;
}
#challenge-48in24-page article .exercises .exercise.gold .info {
                        background: #ffe50022;
                    }
#challenge-48in24-page article .exercises .exercise.gold .featured {
                        background: #ffe50044;
                    }
#challenge-48in24-page article .exercises .exercise.gold .info:before {
                        content: "";
                        background-image: url("/assets/icons/challenge-48in24-gold-5196b6e1fb60cbe358f0ee4f371b938400ea91df.svg");
                    }
#challenge-48in24-page article .exercises .exercise .info{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    border-width: 1px;
    border-color: var(--textColor7);
}
#challenge-48in24-page article .exercises .exercise .info:before {
                        /* @apply absolute top-[-10px] right-[-12px]; */
                        height: 128px;
                        width: 128px;
                        background-size: cover;
                        margin-top: -30px;
                        margin-bottom: 16px;
                    }
#challenge-48in24-page article .exercises .exercise .info .exercise-icon{
    margin-bottom: 8px;
    display: none;
    height: 96px;
    width: 96px;
}
.c-react-wrapper-common-introducer#challenge-48in24-page article .exercises .exercise .info .exercise-icon {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer#challenge-48in24-page article .exercises .exercise .info .exercise-icon {
        display: flex;
    }
.c-introducer#challenge-48in24-page article .exercises .exercise .info .exercise-icon {
        display: none;
    }
#challenge-48in24-page article .exercises .exercise .info progress,
                    #challenge-48in24-page article .exercises .exercise .info .progress{
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    overflow: hidden;
    border-radius: 8px;
    margin-top: auto;
    margin-bottom: 10px;
                        height: 8px;
}
#challenge-48in24-page article .exercises .exercise .info progress::-webkit-progress-bar{
    background-color: var(--backgroundColorI);
}
#challenge-48in24-page article .exercises .exercise .info progress[value]::-webkit-progress-value {
                                background-color: #d7d7d7;
                                background-image: linear-gradient(
                                    145deg,
                                    #d7d7d7 0%,
                                    #666666 100%
                                );
                            }
#challenge-48in24-page article .exercises .exercise .info .progress{
    background-color: var(--successColor);
}
#challenge-48in24-page article .exercises .exercise .info .count{
    font-weight: 600;
}
#challenge-48in24-page article .exercises .exercise .featured{
    border-top-width: 1px;
    border-color: var(--borderColor5);
    background-color: var(--backgroundColorD);
    border-width: 1px;
    border-color: var(--textColor7);
    margin-top: -1px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}
#challenge-48in24-page article .exercises .exercise .featured .tracks{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
#challenge-48in24-page article .exercises .exercise .featured .tracks .track-icon{
    display: block;
}
#challenge-48in24-page article .exercises .exercise .featured .tracks .track-icon img{
    height: 48px;
    width: 48px;
}
#challenge-48in24-page article .exercises .exercise .featured .tracks .track-icon.completed img {
                                    filter: grayscale(1) opacity(0.5)
                                        drop-shadow(0 0 0 #ffe500)
                                        saturate(300%)
                                        drop-shadow(0px 0px 5px #ffe500);
                                }
/* @import "../highlighters/highlightjs-light";
@import "../highlighters/highlightjs-dark"; */
.hljs {
    color: var(--hljs-mono-1);
    background: var(--hljs-base);
}
.hljs-comment,
.hljs-quote {
    color: var(--hljs-mono-3);
    font-style: italic;
}
.hljs-doctag,
.hljs-tag,
.hljs-keyword,
.hljs-formula {
    color: var(--hljs-hue-3);
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: var(--hljs-hue-5);
}
.hljs-literal {
    color: var(--hljs-hue-1);
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
    color: var(--hljs-hue-4);
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: var(--hljs-hue-6);
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: var(--hljs-hue-2);
}
.hljs-built_in,
.hljs-title .class_,
.hljs-class .hljs-title {
    color: var(--hljs-hue-6-2);
}
.hljs-emphasis {
    font-style: italic;
}
.hljs-strong {
    font-weight: bold;
}
.hljs-link {
    text-decoration: underline;
}
.c-highlight-links a{
    color: var(--c-prominent-link-color);
}
body.namespace-.controller-insiders.theme-light img.c-img-invertible, .theme-system img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.theme-light img.c-img-light-theme, .theme-system img.c-img-light-theme {
        display: none;
    }
.theme-system .c-perk-a .logo-light{
    display: none;
}
.c-react-wrapper-common-introducer.theme-system .c-perk-a .logo-light {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-system .c-perk-a .logo-light {
        display: flex;
    }
.c-introducer.theme-system .c-perk-a .logo-light {
        display: none;
    }
.theme-system .c-header-with-bg {
        background: #191525;
    }
.theme-system .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
}
.theme-system .c-icon.--hex img,
    .theme-system .c-icon.--hex svg {
        width: 37%;
        height: 37%;
    }
.theme-system .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6I0E5QTZCRDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
#page-community .theme-system {
        --headerBackground: #191525;
    }
.theme-system img.c-img-dark-theme {
        display: none;
    }
body.namespace-.controller-insiders.theme-light,
.theme-dark {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
}
body.namespace-.controller-insiders.theme-system img.c-img-invertible, .theme-dark img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.theme-system img.c-img-light-theme, .theme-dark img.c-img-light-theme {
        display: none;
    }
.theme-system .c-perk-a .logo-dark{
    display: none;
}
.c-react-wrapper-common-introducer.theme-system .c-perk-a .logo-dark {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-system .c-perk-a .logo-dark {
        display: flex;
    }
.c-introducer.theme-system .c-perk-a .logo-dark {
        display: none;
    }
.theme-system #site-header .nav-element.insiders .nav-element-label:after{
    opacity: 0.75;
}
.theme-system .c-header-with-bg, .theme-accessibility-dark .c-header-with-bg {
        background: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;

        background-size: 100%;
        background-position: -190px;
    }
.theme-system .c-icon.--hex,
.theme-accessibility-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.theme-system .c-icon.--hex img,
    .theme-system .c-icon.--hex svg,
    .theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg {
        width: 45%;
        height: 45%;
    }
.theme-system .c-search-bar input.--search, .theme-accessibility-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6Izc2NzA5RjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
#page-community .theme-light,
    #page-community .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }
.theme-sepia img.c-img-dark-theme {
        display: none;
    }
body.namespace-.controller-insiders.theme-light,
.theme-dark {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
}
body.namespace-.controller-insiders.theme-sepia img.c-img-invertible, .theme-dark img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.theme-sepia img.c-img-light-theme, .theme-dark img.c-img-light-theme {
        display: none;
    }
.theme-sepia .c-perk-a .logo-dark{
    display: none;
}
.c-react-wrapper-common-introducer.theme-sepia .c-perk-a .logo-dark {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-sepia .c-perk-a .logo-dark {
        display: flex;
    }
.c-introducer.theme-sepia .c-perk-a .logo-dark {
        display: none;
    }
.theme-sepia #site-header .nav-element.insiders .nav-element-label:after{
    opacity: 0.75;
}
.theme-sepia .c-header-with-bg, .theme-accessibility-dark .c-header-with-bg {
        background: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;

        background-size: 100%;
        background-position: -190px;
    }
.theme-sepia .c-icon.--hex,
.theme-accessibility-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.theme-sepia .c-icon.--hex img,
    .theme-sepia .c-icon.--hex svg,
    .theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg {
        width: 45%;
        height: 45%;
    }
.theme-sepia .c-search-bar input.--search, .theme-accessibility-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6Izc2NzA5RjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
#page-community .theme-light,
    #page-community .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }
.tml body.namespace-bootcamp img.c-img-dark-theme {
        display: none;
    }
body.namespace-.controller-insiders.theme-light,
.theme-dark {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
}
body.namespace-.controller-insiders.tml body.namespace-bootcamp img.c-img-invertible, .theme-dark img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.tml body.namespace-bootcamp img.c-img-light-theme, .theme-dark img.c-img-light-theme {
        display: none;
    }
.tml body.namespace-bootcamp .c-perk-a .logo-dark{
    display: none;
}
.c-react-wrapper-common-introducer.tml body.namespace-bootcamp .c-perk-a .logo-dark {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.tml body.namespace-bootcamp .c-perk-a .logo-dark {
        display: flex;
    }
.c-introducer.tml body.namespace-bootcamp .c-perk-a .logo-dark {
        display: none;
    }
.tml body.namespace-bootcamp #site-header .nav-element.insiders .nav-element-label:after{
    opacity: 0.75;
}
.tml body.namespace-bootcamp .c-header-with-bg, .theme-accessibility-dark .c-header-with-bg {
        background: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;

        background-size: 100%;
        background-position: -190px;
    }
.tml body.namespace-bootcamp .c-icon.--hex,
.theme-accessibility-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.tml body.namespace-bootcamp .c-icon.--hex img,
    .tml body.namespace-bootcamp .c-icon.--hex svg,
    .theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg {
        width: 45%;
        height: 45%;
    }
.tml body.namespace-bootcamp .c-search-bar input.--search, .theme-accessibility-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6Izc2NzA5RjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
#page-community .theme-light,
    #page-community .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }
.theme-accessibility-dark img.c-img-dark-theme {
        display: none;
    }
body.namespace-.controller-insiders.theme-light,
.theme-dark {
    color-scheme: dark;

    /* --backgroundColorA: var(--c-282339); */
    --backgroundColorA: #302b42;
    --backgroundColorA-RGB: 40 35 57;
    --backgroundColorB: var(--c-211D2F);
    --backgroundColorC: var(--c-302B42);
    --backgroundColorD: var(--c-3A3557); /* Confirmed */
    --backgroundColorE: #4A475F;
    --backgroundColorF: #191525;
    --backgroundColorG: var(--c-2F2943);
    --backgroundColorH: var(--c-F0F3F9);
    --backgroundColorI: var(--c-191525);
    --backgroundColorITransparent: rgba(25, 21, 37, 0);
    --backgroundColorJ: var(--backgroundColorB);
    --backgroundColorBorderGradientLightPurple: #211D2F;
    --backgroundColorNotifications: #191525;
    --backgroundColorNotificationsCount: #59D2AE;
    --backgroundColorAnnouncementBar: #7029F5;
    --backgroundColorSiteFooter: #191525;
    --backgroundColorTracksListState: #FFD38F;
    --backgroundColorMentoringRequestedStatusInfo: #604FCD;
    --backgroundColorCAlert: none;
    --backgroundColorTextblockCautonContent: none;
    --textColorCAlert: #F69605;
    --textColorCAlertLabel: #F0F3F9;
    --backgroundColorTracksListJoined: #211D2F;
    --backgroundColorTracksListNew: none;
    --backgroundColorIterationCommentsUnread: #F7B000;
    --borderColorIterationCommentsUnread: #F7B000;
    --textColorIterationCommentsUnread: #130B43;
    --borderColorIterationActive: #F7B000;
    --textColorIterationActive: #F7B000;
    --backgroundColorEDAvailable: #191525;
    --backgroundColorEDIterated: #604FCD;
    --backgroundColorMentorTrackSelectorSelected: none;
    --backgroundColorExerciseStatusTagInProgress: #453A8F;
    --backgroundColorExerciseStatusTagLocked: none;
    --backgroundColorConceptMastered: none;
    --backgroundColorConceptLocked: var(--backgroundColorA);
    --backgroundColorCompletedHeading: none;
    --backgroundColorCReputation: #191525;
    --backgroundColorEditorActiveLine: #302b4288;
    --backgroundColorTeamHeader: #211D2F;
    --backgroundColorTeamInfoBox: #191525;
    --backgroundColorImpactPage: #191525;
    --backgroundColorNotificationsUnreadDot: #59D2AE;
    --backgroundColorBuildToolingStatus: none;
    --backgroundColorBtnSecondary: #302b42;
    --backgroundColorBtnSecondaryHover: #191525;
    --backgroundColorMentorTestimonialsNew: #F7B000;
    --backgroundColorExternalCTA: none;
    --backgroundColorEasyTag: none;
    --backgroundColorMediumTag: none;
    --backgroundColorHardTag: none;
    --backgroundColorDangerSection: none;
    --backgroundColorDonationsFormSelected: none;
    --backgroundColorContributingAdvanced: none;
    --backgroundColorSummaryStatusFailed: #f1707026;
    --backgroundColorSummaryStatusFailedBar: #f17070;
    --backgroundColorReputationInfo: #302b42;
    --backgroundColorNavDropdown: #191525;
    --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
    --backgroundColorHoverMenuTrack: #3a3557;
    --backgroundColorPerkContainer: #103;
    --backgroundColorStarButtonStarred: #564210;

    --backgroundImpactPageHeader: #191525;

    --backgroundImageHex: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MDUgMi4xMzk4QzIzLjEzMTEgMS4wNzcxIDI1LjM5ODkgMS4wNzcxIDI3LjIzOTYgMi4xMzk4TDQxLjg5ODggMTAuNjAzM0M0My43Mzk1IDExLjY2NiA0NC44NzM0IDEzLjYzIDQ0Ljg3MzQgMTUuNzU1NFYzMi42ODI0QzQ0Ljg3MzQgMzQuODA3OCA0My43Mzk1IDM2Ljc3MTggNDEuODk4OCAzNy44MzQ1TDI3LjIzOTYgNDYuMjk4QzI1LjM5ODkgNDcuMzYwNyAyMy4xMzExIDQ3LjM2MDcgMjEuMjkwNSA0Ni4yOThMNi42MzEyNCAzNy44MzQ1QzQuNzkwNTggMzYuNzcxOCAzLjY1NjY4IDM0LjgwNzggMy42NTY2OCAzMi42ODI0VjE1Ljc1NTRDMy42NTY2OCAxMy42MyA0Ljc5MDU4IDExLjY2NiA2LjYzMTI0IDEwLjYwMzNMMjEuMjkwNSAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzMyAxMi41MzUzTDI2LjEyNDEgNC4wNzE4NEMyNC45NzM3IDMuNDA3NjQgMjMuNTU2MyAzLjQwNzY0IDIyLjQwNTkgNC4wNzE4M0w3Ljc0NjcgMTIuNTM1M0M2LjU5NjI5IDEzLjE5OTUgNS44ODc2IDE0LjQyNyA1Ljg4NzYgMTUuNzU1NFYzMi42ODI0QzUuODg3NiAzNC4wMTA4IDYuNTk2MjkgMzUuMjM4MyA3Ljc0NjcgMzUuOTAyNUwyMi40MDU5IDQ0LjM2NkMyMy41NTYzIDQ1LjAzMDIgMjQuOTczNyA0NS4wMzAyIDI2LjEyNDEgNDQuMzY2TDQwLjc4MzMgMzUuOTAyNUM0MS45MzM4IDM1LjIzODMgNDIuNjQyNCAzNC4wMTA4IDQyLjY0MjQgMzIuNjgyNFYxNS43NTU0QzQyLjY0MjQgMTQuNDI3IDQxLjkzMzggMTMuMTk5NSA0MC43ODMzIDEyLjUzNTNaTTI3LjIzOTYgMi4xMzk4QzI1LjM5ODkgMS4wNzcxIDIzLjEzMTEgMS4wNzcxIDIxLjI5MDUgMi4xMzk4TDYuNjMxMjQgMTAuNjAzM0M0Ljc5MDU4IDExLjY2NiAzLjY1NjY4IDEzLjYzIDMuNjU2NjggMTUuNzU1NFYzMi42ODI0QzMuNjU2NjggMzQuODA3OCA0Ljc5MDU4IDM2Ljc3MTggNi42MzEyNCAzNy44MzQ1TDIxLjI5MDUgNDYuMjk4QzIzLjEzMTEgNDcuMzYwNyAyNS4zOTg5IDQ3LjM2MDcgMjcuMjM5NiA0Ni4yOThMNDEuODk4OCAzNy44MzQ1QzQzLjczOTUgMzYuNzcxOCA0NC44NzM0IDM0LjgwNzggNDQuODczNCAzMi42ODI0VjE1Ljc1NTRDNDQuODczNCAxMy42MyA0My43Mzk1IDExLjY2NiA0MS44OTg4IDEwLjYwMzNMMjcuMjM5NiAyLjEzOThaIiBmaWxsPSIjMTkxNTI1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzkuNTk1IDE0LjA4TDI1LjM4MDUgNS44NzMzMUMyNC42OTAyIDUuNDc0NzkgMjMuODM5OCA1LjQ3NDc5IDIzLjE0OTYgNS44NzMzMUw4LjkzNTEgMTQuMDhDOC4yNDQ4NSAxNC40Nzg2IDcuODE5NjQgMTUuMjE1IDcuODE5NjQgMTYuMDEyMVYzMi40MjU1QzcuODE5NjQgMzMuMjIyNiA4LjI0NDg1IDMzLjk1OSA4LjkzNTEgMzQuMzU3NkwyMy4xNDk2IDQyLjU2NDNDMjMuODM5OCA0Mi45NjI4IDI0LjY5MDIgNDIuOTYyOCAyNS4zODA1IDQyLjU2NDNMMzkuNTk1IDM0LjM1NzZDNDAuMjg1MiAzMy45NTkgNDAuNzEwNCAzMy4yMjI2IDQwLjcxMDQgMzIuNDI1NVYxNi4wMTIxQzQwLjcxMDQgMTUuMjE1IDQwLjI4NTIgMTQuNDc4NiAzOS41OTUgMTQuMDhaTTI2LjQ5NTkgMy45NDEyOEMyNS4xMTU0IDMuMTQ0MjUgMjMuNDE0NiAzLjE0NDI1IDIyLjAzNDEgMy45NDEyOEw3LjgxOTY0IDEyLjE0OEM2LjQzOTE0IDEyLjk0NSA1LjU4ODcyIDE0LjQxOCA1LjU4ODcyIDE2LjAxMjFWMzIuNDI1NUM1LjU4ODcyIDM0LjAxOTYgNi40MzkxNCAzNS40OTI2IDcuODE5NjQgMzYuMjg5NkwyMi4wMzQxIDQ0LjQ5NjNDMjMuNDE0NiA0NS4yOTMzIDI1LjExNTQgNDUuMjkzMyAyNi40OTU5IDQ0LjQ5NjNMNDAuNzEwNCAzNi4yODk2QzQyLjA5MDkgMzUuNDkyNiA0Mi45NDEzIDM0LjAxOTYgNDIuOTQxMyAzMi40MjU1VjE2LjAxMjFDNDIuOTQxMyAxNC40MTggNDIuMDkwOSAxMi45NDUgNDAuNzEwNCAxMi4xNDhMMjYuNDk1OSAzLjk0MTI4WiIgZmlsbD0iIzNGM0E1QSIvPgo8L3N2Zz4K");
    --textColorCReputation: #A9A6BD;

    --cmCursorColor: #F7B000;

    /* --iconfiltermentordiscussionwidget: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%); */

    /* backgroundColorF's colors */
    --c-prominent-link-bg: #4a475f;

    --newBadgeIcon: url("/assets/icons/new-badge-dark-48e7aefb79d88c8cf84c093a78663f6f19cbd418.svg");
    --newTestimonialIcon: url("/assets/icons/new-testimonial-dark-3ca49b63cf011e8e6c497068ef890f9af75ce42a.svg");

    --colorPurpleToBrightPurple: #A9A0E4;
    --purple-to-bright-purple-filter: invert(68%) sepia(45%) saturate(771%)
        hue-rotate(201deg) brightness(99%) contrast(80%);

    /* this is used at tiny gradients - needs a proper dark-theme color */
    --fillColorProgress: linear-gradient(to right, #2200ff 0%, #9e00ff 100%);
    --borderColor3: var(--c-8480A0);
    --borderColor5: var(--c-433F56); /* Confirmed */
    --borderColor6: var(--c-433F56);
    --borderColor7: #433f56;
    --borderColor8: #4A475F;
    --borderColorContributionTasksTag: #A9A6BD;
    --borderColorContributorCreditBlock: #A9A6BD;
    --borderColorExerciseStatusTagInProgress: #3B2A93;
    --borderColorDocsDashed: #F0F3F9;
    --borderColorTracksListV3: transparent;
    /* --borderColor7: var(--c-533F56); */
    --textColor1: #f0f3f9;
    /* --textColor1: var(--c-FFFFFF); */
    --textColor1-no-dark: var(--c-130B43);
    --textColor2: var(--c-F0F3F9); /* Confirmed */
    /* same as buttonBorderColor1 for now */
    --textColor3: var(--c-8480A0);
    --textColor5: var(--c-CBC9D9);
    --textColor6: var(--c-A9A6BD); /* Confirmed */
    --textColor7: var(--c-6A6781); /* Confirmed */
    --textColor9: var(--c-000000);
    --textColorExerciseStatusTagInProgress: #F0F3F9;
    --textColorTracksListState: #130B43;
    --textColorTracksListJoined: #FFD38F;
    --textColorTracksListNew: #F7B000;
    --textColorTrackBreadcrumbs: #F0F3F9;
    --textColorLastNavElement: #A9A6BD;
    --textColorCommentsCount: #F69605;
    --textColorMentorTestimonialsNew: #130B43;
    --textColorMentoringRequestedStatusInfo: #F0F3F9;
    --textColorMentorTrackSelectorSelected: #F0F3F9;
    --textColorProgressTextCompleted: #59D2AE;
    --textGradientStart: #8370ff;
    --textGradientEnd: #b947ff;
    --textColorSoftEmphasis: #f5f5f5;
    --textColorPerkCTA: #fff;

    --c-prominent-link-color: #FFD38F;
    --color22: var(--c-533F56);

    --shadowColorED: 40, 35, 57;
    --shadowColorMain: 0, 0, 0;
    --shadowColorSecondary: #09080C;
    --shadowColorNotificationBell: 89, 210, 174;
    --shadowColorKeystroke: 40, 35, 57;

    --linkColor: var(--c-7097FF);
    --buttonBorderColor1: var(--c-8480A0);
    --buttonBorderColor2: var(--c-6A6781);
    --inputBackgroundColor: var(--c-282339);
    --inputBorderColorFocus: var(--c-8480A0);
    --tabBackgroundColorSelected: #604FCD;
    --tabBackgroundColorSelectedLocked: #604FCD66;
    --successColor: var(--c-4FCDA7);
    --chartBorderColor: var(--c-6A6781);

    --paginationCurrentBorderColor: var(--c-6A6781);
    --paginationCurrentBackgroundColor: var(--c-403A66);

    --modalBackgroundColor: rgba(40, 35, 57, 0.7);
    --box-shadow-sm: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.2);
    --box-shadow-base: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.4);
    --box-shadow-lg: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.6);
    --box-shadow-lgZ1: 0px 4px 42px 0px rgba(var(--shadowColorMain), 0.9);

    /* -- HLJS dark -- */
    /* Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github& .com/atom/one-dark-syntax */

    --hljs-base: transparent;
    --hljs-mono-1: #abb2bf;
    --hljs-mono-2: #818896;
    --hljs-mono-3: #9aa0ac;
    --hljs-hue-1: #56b6c2;
    --hljs-hue-2: #61aeee;
    --hljs-hue-3: #c678dd;
    --hljs-hue-4: #98c379;
    --hljs-hue-5: #e06c75;
    --hljs-hue-5-2: #be5046;
    --hljs-hue-6: #d19a66;
    --hljs-hue-6-2: #e6c07b;

    --diffDarkGreen: #4fcda730;
    --diffLightGreen: #4fcda730;
    --diffDarkRed: #f1707030;
    --diffLightRed: #f1707030;

    --commonBadge-RGB: 240, 243, 249;
    --commonBadgeFill-RGB: 80, 83, 89;
    --commonBadgeShadow-RGB: 80, 83, 89; /* TODO */
    --rareBadge-RGB: 159, 180, 255; /* 219, 240, 255 */
    --rareBadgeFill-RGB: 0, 20, 75;
    --rareBadgeShadow-RGB: 219, 240, 255;
    --ultimateBadge-RGB: 246, 150, 5;
    --ultimateBadgeFill-RGB: 86, 0, 0;
    --ultimateBadgeShadow-RGB: 246, 150, 5; /* TODO */
    --legendaryBadge-RGB: 235, 87, 87;
    --legendaryBadgeFill-RGB: 75, 0, 0;
    --legendaryBadgeShadow-RGB: 235, 87, 87; /* TODO */

    --white-filter: var(--filter-FFFFFF);

    /* this only applies if it is dark mode */
    --white-filter-when-dark: var(--filter-FFFFFF);
    /* this can be a dark mode filter for all (or most) the black svgs */
    /* it is only present in the dark-mode block and won't effect the original variant */
    --svg-darkmode-filter: var(--filter-A9A6BD);
    /* ##F7B000 */
    --orange-filter: invert(57%) sepia(60%) saturate(718%) hue-rotate(7deg)
        brightness(108%) contrast(102%);
    /* this is the same as light mode */
    /* --orange-filter: invert(57%) sepia(90%) saturate(682%) hue-rotate(354deg)
        brightness(95%) contrast(104%); */
    /* This is yellow */
    /* --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg)
        brightness(106%) contrast(96%); */
    --processing-orange-filter: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);
    --another-purple-filter: invert(23%) sepia(90%) saturate(1818%)
        hue-rotate(236deg) brightness(97%) contrast(80%);
    --tracks-list-joined-filter: invert(27%) sepia(43%) saturate(4160%)
        hue-rotate(221deg) brightness(93%) contrast(96%);
    --red-filter: invert(78%) sepia(76%) saturate(7147%) hue-rotate(332deg)
        brightness(105%) contrast(84%);
    /* --tracks-list-joined-filter: invert(31%) sepia(64%) saturate(1659%)
        hue-rotate(228deg) brightness(89%) contrast(90%); */

    /* white-filter */
    /* --textColor1-filter: invert(100%) sepia(0%) saturate(7500%)
        hue-rotate(242deg) brightness(101%) contrast(100%); */

    --notifications-active-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);
    --notifications-inactive-filter: invert(40%) sepia(48%) saturate(1566%)
        hue-rotate(221deg) brightness(99%) contrast(94%);

    /* aliceBlue-filter */
    --textColor1-filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
        brightness(102%) contrast(96%);
    --textColor2-filter: invert(93%) sepia(31%) saturate(246%)
        hue-rotate(177deg) brightness(100%) contrast(96%);
    --textColor3-filter: invert(52%) sepia(14%) saturate(586%)
        hue-rotate(208deg) brightness(97%) contrast(91%);
    --textColor5-filter: invert(89%) sepia(10%) saturate(255%)
        hue-rotate(208deg) brightness(94%) contrast(84%);
    --textColor6-filter: invert(71%) sepia(18%) saturate(258%)
        hue-rotate(208deg) brightness(93%) contrast(86%);
    --textColor7-filter: invert(43%) sepia(4%) saturate(2017%)
        hue-rotate(207deg) brightness(92%) contrast(86%);
    --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%)
        hue-rotate(208deg) brightness(97%) contrast(95%);
    --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%)
        hue-rotate(355deg) brightness(90%) contrast(96%);
    --light-gold-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --dark-green-filter: invert(55%) sepia(64%) saturate(367%)
        hue-rotate(111deg) brightness(99%) contrast(87%);
    --c-prominent-link-icon-filter: invert(79%) sepia(31%) saturate(572%)
        hue-rotate(340deg) brightness(105%) contrast(101%);
    --linkColor-filter: var(--filter-7097FF);
    /* same as light theme, but becomes black if it is missing */
    --link-blue-filter: invert(49%) sepia(99%) saturate(6416%)
        hue-rotate(225deg) brightness(94%) contrast(93%);
    /* --purple-filter: var(--filter-FFFFFF); */
    --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
        brightness(97%) contrast(80%);

    --purple-light-white-dark-filter: var(--white-filter);

    /* aliceBlue */
    --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterMentorDiscussionWidget: invert(94%) sepia(7%) saturate(129%)
        hue-rotate(182deg) brightness(102%) contrast(96%);

    --iconFilterCommentsCount: invert(57%) sepia(90%) saturate(682%)
        hue-rotate(354deg) brightness(95%) contrast(104%);

    --iconFilterNotificationsProminentLink: invert(74%) sepia(71%)
        saturate(309%) hue-rotate(106deg) brightness(89%) contrast(88%);
    --iconFilterEDConcept: var(--c-prominent-link-icon-filter);
    --iconFilterCaution: brightness(1.7);
    background-color: var(--backgroundColorB);
    color: var(--textColor5);

    --c-concept-map-line-complete: #64b294;
    --c-concept-map-line-available: #dce3ef77;
    --c-concept-map-line-locked: #c9c8d7;
    --c-concept-map-line-faded: #d2ddf3;

    --lockedColor: var(--backgroundColorEDAvailable);
}
body.namespace-.controller-insiders.theme-accessibility-dark img.c-img-invertible, .theme-dark img.c-img-invertible {
        filter: invert(100%);
    }
body.namespace-.controller-insiders.theme-accessibility-dark img.c-img-light-theme, .theme-dark img.c-img-light-theme {
        display: none;
    }
.theme-accessibility-dark .c-perk-a .logo-dark{
    display: none;
}
.c-react-wrapper-common-introducer.theme-accessibility-dark .c-perk-a .logo-dark {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
.c-react-wrapper-common-introducer .c-introducer.theme-accessibility-dark .c-perk-a .logo-dark {
        display: flex;
    }
.c-introducer.theme-accessibility-dark .c-perk-a .logo-dark {
        display: none;
    }
.theme-accessibility-dark #site-header .nav-element.insiders .nav-element-label:after{
    opacity: 0.75;
}
.theme-accessibility-dark .c-header-with-bg, .theme-accessibility-dark .c-header-with-bg {
        background: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;

        background-size: 100%;
        background-position: -190px;
    }
.theme-accessibility-dark .c-icon.--hex,
.theme-accessibility-dark .c-icon.--hex {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MCA4MCI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45OTk5IDIuODg2NzRjMy4wOTQtMS43ODYzMyA2LjkwNi0xLjc4NjMyIDEwIDBsMjQuNjQxIDE0LjIyNjQ2YzMuMDk0IDEuNzg2NCA1IDUuMDg3NiA1IDguNjYwM3YyOC40NTNjMCAzLjU3MjYtMS45MDYgNi44NzM5LTUgOC42NjAybC0yNC42NDEgMTQuMjI2NWMtMy4wOTQgMS43ODY0LTYuOTA2IDEuNzg2NC0xMCAwbC0yNC42NDEtMTQuMjI2NWMtMy4wOTQwMy0xLjc4NjMtNS4wMDAwMS01LjA4NzYtNS4wMDAwMS04LjY2MDJ2LTI4LjQ1M2MwLTMuNTcyNyAxLjkwNTk5LTYuODczOSA1LjAwMDAxLTguNjYwM2wyNC42NDEtMTQuMjI2NDZ6Ii8+CiAgPHBhdGggZmlsbD0iIzEzMEI0MyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjcuNzY1OSAyMC4zNjA4TDQzLjEyNDkgNi4xMzQzNGMtMS45MzM4LTEuMTE2NDYtNC4zMTYyLTEuMTE2NDYtNi4yNSAwTDEyLjIzMzkgMjAuMzYwOGMtMS45MzM4IDEuMTE2NS0zLjEyNTAxIDMuMTc5OC0zLjEyNTAxIDUuNDEyN3YyOC40NTNjMCAyLjIzMjkgMS4xOTEyMSA0LjI5NjIgMy4xMjUwMSA1LjQxMjZsMjQuNjQxIDE0LjIyNjVjMS45MzM4IDEuMTE2NSA0LjMxNjIgMS4xMTY1IDYuMjUgMGwyNC42NDEtMTQuMjI2NGMxLjkzMzgtMS4xMTY1IDMuMTI1LTMuMTc5OCAzLjEyNS01LjQxMjd2LTI4LjQ1M2MwLTIuMjMyOS0xLjE5MTItNC4yOTYyLTMuMTI1LTUuNDEyN3pNNDQuOTk5OSAyLjg4Njc0Yy0zLjA5NC0xLjc4NjMyLTYuOTA2LTEuNzg2MzMtMTAgMEwxMC4zNTg5IDE3LjExMzJjLTMuMDk0MDIgMS43ODY0LTUuMDAwMDEgNS4wODc2LTUuMDAwMDEgOC42NjAzdjI4LjQ1M2MwIDMuNTcyNiAxLjkwNTk5IDYuODczOSA1LjAwMDAxIDguNjYwMmwyNC42NDEgMTQuMjI2NWMzLjA5NCAxLjc4NjQgNi45MDYgMS43ODY0IDEwIDBsMjQuNjQxLTE0LjIyNjVjMy4wOTQtMS43ODYzIDUtNS4wODc2IDUtOC42NjAydi0yOC40NTNjMC0zLjU3MjctMS45MDYtNi44NzM5LTUtOC42NjAzTDQ0Ljk5OTkgMi44ODY3NHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg,
    .theme-accessibility-dark .c-icon.--hex img,
    .theme-accessibility-dark .c-icon.--hex svg {
        width: 45%;
        height: 45%;
    }
.theme-accessibility-dark .c-search-bar input.--search, .theme-accessibility-dark .c-search-bar input.--search {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6Izc2NzA5RjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEuNXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOS44MTMiIGN5PSI5LjgxMiIgcj0iOS4wNjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjA1NiA0LjYyKSByb3RhdGUoLTIzLjAyNSkiLz48bGluZSBjbGFzcz0iYSIgeDE9IjE2LjIyMSIgeTE9IjE2LjIyIiB4Mj0iMjMuMjUiIHkyPSIyMy4yNSIvPjwvc3ZnPg==");
    }
#page-community .theme-light,
    #page-community .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }