/*---- e-Oppi CSS styles 2.0.0 --- 2023-02-27 ----*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');



html {
    /* e-Oppi colors */

    --color-01-tomato-dark-70: #431610;
    --color-01-tomato-dark-50: #6f231a;
    --color-01-tomato-dark-20: #bb3d30;
    --color-01-tomato: #ef4e3e;
    --color-01-tomato-light-60: #f8aea0;
    --color-01-tomato-light-75: #fbcdbf;
    --color-01-tomato-light-90: #fdebe7;
    --color-02-persimmon-dark-70: #44260a;
    --color-02-persimmon-dark-50: #6f3d0f;
    --color-02-persimmon-dark-20: #ba641c;
    --color-02-persimmon: #ee7f27;
    --color-02-persimmon-light-60: #f9c896;
    --color-02-persimmon-light-75: #fbddba;
    --color-02-persimmon-light-90: #fcf0e4;
    --color-03-mango-dark-70: #44360a;
    --color-03-mango-dark-50: #705810;
    --color-03-mango-dark-20: #bc911e;
    --color-03-mango: #f2bc2a;
    --color-03-mango-light-60: #fae49c;
    --color-03-mango-light-75: #fbedbe;
    --color-03-mango-light-90: #fcf6e4;
    --color-04-lime-dark-70: #2d3b0c;
    --color-04-lime-dark-50: #496211;
    --color-04-lime-dark-20: #76a41f;
    --color-04-lime: #9ad72d;
    --color-04-lime-light-60: #dbed99;
    --color-04-lime-light-75: #e9f1bb;
    --color-04-lime-light-90: #f6f7e3;
    --color-05-pear-dark-70: #183917;
    --color-05-pear-dark-50: #255e23;
    --color-05-pear-dark-20: #3f9c3c;
    --color-05-pear: #55cd4f;
    --color-05-pear-light-60: #bbe9aa;
    --color-05-pear-light-75: #d7efc5;
    --color-05-pear-light-90: #eff6e7;
    --color-06-mint-dark-70: #0e372b;
    --color-06-mint-dark-50: #135845;
    --color-06-mint-dark-20: #219271;
    --color-06-mint: #30c093;
    --color-06-mint-light-60: #aae3cc;
    --color-06-mint-light-75: #ceecdd;
    --color-06-mint-light-90: #edf5ee;
    --color-07-seaweed-dark-70: #102e32;
    --color-07-seaweed-dark-50: #164b52;
    --color-07-seaweed-dark-20: #227787;
    --color-07-seaweed: #309ab1;
    --color-07-seaweed-light-60: #abd5d8;
    --color-07-seaweed-light-75: #cee4e4;
    --color-07-seaweed-light-90: #edf2f1;
    --color-08-blueberry-dark-70: #142435;
    --color-08-blueberry-dark-50: #1f3a58;
    --color-08-blueberry-dark-20: #335f92;
    --color-08-blueberry: #477bc4;
    --color-08-blueberry-light-60: #b5c7e0;
    --color-08-blueberry-light-75: #d4dce7;
    --color-08-blueberry-light-90: #f0f0f2;
    --color-09-grape-dark-70: #28153c;
    --color-09-grape-dark-50: #401f63;
    --color-09-grape-dark-20: #6b36ac;
    --color-09-grape: #8f4ae8;
    --color-09-grape-light-60: #d5afee;
    --color-09-grape-light-75: #e7cdf0;
    --color-09-grape-light-90: #f5e9f5;
    --color-10-plum-dark-70: #311636;
    --color-10-plum-dark-50: #4f215a;
    --color-10-plum-dark-20: #803494;
    --color-10-plum: #a847c7;
    --color-10-plum-light-60: #e0afe1;
    --color-10-plum-light-75: #edcde9;
    --color-10-plum-light-90: #f7ebf3;
    --color-11-raspberry-dark-70: #3e1725;
    --color-11-raspberry-dark-50: #64233b;
    --color-11-raspberry-dark-20: #a83c63;
    --color-11-raspberry: #db4e7f;
    --color-11-raspberry-light-60: #f1b2c2;
    --color-11-raspberry-light-75: #f6cfd7;
    --color-11-raspberry-light-90: #fbecee;
    --color-12-greyscale-black: #000;
    --color-12-greyscale-grey-05: hsl(0, 0%, 5%);
    --color-12-greyscale-grey-15: hsl(0, 0%, 15%);
    --color-12-greyscale-grey-50: hsl(0, 0%, 50%);
    --color-12-greyscale-grey-90: hsl(0, 0%, 90%);
    --color-12-greyscale-grey-95: hsl(0, 0%, 95%);
    --color-12-greyscale-grey-98: hsl(0, 0%, 98%);
    --color-12-greyscale-white: #fff;

    --plyr-color-main: var(--color-07-seaweed);
    

    /* Replaced by different subjects' own patterns. */
    --pattern: url("https://e-oppi.fi/opiq/patterns/pattern-20-science.svg");
    --pattern-dark: url("https://e-oppi.fi/opiq/patterns/pattern-dark-20-science.svg");
    --pattern-02: url("https://e-oppi.fi/opiq/patterns/pattern-02-science.svg");
    --pattern-dark-02: url("https://e-oppi.fi/opiq/patterns/pattern-dark-02-science.svg");
    --pattern-size: 6.83rem;
    --pattern-size-large: 13.65rem;

    --gap: 1rem;
    --radiussmall: 0.15rem;
	--radius: 0.3rem;
	--radiuslarge: 0.5rem;
}


/*
 *      LAYOUTING THINGS
 */

