body {
    margin: 0;
    background: #f4f4f4;
}

body.standalone.online {
    background-color: #e6e6e6;
    padding: 0;
}

#tracy-show-button {
    opacity: 0.1;
    pointer-events: all !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-size: 2.2em;
    margin: 0.67em 0;
    line-height: 1.1;
}

h2 {
    font-size: 1.4em;
    line-height: 1.2;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
}

b,
strong {
    font-weight: bolder;
}

p:first-child {
    margin-top: 0;
}

.rte,
.text {
    font-size: 1rem;
}

.rte img {
    max-width: 100%;
}

video {
    max-width: 100%;
}

button,
input {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button {
    text-transform: none;
}

button.inactive,
.button.inactive {
    opacity: 0.3;
    pointer-events: none;
}

.invisible {
    opacity: 0;
    pointer-events: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

[hidden] {
    display: none;
}

.white-text {
    color: white;
}

html {
    box-sizing: border-box;
    font-family: Lato, sans-serif;
    font-size: 1.5vw;
    line-height: 1.4;
}

.exercise {
    line-height: 1.3;
}

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

body {
    overflow: hidden;
}

body + div {
    display: none;
}

.case {
    transition: all 0.2s ease;
}

body:not(.tpl-exercise) {
    overflow: initial;
    overflow-x: hidden;
}

footer strong {
    font-weight: 600;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.case {
    opacity: 1;
    transition: opacity 1s ease;
}

.all-width {
    width: 100%;
}

h1,
h2,
h3,
.title,
.step-nr {
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
}

.section-title {
    text-align: center;
    margin-bottom: 3em;
}

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

p {
    margin-top: 1.5em;
}

.compact_paragraph {
    margin-top: -0.25em;
}

.exercise p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.exercise p:fist-child {
    margin-top: 0;
}

.exercise p:last-child,
.exercise-table p:last-child {
    margin-bottom: 0;
}

table small {
    font-size: 0.9em;
}

.text a {
    text-decoration: underline;
}

.case > section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 1.3s ease;
}

.case-section {
    background-color: #e5e5e5;
    padding-top: 5em;
}

.case-section#logo {
    padding-top: 0;
}

.section-outer {
    width: 80vw;
    margin: auto;
    position: relative;
}

@media (max-aspect-ratio: 5/3) {
    .section-outer {
        max-width: 80vw;
    }
}

.logo-block {
    z-index: 10;
}

.all-height,
.section-outer:not(.free-height) {
    min-height: 100vh;
}

#footer {
    min-height: calc(100vh - 3rem);
}

.section-outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-inner:not(.no-block) {
    position: relative;
}

.case-section .section-inner {
    max-height: 70vh;
    width: 100%;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0.8em;
}

.rte ul,
.rte ol {
    padding-left: 1.5em;
}

.rte ul li,
.rte ol li {
    margin: 1em 0;
}

.rte ul li:not(:last-child) .compact_paragraph:first-child,
.rte ol li:not(:last-child) .compact_paragraph:first-child {
    margin-bottom: -1em;
}

.rte ul li:first-child .compact_paragraph:first-child,
.rte ol li:first-child .compact_paragraph:first-child {
    margin-top: -1em;
}

.footer-content-wrapper,
.footer-content-wrapper > section {
    width: 100%;
}

.footer-content-wrapper .column-right {
    float: right;
}

.footer-content-wrapper .two-columns {
    -moz-columns: 2;
    columns: 2;
    width: 100%;
}

footer {
    background: #000;
    color: #fff;
    padding: 0.1em;
    font-size: 0.9em;
}

footer:after {
    content: "";
    display: table;
    clear: both;
}

footer nav {
    font-family: "Overpass Mono";
    font-size: 1.2rem;
    font-weight: 300;
}

.footer-content a,
.link-case-button {
    font-style: italic;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-top: 0.3em;
    color: #fff;
    background: #000;
}

.footer-content a:before,
.link-case-button:before {
    content: url("links/circle-arrow.svg");
    display: inline-block;
    width: 1.25em;
    vertical-align: -0.3em;
    margin-right: 0.7em;
    transform: translateX(0);
    transition: transform 0.5s ease;
}

.footer-content a:hover:before {
    transform: translateX(0.35em);
}

.link-case-button:before {
    transform: translateX(0.55em);
}

.link-case-button:hover:before {
    transform: translateX(0.7em);
}

.link-case-button {
    padding: 0.7em;
    padding-left: 0;
    font-size: 0.9em;
    position: absolute;
    right: 0;
    bottom: 0;
}

footer h2,
footer h3 {
    font-family: "Overpass Mono";
    font-weight: 100;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 0.6em;
}

footer h3 {
    font-size: 1.1em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.section-wrapper {
    position: relative;
    width: 100%;
}

.section-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.case .section-wrapper {
    background-repeat: no-repeat;
    height: 65vh;
}

.case-section {
    position: relative;
}

.case-section h1 {
    background-color: #fff;
    display: inline-block;
    padding: 0 0.25em 0.1em 0.25em;
    margin: 0;
    position: absolute;
    z-index: 1;
    letter-spacing: 0.04em;
    word-spacing: -0.3em;
}

.action-buttons {
    position: absolute;
    right: 1em;
    top: 0.5em;
    z-index: 100;
}

button {
    background: #000;
    color: #fff;
    padding: 0;
    margin: 0;
    border: none;
    outline: 0;
    cursor: pointer;
    border-radius: 0;
    font-family: inherit;
}

.button-sources {
    background: transparent;
    padding: 0.25em 0.5em;
    margin: 1em 0px;
    color: black;
    border: 1px solid black;
    border-radius: 1em;
    outline: rgb(255, 255, 255) none 0px;
}

.action-buttons button,
button.next-exercise,
a.next-exercise,
.help-close-button,
.pdf-close-button {
    background: transparent;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.5em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    transition: opacity 0.5s ease;
}

.action-buttons button svg,
button.next-exercise svg,
a.next-exercise svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.action-buttons button.write svg circle {
    fill: #b2b2b2;
    fill: var(--exercise-color);
}

.action-buttons button.read svg circle {
    fill: var(--exercise-color);
}

button.next-exercise.free-to-go svg path,
a.next-exercise.free-to-go svg path {
    fill: var(--exercise-color);
}

body:not(.inside-exercise, .grid_module) .action-buttons button:not(.close) {
    opacity: 0;
    pointer-events: none;
}

.section-outer:after {
    content: "";
    display: table;
    clear: both;
}

#nav .section-outer:after {
    content: none;
}

.column {
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}

.column-right {
    float: right;
}

.column-left.column-image {
    width: 68%;
}

.column-left.column-image + .column-right {
    width: 30%;
}

.text-column {
    z-index: 1;
}

.text-wrapper {
    overflow: hidden;
    height: calc(100% - 1.5em);
    position: relative;
    margin-top: 1.5em;
}

.scroll-inner-wrapper {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    position: relative;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll-inner-wrapper {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: thin;
    transition: scrollbar-color 0.15s ease;
    scrollbar-gutter: stable;
}
.scroll-inner-wrapper::-webkit-scrollbar {
    width: 0.2em;
}
.scroll-inner-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease;
}
.scroll-inner-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

@media (hover: hover) {
    .scroll-inner-wrapper:not(:hover) {
        scrollbar-color: transparent transparent;
    }
    .scroll-inner-wrapper:not(:hover)::-webkit-scrollbar-thumb {
        background: transparent;
    }
}

.footer-content {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.scroll-inner-wrapper .text {
    position: relative;
    z-index: 0;
}

.scroll-inner-wrapper p:first-child {
    margin-top: 0;
}

.text-wrapper {
    padding-right: 2em;
}

.column-left .text-wrapper {
    padding-right: 7.5%;
}

.block .text-wrapper {
    padding-left: 0;
    padding-right: 5em;
}

.section-block .section-wrapper {
    padding: 3.7em 0 4.6em;
    overflow: hidden;
    position: relative;
}

.no-block > .column-left,
.no-block > .column-right {
    margin-top: 6em;
}

.case-section .no-block h1,
.case-section h1 {
    transform: translateY(-100%);
}

.section-block h1 {
    left: 0;
}

.heading-right h1 {
    left: 50%;
    transform: translateY(-35%);
}

.rte a:not(.glossary):not(.note-button)::after {
    content: "";
    display: inline-block;
    height: 1em;
    width: 0.75em;
    margin-right: -0.05em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 125' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Ctitle%3E61 all%3C/title%3E%3Cpath d='M14.8,71.1c0,7.7,6.3,14,14,14h36l0,0c7.7,0,14-6.3,14-14v-22c0-2.2-1.8-4-4-4l0,0c-2.2,0-4,1.8-4,4v22c0,3.3-2.7,6-6,6l0,0 h-36c-3.3,0-6-2.7-6-6v-36c0-3.3,2.7-6,6-6l0,0h22l0,0c2.2,0,4-1.8,4-4s-1.8-4-4-4h-22l0,0c-7.7,0-14,6.3-14,14L14.8,71.1z'/%3E%3Cpath d='M85.2,18.9c0-0.3,0-0.5-0.1-0.8c0-0.1,0-0.1-0.1-0.2c0-0.2-0.1-0.4-0.2-0.5c0-0.1-0.1-0.2-0.1-0.2c-0.1-0.2-0.2-0.3-0.2-0.5 c-0.3-0.4-0.7-0.8-1.1-1.1c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.2-0.1-0.3-0.1c-0.2-0.1-0.3-0.1-0.5-0.2l-0.2-0.1 c-0.2,0-0.5-0.1-0.7-0.1h-0.1H62.8l0,0c-2.2,0-4,1.8-4,4s1.8,4,4,4h8.7L45.7,48.7c-1.5,1.6-1.5,4.1,0.1,5.7c1.5,1.5,4,1.5,5.5,0 l25.9-25.8v8.7c0,2.2,1.8,4,4,4l0,0c2.2,0,4-1.8,4-4L85.2,18.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.glossary,
.text a[href="glossar"] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 10%;
    display: inline-block;
    position: relative;
    cursor: help;
}

.source-link {
    color: black;
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 10%;
}

.lection-intro-screen .glossary,
.lection-intro-screen .text a[href="glossar"] {
    text-decoration-color: initial;
}

.tooltipster-base {
    -webkit-filter: contrast(3);
    filter: contrast(3);
    opacity: 0.8;
}

.tooltipster-content {
    font-size: 0.8rem !important;
    font-family: "lato" !important;
    line-height: 1.4 !important;
}

.ajax-loader-gif {
    mix-blend-mode: multiply;
    width: 2.5em;
}

#case-1327 #biafra {
    width: 6.5em !important;
    transition: all 2.1s ease !important;
}

@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    20% {
        box-shadow: 0 0 0 1em transparent;
    }

    24% {
        box-shadow: 0 0 0 0 transparent;
    }

    25% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    45% {
        box-shadow: 0 0 0 1em transparent;
    }

    49% {
        box-shadow: 0 0 0 0 transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    20% {
        box-shadow: 0 0 0 1em transparent;
    }

    24% {
        box-shadow: 0 0 0 0 transparent;
    }

    25% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    45% {
        box-shadow: 0 0 0 1em transparent;
    }

    49% {
        box-shadow: 0 0 0 0 transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@-webkit-keyframes pulsefast {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    80% {
        box-shadow: 0 0 0 1.5em transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes pulsefast {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }

    80% {
        box-shadow: 0 0 0 1.5em transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@-webkit-keyframes pulse-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    20% {
        box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
    }

    24% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    45% {
        box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
    }

    49% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    20% {
        box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
    }

    24% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    45% {
        box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
    }

    49% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes pulsefast-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    80% {
        box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes pulsefast-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    80% {
        box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.action-buttons > * {
    pointer-events: all;
}

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

#case-kloster .close-block-button button:before {
    background: #d9c0a7;
}

[data-stellar-ratio] {
    position: relative;
}

.jarallax {
    position: relative;
    z-index: 0;
}

.cases-browser {
    margin: 0.8em auto;
    width: 80%;
}

.cases-browser button {
    opacity: 0.3;
    width: 100%;
    transition: opacity 0.3s ease;
}

.cases-browser button:hover {
    opacity: 1;
}

.cases-browser button {
    padding-top: 100%;
    width: 100%;
    opacity: 0.4;
    position: relative;
}

.cases-browser button:after {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background-image: url("links/circle-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

.nav-wrap .logo {
    position: absolute;
    left: 0.5em;
}

.tpl-exercise .nav-wrap .logo {
    font-size: 3.4vh;
    font-weight: 700;
    font-family: "Overpass Mono", monospace;
}

body.not-cover .nav-wrap .logo {
    transform: scale(0.85);
    transform-origin: left;
    opacity: 0.2;
}

body.not-cover .nav-wrap .logo:hover {
    opacity: 1;
}

.logo-section {
    text-align: center;
    margin: 19.5em auto 3em;
}

#home-info {
    min-height: 100vh;
}

#home-info .scroll-inner-wrapper {
    margin-left: 0;
}

#home-info .text-wrapper {
    padding-left: 0;
    padding-right: 5.7rem;
}

#home-info .scroll-inner-wrapper p {
    margin-bottom: 0;
}

#home-info .column-right .scroll-inner-wrapper {
    margin-top: 3.4em;
}

#home-info .column-left {
    margin-top: 1.5em;
}

#intro-text .scroll-inner-wrapper {
    margin-top: 0;
}

.home-cases-list {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 10em;
}

.home-cases-list .link {
    width: 29%;
    padding-top: 25%;
    position: relative;
    mix-blend-mode: multiply;
    margin-bottom: 3.5em;
}

.home-cases-list:after {
    content: "";
    display: block;
    width: 29%;
}

/*
.home-cases-list .link:not(.active) {
    pointer-events: none;
    opacity: .3;
}
*/
.home-cases-list .link a {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 0.9em;
}

.home-cases-list .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.8em;
    padding-bottom: 2rem;
    padding-right: 0;
    text-transform: uppercase;
    font-size: 1.2em;
    z-index: 1;
}

.home-cases-list h3 {
    font-size: 1em;
    margin: 0;
    z-index: 1;
    position: relative;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    background-color: white;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 1px;
}

.home-cases-list .link.active a.is-hover .info .description,
.home-cases-list .link.active a.viewing .info .description {
    max-height: 7rem;
}

.home-cases-list .info .description {
    background: rgba(255, 255, 255, 0.7);
    margin-bottom: -0.5rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.7s ease;
}

.home-cases-list .info .description > p {
    font-family: Lato, sans-serif;
    text-transform: none;
    font-size: 0.8rem;
    padding: 0.5rem;
}

.home-cases-list h2 {
    margin: 0;
    padding: 0;
    display: inline;
}

.home-cases-list h2 span {
    padding: 0 0.5rem;
}

.home-cases-list h2.is-smaller-1 span {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.7em;
}

.home-cases-list .image div {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-filter: grayscale() contrast(0.9);
    filter: grayscale() contrast(0.9);
    mix-blend-mode: overlay;
    transition: transform 0.8s ease;
}

.home-cases-list .link a.active:hover .image div,
.home-cases-list .link a.active.viewing .image div {
    transform: scale(1.3);
}

.home-cases-list p {
    margin: 0;
    font-weight: 300;
    font-size: 1em;
    font-family: "Overpass Mono", monospace;
}

