.wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.webglwrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.contentwrapper {
    display: none;
    min-height: 100%;
    background-image: url(../img/fresenius_brand_gradient.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    overflow-y: auto;

}

.contentwrapper_inner {
    position: absolute;
    display: flex;
    top: 0px;
    left: 0px;
    min-height: 100%;
    width: 100%;
    align-items: center;

}

.contentwrapper .waves {
    position: fixed;
    bottom: 0px;

    transform: translate(0%, 50%) scaleY(0.5);
}

.pdfwrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
    background-color: rgba(0, 41, 103, 0.7);
    display: none;
}

.pdfwrapper_inner {
    position: absolute;
    width: calc(100% - 4em);
    height: calc(100% - 4em);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background-color: var(--primary);
}

.pdfwrapper_inner iframe {
    position: absolute;
    width: calc(100% - 0em);
    height: 100%;
    top: 0em;
    left: 0em;
    overflow: hidden;
    border: none
}

.pdfwrapper .pdfclose {
    position: absolute;
    width: 2em;
    height: 2em;
    right: 0.25em;
    top: 0.25em;
    padding: 0.35em;
    cursor: pointer;
}

/* SORT PRINCIPLES */

.sortprinciples {
    position: absolute;
    bottom: 3em;
    right: 3em;
}

.sortprinciplesbutton {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 2.5em;
    height: auto;
    cursor: pointer;
}

.sortclose {
    width: 1em;
    height: 1em;
    position: absolute;
    right: 0px;
    bottom: calc(100% + 0.5em);
    cursor: pointer;
}

.sorttable {
    position: relative;
    display: none;
}

.sorttable_items {
    position: absolute;
    right: 0em;
    bottom: 3em;
    width: 70vw;
    max-width: 20em;

}

.sortbtn {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0.25em 0.75em;
    color: #ffffff;
    text-transform: uppercase;
    background-color: var(--primary);
    border-radius: 0.25em;
    font-weight: bold;
    cursor: pointer;
}

.sorttable_item {
    padding: 0.5em;
    font-size: 0.875em;

    background-color: #ffffff;
    margin-bottom: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.25em;
    line-height: 1.1em;
    height: 3em;
}

.sorttable_item span {
    display: block;
    width: calc(100% - 6em);
    cursor: pointer;
}

.sorttable_item input {
    border: none;
    background-color: var(--mediumgrey);
    border-radius: 0.15em;
    width: 4em;
    padding: 0.25em;

    outline: none !important;
    text-align: center;
    font-weight: bold;
}

.sorttable_item input::-webkit-outer-spin-button,
.sorttable_item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sorttable_item input[type=number] {
    -moz-appearance: textfield;
}

.logo {
    position: absolute;
    width: calc(15vw - 2em);
    min-width: 9em;
    max-width: 12em;
    top: 2em;
    left: 3em;
    cursor: pointer;
}

/* MENU */

.menuwrapper {
    pointer-events: none;
    z-index: 100;
}

.menuwrapper.out {
    pointer-events: none;

}

.menuwrapper .menu {
    pointer-events: auto;
    position: absolute;
    top: 5em;
    right: 3em;
    transform: translate(0%, 0%);
    padding: 0em;

    transition: transform 0.35s ease;
    width: 20em;
    max-width: calc(100% - 3em);
    display: none;
    background-color: var(--lightgrey);


}

.menuwrapper.out .menu {}


.menuwrapper .menubutton {
    pointer-events: auto;
    position: absolute;
    top: 2.45em;
    right: 3em;
    cursor: pointer;
    padding: 0.25em;
    padding-top: 0.35em;
    padding-right: 1.5em;
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: right center;

    color: #ffffff;
}

.menuwrapper .menu_openbtn {
    background-image: url(../img/icons/fresenius/icon_burger.png);
    display: none;
}

.menuwrapper .menu_closebtn {
    background-image: url(../img/icons/fresenius/close.png);
    background-size: 0.95em;
}

.menuwrapper.out .menu_openbtn {
    display: block;
}

.menuwrapper.out .menu_closebtn {

    display: none;
}


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

.menu ul li {
    break-inside: avoid;
    margin: 0;
    padding: 0em 0;


}



.menu ul li .menucap {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease;

}