.scope-kit-CHpdo .block h3, .scope-kit-CHpdo .block h4, .scope-kit-CHpdo .block h5, .scope-kit-CHpdo .block h6, .scope-kit-CHpdo .block p,
.scope-kit-CHpdo .block .exercise-description, .scope-kit-CHpdo .block .intro, .scope-kit-CHpdo .block .options, .scope-kit-CHpdo .block span.origin, .scope-kit-CHpdo .block .answers,
.scope-kit-CHpdo .block .twoCols, .scope-kit-CHpdo .block .threeCols, .scope-kit-CHpdo .block .fourCols, .scope-kit-CHpdo .block .fiveCols,
div[class*="kit-CHpdo-box-"],
.scope-kit-CHpdo .block.section-speak-content,
.scope-kit-CHpdo .block .okf-collapsible {
    margin-bottom: var(--gap);
}

.scope-kit-CHpdo .container .block {
    padding-bottom: 0;
}

div[class*="kit-CHpdo-box-"] > :first-child,
.kit-CHpdo-box-exercise .exercise .head h3,
.slick-slide .exercise .head h3 {
    margin-top: 0;
}

div[class*="kit-CHpdo-box-"] > :last-child,
div[class*="kit-CHpdo-box-"] .okf-collapsible:last-of-type,
.scope-kit-CHpdo .block blockquote cite { /*todo*/
    margin-bottom: 0;
}



/*
 *      GENERAL TEXT STUFF
 */

::selection {
   background: var(--color-07-seaweed-dark-20);
   color: var(--color-07-seaweed-light-90);
 }

.annotator-hl-temporary {
    background: var(--color-07-seaweed-light-75);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fira Sans Condensed', sans-serif;
    letter-spacing: normal;
    font-weight: 500;
}

h1, h2 {
    font-weight: 700;
}

/* h3-h6 are usable in the editor. */
.scope-kit-CHpdo .block h3,
.scope-kit-CHpdo .block h4,
.scope-kit-CHpdo .block h5,
.scope-kit-CHpdo .block h6 {
    clear: both;
    margin-top: calc(var(--gap)*2);
    margin-bottom: var(--gap);
}

.scope-kit-CHpdo .block #mediaGallery p,
.scope-kit-CHpdo .block .list li,
.scope-kit-CHpdo .block p,
.scope-kit-CHpdo .block .common.serif,
.scope-kit-CHpdo .block .list:not(.sans-serif) li,
.scope-kit-CHpdo .block .fox-sliders .value {
    font-family: Arial, sans-serif;
}

.scope-kit-CHpdo .block #mediaGallery p,
.scope-kit-CHpdo .block .list li,
.scope-kit-CHpdo .block .common.serif,
.scope-kit-CHpdo .block .fox-sliders .value,
.scope-kit-CHpdo .block cite,
.scope-kit-CHpdo .block span.origin,
.scope-kit-CHpdo .block .answers,
.scope-kit-CHpdo .block .caption,
.scope-kit-CHpdo .block .options,
.scope-kit-CHpdo .block h6,
.scope-kit-CHpdo .block p {
    color: var(--color-12-greyscale-grey-15);
    font-size: 1rem;
}

.fox-sliders .value {
    margin: 0px 6px 0;
}

#mediaCaptionContext .caption {
    color: var(--color-12-greyscale-grey-90);
}

.scope-kit-CHpdo .block a:link,
.scope-kit-CHpdo .block a:visited,
.scope-kit-CHpdo .block .anchorMarker,
.scope-kit-CHpdo .block .cui-marker-chapter-link-media,
.scope-kit-CHpdo .block .cui-marker-file,
.scope-kit-CHpdo .block .mediaReference,
.scope-kit-CHpdo .block .internalLinkMarker {
    color: var(--color-07-seaweed-dark-20);
    text-decoration: none !important;
    border-bottom: 2px solid var(--color-07-seaweed);
    padding-bottom: 0;
}

.scope-kit-CHpdo .block a:hover,
.scope-kit-CHpdo .block a:active,
.scope-kit-CHpdo .block a:focus,
.scope-kit-CHpdo .block .anchorMarker:hover,
.scope-kit-CHpdo .block .anchorMarker:active,
.scope-kit-CHpdo .block .anchorMarker:focus,
.scope-kit-CHpdo .block .cui-marker-chapter-link-media:hover,
.scope-kit-CHpdo .block .cui-marker-chapter-link-media:active,
.scope-kit-CHpdo .block .cui-marker-chapter-link-media:focus,
.scope-kit-CHpdo .block .cui-marker-file:hover,
.scope-kit-CHpdo .block .cui-marker-file:active,
.scope-kit-CHpdo .block .cui-marker-file:focus,
.scope-kit-CHpdo .block .mediaReference:hover,
.scope-kit-CHpdo .block .mediaReference:active,
.scope-kit-CHpdo .block .mediaReference:focus,
.scope-kit-CHpdo .block .internalLinkMarker:hover,
.scope-kit-CHpdo .block .internalLinkMarker:active,
.scope-kit-CHpdo .block .internalLinkMarker:focus {
    color: var(--color-06-mint-dark-20);
    border-color: var(--color-06-mint);
}

.scope-kit-CHpdo .block .definition {
    border-bottom: 2px dashed var(--color-07-seaweed);
    padding-bottom: 0;
}

.scope-kit-CHpdo .block .media .caption {
    font-style: italic;
    background: var(--color-12-greyscale-grey-95);
    padding: calc(var(--gap)/2) var(--gap);
}

.scope-kit-CHpdo .block blockquote {
    border-left: var(--color-07-seaweed-light-75) solid calc(var(--gap)/2);
    padding-left: var(--gap);
}

.scope-kit-CHpdo .block blockquote p {
    quotes: "\0022" "\0022";
}

.scope-kit-CHpdo .block blockquote p::before,
.scope-kit-CHpdo .block blockquote p::after {
    font-style: italic;
    font-weight: bold;
    color: var(--color-07-seaweed);
}

.scope-kit-CHpdo .block blockquote p::before {
    content: open-quote;
    padding-right: 0.4rem;
}