.home-cases-list .image {
    width: 70%;
    height: 40%;
    right: 0;
    position: absolute;
    z-index: 0;
    opacity: 0.6;
}

.home-cases-list .shape-1 {
    width: 53%;
    height: 100%;
    -webkit-clip-path: polygon(0% 0%, 0% 75%, 100% 100%, 100% 25%);
    clip-path: polygon(0% 0%, 0% 75%, 100% 100%, 100% 25%);
}

.home-cases-list .shape-2 {
    left: 0.9em;
    width: 100%;
    height: 49%;
    -webkit-clip-path: polygon(60% 100%, 0% 100%, 40% 0%, 100% 0%);
    clip-path: polygon(60% 100%, 0% 100%, 40% 0%, 100% 0%);
}

.home-cases-list .shape-3 {
    width: 60%;
    height: 100%;
    -webkit-clip-path: polygon(0% 25%, 0% 100%, 100% 75%, 100% 0%);
    clip-path: polygon(0% 25%, 0% 100%, 100% 75%, 100% 0%);
}

.home-cases-list .shape-4 {
    width: 94%;
    height: 61.5%;
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(0 0, 22% 100%, 100% 100%, 75% 0);
    clip-path: polygon(0 0, 22% 100%, 100% 100%, 75% 0);
}

.home-cases-list .shape-5 {
    width: 94%;
    height: 61.5%;
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(25% 0, 0% 100%, 75% 100%, 100% 0);
    clip-path: polygon(25% 0, 0% 100%, 75% 100%, 100% 0);
}

.home-cases-list .shape-6 {
    width: 68%;
    height: 61.5%;
    right: auto;
    left: 7%;
    -webkit-clip-path: polygon(0% 25%, 0 100%, 100% 75%, 100% 0%);
    clip-path: polygon(0% 25%, 0 100%, 100% 75%, 100% 0%);
}

#nav {
    position: -webkit-sticky;
    position: sticky;
    padding-top: 0;
    top: 0em;
    z-index: 1;
}

.home-filters,
.module-filters {
    border-bottom: 1px solid #807f80;
    padding: 0;
    z-index: 1999;
    height: 3rem;
    justify-content: space-between;
    background: white;
}

P .home-filters:after {
    content: none;
}

.home-filters > *,
.module-filters > * {
    display: block;
    position: relative;
    text-align: center;
    padding: 0 1em;
    font-size: 0.9rem;
}

.home-filters > :first-child,
.module-filters > :first-child {
    margin-left: 0;
}

.home-filters a,
.module-filters a {
    font-family: "Overpass Mono", monospace;
    background: transparent;
    color: #807f80;
    font-weight: 700;
}

#filters-general input[type="checkbox"],
#filters-general input[type="checkbox"]:not(:checked) ~ [data-state="less"],
#filters-general input[type="checkbox"]:checked ~ [data-state="all"] {
    display: none;
}

.filter-choice input[type="radio"] {
    display: none;
}

.filter-choice input[type="radio"] + span:after {
    content: " ✔︎";
}

.filter-choice input[type="radio"]:not(:checked) + span:after {
    visibility: hidden;
}

.filter-check input[type="checkbox"] {
    display: none;
}

.filter-check input[type="checkbox"] + span:after {
    content: " ✔︎";
}

.filter-check input[type="checkbox"]:not(:checked) + span:after {
    visibility: hidden;
}

.irs-bar,
.irs-line {
    top: 3em;
}

.irs-bar,
.irs-line,
.irs-line > * {
    height: 0.35em;
    background: #cccccc;
}

.irs-bar {
    background: black;
    transition: width 0.5s ease;
    left: 0 !important;
    border-right: 1em solid black !important;
}

.irs-slider {
    height: 1.5em;
    width: 1.5em;
    background: white;
    border-radius: 50%;
    border: 0.15em solid;
    top: 2.4em;
    transition: all 0.5s ease;
}

body:not(.filters-started) .irs-bar {
    width: 0 !important;
}

body:not(.filters-started) .irs-slider {
    left: 0 !important;
}

body:not(.filters-stopped) .irs-bar,
body:not(.filters-stopped) .irs-slider {
    transition: all 1s ease !important;
}

@-webkit-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

.tpl-home .logo-intro {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-in 0.3s;
}

footer #material h2 {
    text-align: center;
}

.footer-content {
    padding-bottom: 5em;
    min-height: 33em;
}

.footer-content-wrapper {
    padding-top: 4em;
}

.footer-content-wrapper > section {
    visibility: hidden;
    position: absolute;
    max-height: 0;
    overflow: hidden;
}

.footer-content-wrapper > section.showing {
    visibility: initial;
    position: relative;
    max-height: none;
    overflow: initial;
}

.footer-home nav {
    border-bottom: 1px solid #fff;
}

.footer-home .column-left {
    padding-right: 2em;
}

.footer-home nav a {
    border-bottom: 2px solid transparent;
    transition: border-color 0.5s ease;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.footer-home nav a,
nav a {
    text-transform: uppercase;
    font-weight: 700;
}

.footer-home nav a[href*="http"]:after {
    content: "";
    display: block;
    width: 0.7em;
    height: 0.7em;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 0;
    height: 0;
    top: auto;
    bottom: -4px;
    right: -6px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 6px solid #fff;
}

.footer-home nav a[href*="http"]:hover:after {
    opacity: 1;
}

.footer-home nav .footer-active:before,
.footer-home nav a:hover:before,
.home-filters .active a:before {
    content: "";
    background: #fff;
    position: absolute;
    left: 0;
    top: 100%;
    bottom: -0.15em;
    width: 1.25em;
}

.home-filters a {
    position: relative;
}

.home-filters .active a,
.home-filters a:hover {
    color: #000;
}

.home-filters .active a:before {
    background: #000;
}

.home-content .rte {
    margin-bottom: 7em;
    -moz-columns: 2;
    columns: 2;
    -moz-column-gap: 4%;
    column-gap: 4%;
    font-size: 0.9rem;
}

.home-content h2 {
    font-size: 1.2rem;
}

.home-content h2 span {
    background: black;
    color: white;
    display: inline-block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0.2em 0.4em;
}

.filters-headline {
    padding-top: 2em;
    text-align: center;
    margin: 0 1.5em;
}

.filters-headline h2 {
    margin: 0;
    font-size: 3.3em;
    padding-top: 0.5em;
    font-weight: 600;
}

.filters-headline p {
    margin: 0;
}

#intro-text p:first-child {
    margin-top: 0.8em;
}

.plyr {
    font-family: "Overpass Mono", monospace !important;
}

#home-intro {
    overflow: hidden;
    position: relative;
    height: calc(100vh - 3rem);
    max-height: calc(100vh - 3rem);
}

#home-info .video {
    margin-top: 4.2em;
}

body.tpl-home .footer-content-wrapper > #kontakt .column-right {
    padding-left: 0;
}

#footer {
    position: relative;
    z-index: 2000;
}

footer .credits.opened {
    display: block;
    z-index: 2000;
}

footer .credits {
    position: fixed;
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    background: #000;
    border: 1px solid #fff;
    padding: 4%;
    overflow: scroll;
    box-sizing: border-box;
    z-index: 10;
    display: none;
    outline: 100em solid rgba(0, 0, 0, 0.8);
}

footer .credits-wrapper {
    -moz-columns: 2;
    columns: 2;
}

footer .credits-wrapper > p:first-child {
    margin-top: 0;
}

.credits-wrapper .column {
    width: 100%;
}

.close-credits {
    width: 3em;
    height: 3em;
    position: fixed;
    top: 4em;
    right: 5em;
    background: 0 0;
}

.close-credits button {
    background: 0 0;
}

.close-credits button {
    position: relative;
    width: 100%;
    height: 100%;
}

.close-credits button:after,
.close-credits button:before {
    content: "";
    height: 100%;
    border-left: 1px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    left: 46%;
    top: 0;
}

.close-credits button:before {
    transform: rotate(-45deg);
}

.open-credits,
.toggle-impressum {
    padding: 0.7em;
    text-transform: uppercase;
    font-size: 0.8em;
    margin: 3em 0 1em;
    letter-spacing: 0.05em;
    border: 1px solid #fff;
}

.toggle-impressum {
    display: none;
}

.scroll-inner-wrapper {
    position: relative;
}

.cookie_link {
    margin-bottom: 2em !important;
    text-align: right;
    padding-right: 2em;
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#home-intro {
    background-color: #e6e6e6;
}

.uni-logos {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.6em;
    pointer-events: all;
    margin-top: -1rem;
}

.uni-logo {
    height: 4em;
    mix-blend-mode: multiply;
    display: block;
}

.sfb-logo {
    height: 2em;
    margin-left: 4.5em;
}

.logo-in-section {
    text-align: left;
    display: inline-block;
    font-size: 1.5em;
}

.uni-logo img {
    height: 100%;
}

.go-down,
.go-up {
    transition: opacity 0.6s ease-out;
    position: absolute;
    position: fixed;
    display: block;
    background: transparent;
    height: 3.5em;
    width: 3.5em;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: all;
    z-index: 10;
    opacity: 0;
}

.go-down {
    bottom: 0.5em;
}

.go-up {
    top: 0.5em;
}

.lection.active .step.active .go-down,
.lection.active .step.active .go-up,
#case-intro.active .go-down,
#case-intro.active .go-up,
.lection-transition-screen.active .go-down,
.lection-transition-screen.active .go-up {
    opacity: 1;
    transition: opacity 1.5s ease-in;
}

.go-down:after,
.go-up:after {
    content: "";
    background-image: url("links/circle-arrow-grey.svg");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    transform: rotate(90deg);
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: opacity 0.1s ease-in;
    z-index: 1000;
}

.go-up:after {
    transform: rotate(-90deg);
}

.lection .go-down:after,
.lections .go-down:after,
.lection .go-up:after,
.lections .go-up:after {
    background-image: url("links/circle-arrow.svg");
}

/*
.tpl-home.scrolled .go-down,
.lection:not(.active) .go-down {
    opacity: 0;
    pointer-events: none;
}
*/

.tpl-exercise .go-down,
.tpl-exercise .go-up {
    position: absolute;
}

.last-lection .go-down {
    display: none;
}
.exercise {
    height: 100vh;
    width: 100vw;
    display: flex;
}

.lection-identifier {
    position: fixed;
    left: 6.75rem;
    top: 1.2rem;
    z-index: 10;
    display: inline-block;
    background-color: var(--exercise-color);
    color: black;
    font-family: "Overpass Mono", monospace;
    padding: 0.15em 0.5em 0 0.5em;
    font-weight: 700;
    max-width: calc(100vw - 19rem);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
}

body:not(.grid_module)
    .lection-screen.active
    .exercise-screen.active
    .outer-lection-identifier,
body:not(.grid_module)
    .lection-screen.active
    .exercise-screen.active
    .lection-exercise-screen.active
    .inner-lection-identifier {
    opacity: 1;
    pointer-events: all;
}

.transition-header .cover-header {
    transition: all 1s ease;
}

.transition-header .cover-header h1 {
    position: relative;
}

.transition-header:not(.active) .cover-header {
    transform: translateY(-100vh);
    opacity: 0;
}

.transition-header.active + .transition-header .cover-header {
    transform: translateY(100vh);
    opacity: 0;
}

.transition-header #flag {
    position: absolute;
    width: 13rem;
    height: 13rem;
    bottom: 1.5em;
    left: 1.7rem;
}

.transition-header #flag-drape path {
    transition: all 0.75s ease 1s;
    transform: translateY(-35%);
}

.lection.active
    + .lection-transition-screen
    .transition-header
    #flag-drape
    path {
    transition: none;
    transform: translateY(0);
}

.transition-button {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.5rem 1.1rem;
    font-size: 1.4em;
    margin-top: 2rem;
    background: white;
    color: black;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.75s ease 2s;
}

.lection.active + .lection-transition-screen .transition-button {
    transition: none;
    opacity: 0;
    pointer-events: none;
}

.exercise nav {
    width: 4.2rem;
    z-index: 10;
}

.exercise .nav-wrap {
    transform: rotate(-90deg) translateY(100%);
    transform-origin: left bottom;
    width: 100vh;
    height: 4.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 1em;
}

.exercise nav .step-nr,
.steps-in-transition .step-nr {
    background-color: black;
    color: white;
    width: 4rem;
    height: 4.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps-in-transition .step-nr {
    background-color: transparent;
    position: absolute;
    top: -1.3rem;
    left: 3rem;
    transform: rotate(-90deg) scale(2);
    transition: top 2s ease;
}

.steps-in-transition button:not(.active) .step-nr {
    display: none;
}

.transition-header.active + .steps-in-transition button .step-nr {
    top: 3.5rem;
}

.steps-in-transition button.active .this-transition-nr,
.transition-header.active
    + .steps-in-transition
    .steps-buttons
    button.active
    .new-transition-nr {
    opacity: 1;
    top: 0 !important;
}

.transition-header.active
    + .steps-in-transition
    .steps-buttons
    button.active
    .this-transition-nr {
    opacity: 0;
    top: 1.2em !important;
}

.exercise nav .step-nr div,
.steps-in-transition .step-nr div {
    transform: rotate(90deg);
    transform-origin: center center;
    font-size: 2rem;
    line-height: 1em;
    overflow: hidden;
    position: relative;
    width: 1.5em;
    height: 1em;
}

.exercise nav .step-nr span,
.steps-in-transition .step-nr span {
    display: block;
    position: absolute;
    top: 0;
    left: 0.1em;
    right: 0;
    height: 1em;
    transition: all 1s ease;
    opacity: 0;
}

.exercise nav .step-nr span:not(.active),
.steps-in-transition .step-nr span:not(.active) {
    top: -1.2em;
}

.exercise nav .step-nr span.active ~ span,
.steps-in-transition .step-nr span.active ~ span {
    top: 1.2em;
}

.exercise nav .step-nr span.active,
.exercise nav .step-nr span.removing-active {
    opacity: 1;
}

.steps {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2rem;
    position: relative;
}

.steps > div {
    transform: rotate(180deg);
    transform-origin: center center;
    position: relative;
    display: flex;
    align-items: center;
}

.steps > div:before {
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    left: 1em;
    right: 1em;
    top: calc(50% - 0.5px);
    background-color: black;
    z-index: 0;
}

.exercise-buttons:before {
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    left: 1em;
    right: 1em;
    top: 50%;
    background-color: black;
    z-index: 0;
}

.exercise-buttons .group-buttons:before {
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    left: 0;
    right: 0;
    top: calc(50% - 0.5px);
    background-color: black;
    z-index: 0;
}

.exercise-buttons button.next-exercise:after,
.exercise-buttons a.next-exercise:after {
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    background: #e6e6e6;
    border-radius: 50%;
    z-index: 1;
}

.steps button,
.steps-button-group:not(.active),
.exercise-buttons button {
    border: 1px solid black;
    background-color: white;
    border-radius: 50%;
    width: 1.1em;
    height: 1.1em;
    position: relative;
    z-index: 1;
    margin: 0 0.5em;
    position: relative;
    cursor: pointer;
}

.steps-button-group:not(.active) {
    margin: 0 0.25em;
}

.steps .step-button-title {
    position: absolute;
    pointer-events: none;
    transform: rotate(-90deg) translate(1.7em, -0.2em);
    transform-origin: left center;
    background: white;
    color: black;
    border: 1px solid black;
    width: auto;
    padding: 0.1em 0.5em;
    display: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .steps button:hover .step-button-title,
    .steps-button-group:not(.active):hover .step-button-title {
        display: block;
    }
}

.steps-button-group button {
    display: none;
    width: 0.85em;
    height: 0.85em;
    top: 30%;
}

.steps-button-group.active {
    width: 2.1em;
    height: 2.1em;
    position: relative;
    margin: 0 -0.25em;
}

.steps-button-group:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    background-color: #f4f4f4;
    position: absolute;
    opacity: 0;
    transform: rotate(45deg) skew(-45deg, -45deg);
}