.menu ul li .menubtn {
    padding: 0.5em 1em;
    color: var(--primary);
    background-color: transparent;

    border-radius: 0em;
    background-repeat: no-repeat;
    background-size: 0.9em;
    background-position: center left 0.4em;

    background-color: var(--lightgrey);
    cursor: pointer;
    border-bottom: 1px solid var(--mediumgrey);
    font-size: 0.875em;
    font-weight: bold;
    transition: background-color 0.5s ease;
}

.menu ul li .menubtn:hover {
    background-color: #ffffff;
}

.menu ul li .menubtn.languageselected {
    display: none;
}

.menu ul li>.menubtn[data-type=submenus] {
    background-size: 0.8em;
    background-image: url(../img/icons/arrow_down_dark.png);
    background-position: center right 0.5em;
    cursor: pointer;
    padding: 0.5em 2em 0.5em 1em;
}

.menu ul li.open>.menubtn[data-type=submenus] {

    background-image: url(../img/icons/arrow_up_dark.png);

}

.menu .menucap .menucap .menubtn {
    font-weight: normal;
    font-size: 0.874em;

    border-top: 1px solid var(--mediumgrey);
}

.webglicon {

    top: 60%;

}

.webglicon .icon {


    background-color: rgba(11, 184, 222, 0.5);

}

.webglwrapper {
    display: block;
}

.loading {

    display: block;
}

.hotspot {

    background-color: var(--primary);
    padding: 1em 1.5em 1.5em 1.5em;
    border-radius: 0.15em;

    height: auto;
    width: auto;
    border: none;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;

}

.hotspottext {
    font-size: 1.75em;
    margin-bottom: 1em;
    line-height: 1.3em;
}

.hotspotbuttons {
    white-space: nowrap;



}

.infowrapper .iconimage_group {
    display: inline-block;
    width: 2.5em;
    vertical-align: top;
    margin-right: 1em;
}

.infowrapper .grouptitle {
    display: inline-block;
    width: calc(100 - 4em);

}

.infowrapper .hotspotbuttons {
    margin-top: 1em;
    margin-bottom: 1em;
}

.hotspotbutton {
    display: inline-block;
    height: 2.25em;
    line-height: 2.15em;
    width: 2.25em;
    padding: 0;
    text-transform: none;
    border: 1px solid #ffffff;
    border-radius: 0.15em;
    background-repeat: no-repeat;
    background-size: 1.35em;
    background-position: center;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    margin-right: 0.5em;



}

.hotspotbutton.hotspotbutton_back {

    background-image: url(../img/icons/fresenius/arrow_double_prev.png);

}

.hotspotbutton.hotspotbutton_prev {
    background-image: url(../img/icons/fresenius/arrow_prev.png);
}

.hotspotbutton.hotspotbutton_next {
    background-image: url(../img/icons/fresenius/arrow_next.png);
    margin-right: 0em;
}

.hotspotbutton.hotspotbutton_info,
.hotspotbutton.hotspotbutton_video,
.hotspotbutton.hotspotbutton_document {
    width: auto;
    padding: 0em 1em 0em 1em;
    background-image: none;
    background-position: center right 0.5em;


}



.infowrapper .hotspotbutton {
    opacity: 0.85;
}

video {
    width: 100%;
    height: auto;
}

.video-js .vjs-tech {
    width: 100%;
    height: auto;
}

/* LIB OVERRIDES */

.video-js {
    position: relative !important;
    width: 100%;
    height: auto;
}