.scope-kit-CHpdo .block blockquote p::after {
    content: close-quote;
}

.scope-kit-CHpdo .block blockquote cite::before {
    content: "\2013\0020";
}

.scope-kit-CHpdo .block .media .mediaNode.text {
    /* If quote is too high it would get scroll bars. This fixes it. */
    max-height: none;
}

.scope-kit-CHpdo .block .okf-collapsible-trigger h3,
.scope-kit-CHpdo .block .okf-collapsible-trigger h4,
.scope-kit-CHpdo .block .okf-collapsible-trigger h5,
.scope-kit-CHpdo .block .okf-collapsible-trigger h6 {
    margin-bottom: 0;
    margin-top: 0;
}

.scope-kit-CHpdo .block .okf-collapsible-content {
    margin-top: var(--gap);
}

.scope-kit-CHpdo .block .okf-collapsible-trigger {
    min-height: 0;
    float: none;
}

.scope-kit-CHpdo .block .okf-collapsible-trigger:before {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.scope-kit-CHpdo .block .okf-collapsible.visible .okf-collapsible-trigger:before {
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.miniGallery .textNode {
    background-color: var(--color-03-mango-light-60);
}




/* --- Exercises --- */

.scope-kit-CHpdo .block .drop-option,
.scope-kit-CHpdo .block .drag-option-content,
.scope-kit-CHpdo .block .dragdrop .group:not([data-default=true]),
.scope-kit-CHpdo .block .dragdrop .groupContent > ul > li,
.scope-kit-CHpdo .block .sortElements .elements > li {
    background: var(--color-07-seaweed-light-90);
}

.scope-kit-CHpdo .block .drop-option,
.scope-kit-CHpdo .block .drag-option-content,
.scope-kit-CHpdo .block .droppable-area .drag-option-content,
.scope-kit-CHpdo .block .droppable-area:empty,
.scope-kit-CHpdo .block .dragdrop .group,
.scope-kit-CHpdo .block .dragdrop .group:not([data-default=true]) > .groupContent,
.scope-kit-CHpdo .block .dragdrop .groupContent > ul > li,
.scope-kit-CHpdo .block .sortElements .elements > li {
    border-color: var(--color-07-seaweed);
}

.scope-kit-CHpdo .block .sortElements .elements > li {
    border-radius: var(--radiussmall);
}

.scope-kit-CHpdo .block .sortElements .elements > li:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.scope-kit-CHpdo .block .sortElements .elements > li:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.scope-kit-CHpdo .block .puzzle td.entry,
.scope-kit-CHpdo .block .puzzle input,
.scope-kit-CHpdo .block .rf-tablestyle {
    background-color: var(--color-12-greyscale-grey-98);
}

.scope-kit-CHpdo .block .rf-tablestyle {
    border-color: var(--color-12-greyscale-grey-90);
}

.scope-kit-CHpdo .block .selectedWord,
.scope-kit-CHpdo .block .puzzle .active,
.puzzle-clues .clues-active {
    background-color: var(--color-03-mango-light-75);
}

.scope-kit-CHpdo .block .selectedWord.selectedWordfirst,
.scope-kit-CHpdo .block .puzzle td input:focus {
    background-color: var(--color-03-mango);
}

.scope-kit-CHpdo .block .clickElement1 {
    background-color: var(--color-05-pear);
}

html .scope-kit-CHpdo .block table tr td.selectedWordTrajectory {
    background-color: var(--color-12-greyscale-grey-90)
}

.scope-kit-CHpdo .block .wordsearchContext .wrong,
.scope-kit-CHpdo .block .math-entry.wrong,
.scope-kit-CHpdo .block input.wrong,
.scope-kit-CHpdo .block .gap.wrong,
.scope-kit-CHpdo .block [data-is-evaluation-unit].wrong .gap,
.scope-kit-CHpdo .block select.wrong,
.scope-kit-CHpdo .block .puzzle-clues .wrong,
.scope-kit-CHpdo .block .taskSelectNodes .node.wrong,
.scope-kit-CHpdo .block .editText .performed-action-container .performed-action.incorrect,
.scope-kit-CHpdo .block .dragToArea li.wrong {
    color: var(--color-01-tomato-dark-20);
}

.scope-kit-CHpdo .block .taskSelectNodes .node.wrong,
.scope-kit-CHpdo .block .editText .needed-action-container {
    border-color: var(--color-01-tomato-dark-20);
}

.scope-kit-CHpdo .block .drag-option-content.wrong,
.scope-kit-CHpdo .block .dragdrop .group .groupContent > ul > li.wrong,
.scope-kit-CHpdo .block .sortElements .elements > li.wrong,
.scope-kit-CHpdo .block .socket.wrong,
.scope-kit-CHpdo .block .socket.wrong .droppable-option,
.scope-kit-CHpdo .block .taskSelectNodes .node.selected.wrong {
    background-color: var(--color-01-tomato-dark-20);
    border-color: var(--color-01-tomato-dark-20) !important; /* Needs !important because there's one in the Opiq style sheet. */
}

.scope-kit-CHpdo .block .editText .performed-action-container .performed-action.incorrect {
    background-color: var(--color-01-tomato-light-60);
}

.scope-kit-CHpdo .block .wordsearchContext .correct,
.scope-kit-CHpdo .block .math-entry.correct,
.scope-kit-CHpdo .block input.correct,
.scope-kit-CHpdo .block .gap.correct,
.scope-kit-CHpdo .block [data-is-evaluation-unit].correct .gap,
.scope-kit-CHpdo .block select.correct,
.scope-kit-CHpdo .block .puzzle-clues .correct,
.scope-kit-CHpdo .block .taskSelectNodes .node.correct.selected,
.scope-kit-CHpdo .block .puzzle input.done,
.scope-kit-CHpdo .block .editText .performed-action-container .performed-action.correct,
.scope-kit-CHpdo .block .dragToArea li.correct {
    color: var(--color-05-pear-dark-20);
}

.scope-kit-CHpdo .block .taskSelectNodes .node.correct.selected {
    border-color: var(--color-05-pear-dark-20);
    background-color: transparent;
}

.scope-kit-CHpdo .block .drag-option-content.correct,
.scope-kit-CHpdo .block .dragdrop .group .groupContent > ul > li.correct,
.scope-kit-CHpdo .block .sortElements .elements > li.correct,
.scope-kit-CHpdo .block .socket.correct,
.scope-kit-CHpdo .block .socket.correct .droppable-option {
    background-color: var(--color-05-pear-dark-20);
    border-color: var(--color-05-pear-dark-20);
}

.scope-kit-CHpdo .block .puzzle input.done,
.scope-kit-CHpdo .block .editText .performed-action-container .performed-action.correct {
    background-color: var(--color-05-pear-light-75);
}

.scope-kit-CHpdo .block .taskSelectNodes .node.selected {
    color: var(--color-12-greyscale-white);
    background-color: var(--color-12-greyscale-grey-15);
}

.scope-kit-CHpdo .block .checkbox-wrap.absolute-element,
.scope-kit-CHpdo .block .gap-wrap.absolute-element,
.scope-kit-CHpdo .block .radio-wrap.absolute-element,
.scope-kit-CHpdo .block .select.absolute-element {
    background-color: rgba(242, 242, 242, 0.75); /* --color-12-greyscale-grey-95 */
    border: 0.1rem solid var(--color-12-greyscale-grey-50);
}

.scope-kit-CHpdo .block .dragToAreaItem.active,
.scope-kit-CHpdo .block .dragToAreaItem:hover {
    background-color: var(--color-03-mango-light-60);
    box-shadow: 0 0 var(--gap) calc(var(--gap)/2) var(--color-03-mango-light-60);
}

.scope-kit-CHpdo .block .droppable-element {
    border-radius: var(--radius);
}

.scope-kit-CHpdo .block .droppable-area,
.scope-kit-CHpdo .block .droppable-content {
    border-radius: var(--radiussmall);
}

.scope-kit-CHpdo .block .slick-slide {
    padding-top: 41px;
}

.scope-kit-CHpdo .block .slick-slide .reflect .head,
.scope-kit-CHpdo .block .slick-slide > h3:first-of-type,
.scope-kit-CHpdo .block .slick-slide > h4:first-of-type,
.scope-kit-CHpdo .block .slick-slide > h5:first-of-type,
.scope-kit-CHpdo .block .slick-slide > h6:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

.scope-kit-CHpdo .dragToArea .color1 { background-color: var(--color-02-persimmon-dark-20);}
.scope-kit-CHpdo .dragToArea .color2 { background-color: var(--color-04-lime-dark-20);}
.scope-kit-CHpdo .dragToArea .color3 { background-color: var(--color-01-tomato-dark-20);}
.scope-kit-CHpdo .dragToArea .color4 { background-color: var(--color-07-seaweed-dark-20);}
.scope-kit-CHpdo .dragToArea .color5 { background-color: var(--color-11-raspberry-dark-20);}



/*
 *      KIT SPECIFIC BITS
 */

/* --- Text Styles --- */

.kit-CHpdo-text-button {
    background: var(--color-07-seaweed);
    border-radius: var(--radius);
    box-shadow: 0 calc(var(--gap) / 6) 0 var(--color-07-seaweed-dark-20);
    color: var(--color-12-greyscale-white);
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0.8rem 0.15rem 0.8rem;
    text-decoration: none !important;
    text-shadow: 0 0 calc(var(--gap) / 6) var(--color-07-seaweed-dark-20);
}

.kit-CHpdo-text-button:hover {
    background-color: var(--color-06-mint);
    box-shadow: 0 calc(var(--gap) / 6) 0 var(--color-06-mint-dark-20);
    text-shadow: 0 0 calc(var(--gap) / 6) var(--color-06-mint-dark-20);
}

.kit-CHpdo-text-button:active {
    box-shadow: none;
    transform: translateY(calc(var(--gap) / 6));
}

span[class*="kit-CHpdo-color-"] span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span[class*="kit-CHpdo-color-"] {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}



/* --- Box Styles --- */

.kit-CHpdo-box-highlight,
.kit-CHpdo-box-example,
.kit-CHpdo-box-exercise,
.kit-CHpdo-box-extra-info,
.kit-CHpdo-box-summary {
    clear: both;
    padding: var(--gap);
    overflow: hidden;
}

.kit-CHpdo-box-highlight,
.kit-CHpdo-box-example,
.kit-CHpdo-box-summary {
    background: var(--color-12-greyscale-grey-95);
}

.kit-CHpdo-box-highlight {
    border: 0.1rem solid var(--color-07-seaweed);
    border-radius: var(--radiuslarge) var(--radiuslarge) var(--radiuslarge) 0;
}

.kit-CHpdo-box-highlight.kit-CHpdo-color-5.kit-CHpdo-box-highlight-correct,
.kit-CHpdo-box-highlight.kit-CHpdo-color-1.kit-CHpdo-box-highlight-incorrect {
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 3rem;
    padding-right: 3.5rem;
    position: relative;
}

.kit-CHpdo-box-highlight.kit-CHpdo-color-5.kit-CHpdo-box-highlight-correct::before,
.kit-CHpdo-box-highlight.kit-CHpdo-color-1.kit-CHpdo-box-highlight-incorrect::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 2.5rem;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.kit-CHpdo-box-highlight.kit-CHpdo-color-5.kit-CHpdo-box-highlight-correct::before {
    color: var(--color-05-pear);
    content: "\e86c";
}

.kit-CHpdo-box-highlight.kit-CHpdo-color-1.kit-CHpdo-box-highlight-incorrect::before {
    color: var(--color-01-tomato);
    content: "\e5c9";
}

.kit-CHpdo-box-example {
    border-left: 0.2rem solid var(--color-07-seaweed);
    border-right: 0.2rem solid var(--color-07-seaweed);
}

.kit-CHpdo-box-summary {
    border-top: 0.1rem solid var(--color-07-seaweed);
    border-bottom: 0.1rem solid var(--color-07-seaweed);
}

.kit-CHpdo-box-reference {
    background-color: transparent !important;
}

.kit-CHpdo-box-reference:before {
    content: '';
    border-top: solid 0.1rem var(--color-07-seaweed);
    display: block;
    margin-bottom: 0.3rem;
    width: 25%;
}

.kit-CHpdo-box-reference p {
    font-size: 0.8rem;
}

.kit-CHpdo-box-exercise {
    border: 0.2rem solid var(--color-07-seaweed-light-60);
    border-image: linear-gradient(135deg, var(--color-07-seaweed), var(--color-07-seaweed-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-07-seaweed-light-90) 75%,var(--color-07-seaweed)) 1;
    background-color: transparent !important;
}

.kit-CHpdo-box-exercise .reflect {
    margin-bottom: 0;
}

.kit-CHpdo-box-extra-info {
    background: var(--color-12-greyscale-grey-98);
    border: 0.1rem dashed var(--color-07-seaweed);
}

.kit-CHpdo-box-formula {
    margin-left: 1rem;
}

[class*="kit-CHpdo-box-"] > :is(h3, h4, h5, h6):first-of-type {
    margin-top: 0;
}

/* --- Tables --- */

.scope-kit-CHpdo .kit-CHpdo-box-table table.common {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0.2rem 0;
    clear: both;
    vertical-align: middle;
    margin-bottom: var(--gap);
}

.scope-kit-CHpdo .kit-CHpdo-box-table table.common td {
    background-color: var(--color-12-greyscale-white);
    border: 0;
    border-bottom: 0.05rem solid var(--color-12-greyscale-grey-50);
    color: var(--color-12-greyscale-grey-15);
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}

.scope-kit-CHpdo .kit-CHpdo-box-table-caption h6 {
    background: var(--color-07-seaweed);
    background-blend-mode: overlay;
    background-clip: padding-box;
    background-image: var(--pattern);
    background-position: center;
    background-repeat: repeat;
    background-size: var(--pattern-size);
    border: 0.2rem solid transparent;
    border-top: 0;
    color: var(--color-12-greyscale-white);
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 1.4rem !important;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2rem;
    padding: 0.5rem;
    text-align: left;
}

.scope-kit-CHpdo .kit-CHpdo-box-table-caption table.common {
    margin-top: 0;
}

.scope-kit-CHpdo .kit-CHpdo-box-table table.common tr:nth-child(odd) td {
    background-color: var(--color-12-greyscale-grey-98);
}

.scope-kit-CHpdo .kit-CHpdo-box-table-row table.common tr:first-child td,
.scope-kit-CHpdo .kit-CHpdo-box-table-column table.common tr td:first-child {
    background: var(--color-12-greyscale-grey-90) !important;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    vertical-align: middle;
}

.scope-kit-CHpdo .block .kit-CHpdo-quote-no-cite blockquote cite {
    display: none;
}


/* --- Box and Text colors --- */

span.kit-CHpdo-color-1 { color: var(--color-01-tomato-dark-20); }
span.kit-CHpdo-color-1 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-1 {
    background-color: var(--color-01-tomato);
    color: var(--color-01-tomato-light-90);
}

span.kit-CHpdo-color-2 { color: var(--color-02-persimmon-dark-20); }
span.kit-CHpdo-color-2 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-2 {
    background-color: var(--color-02-persimmon);
    color: var(--color-02-persimmon-light-90);
}

span.kit-CHpdo-color-3 { color: var(--color-03-mango-dark-20); }
span.kit-CHpdo-color-3 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-3 {
    background-color: var(--color-03-mango);
    color: var(--color-03-mango-light-90);
}

span.kit-CHpdo-color-4 { color: var(--color-04-lime-dark-20); }
span.kit-CHpdo-color-4 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-4 {
    background-color: var(--color-04-lime);
    color: var(--color-04-lime-light-90);
}

span.kit-CHpdo-color-5 { color: var(--color-05-pear-dark-20); }
span.kit-CHpdo-color-5 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-5 {
    background-color: var(--color-05-pear);
    color: var(--color-05-pear-light-90);
}

span.kit-CHpdo-color-6 { color: var(--color-06-mint-dark-20); }
span.kit-CHpdo-color-6 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-6 {
    background-color: var(--color-06-mint);
    color: var(--color-06-mint-light-90);
}

span.kit-CHpdo-color-7 { color: var(--color-07-seaweed-dark-20); }
span.kit-CHpdo-color-7 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-7 {
    background-color: var(--color-07-seaweed);
    color: var(--color-07-seaweed-light-90);
}

span.kit-CHpdo-color-8 { color: var(--color-08-blueberry-dark-20); }
span.kit-CHpdo-color-8 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-8 {
    background-color: var(--color-08-blueberry);
    color: var(--color-08-blueberry-light-90);
}

span.kit-CHpdo-color-9 { color: var(--color-09-grape-dark-20); }
span.kit-CHpdo-color-9 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-9 {
    background-color: var(--color-09-grape);
    color: var(--color-09-grape-light-90);
}

span.kit-CHpdo-color-10 { color: var(--color-10-plum-dark-20); }
span.kit-CHpdo-color-10 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-10 {
    background-color: var(--color-10-plum);
    color: var(--color-10-plum-light-90);
}

span.kit-CHpdo-color-11 { color: var(--color-11-raspberry-dark-20); }
span.kit-CHpdo-color-11 span.kit-CHpdo-w-bg,
span.kit-CHpdo-w-bg span.kit-CHpdo-color-11 {
    background-color: var(--color-11-raspberry);
    color: var(--color-11-raspberry-light-90);
}

.kit-CHpdo-color-1,
.kit-CHpdo-color-1.kit-CHpdo-box-reference:before {
    border-color: var(--color-01-tomato);
}

.kit-CHpdo-color-2,
.kit-CHpdo-color-2.kit-CHpdo-box-reference:before {
    border-color: var(--color-02-persimmon);
}

.kit-CHpdo-color-3,
.kit-CHpdo-color-3.kit-CHpdo-box-reference:before {
    border-color: var(--color-03-mango);
}

.kit-CHpdo-color-4,
.kit-CHpdo-color-4.kit-CHpdo-box-reference:before {
    border-color: var(--color-04-lime);
}

.kit-CHpdo-color-5,
.kit-CHpdo-color-5.kit-CHpdo-box-reference:before {
    border-color: var(--color-05-pear);
}

.kit-CHpdo-color-6,
.kit-CHpdo-color-6.kit-CHpdo-box-reference:before {
    border-color: var(--color-06-mint);
}

.kit-CHpdo-color-7,
.kit-CHpdo-color-7.kit-CHpdo-box-reference:before {
    border-color: var(--color-07-seaweed);
}

.kit-CHpdo-color-8,
.kit-CHpdo-color-8.kit-CHpdo-box-reference:before {
    border-color: var(--color-08-blueberry);
}

.kit-CHpdo-color-9,
.kit-CHpdo-color-9.kit-CHpdo-box-reference:before {
    border-color: var(--color-09-grape);
}

.kit-CHpdo-color-10,
.kit-CHpdo-color-10.kit-CHpdo-box-reference:before {
    border-color: var(--color-10-plum);
}

.kit-CHpdo-color-11,
.kit-CHpdo-color-11.kit-CHpdo-box-reference:before {
    border-color: var(--color-11-raspberry);
}

.kit-CHpdo-color-1.kit-CHpdo-w-bg {
    background-color: var(--color-01-tomato-light-90);
}

.kit-CHpdo-color-2.kit-CHpdo-w-bg {
    background-color: var(--color-02-persimmon-light-90);
}

.kit-CHpdo-color-3.kit-CHpdo-w-bg {
    background-color: var(--color-03-mango-light-90);
}

.kit-CHpdo-color-4.kit-CHpdo-w-bg {
    background-color: var(--color-04-lime-light-90);
}

.kit-CHpdo-color-5.kit-CHpdo-w-bg {
    background-color: var(--color-05-pear-light-90);
}

.kit-CHpdo-color-6.kit-CHpdo-w-bg {
    background-color: var(--color-06-mint-light-90);
}

.kit-CHpdo-color-7.kit-CHpdo-w-bg {
    background-color: var(--color-07-seaweed-light-90);
}

.kit-CHpdo-color-8.kit-CHpdo-w-bg {
    background-color: var(--color-08-blueberry-light-90);
}

.kit-CHpdo-color-9.kit-CHpdo-w-bg {
    background-color: var(--color-09-grape-light-90);
}

.kit-CHpdo-color-10.kit-CHpdo-w-bg {
    background-color: var(--color-10-plum-light-90);
}

.kit-CHpdo-color-11.kit-CHpdo-w-bg {
    background-color: var(--color-11-raspberry-light-90);
}

.kit-CHpdo-color-1.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-01-tomato), var(--color-01-tomato-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-01-tomato-light-90) 75%,var(--color-01-tomato)) 1;
}