.steps-button-group:last-child:before {
    border-top: none;
    border-right: none;
}

.steps-button-group.active:before {
    opacity: 1;
    transform: rotate(45deg) skew(-20deg, -20deg);
}

.steps-button-split:hover {
    z-index: 2;
}

.steps-button-group.active button {
    display: block;
    position: absolute;
    top: -10%;
    left: 0%;
}

.steps-button-group.active button:first-child {
    top: 65%;
}

.exercise-buttons button:not(.next-exercise) {
    background-color: white;
}

.exercise-buttons button:not(.next-exercise) svg {
    opacity: 0;
    position: relative;
}

.exercise-buttons button.next-exercise,
.exercise-buttons a.next-exercise {
    width: 2em;
    height: 2em;
    margin: 0 0em;
    transform-origin: center;
    border: none;
}

button.deactivated {
    pointer-events: none;
}

.transition-h2 {
    position: relative;
}

.lection-to-complete-feedback {
    position: absolute;
    top: 0;
    font-size: 1.5em;
    width: 60%;
    transition: opacity 0.75s ease;
}

.lection-completed-feedback {
    opacity: 0;
    transition: opacity 0.75s ease;
}

.lection-transition-screen[data-lection-completed="1"]
    .lection-completed-feedback {
    opacity: 1;
}

.lection-transition-screen[data-lection-completed="1"]
    .lection-to-complete-feedback {
    opacity: 0;
}

.lection-intro-screen .exercise-buttons button.next-exercise,
.lection-intro-screen .exercise-buttons a.next-exercise {
    margin: 0 0.5em;
}

.exercise-buttons button.next-exercise {
    background-color: #e6e6e6 !important;
}

.nav-wrap
    .steps-buttons
    > button:first-child:not(.next-exercise):not(.group-button),
.exercise-buttons > button:first-child:not(.next-exercise):not(.group-button) {
    background-color: black !important;
    border-color: black !important;
}

.lection-transition-screen:not(.active) .steps-in-transition {
    display: none;
}

.steps-in-transition .steps-buttons > button:not([data-lection-completed="1"]),
.steps-in-transition
    .steps-buttons
    > button:not([data-lection-completed="1"]):first-child:not(
        .next-exercise
    ):not(.group-button) {
    background-color: var(--exercise-light-color) !important;
}

.steps-in-transition .steps-buttons > button[data-lection-completed="1"] {
    background-color: black !important;
}

.steps-in-transition .steps-buttons > button:not(.current-step) {
    pointer-events: none;
}

.lection-exercises .rte button:first-child {
    background-color: transparent !important;
    border-color: transparent !important;
}

.steps button.active,
.steps button:hover,
.steps-button-group:not(.active):hover {
    background-color: var(--exercise-color);
    border-color: var(--exercise-color);
}

.group-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    height: 1.5em;
    position: relative;
    margin: 0 0.25em;
}

.group-buttons-wrap:not(.active-path) {
    background: #e6e6e6;
    position: relative;
    z-index: 1;
}

.group-buttons-wrap {
    opacity: 1;
    margin: -1em 0.7em;
}

.group-buttons-wrap:before {
    content: "";
    background: #e6e6e6;
    border: 1px solid black;
    transform: rotate(45deg);
    width: 1.05em;
    height: 1.05em;
    top: 32.25%;
    left: -0.25em;
    border-top: 0;
    border-right: 0;
    position: absolute;
}

.group-buttons-wrap:not(:last-child):after {
    content: "";
    background: #e6e6e6;
    border: 1px solid black;
    transform: rotate(45deg);
    width: 1.05em;
    height: 1.05em;
    top: 32.25%;
    right: -0.25em;
    border-bottom: 0;
    border-left: 0;
    position: absolute;
}

.group-button:first-child {
    margin-left: -0.25em;
}

.group-button:last-child {
    margin-right: -0.25em;
}

.group-buttons-wrap:not(.showing) {
    opacity: 0;
    transform: scaleX(0);
    margin-left: 0;
    margin-right: 0;
    pointer-events: none;
}

.group-buttons-wrap:not(.showing) .group-buttons {
    width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
}

.group-buttons-wrap:not(.showing):after,
.group-buttons-wrap:not(.showing):before {
    opacity: 0;
}

.group-buttons:not(.active-path) button {
    pointer-events: none;
    height: 0.75em;
    width: 0.7em;
}

.group-buttons .group-button {
    position: relative;
}

.group-buttons-wrap:last-child .group-buttons .group-button:last-child:before {
    content: "";
    display: block;
    position: absolute;
    height: 20%;
    top: 40%;
    left: calc(100% + 1px);
    right: -100vw;
    background-color: #e6e6e6;
}

.split-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25em;
}

button.split-choice {
    cursor: pointer;
    background: white;
    color: black;
    padding: 0.2em 0.8em 0.25em;
    font-weight: 700;
    margin: 1em 0 -0.5em;
    display: block;
    border-radius: 0.4em;
}

@media not all and (hover: none) {
    button.split-choice:hover {
        background: black;
        color: white;
    }
}

.steps > button:first-child {
    margin-left: 0;
}

.exercise-buttons button,
.group-buttons-wrap {
    transition: all 0.15s ease;
}

.steps-in-transition {
    position: fixed;
    z-index: 1;
    right: 20vw;
    top: 50vh;
    transform: translateY(-50%) rotate(180deg);
    opacity: 0;
    transition: opacity 1s ease;
}

.steps-in-transition button.current-step:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 0.75em solid #000;
    transform: translate(1.25em, -0.5em);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(1.25em, -0.5em);
    }

    40% {
        transform: translate(1.75em, -0.5em);
    }

    60% {
        transform: translate(1.5em, -0.5em);
    }
}

.lection-screen.active .steps-in-transition {
    opacity: 1;
}

.steps-in-transition .steps-buttons {
    flex-direction: column;
}

.steps-in-transition .steps-buttons button,
.steps-in-transition .steps-buttons button:first-child,
.transition-header.active + .steps-in-transition .steps-buttons button.active,
.transition-header.active
    + .steps-in-transition
    .steps-buttons
    button:first-child.active {
    background-color: var(--exercise-light-color) !important;
    border-color: black !important;
    width: 1.8em;
    height: 1.8em;
    margin: 1.5em 0;
}

.steps-in-transition .steps-buttons button[data-lection-completed="1"],
.steps-in-transition
    .steps-buttons
    button[data-lection-completed="1"]:first-child {
    background-color: black !important;
}

.steps-in-transition .steps-buttons button.active,
.steps-in-transition .steps-buttons button:first-child.active,
.transition-header.active
    + .steps-in-transition
    .steps-buttons
    button.active
    + button {
    background-color: white !important;
    border-color: white !important;
    outline: 0.35em solid var(--exercise-light-color);
}

.transition-header.active + .steps-in-transition .steps-buttons button.active,
.transition-header.active
    + .steps-in-transition
    .steps-buttons
    button:first-child.active {
    outline: none;
    border-color: black !important;
    background-color: black !important;
}

.steps-in-transition > .steps-buttons:before {
    height: auto;
    width: 1px;
    top: 1.5em;
    bottom: 1.5em;
    left: calc(50% - 0.5px);
}

.exercise-buttons-wrap {
    position: absolute;
    width: 100%;
    bottom: 0;
    transition: width 1s ease;
}

.exercise-buttons {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
}

.exercise-buttons-title {
    position: absolute;
    bottom: calc(3.5vh + 0.7em);
    font-weight: 700;
    width: 10rem;
    text-align: right;
}

.exercise main {
    width: calc(100vw - 4.2rem);
    height: 100vh;
    position: relative;
    overflow: hidden;
}

body:not(.grid_module) .exercise-screen,
body:not(.grid_module) .lection-screen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: calc(100vw - 4.2rem);
    background-color: var(--exercise-light-color);
    z-index: 2;
    transition: all 1s ease;
    overflow: hidden;
}

.lection-transition-screen {
    z-index: 1;
}

.lection-exercise-screen {
    background-color: #e6e6e6;
    opacity: 0;
}

.lection-screen:not(.active) {
    top: -100vh;
}

.lection-screen.active ~ .lection-screen {
    top: 100vh;
}

.lection-screen.active-split {
    top: 0;
}

.lection-screen.active-split ~ .lection-screen.lection-child:not(.active) {
    top: 0;
    left: 100vw;
}

.lection-screen.active-split + .lection-screen.lection-child:not(.active) {
    top: 0;
    left: -100vw;
}

.lection-screen.lection-child.transitioning {
    left: 0 !important;
    top: -100vh !important;
}

.active-split:not(.active) {
    pointer-events: none;
}

.lection-screen {
    opacity: 0;
}

.lection-screen.active,
.lection-screen.removing-active {
    opacity: 1;
}

.step {
    transition: left 1s ease;
}

.step:not(.active) {
    left: calc(-100vw + 4.2rem);
}

.step.active ~ .step {
    left: calc(100vw - 4.2rem);
}

.lection-exercise-screen.step:not(.active) {
    left: calc(-50vw + 2.1rem);
}

.lection-exercise-screen.step.collapse-sources:not(.active) {
    left: calc(-100vw + 4.2rem);
}

body:not(.grid_module)
    .lection-exercises-screen:not(.active)
    .lection-exercise-screen.step:not(.active),
.lection-exercise-screen.step.active ~ .step {
    left: calc(50vw - 2.1rem);
}

body:not(.grid_module)
    .lection-exercises-screen:not(.active)
    .lection-exercise-screen.step.collapse-sources:not(.active),
body:not(.grid_module)
    .lection-exercise-screen.step.active.collapse-sources
    ~ .step {
    left: calc(100vw - 4.2rem);
}

.lection-exercise-screen.active,
.lection-exercise-screen.removing-active {
    opacity: 1;
}

.exercise .background {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50vh 50vh;
    position: relative;
    z-index: 0;
}

.background-filter-image {
    background-color: var(--exercise-alt-color);
    position: relative;
}

.background-filter-inner-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(1) contrast(1.3) brightness(0.8);
    filter: grayscale(1) contrast(1.3) brightness(0.8);
    mix-blend-mode: overlay;
}

.lection-intro-cover .images div {
    background-color: white;
}

.exercise .background-1 > div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}

.exercise .background-1 > div:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.exercise .background-1 > div:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
}

.exercise .cover-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 10%;
    padding-top: 33%;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

@media screen and (min-aspect-ratio: 9/6) {
    .exercise .cover-header {
        padding-top: 0;
        top: auto;
        bottom: 3vh;
    }

    .exercise .transition-header .cover-header {
        top: 50vh;
        bottom: auto;
        transform: translateY(-50%);
        margin-top: 6.5rem;
    }
}

.exercise .cover-header h1 {
    background-color: black;
    color: white;
    margin: 0;
    font-size: 1.9rem;
    padding: 0.5rem 1.1rem 0.4rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
}

.exercise .cover-header h2 {
    margin: 0;
    line-height: 1.2em;
}

.exercise .cover-header h2 span {
    background-color: white;
    color: black;
    font-size: 2.8rem;
    padding: 0 1.1rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: block;
    font-weight: 700;
    line-height: 1.2em;
}

.exercise .cover-header h2 span:first-child {
    padding-top: 0.15rem;
}

.exercise .cover-header h2 span:last-child {
    padding-bottom: 0.15rem;
}

.lection-transition-screen .cover-header h2 {
    margin-top: 1em;
}

.exercise .cover-header .rte {
    font-size: 1.4em;
    line-height: 1.3;
    width: 50%;
    padding: 1rem 0;
    margin: 0;
}

.lection .cover-header .rte p:first-child {
    margin-top: 0;
}

.lections {
    background-color: var(--exercise-light-color);
}

.lection-intro-screen,
body:not(.grid_module) .lection-exercises-screen {
    display: flex;
    background-color: var(--exercise-light-color);
}