.video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js .vjs-big-play-button {
    font-size: inherit;
    line-height: 1em;
    height: 5vw;
    width: 5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    padding: 0;
    margin: 0em;
    cursor: pointer;
    opacity: 0.5;
    border: none;
    background-color: transparent !important;
    border-radius: 50%;
    /* border: 3px solid #ffffff; */
    color: rgba(255, 255, 255, 0.5);
    background-image: url(../img/icons/play.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.video-js:hover .vjs-big-play-button {
    background-color: transparent;
    border-radius: 50%;
    background-color: transparent !important;

}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "";
}

.video-js .vjs-control-bar {

    background-color: var(--primary);
    z-index: 1000;
}

.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control {
    display: none;
}

.video-js .vjs-load-progress {
    background: var(--mediumgrey);
}

.visible-on-mobile {
    display: none;
}


.headergradient {
    position: fixed;
    width: 100%;
    height: 7em;
    top: 0px;
    left: 0px;
    background-color: transparent;
    background: linear-gradient(180deg, rgba(1, 138, 254, 1) 0%, rgba(1, 138, 254, 0) 100%);
    display: none;


}

.interaction {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;

    color: #ffffff;

    background-color: var(--blue)
}

/*
.interaction[data-type=guess],
.interaction[data-type=ranking],
.interaction[data-type=multiple],
.interaction[data-type=rightwrong],
.interaction[data-type=thisthat] {
    background-color: var(--blue)
}

.interaction[data-type=prompt] {
    background-color: var(--green)
}*/

.interaction_pages {
    position: absolute;
    width: 100%;
    height: calc(100% - 6.75em);
    top: 3em;
    /*font-size: 0.9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;*/


}

.interaction_backbutton {
    position: absolute;
    left: 2em;
    bottom: 2em;
    width: 2em;
    height: 2em;
    border: 2px solid #ffffff;
    border-radius: 50%;
    padding: 0.25em;
    cursor: pointer;
}

.interaction_pages.single {

    height: calc(100% - 5em);



}

.interaction_part {

    position: absolute;
    padding: 0em 2em 0em 2em;
    margin: 0em 2em;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0s ease, opacity 0s ease;
    border-top-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2);
    height: 100%;
    width: calc(100% - 4em);
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 1e0.5emm 0px rgba(0, 0, 0, 0.15);
    pointer-events: none;

}

.interaction_part:first-child {




    transition-duration: 0s;

}

.interaction_part_inner {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    /*padding: 1em 2em 0.5em 0em;*/



}

.interaction_part_inner::-webkit-scrollbar {
    width: 3px;
}

.interaction_part_inner::-webkit-scrollbar-track {
    background-color: var(--transparent);
    width: 3px
}

.interaction_part_inner::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.75) 5.1%, rgba(255, 255, 255, 0.75) 94.9%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%);
}

.interaction_part_inner::-webkit-scrollbar-thumb:hover {
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.75) 5.1%, rgba(255, 255, 255, 0.75) 94.9%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%);
}

.interaction_part.active {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.85s ease, opacity 0.7s ease-in;
    transition-delay: 0s;
}

.interaction_partbuttons {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0px;
    bottom: 0px;
    padding-bottom: 0.85em;
    white-space: nowrap;
    text-align: center;
    display: none;
}

.infoslider.fixed .interaction_partbuttons {

    display: block;
}


.interaction_partbutton {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.5em;
    font-weight: bold;
    border-radius: 50%;
    border: 2px solid #ffffff;
    text-align: center;
    margin: 0em 0.5em;
    cursor: pointer;
}

.interaction_timeout {
    position: absolute;
    width: 100%;
    height: 0.15em;
    left: 0px;
    bottom: 0px;
    background-color: transparent;

}



.interaction_timeoutbar {
    display: block;
    width: 50%;
    height: 100%;

    background-color: #ffffff;
    transition: width 10s linear;
}

.interaction_timeout_hint {
    position: absolute;

    font-size: 0.75em;
    bottom: 0.5em;
    left: 3em;
    padding-left: 1.5em;
    background-image: url(../img/icons/fresenius/clock.png);
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: left center;
}

.interaction[data-type=multiple] .interaction_partbutton.active,
.interaction[data-type=guess] .interaction_partbutton.active,
.interaction[data-type=ranking] .interaction_partbutton.active,
.interaction[data-type=rightwrong] .interaction_partbutton.active,
.interaction[data-type=thisthat] .interaction_partbutton.active,
.interaction[data-type=prompt] .interaction_partbutton.active,
.interaction[data-type=assignment] .interaction_partbutton.active,
.interaction[data-type=selection] .interaction_partbutton.active {
    background-color: #ffffff;
    color: var(--blue)
}

.interaction_mainhead {
    position: absolute;
    font-weight: bold;
    font-size: 2em;
    padding: 0.5em 0.75em;
    top: 0em;
    right: 2em;
    display: inline-block;
    transform: translate(0%, -50%);
    text-align: center;
    background-color: #ffffff;
    border-radius: 4em;
    z-index: 1;
}