.kit-CHpdo-color-2.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-02-persimmon), var(--color-02-persimmon-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-02-persimmon-light-90) 75%,var(--color-02-persimmon)) 1;
}

.kit-CHpdo-color-3.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-03-mango), var(--color-03-mango-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-03-mango-light-90) 75%,var(--color-03-mango)) 1;
}

.kit-CHpdo-color-4.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-04-lime), var(--color-04-lime-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-04-lime-light-90) 75%,var(--color-04-lime)) 1;
}

.kit-CHpdo-color-5.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-05-pear), var(--color-05-pear-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-05-pear-light-90) 75%,var(--color-05-pear)) 1;
}

.kit-CHpdo-color-6.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-06-mint), var(--color-06-mint-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-06-mint-light-90) 75%,var(--color-06-mint)) 1;
}

.kit-CHpdo-color-7.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-07-seaweed), var(--color-07-seaweed-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-07-seaweed-light-90) 75%,var(--color-07-seaweed)) 1;
}

.kit-CHpdo-color-8.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-08-blueberry), var(--color-08-blueberry-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-08-blueberry-light-90) 75%,var(--color-08-blueberry)) 1;
}

.kit-CHpdo-color-9.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-09-grape), var(--color-09-grape-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-09-grape-light-90) 75%,var(--color-09-grape)) 1;
}

