/* MATHLIVE */

.ML__keyboard .is-visible {
    display: flex !important;
}

body {
    --keyboard-accent-color: var(--xolrn-question-button-color);
    --hue: 180;
    --caret-color: var(--xolrn-question-button-color);
    --keycap-font-size: 1.3em;
    --keycap-height: 3em;
}

math-field:focus-within {
    outline: 1px solid var(--xolrn-question-button-color);
    border-radius: 4px;
}

math-field::part(menu-toggle) {
    display: none;
}

math-field::part(virtual-keyboard-toggle) {
    left: 0.8em;
    width: 1.5em;
}

@font-face {
    font-family: "PoppinsMath";
    font-style: normal;
    font-weight: 400;
    src: url('fonts/poppins-v20-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('fonts/poppins-v20-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('fonts/poppins-v20-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('fonts/poppins-v20-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('fonts/poppins-v20-latin-regular.svg#Poppins') format('svg');
    /* Legacy iOS */

    unicode-range: U+0000-001F, U+0021-007F, U+0100-017F, U+0180-024F;
}

math * {
    font-family: Arial, Helvetica, Poppins, sans-serif;
}


/* mathml tweaks */
.mathml-overline {
    margin-bottom: 0.1em;
    border-bottom: 0.1em solid black;
    width: 100%;
    color: transparent;
}

.mathml-periodic {
    font-size: 20px;
    transform: translateY(-2px);
}

@-moz-document url-prefix() {
    .mathml-periodic {
        transform: translateY(0px);
    }
}

/* Add gap between consecutive drag&drop areas as blanks get stripped */
div.gapMatchInteraction.dragndrop span.gap.xoqt-input+span.gap.xoqt-input {
    margin-left: 6px !important;
}

.checkMarkInteraction:not(.correct, .incorrect) input+.checkable {
    padding: 4px 0px !important;
    border: none !important;
    outline: 2px solid transparent !important;
}

.checkMarkInteraction:not(.correct, .incorrect) input:checked+.checkable {
    outline-color: var(--eduactive-primary-color) !important;
    background: var(--eduactive-primary-light-color) !important;
}

.checkMarkInteraction:not(.correct, .incorrect) input:not(:checked)+.checkable:hover {
    outline-color: #FEC64F !important;
}

/* Set XOLRN default font styling also for text pages */
.xolrn-page-wrapper {
    font-family: var(--xolrn-question-font-family);
    color: var(--xolrn-question-font-color);
    font-size: var(--xolrn-question-font-size);
    font-weight: var(--xolrn-question-font-weight);
    line-height: var(--xolrn-question-line-height);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* limit max-width of audio objects for mobile screens */
.audio_content .audio {
    max-width: 50vw;
}

/* sizing of video resources */
#content-container div.Form-video_form video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* inline-size for listening tapescripts to not interfere with content width */
div.custom-fold.practice_transcript {
    container-type: inline-size;
    min-width: min(240px,50vw);
}

/* HELBLING */

.more-grammar .instruction,
.plus-mathematik .instruction {
    font-weight: bold;
    margin-bottom: 1em;
    margin-top: 1em;
}

.more-grammar .content table:not(.custom-table) td,
.plus-mathematik .content table:not(.custom-table) td {
    padding: 5px 2px;
}

.more-grammar .group,
.plus-mathematik .group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
}

.more-grammar .picture,
.plus-mathematik .picture {
    padding: 0.5em;
}

/* CKEDITOR */

body.cke_editable span.more-math-input {
    border: 2px dotted red;
    display: inline-block;
    padding: 5px;
}


.more-math-input input,
.more-math-input .preview .input {
    display: none;
}

.more-math-input span.xoqt-interaction.answered,
.more-math-input span.xoqt-interaction.preview,
.more-math-input span.xoqt-interaction.incorrect,
.more-math-input span.xoqt-interaction.correct {
    line-height: 3.2em;
}

.more-math-input .xoqt-interaction.preview {
    margin-left: 1em;
}

.more-math-input .xoqt-interaction.incorrect math:empty {
    padding-left: 1.5em;
    margin-left: 0.8em;
    vertical-align: middle;
    height: 0.8em;
}

.more-math-input .xoqt-interaction math {
    border: var(--xolrn-interaction-element-border);
    border-radius: var(--xolrn-question-border-radius);
    padding: 0.5em 1em 0.5em 1em;
    margin: 0.5em;
}


/* new math input styling */

.plus-mathematik .xoqt-interaction input {
    border-radius: var(--xolrn-question-border-radius) !important;
    border-color: rgb(172, 172, 172);
    line-height: 2em;

}

.plus-mathematik math-field {
    padding-left: 1em;
    padding-right: 1em;
    min-width: 2.5em;
    border-radius: var(--xolrn-question-border-radius);
    position: relative;
    z-index: 2;
}


/* mini play button test */
button.mini-play-btn {
    border: 0px;
    background-color: transparent;
    display: flex;
}

button.mini-play-btn svg {
   border: 1px solid #384761;
   border-radius: 4px;
}


/* more vocabulary */

/* extend */
.more-vocabulary-d-e-extend .instruction,
.more-vocabulary-e-d-extend .instruction {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.more-vocabulary-d-e-extend .vocab-row,
.more-vocabulary-e-d-extend .vocab-row {
    display: table-row;
}

.more-vocabulary-d-e-extend .german,
.more-vocabulary-d-e-extend .separator,
.more-vocabulary-d-e-extend .english,
.more-vocabulary-e-d-extend .english,
.more-vocabulary-e-d-extend .separator,
.more-vocabulary-e-d-extend .german
{
    display: table-cell;
}

.more-vocabulary-d-e-extend .german,
.more-vocabulary-e-d-extend .english,
.more-vocabulary-d-e-extend .separator,
.more-vocabulary-e-d-extend .separator{
    color: var(--eduactive-primary-color);
    font-weight: bold;
}

.more-vocabulary-d-e-extend .separator,
.more-vocabulary-e-d-extend .separator{
    padding: 0 1em;
    text-align: center;
}

.more-vocabulary-d-e-extend .english input,
.more-vocabulary-e-d-extend .german input {
    width: 15em !important;
}

/* understand */

.more-vocabulary-e-d-understand-audio .instruction,
.feedback-instruction,
.feedback-explanation {
  font-weight: bold;
  margin-bottom: 2em;
}

.feedback .audio_speed_btn {
    border: 1px solid var(--xolrn-question-font-color);
}

.more-vocabulary-e-d-understand-audio .german-solution {
  margin-left: 0.5em;
  opacity: 0.7;
}

.more-vocabulary-e-d-understand-audio .german-solution:before {
  content: "(";
}

.more-vocabulary-e-d-understand-audio .german-solution:after {
  content: ")";
}

/* learn */
.more-vocabulary-d-e-learn .instruction,
.more-vocabulary-e-d-learn .instruction {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.more-vocabulary-e-d-learn audio,
.more-vocabulary-d-e-learn .audio_speed_btn{
  display: inherit;
}
.more-vocabulary-e-d-learn .associateTable tr td:first-of-type,
.more-vocabulary-d-e-learn .associateTable tr td:first-of-type {
  text-align: left;
  color: #05b6b1;
}

.more-vocabulary-e-d-learn .associateTable tr td:first-of-type span {
  display: flex;
  align-items: center;
}

/* BTR */


.btr img  {
  background-color: white;
  border: 1px solid #ccc;
  max-width: 600px;
  padding: 1em;
  border-radius: 10px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btr-exercise .btr:first-of-type p:first-of-type {
  font-weight: bold;
}
.btr-exercise td {
  padding-right: 1.5em;
}

/* hide first line */
div:has(.btr-exercise):first-line {
    color: transparent;
    font-size: 1px;
}




/* listening */
.listening.instruction p {
  font-weight: bold !important;
}

.listening label.checkable {
  margin: 0.2em;
}

.listening label.checkable img {
  padding: 0 0.3em 0 0.3em !important;
  border-radius: 10px !important;
}

.listening.part .choiceInteraction table label p {
  margin: 0px;
}