.interaction[data-type=multiple] .interaction_mainhead,
.interaction[data-type=guess] .interaction_mainhead,
.interaction[data-type=ranking] .interaction_mainhead,
.interaction[data-type=rightwrong] .interaction_mainhead,
.interaction[data-type=thisthat] .interaction_mainhead,
.interaction[data-type=prompt] .interaction_mainhead,
.interaction[data-type=assignment] .interaction_mainhead,
.interaction[data-type=selection] .interaction_mainhead {
    color: var(--blue)
}


.interaction_head {
    font-weight: bold;
    margin: 0.2em 0em 0.5em 0em;

}

.interaction_text.statement {
    font-size: 1.25em;
    width: 90%;
    max-width: 42em;
    line-height: 1.3em;
    margin: auto;
    position: relative;
    overflow: visible;
    margin-bottom: 2em;


}

.interaction_text.statement::before {
    /* content: "\""; */
    font-size: 4em;
    position: absolute;
    right: 100%;
    top: 0%;


}

.preview .interaction_text {
    margin-top: 1em;
}

.interaction_hint {

    font-weight: bold;
    margin-bottom: 1em;
    font-size: 0.875em;

}

.interaction_preview {
    width: 100%;
    text-align: center;
    margin-top: 0.5em;
}

.interaction_preview .interaction_preview_images {
    width: 100%;

    display: block;
    white-space: nowrap;
    margin: 0.5em 0em 0.5em 0em;
}

.interaction_preview .interaction_preview_images img {
    display: inline-block;
    width: calc(15% - 1em);
    margin: 0.5em;
    /*flex: 1 1 0;*/
    border-radius: 0.25em;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);

}