.kit-CHpdo-color-10.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-10-plum), var(--color-10-plum-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-10-plum-light-90) 75%,var(--color-10-plum)) 1;
}

.kit-CHpdo-color-11.kit-CHpdo-box-exercise {
    border-image: linear-gradient(135deg, var(--color-11-raspberry), var(--color-11-raspberry-light-90) 25%, var(--color-12-greyscale-grey-95) 35%, var(--color-12-greyscale-grey-95) 65%, var(--color-11-raspberry-light-90) 75%,var(--color-11-raspberry)) 1;
}

.kit-CHpdo-color-1.kit-CHpdo-box-table-caption h6 { background-color: var(--color-01-tomato); }
.kit-CHpdo-color-2.kit-CHpdo-box-table-caption h6 { background-color: var(--color-02-persimmon); }
.kit-CHpdo-color-3.kit-CHpdo-box-table-caption h6 { background-color: var(--color-03-mango); }
.kit-CHpdo-color-4.kit-CHpdo-box-table-caption h6 { background-color: var(--color-04-lime); }
.kit-CHpdo-color-5.kit-CHpdo-box-table-caption h6 { background-color: var(--color-05-pear); }
.kit-CHpdo-color-6.kit-CHpdo-box-table-caption h6 { background-color: var(--color-06-mint); }
.kit-CHpdo-color-7.kit-CHpdo-box-table-caption h6 { background-color: var(--color-07-seaweed); }
.kit-CHpdo-color-8.kit-CHpdo-box-table-caption h6 { background-color: var(--color-08-blueberry); }
.kit-CHpdo-color-9.kit-CHpdo-box-table-caption h6 { background-color: var(--color-09-grape); }
.kit-CHpdo-color-10.kit-CHpdo-box-table-caption h6 { background-color: var(--color-10-plum); }
.kit-CHpdo-color-11.kit-CHpdo-box-table-caption h6 { background-color: var(--color-11-raspberry); }