.lection-intro-screen > div:not(.small-notes),
body:not(.grid_module) .lection-exercises-screen > div:not(.small-notes) {
    width: 100%;
    height: 100vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lection-intro-screen > div:not(.small-notes) {
    width: 50%;
}

.small-notes {
    position: absolute;
}

.lection-intro-screen > div {
    width: 50%;
}

.pin-sources {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    right: 0.5em;
}

.pin-sources svg {
    fill: var(--exercise-color);
    transform: rotate(46deg);
    width: 1.2em;
}

.pinned .pin-sources svg {
    fill: black;
    transform: rotate(90deg);
}

.lection-sources .sources-pull-tab {
    position: absolute;
    left: 0;
    bottom: 50vh;
    background: white;
    transform: rotate(-90deg) translateY(-95%);
    transform-origin: top left;
    padding: 0.3em 1em;
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
    cursor: pointer;
    padding-right: 2em;
    z-index: -1;
    transition: all 1s ease;
    opacity: 1;
}

body:not(.grid_module)
    .lection-exercises-screen
    > .lection-sources:not(.small-notes) {
    width: 50%;
    position: absolute;
    right: 0;
    transition: all 1s ease;
    box-shadow: 0 0 1rem 0px rgb(0 0 0 / 0%);
}

body:not(.grid_module)
    .lection-exercises-screen.sources-collapsed
    .lection-exercise-screen {
    padding-right: calc(5vw + 2rem);
}

.lection-exercises-screen.sources-collapsed > .lection-sources .slick-arrow {
    opacity: 1;
    transition: opacity 1s ease-in;
}

@media (hover: none) {
    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(.small-notes):not(.pinned):not(.opened),
    .lection-sources.allow-drag {
        right: calc(-50% + 1.25rem);
        box-shadow: 0 0 1rem 0px rgb(0 0 0 / 0%);
    }

    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(.small-notes):not(.pinned):not(.opened)
        > .lection-sources-screen,
    .lection-sources:not(.small-notes).allow-drag > .lection-sources-screen {
        pointer-events: none;
    }

    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(.small-notes):not(.pinned):not(.opened)
        .slick-arrow,
    .lection-sources:not(.small-notes).allow-drag .slick-arrow {
        opacity: 0;
        transition: opacity 1s ease-out;
    }
}

@media (hover: hover) {
    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(.small-notes):not(:hover):not(.pinned):not(
            .opened
        ),
    .lection-sources:not(.small-notes).allow-drag {
        right: calc(-50% + 1.25rem);
        box-shadow: 0 0 1rem 0px rgb(0 0 0 / 0%);
    }

    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(.small-notes):not(:hover):not(.pinned):not(
            .opened
        )
        > .lection-sources-screen,
    .lection-sources:not(.small-notes).allow-drag > .lection-sources-screen {
        pointer-events: none;
    }

    .lection-exercises-screen.sources-collapsed
        > .lection-sources:not(:hover):not(.pinned):not(.opened)
        .slick-arrow,
    .lection-sources:not(.small-notes).allow-drag .slick-arrow {
        opacity: 0;
        transition: opacity 1s ease-out;
    }
}

.lection-sources:not(.small-notes).allow-drag .slick-list,
.lection-sources:not(.small-notes).allow-drag .scroll-wrapper,
.lection-sources:not(.small-notes).allow-drag .ps {
    overflow: visible !important;
}

.lection-sources .ui-draggable {
    transition: transform 1s ease;
}

.lection-sources .ui-draggable:not(.ui-draggable-dragging) {
    top: 0 !important;
    left: 0 !important;
    transition: none;
}

.lection-exercises-screen.sources-collapsed
    .lection-sources.allow-drag
    .ui-draggable-dragging {
    transform: translateX(calc(-50vw + 3rem));
}

.lection-exercises-screen.sources-collapsed > .lection-sources.pinned,
.lection-exercises-screen.sources-collapsed > .lection-sources.opened,
.lection-exercises-screen.sources-collapsed > .lection-sources:hover {
    box-shadow: 0 0 1rem 0px rgb(0 0 0 / 10%);
}

.lection-exercises-screen:not(.sources-collapsed) .sources-pull-tab {
    transform: rotate(-90deg) translateY(0%);
    transition: all 0.3s ease;
    opacity: 0;
}

.lection-exercise-screen .lection-exercise {
    width: 100%;
}

.lection-exercise-screen.collapse-sources .lection-exercise {
    width: 90%;
    margin-left: 5%;
}

.lection-exercise-screen:not(.collapse-sources) .lection-exercise {
    width: 44%;
}

.lection-exercises-screen:not(.sources-collapsed) .exercise-buttons-wrap {
    width: 50%;
}

.lection-intro-text,
.lection-exercise-screen {
    padding: 3.4rem 1rem 3.4em 2.5em;
}

.lection-sources {
    padding: 3.4rem 2.5rem 1rem;
}

.lection-sources:before {
    content: "";
    position: absolute;
    background: white;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.lection-intro-cover {
    position: relative;
    overflow: hidden;
}

.lection-transition-screen {
    background-color: var(--exercise-light-color);
}

.lection-intro-cover > * {
    position: relative;
    z-index: 1;
}

.lection-intro-cover .images,
.lection-intro-cover .images div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.lection-intro-cover .title {
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-size: 1.7rem;
    padding: 0.3em;
}
.title-wrap {
    position: absolute;
    top: 12%;
    position: absolute;
    left: 2%;
}

.lection-intro-cover .step-nr {
    color: white;
    font-size: 5rem;
    font-weight: 700;
    position: absolute;
    top: 63%;
    left: 59%;
}

.lection-cover-info {
    height: calc(46vw - 5rem);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    transform: translateY(-50%) translateX(-50%);
}

.lection-intro-cover .images > div .background-filter-inner-image {
    mix-blend-mode: luminosity;
    -webkit-filter: grayscale(1) contrast(1) brightness(1);
    filter: grayscale(1) contrast(1) brightness(1);
}

.lection-intro-cover .images > div:first-child {
    background-color: var(--exercise-color);
    left: 0;
    top: 40%;
    right: 30%;
    -webkit-clip-path: polygon(0 8%, 64.5% 0, 100% 92%, 35.5% 100%);
    clip-path: polygon(0 8%, 64.5% 0, 100% 92%, 35.5% 100%);
}

.lection-intro-cover .images > div:last-child {
    background-color: var(--exercise-color);
    left: 45%;
    bottom: 5%;
    right: 0;
    -webkit-clip-path: polygon(0 42%, 55% 0, 100% 58%, 45% 100%);
    clip-path: polygon(0 42%, 55% 0, 100% 58%, 45% 100%);
}

.shape-2 .lection-cover-info {
    height: calc(55vw - 5rem);
    top: 45%;
    transform: translateY(-50%) translateX(-50%);
}

.lection-intro-cover.shape-2 .title {
    top: 46%;
    left: auto;
    right: 0;
}

.lection-intro-cover.shape-2 .step-nr {
    top: 28%;
    left: 16%;
}

.lection-intro-cover.shape-2 .images div:first-child {
    left: 18%;
    top: 0;
    right: 0;
    bottom: 37%;
    -webkit-clip-path: polygon(0 0, 65% 0, 100% 100%, 35% 100%);
    clip-path: polygon(0 0, 65% 0, 100% 100%, 35% 100%);
}

.lection-intro-cover.shape-2 .images div:last-child {
    left: -4%;
    top: 55%;
    right: 4%;
    -webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

.step-screen {
    display: flex;
}

.step-screen > div {
    width: 50%;
}

.lection-exercises {
    background-color: #e6e6e6;
}

.lection-sources {
    background-color: white;
    z-index: 1;
}

.lection-source cite {
    font-size: 0.7em;
    line-height: 1.6em;
    font-style: inherit;
    color: var(--exercise-color);
    display: inherit;
}

.lection-exercise-screen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}

.step-title {
    font-size: 1em;
    font-weight: 700;
    border-bottom: 2px solid black;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 0.35em;
    font-family: inherit;
}

.step-title:before {
    content: "";
    width: 1em;
    height: 0.8em;
    margin-right: 0.5em;
    display: inline-block;
    background-image: url("links/triangle.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.images-slider {
    width: 100%;
}

.images-slider .images-slider-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.lection-source img {
    max-height: calc(100vh - 16rem);
    width: auto;
}

.images-slider-wrap > * {
    width: 48%;
}

.image img {
    max-width: 100%;
}

.slick-arrow {
    z-index: 1;
    width: 1rem;
    height: 1.5rem;
}

.slick-arrow:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-image: url("links/slider_arrow_left.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.slick-arrow.slick-next:before {
    background-image: url("links/slider_arrow_right.svg");
}

.slick-dotted.slick-slider {
    margin-bottom: 1.7rem;
}

.chocolat-wrapper .chocolat-right,
.chocolat-wrapper .chocolat-left {
    -webkit-filter: invert(1);
    filter: invert(1);
    transform: scale(0.5);
}

.chocolat-wrapper .chocolat-left {
    background-image: url("links/slider_arrow_left.svg");
}

.chocolat-wrapper .chocolat-right {
    background-image: url("links/slider_arrow_right.svg");
}

.chocolat-wrapper .chocolat-top {
    height: 3.7rem;
}

.slick-prev {
    left: -1.5rem;
}

.slick-next {
    right: -1.5rem;
}

.slick-slider * {
    outline: none;
}

.slick-slide {
    margin: 0 2rem;
}

.slick-list {
    margin: 0 -2rem;
}

.slick-dots {
    bottom: -1.25rem;
}

.slick-dots li {
    margin: 0;
    width: 1.1rem;
    height: 0;
}

.slick-dots li button {
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 1.2rem;
    border-radius: 50%;
    background-color: var(--exercise-light-color);
}

.slick-dots li button:before {
    content: none;
}

.slick-dots li button:before {
    opacity: 1;
    color: var(--exercise-light-color);
    font-size: 0.6rem;
    line-height: 3em;
    width: 1rem;
    height: 1rem;
}

.slick-dots li:first-child:last-child {
    opacity: 0;
    pointer-events: none;
}

.slick-dots li button:focus,
.slick-dots li.slick-active button {
    opacity: 1;
    background-color: var(--exercise-color);
}

.slick-prev + .slick-list .lection-source {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 1.2rem;
}

/* removed */
.help-slides .slick-dots {
    display: none !important;
}

.help-slides .slick-dots li button {
    background-color: white;
}

.help-slides .slick-dots li button:focus,
.help-slides .slick-dots li.slick-active button {
    background-color: var(--exercise-color);
}

.accordion {
    max-width: 900px;
    width: 100%;
    margin: 10px auto;
    text-align: left;
}

.accordion-title {
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    position: relative;
    z-index: 2;
    display: block;
    cursor: pointer;
    background: white;
    border-top: 2px solid black;
    padding: 0.8em 2em 0.8em 0;
}

.accordion-title:before {
    content: "";
    position: absolute;
    right: 0.5em;
    top: calc(50% - 0.5em);
    width: 1em;
    height: 1em;
    background-image: url("links/slider_arrow_right.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.accordion-title.opened:before {
    transform: rotate(-90deg);
}

.accordion input {
    display: none;
}

.accordion article {
    margin-top: 0;
    overflow: hidden;
    max-height: 0;
    position: relative;
    z-index: 10;
    transition:
        max-height 0.3s ease-in-out,
        box-shadow 1s linear;
}

.accordion article .rte {
    padding-bottom: 1em;
}

.accordion-title:not(.opened) + article {
    max-height: 0 !important;
}

.accordion-title.opened + article {
    max-height: 200em;
}

.source-single-image .image-description,
.video-description {
    font-weight: 700;
    margin-top: 1em;
}

.source-image .image-description {
    font-size: 0.85em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

.exercise-text-unit {
    margin-top: 1em;
}

.exercise-textarea {
    background: white;
    min-height: 7.5em;
    outline: none;
    padding: 1.5%;
    border: 1px solid gray;
    border-bottom-width: 2px;
    margin-top: 0.25em;
}

.exercise-textarea.size-small {
    min-height: 4.5em;
}

.exercise-textarea.size-large {
    min-height: 15em;
}

.exercise-textarea:focus {
    border-bottom-color: var(--exercise-color);
}

.exercise-description-text,
.text-exercise-input,
.exercise-sliders {
    max-width: 60vw;
}

.exercise-textarea * {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    line-height: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

.exercise-textarea li {
    margin-left: 1em !important;
}

.small-info {
    color: gray;
    display: flex;
    font-size: 0.8em;
    justify-content: space-between;
    margin-top: 0.1em;
}

.small-info.reached-minimum {
    color: var(--exercise-color);
    font-weight: 700;
}

.text-highlighter-wrap {
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.color-selector-tooltip {
    border-radius: 0.3rem;
    position: fixed;
    display: flex;
    padding: 0.2rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-2em, 2.5em) rotate(180deg);
    transition: opacity 0.1s ease-out;
    z-index: 1000;
}

.color-selector-tooltip.active {
    pointer-events: all;
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

/*
.color-selector-tooltip:after {
    content: "";
    height: 1rem;
    width: 1rem;
    bottom: -.45rem;
    left: 35%;
    transform: rotate(45deg);
    border-left: none;
    border-top: none;
    position: absolute;
}
*/
.color-selector-tooltip {
    background-color: white;
    -webkit-filter: drop-shadow(0 0 0.25em #0003);
    filter: drop-shadow(0 0 0.25em #0003);
}

.color-selector-tooltip:after {
    background-color: white;
}

.color-selector-tooltip > * {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 50%;
    margin: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.color-selector-tooltip > .select-yellow,
.highlighted-yellow {
    background-color: #ecf364 !important;
}

.color-selector-tooltip > .select-green,
.highlighted-green {
    background-color: #8de6a5 !important;
}

.color-selector-tooltip > .select-blue,
.highlighted-blue {
    background-color: #75d1ff !important;
}

.color-selector-tooltip > .select-red,
.highlighted-red {
    background-color: #fa878b !important;
}

.color-selector-tooltip > .delete:before {
    content: "\00D7";
    font-size: 1.5em;
    height: 1.6em;
}

.copy-clipboard {
    background-image: url("links/copy.svg");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    border-radius: 0;
    transform: rotate(180deg);
}

.exercise-match-pairs-area {
    font-size: 0.9em;
}

.exercise-drop-header,
.exercise-drop-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    font-weight: 700;
}

.exercise-drop-header {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.exercise-drop-header > div {
    width: 48%;
}

.exercise-drop-key {
    padding: 0.2em 0.4em;
    max-width: 48%;
    border: 1px solid black;
}

.exercise-drop-value {
    width: 48%;
    background-color: rgba(255, 255, 255, 0.6);
}

.exercise-drag-area {
    margin-top: 4em;
}

.exercise-drag-value {
    background: white;
    padding: 0.2em 0.4em;
    display: inline-block;
    margin-right: 0.8em;
    margin-bottom: 0.8em;
    text-align: center;
    font-weight: normal;
}

.exercise-drag-value.ui-draggable-dragging {
    position: absolute !important;
}

.exercise-drop-value .exercise-drag-value {
    top: 0 !important;
    left: 0 !important;
    right: 0;
    width: 100%;
    margin: 0;
    min-height: 100%;
}

.ui-draggable {
    cursor: -webkit-grab;
    cursor: grab;
    z-index: 1;
}

.ui-draggable-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    margin: 0;
    z-index: 11;
}

/* exercise Table Choices */

.exercise-table,
.exercise_memory_content,
.exercise-graphic-organizer_content,
.exercise-dragdroptable {
    width: 100%;
    margin: 1em 0;
}

.exercise-table-texts.is-vertical,
.exercise-table-texts.is-vertical tr,
.exercise-table-texts.is-vertical td {
    display: block;
    width: 100%;
}

.exercise-table-texts.is-vertical tr {
    margin-bottom: 1em;
}

.exercise-table-choices,
.exercise-table-texts {
    max-width: 40em;
}

.table-choices {
    border-spacing: 0;
}

.radio-choices input {
    display: none;
}

.radio-choices input + label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.8em;
    font-weight: bold;
}

.radio-choices input + label:after {
    content: "";
    display: block;
    position: relative;
    background-color: white;
    border: 0.25em solid white;
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
}

.radio-choices input:checked + label:after {
    background-color: #009fe3;
}

.radio-choices input + label:before {
    content: "";
    display: block;
    position: relative;
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    position: absolute;
    transform: scale(1.4);
}

.show-results .radio-choices input.correct + label:before {
    background: #a0ad7e;
}

.show-results .radio-choices input.incorrect:checked + label:before {
    background: #e20813;
}

.show-results .radio-choices {
    pointer-events: none;
}

.exercise-table .exercise-textarea {
    margin-top: 0;
}

.exercise-table td {
    vertical-align: top;
}

.exercise-table-choices td {
    vertical-align: middle;
    padding-top: 0.5em;
}

.table-row-comments td {
    padding-bottom: 1em;
}

.table-choices .table-col-1 {
    padding-right: 1em;
}

.table-choices .table-col-1 {
    position: relative;
    text-align: left;
}

.table-choices .table-col-1:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    bottom: 6px;
    right: 2px;
    border-left: 1px solid black;
}

.table-choices th:not(.table-col-1) strong {
    font-size: 0.8em;
    font-weight: normal;
    margin: 0 0.4em;
    text-align: center;
    display: block;
    line-height: 1.1;
}

.table-row {
    position: relative;
}

.table-row.without_comments td {
    padding-bottom: 0.5em;
}

.table-row.without_comments:not(:last-child) td {
    border-bottom: 2px solid white;
}

.table-row.without_comments .table-col-1:before {
    bottom: 6px;
}

.table-choices th {
    padding-bottom: 0.5em;
    vertical-align: top;
}

.table-choices th:before {
    bottom: 0 !important;
}

.table-row .table-col-1:first-of-type:before {
    top: -3px;
}

.table-row.without_comments + .table-row .table-col-1:before {
    top: 0.5em;
}

.exercise-table-texts td {
    padding: 0 0.5em 0.5em;
    width: 33%;
}

.exercise-table-texts .table-col-1 td {
    border-top: 2px solid white;
}

/* exercise memory */

.exercise_memory_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0.8em;
    max-width: calc(135vh - 11.5rem);
    min-width: 55vw;
}

.exercise_memory_panels {
    position: relative;
    margin-bottom: 0.5rem;
}

.exercise_memory_panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    max-width: calc(135vh - 11.5rem);
    min-width: 55vw;
    transition: opacity 0.5s ease;
}

.exercise_memory_panel:not(.active) {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.exercise_memory_info > * {
    width: 23.5%;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.count-memory-panels {
    font-weight: bold;
}

.count-memory-panels > * {
    width: 50%;
}

.count-memory-panels span {
    margin: 0 0.1em;
}

.memory-card {
    width: 23.5%;
    padding-top: 21%;
    margin-bottom: 2%;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

/*
.exercise_dragdropfield_panel .correct-info:after,
*/
.memory-card:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.2);
    background-position: 98% 98%;
    background-size: 20%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 10;
}

.memory-card-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.memory-card .icon-question {
    fill: white;
    opacity: 0.2;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.question-card .memory-card-content {
    background-color: var(--exercise-color);
    color: white;
}

.answer-card .memory-card-content {
    background-color: white;
}

.memory-card-image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

@media not all and (hover: none) {
    .memory-card:hover {
        box-shadow: 0.15em 0.15em 1em rgb(0 0 0 / 40%);
        transition: all 0.15s ease;
    }
}

.memory-card.selected,
.memory-card.show-correct {
    box-shadow: 0.2em 0.2em 1.6em rgb(0 0 0 / 80%);
    transform: scale(1.025);
}

.memory-card.correct:not(.show-correct):after,
.show-results
    .exercise_dragdropfield_panel
    .correct-info.correct:not(:hover):after {
    opacity: 1;
    background-image: url("links/check-icon-cards.svg");
}

.memory-card.incorrect:after {
    opacity: 1;
    background-image: url("links/wrong-icon-cards.svg");
}

.memory-card-text {
    font-size: 0.8em;
    line-height: 1.2;
    text-align: center;
}

.new-memory-cards {
    color: black;
    background: white;
    position: relative;
    padding: 0.3em 0.5em;
    font-size: 0.8em;
    font-weight: bold;
    justify-content: center;
}

.new-memory-cards:not(.active) {
    pointer-events: none;
    opacity: 0.15;
}

@media (max-width: 1200px) {
    .memory-card-text,
    .new-memory-cards {
        font-size: 0.9em;
    }
}

.answer-card .memory-card-text {
    font-style: italic;
}

.question-card .memory-card-text {
    font-weight: bold;
}

/* exercise Sliders */
.exercise-slider {
    padding: 0 0 1em;
    border-bottom: 2px solid white;
    margin-bottom: 1em;
}

.exercise-slider:last-child {
    border-bottom: none;
}

.range-slider {
    margin-top: -0.25em;
}

.exercise-slider-group {
    margin-bottom: 1em;
}

.exercise-slider .rte p:last-child {
    margin-bottom: 0;
}

.range-slider-values {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 0.2em;
}

.range-slider-values > span {
    max-width: 40%;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

.range-slider-values > span:last-child {
    text-align: right;
}

.irs {
    font-family: inherit;
    font-weight: bold;
}

.irs--round .irs-line {
    background-color: white;
    height: 1px;
    border: 0.9em solid white;
    box-sizing: content-box;
    transform: translateY(calc(-0.8em + 1px));
    position: relative;
    overflow: initial;
    border-radius: 1em;
}

.irs--round .irs-line:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    height: 1px;
}

.irs--round .irs-handle {
    border: 1px solid black;
    background-color: white;
    top: 2.55em;
    width: 1.3em;
    height: 1.3em;
    cursor: pointer;
}

.irs--round > .irs {
    margin-top: -1rem;
}

@media (hover: hover) {
    .irs--round .irs-handle:hover {
        background-color: #009fe3;
    }
}

.range-slider.active .irs--round .irs-handle {
    background-color: #009fe3;
}

.irs--round .irs-handle:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(2);
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    background-color: #009fe3ee;
    border-radius: 0.75em;
    height: 1.2em;
    min-width: 3em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease 0.6s;
    top: 0.4em;
    padding-top: 0.07em;
}

.hide-bubble .irs-from,
.hide-bubble .irs-to,
.hide-bubble .irs-single {
    display: none;
}

.range-slider.active .irs-from,
.range-slider.active .irs-to,
.range-slider.active .irs-single {
    opacity: 1;
}

.range-slider.dragging .irs--round.irs-from,
.range-slider.dragging .irs--round .irs-to,
.range-slider.dragging .irs--round .irs-single {
    opacity: 1;
    transition-delay: 0s;
}

@media (hover: hover) {
    .range-slider:hover .irs--round.irs-from,
    .range-slider:hover .irs--round .irs-to,
    .range-slider:hover .irs--round .irs-single {
        opacity: 1;
        transition-delay: 0s;
    }
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
    border-top-color: #009fe3ee;
}

.irs--round .irs-bar {
    display: none;
}

/* exercise Sorting */
.sortable-item > *,
.draggable-item {
    background: white;
    border: 1px solid grey;
    border-radius: 0.4em;
    width: fit-content;
    line-height: 1.2;
    padding: 0.2em 0.6em 0.25em;
    cursor: grab;
    min-height: 1.8em;
}

.exercise_sorting_question > * {
    border: 1px solid transparent;
    padding: 0.15em 0;
    font-weight: bold;
}

.exercise_sorting_answer.ui-sortable-helper > * {
    box-shadow: -0.25em 0.25em 0.25em rgb(0 0 0 / 20%);
    transform: translate(0.25em, -0.25em) rotate(-2.5deg);
    cursor: "grabbing";
}

.exercise_sorting_question,
.exercise_sorting_answer {
    min-height: 2em;
    margin-bottom: 0.75em;
    box-sizing: content-box;
    transition: transform 0.2s ease;
}

.exercise-sorting .ui-state-highlight {
    background: rgba(0, 0, 0, 0.05);
    border-color: transparent;
    border-radius: 1em;
    height: 2em;
    margin-bottom: 0.62em;
}

/*
.exercise_sorting_answer[style*="display: none"] {
    display: block !important;
    background-color: rgba(0, 0, 0, 0.8);
}
*/
.exercise_sorting_answer > * {
    position: relative;
}

.exercise_sorting_answer span {
    display: block;
    position: relative;
    width: 100%;
}

.exercise_dragdroptable_table .droppables-holder,
.exercise-dragdroptable-sorting .exercise_dragdroptable_table .draggable-item,
.exercise_dragdroptable_table .draggable-item:not(.ui-draggable-dragging) {
    width: 100%;
}

.exercise_sorting_answer .result-icon,
.exercise_dragdroptable_content .draggable-item > .result-icon,
.exercise_dragdroptable_table .droppable-item .result-icon {
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    border-radius: 50%;
    background-color: white;
}

.exercise_dragdroptable_table th {
    text-align: left;
}

.exercise_sorting_answer .result-icon svg,
.exercise_dragdroptable_content .draggable-item > .result-icon svg,
.exercise_dragdroptable_table .droppable-item .result-icon svg {
    width: 1.8em;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.show-results .draggable-item {
    cursor: default !important;
}

.exercise_sorting_content.show-results .sortable-item,
.exercise_dragdroptable_content.show-results .sortable-item {
    pointer-events: none !important;
}

.exercise_sorting_content.show-results .exercise_sorting_answer .result-icon,
.exercise_dragdroptable_content.show-results .draggable-item > .result-icon,
.exercise_dragdroptable_content.show-results
    .exercise_dragdroptable_table
    .result-icon {
    display: block;
}

.exercise_sorting_answer .result-icon > .icon-check-circle-green,
.exercise_dragdroptable_content
    .draggable-item
    > .result-icon
    > .icon-check-circle-green,
.exercise_sorting_answer.correct .result-icon > .icon-wrong-circle-red,
.exercise_dragdroptable_content
    .draggable-item.correct
    > .result-icon
    > .icon-wrong-circle-red,
.exercise_dragdroptable_table .result-icon > .icon-check-circle-green,
.exercise_dragdroptable_table
    .correct-info.correct
    .result-icon
    > .icon-wrong-circle-red,
.exercise_dragdroptable_content.show-results
    .draggable-item.displaying
    > .result-icon {
    display: none;
}

.exercise_sorting_answer.correct .result-icon > .icon-check-circle-green,
.exercise_dragdroptable_content
    .draggable-item.correct
    > .result-icon
    > .icon-check-circle-green,
.exercise_dragdroptable_table
    .correct-info.correct
    .result-icon
    > .icon-check-circle-green {
    display: block;
}

.exercise_sorting_content.show-results
    .final-droppable
    .exercise_sorting_answer.correct,
.exercise_dragdroptable_content.show-results
    .final-droppable
    .correct-info.correct,
.exercise_dragdroptable_content.show-results
    .exercise_dragdropfield_panel
    .draggable-item.correct {
    color: rgb(160, 172, 126);
}

.exercise_sorting_content.show-results
    .final-droppable
    .exercise_sorting_answer:not(.correct),
.exercise_dragdroptable_content.show-results
    .final-droppable
    .correct-info:not(.correct),
.exercise_dragdroptable_content.show-results
    .exercise_dragdropfield_panel
    .draggable-item:not(.correct) {
    color: rgb(227, 6, 19);
}

.exercise_sorting_panels {
    display: flex;
}

.exercise_sorting_panels.columns-half > * {
    width: 48.7%;
}

.exercise_sorting_questions {
    margin-right: 2.6%;
}

.exercise_sorting_controls button,
.exercise_dragdroptable_controls button {
    color: black;
    background: white;
    padding: 0.1em 0.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 1px solid white;
    border-radius: 1.5em;
    margin: 0 0.5em;
    min-height: 2em;
}

.exercise-done-button {
    position: absolute;
}

.show-results .exercise-done-button {
    display: none;
}

.exercise_sorting_controls button svg,
.exercise_dragdroptable_controls button svg {
    margin-right: 0.4em;
    width: 1.7em;
}

.exercise_sorting_controls .exercise-done-button svg,
.exercise_dragdroptable_controls .exercise-done-button svg {
    width: 1.5em;
}

.exercise_sorting_controls button:not(.active),
.exercise_dragdroptable_controls button:not(.active) {
    opacity: 0.25;
    pointer-events: none;
}

.exercise_sorting_controls,
.exercise_dragdroptable_controls {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 2em;
    margin-bottom: 2em;
}

.exercise-dialog {
    position: relative;
    background-color: #009fe3;
    color: white;
    filter: drop-shadow(0.35em 0.35em 0.25em rgb(0 0 0 / 15%));
    transition: opacity 0.15s ease;
    opacity: 0;
    pointer-events: none;
    border-radius: 1.5em;
    padding-left: 1em;
    padding-right: 0.1em;
}

.dialog-content {
    display: flex;
    align-items: center;
    padding: 0.5em;
}

.exercise-dialog button {
    border-color: transparent;
    background-color: white;
    color: #009fe3;
    padding: 0 1em;
    margin-left: 1em;
    margin-right: 0;
    flex-shrink: 0;
}

.exercise-dialog p {
    margin: 0;
}

.show-results .exercise-dialog {
    opacity: 1;
    pointer-events: all;
}

.dialog-content:not(.active) {
    display: none;
}

/* Exercise Drag and Drop */
.exercise_dragdroptable_table {
    width: calc(100% + 1.5em);
    margin: -0.75em -1em;
    margin-bottom: 1.5em;
    table-layout: fixed;
    border-spacing: 0.5em 0.5em;
    line-height: 1.2;
}

.exercise_dragdroptable_draggables {
    margin-bottom: 1.5rem;
    min-height: 2em;
}

.exercise_dragdroptable_draggables .draggable-item {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    vertical-align: text-top;
    font-size: 0.9em;
}

.exercise_dragdroptable_table td,
.exercise_dragdroptable_table th {
    vertical-align: top;
}

.droppables-parent {
    z-index: 0;
    position: relative;
}

.droppables-parent.dragging-from-here {
    z-index: 1;
}

.exercise_dragdroptable_table td {
    position: relative;
}

.exercise_dragdroptable_table td.info-cell {
    font-weight: bold;
    padding: 0.25em 0;
}

.exercise_dragdroptable_table td.droppable-cell:before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    min-height: 1.5em;
    background: white;
    border-radius: 0.4em;
    z-index: -1;
    max-height: 4em;
}

.exercise_dragdroptable_table .droppable-item {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 1.8em;
}

.exercise_dragdroptable_table td.droppable-cell.ui-droppable-hover {
    background-color: transparent;
}

.exercise_dragdroptable_table
    td.droppable-cell.ui-droppable-hover
    .droppables-holder
    *:not(.ui-draggable-dragging),
.exercise_dragdroptable_table td.droppable-cell.ui-droppable-hover:before {
    background: #d8d8d8;
    transition:
        background-color 0.4s ease,
        color 0.4s ease;
}

.exercise_dragdroptable_table
    .droppable-item
    .draggable-item:not(.ui-draggable-dragging) {
    border: none;
}

.exercise_dragdroptable_table .draggable-item:not(.ui-draggable-dragging) {
    position: unset !important;
}

.exercise_dragdroptable_table
    .draggable-item:not(.ui-draggable-dragging):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.exercise-dragdroptable .draggable-item {
    transition:
        background-color 0.6s ease,
        color 0.6s ease;
}

.exercise-dragdroptable .draggable-item.ui-draggable-dragging {
    background-color: #009fe3;
    border-color: #009fe3;
    color: white;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.exercise-dragdroptable.n-columns-3
    .exercise_dragdroptable_draggables
    .draggable-item.ui-draggable-dragging {
    max-width: 47%;
}

.exercise-dragdroptable.answers-on-side .exercise_dragdroptable_panel {
    display: flex;
    justify-content: space-between;
    align-content: start;
}

.exercise_dragdroptable_table {
    margin-top: 1em;
}

.exercise-dragdroptable.answers-on-side .exercise_dragdroptable_table {
    width: calc(50% + 1.5em);
}

.exercise-dragdroptable.answers-on-side .exercise_dragdroptable_draggables {
    flex-direction: column;
    width: 50%;
    padding-top: 0.25em;
}

.exercise-dragdroptable.answers-on-side.n-columns-2
    .exercise_dragdroptable_table {
    width: calc(67% + 1.5em);
}

.exercise-dragdroptable.answers-on-side.n-columns-2
    .exercise_dragdroptable_draggables {
    flex-direction: column;
    width: 32%;
}

.exercise-dragdroptable.answers-on-side
    .exercise_dragdroptable_draggables
    .draggable-item {
    max-width: 100%;
    margin-right: 0.25em;
}

/* Exercise drag and drop fields */
.exercise_dragdropfield_panels {
    display: flex;
    align-self: flex-start;
}

.exercise_dragdropfield_panel {
    flex-wrap: wrap;
    width: 70%;
}

.exercise-dragdroptable.answers-on-side .exercise_dragdropfield_draggables {
    width: 30%;
}

.exercise_dragdropfield_panel > * {
    width: 47%;
}

.n-columns-2 .exercise_dragdropfield_panel,
.n-columns-1 .exercise_dragdropfield_panel {
    width: 50%;
}

.n-columns-2 .exercise_dragdropfield_panel > *,
.n-columns-1 .exercise_dragdropfield_panel > * {
    width: 100%;
}

.step.lection-exercise-screen:not(.collapse-sources)
    .n-columns-1
    .exercise_dragdropfield_panels {
    flex-direction: column;
}

.step.lection-exercise-screen:not(.collapse-sources)
    .n-columns-1
    .exercise_dragdropfield_panel,
.step.lection-exercise-screen:not(.collapse-sources)
    .n-columns-1
    .exercise_dragdropfield_draggables {
    width: 100%;
}

.step.lection-exercise-screen:not(.collapse-sources)
    .n-columns-2
    .exercise_dragdropfield_panel {
    width: 70%;
}

.exercise_dragdropfield_panel .droppable-field {
    background-color: white;
    margin-right: 3%;
    margin-bottom: 3%;
    position: relative;
    border-radius: 0.4rem;
}

.exercise_dragdropfield_panel .droppable-field-header {
    font-weight: bold;
    padding: 0.5em;
}

.exercise_dragdropfield_panel .droppable-cell {
    min-height: 12em;
}

.exercise_dragdropfield_panel .no-image .droppable-cell {
    border: 1px solid black;
    margin: 0 0.6em 0.6em;
    min-height: 10em;
}

.exercise_dragdropfield_panel .droppable-item {
    display: flex;
    flex-direction: column;
}

.exercise_dragdropfield_panel .droppable-cell {
    flex: 1;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    padding: 0.5em;
    padding-right: 0;
    position: relative;
    border-radius: 0.4rem;
}

.exercise_dragdropfield_panel
    .droppables-parent:not(.no-image)
    .droppable-cell {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.exercise_dragdropfields_controls {
    margin-top: 2em;
}

.multiple-drops .draggable-item {
    margin-right: 0.5em;
    margin-bottom: 0.25em;
    display: inline-block;
    overflow-y: hidden;
}

.multiple-drops .droppable-field .draggable-item:not(.displaying) {
    max-height: 1.8em;
    line-height: 1.7em;
    padding-top: 0;
    font-size: 0.9em;
}

.multiple-drops .droppable-field .draggable-item:after {
    content: "–";
    position: absolute;
    top: 0;
    right: 0.2em;
    opacity: 0.5;
    line-height: 0.7em;
    cursor: pointer;
}

.multiple-drops .droppable-field .draggable-item:not(.displaying):after {
    content: "+";
    line-height: 0.9em;
}

.multiple-drops
    .exercise_dragdroptable_panel
    .droppable-field:not(.no-image)
    .draggable-item {
    border: none;
}

.exercise_dragdropfield_panel .correct-info {
    position: relative;
    height: fit-content;
}

.exercise_dragdropfield_panel .correct-info:after {
    background-position: 95% 95%;
    background-size: 3.5em;
}

.n-columns-2 .exercise_dragdropfield_panel .correct-info:after {
    background-position: 97% 95%;
}

/* Exercise Graphic Organizer */

.exercise-graphic-organizer_content {
    max-width: calc(135vh - 11.5rem);
    min-width: 55vw;
}

.exercise-graphic-organizer_content .canvas-wrap {
    width: 100%;
    background: white;
    border: 0.2rem solid white;
    margin-top: -0.1rem;
    position: relative;
    z-index: 0;
}

.exercise-graphic-organizer_content .controls {
    max-width: calc(135vh - 11.5rem);
}

.exercise-graphic-organizer_content .canvas {
    width: 100%;
    border: 1px solid black;
}

.exercise-graphic-organizer_content canvas.drawing + canvas {
    cursor: crosshair !important;
}

.exercise-graphic-organizer_content .canvas-container,
.exercise-graphic-organizer_content canvas {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
}

.exercise-graphic-organizer_content .controls {
    display: flex;
    background: white;
    padding: 0.07rem;
}

.exercise-graphic-organizer_content .all-controls,
.exercise-graphic-organizer_content .controls-groups {
    display: flex;
    position: relative;
    z-index: 1;
    justify-content: space-between;
}

.exercise-graphic-organizer_content .controls-groups {
    display: flex;
}

.exercise-graphic-organizer_content .controls > *:first-child {
    padding-left: 0.1rem;
}

.exercise-graphic-organizer_content .controls > * {
    margin-top: 0.1rem;
    margin-right: 0.1rem;
}

.exercise-graphic-organizer_content .controls button {
    min-height: 2.3rem;
    min-width: 2.5rem;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.exercise-graphic-organizer_content .controls button.active {
    border-color: black;
    z-index: 1;
}

.exercise-graphic-organizer_content .controls.shapes button,
.exercise-graphic-organizer_content .controls.selected button {
    background-size: 68%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--exercise-color);
}

.exercise-graphic-organizer_content .controls.shapes .button-draw {
    background-image: url(links/draw.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-select {
    background-image: url(links/select.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-note {
    background-image: url(links/textarea.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-arrow {
    background-image: url(links/arrow.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-arrow-double {
    background-image: url(links/arrow_double.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-line {
    background-image: url(links/line.svg);
}

.exercise-graphic-organizer_content .controls.shapes .button-text {
    background-image: url(links/text.svg);
    background-size: 32%;
}

.exercise-graphic-organizer_content .controls.selected .button-lock {
    background-image: url(links/lock.svg);
    background-size: 100%;
}

.exercise-graphic-organizer_content .controls.selected .button-delete {
    background-image: url(links/delete.svg);
    background-size: 100%;
}

.exercise-graphic-organizer_content .controls.colors {
    margin-left: 1rem;
}

.exercise-graphic-organizer_content .controls.colors,
.exercise-graphic-organizer_content .controls.colors button {
    background: transparent;
    border-color: transparent;
}

.exercise-graphic-organizer_content .controls.colors button {
    min-width: 2rem;
}

.exercise-graphic-organizer_content .controls.colors .color-sample {
    box-sizing: content-box;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1px solid black;
}

.exercise-graphic-organizer_content
    .controls.colors
    button.active
    .color-sample {
    border-width: 0.3em;
    border-color: var(--exercise-color);
}

.exercise-graphic-organizer_content .controls.selected button {
    background-color: var(--exercise-color);
}

.exercise-graphic-organizer_content .controls.inactive-group button {
    pointer-events: none;
    opacity: 0.15;
    background-color: #c7c7c7;
}

.source-draggable-images,
.source-to-canvas-background {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.source-draggable-images > *,
.source-to-canvas-background > * {
    margin: 0.3rem 0.6rem 0.3rem 0;
}

.source-draggable-images img {
    max-width: 7.5rem;
    max-height: 7.5rem;
    width: auto;
    height: auto;
}

.source-draggable-images.images-size-small img {
    max-width: 4rem;
    max-height: 4rem;
}

.source-to-canvas-background img {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    object-position: center top;
    cursor: pointer;
}

.draggable-sources .rte > p:first-child {
    margin-top: 0;
}

.draggable-sources-block:not(:last-child) {
    padding-bottom: 1rem;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 1rem;
}

.draggable-image.selected img {
    outline: 0.3em solid var(--exercise-color);
}

.video-info {
    font-size: 0.9em;
}

.video-description {
    font-weight: 700;
}

.video-times .time {
    min-width: 3.7em;
    text-decoration: underline;
    color: var(--exercise-color);
    display: inline-block;
    cursor: pointer;
}

.video-times > div {
    margin-bottom: 0.4em;
}

.tpl-exercise .plyr__control--overlaid {
    background: var(--exercise-color);
}

@media (hover: hover) {
    .tpl-exercise .plyr__control--overlaid:hover {
        background: var(--exercise-color);
        opacity: 1;
    }
}

.tpl-exercise .plyr--full-ui input[type="range"] {
    color: var(--exercise-color);
}

@media (hover: hover) {
    .tpl-exercise .plyr--video .plyr__control:hover {
        background: var(--exercise-color);
    }
}

.small-note {
    display: inline-block;
    font-size: 0.9em;
    color: var(--exercise-color);
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
    background-color: transparent;
    cursor: pointer;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.lection-intro-text .small-note {
    filter: brightness(0.9);
}

.small-note sub {
    font-size: 1em;
}

.note-links a {
    padding: 0.5em 0.75em 0.5em 0.25em;
    background: white;
    display: block;
    width: fit-content;
}

.lection-source-screen .note-links a {
    background-color: #e6e6e6;
}

.lection-intro-text .note-links a {
    background-color: var(--exercise-color);
}

.note-button {
    position: relative;
    background: transparent;
    margin: 0.25em 0;
}

.note-button .note-small-description {
    padding-left: 1.5em;
}

@media (hover: hover) {
    .note-button:hover .note-small-description {
        text-decoration: underline;
    }
}

.note-button > svg {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
    position: absolute;
    left: 0.25em;
    top: 0.5em;
    opacity: 0.75;
}

.note-button svg path:last-child {
    fill: black;
}

.small-note-draggable:not(.showing) {
    opacity: 0;
    pointer-events: none;
}

.small-note-draggable {
    position: absolute;
    min-width: 10em;
    max-width: 20em;
    display: inline-block;
    background: white;
    padding: 1.7em 1em 0;
    font-size: 0.85em;
    z-index: 10;
    border: 2px solid var(--exercise-color);
    cursor: initial;
}

.small-note-draggable.on-top {
    z-index: 100;
}

.small-note-head {
    background: var(--exercise-color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    cursor: grab;
    height: 1.2em;
}

.small-note-head .small-note-title {
    font-family: "Overpass Mono", monospace;
    background: white;
    color: var(--exercise-color);
    font-weight: 700;
    font-size: 1.2em;
    padding: 0.1em 0.5em;
    position: absolute;
}

.small-note-head .small-note-title:after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    right: -1.15em;
    top: 0;
    background-image: url("links/drag.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.small-note-head .small-note-close {
    position: absolute;
    right: 0.2em;
    top: 0;
    font-size: 1.5em;
    color: inherit;
    cursor: pointer;
    line-height: 0.5;
    top: 50%;
    transform: translateY(-65%);
}

.small-note-draggable p,
.small-note-draggable p:last-child {
    margin: 1em 0;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.help-overlay,
.pdf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

.pdf-overlay h1 strong {
    transition: opacity 0.25s ease;
}

.help-overlay.active,
.pdf-overlay.active {
    opacity: 1 !important;
    pointer-events: all;
}

.pdf-overlay .pdf-container {
    position: relative;
    width: calc(100vw - 3rem);
    height: calc(100vh - 9rem);
}

.pdf-overlay iframe {
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100vw - 3rem);
    height: calc(100vh - 9rem);
}

.pdf-overlay,
.help-content {
    width: 75vw;
    max-height: 80vh;
    background-color: var(--exercise-light-color);
    position: relative;
    margin-bottom: 2vh;
    min-height: 50vh;
}

.help-content {
    background-color: white;
}

.close-overlay .help-content,
.pdf-download-overlay .help-content {
    padding: 5em 1em 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.close-overlay-header h1,
.pdf-overlay-header h1 {
    font-size: 1.8rem;
}

.close-overlay-header strong {
    font-size: 1.4em;
    margin: 0.2em auto;
    display: block;
}

.pdf-download-overlay .loading {
    mix-blend-mode: multiply;
    transition: opacity 0.25s ease;
}

.close-overlay-buttons {
    display: flex;
    justify-content: space-evenly;
}

.close-overlay-buttons button,
.close-overlay-buttons .button {
    display: block;
    cursor: pointer;
    padding: 0.6em 0.9em;
    margin: 0 0.9em;
    font-size: 1.2rem;
    font-weight: 700;
}

.close-overlay-buttons button,
.close-overlay-buttons .button {
    background: var(--exercise-color);
    color: black;
}

@media (hover: hover) {
    .close-overlay-buttons .button:hover,
    .close-overlay-buttons button:hover {
        background: black;
        color: white;
    }
}

.slick-initialized .slick-slide.help-slide {
    display: flex;
}

.help-slide-wrap {
    height: calc(70vh - 3rem);
    padding: calc(10vh - 4rem) 7% 0;
    position: relative;
}

.help-slide-wrap .scroll-wrapper {
    height: 100%;
}

.help-slide-wrap .scroll-inner-wrapper {
    user-select: text;
    -webkit-user-select: text;
}

.help-overlay .slick-dots {
    bottom: 0em;
}

.help-overlay .slick-dotted.slick-slider {
    overflow: hidden;
}

.help-background {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-background svg {
    width: 70%;
}

.help-background svg > g > g:last-child > path {
    fill: var(--exercise-color);
}

.help-title {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transform: translateY(-100%);
    background-color: var(--exercise-color);
    width: 10em;
    padding: 0 0.5em;
    line-height: 1.8em;
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
    color: white;
    /* removed */
    display: none;
}

.help-title span:not(.active) {
    opacity: 0;
    pointer-events: none;
}

.help-close-button,
.pdf-close-button {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 2;
}

.help-close-button {
    top: 0;
    right: 0;
    font-size: 1.8em;
    color: black;
}

.help-head {
    height: 1.5em;
    background-color: var(--exercise-color);
}

.help-overlay .slick-dots li button:before {
    color: white;
}

.help-overlay .slick-dots li button:focus:before,
.help-overlay .slick-dots li.slick-active button:before {
    color: var(--exercise-color);
}

.chocolat-wrapper .chocolat-close {
    color: transparent;
    font-family: inherit;
    font-size: 1em;
    line-height: 1em;
    text-shadow: none;
    border: 0;
    background: none;
    outline: none;
    box-shadow: none;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("links/close.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-filter: invert();
    filter: invert();
    top: 1rem;
    right: 2rem;
    position: fixed;
    transform: scale(1.02);
}

.chocolat-wrapper {
    z-index: 200;
    background: rgba(0, 0, 0, 0.8);
}

.chocolat-wrapper .chocolat-overlay {
    background: none;
}

.chocolat-wrapper .chocolat-bottom {
    background: none;
    font-size: 0.9rem;
    max-width: 40em;
    padding: 3em 1em;
    margin: auto;
    text-align: center;
}

.chocolat-wrapper .chocolat-description {
    text-align: center;
}

.chocolat-wrapper .chocolat-description ~ span {
    display: none;
}

.ps__rail-y,
.ps__thumb-y {
    width: 0.2em !important;
}

.ps__rail-y {
    background-color: transparent !important;
    border-radius: 0 !important;
    right: 0 !important;
}

.ps__thumb-y {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
}

.scroll-inner-wrapper {
    padding: 1rem 0.5em 0 1em;
}

.slick-prev + .slick-list .scroll-wrapper {
    margin-left: 0;
    margin-right: 0;
}

.slick-prev + .slick-list .scroll-inner-wrapper {
    padding: 0 0.4em 1em;
}

.scroll-inner-wrapper {
    position: relative;
}

.scroll-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 9rem);
    position: relative;
    margin: 0.5rem -1rem 0;
}

.lection-source-screen .scroll-wrapper {
    height: calc(100vh - 5.5rem);
}

/*
.scroll-inner-wrapper ~ .text-gradient {
    position: absolute;
    top: 0;
    pointer-events: none;
    height: 1em;
    right: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s ease;
    display: none;
}
.scroll-inner-wrapper ~ .text-gradient.gradient-bottom {
    top: auto;
    bottom: 0;
    transform: rotate(180deg) translateY(-4%);
}
.scroll-inner-wrapper.ps--active-y ~ .text-gradient.gradient-bottom,
.scroll-wrapper.middle .scroll-inner-wrapper.ps--active-y ~ .text-gradient.gradient-bottom,
.scroll-wrapper.middle .scroll-inner-wrapper.ps--active-y ~ .text-gradient.gradient-top,
.scroll-wrapper.bottom .scroll-inner-wrapper.ps--active-y ~ .text-gradient.gradient-top {
    opacity: 1;
}
.scroll-wrapper.bottom .scroll-inner-wrapper.ps--active-y ~ .text-gradient.gradient-bottom {
    opacity: 0;
}
.lection-sources .text-gradient {
    z-index: 10;
}
.text-gradient {
    background: linear-gradient(rgb(255, 255, 255), transparent);
}
.lection-exercise-screen .text-gradient {
    background: linear-gradient(#E6E6E6, #E6E6E600);
}
.lection-intro-screen .text-gradient {
    background: linear-gradient( var(--exercise-light-color),  transparent);
    z-index: 10;
}
.help-overlay .text-gradient {
    background: linear-gradient( var(--exercise-light-color),  transparent);
    z-index: 10;
}
.help-overlay .text-gradient {
    background: linear-gradient( white,  transparent);
    z-index: 10;
}
*/
/*
.scrollable:before,
*/
.scrollable:after {
    content: "";
    display: block;
    position: absolute;
    height: 0.75rem;
    top: 0;
    left: -20%;
    right: -20%;
    pointer-events: none;
    background: radial-gradient(
        farthest-side at 50% 0,
        rgba(0, 0, 0, 0.125),
        rgba(0, 0, 0, 0)
    );
    background-repeat: no-repeat;
    background-size: 100%;
    transition: opacity 0.2s ease;
    opacity: 1;
    z-index: 1;
}

.scrollable:after {
    background: radial-gradient(
        farthest-side at 50% 100%,
        rgba(0, 0, 0, 0.125),
        rgba(0, 0, 0, 0)
    );
    bottom: 0;
    top: auto;
}

.scrollable.top:before,
.scrollable.bottom:after {
    opacity: 0;
}

.project-iframe {
    pointer-events: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    left: 150vw;
    transition:
        left 2s ease,
        background-color 2s ease;
    z-index: 20000;
}

.project-iframe:not(.active) {
    background-color: transparent !important;
}

.project-iframe.active {
    pointer-events: all;
    left: 0;
    opacity: 1;
}

.project-iframe > iframe {
    position: absolute;
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    max-width: 185vh;
    max-height: 100vw;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 2em 0px rgb(0 0 0 / 0);
    transition: box-shadow 500ms;
}

@media screen and (min-width: 1194px), (min-height: 834px) {
    .project-iframe > iframe {
        width: 1194px;
        height: 834px;
        max-width: 93vw;
        max-height: 93vh;
    }
}

.project-iframe.active > iframe {
    box-shadow: 0 0 1em 0px rgb(0 0 0 / 35%);
}

body .home-wrap {
    transition: opacity 2s ease;
    opacity: 1;
}

body.body-inactive .home-wrap {
    opacity: 0.3;
    pointer-events: none;
}

body.project-opened {
    overflow: hidden;
    pointer-events: none;
    height: 100vh;
}

.movable-element {
    opacity: 0;
    visibility: hidden;
}

.back-to-home {
    cursor: pointer;
}

#home_intro_elements {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#home_intro_elements > * {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#home_intro_shape_green {
    background: #a6d6d0;
    width: 16vw;
    height: 8.5vw;
    bottom: 77%;
    left: 26vw;
    -webkit-clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 0);
    clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 0);
    transform: translate(-50%, 50%);
}

#home_intro_shape_white1 {
    background: white;
    width: 21vw;
    height: 15vw;
    bottom: 44%;
    left: 21vw;
    -webkit-clip-path: polygon(0% 0%, 20% 85%, 100% 100%, 80% 15%);
    clip-path: polygon(0% 0%, 20% 85%, 100% 100%, 80% 15%);
    transform: translate(-50%, 50%);
}

#home_intro_shape_white2 {
    background: white;
    width: 16vw;
    height: 7vw;
    bottom: 76%;
    left: 56vw;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 50% 100%, 0% 75%);
    clip-path: polygon(50% 0%, 100% 25%, 50% 100%, 0% 75%);
    transform: translate(-50%, 50%);
}

#home_intro_shape_yellow {
    background: #ccb255;
    width: 7vw;
    height: 9vw;
    bottom: 49%;
    left: 37vw;
    -webkit-clip-path: polygon(0% 0%, 25% 80%, 100% 100%, 75% 20%);
    clip-path: polygon(0% 0%, 25% 80%, 100% 100%, 75% 20%);
    transform: translate(-50%, 50%);
}

#home_intro_shape_pink {
    background: #f0bbb0;
    width: 22vw;
    height: 9vw;
    bottom: 46%;
    left: 71vw;
    -webkit-clip-path: polygon(0% 0%, 30% 100%, 100% 100%, 70% 0%);
    clip-path: polygon(0% 0%, 30% 100%, 100% 100%, 70% 0%);
    transform: translate(-50%, 50%);
}

#home_intro_shape_image1 {
    background-image: url("links/OG_Home-Image_Left.jpg");
    width: 11.5vw;
    height: 20vw;
    bottom: 69%;
    left: 34.5vw;
    -webkit-clip-path: polygon(0% 0%, 0% 70%, 100% 100%, 100% 30%);
    clip-path: polygon(0% 0%, 0% 70%, 100% 100%, 100% 30%);
    transform: translate(-50%, 50%);
}

#home_intro_shape_image2 {
    background-image: url("links/OG_Home-image__right_altern.jpg");
    width: 13vw;
    height: 16vw;
    bottom: 60%;
    left: 72vw;
    -webkit-clip-path: polygon(10% 37%, 100% 0%, 90% 63%, 0% 100%);
    clip-path: polygon(10% 37%, 100% 0%, 90% 63%, 0% 100%);
    background-position: top;
    transform: translate(-50%, 50%);
}

#home_intro_queen {
    left: 65vw;
    bottom: 85%;
    width: 7vw;
    transform: translate(-50%, 50%);
}

#home_intro_vase {
    left: 32.5vw;
    bottom: 44%;
    width: 5.9vw;
    transform: translate(-50%, 50%) rotate(4deg);
}

#home_intro_usine {
    left: 25.5vw;
    bottom: 72%;
    width: 7.3vw;
    transform: translate(-50%, 50%);
}

#home_intro_rocket {
    left: 39vw;
    bottom: 87%;
    width: 5.6vw;
    transform: translate(-50%, 50%);
}

#home_intro_helmet {
    left: 84vw;
    bottom: 46%;
    width: 7.2vw;
    transform: translate(-50%, 50%);
}

#home_intro_hand {
    background-image: url("links/OG_Home-hand.png");
    background-size: contain;
    background-position: bottom;
    left: 46vw;
    bottom: -5%;
    width: 28vw;
    height: 30vw;
    transform: translate(-50%, 0);
}

#home_intro_logo {
    left: 50vw;
    bottom: 17vw;
    width: 13em;
    transform: translate(-27%, 0);
    position: fixed;
    transition: opacity 1s ease;
}

.scrolled #home_intro_logo {
    opacity: 0;
}

.logo-in-section {
    width: 13.25rem;
    transform: translate(22.7%, 0);
}

.logo-in-section svg {
    width: 100%;
}

#home_intro_logo svg path,
#home_intro_logo svg rect {
    opacity: 0;
}

.animations-started #home_intro_logo svg path,
.animations-started #home_intro_logo svg rect {
    opacity: 1;
}

.animations-started #home_intro_logo svg path:first-child {
    transition-delay: 1.75s;
}

.animations-started #home_intro_logo svg rect:nth-child(3) {
    transition-delay: 1.75s;
}