.interaction_preview .interaction_preview_images img.icon {
    display: inline-block;
    width: calc(15% - 1em);
    margin: 0;
    border-radius: 0.25em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.interaction_preview .interaction_preview_images .scenariobutton {
    display: inline-block;
    width: calc(45% - 1em);
    margin: 0.5em 1em 0.5em 0em;
    white-space: nowrap;
    text-align: left;
    font-size: 0.875em;
    line-height: 1.3em;
    cursor: pointer;
}

.interaction_preview .interaction_preview_images .scenariobutton img {
    display: inline;
    float: left;
    width: 4.5em;
    height: 4.5em;
    margin: 0em 1em 0em 0em;
    border-radius: 0.25em;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
}

.interaction_buttons {
    white-space: nowrap;
    text-align: center;
    /*display: flex;
    align-items: center;
    justify-content: center;
    align-items: stretch;*/
    margin-bottom: 1em;
}

.infoslider.fixed .interaction_buttons {
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 1em;
}

.interaction_button {

    margin: 1em 0.5em 0.25em 0.5em;

    /* border: 2px solid #ffffff;*/
    border-radius: 0.25em;
    display: block;
    min-width: 120px;
    font-size: 1em;
    transform: scale(1);
    transition: transform 0.3s ease;
    cursor: pointer;
    white-space: normal;

    padding: 0.75em 0.75em 1em 0.75em;

    line-height: 1.25em;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
    width: 30%;
    max-width: 18em;


    /* background-color: rgba(255, 255, 255, 0.2);*/
    background-color: rgba(0, 41, 103, 0.4);
    -webkit-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 1e0.5emm 0px rgba(0, 0, 0, 0.15);

}

.interaction_button .big {
    font-size: 1.75em;
    font-weight: bold;
    display: block;
    line-height: 1.2em;
    text-transform: uppercase;
}

.interaction_button.selected {

    transform: scale(1.2);
}

.interaction_button.notselected {

    transform: scale(0.8);
}

.interaction_button[data-answer=true].selected.finished {
    background-color: var(--green);
}


.interaction_button[data-answer=false].selected.finished {
    background-color: var(--red);
}



.interaction_startbutton {
    font-weight: bold;
    font-size: 0.9em;
    margin: 0.5em auto 0em auto;
    padding: 0em;
    border-bottom: 2px solid #ffffff;
    pointer-events: auto;
    display: inline-block;


    cursor: pointer;

}

.interaction_resultbutton {
    font-weight: bold;
    font-size: 0.9em;
    margin: 0.5em auto 0em auto;
    padding: 0em;
    border-bottom: 2px solid #ffffff;
    pointer-events: none;
    display: inline-block;
    opacity: 0.5;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;

}

.interaction_resultbutton.active {
    opacity: 1;
    pointer-events: auto;

}

.interaction_resultbutton.hidden {
    font-size: 0em;
    line-height: 0em;
    opacity: 0;
    pointer-events: none;

}

.interaction_exp {
    width: calc(100% - 10em);
    max-height: 0px;
    max-width: 1100px;

    margin: 0 auto 0.5em auto;
    overflow: hidden;
    transition: max-height 0.5s linear;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    text-align: left;
    font-size: 0.875em;
    line-height: 1.2em;

}

.interaction_exp .interaction_inner {
    padding: 1em 1em 1em 1em;
    border-radius: 0.5em;
    background-color: #ffffff;
    color: var(--font);
    overflow: hidden;

}

.interaction_exp.active {
    max-height: 30vh;

}

.interaction_exp span {
    font-weight: bold;
}

.interaction_exp span.bigger {
    font-size: 1.5em;
}


/* Multiple Choice */
.multiple .interaction_text.multiplestatement {
    font-size: 1.5em;


    line-height: 1.3em;
    margin: auto;
    position: relative;
    overflow: visible;
    margin-bottom: 2em;

}

.multiple .interaction_buttons {
    white-space: normal;
    text-align: left;
    margin-top: 1em;
}

.infoslider.fixed .multiple .interaction_buttons {
    white-space: normal;
    text-align: left;
    margin-top: 1em;

    display: block;

    margin: 1em auto;
}

.multipleimage {
    max-width: 20em;
    float: right;
    border-radius: 0.25em;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
}

.multiple .interaction_exp {
    margin: 0;
}

.multiple .interaction_button {
    font-weight: bold;
    margin: 0.5em 0em;
    padding: 0.1em 0.25em 0.25em 2em;
    border: none;
    border-radius: 0.25em;
    display: block;
    font-size: 1em;
    font-weight: bold;
    transform: scale(1);
    transition: transform 0s ease;
    cursor: pointer;
    background-image: url(../img/icons/fresenius/multiple_notselected.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: left top;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    box-shadow: none;
}

.multiple .interaction_button.selected {
    background-image: url(../img/icons/fresenius/multiple_selected.png);
    transform: scale(1);
}

.multiple .interaction_button.finished {
    background-color: transparent !important;
}


.multiple .interaction_button[data-answer=true].finished {
    /*background-image: url(../img/icons/fresenius/multiple_notselected_red.png);*/
    background-image: url(../img/icons/fresenius/multiple_notselected_green.png);
}

.multiple .interaction_button[data-answer=true].selected.finished {
    background-image: url(../img/icons/fresenius/multiple_selected_green.png);
}

.multiple .interaction_button[data-answer=false].finished {
    /* background-image: url(../img/icons/fresenius/multiple_notselected_green.png);*/
}

.multiple .interaction_button[data-answer=false].selected.finished {
    background-image: url(../img/icons/fresenius/multiple_selected_red.png);
}


.interaction_button[data-answer=false].selected.finished {
    background-color: var(--red);
}

/* End Multiple Choice */


/* This that */

.thisthat .interaction_text.statement::before {
    content: '';

}

.thisthat .interaction_text.statement {
    text-align: center;
    font-size: 1.5em;

}

.thisthat .interaction_button {

    width: 30%;
    max-width: 22em;

}

.thisthat .interaction_exp .interaction_inner {

    min-height: 4.5em;
    font-size: 1em;
    line-height: 1.3em;
}

/* Guess */


.guess .interaction_input::-webkit-outer-spin-button,
.guess .interaction_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.guess .interaction_input[type=number] {
    -moz-appearance: textfield;
}


.guess .interaction_input {
    font-size: 2em;
    background-color: transparent;
    padding: 0.5em 1em;
    border: 2px solid #ffffff;
    border-radius: 0.5em;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    outline: none;
    width: 50%;
    min-width: 10em;
    margin: 1em 0em 0em 0em;
}

.guess .interaction_input.finished.correct {
    pointer-events: none;

    background-color: var(--green)
}

.guess .interaction_input.finished.notcorrect {
    pointer-events: none;
    background-color: var(--red)
}

.guess .interaction_text.statement {
    font-size: 1.35em;
    line-height: 1.3em;

    max-width: 100%;
    text-align: center;

}

.guess .interaction_text.statement::before {
    content: '';

}

.guess .interaction_text.statement span {
    position: relative;



}

.guess .interaction_text.statement span::before {
    content: "";




}

.guess .row {
    max-width: 1200px;
    margin: auto;
}

/* Ranking */

.ranking ul {
    list-style: none;
    margin-top: 1em;
    overflow: visible;



}

.ranking .sortable {
    flex-direction: row;
    --bs-gutter-x: 1.5em;
}

.ranking .sortitem {
    background-color: transparent;
    border: none;

}

.ranking .sortitemnumbers {
    text-align: center;
}

.ranking .sortitemnumber {
    text-align: center;
    width: 100%;
    margin-top: 1em;
    padding: 0.5em;
    border-top: 2px solid #ffffff;
    font-weight: bold;
}

.ranking .sortitem .sortcard {

    height: 100%;

    /*border: 2px solid rgba(255, 255, 255, 0.5);*/
    border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    overflow: hidden;
    color: #ffffff;


    white-space: normal;
    text-align: left;
    cursor: move;

    padding: 0.5em;
    font-size: 0.875em;
    line-height: 1.25em;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;

    /* background-color: rgba(255, 255, 255, 0.2);*/
    background-color: rgba(0, 41, 103, 0.4);
    -webkit-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 1e0.5emm 0px rgba(0, 0, 0, 0.15);
    transform: scale(0);
    transition: transform 0.5s ease, background-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.ranking .sortitem .sortcard.big {
    transform: scale(1);



}

.ranking .sortitem .sortcard img {
    border-radius: 0.25em;


    width: calc(100% - 1em);
    margin: 0.5em;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);

}

.ranking .sortitem .sortcard span {
    display: block;
    text-align: center;
    min-height: 8em;



}

.dragicon .sortcard {
    background-color: rgba(0, 41, 103, 0.7) !important;
}

.sortable-fallback {
    display: none !important;
}

.custom-drag-ghost {
    /* The original cloned element must not take place up in the page and must not be visible */
    position: absolute;
    top: -99999px;
    left: -99999px;
    /* Just for appearance */

    width: 100px;
    height: 100px;
    opacity: 0;
}

.ranking ul li .rank {

    display: none;
}

.ranking ul li.correct {

    background-color: var(--green)
}

.ranking ul li.notcorrect {

    background-color: var(--red)
}

@media (max-width:768px) {
    .ranking .sortable {
        /*display: block;*/
    }

    .ranking .sortitem .sortcard img {
        margin: 0em 1em 0em 0em;
        width: 8em;
        float: left;
    }

    .ranking .sortitem .sortcard {
        text-align: left;
        display: flex;
        align-items: center;
        padding: 1em;
        margin: 0.5em 0em;
    }

    .ranking .sortitem .sortcard span {
        display: block;
        text-align: left;
        min-height: 0em;

    }

    .ranking .numrow {
        display: none;
    }
}

/* Selection*/

.selection .col,
.selection .row {
    --bs-gutter-x: 0.5em;
    --bs-gutter-y: 0.5em;
}

.selection .interaction_text.assignmentstatement {
    font-size: 0.9em;
    line-height: 1.2em;
    margin: auto;
    position: relative;
    overflow: visible;
    margin-bottom: 0em;
    padding-top: 2em;
}

.selection .interaction_button {

    margin: 0;

    /* border: 2px solid #ffffff;*/

    min-width: 100%;




    width: 100%;

    white-space: no-wrap;
    display: flex;

    align-items: flex-start;
    padding: 0.5em 0.25em 0.5em 0.5em;
    font-size: 0.8em;
    height: 100%;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;

}

.selection .interaction_button.active {

    background-color: var(--turquoise);

}

/*
.selection .interaction_button[data-best=true].finished::after {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    content: "";
    background-image: url(../img/icons/fresenius/premium.png);
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0px;
    right: 0em;
    transform: translate(-50%, -50%) rotate(10deg);
}*/

.selection .interaction_button img {



    width: 7em;
    height: auto;
    margin-right: 0.5em;
    border-radius: 0.25em;

    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    margin: 0 1em 0 0;
    margin-top: 0.25em;
    margin-left: 0.25em;
    transition: width 0.2s ease;



}

.selection .interaction_button.more img {

    width: 4em;


}

.selection .interaction_button div {



    white-space: normal;



}

.selection .selectionmore {
    display: inline;
    font-size: inherit;
    color: var(--turquoise);
    cursor: pointer;
    font-style: italic;
}

.selection .interaction_button.more .selectionmore {

    display: none;

}

.selection .interaction_button p {

    margin-top: 0.5em;
    margin-bottom: 0;
    font-size: 0.875em;
    line-height: 1.2em;



}

.selection .interaction_button ul {

    margin-top: 0.25em;
    margin-bottom: 0;
    font-size: 0.875em;
    line-height: 1.2em;
    max-height: 0;
    transition: max-height linear 0.5s;
    transition-delay: 0.3s;
    overflow: hidden;


}

.selection .interaction_button.more ul {


    max-height: 10em;


}

.selection .interaction_button ul li {

    margin-top: 0.15em;
    margin-left: 1.5em;
    padding-bottom: 0;



}


.selection .interaction_exp {

    max-width: 1400px;

    font-size: 0.875em;
    line-height: 1.2em;
}


/* Assignment */


.assignment .interaction_text.assignmentstatement {
    font-size: 1.35em;
    line-height: 1.3em;

}

.assignment .interaction_button {



    padding: 0.5em;
    width: 100%;
    max-width: 100%;
    z-index: 10;
    cursor: move;
    margin-top: 0px;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;



}

.assignment .interaction_part .dragtarget {

    pointer-events: none;
    display: none;

}

.assignment .interaction_part.active .dragtarget {

    pointer-events: auto;
    display: block;

}

.assignment .interaction_button.finished {
    pointer-events: none;
}

.assignment .dragtarget[data-answer=true].finished {
    background-color: var(--green);
    color: #ffffff;
}

.assignment .dragtarget[data-best=true].finished::after {
    position: absolute;
    width: 2em;
    height: 2em;
    content: "";
    background-image: url(../img/icons/fresenius/premium.png);
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0px;
    right: 0em;
    transform: translate(-50%, -50%) rotate(10deg);
}

.assigment .col {
    position: relative;
}

.assignment .dragtarget {
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1em;
    pointer-events: none;
    position: relative;
    height: 30vh;
    font-weight: bold;
    margin-top: 1em;
    border-radius: 0.25em;

}

.assignment .interaction_exp {
    width: calc(100% - 10em);
    max-height: 0px;
    max-width: 1100px;

    margin: 0 auto 0.5em auto;
    font-size: 1em;
    line-height: 1.3em;
}

.assignment .interaction_exp.active {
    max-height: 30vh;
}

.assignment .row {
    width: calc(100% - 10em);
    margin: auto;
}

.assignment .interaction_hint {

    align-self: flex-end;
    width: 90%;
}

/* Prompt*/

.scenario img {
    width: 100%;
    max-width: 10em;
    margin: 0;
    margin-bottom: 0.5em;
    -webkit-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    -moz-box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);
    box-shadow: 0.5em 0.5em 0.5em 0px rgba(0, 20, 50, 0.35);


}

.scenario .col {}

.scenario .answer {
    /*border: 2px solid rgba(255, 255, 255, 0.5);*/
    border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: 0.5em 0.75em;
    height: 100%;

    /*background-color: rgba(255, 255, 255, 0.2);*/
    background-color: rgba(0, 41, 103, 0.4);
    -webkit-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 0.5em 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 1e0.5emm 0px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;

    margin: 0.5em 0em 0em 0em;
    cursor: pointer;
    transform: scale(0);
    transition: transform 0.5s ease;
    font-size: 0.875em;
    line-height: 1.3em;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;


}

.scenario .answer.big {


    transform: scale(1)
}

.scenario .answer.active {


    background-color: var(--turquoise);


}

.scenario .interaction_exp {



    font-size: 0.875em;
    line-height: 1.2em;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.scenario .interaction_exp .interaction_inner {

    padding: 0.5em;
}

.infoslider.active {
    position: absolute;
    height: 100vh;

}

.infoslider.active .carousel {
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);


    font-size: 1.15em;
    line-height: 1.3em;

}


.infoslider.active .carousel .carousel-item {
    height: 100vh;
    overflow-y: auto;


}

.infoslider.active .carousel-item.image img {
    position: absolute;
    /*top: 50%;
    transform: translate(0%, -50%);*/



}

/*
.infoslider.active .carousel,
.infoslider.active .carousel-inner,
.infoslider.active .carousel-item {
    height: 100%;

}*/

.infoslider .fullscreenbtn {
    width: 1.5em;
    height: 1.5em;

    position: absolute;
    top: 0.75em;
    right: 0.75em;
    background-image: url(../img/icons/icon_main_fullscreen.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    cursor: pointer;
}

.infoslider .document .fullscreenbtn {

    top: 0.75em;
    right: auto;
    left: 0.75em;

}

.infoslider.active .fullscreenbtn {

    background-image: url(../img/icons/icon_main_closefullscreen.png);

}

.infoslider.fixed .carousel-item.ranking .fullscreenbtn,
.infoslider.fixed .carousel-item.assignment .fullscreenbtn,
.infoslider.fixed .carousel-item.prompt .fullscreenbtn,
.infoslider.fixed .carousel-item.multiple .fullscreenbtn,
.infoslider.fixed .carousel-item.guess .fullscreenbtn,
.infoslider.fixed .carousel-item.rightwrong .fullscreenbtn,
.infoslider.fixed .carousel-item.thisthat .fullscreenbtn {

    top: 6em;
    right: auto;
    left: 3.5em;

}


.infoslider .challenge {

    display: none;

}

.infoslider.fixed .challenge {

    display: block;

}

.infoslider.fixed .preview {

    display: none;

}

.infoslider.fixed .fullscreenbtn {

    background-image: url(../img/icons/icon_main_closefullscreen.png);

}


.infoslider.active .video-js {

    height: 100vh;
}

.infoslider.active .video-js video {

    height: 100vh;
}

.infoslider.active .video-js .vjs-tech {

    height: 100vh;
}


.infoslider.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 50;
}

.infoslider.fixed .interaction_part {
    /*background-color: var(--blue);*/
}

.infoslider.fixed .interaction_pages {

    height: calc(100% - 8.75em);
    top: 5em;



}

.infoslider.fixed .interaction_pages.single {

    height: calc(100% - 7em);



}

.infoslider.fixed .interaction_mainhead {

    right: 6em;

}

.infoslider.fixed .carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;


    font-size: 1.15em;
    line-height: 1.3em;

}