.section[class*="kit-CHpdo-color-"] {
    margin-bottom: var(--gap);
    background-blend-mode: normal;
    background-clip: padding-box;
    background-image: var(--pattern-dark-02);
    background-position: center;
    background-repeat: repeat;
    background-size: var(--pattern-size-large);
    border-top: 1px solid var(--color-12-greyscale-grey-90);
    border-bottom: 1px solid var(--color-12-greyscale-grey-90);
}

.section.kit-CHpdo-color-1 { background-color: var(--color-01-tomato-light-90); border-color: var(--color-01-tomato-light-75);}
.section.kit-CHpdo-color-2 { background-color: var(--color-02-persimmon-light-90); border-color: var(--color-02-persimmon-light-75);}
.section.kit-CHpdo-color-3 { background-color: var(--color-03-mango-light-90); border-color: var(--color-03-mango-light-75);}
.section.kit-CHpdo-color-4 { background-color: var(--color-04-lime-light-90); border-color: var(--color-04-lime-light-75);}
.section.kit-CHpdo-color-5 { background-color: var(--color-05-pear-light-90); border-color: var(--color-05-pear-light-75);}
.section.kit-CHpdo-color-6 { background-color: var(--color-06-mint-light-90); border-color: var(--color-06-mint-light-75);}
.section.kit-CHpdo-color-7 { background-color: var(--color-07-seaweed-light-90); border-color: var(--color-07-seaweed-light-75);}
.section.kit-CHpdo-color-8 { background-color: var(--color-08-blueberry-light-90); border-color: var(--color-08-blueberry-light-75);}
.section.kit-CHpdo-color-9 { background-color: var(--color-09-grape-light-90); border-color: var(--color-09-grape-light-75);}
.section.kit-CHpdo-color-10 { background-color: var(--color-10-plum-light-90); border-color: var(--color-10-plum-light-75);}
.section.kit-CHpdo-color-11 { background-color: var(--color-11-raspberry-light-90); border-color: var(--color-11-raspberry-light-75);}