.animations-started #home_intro_logo svg path:last-child {
    transition-delay: 2s;
}

.animations-started #home_intro_logo svg rect:nth-child(5) {
    transition-delay: 2s;
}

.animations-started #home_intro_logo svg rect:nth-child(4) {
    transition-delay: 1.2s;
}

.animations-started #home_intro_logo svg rect:nth-child(6) {
    transition-delay: 0.9s;
}

.animations-started #home_intro_logo svg rect:nth-child(7) {
    transition-delay: 0.6s;
}

.animations-started #home_intro_logo svg rect:nth-child(8) {
    transition-delay: 0.3s;
}

.cookie_link {
    margin-bottom: 2em !important;
    text-align: right;
    padding-right: 2em;
}

.noat-cookie__consent {
    bottom: auto !important;
    top: 0 !important;
}

.noat-cookie-consent__banner {
    padding: 2em !important;
    font-size: 1rem !important;
    opacity: 0;
    -webkit-animation: fadein 3s;
    /* Safari, Chrome and Opera > 12.1 */
    /* Firefox < 16 */
    /* Internet Explorer */
    /* Opera < 12.1 */
    animation: fadein 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.noat-cookie-consent-banner__allow {
    background: transparent !important;
    border-radius: 0 !important;
    font-family: "Overpass Mono", monospace;
    font-size: 1.2em;
    border: 1px solid white !important;
    padding: 1.3em 0.8em !important;
    max-height: 0 !important;
    min-height: 0 !important;
}

@media (hover: hover) {
    .noat-cookie-consent-banner__allow:hover {
        background: white !important;
        color: black !important;
    }
}

.noat-cookie-consent-banner__other-actions {
    width: 30em !important;
}

.privacywire-text {
    font-size: 0.8em;
}

.privacywire-body,
.privacywire-text,
.privacywire-banner,
.privacywire-page-link {
    font-family: inherit;
}

.privacywire-banner {
    padding: 1em;
}

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

.privacywire-wrapper {
    z-index: 10000;
    position: relative;
}

.privacywire.privacywire-banner,
.privacywire.privacywire-options {
    padding: 1em 2em;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(250, 250, 250);
    box-shadow: none;
    font-size: 1rem;
    opacity: 0;
    -webkit-animation: fadein 3s;
    /* Safari, Chrome and Opera > 12.1 */
    /* Firefox < 16 */
    /* Internet Explorer */
    /* Opera < 12.1 */
    animation: fadein 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.show-banner div.privacywire.privacywire-banner,
.show-message div.privacywire.privacywire-message,
.show-options div.privacywire.privacywire-options {
    top: 0;
    bottom: auto !important;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.privacywire.privacywire-message {
    display: none;
}

.privacywire-text {
    font-size: 0.8em;
}

.privacywire-body,
.privacywire-text,
.privacywire-banner,
.privacywire-page-link {
    font-family: inherit;
}

.privacywire-banner {
    padding: 1em;
}

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

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.privacywire-body {
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
    align-items: center;
}

.privacywire-buttons > button {
    background: transparent !important;
    border-radius: 0 !important;
    font-family: "Overpass Mono", monospace;
    border: 1px solid white !important;
    padding: 0.2em 0.3em;
    margin: 0.5em 0;
}

.privacywire-banner .privacywire-buttons > button {
    padding: 0.7em 0.8em !important;
    min-height: 3em !important;
    font-size: 1em;
}

@media (hover: hover) {
    .privacywire-buttons > button:hover {
        background: white !important;
        color: black !important;
    }
}

.privacywire-buttons {
    order: 1000;
}

.privacywire-page-link {
    margin: 0 4em;
    font-size: smaller;
}

@media (max-width: 630px) {
    .privacywire-body {
        flex-direction: column;
        align-items: baseline;
    }

    .privacywire-buttons {
        margin: 1em 0;
        width: 100%;
    }

    .privacywire-page-link {
        margin: 0.3em 0 1em;
    }

    .allow-all {
        width: 100%;
    }
}

#pdfDownloadform {
    display: none;
}

.section-home-content .section-outer {
    display: block;
}

.home-content-intro,
.home-content .more-text .rte {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.home-content-intro > *,
.home-content .more-text .rte > * {
    width: 48%;
}

.home-content .more-text p:first-child {
    margin-top: 1.5em;
}

.home-content {
    padding-bottom: 5rem;
    padding-top: 5rem;
}

.home-content .rte {
    margin-bottom: 1rem;
}

.home-content-intro .rte {
    -moz-columns: 1;
    columns: 1;
    margin-bottom: 0;
}

.home-content-intro .rte > *:last-child {
    margin-bottom: 0;
}

.section-home-content > div:nth-child(even) {
    background-color: white;
}

.home-content .read-more,
.more-modules {
    background-color: transparent;
    color: black;
    display: block;
    width: 100%;
    padding: 0.5em 0 1em;
    border-top: 1px solid black;
    margin-top: 2em;
    font-weight: 700;
    transition: all 0.5s ease;
}

.more-modules {
    border-top: none;
    margin-top: 0;
    padding-bottom: 2em;
    transform: translateY(-25%);
}

.home-content .read-more:before,
.more-modules:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 2em;
    background-image: url("links/right-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    transform: rotate(90deg) translateX(10%);
    transition: transform 0.5s ease;
    margin: -0.5em 0;
}

@media (hover: hover) {
    .home-content .read-more:hover,
    .more-modules:hover {
        opacity: 0.3;
    }
}

.home-content .read-more:hover:before,
.more-modules:hover:before {
    transform: rotate(90deg) translateX(15%);
}

.home-content .read-more.open {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
    margin-top: 1em;
    pointer-events: none;
}

.home-content .read-more:not(.open) + div {
    max-height: 0 !important;
    opacity: 0;
    transition:
        max-height 0.5s ease 0.25s,
        opacity 0.5s ease;
}

.home-content .read-more + div {
    max-height: 200em;
    opacity: 1;
    overflow: hidden;
    transition:
        max-height 0.5s ease,
        opacity 0.5s ease 0.25s;
}

.home-content .more-text p {
    -moz-break-inside: avoid-column;
    -webkit-break-inside: avoid-column;
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
    -moz-column-fill: balance;
    column-fill: balance;
}

.section-home-content {
    padding-bottom: 5rem;
    padding-top: 0;
}

.home-content-intro h2 {
    margin-top: 0;
    margin-bottom: 1.3em;
}

.home-content-intro .rte:first-child {
    margin-top: 4.4em;
}

.background-grey {
    background-color: #f4f4f4;
}

.home-content .rte a {
    text-decoration: underline;
}

.home-cases-list {
    position: relative;
}

.module-filters {
    opacity: 1;
    transition: all 0.25s ease;
    z-index: 1;
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
    justify-content: flex-start;
    margin-bottom: -1px;
    margin-top: 0;
}

body:not(.login-area):not(
        [data-scrolled="home-cases"],
        :has(.modules-menu-second-level > .active)
    )
    .module-filters {
    pointer-events: none;
    margin-top: -3rem;
}

p.filters-title {
    margin: 0;
}

.module-filters label {
    cursor: pointer;
}

.module-filters .filters-group label {
    display: block;
    white-space: nowrap;
    margin: 0.5em;
    cursor: pointer;
    position: relative;
    width: calc(100% - 0.5em);
}

.home-cases-list p.filters-title {
    margin-top: 1em;
    font-family: inherit;
    font-weight: inherit;
}

.filters-group {
    position: relative;
    z-index: 0;
    text-align: left;
}

.filters-group .filter-choices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    background: white;
    border: 1px solid transparent;
    pointer-events: none;
    font-family: Lato, sans-serif;
    font-weight: 400;
    transition: top 0.5s ease;
}

.filter-choices > * {
    font-size: 0.7rem;
    transition: top 0.25s ease;
}

.filters-group:not(:hover) .filter-choices {
    top: 1rem;
}

.show-all-modules .filters-group:hover .filter-choices {
    top: 0.2rem;
}

.filters-group {
    min-width: 8em;
}

.show-all-modules .filters-group {
    top: -0.35rem;
}

.show-all-modules .filters-title {
    top: 0.1rem;
}

.filters-group:not(:hover) .filter-choices > label.filter-choice {
    margin: 0;
}

.filters-group:not(:hover)
    .filter-choices
    > label.filter-choice:not(:hover)
    input:not(:checked)
    + span,
.filters-group:hover
    .filter-choices
    > label.filter-choice:not(:hover)
    .filters-sub-group
    input:checked
    + span {
    display: none;
}

.filters-sub-group {
    position: absolute;
    left: 100%;
    padding: 0 0.5rem;
    border: 1px solid black;
    background-color: white;
}

label.filter-choice:not(:hover) .filters-sub-group {
    padding: none;
    border: none;
    background-color: transparent;
}

label.filter-choice:not(:hover) .filters-sub-group label {
    margin-left: 0;
}

label.filter-choice:not(:hover) .filters-sub-group input:not(:checked) + span {
    display: none;
}

.filters-group:hover {
    z-index: 1;
}

.filters-group:hover .filter-choices {
    background: white;
    border-color: black;
    pointer-events: all;
    top: 0;
    font-size: 1em;
}

.filter-choice:hover {
    text-decoration: underline;
}

.home-cases-list input {
    display: none;
}

.home-cases-list input + span {
    padding-bottom: 0.025em;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    transition: all 0.25s ease;
}

.home-cases-list input:checked + span {
    border-color: rgba(0, 0, 0, 1);
}

body:not(.show-all-modules) .home-cases-list .link:not([data-highlighted]),
.home-cases-list .link.hidden-module {
    display: none;
}

@media screen and (max-width: 900px) {
    html {
        font-size: 13.5px;
    }

    .home-content .left-column,
    .home-content .right-column,
    .home-content-intro > *,
    .home-content .more-text .rte > *,
    .footer-content-wrapper .column-left,
    .footer-content-wrapper .column-right {
        width: 100% !important;
    }

    .home-content .home-content-intro .rte:first-child {
        margin-top: 2.6em;
    }

    .home-content .video,
    .footer-content-wrapper .video,
    .home-content .image,
    .footer-content-wrapper .image {
        margin-bottom: 2.5em;
        margin-top: 2.5em;
    }

    .footer-content-wrapper .two-columns {
        -moz-columns: 1;
        columns: 1;
    }

    .home-filters > * {
        width: auto;
    }

    .uni-logos {
        position: relative;
        justify-content: center;
        height: auto;
        bottom: 0;
    }
}

@media screen and (max-width: 700px) {
    .home-cases-list .link {
        width: 45%;
        padding-top: 45%;
    }
}

@media screen and (max-width: 500px) {
    .home-filters {
        flex-wrap: wrap;
    }

    .home-filters a {
        white-space: nowrap;
        margin: 1em;
    }

    .home-filters > * {
        margin-left: 0;
        padding-top: 0;
    }

    #nav {
        position: initial;
    }

    .home-cases-list .link {
        width: 80%;
        padding-top: 80%;
    }

    .home-cases-list {
        justify-content: center;
    }

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

    .uni-logo {
        height: 4.6em;
    }

    .home-cases-list .info {
        font-size: 6vw;
    }

    .home-cases-list .link {
        margin-bottom: 20%;
    }

    .uni-logo {
        height: 17vw;
    }

    .sfb-logo {
        height: 10vw;
        margin-bottom: 8vw;
        margin-left: 0;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    #home_intro_logo {
        display: none;
    }
}

@media screen and (min-width: 1466px) {
    html {
        font-size: 22px;
    }

    .section-outer {
        max-width: 1173px;
    }
}

.exercise-comments {
    position: fixed;
    z-index: 1000;
    width: calc(50% - 2.1em);
    bottom: 0;
    right: 0;
    transition: all 0.5s ease;
}

.exercise-comments > * {
    position: absolute;
    background: white;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    transform: translateY(150%);
    transition: all 0.5s ease;
    z-index: 0;
    box-shadow: 0 0 1rem 0px rgb(0 0 0 / 10%);
}

.exercise-comments.stacked-left {
    right: calc(50% - 2.1em);
}

.exercise-comments.fullscreen > * {
    height: 100vh;
}

.trumbowyg-button-pane {
    height: 1.8rem;
    min-height: 1.8rem;
}

.trumbowyg-button-pane::after {
    top: 1.8rem;
    background: #ddd;
}

.comments-header {
    height: 1.8rem;
}

.comments-richeditor {
    min-height: calc(100vh - 3.6rem);
}

.comments-header,
.comments-header > div {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-buttons,
.comment-buttons button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0.25em;
}

.comment-buttons svg {
    fill: white;
}

.exercise-comments.fullscreen .full-comments,
.exercise-comments:not(.fullscreen) .full-exit-comments,
.exercise-comments.stacked-left .left-comments,
.exercise-comments:not(.stacked-left) .right-comments {
    display: none;
}

.write-comments .comments-header {
    background: #b2b2b2;
    background: var(--exercise-color);
}

.comments-header button {
    background: transparent;
}

.comments-header button svg > g > path:not(:last-child),
.comments-header svg circle {
    fill: transparent;
}

.read-comments .comments-header {
    background: var(--exercise-color);
}

.exercise-comments > *.active {
    transform: translateY(0%);
    z-index: 1;
}

.exercise-comments .scroll-wrapper {
    height: 100%;
    width: calc(100% - 0.5rem);
    margin: 0;
}

.exercise-comments .exercise-textarea {
    margin: 0;
    height: calc(50vh - 2rem);
    border: none;
    overflow-y: auto;
}

.trumbowyg-button-pane {
    background: white !important;
    border: none !important;
}

.trumbowyg-button-pane {
    background: #e6e6e6;
}

.trumbowyg-button-pane .trumbowyg-button-group::after {
    display: none;
}

.trumbowyg-box svg,
.trumbowyg-modal svg {
    width: 0.9em;
    height: 100%;
    fill: grey;
}

.trumbowyg-body-fullscreen .exercise-comments > * {
    height: 100vh;
}

.trumbowyg-body-fullscreen .exercise-comments .exercise-textarea {
    height: calc(100vh - 2rem);
}

body.standalone {
    padding: 5%;
}

/* new menu CSS */

.modules-menu {
    padding-left: 0;
    overflow-x: auto;
    padding-right: 0;
    width: 100%;
}

.menu-modules.home-cases-list {
    padding-bottom: 1.5rem;
}

.modules-menu-first-level {
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    height: 2.9rem;
    overflow-y: hidden;
    overflow-x: auto;
}

.modules-menu-first-level {
    /* Foreground, Background */
    scrollbar-color: #999 transparent;
    scrollbar-width: thin;
    transition: scrollbar-color 0.25s ease;
}

.modules-menu-first-level::-webkit-scrollbar {
    height: 0.5rem;
    /* Mostly for horizontal scrollbars */
}

.modules-menu-first-level::-webkit-scrollbar-thumb {
    /* Foreground */
    transition: background 0.25s ease;
    background: #999;
    border-radius: 0.25rem;
    border: 0.15rem solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.modules-menu:not(:hover) .modules-menu-first-level {
    scrollbar-color: transparent transparent;
}

.modules-menu:not(:hover) .modules-menu-first-level::-webkit-scrollbar-thumb {
    background: transparent;
}

.modules-menu-first-level > * {
    margin: 0.8rem 1rem;
    white-space: nowrap;
}

body.new-home .module-filters {
    overflow-x: hidden;
}

.modules-menu-first-level:after {
    content: "\00a0";
    display: inline-block;
    margin: -0.5rem;
    width: 0;
}

.modules-menu a {
    cursor: pointer;
}

.modules-menu:after,
.modules-menu:before {
    content: "";
    display: block;
    width: 1rem;
    top: 0;
    height: 80%;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.modules-menu:after {
    right: 0;
    background: linear-gradient(
        to right,
        rgba(255, 0, 0, 0),
        rgb(255, 255, 255)
    );
}

.modules-menu:before {
    left: 0;
    background: linear-gradient(
        to left,
        rgba(255, 0, 0, 0),
        rgb(255, 255, 255)
    );
}

.modules-menu-second-level {
    position: absolute;
    width: 100%;
    max-height: calc(100vh - 6.8rem);
    overflow: auto;
    overflow-y: hidden;
}
.modules-menu-second-level > * {
    overflow-y: auto;
    max-height: calc(100vh - 6.8rem);
    overflow: auto;
    overflow-y: hidden;
}

.modules-large-menu {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modules-large-menu > * {
    position: relative;
    max-width: 80vw;
    border-top: 1px solid #807f80;
}

@media screen and (min-width: 1466px) {
    .modules-large-menu > * {
        max-width: 1173px;
    }
}

.modules-large-menu > *:after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-bottom: 1px solid #807f80;
}

.modules-menu-second-level > * {
    display: block;
    column-count: 4;
    padding: 1.5rem 1rem 0;
    font-size: 0.7rem;
    width: 100%;
}

.modules-menu-second-level > * > * {
    break-inside: avoid;
    margin-bottom: 2.5rem;
}

.modules-menu-second-level > *:not(.active) {
    display: none;
}

.modules-menu-second-level h2 {
    font-family: "Overpass Mono", monospace;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0;
    margin-bottom: 1rem;
    text-decoration: underline;
}

.modules-menu-second-level :is(ul, li) {
    padding: 0;
    margin: 0;
    list-style: none;
}

.modules-menu-second-level ul {
    margin: 0.5em 0 1em;
}

.large-menu-item {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.large-menu-item a {
    display: flex;
    width: 100%;
    align-items: center;
    width: 100%;
    transition: filter 0.5s ease;
    position: relative;
    z-index: 1;
}

.large-menu-item a:hover {
    z-index: 1;
}

.large-menu-item-image {
    position: relative;
    width: 17%;
    margin-right: 0.5rem;
    padding-bottom: 17%;
    margin-bottom: 0.5rem;
}

.large-menu-item-image .image {
    width: 100% !important;
    height: 100% !important;
}

.large-menu-item a:hover .title {
    text-decoration: underline;
}

#notice {
    background: #fbd972;
    border: 2px solid black;
    padding: 1em;
    position: fixed;
    top: 0;
    right: 0;
    margin: 1vw;
    max-width: 400px;
    z-index: 30000;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.close-notice {
    background-color: transparent;
    color: #000;
    position: absolute;
    top: 0.35em;
    right: 0.35em;
    line-height: 0.5em;
    font-size: 2em;
}

.pg .pg-item {
    grid-row-start: auto;
}

.pg-iframe .render-exercise-block {
    background-color: rgba(0, 0, 0, 0.04);
}

.pg-iframe .render-exercise-block > .block-wrap {
    pointer-events: none;
}

body.grid_module {
    padding: 0;
}

body.grid_module .lection-sources {
    position: fixed !important;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
}

body.grid_module .action-buttons {
    position: fixed;
}

body.grid_module .lection-intro-cover {
    overflow: initial;
    margin-bottom: 2rem;
}

body.grid_module .lection-cover-info {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    transform: none;
}

body.grid_module .lection-cover-info .images {
    position: absolute;
    top: -85%;
    left: 35%;
    bottom: 0;
    right: 6%;
    width: auto;
    height: auto;
    overflow: hidden;
}

body.grid_module .lection-cover-info .images > * {
    translate: 0 20%;
}

body.grid_module .lection-intro-text {
    position: relative;
    z-index: 2;
}
body.grid_module .background-filter-image.lection-intro-cover {
    z-index: 1;
}

body.grid_module .lection-intro-cover .step-nr {
    top: 17%;
}

body.grid_module .lection-intro-cover .images > div:last-child {
    bottom: -7%;
    top: -7%;
}

body.grid_module .lection-intro-screen > div:not(.small-notes) {
    height: 12rem;
}

body.grid_module .lection-exercises-screen {
    padding: 7%;
}

body.grid_module .title-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    left: 7%;
    width: 100%;
}

body.grid_module .lection-identifier {
    opacity: 1;
    left: auto;
    top: auto;
    bottom: 1px;
    translate: 0 100%;
    position: absolute;
    pointer-events: initial;
    transition: none;
    z-index: 0;
}

body.grid_module .lection-intro-cover .title {
    top: auto;
    left: 0;
    margin: 0;
    right: auto;
    width: auto;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

body.grid_module .lection-intro-screen {
    display: block;
}

body.grid_module .lection-intro-screen > div:not(.small-notes) {
    width: 100%;
}

body.grid_module .lection-intro-text {
    position: absolute;
}

body.grid_module .lection-sources {
    width: 50vw;
    transition: right 0.5s ease;
}
body.grid_module
    .lection-exercises-screen.sources-collapsed
    > .lection-sources.pinned,
body.grid_module
    .lection-exercises-screen.sources-collapsed
    > .lection-sources.opened,
body.grid_module
    .lection-exercises-screen.sources-collapsed
    > .lection-sources:hover {
    right: 0;
}
body.grid_module .small-notes {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
}
body.grid_module .small-notes .showing {
    pointer-events: all;
}
body.grid_module .save-all-exercises {
    padding: 0.6em 3em;
    border-radius: 9999px;
}
body.grid_module .save-all-exercises-container {
    margin-top: 4rem;
    text-align: center;
}
body.grid_module .save-all-exercises:hover {
    background-color: var(--exercise-color);
}

body.grid_module .action-buttons .close {
    display: none;
}

body.grid_module .irs-hidden-input {
    opacity: 0;
}

body.grid_module .range-slider {
    margin-top: 0.5em;
}

body.grid_module .range-slider-values:not(:last-child) {
    margin-bottom: 1em;
}

body.grid_module .save-all-exercises {
    position: relative;
}

body.grid_module .save-all-exercises.disable {
    pointer-events: none;
    color: transparent;
}

body.grid_module .save-all-exercises.disable:after {
    content: "";
    width: 2.5rem;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side, white 92%, black);
    background:
        var(--_c) top,
        var(--_c) left,
        var(--_c) right,
        var(--_c) bottom;
    background-size: 0.6rem 0.6rem;
    animation: l7 1s infinite;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50%;
    scale: 0.5;
}

@keyframes l7 {
    to {
        transform: rotate(0.5turn);
    }
}

body.grid_module .action-buttons .save-all-exercises {
    padding: 0;
    background: black;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.5em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    transition: opacity 0.5s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.grid_module .action-buttons .save-all-exercises:hover {
    background: var(--exercise-color);
}

body.grid_module .action-buttons .save-all-exercises svg {
    position: relative;
    height: 45%;
    width: 45%;
    top: -2.5%;
}

body.grid_module .action-buttons .save-all-exercises.disable:after {
    top: 0;
    scale: 0.55;
}

body.grid_module .action-buttons .save-all-exercises.disable svg {
    display: none;
}

body.grid_module .lection-intro-screen {
    max-height: 12rem;
}

body.grid_module.tpl-lection .action-buttons {
    right: 1.75em;
}

body.grid_module.tpl-lection
    .action-buttons
    button:not(.save-all-exercises)
    svg {
    width: 100%;
    height: 100%;
}

#tracy-debug {
    pointer-events: initial !important;
}
/* END OF FILE */