.infoslider.fixed .carousel .carousel-item {
    height: 100vh;
    width: 100vw;
}

.infoslider.fixed .carousel .carousel-item .interaction {


    background-image: url(../img/fresenius_brand_gradient.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;

}

@media (max-width: 1024px) {
    .menuwrapper .menu {

        right: 2em;


    }



    .menuwrapper .menubutton {

        right: 2em;

    }

    .assignment .row {
        width: calc(100% - 2em);
        margin: auto;
    }


}

@media (max-width: 991px) {




    .contentwrapper_inner {

        align-items: start;
    }

    .infowrapper {

        padding-top: 7em;
    }

    .headergradient {
        display: block;


    }

    .infowrapper .title {
        font-size: 2em;
        margin-bottom: 0em;

        padding: 0em;

        text-align: left;
    }

    .hidden-on-mobile {
        display: none;
    }

    .visible-on-mobile {
        display: flex;
    }

    .infowrapper .iconimage {
        max-width: 200px;
        margin-bottom: 2em;
    }

    .hotspottext {
        font-size: 1.5em;

    }

    .interaction_part {

        margin: 0em 1em;
        width: calc(100% - 2em);


    }

    .interaction_timeout_hint {

        left: 1.5em;

    }

    .interaction_mainhead {
        font-size: 1.75em;
    }


    .infoslider.active .carousel {

        font-size: 1em;
        line-height: 1.3em;

    }



}



@media (orientation:portrait) {
    .video-js .vjs-big-play-button {

        height: 5vh;
        width: 5vh;

    }

    .assignment .dragtarget {

        height: 20vh;

    }
}