.section[class*="kit-CHpdo-color-"] > .container {
    border-top: none;
    background-color: var(--color-12-greyscale-grey-98);
    padding: var(--gap);
    margin-bottom: calc(var(--gap)*3);
    margin-top: calc(var(--gap)*3);
}

.section[class*="kit-CHpdo-color-"] + .section > .container {
    border-top: none;
}



/* --- Icons --- */

[class*="kit-CHpdo-icon-"] :is(h3, h4, h5, h6):first-of-type,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-lightbulb .head h3 {
    padding-left: 1.7em;
    position: relative;
}

[class*="kit-CHpdo-icon-"] :is(h4):first-of-type { padding-left: 1.75em; }
[class*="kit-CHpdo-icon-"] :is(h5):first-of-type { padding-left: 1.8em; }
[class*="kit-CHpdo-icon-"] :is(h6):first-of-type { padding-left: 1.85em; }

[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-07-seaweed);
    border-radius: 100%;
    color: var(--color-07-seaweed-light-90);
    display: inline-block;
    font-family: 'Material Symbols Outlined';
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    line-height: 1;
    padding: 0.4rem;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0rem;
}


.kit-CHpdo-icon-arrow-forward > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-arrow-forward .head h3::before {
    content: "\e5c8";
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-chat > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-chat .head h3::before {
    content: "\e0b7";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-code-blocks > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-code-blocks .head h3::before {
    content: "\f84d";
}

.kit-CHpdo-icon-draw > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-draw .head h3::before {
    content: "\e746";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-edit > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-edit .head h3::before {
    content: "\e3c9";
}

.kit-CHpdo-icon-exclamation > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-exclamation .head h3::before {
    content: "\f22f";
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-flatware > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-flatware .head h3::before {
    content: "\f00c";
}

.kit-CHpdo-icon-forum > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-forum .head h3::before {
    content: "\e0bf";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-hearing > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-hearing .head h3::before {
    content: "\e023";
    font-variation-settings: 'FILL' 0, 'wght'700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-lightbulb > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-lightbulb .head h3::before {
    content: "\e0f0";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-link> :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-link .head h3::before {
    content: "\e157";
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-question-mark > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-question-mark .head h3::before {
    content: "\eb8b";
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-search > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-searcg .head h3::before {
    content: "\e8b6";
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-science > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-science .head h3::before {
    content: "\ea4b";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-icon-star-rate > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-box-exercise.kit-CHpdo-icon-star-rate .head h3::before {
    content: "\f0ec";
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.kit-CHpdo-color-1[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-1.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-01-tomato);
    color: var(--color-01-tomato-light-90);
}

.kit-CHpdo-color-2[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-2.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-02-persimmon);
    color: var(--color-02-persimmon-light-90);
}

.kit-CHpdo-color-3[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-3.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-03-mango);
    color: var(--color-03-mango-light-90);
}

.kit-CHpdo-color-4[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-4.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-04-lime);
    color: var(--color-04-lime-light-90);
}

.kit-CHpdo-color-5[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-5.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-05-pear);
    color: var(--color-05-pear-light-90);
}

.kit-CHpdo-color-6[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-6.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-06-mint);
    color: var(--color-06-mint-light-90);
}

.kit-CHpdo-color-7[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-7.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-07-seaweed);
    color: var(--color-07-seaweed-light-90);
}

.kit-CHpdo-color-8[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-8.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-08-blueberry);
    color: var(--color-08-blueberry-light-90);
}

.kit-CHpdo-color-9[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-9.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-09-grape);
    color: var(--color-09-grape-light-90);
}

.kit-CHpdo-color-10[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-10.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-10-plum);
    color: var(--color-10-plum-light-90);
}

.kit-CHpdo-color-11[class*="kit-CHpdo-icon-"] > :is(h3, h4, h5, h6):first-of-type::before,
.kit-CHpdo-color-11.kit-CHpdo-box-exercise[class*="kit-CHpdo-icon-"] .head h3::before {
    background-color: var(--color-11-raspberry);
    color: var(--color-11-raspberry-light-90);
}

[class*="kit-CHpdo-icon-"].kit-CHpdo-box-exercise .reflect {
    overflow: visible;
}



/* --- Section Styles --- */

.section.kit-CHpdo-section-intro .container {
    background-color: hsla(0, 0%, 100%, 0.75);
    padding: var(--gap);
    margin-bottom: calc(var(--gap) * 3);
}

.section.kit-CHpdo-section-intro h1 {
    margin-top: 0;
}

.section.kit-CHpdo-section-intro p:last-of-type{
    margin-bottom: 0;
}

.section.kit-CHpdo-section-summary {
    background: var(--color-12-greyscale-grey-98);
    background-blend-mode: normal;
    background-clip: padding-box;
    background-image: var(--pattern-dark-02);
    background-position: center;
    background-repeat: repeat;
    background-size: var(--pattern-size-large);
    border-top: 1px solid var(--color-12-greyscale-grey-90);
    border-bottom: 1px solid var(--color-12-greyscale-grey-90);
}








/*
 *  RESPONSIVE STUFFS
*/

@media (min-width: 401px) {
    .scope-kit-CHpdo .block blockquote p {
        font-size: 1.25rem;
        line-height: 1.55rem;
        padding-bottom: 0;
    }
}

@media (max-width: 400px) {
    .scope-kit-CHpdo .block blockquote p {
        font-size: 1.25rem;
        line-height: 1.55rem;
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    #page-kit-chapter .section:not(.visible) .sectionTitle {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .sectionTitle {
        margin-bottom: calc(var(--gap)*2);
    }

    .scope-kit-CHpdo .block h2, .sectionTitle { font-size: 1.8rem; }
    .scope-kit-CHpdo .block h3 { font-size: 1.6rem; }
    .scope-kit-CHpdo .block h4 { font-size: 1.45rem; }
    .scope-kit-CHpdo .block h5 { font-size: 1.3rem; }
    .scope-kit-CHpdo .block h6 { font-size: 1.2rem; }
}

@media (min-width: 769px) {
    .section > .container {
        border-top: calc(1rem/2) dotted var(--color-12-greyscale-grey-90);
        padding: calc(var(--gap)*4) calc(var(--gap)/2);
    }

    .scope-kit-CHpdo .block .main {
        width: calc(60% - (var(--gap) / 2));
    }

    .scope-kit-CHpdo .block .side {
        width: calc(40% - (var(--gap) / 2));
    }

    .sectionTitle {
        margin-bottom: calc(var(--gap)*3);
        width: 100%;
        line-height: 2.5rem;
    }

    .scope-kit-CHpdo .block > h1,
    .container > .exercise h1,
    .container > h1 {
        margin: calc(var(--gap)*3) 0;
        font-size: 3rem;
        line-height: 3rem; /* TODO check line height */
    }

    .scope-kit-CHpdo .block h2, .sectionTitle { font-size: 2.5rem; }
    .scope-kit-CHpdo .block h3 { font-size: 1.8rem; }
    .scope-kit-CHpdo .block h4 { font-size: 1.5rem; }
    .scope-kit-CHpdo .block h5 { font-size: 1.35rem; }
    .scope-kit-CHpdo .block h6 { font-size: 1.25rem; }

    .scope-kit-CHpdo .block blockquote p {
        font-size: 1.5rem;
        line-height: 1.7rem;
        padding-bottom: 0;
    }

    .kit-CHpdo-box-float-media-left .media,
    .kit-CHpdo-box-float-media-right .media {
        width: calc(50% - (var(--gap)/2));
        margin-bottom: calc(var(--gap)/2);
    }

    .kit-CHpdo-box-float-media-left .media {
        clear: left;
        float: left;
        margin-right: var(--gap);
    }

    .kit-CHpdo-box-float-media-right .media {
        clear: right;
        float: right;
        margin-left: var(--gap);
    }

    .kit-CHpdo-box-float-media-left p,
    .kit-CHpdo-box-float-media-right p {
        display: inherit;
        clear: none;
    }

    .kit-CHpdo-box-float-media-left .media + .media,
    .kit-CHpdo-box-float-media-right .media + .media {
        margin-top: calc(var(--gap)/2);
    }



    .section.kit-CHpdo-section-summary .container,
    .kit-CHpdo-section-intro .container,
    .kit-CHpdo-section-intro + .section .container,
    .section.kit-CHpdo-section-summary + .section .container,
    .section:first-of-type > .container,
    .section:first-of-type .background ~ .container,
    #kit-last-section > .container,
    #opiq-footer > .container {
        border-top: 0;
    }

}