/*Copyright 2021 Karlsruher Institut für Technologie
    
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
        
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
        
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
        
.edml-solutionhintdialog .edml-solutionhintsteps > edml-step{
    display: none;
}

.edml-solutionhintdialog .edml-solutionhintsteps > edml-step.active{
    display: block;
}


.edml-solutionhintdialog .edml-solutionhintheader{
    text-align: right;
    font-size: 0.75em;
    
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheaderprev{
    font-family: edmlfont;   
    padding-right: 0.5em; 
    font-size: 1em;
    line-height: 1em;
    display: none;
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheaderprev:after{
    content:"x";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;   
    
    
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheadernext{
    font-family: edmlfont;
    padding-left: 0.5em;
    font-size: 1em;
    display: inline-block;
    visibility: hidden;
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheadernext.active{
    display: inline-block;
    visibility: visible;
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheaderprev.active{
    display: inline-block;
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheadernext:after{
    content:"y";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;
    
    
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheaderprev:hover{
    font-size: 1.1em;
}

.edml-solutionhintdialog .edml-solutionhintheader > .edml-solutionhintheadernext:hover{
    font-size: 1.1em;
}
.edml-shortmessage{
    position: absolute;
    background-color: #EEEEEE;
    padding: 1em;
    border: solid 1px black;
    display: none;
    z-index: 21474831;
    left: 50%;
    top: 50%;
    border-radius: 1em;
}

.edml-shortmessage.active{
    display: block;
}

.edml-shortmessage[type="error"]{
    border-color: rgb(253, 90, 90);
    background-color: #ffcbcb;
    color: red;
}

.edml-shortmessage[type="hint"]{
    border-color: rgb(207, 207, 0);
    background-color: #fffa99;
    color: rgb(0, 0, 0);
}
.edml-component-score{
    display: inline-block;
    width: auto;
    position: fixed;
    top: 2.5em;
    right: 1.5em;
    text-align: right;
    color: lightgray;
}


edml-course.notitlebar .edml-component-score{
    top: 0px;
}

.edml-component-score:before{
    content: "5";
    font-family: edmlfont;
    margin-right: 0.25em;
    font-size: 1.5em;
}

.edml-component-score.pchange:before{
    color: gold;
    content: "6";
}

.edml-component-score.nchange:before{
    color: red;
    content: "6";
}

.edml-component-score.hidden{
    display: none;
}

@media print{
    .edml-component-score{
        display: none;
    }
}
.edml-unitcalculator{
    position: fixed;
    width:18em;
    max-width: 18em;
    min-width: 18em;
    height: 22em;
    display: none;
    background-color: #f8f9fa;
    flex-wrap: wrap;
    border:1px outset #e2e4e6;
    z-index: 21474834;
}

.edml-unitcalculator.active{
    display: block;
}

.edml-unitcalculator > .edml-unitcalculator-display{
    display: block;
    background-color: white;
    height: 3em;
    position: absolute;
    width: 14.5em;
    left: 0.5em;
    top: 0.5em;
    border: solid 1px #e2e4e6;

}

.edml-unitcalculator > .edml-unitcalculator-display > edml-m{
    line-height: 1.5em;
    font-size: 1.5em;
    margin-top: 0.25em;
}

.edml-unitcalculator .edml-unitcalculator-displayfrac{
    position: absolute;
    display: block;
    top: 4.2em;
    left: 0.5em;
    width: 17em;

}



.edml-unitcalculator .edml-unitcalculator-displaysi{
    position: absolute;
    display: grid;
    grid-template-columns: 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em;
    grid-column-gap: 0.35em;
    grid-row-gap: 0.35em;
    top: 6.5em;
    left: 0.5em;
    width: 17em;
}


.edml-unitcalculator .edml-unitcalculator-displayadd{
    position: absolute;
    display: grid;
    grid-template-columns: 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em;
    grid-column-gap: 0.35em;
    grid-row-gap: 0.35em;
    top: 9em;
    left: 0.5em;
    width: 17em;

}

.edml-unitcalculator .edml-unitcalculator-displayprefix{
    position: absolute;
    display: block;
    left: 0.5em;
    width: 15em;
    padding:0.5em;
    background-color: lightgray;   
    display: none;


}

.edml-unitcalculator .edml-unitcalculator-displayprefixtriangle{
    width: 0px;
    height: 0px;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 1em solid lightgray;
    bottom: -1em;
    left: 0px;
    position: absolute;
}

.edml-unitcalculator .edml-unitcalculator-button{
    width: 2.5em;
    height: 2em;
    text-align: center;
    font-size: 0.75em;
    overflow: hidden;
    padding: 0.1em;
    background-color: #E9E9ED;
    border: solid 1px #8F8F9D;
    user-select: none;
}

.edml-unitcalculator .edml-unitcalculator-button:hover{
    background-color: #D0D0D7;
}

.edml-unitcalculator .edml-unitcalculator-button.active{
    background-color: #B1B1B9;
}

.edml-unitcalculator .edml-unitcalculator-displayfrac .edml-unitcalculator-numerator{
    width: 6em;
    margin-right: 0em;
    /*border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;*/
}

.edml-unitcalculator .edml-unitcalculator-displayfrac .edml-unitcalculator-numspan{
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: inline-block;
}

.edml-unitcalculator .edml-unitcalculator-displayfrac .edml-unitcalculator-denumerator{
    width: 6em;
    /*border-left: none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;*/

}

.edml-unitcalculator .edml-unitcalculator-displayfrac .edml-unitcalculator-numerator.active,.edml-unitcalculator .edml-unitcalculator-displayfrac .edml-unitcalculator-denumerator.active{
    background-color: #B1B1B9;
}

.edml-unitcalculator > .edml-unitcalculator-clr{
    float: right;
    top: 2.75em;
    right: 0.6em;
    position: relative;
    background-color: bisque;
    
}

.edml-unitcalculator > .edml-unitcalculator-clr:hover{
    background-color: #FFCA8E;
}


.edml-unitcalculator > .edml-unitcalculator-displayfrac > .edml-unitcalculator-undo{
    float: right;
    font-family: edmlfont;
    font-size: 1.5em;
    line-height: 0.8em;
    max-height: 1em;
    position: relative;
    max-width: 1.2em;
    color: black; 
    margin-right: 0.35em;
}

.edml-unitcalculator > .edml-unitcalculator-displayfrac > .edml-unitcalculator-redo{
    float: right;
    font-family: edmlfont;
    font-size: 1.5em;
    line-height: 0.8em;
    max-height: 1em;
    position: relative;
    max-width: 1.2em;
    color: black; 
}

.edml-unitcalculator > .edml-unitcalculator-displayfrac > .edml-unitcalculator-undo.disabled{
    color: #B1B1B9; 
}

.edml-unitcalculator > .edml-unitcalculator-displayfrac > .edml-unitcalculator-redo.disabled{    
    color: #B1B1B9; 
}




.edml-unitcalculator .edml-unitcalculator-enter{
    bottom: 0.25em;
    right: 0.5em;
    position: absolute;
    width: 5em;
    height: 4em;
    background-color: bisque;
}

.edml-unitcalculator .edml-unitcalculator-enter:hover{
    background-color: #FFCA8E;
}

.edml-unitcalculator .edml-unitcalculator-close{
    position: absolute;
    top: 0em;
    right: 0em;
    width: 2em;
    height: 2em;
    text-align: center;
    padding: 0px;
    /*border-radius: 0.5em;*/
    color: white;
    background-color: red;
    border: solid 1px black;
    font-size: 0.65em;
    line-height: 0.5em;
    font-weight: bold;
}

.edml-unitcalculator .edml-unitcalculator-close:hover{
    background-color: rgb(173, 0, 0);
}


.edml-unitcalculator .edml-unitcalculator-bottomtext{
    position: absolute;
    bottom: 0.25em;
    font-size: 0.75em;
    left: 0.25em;
    max-width: 16em;
    display: inline-block;
}


.edml-unitcalculator .edml-unitcalculator-buttoncancel{
    font-family: edmlfont;
    display: inline;
    line-height: 1em;
    padding-top: 0.2em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-size: 1em;


}

.edml-unitcalculator-unit.disabled{
    color: #aaaaae;   
}

.edml-unitcalculator-unit.disabled:hover{
    color: #aaaaae;   
}

.edml-unitcalculator-prefix.disabled{
    color: #aaaaae;   
}

.edml-unitcalculator-prefix.disabled:hover{
    color: #aaaaae;   
}

.edml-expressioncalculator{
    display: none;
    position: fixed;
    width:18em;
    max-width: 18em;
    min-width: 18em;
    height: 22em;
    background-color: #f8f9fa;
    flex-wrap: wrap;
    border:1px outset #e2e4e6;
    z-index: 21474834;
    user-select: none;
}

.edml-expressioncalculator.active{
    display: block;
}

.edml-expressioncalculator .edml-expressioncalculator-close{
    position: absolute;
    top: 0em;
    right: 0em;
    width: 2em;
    height: 2em;
    text-align: center;
    padding: 0px;
    /*border-radius: 0.5em;*/
    color: white;
    background-color: red;
    border: solid 1px black;
    font-size: 0.75em;
    line-height: 0.5em;
    font-weight: bold;
}

.edml-expressioncalculator .edml-expressioncalculator-close:hover{
    background-color: rgb(173, 0, 0);
}




.edml-expressioncalculator > .edml-expressioncalculator-display{
    display: block;
    background-color: white;
    height: 3.5em;
    position: absolute;
    width: 14.5em;
    left: 0.5em;
    top: 0.5em;
    border: solid 1px #e2e4e6;
    overflow: auto;
    
}


.edml-expressioncalculator .edml-expressioncalculator-button{
    width: 2em;
    height: 2em;
    margin-right: 0.25em;
    text-align: center;
    font-size: 1em;
    overflow: hidden;
    padding: 0.1em;
    background-color: #E9E9ED;
    border: solid 1px #8F8F9D;
    display: inline-block;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
}

.edml-expressioncalculator .edml-expressioncalculator-button.pressed{
    background-color: #D0D0D7; 
}

.edml-expressioncalculator .edml-expressioncalculator-button:hover{
    background-color: #D0D0D7;
}

.edml-expressioncalculator .edml-expressioncalculator-button.active{
    background-color: #D0D0D7;
}

.edml-expressioncalculator .edml-expressioncalculator-button[value="1"], .edml-expressioncalculator .edml-expressioncalculator-button[value="2"],.edml-expressioncalculator .edml-expressioncalculator-button[value="3"],.edml-expressioncalculator .edml-expressioncalculator-button[value="4"],.edml-expressioncalculator .edml-expressioncalculator-button[value="5"],.edml-expressioncalculator .edml-expressioncalculator-button[value="6"],.edml-expressioncalculator .edml-expressioncalculator-button[value="7"],.edml-expressioncalculator .edml-expressioncalculator-button[value="8"],.edml-expressioncalculator .edml-expressioncalculator-button[value="9"],.edml-expressioncalculator .edml-expressioncalculator-button[value="0"],.edml-expressioncalculator .edml-expressioncalculator-button[value="."],.edml-expressioncalculator .edml-expressioncalculator-button[value=","]{
    background-color: #f1f1dc;
}

.edml-expressioncalculator .edml-expressioncalculator-button[value="1"]:hover, .edml-expressioncalculator .edml-expressioncalculator-button[value="2"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="3"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="4"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="5"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="6"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="7"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="8"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="9"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="0"]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value="."]:hover,.edml-expressioncalculator .edml-expressioncalculator-button[value=","]:hover{
    background-color: #c9c9b9;
}

.edml-expressioncalculator .edml-expressioncalculator-button[value="1"].active, .edml-expressioncalculator .edml-expressioncalculator-button[value="2"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="3"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="4"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="5"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="6"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="7"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="8"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="9"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="0"].active,.edml-expressioncalculator .edml-expressioncalculator-button[value="."].active,.edml-expressioncalculator .edml-expressioncalculator-button[value=","].active{
    background-color: #c9c9b9;
}

.edml-expressioncalculator .edml-expressioncalculator-button.small{
    line-height: 1.5em;
    max-height: 1.5em;
    height: 1.75em;
    width: 1.75em;
    min-width: 1.75em;
    max-width: 1.75em;
}






.edml-expressioncalculator  > .edml-expressioncalculator-undo.disabled, .edml-expressioncalculator > .edml-expressioncalculator-redo.disabled{
    color: #B1B1B9; 
}



.edml-expressioncalculator .edml-expressioncalculator-numberblock{
    display: grid;
    grid-template-columns: auto auto auto auto;
    top: 10em;
    grid-column-gap: 0.5em;
    position: absolute;
    grid-row-gap: 0.5em;
    left: 0.5em;
}


.edml-expressioncalculator > .edml-expressioncalculator-clr{
    float: right;
    top: 3em;
    position: relative;
    background-color: bisque;
    font-size: 0.75em;
    width: 3em;
    
}

.edml-expressioncalculator > .edml-expressioncalculator-clr:hover{
    background-color: #FFCA8E;
}


.edml-expressioncalculator .edml-expressioncalculator-rightblock{   
    right: 1em;    
    top: 10em;
    font-family: edmlfont;
    display: grid;
    grid-column-gap: 0.5em;
    position: absolute;
    grid-row-gap: 0.5em;
}



.edml-expressioncalculator .edml-expressioncalculator-button[value="ok"]{
    background-color:rgb(83, 115, 83);
    color: white;
    font-weight: bold;
}

.edml-expressioncalculator .edml-expressioncalculator-button[value="ok"]:hover{
    background-color:rgb(38, 56, 38);
}


.edml-expressioncalculator .edml-expressioncalculator-fnblock{
    left: 0.5em;    
    top: 7em;
    display: grid;
    grid-column-gap: 0.5em;
    position: absolute;
    grid-row-gap: 0.125em; 
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em 2em;
}

.edml-expressioncalculator .edml-expressioncalculator-constantblock{
    left: 0.5em;    
    top: 4.5em;
    display: grid;
    grid-column-gap: 0.5em;
    position: absolute;
    grid-row-gap: 0.125em; 
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em 2em;
}

.edml-expressioncalculator .edml-expressioncalculator-fnblock .edml-expressioncalculator-button{
    background-color: rgb(119, 119, 138);
    color: white;
}

.edml-expressioncalculator .edml-expressioncalculator-fnblock .edml-expressioncalculator-button:hover{
    background-color: rgb(83, 83, 96);
}

.edml-expressioncalculator .edml-expressioncalculator-fnblock .edml-expressioncalculator-button.active{
    background-color: rgb(83, 83, 96);
}

.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="π"],.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="ℇ"], .edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="i"],.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="!"]{
    background-color: rgb(119, 119, 138);
    color: white;
}

.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="π"]:hover,.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="ℇ"]:hover,.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="i"]:hover,.edml-expressioncalculator .edml-expressioncalculator-constantblock .edml-expressioncalculator-button[value="!"]:hover{
    background-color: rgb(83, 83, 96);
}


.edml-expressioncalculator .edml-expressioncalculator-letterblock{
    left: 0.5em;    
    top: 7em;
    display: grid;
    grid-column-gap: 0.5em;
    margin-top: 1em;
    position: absolute;
    grid-row-gap: 0.5em;
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em;
}

.edml-expressioncalculator .edml-expressioncalculator-button[value="abc"], .edml-expressioncalculator .edml-expressioncalculator-button[value="123"]{
    font-style: italic;
    color: blue;
}

.edml-expressioncalculator .edml-expressioncalculator-edmlfont{   
    font-family: edmlfont;
}

.edml-expressioncalculator-value{
    outline: none;
    border: none;  
    overflow: visible;
}

.edml-expressioncalculator-value:focus{
    outline: none;
    border: none;    
}

.edml-expressioncalculator-value.hide{
    display: none;
}

.edml-expressioncalculator-m{
    overflow: visible;
}

.edml-expressioncalculator-m.hide{
    display: none;
}


.edml-expressioncalculator-caret{    
    /*border-right: 1px black solid;*/
    outline:1px solid gray;
    height: 1em;
    position: relative;
    display: inline-block;
    z-index: 100;
    margin-right: 1px;
    animation: caretAnimation 1s infinite;
    vertical-align: middle;
    padding:0px;
    margin:0px;

}

@keyframes caretAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
  100% { opacity:1; }
}

.edml-expressioncalculator-page01, .edml-expressioncalculator-page02{
    display: none;
}

.edml-expressioncalculator-page01.active, .edml-expressioncalculator-page02.active{
    display: block;
}
.edmlplayer-loader{
    display: none;
}

.edmlplayer-loader.active{
    display: block;
}


.edmlplayer-loader-block {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #48587C; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;  
  position: absolute;
  left: calc(50vw - 60px);
  top: calc(50vh - 60px);
  display: inline-block;
  z-index: 500000;
}

.edmlplayer-loader-text{
  display: block;
  position: absolute;
  left: calc(50vw - 44px);
  text-align: center;
  top: calc(50vh);
  width: 120px;
  max-width: 120px;
  height: 120px; 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.edmlplayer-titlebar{
    background-color: #f8f9fa;
    padding-top: 0px;
    padding-bottom: 0px;
    position: fixed;
    margin-left: 0px;
    margin-right: 0px;
    z-index: 21474831;
    margin-top: 0em;
    height: 2em;
    display: flex;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    justify-content: space-between;
    top: inherit;
    left: 0px;
    width: 100%;
}

edml-course[alevel="2"] .edmlplayer-titlebar > h1{
    display: inline-block;
    position: absolute;
    top: 0px;
    margin: 0px;
}

.edmlplayer-titlebar.hide{
    display: none;
}




.edmlplayer-titlebar-brand{
    transition: all .2s ease-in-out;
    margin-right: 1rem;
    max-height: 2em;
    overflow: hidden;
    margin-left: 0.5em;
    transition: transform .5s;
    height: 2em;
    width: 7em;
    background-repeat: no-repeat;
    background-size: contain;
}

.edmlplayer-titlebar-brand:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.edmlplayer-titlebar-brand img{
    height: 2em;
}

.edmlplayer-titlebar-title{
    font-size: 1.8em;
    font-family: sans-serif;
    overflow: hidden;
    padding-right: 3em;
    cursor: pointer;
    user-select: none;
}

.edmlplayer-titlebar-hamburger{
    border-left: 1px solid;
    border-color: #E5E5E5;
    height: 100%;
    padding: 0px;
    margin: 0px;
    padding-right: 0.5em;
    padding-left: 0.5em;
    display: inline-block;
    cursor: pointer;
    
}

.edmlplayer-titlebar-hamburger:hover{
    background-color: #F1F1F1;    
}

.edmlplayer-titlebar .edmlplayer-titlebar-hamburger-line {
  width: 2em;
  height: 0.2em;
  background-color: black;
  margin: 0.3em 0;
  display: block;
}

.edmlplayer-titlebar-hamburger-menu{
    display: none;
    position: absolute;
    right: 0px;
    transition: all 1.0s ease-in-out;
    top: 2.5em;
    height: 0px;
}

.edmlplayer-titlebar-hamburger-menu[open="true"]{
    display: inline-block;    
    z-index: 100000;
    width: 10em;
    background-color: #f8f9fa;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: 1px solid #E5E5E5;
    padding-left: 0.25em;
    padding-right: 0.25em;
    border-radius: 0px 0em 0em 0.25em;
    border-top: none;
    height: auto;
}

.edmlplayer-titlebar-hamburger-menu .edmlplayer-titlebar-hamburger-itemsep{
    width: 100%;
    border: 1px solid #E5E5E5;
}

.edmlplayer-titlebar-hamburger-menu .edmlplayer-titlebar-hamburger-item{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    display: block;
}

.edmlplayer-titlebar-hamburger-menu .edmlplayer-titlebar-hamburger-item.hide{
    display: none;
}

.edmlplayer-titlebar-hamburger-menu .edmlplayer-titlebar-hamburger-item:hover{
    background-color: #CFCFCF;
}

/* midi devices */
@media only screen and (max-width: 1000px) {
    .edmlplayer-titlebar-title{
        font-size: 1em;
    }
}

/* small devices */

@media only screen and (max-width: 600px) {
    .edmlplayer-titlebar-brand{
        visibility: hidden;
        width: 1px;
    }

    .edmlplayer-titlebar-title{
        font-size: 1em;
        padding-top: 0.5em;
        font-weight: bold;
    }

}

/* midi devices */
@media only screen and (max-width: 319px) {
    .edmlplayer-titlebar-title{
        font-size: 0.5em;
        margin-top: 0em;
    }
}


@media print{
    .edmlplayer-titlebar{
        display: none;
    }
}


.edmlplayer-arrows{
    position: fixed;
    bottom: 0.75em;
    z-index: 1000000;
}

.edmlplayer-arrows.static{
    position: absolute;
    bottom: 0.5em;
}

.edmlplayer-arrow-left:after{
    font-family: edmlfont;
    content: 'Q';
    position: relative;
    z-index: 1;
    display: inline-block;
}

 .edmlplayer-arrow-left:before,  .edmlplayer-arrow-chapter-left:before{
    content:" ";
    background-color: white;
    opacity: 0.5;
    display: inline-block;
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: -0.25em;
    z-index: 0;

}



.edmlplayer-arrow-right:after{
    font-family: edmlfont;
    content: 'R';
    display: inline-block;
    text-align: right;
    width: 1.25em;
    z-index: 1;
    position: relative;
}

.edmlplayer-arrow-right:before, .edmlplayer-arrow-chapter-right:before{
    content:" ";
    background-color: white;
    opacity: 0.5;
    display: inline-block;
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: -0.25em;
    z-index: 0;

}

 .edmlplayer-arrow-chapter-left:after{
    content: "A";
    font-family: edmlfont;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.edmlplayer-arrow-chapter-right:after{
    content: "B";
    font-family: edmlfont;
    text-align: right;
    width: 1.25em;    
    position: relative;
    z-index: 1;
    display: inline-block;
}

#edmlplayer-btn_next.hidden, #edmlplayer-btn_nextchapter.hidden,#edmlplayer-btn_prev.hidden, #edmlplayer-btn_prevchapter.hidden{
    display: none;
}

/** NEXT (Chapter) **/
#edmlplayer-btn_next, #edmlplayer-btn_nextchapter{
    font-size: 2em;
    color: #48587C;
    float: right;
    transition: all .2s ease-in-out;
    display: inline;
}

#edmlplayer-btn_next:hover, #edmlplayer-btn_nextchapter:hover{
    transform: scale(1.2);
    cursor: pointer;
}








/** PREV (Chapter) **/
#edmlplayer-btn_prev, #edmlplayer-btn_prevchapter{
    font-size: 2em;
    color: #48587C;
    float: left;
    transition: all .2s ease-in-out;
    display: inline;
    width: 1.25em;
}

#edmlplayer-btn_prev:hover, #edmlplayer-btn_prevchapter:hover{
    transform: scale(1.2);
    cursor: pointer;
}

.edmlplayer-arrows.hidden{
    display: none!important;
}


.edmlplayer-arrows-right.static{
    right: 0.5em;
}





@media print{
    .edml-arrows{
        display: none!important;  
        visibility: hidden!important;
    }

    .edmlplayer-arrow-chapter-left,.edmlplayer-arrow-left{
        display: none;
    }

}




/*** DIALOG ***/
.edml-dialog{
    display: none;
    min-width: 25vw;
    max-width: 75vw;
    z-index: 2147483647;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 5px 5px 8px 8px #626262;
    border-radius: 0.25em 0.25em 0.25em 0.25em;
    border: 1px solid #000000;
    max-height: 75vh;
    min-height: 15em;
    user-select: none;
    overflow: hidden;
    padding:0px;
    margin:0px;
    font-family: sans-serif;

}

.edml-dialog.edml-dialog-selectable{
  -webkit-user-select: auto;  /* Chrome 49+ */
  -moz-user-select: auto;     /* Firefox 43+ */
  -ms-user-select: auto;      /* No support yet */
  user-select: auto;
}

.edml-dialog .edml-dialog-hidden{
    display: none;
    padding-left: 2em;
}




.edml-dialog[open="true"]{
    display: flex;
    flex-direction: column;

}


.edml-dialog .edml-dialog-title{
    background-color: #888888;
    color: white;
    height: 1.5em;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #000000;
    position: relative; 
    flex-grow: 0;

}

.edml-dialog .edml-dialog-title.danger{
    background-color: #B83838;
}

.edml-dialog .edml-dialog-title.edml-error{
    background-color: #9C0000;   
}

.edml-dialog .edml-dialog-title-text{
    padding-left: 1em;
    font-size: 1.2em;
    font-weight: bold;
}

.edml-dialog .edml-dialog-title-close{
    padding-left: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-left: solid;
    border-color: #626262;
    border-width: 1px;
    line-height: 1.5em;
    height: 1.5em;
}

.edml-dialog .edml-dialog-title.danger .edml-dialog-title-close:hover{
    background-color: #883535;
}

.edml-dialog .edml-dialog-title-close:hover{
    background-color: #000000;
}

.edml-dialog .edml-dialog-body{
    min-height: 3em;
    background-color: white;
    display: block;
    padding: 1em;
    font-size: 1em;
    overflow-y: auto;
    height: auto;
    width: auto;
    position: relative; 
    flex-grow: 1;  
    line-height: 1.5em;
}

.edml-dialog .edml-dialog-body.centered{
    margin-left: auto;
    margin-right: auto;
}

.edml-dialog .edml-dialog-footer{
    min-height: 4em;
    background-color: white;
    border-top: 1px solid #E3E3E3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    bottom: 0px;
    width: 100%;
    left: 0px;
    z-index:100;
    flex-grow: 0; 
    padding-top:0.5em;  
}

.edml-dialog .edml-footer-resize{
    display: block;
    position: relative;
    right: 0px;
    font-size: 1.0em;
    font-family: edmlfont;
    z-index: 10000;
    padding: 0px;
    margin:0px;
    flex-grow: 0;
    text-align: right;
    background-color: white;
    
}

.edml-dialog .edml-footer-resize:hover{
    font-size: 1.2em;
}

.edml-dialog .edml-dialog-button{
    background-color: #E3E3E3;
    color: black;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: 0.25em;
    display: inline-flex;
    align-items: center;
    margin-right: 1em;
    margin-left: 1em;   
}

.edml-dialog .edml-dialog-button:hover{
    background-color: rgb(202, 202, 202);
}

.edml-dialog .edml-dialog-input.searchinput{
    max-width: calc(100% - 6em);
    display: inline-block; 
}

.edml-dialog .edml-dialog-button .edml-dialog-buttontext{
    color: transparent; 
    z-index: 100;  
    position: absolute;
    top: 0px;
    left: 0px;
}

.edml-dialog .edml-dialog-button.searchbtn{
    max-width: 2em;
    overflow: hidden;
    padding: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden; 
    background-color: #48587C;
    color: white;
    border: none;
    border-radius: 5px;
}

.edml-dialog .edml-dialog-button.searchbtn .edml-dialog-buttonicon:before{
    content: "t";
    font-family: 'edmlfont';
    position: relative;
    font-size: 1.5em;
    z-index: 1;
}


.edml-dialog .edml-dialog-button.red{
    background-color: #B83838;
    color: white;

}

.edml-dialog .edml-dialog-button.searchbtn:hover{
    background-color: #000000;
}




.edml-dialog .edml-dialog-button.red:hover{
    background-color: #883535;
}



.edml-dialog .edml-dialog-table-hline td{
    border-bottom: 1px solid #C0C0C0;
    height: 1px;

}

.edml-dialog-label{
    display: inline-block;
    max-width: 40%;
    margin-right: 5%;
    min-width: 40%;
    width: 40%;
    position: relative;
    text-align: right;
    font-size: 1em;
}

.edml-dialog-selectitem{
    display: inline-block;
    max-width: 40%;
    min-width: 40%;
    width: 40%;
    position: relative;        
}

.edml-dialog-selectionline{
    line-height: 2em;
    display: block;
    position: relative;
    width: 400px;
}

.edml-dialog-inputgroup{
    display: block;
    position: relative;
    margin-bottom: 1em;
}

.edml-dialog-inputgroup input[type="text"] + .edml-dialog-label{
    font-size: 1em;  
    color: lightgray;
    padding: 0px;
    margin:0px;
    text-align: left;
    top: 1.25em;    
    pointer-events: none;
    position: absolute;
    left: 0px;
    white-space: nowrap;
    width: 100%;
}

.edml-dialog-inputgroup input[type="text"].edml-dialog-input {
    border: none;
    border-bottom: solid 1px black;
    font-size: 1em;    
    z-index: 10;
    background-color: transparent;
    margin-top: 1.25em;
    width: 100%;
}

.edml-dialog-inputgroup:focus-within input[type="text"].edml-dialog-label{
    top:0.0em;
    font-size: small;
}

.edml-dialog-inputgroup input[type="text"]:valid + .edml-dialog-label{
    top:0.0em;
    font-size: small;
}

.edml-dialog-inputgroup input[type="checkbox"] + .edml-dialog-label{
    width: 100%;
    text-align: left;
    min-width: 100%;
    display: inline;
    
}


.edml-dialog .edml-log{
    display: none;
}

.edml-dialog .edml-log.show{
    display: block;
}


.edml-dialog .edml-dialog-listdiv{
    line-height: 1.5em;
}

.edml-dialog-head{
    font-weight: bold;
    padding-bottom: 0.25em;
}

.edml-dialog-head.edml-dialog-link{
    color: #7F98CE;
}

.edml-dialog-head.edml-dialog-link:hover{
    color: #48587C;
}


/* small devices dialog*/

@media only screen and (max-width: 799px) {
  .edml-dialog{
    min-width: 99vw;
    min-height: 100%;
    transform: none;
    top: 0px;
    left: 0px;
    position: fixed;
  }
  
  .edml-dialog-selectionline{
    width: 100%;
  }
  
  .edml-dialog-body{
    display: block;
    max-width: none!important;
    width: auto;
  }

}


.edml-dialog.forceshow{
    display: flex;
}
mjx-container[jax="CHTML"]{
    display: flex!important;
    align-items: baseline!important;
    overflow-x: auto;
    margin: 0px;
    /* for chrome */
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-top: 0.02em;
    padding-bottom: 0.02em;  
    overflow-y: hidden;
    width: auto!important;
}


mjx-assistive-mml {
    right: 0px;
    bottom: 0px;
  }

mjx-math{
    overflow: hidden;
  }
/* Tabs */
.edml-slidertab{
    display: block;
    position: relative;
}

.edml-slidertab .edml-slidertab-buttons{
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    position: relative;
}

.edml-slidertab .edml-slidertab-buttons .edml-slidertab-btn{
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #48587C;
    border-color: #48587C;
}

.edml-slidertab .edml-slidertab-buttons .edml-slidertab-btn.selected{
    background-color: #000000;
}

.edml-slidertab .edml-slidertab-tabs{
    display: block;
    position: relative;
}

.edml-slidertab .edml-slidertab-tabs .edml-slidertab-tab{
    display: none;
    position: relative;
    padding-top: 2em;
}

.edml-slidertab .edml-slidertab-tabs .edml-slidertab-tab.active{
    display: block;
}



/** FOOTER **/
.edmlplayer-footer{
    background-color: #f8f9fa;
    position: fixed;
    display: flex;
    gap: 1em;
    justify-content: end;
    font-family: sans-serif;
    bottom: 0.0001em;
   
    width: 100%;
    min-height: 1.25em;
    text-align: right;
    padding-top: 0.25em;
    padding-right: 1em;
    z-index: 20;
    height: 1.25em;
    max-height: 1.25em;
}

.edmlplayer-footer > *:last-child{
    padding-right: 1em;
}

@media print{
    .edmlplayer-footer{
        display: none;
    }
}

.edml-checkbutton {
	background-color: #f8f9fa;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	position: fixed;
	left: calc(50% - 4em);
	
	padding-left: 1.5em;
	padding-right: 1.5em;
	padding-bottom: 0.6em;
	padding-top: 1em;
	line-height: 1em;
	font-weight: bold;
	padding-top: 2.5em;
	border-radius: 20em;
	line-height: 2em;
	vertical-align: top;
	font-size: 1em;
	display: none;
	width: 8em;
	display: inline-block;
	text-align: center;
	top: -7em;
	transition: top 0.5s linear;
	z-index: 21474830;
	
	height: 0px;
}



.edml-checkbutton:hover {
	background-color: #F3F3F3;
	
}


.edml-checkbutton.show{
    display: inline-block;
    top: 0em;
	height: auto;
}

edml-course.notitlebar .edml-checkbutton.show {
	display: inline-block;
    top: -2em;
}


.edmlplayer-breadcrumb{
    position: fixed;
    left: 0em;
    top: 2.75em;
    color: darkgray;
    z-index: 1000000;
    background-color: white;
    white-space: nowrap;
    /*transition: 1s;*/
    padding-left: 1em;
    line-height: 1em;
    display: inline-block;
}

edml-course.notitlebar .edmlplayer-breadcrumb{
    top: 0.25em;
}


/*.edmlplayer-breadcrumb.navextended{
    left: 350px;
    
}*/

.edmlplayer-breadcrumb .edmlplayer-breadcrumbitem{
    max-width: 8em;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
    display: inline-block;
    
}

.edmlplayer-breadcrumb .edmlplayer-breadcrumbitem:hover{
    color: black;
}

.edmlplayer-breadcrumb.hidden{
    display: none;
}

@media (max-width: 1800px) and (min-width: 1550px) {
    .edmlplayer-breadcrumb{
        transition: 1s;
        left: calc(100% / 2 - 600px - 20px) !important
    }

    .edmlplayer-breadcrumb.navextended{
        
        margin-left: calc(320px - 100% / 2 + 600px);
    }

}

@media only screen and (max-width: 599px) {

    .edmlplayer-breadcrumb{
        display: none;
    }   

    .edmlplayer-breadcrumb[always="on"]{
        display: inline-block;
    }
}


@media print{
    .edmlplayer-breadcrumb{
        display: none;
    }
}
edmlplayer-timer{
    position: fixed;
    color: darkgray;
    right: 6em;
    line-height: 2.25em;
    display: inline;
    text-align: right;
    z-index: 10;
}

edmlplayer-timer.red{
    color: red;
    font-weight: bold;
    animation: blinker 1.6s linear infinite;
}

@keyframes blinker {
    50% {
      opacity: 0.3;
    }
  }



edml-accordionview{  
    display: block;
    min-height: 1em;
    position: relative;

}

edml-accordionview .edml-accordionview-label{
    font-weight: bold;
    display: block;
    position: relative;
}


edml-allof{
    display: none;
}
edml-applicationbox{
    background-color: #BDBDBA;
    background-image: linear-gradient(#bfbed9, #d2d2d2);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-applicationbox:before{
    content: "'";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #C0C0C0;
    border-right: solid 2px #C0C0C0;
    border-radius: 0 0 5px 0;
    line-height: 1.5em;

}

edml-applicationbox.active{
    display: block!important;
}

@media print {
    edml-applicationbox {
      break-inside: avoid;
    }
}
edml-audio{
    background-color: var(--edml-button-background);
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.125em;
    padding-bottom: 0.125em;
    display: inline-block;
    white-space: nowrap;
}



edml-audio .edml-audio-btn{
    color: var(--edml-white);
    padding-left: 0.25em;
    padding-right: 0.25em;
    height: 100%;
    display: inline-block;
    position: relative;
}

edml-audio .edml-audio-btn:hover{
    color: var(--edml-lightgray);
}


edml-audio .edml-audio-res{
    display: none;
}

edml-audio .edml-audio-playbtn:after{
    content:"y";
    font-family: edmlfont;
}

edml-audio[state="playing"] .edml-audio-playbtn{
    display: none;
}

edml-audio .edml-audio-pausebtn{
    display: none;
}

edml-audio .edml-audio-pausebtn:after{
    content:"*";
    font-family: edmlfont;
}

edml-audio[state="playing"] .edml-audio-pausebtn{
    display: inline-block;
}


edml-audio .edml-audio-duration{
    color: var(--edml-white);
    font-size: small;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

edml-audio .edml-audio-volume{
    appearance: none;
    background: linear-gradient(0deg,transparent 0%, transparent 30%, var(--edml-white) 30%, var(--edml-white) 66.6%, transparent 66.7%, transparent 100%);
    vertical-align: middle;
    width: 5em;
}

edml-audio .edml-audio-volume.silent{
    background: linear-gradient(0deg,transparent 0%, transparent 30%, var(--edml-red) 30%, var(--edml-red) 66.6%, transparent 66.7%, transparent 100%);
    color: var(--edml-red);
}

edml-autoref span[class*="-numbering"]{
    padding-left: 0.25em;
}

edml-autoref:hover{
    cursor: pointer;
}


edml-blockquote{
    display: block;
    margin-left: 2em;
}


edml-boolean{
    display: inline;
    position: relative;
    font-size: 1.25em;
   /* padding-right: 0.25em;*/
    color: black;
    font-weight: normal;  
    margin-left: 2px;
}



edml-boolean:before{
    content: "e";
    font-family: edmlfont;
}

edml-boolean.unsolved:before{
    content: "g";
}


edml-boolean.selected:before{
    content: "f";
}



edml-input[solved="true"]:not([check="false"]) > edml-boolean:before{
    content: "\2019"; 
}

edml-input[solved="true"]:not([check="false"]) > edml-boolean.selected:before{
    /*content: "#";  */
    content: ".";
}

edml-input[solved="false"]:not([check="false"]) edml-boolean:before{
    content: "/";
}

edml-input[solved="false"]:not([check="false"]) edml-boolean.selected:before{
   /* color: #FF0000;*/
    /*content: "$"; */
    content: ">";  
}

edml-booleangroup[solved="true"]:not([check="false"]) edml-input.missed[solved="false"] > edml-boolean:before{
    /*content: "*";  */
    content: "\002D";
}

edml-booleangroup[solved="false"]:not([check="false"]) edml-input.missed[solved="false"] > edml-boolean:before{
    /*content: "+";  */
    content: "/";
}




/*
edml-booleangroup[solved="false"] > edml-input > edml-boolean[missed="true"]:before{
    color: #FFAA00;
    font-weight: bold;
}
*/
edml-booleangroup{
    display: block;
    position: relative;
}

edml-booleangroup[solved="true"]{
    background-color: rgb(222, 250, 222);
}

edml-booleangroup[solved="true"]:after{
    content: "S";
    font-family: edmlfont;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding-right: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    color: #00A500;
    display: inline-block;
    z-index: 100;

}

edml-booleangroup[solved="false"]{
    background-color: rgb(251, 209, 209);
}

edml-booleangroup[solved="false"]:after{
    content: "X";
    font-family: edmlfont;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding-right: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    color: #FF0000;
    display: inline-block;
    z-index: 100;

}

edml-booleangroup > .edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

edml-booleangroup >.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-booleangroup >.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}
edml-br{
    display: inline;
}
edml-button{
  appearance: none;
  background-color: var(--edml-button-background);
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: gray 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: var(--edml-button-color);
  cursor: pointer;
  display: inline-block;
  padding: 0.5em 1em;
  position: relative;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

edml-button:hover {
  background-color: var(--edml-button-hoverbackground);
  color: var(--edml-button-hovercolor);
  text-decoration: none;
  transition-duration: 0.1s;
}



edml-caption{
    font-style: italic;
    font-size: 0.9em;
}

edml-carouselview{  
    display: flex;
    min-height: 1em;
    position: relative;
    flex-wrap: nowrap;
    border: solid 1px lightgray;
    border-radius: 5px;
    margin-top:2.0em;
    padding-top: 0.25em;

}

edml-carouselview > .edml-carouselview-label{
    position: absolute;
    left: 0.25em;
    font-weight: bold;
    top:0px;
}

edml-carouselview[fixedheight="false"]{
    display: block;
}


edml-carouselview > .edml-carouselview-leftbtn::before{
    content: "x";
    font-family: edmlfont;
    font-size: 1em;
    color: black;
}

edml-carouselview > .edml-carouselview-leftbtn{
    position: absolute;
    left: 0px;
    top: calc(50% - 0.5em);
    font-size: 1em;
    background-color: #E3E3E3;
    padding: 0.25em;
    border-radius: 0.25em;
    line-height: 1em;
    display: none;
}

edml-carouselview > .edml-carouselview-leftbtn.active{
    display: inline-block;
}

edml-carouselview > .edml-carouselview-leftbtn:hover{
    background-color: rgb(202, 202, 202);
}


edml-carouselview > .edml-carouselview-rightbtn::before{
    content: "y";
    font-family: edmlfont;
    font-size: 1em;
    color: black;
}

edml-carouselview > .edml-carouselview-rightbtn{
    position: absolute;
    right: 0px;
    top: calc(50% - 0.5em);
    font-size: 1em;
    background-color: #E3E3E3;
    padding: 0.25em;
    border-radius: 0.25em;
    line-height: 1em;
    display: none;
}

edml-carouselview > .edml-carouselview-rightbtn.active{
    display: inline-block;
}

edml-carouselview > .edml-carouselview-rightbtn:hover{
    background-color: rgb(202, 202, 202);
}

edml-carouselview  .edml-carouselview-toolbar{
    display: block;
    position: absolute;
    height: 1.5em;
    bottom: 0.0em;
    width: 100%;
    
}


edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-title{
    background-color: gray;
    color: white;
    display: none;
    padding: 0.25em;
    margin-left: 0em;
    font-size: 0.75em;
    line-height: 1em;
    position: absolute;
    white-space: nowrap;
}

edml-carouselview[fixedheight="false"]  .edml-carouselview-toolbar > .edml-carouselview-toolbar-title{
    margin-left: 3em;
}

edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-title.active{
    display: inline-block;
}


edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-dots{
    display: flex;
    width: 100%;
    height: 1em;
    justify-content: center;
}

edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-slider{
    display: flex;
    width: 100%;
    height: 1em;
    justify-content: center;
}

edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-dots > .edml-carouselview-toolbar-dot{
    display: inline-block;   
    width: 1em;
    height: 1em;
    line-height: 1em;
    font-size: 1em;
    max-height: 1em;
    overflow: hidden;
}

edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-dots > .edml-carouselview-toolbar-dot:before{
    font-family: edmlfont;
    content:"3";
}

edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-dots > .edml-carouselview-toolbar-dot.active:before{
    font-family: edmlfont;
    content:"4";
}


@media (max-width: 799px) {
    edml-carouselview  .edml-carouselview-toolbar > .edml-carouselview-toolbar-title.active{ 
        display: none;
    }
  }


edml-case{
    display: none;
}

edml-case.show{
    display: block;
}



edml-table edml-cell{
   /* display: flex;*/
    display: table-cell;
    width: auto;
    padding-left: 0.2em;
    padding-right: 0.2em;
    border-right: 1px solid black;
    border-bottom: 1px solid black;    
    vertical-align: middle;
    background-color: var(--edml-table-background);
    overflow: hidden;
    position: relative;
}

edml-table > edml-row > edml-cell:first-child{
    border-left: solid black 1px;
    left:0px;
    top:0px;

    z-index: 10;
}

edml-table edml-cell.aligncenter{
    text-align: center;
}

edml-table edml-cell.alignleft{
    text-align: left;
}

edml-table edml-cell.alignright{
    text-align: right;
}


/* headrow sortable*/
edml-table[sortable="true"] > edml-headrow > edml-cell{
    padding-right: 1em;
}

edml-table[sortable="true"] > edml-headrow > edml-cell:hover{
    background-color: rgb(95, 95, 95);
}

edml-table[sortable="true"] > edml-headrow > edml-cell.sortdesc:after{
    content:"x";
    transform: rotate(90deg);
    font-family: edmlfont;
    font-size: 0.75em;
    position: absolute;
    right: 0.5em;
    top: 0.125em;
}

edml-table[sortable="true"] > edml-headrow > edml-cell.sortasc:after{
    content:"x";
    transform: rotate(-90deg);
    font-family: edmlfont;
    font-size: 0.75em;
    position: absolute;
    right: 0.5em;
    top: 0.125em;
}

/* headrow sortable END */


edml-table[border="false"] > edml-row > edml-cell:first-child{
    border-left: none;
}


edml-table.fixleft > edml-row > edml-cell:first-child{
    position: sticky;    
    background-color: rgb(235, 235, 235);
}



edml-table > edml-row:first-of-type > edml-cell{
    border-top: solid black 1px;
}

edml-table[border="false"] > edml-row:first-of-type > edml-cell{
    border-top: none;
}


edml-table > edml-row:first-child{
    left:0px;
    top:0px;
    z-index: 100;
}

edml-table[fixed="top"] > edml-row:first-child{
    position:sticky;
   
}

edml-table[fixed="top"] > edml-row:first-child > edml-cell{
    background-color: darkgray;
   
}

edml-table[fixed="both"] > edml-row:first-child{
    position:sticky;
    
}


edml-table[striped="true"] > edml-row:nth-child(odd) > edml-cell{
    background-color: rgb(237, 237, 237);
}


edml-table[fixed="both"] > edml-row:first-child > edml-cell{
    position:sticky;
    background-color: darkgray;
}


edml-table[border="false"] edml-cell {
    border: none;
}

edml-table edml-cell[align="left"]{
    text-align: left;
}

edml-table edml-cell[align="right"]{
    text-align: right;
}

edml-table edml-cell[align="center"]{
    text-align: center;
}


edml-table > edml-headrow[valign] > edml-cell{
    vertical-align: inherit;
}

edml-table edml-cell[valign="middle"]{
    vertical-align: middle;
}

edml-table edml-cell[valign="top"]{
    vertical-align: top;
}

edml-table edml-cell[valign="bottom"]{
    vertical-align: bottom;
}




edml-chains{
    display: none;
}
edml-choice {

    display: inline-block;
    position: relative;    
    border: solid 1px #676774;
    border-radius: 5px;
    background-color: #e9e9ed;
}

edml-choice:after{
    display: inline-block;
    content: "M";
    font-family: edmlfont;
    border-left: solid 1px lightgrey;
    width: 0.75em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    height: 100%;

}

edml-choice:hover{
    background-color: #D0D0D7;
}

.edml-choice-selected{
    display: inline;
    width: auto;
    padding-right: 0.5em;
    padding-left: 0.125em;
    height: 100%;
}

edml-input[solved="true"]:not([check="false"]) > edml-choice {
    background-color: var(--edml-solved);    
}

edml-input[solved="true"]:not([check="false"]) > edml-choice:before{
    content: "S";
    font-family: edmlfont;
    width: 1em;
    display: inline-block;
    padding-left: 0.25em;
    font-weight: bold;
    border-right: solid 1px lightgrey;
    color: #00A500;
}

edml-input[solved="false"]:not([check="false"]) > edml-choice:before{
    content: "X";
    font-family: edmlfont;
    width: 1em;
    display: inline-block;
    padding-left: 0.25em;
    font-weight: bold;
    border-right: solid 1px lightgrey;
    color: red;
}

edml-input[solved="false"]:not([check="false"]) > edml-choice {
    background-color: var(--edml-failed);
}


edml-choice>.edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: var(--edml-failed);
    border-radius: 0 0.2em 0.2em 0;
    right: 0em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    
}

edml-choice>.edml-solutionhint-btn:hover{
    background-color: #f9abab;
}

edml-choice>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
    
}

edml-clonecontainer > .edml-clonecontainer-symbol:before{
    content: "\2398";
    font-size: 3em;
    margin: 1em;

}
edml-code{
    white-space: pre;
    font-family: monospace;
    display: inline;
    overflow-x: auto;
    max-width: 100%;
    font-size: 1.125em;
   /* vertical-align: text-bottom;
    
    line-height: normal;*/
    
}


edml-codelisting{
    white-space: pre;
    font-family: monospace;
    display: block;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 0em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: white;
    color: black;
}

edml-codelisting > .edml-codelisting-edmlnode{
    display: none;
}




.edml-codelistingtable{
    border: solid 1px black;
    margin: 0px;
    border-collapse: collapse;
    font-size: 1em;
    line-height: 1.5em;
    display: block;
}

.edml-codelistingtable tr, .edml-codelistingtable td{
    margin: 0px;
}

.edml-codelistingtable tr.highlight{
    background-color: rgb(255, 255, 106);
}

.edml-codelistingtable tr, .edml-codelistingtable td:nth-child(2n){
    padding-right: 0.5em;
}

.edml-codelistingtable-tdnb{
    background-color: #808080;
    color: white;
    padding-left: 0.25em;
    padding-right: 0.25em;
    text-align: right;
    font-size: 0.75em;
    vertical-align: top;
}

.edml-codelistingtable tr.highlight .edml-codelistingtable-tdnb{
    background-color: rgb(188, 201, 45);
    color: black;
}


.edml-codelistingtable-code{
    padding-left: 0.5em;
}
edml-colspecs{
    display: none;
}

edml-condition{
    display: none;
}
edml-conventionbox{
    background-color: #BDBDBA;
    background-image: linear-gradient(#ffdada, #fdc6c6);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-left: 3em;
    padding-top: 0em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-conventionbox:before{
    content: "§";
    font-family: edmlfont;
    background-size: contain;
    font-weight: bold;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.25em;
    padding-left: 0.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #fbb;
    border-right: solid 2px #fbb;
    border-radius: 0 0 5px 0;


}

edml-conventionbox.active{
    display: block!important;
}

@media print {
    edml-conventionbox {
      break-inside: avoid;
    }
}
edml-course{
    display: block;
    position: absolute;
    min-height: calc(100% - 7em);
    height: auto;
    overflow: hidden;
    font-size: 1em;
    width: 100%;
    height: 100%;
    background-color: var(--edml-page-background);
    
}


@media print{
    edml-course{
        position: relative;
        overflow-y: auto;
        font-size: 11pt!important;
        max-width: unset;
        overflow-y: auto;
        position: static;
    }
}




edml-definitionbox{
    background-color: #BDBDBA;
    background-image: linear-gradient(#FFC368, #FFB74B);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-definitionbox:before{
    content: "h";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0em;
    line-height: 1.5em;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;         
    border-bottom: solid 2px #FFF8C9;
    border-right: solid 2px #FFF8C9;
    border-radius: 0 0 5px 0;

}

edml-definitionbox.active{
    display: block!important;
}

@media print {
    edml-definitionbox {
      break-inside: avoid;
    }
}

edml-default{
    display: none;
}

edml-default.show{
    display: block;
}


edml-matching > edml-dragitems{
    display: block;
    position: relative;
}
edml-matching > edml-dropitems{
    display: block;
    position: relative;
    margin-right: 5em;
}



edml-emph{
    font-style: italic;
}
edml-examplebox{
    border-left: 0.25em solid #CDCDCD;
    display: block;
    position: relative;
    padding-left: 1em;
    /*width: calc(100% - 1em);*/
    height: auto;
    margin-top: 1.5em;
    padding-top: 0.5em;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    padding-top: 0em;




}



edml-examplebox.active{
    display: block!important;
}

@media print {
    edml-examplebox {
      break-inside: avoid;
    }
}
edml-exercisebox{
    background-color: #BDBDBA;
    background-image: linear-gradient(#D5D5D5, #E4E4E4);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-left: 3em;
    padding-top: 0em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/
    /*z-index: unset;*/

}


edml-exercisebox:before{
    content: "b";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #C0C0C0;
    border-right: solid 2px #C0C0C0;
    border-radius: 0 0 5px 0;
    line-height: 1.5em;

}

edml-exercisebox.active{
    display: block!important;
}

@media print {
    edml-exercisebox {
      break-inside: avoid;
    }
}
edml-experimentbox{
    background-color: #FFFFFF;
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
    border: ridge 3px black;
    

}


edml-experimentbox:before{
    content: "i";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0em;
    line-height: 1.5em;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-style: ridge;
    border-bottom: solid 2px #000000;
    border-right: solid 2px #000000;
    border-left: none;
    border-top: none;
    border-radius: 0 0 5px 0;
   /* background-color: #EBEBEB;*/
   

}

edml-experimentbox.active{
    display: block!important;
}

@media print {
    edml-experimentbox {
      break-inside: avoid;
    }
}
edml-input > edml-exponential:nth-of-type(n+2){
    display: none;
}


edml-exponential{
    display: inline-block;
    position: relative;
}

edml-exponential.nomantissa{
    vertical-align: text-bottom;
}

edml-exponential > .edml-exponential-exponent{
    display: inline-block;
    position: relative;
    vertical-align: super;

}



edml-exponential > .edml-exponential-mantissa{
    display: inline-block;
    vertical-align: baseline;
    position: relative;
}



edml-exponential > .edml-exponential-base{
    display: inline-flex;
    vertical-align: baseline;
    position: relative;
}


edml-exponential > .edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    left: -0.1em;
    position: relative;
    display: inline-block;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    vertical-align: baseline;
    margin-left: 0.5em;
}


edml-exponential>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-exponential>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}


edml-input[solved="true"] edml-expression>input{
    background-color: #7FBC7F;
}

edml-input[solved="false"] edml-expression > input{
    background-color: #FFC2C2;
}

edml-input.disabled edml-expression > input{
    pointer-events:none;
}



edml-input[solved] .edml-expression-output{
    display: none;
}

edml-expression{
    position: relative;
    display: inline-flex;
    padding: 0px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin: 0px;
    overflow: hidden;
    vertical-align: bottom;
    flex-wrap: wrap;
    margin-top: 0.25em;
    margin-left: 0.25em;
    margin-right: 0.25em;
    flex-direction: row;
    overflow: visible;
    

}

edml-set > edml-expression{
    vertical-align: top;
}

edml-expression > input:focus{
    outline: none;
}

edml-expression > input{
    min-width: 2em;
    width: 10em;
    max-width: 100%;
    display: none;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
}


edml-expression>input.active{
    display: inline-block;
}


.edml-expression-output{
    min-width: 2em;
    width: 2em;
    max-width: 100%;
    width: auto;
    display: none;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
    position: absolute;
    z-index: 100;
    box-shadow:	0 0.125em 0.5em rgba(0, 0, 0, .3), 0 0.0625em 0.125em rgba(0, 0, 0, .2);
    padding: 0.25em;
    overflow: visible;
    margin-left: 1em;
}

.edml-expression-output.nocalculator{
    margin-left: 0px;
}

edml-course.notitlebar .edml-expression-output{
    margin-top: 1.5em;
}



.edml-expression-output.active{
    display: inline-block;
    
    
}

@media print{
    .edml-expression-output{
        display: none!important;
    }
}


.edml-expression-output::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    border: .75em solid transparent;
      border-top-color: transparent;
      border-top-style: solid;
      border-top-width: 0.75rem;
      border-bottom-color: transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625em 0.0625em rgba(0, 0, 0, .1));
    top: -0.6em;
    left: 0.2em;
}


edml-expression.hidden{
    display: none;
}


edml-expression>.edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
}

edml-expression>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-expression>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}

edml-expression > .edml-expression-calcbtn{
    min-width: 1em;
    max-width: 1em;
    width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;

    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    position: absolute;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em 0 0 0.2em;    
    border-width: 1px;
    display: none;
    z-index: 1000;
}

edml-expression > .edml-expression-calcbtn:after{
    content: "E";
    font-family: edmlfont;
    font-size: 1em;
}




edml-expression.showcalculator > .edml-expression-calcbtn{
    display: inline-block;

}

edml-expression.showcalculator>input{
    padding-left: 1.25em;
    width: calc(10em - 1em);

}

edml-expression.nocalculator > .edml-expression-calcbtn{
    display: none;
}


edml-externmedia{
  display: block;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  overflow: auto;
}

edml-externmedia > edml-link{
  padding: 1em;
  border: solid 1px;
  margin: 0.5em;
}


edml-externmedia > iframe{
    border: none;
    visibility: hidden;
    display: inline-block;
    width: 300px; /* standard browser width */
    height: 150px; /* standard browser height */
    overflow: auto;
 }

edml-externmedia > .edml-externmedia-placeholder{
    border: solid 1px lightgray;
    top: calc(50% - 0.5em);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-style: italic;
    color: lightgray;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: contain;

}

edml-externmedia > .edml-externmedia-placeholder > *{
    z-index: 10;
}

edml-externmedia > .edml-externmedia-placeholder > .edml-externmedia-previewpic{
    position: relative;
    display: inline-block;
    z-index: 1;
    left: 0px;
}

edml-externmedia > .edml-externmedia-placeholder > .edml-externmedia-warning{
    color: black;
    background-color: white;
    opacity: 0.5;
    display: inline-block;
}

edml-externmedia > .edml-externmedia-placeholder > .edml-externmedia-button {
    background-color: #48587C;
    color: white;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    border: none;
    font-size: 1em;
    overflow: hidden;
    margin: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-style: normal;
    cursor: pointer;
}

edml-externmedia.preview > .edml-externmedia-placeholder > .edml-externmedia-button {
  position:absolute;
  left: calc(50% - 3em);
}


edml-externmedia[autoload="off"] > .edml-externmedia-placeholder > .edml-externmedia-button {
  position: absolute;
  z-index: 10;
}

edml-externmedia[autoload="off"] > .edml-externmedia-placeholder > .edml-externmedia-previewpic {
  opacity: 0.5;
  z-index: 1;
}


edml-externmedia .edml-externmedia-metadatabtn{
  color: var(--edml-button-color);
  background-color: var(--edml-button-background);
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  border-radius: 0.6125em;
  margin-left: 1em;
  display: inline-block;
  text-align: center;
}

edml-externmedia.showmeta .edml-externmedia-metadatabtn{
  position: absolute;
  right: 0px;
}


edml-externmedia .edml-externmedia-metadatabtn:after{
  content: "i";
}

edml-externmedia .edml-externmedia-metadatabtn:hover{
  color: var(--edml-button-hovercolor);
  background-color: var(--edml-button-hoverbackground);
}



edml-externmedia > .edml-externmedia-placeholder > .externmedialoader {
    display: inline-block;
    position: relative;
    width: 110px;
    min-height: 40px;
    z-index: 10;
  }

  edml-externmedia.preview > .edml-externmedia-placeholder > .externmedialoader {
    display: inline-block;
    position: absolute;
    width: 110px;
    min-height: 40px;
    z-index: 10;
    left: calc(50% - 3em);
  }


  edml-externmedia > .edml-externmedia-placeholder > .externmedialoader div {
    display: inline-block;
    position: relative;
    left: 0px;
    width: 16px;
    background: #48587C;
    animation: externmedialoader 2s cubic-bezier(0, 0.25, 0.25, 1) infinite;
  }
  edml-externmedia > .edml-externmedia-placeholder > .externmedialoader div:nth-child(1) {
    left: 0px;
    animation-delay: -1s;
  }
  edml-externmedia > .edml-externmedia-placeholder > .externmedialoader div:nth-child(2) {
    left: 20px;
    animation-delay: -0.5s;
  }
  edml-externmedia > .edml-externmedia-placeholder >.externmedialoader div:nth-child(3) {
    left: 40px;
    animation-delay: 0;
  }



  @keyframes externmedialoader {
    0% {
      top: 0px;
      height: 20px;
    }
    50%, 100% {
      top: 0px;
      height: 25px;
    }
  }
  
  @media print{
    edml-externmedia > .edml-externmedia-placeholder > .edml-externmedia-button{
      display: none;
    }

}





edml-feedback{
    background-color: #e8f4ff;
    display: none;
    padding: 0.5em;
    margin-top: 1em;
}

edml-feedback.show{
    display: block;
}
edml-figureblock{
    /*display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%!important;
    overflow: auto;
    width: auto!important;
    height: auto!important;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
   
}
edml-flex{
    display: flex;
    max-width: 100%;  
    overflow: auto;
}


edml-flex[flexdirection="row"]{    
    flex-direction: row;      
}

edml-flex[flexdirection="rowreverse"]{
    flex-direction: rowreverse;
}

edml-flex[flexdirection="column"]{
    flex-direction: column;
}


edml-flex[flexdirection="columnreverse"]{
    flex-direction: column-reverse;
}

edml-flex[flexwrap="nowrap"]{
    flex-wrap: nowrap;
}
 
 
edml-flex[flexwrap="wrap"]{
    flex-wrap: wrap;
}

edml-flex[flexwrap="wrapreverse"]{
    flex-wrap: wrap-reverse;
}

edml-flex[rowgap]{
    row-gap: attr(rowgap); /*experimental*/
}

edml-flex[columngap]{
    column-gap: attr(columngap); /*experimental*/
}

 
 
edml-flex[justifycontent="flexstart"]{
    justify-content: flex-start;
}

edml-flex[justifycontent="flexend"]{
    justify-content: flex-end;
}

edml-flex[justifycontent="center"]{
    justify-content: center;
}

edml-flex[justifycontent="spacebetween"]{
    justify-content: space-between;
}

edml-flex[justifycontent="spacearound"]{
    justify-content: space-around;
}

edml-flex[justifycontent="spaceevenly"]{
    justify-content: space-evenly;
}



edml-flex[alignitems="stretch"]{
    align-items: stretch;
}

edml-flex[alignitems="flex-start"]{
    align-items: flex-start;
}


edml-flex[alignitems="flexend"]{
    align-items: flex-end;
}

edml-flex[alignitems="center"]{
    align-items: center;
}

edml-flex[alignitems="baseline"]{
    align-items: baseline;
}

edml-flex[alignitems="firstbaseline"]{
    align-items: first baseline;
}

edml-flex[alignitems="lastbaseline"]{
    align-items: last baseline;
}

edml-flex[alignitems="start"]{
    align-items: start;
}

edml-flex[alignitems="end"]{
    align-items: end;
}


edml-flex[aligncontent="normal"]{
    align-content: normal;
}

edml-flex[aligncontent="flexstart"]{
    align-content: flex-start;
}

edml-flex[aligncontent="flexend"]{
    align-content: flex-end;
}

edml-flex[aligncontent="center"]{
    align-content: center;
}

edml-flex[aligncontent="spacebetween"]{
    align-content: space-between;
}

edml-flex[aligncontent="spacearound"]{
    align-content: space-around;
}

edml-flex[aligncontent="space-evenly"]{
    align-content: space-evenly;
}

edml-flex[aligncontent="stretch"]{
    align-content: stretch;
}

edml-flex[aligncontent="start"]{
    align-content: start;
}

edml-flex[aligncontent="end"]{
    align-content: end;
}

edml-flex[aligncontent="baseline"]{
    align-content: baseline;
}

edml-flex[aligncontent="firstbaseline"]{
    align-content: first baseline;
}

edml-flex[aligncontent="lastbaseline"]{
    align-content: last baseline;
}

edml-flexitem{
    overflow: hidden;
}

edml-flexitem[flexshrink]{
    flex-shrink: attr(flexshrink); /*experimental*/
}

edml-flexitem[flexgrow]{
    flex-grow: attr(flexgrow); /*experimental*/
}

edml-flexitem[flexbasis]{
    flex-basis: attr(flexbasis); /*experimental*/
}

edml-flexitem[alignself]{
    align-self: attr(alignself); /*experimental*/
}

edml-flexitem[order]{
    order: attr(order); /*experimental*/
}

/*edml-flex[justifycontent="center"] > emdl-flexitem{
    min-width: 0px;
}*/
edml-flipcardview{
    background-color: beige;
    min-width: 225px;
    min-height: 225px;
    max-height: 225px;
    max-width: 225px;
    padding: 2.25em;
    border: solid 1px rgb(185, 185, 174);
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    margin-top: 0.25em;
    margin-bottom: 1em;
}

edml-flipcardview.flipped{
    direction: rtl;
    background-color: rgb(226, 226, 198);
    transform: rotateY(180deg);
}

edml-flipcardview.flipped > *{
    transform: rotateY(180deg);
    direction: ltr;
}

edml-flipcardview > *:nth-child(2){
    display: none;
}

edml-flipcardview > *:nth-child(1){
    display: block;
}

edml-flipcardview.flipped > *:nth-child(2){
    display: block;
}

edml-flipcardview.flipped > *:nth-child(1){
    display: none;
}


edml-flipcardview .edml-flipcardview-dogear{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0em 2em 2em;
    border-color: white white white rgb(226, 226, 198);
    position: absolute;
    right: -1px;
    bottom: -1px;
    box-shadow: -1px -1px rgb(185, 185, 174);

}

edml-flipcardview.flipped .edml-flipcardview-dogear{
    transform: unset;
}

edml-flipcardview.flipped .edml-flipcardview-dogear{
    border-color: white white white rgb(226, 226, 198);
}

edml-flipcardview .edml-flipcardview-dogear:hover{
    border-color: white white white rgb(196, 196, 185);
}

edml-flipcardview.flipped .edml-flipcardview-dogear{
    border-color: white white white beige;
}


/*
edml-flipcardview .edml-flipcardview-btn{
    display: inline-block;
    text-align: center;
    line-height: 1.5em;
    height: 1.5em;
    position: absolute;
    bottom: 0.25em;
    width: 2.5em;
    left: calc(50% - 2em);
    border-radius: 0.25em;
    background-color: lightgray;
}

edml-flipcardview .edml-flipcardview-btn:after{
    content: "\21AA";
    width: 1em;
    height: 1em;
    font-size: 1em;
}*/
edml-formulabox{
    background-color: #a4bed0;
    background-image: linear-gradient(#a4bed0, #9abed8);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-left: 3em;
    padding-top: 0em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-formulabox:before{
    content: ",";
    font-family: edmlfont;
    background-size: contain;
    font-weight:bold;
    width: 1em;
    height: 1.25em;
    top: 0px;
    font-size: 1.25em;
    padding-left: 0.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #6f8ca1;
    border-right: solid 2px #6f8ca1;
    border-radius: 0 0 5px 0;


}

edml-formulabox.active{
    display: block!important;
}

@media print {
    edml-formulabox {
      break-inside: avoid;
    }
}
edml-groupview {
    display: block;
    min-height: 1em;
    position: relative;
    margin-bottom: 0.2em;
    padding: 0.25em;
}

edml-page > edml-groupview{
    margin-bottom: 1em;
    margin-top: 0.5em;
}





/* Accordionview boxpanel */
edml-accordionview > edml-groupview {
    display: block;
    overflow: hidden;
    margin-top: 0.25em;
    padding: 0px;
    padding-bottom: 0.5em;
    

}

edml-accordionview > edml-groupview > *:not(edml-title){
    display: none;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

edml-accordionview > edml-groupview > *:nth-child(0n+2){
    margin-top: 0.5em;
}



edml-accordionview > edml-groupview.show > *, edml-accordionview > edml-groupview.forceshow > *{
    display: block!important;
}

edml-accordionview > edml-groupview.show, edml-accordionview > edml-groupview.forceshow{
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
}


/* Tabview boxpanel */
edml-tabview > edml-groupview {
    display: block;
    overflow: hidden;
    padding:0px;
}

edml-tabview > edml-groupview > *:not(edml-title){
    display: none!important;
    margin-left: 0.5em;
    margin-right: 0.5em;
}




/* optionalview boxpanel */
edml-optionalview > edml-groupview{
    display: none;
    
}

edml-optionalview.show > edml-groupview, edml-optionalview.forceshow > edml-groupview{
    display: block; 
    min-height: 2em;
    margin-bottom: 0.5em;  
    padding-left: 1.5em;
    margin-right: 1em; 
}








/* carouselview groupview */
edml-carouselview >  edml-groupview{
    display: block;
    visibility: none;
    position: relative;
    margin-left:2em;
    margin-right: 2em;
    opacity: 0;
    transition: opacity 0.5s;
    min-width: calc(100% - 4em);
    max-width: calc(100% - 4em);
    padding-bottom: 1.5em; 
}

edml-carouselview[fixedheight="false"] >  edml-groupview{
    display: none;
    visibility: visible;
}

edml-carouselview > edml-groupview.active{
    display: block;
    visibility: visible;
    opacity: 1;
   
}

edml-carouselview[fixedheight="false"] > edml-groupview.active{
    display: block;
    opacity: 1;   
     min-width: unset;
    max-width: unset;
    position:relative
}


edml-carouselview[direction="horizontal"] > edml-groupview.active {
    margin-left: 2em;
    margin-right: 2em;
}

/*edml-carouselview > edml-groupview.active{
    animation: 0.1s autoplaycarousel linear}
  @keyframes autoplaycarousel {
    0% {margin-right: 100%}
    100% {margin-right: 0%}
  }*/


/* poolview boxpanel */
edml-poolview >  edml-groupview{
    display: none; 
    margin:0px;
    padding:0px;   
}




edml-table edml-headrow{
    display: table-row;
    /*display: flex;*/
    background-color: #3C3C3C;
    color: white;
}

edml-table edml-headrow[valign="top"]{
    vertical-align: top;
}

edml-table edml-headrow[valign="bottom"]{
    vertical-align: bottom;
}

edml-table edml-headrow[valign="middle"]{
    vertical-align: middle;
}


edml-table edml-headrow[minheight]{
    height: attr(minheight);
}

edml-table edml-headrow[fixed="true"]{
    position: sticky;
    top:0px;
    z-index: 100;
}




edml-table[border="false"] edml-headrow {
    border: none;
}
edml-help{
    display: block;
    margin-bottom: 1em;
}

edml-help[to]{
    display: none;
}



edml-help .edml-help-button{
    margin-top:0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 1em;
    border: solid 1px black;
    background-color: #fff;
    border-radius: 5px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    justify-content: center;
    line-height: normal;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform,opacity;
    z-index: 0;
    cursor: pointer;
    
}

edml-help .edml-help-button:before{
    content:"j";
    font-family: edmlfont;
    font-size: 1.125em;
    padding-right: 0.25em;
}

edml-help .edml-help-text{
    display: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}



edml-help .edml-help-text.show, edml-help .edml-help-text.forceshow{
    display: block;
    
}

edml-help .edml-help-text > .edml-helpheader{
    text-align: right;
    font-size: 0.75em;
    
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheaderprev{
    font-family: edmlfont;   
    padding-right: 0.5em; 
    font-size: 1em;
    line-height: 1em;
    display: none;
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheaderprev:after{
    content:"x";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;   
    
    
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheadernext{
    font-family: edmlfont;
    padding-left: 0.5em;
    font-size: 1em;
    display: none;
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheadernext.active{
    display: inline-block;
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheaderprev.active{
    display: inline-block;
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheadernext:after{
    content:"y";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;
    
    
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheaderprev:hover{
    font-size: 1.1em;
}

edml-help .edml-help-text > .edml-helpheader > .edml-helpheadernext:hover{
    font-size: 1.1em;
}


edml-helpbox{
    background-color: #00AA00;
    background-image: linear-gradient(#00AA00,#00C800);
    -webkit-box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    display: block;
    padding-left: 3em;
    color: white;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1.5em;
    font-weight: 500;
    text-shadow: none;
    display: block;

}




edml-helpbox:before{
    content: "k";
    /*background-image: url('./media/infobox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    font-size: 1.5em;
    line-height: 1.5em;    
    left: 0px;
    top: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px white;
    border-right: solid 2px white;
    padding-left: 0.35em;
    border-radius: 0 0 5px 0;
    color: white;
    /*border-right: solid 1px;*/

}


@media print {
    edml-helpbox {
      break-inside: avoid;
    }
}
edml-hint:before{
    font-family: edmlfont;
    content: "V";
    color: #990000;
    padding-right: 0.5em;
    font-size: 1.5em;
    display: inline-block;
}

edml-course[alevel="2"] edml-hint:before{
    content:" ";
}

edml-hint{
    display: block;
    background-color: rgba(210, 210, 210, .15);  
    backdrop-filter: blur(5px); 
    padding: 0.25em;
    border-radius: 0.25em;
    
}




edml-hintbox{
    background-color: #F4F4F4;
    background-image: linear-gradient(#F4F4F4,#FEFEFE);
    -webkit-box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    display: block;
    padding-left: 3em;
    color: black;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1.5em;
    font-weight: 500;
    text-shadow: none;
    display: block;

}



edml-hintbox:before{
    content: "V";
    color: #990000;
    /*background-image: url('./media/infobox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    line-height: 1.5em;
    font-size: 1.5em;
    top: 0px;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #C8C8C8;
    border-right: solid 2px #C8C8C8;
    padding-left: 0.35em;
    border-radius: 0 0 5px 0;
    /*border-right: solid 1px;*/

}


@media print {
    edml-hintbox {
      break-inside: avoid;
    }
}
edml-info:before{
    font-family: edmlfont;
    content: "d";
    color: #E3E300;
    padding-right: 0.5em;
    font-size: 1.5em;
}

edml-info{    
    display: block;
    background-color: rgba(210, 210, 210, .15);
    backdrop-filter: blur(5px);
    padding: 0.25em;
    border-radius: 0.25em;
}


/* STANDARD VIEW */
edml-infobox{
    background-color: #4A93DB;
    background-image: linear-gradient(#4A93DB,#84B0DB);
    -webkit-box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    display: block;
    padding-left: 3em;
    color: white;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1.5em;
    font-weight: 500;
    text-shadow: none;
    display: block;

}



edml-infobox:before{
    content: "c";
    /*background-image: url('./media/infobox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px white;
    border-right: solid 2px white;
    padding-left: 0.35em;
    border-radius: 0 0 5px 0;   
    line-height: 1.5em;
    /*border-right: solid 1px;*/

}


@media print{
    edml-infobox{
        page-break-inside: avoid;
    }
}

edml-initalcontent{
    display: none!important;
}
edml-input{
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;    
    vertical-align: middle;
    position: relative;
}

edml-input.edmlinput-exponential{
    vertical-align: bottom;
}

edml-input.edmlinput-codeenvironment{
    display: block;
}

edml-input.hidden{
    display: none;
}
edml-inputblock{
    display: block;
}

edml-inputblock[align="left"]{
    text-align: left;
}

edml-inputblock[align="center"]{
    text-align: center;
}

edml-inputblock[align="right"]{
    text-align: right;
}


edml-inputblock > .edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

edml-inputblock >.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-inputblock >.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}


edml-input > edml-interval:nth-of-type(n+2){
    display: none;
}

edml-interval > .edml-interval-leftclosure{
    background-color: #E3E3E3;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

edml-interval > .edml-interval-rightclosure{
    background-color: #E3E3E3;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

edml-interval > .edml-interval-rightclosure.disabled{
    color: #6e6a6ac7;

}

edml-interval > .edml-interval-leftclosure.disabled{
    color: #6e6a6ac7;

}


edml-interval > .edml-interval-leftclosure:not(.disabled):hover{
    background-color: rgb(202, 202, 202);
    cursor: pointer;
}

edml-interval > .edml-interval-rightclosure:not(.disabled):hover{
    background-color: rgb(202, 202, 202);
    cursor: pointer;
}

edml-input[solved="false"] > edml-interval > .edml-interval-leftclosure:not(.disabled){
    background-color: #FFC2C2;
}

edml-input[solved="false"] > edml-interval > .edml-interval-rightclosure:not(.disabled){
    background-color: #FFC2C2;
}

edml-input[solved="true"] > edml-interval > .edml-interval-leftclosure:not(.disabled){
    background-color: #7FBC7F;
}

edml-input[solved="true"] > edml-interval > .edml-interval-rightclosure:not(.disabled){
    background-color: #7FBC7F;
}


edml-interval.hidden{
    display: none;
}



edml-input.disabled edml-interval > .edml-interval-leftclosure{
    color: #6e6a6ac7;
    pointer-events: none;

}



edml-input.disabled edml-interval > .edml-interval-rightclosure{
    color: #6e6a6ac7;
    pointer-events: none;

}
edml-item{
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}


/* order items */
edml-order > .edml-order-dropareas > .edml-order-droparea > edml-item{
    display: block;
    padding: 0.5em;
    border: solid 1px lightgray;
    background-color: white;
    border-radius: 5px;

}

edml-order > .edml-order-dropareas > .edml-order-droparea > edml-item.ondrag{
    transform:translateX(-9999px);
   /* background-color: lightgray;   */

}

edml-order > .edml-order-dropareas > .edml-order-droparea > edml-item.ondrag.touch{
    transform:none;
   /* background-color: lightgray;   */

}


edml-order > .edml-order-dropareas > .edml-order-droparea > edml-item.selected{
    background-color: var(--edml-order-selected-background);
    color:   var(--edml-order-selected-color); 

}



/* order items END */

/* matching items */

edml-matching > edml-dragitems > edml-item, edml-matching > edml-dropitems > edml-item > edml-item {
    display: block;
    position: relative;
    padding: 0.5em;
    border: solid 1px rgb(206, 196, 196);
    background-color: white;
    margin-bottom: 1em;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
    color: black;
}

edml-matching > edml-dropitems > edml-item{
    display: block;
    position: relative;
    border: solid 1px black;
    padding: 1em;
    margin-bottom: 1em;
    background-color: gray;
    z-index: 1;
    color: white;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;*/
    box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}



edml-matching > edml-dropitems > edml-item.dragover{
    background-color: rgb(47, 47, 51);
}

edml-matching > edml-dragitems > edml-item.clicked{
    background-color: rgb(73, 73, 95);
    color: white;
}

edml-matching > edml-dragitems > edml-item.dragging{
    transition: 0.01s;
    transform: translateX(-9999px);
}

edml-matching > edml-dragitems > edml-item.hide{
    transform: translateX(99999999px);

}



edml-matching > edml-dropitems >edml-item[solved="false"]:before{
    position: absolute;
    top: 0px;
    left: -1em;
    content: "X";
    font-family: edmlfont;
    color: #FF0000;
    font-weight: bold;
    line-height: 1em;
  /*  border-right: solid 1px white;
    border-radius: 0 0 5px 0px;
    border-bottom: solid 1px white;
    background-color: rgb(188, 188, 188);
    border-style: inset;
    opacity: 50%;*/
}

edml-matching > edml-dropitems >edml-item[solved="true"]:before{
    position: absolute;
    top: 0px;
    left: -1em;
    content: "S";
    font-family: edmlfont;
    color: #00A500;
    font-weight: bold;
    line-height: 1em;
    /*border-right: solid 1px white;
    border-radius: 0 0 5px 0px;
    border-bottom: solid 1px white;
    background-color: rgb(188, 188, 188);
    border-style: inset;
    opacity: 50%;
    */
}

edml-matching > edml-dropitems > edml-item > edml-item[solved="false"]:before{
    background-color: #FF0000;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 25%;
    content: " ";



}

edml-matching > edml-dropitems > edml-item > edml-item[solved="true"]:before{
    background-color: #00A500;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 25%;
    content: " ";
}

edml-item.hidden{
    display: none;
}

edml-linearspan{
    display: inline-block;
}

edml-linearspan > .edml-linearspan-leftsymbol, .edml-linearspan-rightsymbol{
    width: 1em;
    height: 1.5em;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1.5em;
}

edml-linearspan > .edml-linearspan-leftsymbol, .edml-linearspan-rightsymbol{
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    color: black;
    transform-origin: top;
}


edml-linearspan > .edml-linearspan-leftsymbol[type="<"][style]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M26 50L75 0L75 5L26 55Z' fill='black' /><path d='M26 50L75 100L75 95L26 45Z' fill='black' /> </svg>");
}

edml-linearspan > .edml-linearspan-leftsymbol[type="<"],edml-linearspan > .edml-linearspan-leftsymbol[type="<"][style="transform: scale(1, 1.08);"]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M50 50L75 0L75 10L50 60Z' fill='black' /><path d='M50 50L75 100L75 90L50 40Z' fill='black' /> </svg>");
}


edml-linearspan > .edml-linearspan-leftsymbol[type="{"]:before{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1.6em' version='1.1' preserveAspectRatio='none' viewBox='0 0 120 120'><path d='M0,69.1V53.79c4.65-0.04,8.13-1.42,10.49-4.12C12.82,46.96,14,40.87,14,31.41c0-7.22,0.26-12.56,0.81-16.03 c0.52-3.47,1.81-6.39,3.86-8.73c2.05-2.35,4.69-4.03,7.92-5.08C29.81,0.52,34.4,0,40.33,0h3.38v15.31c-6.2,0-9.9,0.63-11.12,1.92 c-1.22,1.27-1.88,3.77-1.96,7.48c-0.26,10.21-0.59,16.86-0.98,19.93c-0.41,3.05-1.35,5.98-2.81,8.77 c-1.46,2.79-4.19,5.47-8.18,8.03c3.8,2.31,6.54,5.06,8.24,8.24c1.72,3.21,2.75,7.81,3.03,13.83l0.96,18.63 c0.39,1.79,1.31,3.14,2.77,4.06c1.46,0.92,4.82,1.37,10.06,1.37v15.31h-3.34c-6.83,0-12.08-0.78-15.81-2.33 c-3.71-1.55-6.39-4.1-8.07-7.63c-1.66-3.55-2.49-9.27-2.49-17.14c0-8.7-0.31-14.26-0.89-16.71c-0.59-2.42-1.74-4.65-3.45-6.67 C7.94,70.36,4.73,69.27,0,69.1L0,69.1z'/></svg>");
    display: block;
    position: relative;
    content: " ";
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}



edml-linearspan > .edml-linearspan-leftsymbol[type="["]:before{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1.6em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M50 0L25 0L25 100L50 100L50 99L35 99L30 99L30 1L50 1Z' fill='black' /></svg>");
    display: block;
    position: relative;
    content: " ";
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

edml-linearspan > .edml-linearspan-rightsymbol[type="]"]:before{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1.6em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M25 0L50 0L50 100L25 100L25 99L45 99L45 99L45 1L25 1Z' fill='black' /></svg>");
    display: block;
    position: relative;
    content: " ";
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

edml-linearspan > .edml-linearspan-rightsymbol[type="}"]:before{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1.6em' version='1.1' preserveAspectRatio='none' viewBox='0 0 120 120'><path d='M115.16,69.1c-4.65,0.04-8.14,1.42-10.49,4.17c-2.33,2.73-3.51,8.77-3.51,18.15 c0,7.26-0.26,12.61-0.76,16.1c-0.52,3.47-1.79,6.39-3.84,8.72c-2.05,2.36-4.71,4.03-7.94,5.08c-3.25,1.05-7.83,1.57-13.76,1.57 h-3.4v-15.31c5.95,0,9.6-0.61,10.93-1.85c1.35-1.24,2.07-3.75,2.16-7.55c0.26-10.93,0.65-17.93,1.18-21.03 c0.55-3.1,1.59-5.98,3.21-8.66c1.59-2.7,4.12-5.04,7.57-7.05c-3.64-2.38-6.19-4.73-7.63-7.02c-1.44-2.31-2.42-4.8-2.92-7.5 c-0.5-2.7-0.89-7.74-1.16-15.09c-0.24-7.35-0.55-11.56-0.9-12.61c-0.33-1.07-1.16-1.98-2.46-2.75c-1.31-0.76-4.62-1.16-9.97-1.16V0 h3.38c6.83,0,12.08,0.79,15.79,2.33c3.71,1.55,6.39,4.1,8.05,7.63c1.66,3.56,2.49,9.27,2.49,17.14c0,9.05,0.33,14.74,0.98,17.08 c0.68,2.36,1.83,4.49,3.53,6.43c1.68,1.94,4.84,2.99,9.49,3.16V69.1L115.16,69.1z' fill='black'/></svg>");
    display: block;
    position: relative;
    content: " ";
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}




edml-linearspan > .edml-linearspan-leftsymbol[type="("]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M75 0C25 25 25 75 70 100L70 100C40 75 40 25 70 10' fill='black' /></svg>");
}

edml-linearspan > .edml-linearspan-rightsymbol[type=")"]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M0 0C50 25 50 75 5 100L5 100C35 75 35 25 5 10' fill='black' /></svg>");
}


edml-linearspan > .edml-linearspan-rightsymbol[type=">"][style]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M50 50L0 0L0 5L50 55Z' fill='black' /><path d='M50 50L0 100L0 95L50 45Z' fill='black' /> </svg>");
}

edml-linearspan > .edml-linearspan-rightsymbol[type=">"], edml-linearspan > .edml-linearspan-rightsymbol[type=">"][style="transform: scale(1, 1.08);"]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M25 50L0 0L0 10L25 60Z' fill='black' /><path d='M25 50L0 100L0 90L25 40Z' fill='black' /> </svg>");
}


edml-linearspan > .edml-linearspan-lefttext{
    display: inline-block;
    position: relative;    
}



edml-linearspan > .edml-linearspan-addbtn.active{
    color: white;
}

edml-linearspan > .edml-linearspan-addbtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-right: 0.5em;
    color: #acacac;
    position: relative;
    vertical-align: top;
    margin-left: 0.25em;
}

edml-linearspan > .edml-linearspan-addbtn.hidden{
    display: none;
}

edml-linearspan > .edml-linearspan-removebtn.hidden{
    display: none;
}

edml-linearspan >  .edml-linearspan-addbtn:before{
    content: "+";
    line-height: 1em;
}

edml-linearspan >  .edml-linearspan-addbtn:hover{
    background-color: #000000;

}



edml-linearspan > .edml-linearspan-emptybtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-right: 0.5em;
    margin-left: 0.5em;
    color: white;
    font-family: edmlfont;
    line-height: 1em;
    vertical-align: top;
    position: relative;
}

edml-linearspan > .edml-linearspan-emptybtn.hidden{
    display: none;
}

edml-linearspan >  .edml-linearspan-emptybtn:before{
    content: "9";
    line-height: 1em;
}

edml-linearspan >  .edml-linearspan-emptybtn:hover{
    background-color: #000000;

}

edml-linearspan >  .edml-linearspan-emptybtn.active{
    background-color: #01133a;

}


edml-linearspan >  .edml-linearspan-removebtn.active{
    color: white;   
}

edml-linearspan >  .edml-linearspan-removebtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-left: 0.5em;
    color: #acacac;
    position: relative;
    margin-right: 0.25em;
    vertical-align: top;
}

edml-linearspan > .edml-linearspan-removebtn.hide{
    visibility: hidden;
}

edml-linearspan > .edml-linearspan-addbtn.hide{
    visibility: hidden;
}

edml-linearspan >  .edml-linearspan-removebtn:before{
    content: "-";
    line-height: 1em;
}

edml-linearspan >  .edml-linearspan-removebtn:hover{
    background-color: #000000;

}


edml-linearspan > .edml-linearspan-enumerationsign{
    padding-left: 0.125em;
    padding-right: 0.125em;
    display: inline-block;
    position: relative;
}

edml-input[solved="true"]:not([check="false"]) > edml-linearspan > .edml-linearspan-emptybtn{
    background-color: var(--edml-solved);
    color: black;
}

edml-input[solved="false"]:not([check="false"]) > edml-linearspan > .edml-linearspan-emptybtn{
    background-color: var(--edml-failed);
    color: black;
}
edml-link{
    font-weight: bold;
    color: #7F98CE;
    display: inline-block;
}

edml-link:hover{
    color: #48587C;
}


edml-infobox edml-link{
    color: #cfdb8c;
}

edml-infobox edml-link{
    color: #abb66c;
}

edml-infobox edml-link{
    color: #008006;
}

edml-infobox edml-link:hover{
    color: #044f08;
}

edml-navigation edml-navitem edml-link{
    padding-left: 0.1em;
}

edml-navigation edml-navitem edml-link a{
    color: black;
    text-decoration: none;
}

edml-navigation edml-navitem.selected edml-link a{
    color: white;
}

edml-navigation edml-navitem.selected:hover edml-link a{
    color: #EFEFEF;
}



edml-link:after{
    content: "\2197";
    border: solid 1px;
    font-size: 0.3em;
    vertical-align: baseline;
    margin-left: 0.25em;
    position: relative;
    display: inline;
    top:-1.5em;
    
}

edml-link[markexternal="false"]:after{
    display: none;
}
edml-list{
    display: block;
    position: relative;
    padding-top: 0.25em;
}

edml-list > edml-listitem > edml-list{
    margin-left: 0em;
}

edml-list[indent]{
    padding-left: attr[indent];
}



edml-list edml-listitem{
   /* display: list-item;
    list-style: decimal;
    list-style-position: inside;*/
    display: block;
    padding-bottom: 0.25em;
    padding-left: 0em;
  
    
}



edml-listitem > edml-list{
    padding-bottom: 0em;
}





.edml-listitem-label{
    display: block;
 /*   position: absolute;  not possible because of 1.1 etc. */
    position: relative;
    line-height: 1em;
    top: 0px;
    left: 0em;
    max-height: 0.1px;
    padding-right: 0.5em;
    width: 1.5em;

}


edml-m{
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    display: inline-flex;
    max-width: 100%;
    padding: 0px;
    margin: 0px;
   /* vertical-align: text-top;*/
    min-height: 1.5em; /* should be same as line-height */
    padding-left: 0.1em;
    padding-right: 0.1em;
    /*align-items: baseline;*/
    min-height: 1em;
    overflow: auto;
}





/*
edml-m[number]:after{
    content: "(" attr(number) ")";
    display: inline-block;
    position: relative;
    right: 0px;
    padding-left: 0.5em;
}

edml-m[display="block"][number]:after{
    /*position: absolute;*/
   /* width: 100%;
    text-align: right;
}

edml-m[number]{
    padding-right: 3em;
}*/

edml-m[display="block"]{
    display: block;
    /*justify-content: center;*/
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

edml-m[display="block"][align="left"]{
    text-align: left;
}

edml-m[display="block"][align="right"]{
    text-align: right;
}

edml-m .edml-m-inner{
    display: inline-flex;
    align-items: end;
    min-height: 1em;
}

edml-m[display="block"][numbered="true"]{
    display: flex;
}

edml-m[display="block"][numbered="true"] > .edml-m-inner{
    display: flex; 
    flex-basis: calc(100% - 3.5em);  
    justify-content: center;  
}

edml-m[display="block"][numbered="true"][align="left"]{
    justify-content: left;
} 

edml-m[display="block"][numbered="true"][align="right"]{
    justify-content: right;
}

edml-m[display="block"][numbered="true"] > .edml-number-numbering{
    display: flex;
    overflow: hidden;  
    justify-content: right;  
    min-width: 3.5em;
    align-items: center;
}

edml-mark{
    display: inline-block;
    max-width: calc(100% - 2em);
}

edml-matches{
    display: none;
}
edml-matching{
    display: flex;
    position: relative;
    justify-content: space-between;
    overflow-y: hidden;
    overflow-x: auto;
    max-width: 100%;
    padding-top: 0.5em;
    padding-bottom: 1em;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

edml-inputblock[solved="false"] > edml-matching{    
    background-color: var(--edml-failed);
}

edml-inputblock[solved="false"] > edml-matching:after{
    content: "X";
    font-family: edmlfont;
    position: absolute;
    bottom: 0px;
    right: 0.25em;
    padding-right: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    color: #FF0000;
    display: inline-block;
    z-index: 100;

}

edml-inputblock[solved="true"] > edml-matching{
   background-color: var(--edml-solved);    
}


edml-inputblock[solved="true"] > edml-matching:after{
    content: "S";
    font-family: edmlfont;
    position: absolute;
    bottom: 0px;
    right: 0.25em;
    padding-right: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    color: #00A500;
    display: inline-block;
    z-index: 100;

}
edml-matrix{
    display: inline-flex;
    flex-direction: column;
    position: relative;
    width: auto;
}

edml-matrix > .em-measure{
    display: inline-block;
    position: relativ;
    min-width: 3em;
    width: 3em;
    max-width: 3em;
    height: 1em;
}


edml-matrix > .edml-matrix-btnrow{
    text-align: center;
    z-index: 10;
    display: inline-block;
    position: static;
    margin-bottom: 0.5em;

}



edml-matrix > .edml-matrix-leftbracket{
    font-size: 1.75em;
    display: inline;
    transform-origin: bottom;
    position: absolute;
    transform: scale(1,1);
    margin-bottom: 1.25em;
    bottom: calc(-7.5%);
    line-height: 1.75em;
    left: 1.25em;

}


edml-matrix > .edml-matrix-rightbracket{
    font-size: 1.75em;
    display: inline;
    transform-origin: bottom;
    position: absolute;
    transform: scale(1,1);
    margin-bottom: 1.25em;
    bottom: calc(-7.5%);
    line-height: 1.75em;    
    right: 1.5em;
}




edml-matrix > .edml-matrix-addcolbtn.active{
    color: black;   
}

edml-matrix > .edml-matrix-addcolbtn.invisible{
    visibility: hidden;
}

edml-matrix > .edml-matrix-addcolbtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-left: 5.5em;
    position: absolute;
    right: 0px;
    top: calc(50% - 1.75em);
    z-index: 10;
}

edml-matrix > .edml-matrix-addcolbtn:before{
    content: "+";
    line-height: 1em;
}

edml-matrix >  .edml-matrix-addcolbtn.active:hover{
    background-color: #E3E3E3;

}

edml-input.disabled edml-matrix > .edml-matrix-addcolbtn{
    visibility: hidden;
}

edml-matrix >  .edml-matrix-removecolbtn.active{
    color: black;
}

edml-matrix >  .edml-matrix-removecolbtn.invisible{
    visibility: hidden; 
}

edml-matrix >  .edml-matrix-removecolbtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
    position: absolute;
    top: calc(50% - 1.75em);
    z-index: 10;
}

edml-matrix > .edml-matrix-removecolbtn:before{
    content: "-";
    line-height: 1em;
}

edml-matrix > .edml-matrix-removecolbtn.active:hover{
    background-color: #E3E3E3;

}

edml-input.disabled edml-matrix > .edml-matrix-removecolbtn{
    visibility: hidden;
}

/* row buttons */
edml-matrix > .edml-matrix-btnrow > .edml-matrix-addrowbtn.active{
    color: black;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-addrowbtn.invisible{
    visibility: hidden;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-addrowbtn{
    background-color: #e9e9ed;  
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-left: 0.5em;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-addrowbtn:before{
    content: "+";
    line-height: 1em;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-addrowbtn.active:hover{
    background-color: #E3E3E3;

}

edml-input.disabled edml-matrix > .edml-matrix-addrowbtn{
    visibility: hidden;
}


edml-matrix > .edml-matrix-btnrow > .edml-matrix-removerowbtn.active{
    color: black;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-removerowbtn.invisible{
    visibility: hidden;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-removerowbtn{
    background-color: #e9e9ed; 
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-removerowbtn:before{
    content: "-";
    line-height: 1em;
}

edml-matrix > .edml-matrix-btnrow > .edml-matrix-removerowbtn.active:hover{
    background-color: #E3E3E3;

}

edml-input.disabled edml-matrix > .edml-matrix-btnrow{
    visibility: hidden;
}


edml-matrix.hidden{
    display: none;
}
edml-metadata{
    display: none;
}
edml-molecular{
    display: flex;
    position: relative;
}

edml-molecular > .edml-molecular-input{
    min-width: 2em;
    width: 2em;
    max-width: 4em;
    width: auto;
    display: inline-block;
    background-color: white;
    border: solid;
    border-width: 1px;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
    min-width: 6em;
    min-height: 2em;
    
}


edml-molecular > .edml-molecular-input:focus{
    outline: none;
}

edml-molecular > .edml-molecular-input > .sub{
    vertical-align: sub;
    display: inline-block;
}

edml-molecular > .edml-molecular-input > .sup{
    vertical-align: super;
    display: inline-block;
    font-size: small;
}

edml-molecular > .edml-molecular-input > br{
    display: none;
}


edml-input[solved="true"] > edml-molecular> .edml-molecular-input{
    background-color: #7FBC7F;
}

edml-input[solved="false"] > edml-molecular> .edml-molecular-input{
    background-color: #FFC2C2;
}


edml-molecular>.edml-solutionhint-btn{
    min-width: 1em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    height: 2.25em;
}

edml-molecular>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-molecular>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
    top: 0.5em;
}


edml-matrix > edml-matrixrow{
    display: inline-block;
    margin-left: 3em;
    margin-right: 3em;
    margin-top: 0.5em;
    white-space: nowrap;
    width: auto;
}

edml-matrix > edml-matrixrow.hidden{
    display: none;
}
edml-navigation .edml-navigation-toolbar .edml-arrow-left:after{
    font-family: edmlfont;
    content: 'Q';
}

edml-navigation .edml-navigation-toolbar .edml-arrow-right:after{
    font-family: edmlfont;
    content: 'R';
}

edml-navigation .edml-navigation-toolbar .edml-arrow-chapter-left:after{
    content: "A";
    font-family: edmlfont;
}

edml-navigation .edml-navigation-toolbar .edml-arrow-chapter-right:after{
    content: "B";
    font-family: edmlfont;
}



edml-navigation .edml-navigation-toolbar{
    z-index: 1000;
    height: 2em;
    background-color: white;
    display: block;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    position: sticky;
    height: 3em;
    
    
}

edml-navigation .edml-navigation-toolbar.hidden{
    display: none;
}

edml-navigation .edml-navigation-btncontainer{
    max-width: calc(300px - 3em);
    display: block;
    overflow-x: auto;
    float: left;
    height: 3em;
    width: calc(300px - 3em);
    position: relative;

}

edml-navigation .edml-navigation-toolbar.editmode{
    height: 3em;
}





edml-navigation{
    display: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
    min-width: 15em;
    position: fixed;
    height: 100%;
    min-height: calc(100% - 5em);
    max-height: calc(100% - 5em);
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    overflow: auto;
    box-shadow: 5px 0px 20px silver;
    left: -0.2em;
    padding-left: 0em;
    margin-top: 0.5em;
    border-radius: 5px;
    z-index: 200;
    background-color: white;
    top: inherit;
    z-index: 21474830;
    padding-bottom: 1em;
}


edml-navigation.static.show{
   box-shadow: none;

   border-right: 3px groove #DCDCDC;
   border-radius: 0px;
   margin:0px;
   padding:0px;
   background-color: #f8f9fa;
   min-height: calc(100% - 4em);
    max-height: calc(100% - 4em);
}

edml-navigation.static.hide{
    box-shadow: none;
    border-right: 3px groove #DCDCDC;
    border-bottom: 3px groove #DCDCDC;
    border-radius: 0px;
    background-color: #f8f9fa;
    margin:0px;
    padding:0px;    
}

edml-navigation.hide{
    transition: 1s;
    left: calc(2em - 300px);
    height: 1.5em;
    min-height: 1.5em!important;
    overflow: hidden;
    max-height: 1.5em;
    padding: 0px;
}






edml-navigation.static.show~edml-pages{
    margin-left: 300px!important;
}



edml-navigation.active{
    display: block;
}




edml-navigation.show{
    transition: 1s;
    left: -0.2em;
    /*max-height: calc(100vh - 8em);*/
    /*height: 100%;*/
}


edml-navigation .edml-navigation-minmaxcontainer{
    width: 1.5em;   
    height: 2em;
    float: right;
    z-index: 1000;
}


edml-navigation .edml-navigation-btnFixed{
    padding-top: 0.5em;
    min-height: 1em;
    color: var(--edml-button-background);
    top: -0.25rem;
    position: absolute;
    max-width: 1.25em;
    width: 1.5em;
    text-align: center;
    margin-top: 2em;
}

edml-navigation .edml-navigation-btnFixed:after{
    content: ";";
    font-family: 'edmlfont';
    font-size: 1.5em;
}

edml-navigation .edml-navigation-btnFixed.fixed:after{
    content: ":";
}

edml-navigation .edml-navigation-btnFixed:hover{
    background-color: transparent;
    color: var(--edml-button-hoverbackground);
}

edml-navigation .edml-navigation-btnMin{
    padding-top: 0.5em;
    min-height: 2em;
    color: var(--edml-button-background);
    top: -0.25rem;
    position: absolute;
    max-width: 1.5em;
    width: 1.5em;
    text-align: center;
}

edml-navigation .edml-navigation-btnFixed.hide{
    display: none;
}

@container edmlplayer (min-width: 1500px) {
    edml-navigation .edml-navigation-btnFixed{
        display: none;
    }

}



edml-navigation .edml-navigation-btnMin.hide{
    display: none;
}

edml-navigation .edml-navigation-btnMin.show{
    display: inline-block;
}

edml-navigation .edml-navigation-btnMin:after{
    content: "Q";
    font-family: 'edmlfont';
    font-size: 1em;
}

edml-navigation .edml-navigation-btnMin:hover{
    background-color: transparent;
    color: var(--edml-button-hoverbackground);
    cursor: pointer;
}

edml-navigation .edml-navigation-btnMax{
    float: right;
    color: var(--edml-button-background);
    min-height: 1.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    display: none;
    top: -0.25rem;
    position: relative;
    right: 0.25rem;
    width: 1.25em;
    text-align: right;
}

edml-navigation .edml-navigation-btnMax:hover{
    background-color: transparent;
    color: var(--edml-button-hoverbackground);
    cursor: pointer;
}

edml-navigation .edml-navigation-btnMax.hide{
    display: none;
}

edml-navigation .edml-navigation-btnMax.show{
    display: inline-block;

}

edml-navigation .edml-navigation-btnMax:after{
    content: "R";
    font-family: 'edmlfont';
    font-size: 1em;
}

edml-navigation .edml-navigation-btnAddPage{
    left: 0.5em;
}

edml-navigation .edml-navigation-btnAddPage:before{
    content: "K";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.35em;
    font-size: 1.5em;

}

edml-navigation .edml-navigation-btnLevelDown{
    left: 3em;
}

edml-navigation .edml-navigation-btnLevelDown:before{
    content: "T";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.35em;
    font-size: 1.5em;

}

edml-navigation .edml-navigation-btnLevelUp{
    left: 5.5em;
}

edml-navigation .edml-navigation-btnLevelUp:before{
    content: "U";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.35em;
    font-size: 1.5em;

}

edml-navigation .edml-navigation-btnLevelLeft{
    left: 8em;
}

edml-navigation .edml-navigation-btnLevelLeft:before{
    content: "Q";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.3em;
    font-size: 1.25em;

}

edml-navigation .edml-navigation-btnLevelRight{
    left: 10.5em;   
}

edml-navigation .edml-navigation-btnLevelRightIcon:before{
    content: "R";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.8em;
    font-size: 1.25em;
}




edml-navigation .edml-navigation-btnAccess01{  
    left: 6.5em;
    top:0px;
}

edml-navigation .edml-navbtn > .edml-navigation-btnAccess01Icon:before{
    content: "u";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    left: 0.35em;
    font-size: 1.5em;
}



edml-navigation .edml-navigation-btnAccess02{
    left: 4.25em;
    
}

edml-navigation .edml-navbtn > .edml-navigation-btnAccess02Icon:before{
    content: "z";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}


edml-navigation .edml-navigation-btnAccess03{
    left: 10.5em;
    
}

edml-navigation .edml-navbtn > .edml-navigation-btnAccess03Icon:before{
    content: "!";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}


edml-navigation .edml-navigation-btnAccess04{
    left: 13em;    
    margin-right: 0.25em;
    
}

edml-navigation .edml-navbtn > .edml-navigation-btnAccess04Icon:before{
    content: '"';
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}


edml-navigation .edml-navigation-btnSearch{
    left: 0.5em;
}


edml-navigation .edml-navbtn > .edml-navigation-btnSearchIcon:before{
    content: "t";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}




edml-navigation .edml-navbtn{
    color: transparent;
    background-color: var(--edml-button-background);
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
}

edml-navigation .edml-navbtn:hover{
    background-color: var(--edml-button-hoverbackground);
    color: transparent;
    cursor: pointer;
}


edml-variant.forceshow > edml-navigation{
    display: block!Important;
}


/* for learnpath */
edml-navigation.learnpath > edml-navlist{
    display: none;
}

edml-navigation.learnpath > edml-navlist:nth-of-type(1){
    display: block;
}




edml-navitem .edml-navigation-backbutton{
    display: none;
}

edml-navitem.learnpath .edml-navigation-backbutton{
    display: inline-block;
}

edml-navigation .edml-navigation-backbutton{
    color: white;
    background-color: var(--edml-button-background);
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    margin-top: 1.5em;
}

edml-navigation .edml-navigation-backbutton:hover{
    background-color: var(--edml-button-hoverbackground);
    color: var(--edml-button-hovercolor);
}

edml-navigation .edml-navigation-backbutton:after{
    content: "\2011";
    font-family: edmlfont;
    font-size: 1.125em;

}

edml-navigation.hidden{
    display: none;
}


@media print{
    edml-navigation.active{
        display: none;  
    }

}






edml-navitem{
    display: block;
    font-family: sans-serif;
    font-size: 1em;
    line-height: 2em;  
    font-weight: normal;
    white-space: normal;
    color: var(--edml-navitem-color);
    position: relative;
    max-width: 100%;
}


edml-navigation.learnpath edml-navitem{
    margin-bottom: 0.75em;
}




edml-navitem.hidden{
    display: none;
}

edml-navitem[visible="false"]{
    display: none;
    color: lightgray;
}

edml-navigation edml-navitem{
    cursor: pointer;
}



edml-navlist > edml-navitem.hover > .edml-navitem-label{
    /*font-weight: bold;*/
    color: var(--edml-navitem-hovercolor);
}

edml-navlist > edml-navitem.learnpath.hover > .edml-navitem-label{
    /*font-weight: bold;*/
    color: transparent;
}

edml-navlist > edml-navitem > .edml-navlist-chevron:hover{
    /*font-weight: bold;*/
    color: var(--edml-navitem-hovecolor);
}


edml-navlist > edml-navitem.hover.selected > .edml-navitem-label{
    /*font-weight: bold;*/
    color: white;
}


edml-navlist > edml-navitem.hover.selected > .edml-navlist-chevron{
    color: white;
}

edml-navitem > .edml-navitem-label{
    display: inline-block;
  /*  position: absolute;*/
    left: 0em;    
    vertical-align: top;
}

edml-navitem.learnpath > .edml-navitem-label{
    color: transparent;
}


edml-navlist > edml-navitem > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
}


edml-navitem.selected{
    background-color: var(--edml-navitem-background);
    /*background: linear-gradient(#48587C 2em, transparent 0em);*/
    color: var(--edml-navitem-selectedcolor);
}

edml-navitem.selected:hover{
    background-color: var(--edml-navitem-selectedbackground);
    /*background: linear-gradient(#48587C 2em, transparent 0em);*/
    color: white;
}



edml-navitem.selected edml-navitem{
    color: var(--edml-navitem-color);
}

/*dml-navitem:before{
   /* content:attr(alabel);
    padding-right: 0.25em;
}*/

/*edml-navitem:before{    
    content: counters(navitem,var(--edmlnavsep)) var(--edmllastnavsep);
    counter-increment: navitem;
    padding-right: 0.25em;
} */

edml-navitem > .edml-navlist-chevron{
    padding-left: 0.5em;
    padding-right: 0.5em;
}


edml-navitem.open > .edml-navlist-chevron.active:after{
    border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	top: 0.85em;
	position: relative;
    /*position: absolute;
    left: calc(100% - 1.5em - 0.15em);*/
	
    /*transform: rotate(-45deg);*/
    transform: rotate(-225deg);
    top: 0.65em;
	vertical-align: top;
	width: 0.45em;
	/*margin-left: 0.5em;*/
    /*margin-right: 0.5em;
    float: right;
    */
}

edml-navitem.close > .edml-navlist-chevron.active:after{
    border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	top: 0.65em;
	position: relative;
   /* position: absolute;
    left: calc(100% - 1.5em - 0.15em);*/
	transform: rotate(+45deg);
    left: 0em;
	vertical-align: top;
	width: 0.45em;
	/*margin-left: 0.5em;*/
    /*margin-right: 0.5em;
    float: right;
    */
}

edml-navitem.close > edml-navlist{
    display: none;
}

edml-variant.forceshow > edml-navigation edml-navitem{
    display: block!important;
}

edml-navigation.learnpath edml-navitem{
    margin-left: 0px!important;
}

edml-navigation edml-navitem.learnpath > edml-navlist{
    display: none;
}

edml-navigation edml-navitem.learnpath > .edml-navlist-chevron{
    display: none;
}

edml-navigation.learnpath .edml-navitem-label{
    display: none;
}

edml-navitem.learnpath > .edml-navitem-label{
    display: none;
}







edml-navlist{
    display: block;   
    background-color: white;
}

edml-navlist.hide{
    display: none;       
}


edml-variant.forceshow > edml-navigation edml-navlist{
    display: block!important;
}

edml-navigation > edml-navlist{
    padding-left: 0.6em;
    padding-top: 1em;
}

@container edmlplayer (min-width: 1500px) {

    edml-navigation > edml-navlist{
        padding-top: 0em;
    }
}



/*edml-course.nofooter edml-navlist{
    min-height: calc(100% - 3.5em);
    max-height: calc(100% - 3.5em);
}

edml-course.notitlebar edml-navlist{
    min-height: calc(100% - 2.5em);
    max-height: calc(100% - 2.5em);
}

edml-course.notitlebar.nofooter edml-navlist{
    min-height: calc(100% - 1em);
    max-height: calc(100% - 1em);
}



edml-course.nofooter edml-navlist.static{
    min-height: calc(100% - 2.5em);
    max-height: calc(100% - 2.5em);
}

edml-course.notitlebar edml-navlist.static{
    min-height: calc(100% - 1.5em);
    max-height: calc(100% - 1.5em);    
}

edml-course.notitlebar.nofooter edml-navlist.static{
    min-height: calc(100%);
    max-height: calc(100%);
}

edml-navlist.static.show{
   box-shadow: none;
  
   border-right: 3px groove #DCDCDC;
   border-radius: 0px;
   margin:0px;
   padding:0px;
   background-color: #f8f9fa;
   min-height: calc(100% - 4em);
    max-height: calc(100% - 4em);
}

edml-navlist.static.hide{
    box-shadow: none;
    border-right: 3px groove #DCDCDC;
    border-bottom: 3px groove #DCDCDC;
    border-radius: 0px;
    background-color: #f8f9fa; 
    margin:0px;
    padding:0px;     
    overflow: hidden;
}

edml-navlist.hide{
    transition: 1s;
    left: calc(2em - 300px);
    height: 1.5em;
    min-height: 1.5em!important;
    overflow: hidden;
}



edml-navlist.static.show edml-navlist-inner{
    background: transparent;
}

edml-navlist.static.show~edml-pages{
    margin-left: 300px!important;
}






edml-navlist.active{
    display: block;
}




edml-navlist.show{
    transition: 1s;
    left: -0.2em;
}






edml-navlist .edml-navlist-content{
    height: 100%;
}

edml-navlist .edml-navlist-inner{
    margin-right: 0.5em;
    overflow: auto;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    margin-top: 1em;
    line-height: 2em;

    height: calc(100% - 3em);
    top: 0em;
    padding-left: 0.5em;
    padding-right: 0.25em;
    flex-direction: column;

}




edml-navlist .edml-navlist-number{
    color: black;
    margin-right: 0.75em;
    padding-left: 0.25em;
}





edml-navlist-content .btn{
    font-size: x-small;
}

*/





edml-note .edml-note-number{
    display: inline-block;
    padding-right: 0.25em;
    color: darkgray;
}

edml-note .edml-note-number:hover{
    font-weight: bold;
    color: white;
    cursor: pointer;
    background-color: black;
}


.edml-note-footnotearea{
    border-top: solid 1px lightgray;
    margin-top: 3em;
}

.edml-note-footnotearea .edml-note-footnotenumber{
    display: inline-block;
    padding-right: 0.25em;
    color: darkgray;
    margin-right: 1em;

}

.edml-note-footnotearea .edml-note-footnotenumber:hover{
    font-weight: bold;
    color: white;
    cursor: pointer;
    background-color: black;
}

.edml-note-footnotearea .edml-note-footnotetext{
    font-size: 0.9em;
}

.edml-note-footnote.hover{
    background-color: rgb(241, 247, 179);
} 

edml-note .edml-note-number.hover{
    background-color: rgb(241, 247, 179);
    color: black;
}

edml-input > edml-number:nth-of-type(n+2){
    display: none;
}


edml-number edml-solution{
    display: none;
}

edml-input.disabled  edml-number > input{
    pointer-events:none;
}



edml-input[solved="true"]:not([check="false"])  edml-number > input{
    background-color: var(--edml-solved);
}

edml-input[solved="false"]:not([check="false"])  edml-number >input{
    background-color: var(--edml-failed);
}

edml-input:not([check="false"]) edml-vector edml-number[solved="true"] >input{
    background-color: var(--edml-solved);
}

edml-input:not([check="false"]) edml-vector edml-number[solved="false"] >input{
    background-color: var(--edml-failed);
}



edml-number.hidden{
    display: none;
}

edml-number{
    position: relative;
    display: inline-flex;
    padding: 0px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin: 0px;
    overflow: hidden;
    vertical-align: bottom;
    flex-wrap: wrap;
    /*margin-top: 0.25em;*/
    margin-left: 0.25em;
    margin-right: 0.25em;
    flex-direction: row;
    

}

edml-number > .edml-number-base{
    background-color: #ced4da;
    font-size: 0.5em;
    position: absolute;
    max-width: 2em;
    width: 2em;
    min-width: 2em;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border-radius: 0.2em 0 0 0.2em;
    border-width: 1px;
    border-color: #ced4da;
    height: 100%;
    padding-top: 0.25em;
}

edml-set > edml-number{
    vertical-align: top;
}

edml-number>input:focus{
    outline: none;
}

edml-number>input{
    min-width: 2em;
    width: 2em;
    max-width: 4em;
    width: auto;
    display: inline-block;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
}


edml-reaction edml-number > input{
    min-height: 2em;
    max-width: 2em;
}


edml-number.nodecimal>input{
    padding-left: 1.5em;
}

edml-number>input.hasunit{
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


edml-intervalinput edml-number{
    max-width: 2.5em;
}









edml-reaction > .edml-reaction-term > edml-input:first-child > edml-number{
    max-width: 2.5em;
}

edml-reaction > .edml-reaction-term > edml-input:first-child > edml-number > input{
    height: 2em;
}




edml-number>.edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
}

edml-number>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-number>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}


edml-set edml-number{
    vertical-align: bottom;;
}
edml-oneoff{
    display: none;
}
edml-objectblock{
    display: none;
}
edml-option{
    display: none;
}



.edmlplayer-optionblock{
    display: inline-block;
    background-color: #F9F9FB;
    position: absolute;
    
    line-height: 2em;
    border: solid 1px #A0A0A0;
    z-index: 100000;
    border-radius: 0px 0px 5px 5px;
}

.edmlplayer-optionblock > edml-option{
    display: block;
    position: relative;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: small;
}

.edmlplayer-optionblock > edml-option:hover{
    background-color: #E0E0E6;
}





edml-optionalview{
    display: block;
    position: relative;
    margin-bottom: 0.5em;
}

edml-optionalview[label]{
    padding-top: 2em;
}

edml-optionalview[label]:before{
    content: attr(label);
    font-weight: bold;
    display: block;
    font-size: 1em;
    position: absolute;
    top:0px;
}

edml-optionalview > button:before{
    content:"2";
    font-size: 1.5em;
    font-family: edmlfont;
    display: inline-block;
    width: 1em;
    height: 1em;
    
}

edml-optionalview.show > button:before{
    content:"s";       
}

edml-optionalview > button{
    margin-top:0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: solid 1px black;
    background-color: #fff;
    border-radius: 5px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    justify-content: center;
    line-height: normal;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform,opacity;
    z-index: 0;
    cursor: pointer;
    font-size: 1em; 
    line-height: 1.5em;            
}

edml-optionalview.forceshow > *{
    display: block!important;
}
edml-order{
    display: block;
    position: relative;
    padding-bottom: 1.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
}

edml-order > .edml-order-dropareas > .edml-order-droparea{
    display: block;
    min-height: 2em;
    padding: 0.25em;
    background-color: rgb(234, 229, 229);
    border: solid 1px black;
    
}

edml-order[solved="false"]{
    background-color: var(--edml-lightred);
}

edml-order[solved="false"]:after{
    content: "X";
    font-family: edmlfont;
    color: var(--edml-red);
    position: absolute;
    bottom: -0.25em;
    right:0.5em;
    font-size: 1.5em;
    line-height: 1.5em;
}

edml-order[solved="true"]{
    background-color: var(--edml-lightgreen);
}

edml-order[solved="true"]:after{
    content: "S";
    font-family: edmlfont;
    color: var(--edml-green);
    position: absolute;
    bottom: -0.25em;
    right:0.5em;
    font-size: 1.5em;
    line-height: 1.5em;
}

/*edml-order > .edml-order-dropareas > .edml-order-droparea:first-child{
    visibility: hidden;
}

edml-order > .edml-order-dropareas > .edml-order-droparea:first-child:hover{
    visibility: visible;
}*/

/*edml-order > .edml-order-dropareas > .edml-order-droparea:last-child{
    visibility: hidden;
}

edml-order > .edml-order-dropareas > .edml-order-droparea:last-child:hover{
    visibility: visible;
}*/

edml-p{
    display: block;
    white-space: normal;
    margin-bottom: 0.25em;
}

edml-p + edml-p{
    margin-top: 0.75em;
    
}




edml-page{
    display: none;;
    position: relative;
    padding-top: 2em;
    padding-bottom: 4em;
    padding-left: 1em;
    padding-right: 1em;    
    display: none;
    max-width: 1200px;
    height: auto;
    position: relative;    
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5em;
    font-size: 1.125em;
    font-family: sans-serif;
    overflow-x: hidden;
    min-height: 2em;
    height: 100%;

}


edml-page > *{
    z-index: 2;
}

edml-page.active, edml-page.forceshow{
    display: block;
    margin-bottom: 2.5em;
}

edml-page .edml-page-learnpathselector{
    display: flex;
    position: relative;
    
}



edml-page .edml-page-learnpathselector-left{
    display: inline-block;
    max-width: 40%;
    min-width: 30%;
    width: auto;
    position: relative;
    margin-right: 8%;
}

edml-page .edml-page-learnpathselector-right{
    display: inline-block;
    visibility: hidden;
    min-width: 50%;
    width: 90%;
    position: relative;
    border: solid 1px black;
    border-radius: 5px;
    padding: 0.25em;
}

edml-page .edml-page-learnpathselector-right.show{
    visibility: visible;
}

edml-page .edml-page-learnpathbutton{
    color: white;
    background-color: var(--edml-button-background);
    min-width: 2em;
    min-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 5px;
    width: 100%;
}

edml-page .edml-page-learnpathbutton.selected{
    background-color: var(--edml-button-hoverbackground);
    box-shadow: rgba(121, 121, 121, 0.4) 5px 5px;
}

edml-page .edml-page-learnpathbutton:hover{
    background-color: var(--edml-button-hoverbackground);
}



edml-page .edml-page-learnpathselector-left{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start
}

edml-page .edml-page-learnpathdescriptiontitle{
    background-color: rgb(218, 218, 218);
    width: 100%;
    height: 2em;
    display: flex;
    position: relative;
    justify-content: space-between;
    margin-bottom: 0.25em;
}

edml-page .edml-page-learnpathtitle-middle{
    font-weight: bold;
    line-height: 2em;
}

edml-page .edml-page-learnpath-startbtn{
    color: white;
    background-color: var(--edml-button-background);
    min-width: 2em;
    min-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 5px;
    margin-left: 2em;
    margin-top: 2em;
}

edml-page .edml-page-learnpath-startbtn:hover{
    background-color: var(--edml-button-hoverbackground);
}

edml-page .edml-page-learnpath-startbtn:before{
    content: "y";
    font-family: edmlfont;
    padding-right: 0.5em;
    padding-left: 0.25em;

}


edml-page .edml-page-learnpath-startbtnsmall{
    color: white;
    background-color: var(--edml-button-background);
    min-width: 1em;
    min-height: 1em;
    display: inline-block;
    line-height: 1.5em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 5px;
    padding-left: 0.25em;
    margin-left: 0.25em;
    margin-top: 0.25em;
    margin-right: 0.25em;
}

edml-page .edml-page-learnpath-startbtnsmall:hover{
    background-color: var(--edml-button-hoverbackground);
}

edml-page .edml-page-learnpath-startbtnsmall:before{
    content: "y";
    font-family: edmlfont;
    padding-right: 0.5em;
    padding-left: 0.25em;

}


edml-page .edml-page-learnpath-viewbtn{
    color: white;
    background-color: var(--edml-button-background);
    min-width: 2em;
    min-height: 2em;
    display: none;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 5px;
    margin-left: 2em;
    margin-top: 2em;
}

edml-page .edml-page-learnpath-viewbtn:hover{
    background-color: var(--edml-button-hoverbackground);
}

edml-page .edml-page-learnpath-viewbtn:before{
    content: "\2011";
    font-family: edmlfont;
    padding-right: 0.5em;
    padding-left: 0.25em;

}

edml-page > .hide{
    display: none;
}

edml-page  .edml-page-spacer{
    margin-top: 3em;
    display: block;
    position: relative;
    min-width: 1px;
    height: 2px;
    width: 50%;
    border-top: dotted 1px gray;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}

edml-page .edml-page-learnpathbackbtn{
    color: white;
    background-color: var(--edml-button-background);
    min-width: 2em;
    min-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 5px;
}

edml-page .edml-page-learnpathbackbtn:hover{
    background-color: var(--edml-button-hoverbackground);
}

edml-page .edml-page-learnpathbackbtn:after{
    content: "\2011";
    font-family: edmlfont;
    font-size: 1.25em;

}






@media (max-width: 1800px) and (min-width: 1550px) {
    edml-page{
        transition: 1s;  
        left: 0px;     
    }

    edml-pages.navextended > edml-page{
       /* left: 300px;
        margin-right: 2em; */
        left: calc(320px - 100% / 2 + 600px);
    }
}

@media (max-width: 1550px){
    edml-page{
        padding-top: 2.5em;

    }
}

@media (max-width: 799px){
    edml-page .edml-page-learnpathselector-right{
        display: none;
    

    }

    edml-page .edml-page-learnpathselector-right.show{
        display: none;
    }

    edml-page .edml-page-learnpathselector.showright .edml-page-learnpathselector-right{
        display: block;
       
    }

    edml-page .edml-page-learnpathselector.showright .edml-page-learnpathselector-left{
        display: none;
    
    }

    edml-page .edml-page-learnpathselector-left, edml-page .edml-page-learnpathselector-right{
        min-width: calc(100% - 1em);
    }

    edml-page .edml-page-learnpath-viewbtn{
        display: inline-block;
    }


}

edml-page.timeout > *:not(.edml-page-timeoutmsg):not(.edmlplayer-arrows){
    display: none!important;
}

edml-page > .edml-page-timeoutmsg{
    margin-top: 2em;
    color: var(--edml-red);
}

edml-page > .edml-page-counter{
    color: var(--edml-lightgray);
    font-size: 0.75em;
}

edml-page > .edml-page-counter.red{
    color: red;
    font-weight: bold;
    animation: blinkerpagecounter 1.6s linear infinite;
}

@keyframes blinkerpagecounter {
    50% {
      opacity: 0.3;
    }
  }


@media print{
    edml-page{
       /* display: block;*/ /* add this to print whole course */ 
        page-break-before:auto;
        page-break-after: always;   
        max-height: 100%;     
        position: static;        
        max-width: unset;
        overflow-y: auto;
    }

    edml-variant.active.print edml-page{
        display: block!important;
    }

    edml-variant.active edml-page.print{
        display: block!important;
    }

}
edml-pages{
    display: block;
    position: relative;
    transition: margin 1s;
    overflow: hidden;
}

@media print{
    edml-pages{
        overflow-y: auto;
        max-width: unset;
        position: static;
    }
}



/* Accordion panel */
edml-accordion > edml-panel {
    display: block; 
    overflow: hidden;  
    margin-top: 0.25em;  
    padding-bottom: 0.5em;
    
}

edml-accordion > edml-panel > *:not(edml-title){
    display: none;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

edml-accordion > edml-panel > *:nth-child(0n+2){
    margin-top: 0.5em;
}



edml-accordion > edml-panel.show > *{
    display: block;
}

edml-accordion > edml-panel.show{
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    background-color: white;
    color: black;
}


/* Tabset panel */
edml-tabset > edml-panel > *:not(edml-title){
    display: none;
    margin-left: 0.5em;
    margin-right: 0.5em;
}





 /*
edml-accordion > edml-panel{
    border: solid 1px #ccc;
    border-radius: 0px 0px 0.5em 0.5em;
    
    width: auto;
    display: block;
    max-height: 0;
	overflow: hidden;
	will-change: max-height;
	transition: all 0.75s ease-out;
	opacity: 0;
	padding-top: 0em;
    padding-bottom: 0em;
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    
}

edml-accordion > edml-panel.show{
    opacity: 1; 
    padding-top: 1em;
    padding-bottom: 1em;
    height: auto;
    
}  */




edml-parameter{
    display: none;
}
edml-parametergroup{
    display: none;
}
/* PICTURE */
edml-picture{
    display: inline-block;
    max-width: 100%;
}

edml-picture[loaded="pending"]:before{
    content: "7";
    font-family: edmlfont;
    color: blue;
    font-size: 2em;
    display: inline;
    padding-top: 0.5em;
    animation:spin 4s linear infinite;

}

edml-picture[loaded="filenotfound"]:before{
    content: "8";
    font-family: edmlfont;
    font-size: 5em;
    display: inline-block;
    position: relative;
    padding-top: 0.5em;
}




edml-picture .edmlplayer-imagecontainer{
    display: inline-block;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    vertical-align: bottom;
}

edml-picture img{
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;

}

@media print{
    edml-picture img{
        max-width: 100%;        
    }
}







edml-poolview{  
    display: block;
    min-height: 1em;
    position: relative;

}

edml-poolview > *:not(.edml-poolview-refreshbtn){
    display: none!important;
}



edml-poolview > *.active{
    display: block!important;
}

edml-poolview > .edml-poolview-refreshbtn{
    display: inline-block;
    position: absolute;
    right: 0px;
    top:0px;
    width: 1em;
    height: 1em;
    background-color: #48587C;
    color: white;
    border-radius: 5px;
    z-index: 100;
}

edml-poolview > .edml-poolview-refreshbtn:after{
    content: "<";
    font-family: edmlfont;
    line-height: 1em;
    padding: 0px;
    font-size: 1.25em;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0.125em;
    position: absolute;
}

edml-poolview > .edml-poolview-refreshbtn.back:after{
    content: "(";
}

edml-poolview > .edml-poolview-refreshbtn:hover{
    background-color: #000000;
}

edml-poolview[label]:before{
    content: attr(label);
    font-weight: bold;
    display: block;
}

edml-poolview > *.forceshow{
    display: block!important;
}

edml-poolview > edml-poolview{
    top: 1.5em;
    padding-bottom: 0.5em;
}



edml-proofbox{
    background-color: #F2F2F2;
    background-image: linear-gradient(#F2F2F2, #F8F8F8);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-proofbox:before{
    content: "l";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #C0C0C0;
    border-right: solid 2px #C0C0C0;
    border-radius: 0 0 5px 0;
    line-height: 1.5em;

}

@media print {
    edml-proofbox {
      break-inside: avoid;
    }
}
edml-input > edml-quantity:nth-of-type(n+2){
    display: none;
}


edml-quantity{
    display: inline-block;
    position: relative;
    vertical-align: text-bottom;
}


edml-quantity > .edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: text-bottom;
    top:0.1em;
}

edml-quantity > .edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-quantity > .edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}
edml-quote{
    quotes: "“" "”" "‘" "’";
}

edml-quote[lang="de"],edml-quote[lang="bg"],edml-quote[lang="da"],edml-quote[lang="et"],edml-quote[lang="ka"],edml-quote[lang="is"],edml-quote[lang="lv"],edml-quote[lang="lt"]{
    quotes: "„" "“" "‚" "‘";
}

edml-quote[lang="fr"],edml-quote[lang="al"], edml-quote[lang="ar"],edml-quote[lang="hy"],edml-quote[lang="eu"],edml-quote[lang="be"],edml-quote[lang="el"]{
    quotes: "«" "»" "‹" "›";
}

edml-quote[lang="he"]{
    quotes: "“" "”" "«" "»"; 
}

edml-quote[lang="ja"]{
    quotes: "「" "」" "『" "』"; 
}

edml-quote[lang="it"]{
    quotes: "«" "»" "«" "»";
}

edml-quote[lang="ca"]{
    quotes: "«" "»" "“" "”";
}

edml-quote[lang="hr"]{
    quotes: "„" "“" "„" "“";
}

edml-quote:before{
    content: open-quote;
}

edml-quote:after{
    content: close-quote;
}




edml-reaction{
    display: inline-flex;
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    text-align: left;
    flex-wrap: nowrap;

}


edml-reaction > .edml-reaction-term{
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

edml-reaction > .edml-reaction-arrow{
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

/*
edml-reaction >  .edml-reaction-educts{
    margin-left: auto;
}

edml-reaction >  .edml-reaction-products{
    margin-right: auto;
}

*/


edml-reaction >  .edml-reaction-educts, edml-reaction >  .edml-reaction-products{
    padding: 0.25em;
    line-height: 2em;
    white-space: nowrap;
}


/*edml-reaction >  .edml-reaction-educts[solved="true"], edml-reaction >  .edml-reaction-products[solved="true"]{
    background-color: rgb(222, 250, 222);
}

edml-reaction >  .edml-reaction-educts[solved="false"], edml-reaction >  .edml-reaction-products[solved="false"]{
    background-color: rgb(251, 209, 209);
}*/


edml-reaction[solved="true"]{
    background-color: rgb(192, 238, 192);
}

edml-reaction[solved="true"]:after{
    content: "S";
    font-family: edmlfont;
    color: #00A500;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-top: 0.5em;
    font-size: 1.5em;
}


edml-reaction[solved="false"]:after{
    content: "X";
    font-family: edmlfont;
    color: #FF0000;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-top: 0.5em;
    font-size: 1.5em;
}

edml-reaction[solved="false"] {
    background-color: bisque;
}

edml-reaction .edml-reaction-button{
    background-color: var(--edml-button-background);
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
    margin-left: 0.5em;
    color: white;
}

edml-reaction .edml-reaction-button:hover{
    background-color: var(--edml-button-hoverbackground);
}

edml-reaction .edml-reaction-button.edml-reaction-addeduct:before{
    content: "+";
    line-height: 1em;
}

edml-reaction .edml-reaction-button.edml-reaction-addproduct:before{
    content: "+";
    line-height: 1em;
}


edml-reaction .edml-reaction-term{
    margin-bottom: 0.25em;
    margin-top: 0.25em;
    display: inline-block;
    position: relative;
}

edml-reaction .edml-reaction-plussign{
    padding-left: 0.25em;
}

edml-reaction .edml-reaction-btndelteterm{
    display: inline-block;
    width: 0.5em;
    height: 0.75em;
    position: relative;
    vertical-align: top;
    top: -0.5em;
    padding-left: 0.25em;
    background-color: rgb(215, 215, 215);
    border-radius: 5em;
    max-width: 0.5em;
    max-height: 0.75em;
    overflow: hidden;
}

edml-reaction .edml-reaction-btndelteterm:hover{
    background-color: rgb(172, 172, 172); 
}

edml-reaction .edml-reaction-btndelteterm:after{
    content: "X";
    font-family: edmlfont;
    font-size: 0.5em;
    color: red;
    top: -1.5em;
    position: relative;
    display: inline-block;
}


.edmlinputblock-reaction > .edml-solutionhint-btn{
    margin-left: 0.5em;
}
edml-ref{
    font-weight: bold;
    color: #7F98CE;
    display: inline-block;
}

edml-infobox edml-ref{
    color: #48587C;
}

edml-ref:hover{
    color: #48587C;
    cursor: pointer;
}

edml-infobox edml-ref:hover{
    color: rgb(42, 48, 62);
}

edml-navitem edml-ref{
    color: black;
    font-weight: normal;
}

edml-navitem > edml-ref{
    white-space:normal; 
    display: inline; 
    padding-left: 0.1em; 
}

edml-navitem[visible="false"] > edml-ref{
    color: lightgray;
   
}

edml-navitem.selected > edml-ref{
    color:white;  
    display: inline;    
    
}


edml-navitem.hover > edml-ref:hover, edml-navitem.hover > edml-ref{
    color: var(--edml-navitem-hovercolor);
   /* font-weight: bold;*/
   
}



edml-navitem.selected > edml-ref:hover,edml-navitem.selected:hover > edml-ref {
    color: white;
   /* font-weight: bold;*/
}

/*** TEST ***/
edml-testitem edml-ref{
    color: black;
    font-weight: normal;
}

edml-testitem > edml-ref{
    white-space:normal; 
    display: inline; 
    padding-left: 0.1em; 
}

edml-testitem[visible="false"] > edml-ref{
    color: lightgray;
   
}

edml-testitem.selected > edml-ref{
    color:white;  
    display: inline;    
    
}


edml-testitem.hover > edml-ref:hover, edml-testitem.hover > edml-ref{
    color: var(--edml-navitem-hovercolor);
   /* font-weight: bold;*/
   
}



edml-testitem.selected > edml-ref:hover,edml-testitem.selected:hover > edml-ref {
    color: white;
   /* font-weight: bold;*/
}

edml-remarkbox{
    background-color: #A8BBB9;
    background-image: linear-gradient(#9EACAC, #A8BBB9);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
    color: black;
   /* border-left: 0.25em solid red;*/

}


edml-remarkbox:before{
    content: "m";
    color: black; 
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #8F9999;
    border-right: solid 2px #8F9999;
    border-radius: 0 0 5px 0;
    line-height: 1.5em;

}

@media print {
    edml-remarkbox {
      break-inside: avoid;
    }
}
edml-table edml-row{
    display: table-row;
    /*display: flex;*/
}



edml-table[border="false"] edml-row {
    border: none;
}

edml-table edml-row.hidden{
    display: none;
}





edml-set{
    /*padding-top: 1em;*/
    margin-bottom: 0.5em;
    display: inline-block;
    position: relative;
}


edml-input[solved="false"] > edml-set{
    background-color: bisque;
}

edml-input[solved="true"] > edml-set{
    background-color:rgb(192, 238, 192);
}

edml-set[solved="false"]{
    background-color: bisque;
}

edml-set[solved="true"]{
    background-color:rgb(192, 238, 192);
}

edml-set > .edml-set-addbtn.active{
    color: white;
}

edml-set > .edml-set-addbtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
    color: #acacac;
}

edml-set > .edml-set-addbtn.hidden{
    display: none;
}

edml-set > .edml-set-removebtn.hidden{
    display: none;
}

edml-set > .edml-set-leftbracket.hidden{
    display: none;
}

edml-set > .edml-set-rightbracket.hidden{
    display: none;
}

edml-set > .edml-set-emptybtn.hidden{
    display: none;
}



edml-set >  .edml-set-addbtn:before{
    content: "+";
    line-height: 1em;
}

edml-set >  .edml-set-addbtn:hover{
    background-color: #000000;

}



edml-set > .edml-set-emptybtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
    margin-left: 0.5em;
    color: white;
    font-family: edmlfont;
    line-height: 1em;
}

edml-set >  .edml-set-emptybtn:before{
    content: "9";
    line-height: 1em;
}

edml-set >  .edml-set-emptybtn:hover{
    background-color: #000000;

}

edml-set >  .edml-set-emptybtn.active{
    background-color: #01133a;

}


edml-set >  .edml-set-removebtn.active{
    color: white;   
}

edml-set >  .edml-set-removebtn{
    background-color: #48587C;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-left: 0.5em;
    color: #acacac;
}

edml-set > .edml-set-removebtn.hide{
    visibility: hidden;
}

edml-set > .edml-set-addbtn.hide{
    visibility: hidden;
}

edml-set >  .edml-set-removebtn:before{
    content: "-";
    line-height: 1em;
}

edml-set >  .edml-set-removebtn:hover{
    background-color: #000000;

}

edml-set > .edml-set-dialog{
    display: none; 
}

edml-set > .edml-set-dialog > .edml-set-dialog-bkgrd{
    background-color: gray;
    opacity: 0.5;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 2147483640;
    display: block;
}


edml-set > .edml-set-dialog > .edml-set-dialog-body{
    display: inline-block;
    border: solid 1px black;
    padding: 1em;    
    min-width: 5vw;
    max-width: 75vw;
    z-index: 2147483647;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f8f9fa;
    box-shadow: 5px 5px 8px 8px #626262;
    border-radius: 0.25em 0.25em 0.25em 0.25em;
    border: 1px solid #000000;
    max-height: 75vh;
    user-select: none;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

edml-set > .edml-set-dialog > .edml-set-dialog-body > .edml-set-dialogelement{
    padding: 0.5em;
    border: solid 1px gray;
    z-index: 2147483647;
    color: black;
    display: block;
    position: relative;
}

edml-set > .edml-set-dialog > .edml-set-dialog-body > .edml-set-dialogelement:hover{
    background-color: #48587C;
    color: white;
}



edml-set > .edml-set-enumerationsign{
    padding-left: 0.5em;
    padding-right: 0.5em;
}

edml-set > .edml-set-leftbracket{
    padding-left: 0.5em;
}

edml-set > .edml-set-rightbracket{
    padding-right: 0.5em;
}

edml-set.hidden{
    display: none;
}


edml-set > .edml-solutionhint-btn{
    min-width: 1em;
    height: 100%;
    background-color: #E9ECEF;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    left: -0.1em;
    position: relative;
    display: inline-block;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    vertical-align: baseline;
    margin-left: 0.5em;
}


edml-set>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-set>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    text-align: center;
    width: 1.5em;
    left: 0px;
}

edml-input.disabled edml-set .edml-set-removebtn{
    display: none;
}

edml-input.disabled edml-set .edml-set-addbtn{
    display: none;
}


edml-settings{
    display: none;
}
edml-solutionhint{
    display: block;
}

edml-solutionhint.hidden{
    display: none;
}

edml-solutionhint[to]{
    display: none;
}



edml-solutionhint .edml-solutionhint-button{
    margin-top:0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: solid 1px black;
    background-color: #fff;
    border-radius: 5px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    justify-content: center;
    line-height: normal;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform,opacity;
    z-index: 0;
    cursor: pointer;
    
}

edml-solutionhint .edml-solutionhint-text{
    display: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}



edml-solutionhint .edml-solutionhint-text.show, edml-solutionhint .edml-solutionhint-text.forceshow{
    display: block;
    
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader{
    text-align: right;
    font-size: 0.75em;
    
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheaderprev{
    font-family: edmlfont;   
    padding-right: 0.5em; 
    font-size: 1em;
    line-height: 1em;
    display: none;
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheaderprev:after{
    content:"x";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;   
    
    
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheadernext{
    font-family: edmlfont;
    padding-left: 0.5em;
    font-size: 1em;
    display: none;
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheadernext.active{
    display: inline-block;
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheaderprev.active{
    display: inline-block;
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheadernext:after{
    content:"y";
    width: 0.5em;
    min-width: 0.5em;
    max-width: 0.5em;
    
    
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheaderprev:hover{
    font-size: 1.1em;
}

edml-solutionhint .edml-solutionhint-text > .edml-solutionhintheader > .edml-solutionhintheadernext:hover{
    font-size: 1.1em;
}




edml-sourcecode{
    display: block;
    border: solid 1px lightgray;
    background-color: white;
}

edml-sourcecode > .edml-sourcecode-taskbar{
    display: block;
    min-height: 2em;
    background-color: #f8f9fa;
    border-bottom: solid 1px lightgray;
    padding: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    z-index: 10;
}


edml-sourcecode > .edml-sourcecode-taskbar > .edml-sourcecode-button{
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    background-color: lightgray;
    margin-left: 0.5em;
    margin-right: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

edml-sourcecode > .edml-sourcecode-taskbar > .edml-sourcecode-button:hover{
    background-color: rgb(184, 184, 184);
}



edml-sourcecode > .edml-sourcecode-taskbar > .edml-sourcecode-runbutton:after{
    font-family: edmlfont;
    content:"M";
    color:green;
    transform: rotate(-90deg);
    display: block;
    font-size: 1.5em;
}


edml-spotlight{
    background-color: rgb(255, 255, 106);
}
edml-solutionhint  edml-step{
    display: none;
}

edml-solutionhint  edml-step.active, edml-solutionhint  edml-step.forceshow{
    display: block;
}

edml-help  edml-step{
    display: none;
}

edml-help  edml-step.active, edml-help  edml-step.forceshow{
    display: block;
}
edml-strikeout{
    display: inline-block;
    position: relative;
}

edml-strikeout:before{
    content: " ";
    color: red;
    position: absolute;
    width: 100%;
    height: 50%;
    border-bottom: solid 2px;
}
edml-string{
    position: relative;
    display: inline-flex;
    padding: 0px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin: 0px;
    overflow: hidden;
    vertical-align: bottom;
    flex-wrap: wrap;
    /*margin-top: 0.25em;*/
    margin-left: 0.25em;
    margin-right: 0.25em;
    flex-direction: row;
}




.edml-string-input{
    font-size: 1em;
}


edml-string>input{
    min-width: 2em;
    width: 2em;
    max-width: 8em;
    width: auto;
    display: inline-block; 
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    font-size: 1em;
    /*border:none;*/
    height: 100%;  
}


.edml-string-input.edml-string-cloze{
    border: none;
    border-bottom: solid 1px black;
    border-radius: 0.0em;
}



edml-input[solved="true"]:not([check="false"]) edml-string>input{
    background-color: #7FBC7F;
}

edml-input[solved="false"]:not([check="false"]) edml-string >input{
    background-color: #FFC2C2;
}

edml-string.hidden{
    display: none;
}

edml-string[cloze="true"]{
    padding-left:0px;
    margin:0px;
}


edml-string>.edml-solutionhint-btn{
    min-width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;
    position: relative;
    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

edml-string>.edml-solutionhint-btn:hover{
    background-color: #DDE0E3;
}

edml-string>.edml-solutionhint-btn:before{
    content: "d";
    font-family: edmlfont;
    color: black;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 1.5em;
    left: 0px;
}
edml-strong{
    font-weight: bold;
}

edml-styles{
    display: none;
}
edml-sub{
    bottom: -0.25em;
    position: relative;
    display: inline-block;
}
edml-sup{
    top: -0.5em;
    position: relative;
    display: inline-block;
}
edml-table{
    display: block;
    width: 100%;   
    /*border-collapse: collapse;*/
    overflow-x: auto;
    max-width: 100%;    
}

edml-table[fixed="top"],edml-table[fixed="both"]{
    max-height: 50vh;
}

@media print {
    edml-table{
        max-height: unset;
    }
}


edml-tabset > .edmlplayer-tabset-container{
    border: solid 1px #ccc;
    border-radius: 0em 0em 0.5em 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

edml-tabset{
    display: block;
    position: relative;
}
edml-tabview{  
    display: flex;
    min-height: 1em;
    position: relative;
    flex-wrap: wrap;
    row-gap: 0.2em;

}

edml-tabview.withtitle{
    padding-top: 2em;
}

edml-tabview .edml-tabview-container{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

edml-tabview .edml-tabview-container > edml-title{
    display: none;
}

edml-tabview .edml-tabview-container{
    transition: visiblity 0s, opacity 0.5s linear;
}

edml-tabview .edml-tabview-container.noeffect{
    transition: none;
}
edml-test{
 
    display: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
    min-width: 15em;
    position: fixed;
    height: 100%;
    min-height: calc(100% - 5em);
    max-height: calc(100% - 5em);
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    overflow: auto;
    box-shadow: 5px 0px 20px silver;
    left: -0.2em;
    padding-left: 0em;
    margin-top: 2.5em;
    border-radius: 5px;
    z-index: 200;
    background-color: white;
    top: inherit;
    z-index: 21474830;
    padding-bottom: 1em;
}



edml-test[fullscreen="true"]{
    min-height: calc(100% - 3em);
    max-height: calc(100% - 3em);
}

edml-test.show{
    transition: 1s;
    left: -0.2em;
}

edml-test.hide{
    transition: 1s;
    left: calc(2em - 300px);
    height: 1.5em;
    min-height: 1.5em!important;
    overflow: hidden;
    max-height: 1.5em;
    padding: 0px;
}



.edml-testbtn{
    background-color: var(--edml-button-background);    
    position: relative;
    text-align: center;    
    color: white;
    padding: 1em;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: none;
}

.edml-testbtn:hover{
    background-color: var(--edml-button-hoverbackground);
}

.edml-test-startbuttonline{
    display: block;
    position: relative;
    text-align: center;
    margin-top: 1.5em;
}

edml-test.active{
    display: block;
}

edml-test.active.invisible{
    display: none;
}

.edml-test-exitbtn{
    display: inline-block;
    width: auto;
   /* top: 3.5em;*/
    right: 2em;
    background-color: var(--edml-button-background);
    position: fixed;
    text-align: center;
    color: white;
    padding: 0.75em;
    font-size: 0.75em;
    border-radius: 0.5rem;
    border: none;
    z-index: 21474831;
    margin-top: 0.25em;
}

.edml-test-exitbtn:hover{
    background-color: var(--edml-button-hoverbackground);
}


edml-test .edml-test-toolbar{
    z-index: 1000;
    height: 2em;
    background-color: white;
    display: block;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    position: sticky;
    height: 3em;
    
    
}

edml-test .edml-test-btncontainer{
    max-width: calc(300px - 3em);
    display: block;
    overflow-x: auto;
    float: left;
    height: 3em;
    width: calc(300px - 3em);
    position: relative;
}



edml-test .edml-test-btnMin.hide{
    display: none;
}

edml-test .edml-test-btnMin.show{
    display: inline-block;
    line-height: 1.75em;
}

edml-test .edml-test-btnMin:after{
    content: "Q";
    font-family: 'edmlfont';
    font-size: 1em;
}

edml-test .edml-test-btnMin:hover{
    background-color: transparent;
    color: var(--edml-button-hoverbackground);
    cursor: pointer;
}

edml-test .edml-test-btnMax{
    float: right;
    color: var(--edml-button-background);
    min-height: 1.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    display: none;
    top: -0.25rem;
    position: relative;
    right: 0.25rem;
    width: 1.25em;
    text-align: right;
}

edml-test .edml-test-btnMax:hover{
    background-color: transparent;
    color: var(--edml-button-hoverbackground);
    cursor: pointer;
}

edml-test .edml-test-btnMax.hide{
    display: none;
}

edml-test .edml-test-btnMax.show{
    display: inline-block;

}

edml-test .edml-test-btnMax:after{
    content: "R";
    font-family: 'edmlfont';
    font-size: 1em;
}


edml-test .edml-test-btnAccess03{
    left: 10.5em;
    
}

edml-test .edml-testbtn > .edml-test-btnAccess03Icon:before{
    content: "!";
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}


edml-test .edml-test-btnAccess04{
    left: 13em;    
    margin-right: 0.25em;
    
}

edml-test .edml-testbtn > .edml-test-btnAccess04Icon:before{
    content: '"';
    font-family: 'edmlfont';
    color: white;
    position: absolute;
    top: 0em;
    left: 0.35em;
    font-size: 1.5em;
}


edml-test .edml-testbtn{
    color: transparent;
    background-color: var(--edml-button-background);
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    border: none;
    font-size: 1em;
    overflow: hidden;
    top: 0em;
}

edml-test .edml-testbtn:hover{
    background-color: var(--edml-button-hoverbackground);
    color: transparent;
    cursor: pointer;
}

edml-test .edml-test-minmaxcontainer{
    width: 1.5em;   
    height: 2em;
    float: right;
    z-index: 1000;
}

edml-test.hidden{
    display: none;
}
edml-testitem{
    display: block;
    font-family: sans-serif;
    font-size: 1em;
    line-height: 2em;  
    font-weight: normal;
    white-space: normal;
    color: var(--edml-testitem-color);
    position: relative;
    max-width: 100%;
}



edml-testitem.hidden{
    display: none;
}

edml-testitem[visible="false"]{
    display: none;
    color: lightgray;
}

edml-test edml-testitem{
    cursor: pointer;
}



edml-testlist > edml-testitem.hover > .edml-testitem-label{
    /*font-weight: bold;*/
    color: var(--edml-testitem-hovercolor);
}

edml-testlist > edml-testitem.learnpath.hover > .edml-testitem-label{
    /*font-weight: bold;*/
    color: transparent;
}

edml-testlist > edml-testitem > .edml-testlist-chevron:hover{
    /*font-weight: bold;*/
    color: var(--edml-testitem-hovecolor);
}


edml-testlist > edml-testitem.hover.selected > .edml-testitem-label{
    /*font-weight: bold;*/
    color: white;
}


edml-testlist > edml-testitem.hover.selected > .edml-testlist-chevron{
    color: white;
}

edml-testitem > .edml-testitem-label{
    display: inline-block;
  /*  position: absolute;*/
    left: 0em;    
    vertical-align: top;
}

edml-testitem.learnpath > .edml-testitem-label{
    color: transparent;
}


edml-testlist > edml-testitem > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
}


edml-testitem.selected{
    background-color: var(--edml-testitem-background);
    /*background: linear-gradient(#48587C 2em, transparent 0em);*/
    color: var(--edml-testitem-selectedcolor);
}

edml-testitem.selected:hover{
    background-color: var(--edml-testitem-selectedbackground);
    /*background: linear-gradient(#48587C 2em, transparent 0em);*/
    color: white;
}



edml-testitem.selected edml-testitem{
    color: var(--edml-testitem-color);
}


edml-testitem > .edml-testlist-chevron{
    padding-left: 0.5em;
    padding-right: 0.5em;
}


edml-testitem.open > .edml-testlist-chevron.active:after{
    border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	top: 0.85em;
	position: relative;
    /*position: absolute;
    left: calc(100% - 1.5em - 0.15em);*/
	
    /*transform: rotate(-45deg);*/
    transform: rotate(-225deg);
    top: 0.65em;
	vertical-align: top;
	width: 0.45em;
	/*margin-left: 0.5em;*/
    /*margin-right: 0.5em;
    float: right;
    */
}

edml-testitem.close > .edml-testlist-chevron.active:after{
    border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	top: 0.65em;
	position: relative;
   /* position: absolute;
    left: calc(100% - 1.5em - 0.15em);*/
	transform: rotate(+45deg);
    left: 0em;
	vertical-align: top;
	width: 0.45em;
	/*margin-left: 0.5em;*/
    /*margin-right: 0.5em;
    float: right;
    */
}

edml-testitem.close > edml-testlist{
    display: none;
}









edml-testlist{
    display: block;   
    background-color: white;
}

edml-testlist.hide{
    display: none;       
}


edml-variant.forceshow > edml-test edml-testlist{
    display: block!important;
}

edml-test > edml-testlist{
    padding-left: 0.6em;
    padding-top: 1em;
}

@container edmlplayer (min-width: 1500px) {

    edml-test > edml-testlist{
        padding-top: 0em;
    }
}


edml-tests{
    display: inline;
    position: absolute;
    top: 0.5em;
}


edml-textbox{
    background-color: white;
    display: block;
    min-height: 1em;    
    position: relative;
}

edml-flipcardview > edml-textbox{
    background-color: transparent;
}

edml-textbox.hastitle{
    margin-top: 1em;
}

edml-textbox.hide{
    display: none;
}
edml-theorembox{
    background-color: #BDBDBA;
    background-image: linear-gradient(#D5D5D5, #E4E4E4);
    box-shadow:  0px 5px 8px 0px rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding: 1em;
    padding-top: 0em;
    padding-left: 3em;
    color: black;
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
   /* border-left: 0.25em solid red;*/

}


edml-theorembox:before{
    content: "n";
   /* background-image: url('./media/excercisebox.png');*/
    font-family: edmlfont;
    background-size: contain;
    width: 1em;
    height: 1.25em;
    padding-left: 0.35em;
    top: 0px;
    font-size: 1.5em;
    left: 0px;
    display: inline-block;
    position: absolute;
    border-bottom: solid 2px #C0C0C0;
    border-right: solid 2px #C0C0C0;
    border-radius: 0 0 5px 0;
    line-height: 1.5em;

}

@media print {
    edml-theorembox {
      break-inside: avoid;
    }
}
/* STANDARD VIEW */
edml-title{
    font-weight: bold;
}

/* groupview title */
edml-groupview > edml-title > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
    font-weight: bold;
}

edml-course edml-page >edml-groupview > edml-title{
    /*background-color: rgb(132, 132, 132);*/
    /*background-color: black;*/
    background: #a6a6a6;
    display: block;
    color: black;
    padding: 0.2em;
    padding-left: 1em;
    font-weight: bold;
    
    
}

edml-course edml-groupview >edml-groupview > edml-title{
    /*background-color: rgb(132, 132, 132);*/
   /* background-color: black;
    color: white;*/
    background: #a6a6a6;
    color: black;
    padding: 0.25em;
    padding-left: 1em;
    font-weight: bold;
    display: block;
}

edml-course edml-page > edml-groupview > edml-title:before{
    position: absolute;
    height: 0;    
    top: 0px;
    z-indeX: 1000;
    height: 100%;
    width: 100%;
    /*border: solid 1px lightgray;*/
    border: solid 1px black;
    content: " ";
    display: block;
    z-index: -1;
    left: -0.25em;
    width: calc(100% + 0.25em);
    
}

edml-course edml-groupview > edml-groupview > edml-title:before{
    position: absolute;
    height: 0;    
    top: 0px;
    z-indeX: 1000;
    height: 100%;
    width: 100%;
    border: solid 1px black;
    content: " ";
    display: block;
    z-index: -1;
    
}


/* page title */
edml-course edml-page > edml-title{
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    display: block;
    margin-bottom: 2em;
}


/* variant title */
edml-course edml-variant>edml-title{
    display: none;
}


/* accordion title */
edml-course edml-accordion > edml-panel > edml-title{
    background-color: #f8f9fa;
    padding: 0.5em;
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0 0;
    display: block;
    position: relative;
    box-shadow: 0px 0.1em #ccc;
    font-weight: bold;
    padding-left: 1em;
    cursor: pointer;
    min-height: 1em;
    color: black;
    

}

edml-course edml-accordion > edml-panel.show > edml-title{
    background-color: #f8f9fa;
}

edml-course edml-accordion > edml-panel > edml-title:after{
    font-family: edmlfont;
    content: "v";
    float: right;
    padding-right: 0.5em;
    padding-left: 0.5em;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s lineart;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
    transform: rotate(+90deg);
    transform-origin: center center;
}

edml-course edml-accordion> edml-panel.show > edml-title:after{
    transform: rotate(+180deg);
    
}

edml-course edml-accordion > edml-panel.show > edml-title{
    box-shadow: none;   
    border: none; 
    border-bottom: solid 1px #ccc;

}



/* accordionview title */
edml-course edml-accordionview > edml-title{
    display: block;
}

edml-course edml-accordionview > edml-groupview > edml-title{
    background-color: #f8f9fa;
    padding: 0.5em;
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0 0;
    display: block;
    position: relative;
    box-shadow: 0px 0.1em #ccc;
    font-weight: bold;
    padding-left: 1em;
    cursor: pointer;
    min-height: 1.5em;
}

edml-course edml-accordionview > edml-groupview > edml-title:after{
    font-family: edmlfont;
    content: "v";
    float: right;
    padding-right: 0.5em;
    padding-left: 0.5em;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s lineart;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
    transform: rotate(90deg);
    transform-origin: center center;
}

edml-course edml-accordionview> edml-groupview.show > edml-title:after{
    transform: rotate(180deg);
}

edml-course edml-accordionview > edml-groupview.show > edml-title{
    box-shadow: none;
    border: none;
    border-bottom: solid 1px #ccc;

}


/* tabview title */
edml-course edml-tabview > edml-groupview > edml-title{
    background-color: #f8f9fa;
    padding: 0.5em;
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0 0;
    display: inline-block;
    position: relative;
    font-weight: bold;
    padding-left: 0.5em;
    padding-left: 0.5em;
    cursor: pointer;
    min-width: 3em;
}

edml-course edml-tabview > edml-groupview > edml-title.active{
    background-color: #E4E4E4;      
}

edml-course edml-tabview > edml-groupview > edml-title:hover{
    background-color: #ccc;   
}

edml-course edml-tabview > edml-title{
    display: block;
    position: absolute;
    top: 0em;
    white-space: nowrap;
}






/* optionalview title */
edml-course edml-optionalview > edml-groupview > edml-title{
    display: none;
}

edml-course edml-optionalview > edml-title{
    display: block;
}


/* poolview title */
edml-course edml-poolview > edml-groupview > edml-title{
    display: none;
}

/* carouselview title */
edml-course edml-carouselview > edml-groupview > edml-title{
    display: none;
}

edml-course edml-carouselview > edml-title{
    display: block;
    position: absolute;
    top: -0.75em;
    background-color: white;
    z-index: 100;
    padding-left: 0.25em;
    padding-right: 0.25em;
    margin-left: 0.5em;
}

edml-course edml-carouselview.hastitle{
    margin-top: 2em;
}




/* tabset title */
edml-course edml-tabset > edml-panel > edml-title{
    background-color: #f8f9fa;
    padding: 0.5em;
    border: solid 1px #ccc;
    border-radius: 0.5em 0.5em 0 0;
    display: inline-block;
    position: relative;
    font-weight: bold;
    padding-left: 0.5em;
    padding-left: 0.5em;
    cursor: pointer;
}

edml-course edml-tabset > edml-panel > edml-title:hover{
    background-color: #ccc;   
}

edml-course edml-tabset > edml-panel.show > edml-title:hover{
    background-color: #ccc;
}

edml-course edml-tabset > edml-panel.show > edml-title{
    background-color: #E4E4E4;
}



/* solutionhint title **/
edml-solutionhint > .edml-solutionhint-text > edml-title{
    display: none;
}

/* help title **/
edml-help > .edml-help-text > edml-title{
    display: none;
}

/**************/
/* BOX titles */
/*************/

/* applicationbox title */
edml-applicationbox > edml-title > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
}

edml-applicationbox > edml-title{
    position: relative;
    top: 0.3em;
    font-weight: bold;
    display: inline-block;
    font-size: 1em;
    left: 0em;
    padding-bottom: 1em;

}

edml-applicationbox > edml-title > .edml-applicationbox-numbering{
    padding-left: 0.25em;

}


/* exercisebox title */
edml-exercisebox > edml-title{
    position: relative;
    top: 0.3em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    /*margin-left: 2.5em;*/
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-exercisebox > edml-title .edml-exercisebox-numbering{
    padding-left: 0.25em;

}

edml-exercisebox > edml-title > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
}


/* examplebox title */
edml-examplebox > edml-title > .edml-difficultysign{
    font-family: edmlfont;
    padding-left: 0.25em;
    font-size: 1.25em;
}

edml-examplebox > edml-title{
    position: relative;
    top: 0.3em;
    font-weight: bold;
    display: inline-block;
    font-size: 1em;
    left: 0em;
    padding-bottom: 1em;

}

edml-examplebox > edml-title > .edml-examplebox-numbering{
    padding-left: 0.25em;

}



/* definitionbox title */
edml-definitionbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-definitionbox > edml-title .edml-definitionbox-numbering{
    padding-left: 0.25em;

}


/* experimentbox title */
edml-experimentbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-experimentbox > edml-title .edml-experimentbox-numbering{
    padding-left: 0.25em;

}

/* formulabox title */
edml-formulabox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-formulabox > edml-title .edml-definitionbox-numbering{
    padding-left: 0.25em;

}


/* helpbox title */
edml-helpbox > edml-title .edml-helpbox-numbering{
    padding-left: 0.25em;

}

edml-helpbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;

}

/* hintbox title */
edml-hintbox > edml-title .edml-hintbox-numbering{
    padding-left: 0.25em;

}

edml-hintbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;

}


/* infobox title */
edml-infobox > edml-title .edml-infobox-numbering{
    padding-left: 0.25em;

}

edml-infobox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
}

/* conventionbox title */
edml-conventionbox > edml-title .edml-infobox-numbering{
    padding-left: 0.25em;

}

edml-conventionbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
}


/* proofbox title */
edml-proofbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-proofbox > edml-title .edml-proofbox-numbering{
    padding-left: 0.25em;

}


/* remarkbox title */
edml-remarkbox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-remarkbox > edml-title .edml-remarkbox-numbering{
    padding-left: 0.25em;

}

/* theorembox title */
edml-theorembox > edml-title{
    position: relative;
    top: 0.0em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

edml-theorembox > edml-title .edml-theorembox-numbering{
    padding-left: 0.25em;

}

/* textbox title */
edml-textbox > edml-title{
    position: relative;
    top: 0.3em;
    font-weight: bold;
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    /*margin-left: 2.5em;*/
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}


/* test environment */
edml-test > edml-title{
    display: none;
}



/* navigation environment */

edml-navitem edml-title{
    color: black;
    font-weight: normal;
}

edml-navitem > edml-title{
    white-space:normal; 
    display: inline; 
    padding-left: 0.1em; 
}

edml-navitem[visible="false"] > edml-title{
    color: lightgray;
   
}

edml-navitem.selected > edml-title{
    color:white;  
    display: inline;    
    
}


edml-navitem.hover > edml-title:hover, edml-navitem.hover > edml-title{
    color: var(--edml-navitem-hovercolor);
   /* font-weight: bold;*/
   
}



edml-navitem.selected > edml-title:hover,edml-navitem.selected:hover > edml-title {
    color: white;
   /* font-weight: bold;*/
}

/*** TEST ***/
edml-testitem edml-title{
    color: black;
    font-weight: normal;
}

edml-testitem > edml-title{
    white-space:normal; 
    display: inline; 
    padding-left: 0.1em; 
}

edml-testitem[visible="false"] > edml-title{
    color: lightgray;
   
}

edml-testitem.selected > edml-title{
    color:white;  
    display: inline;    
    
}


edml-testitem.hover > edml-title:hover, edml-testitem.hover > edml-title{
    color: var(--edml-navitem-hovercolor);
   /* font-weight: bold;*/
   
}



edml-testitem.selected > edml-title:hover,edml-testitem.selected:hover > edml-title {
    color: white;
   /* font-weight: bold;*/
}
edml-underline{
    text-decoration: underline;
}
edml-input > edml-unit:nth-of-type(n+2){
    display: none;
}


edml-unit>input{
    min-width: 2em;
    width: 2em;
    max-width: 6em;
    width: auto;
    display: none; 
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
    border:none;
    background-color: transparent;  
    height: 100%; 
    
}

edml-input.disabled edml-unit > input{
    pointer-events:none;
}

edml-unit>input.edml-unit-input-calculator{
    display: inline-block;
}

edml-unit>.edml-unit-overlay{
    min-width: 2em;
    width: 2em;
    max-width: 8em;
    width: auto;
    display: inline-block; 
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
    border:none;
    background-color: transparent;  
    height: 100%;  
    max-height: 100%;
    min-height: 1.125em;
    
}

edml-unit>input:focus{
    outline: none;
}


edml-unit{
    display: inline-block;
    position: relative;
    border-width: 1px;    
    background-color: white;
    border: solid 1px;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    flex-direction: row;
    padding: 0px;
    margin: 0px;  
    overflow: hidden;
    flex-wrap: wrap;
    border-radius: 0.2em;

}

edml-quantity edml-unit{
    margin-left: 0.25em;
    vertical-align: bottom;
    line-height: initial;
}


edml-input[solved="false"] edml-unit > input{
    background-color: #FFC2C2;
}

edml-input[solved="true"] edml-unit > input{
    background-color: #7FBC7F;
}

edml-quantity edml-unit[solved="false"] > input{
    background-color: #FFC2C2;
}

edml-quantity edml-unit[solved="true"]  > input{
    background-color: #7FBC7F;
}

edml-input[solved="false"] edml-unit > .edml-unit-overlay{
    background-color: #FFC2C2;
}

edml-input[solved="true"] edml-unit > .edml-unit-overlay{
    background-color: #7FBC7F;
}

edml-quantity edml-unit[solved="false"] > .edml-unit-overlay{
    background-color: #FFC2C2;
}

edml-quantity edml-unit[solved="true"]  > .edml-unit-overlay{
    background-color: #7FBC7F;
}



edml-unit > .edml-expression-calcbtn{
    min-width: 1em;
    max-width: 1em;
    width: 1em;
    height: 1.5em;
    background-color: #E9ECEF;
    border-radius: 0 0.2em 0.2em 0;
    left: -0.1em;

    padding: 0em;
    margin: 0em;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    position: absolute;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em 0 0 0.2em;    
    border-width: 1px;
    display: none;
    z-index: 1000;
}

edml-unit > .edml-expression-calcbtn:after{
    content: "E";
    font-family: edmlfont;
    font-size: 1em;
}

edml-unit.showcalculator > .edml-expression-calcbtn{
    display: inline-block;

}


edml-unit.showcalculator>input{
    padding-left: 1.25em;
    width: calc(10em - 1em);

}




.edml-unit-output{
    min-width: 2em;
    width: 2em;
    max-width: 100%;
    width: auto;
    display: none;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
    position: absolute;
    z-index: 100;
    box-shadow:	0 0.125em 0.5em rgba(0, 0, 0, .3), 0 0.0625em 0.125em rgba(0, 0, 0, .2);
    padding: 0.25em;
    overflow: visible;
}

edml-course.notitlebar .edml-unit-output{
    margin-top: 1.5em;
}



.edml-unit-output.active{
    display: inline-block;
}

@media print{
    .edml-unit-output{
        display: none!important;
    }
}


.edml-unit-output::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    border: .75em solid transparent;
      border-top-color: transparent;
      border-top-style: solid;
      border-top-width: 0.75rem;
      border-bottom-color: transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625em 0.0625em rgba(0, 0, 0, .1));
    top: -0.6em;
    left: 0.2em;
}


edml-variant{
    display: none;
    
}

edml-variant.active{
    display: block;
    position: relative;
    height: calc(100% - 4em);
    overflow-y: auto;
    margin-top: 2.5em;
    max-width: 100vw;
}



edml-course.notitlebar edml-variant{
    padding-top: 0em;
    height: 100%;
    margin-top: 0.5em;
}

edml-variant.forceshow{
    display: block!important;
}

@media print{
    edml-variant.active{
        max-height: auto;
        overflow-y: auto;
        max-width: unset;
        position: static;
    }
}

edml-input > edml-vector:nth-of-type(n+2){
    display: none;
}


edml-vector[solved="true"] > .edml-vector-element > edml-number{
    background-color: var(--edml-solved);
}

edml-vector{
    display: inline-block;
    width: auto;
    height: auto;
    position: relative;
    padding-bottom: 1em;
}

edml-vector > .edml-vector-leftbracket{
    /*content: "(";
    font-size: 1.5em;
    display: inline;
    transform-origin: bottom;
    position: absolute;
    transform: scale(1,1);
    margin-bottom: 1.6em;
    bottom: 0px;
    line-height: 1.5em;*/
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M75 0C25 25 25 75 70 100L70 100C40 75 40 25 70 10' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    color: black;
    transform-origin: top;
    position: absolute;
    margin-bottom: 1.6em;
    bottom: 0px;
    width: 1em;
     height: 1.5em;
    display: inline-block;
    left: -0.4em;
    top: 0px;

}


edml-vector > .edml-vector-rightbracket{
    /*content: ")";/
    font-size: 1.5em;
    display: inline;
    transform-origin: bottom;
    position: absolute;
    transform: scale(1,1);
    margin-bottom: 1.6em;
    bottom: 0px;
    line-height: 1.5em;
    margin-left: 0.5em; /*1.125em;*/
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' version='1.1' preserveAspectRatio='none' viewBox='0 0 75 100'><path d='M0 0C50 25 50 75 5 100L5 100C35 75 35 25 5 10' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    color: black;
    transform-origin: top;
    position: absolute;
    margin-bottom: 1.6em;
    bottom: 0px;
    width: 1em;
     height: 1.5em;
    display: inline-block;
    left: -0.4em;
    top: 0px;

}

edml-vector .edml-vector-element{
    margin-left: 0.5em;
    margin-right: 0.5em;
}


edml-vector input{
    display: inline;
}

/* row */
edml-vector.row > .edml-vector-rightbracket{
    margin-bottom: 0px;
    top: 0.1em;
    position: relative;
    margin-left: 0;
    margin-right: 1em;
}

edml-vector.row > .edml-vector-leftbracket{
    margin-bottom: 0px;
    top: 0.1em;
    position: relative;
    margin-left: 1em;
}


edml-vector.row > .edml-vector-addbtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
}

edml-vector.row > .edml-vector-addbtn.active{
    color: black;
}

edml-vector.row >  .edml-vector-addbtn:before{
    content: "+";
    line-height: 1em;
}

edml-vector.row >  .edml-vector-addbtn.actives:hover{
    background-color: #E3E3E3;

}


edml-vector.row >  .edml-vector-removebtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-left: 0.5em;
}

edml-vector.row >  .edml-vector-removebtn.active{
    color: black;
}

edml-vector.row >  .edml-vector-removebtn:before{
    content: "-";
    line-height: 1em;
}

edml-vector.row >  .edml-vector-removebtn.active:hover{
    background-color: #E3E3E3;

}





/* column */

edml-vector.column{
    display: inline-flex;
    flex-direction: column;
   /* margin-right: 1em;*/
}

edml-vector.column > .edml-vector-btnrow{
    text-align: center;
}

edml-vector.hiddenbuttons > .edml-vector-btnrow{
    display: none;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-addbtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-left: 0.5em;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-addbtn.active{
    color: black;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-addbtn:before{
    content: "+";
    line-height: 1em;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-addbtn.active:hover{
    background-color: #E3E3E3;

}



edml-vector.column > .edml-vector-btnrow > .edml-vector-removebtn{
    background-color: #e9e9ed;
    color: #b7b7b7;
    padding: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    line-height: 1em;
    text-align: center;
    margin-top: 0.25em;
    margin-right: 0.5em;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-removebtn.active{
    color: black;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-removebtn:before{
    content: "-";
    line-height: 1em;
}

edml-vector.column > .edml-vector-btnrow > .edml-vector-removebtn.active:hover{
    background-color: #E3E3E3;

}

edml-vector.hidden{
    display: none;
}

edml-video{
    display: block;
    position: relative;
}
edml-warning{
    background-color: #F1F100;
    
    padding: 0.25em;
    padding-top: 0.5em;
}

edml-warning:before{
    content: "o";
    font-family: edmlfont;
    font-size: 1.5em;
    padding-right: 0.5em;
    padding-left: 0.25em;
   
    
}
edml-exponential  edml-exponent > input{
    width: 3em;
}

edml-exponential  edml-exponent{
    margin-left: 0px;
    margin-right: 0px;
}

edml-input.disabled edml-exponential edml-exponent > input{
    pointer-events:none;
}



edml-input[solved="true"]  edml-exponent > input{
    background-color: var(--edml-solved);    
}

edml-input[solved="false"]  edml-exponent >input{
    background-color: var(--edml-failed);
}

edml-vector edml-exponent[solved="true"] >input{
    background-color: var(--edml-solved);   
}

edml-vector edml-exponent[solved="false"] >input{
    background-color: var(--edml-failed);
}

edml-exponent.hidden{
    display: none;
}

edml-exponent > input{
    min-width: 2em;
    width: 2em;
    max-width: 4em;
    width: auto;
    display: inline-block;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
}

edml-exponent>input:focus{
    outline: none;
}


edml-exponent.nodecimal>input{
    padding-left: 1.5em;
}

edml-exponent>input.hasunit{
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

edml-exponent > .edml-number-base{
    background-color: #ced4da;
    font-size: 0.5em;
    position: absolute;
    max-width: 2em;
    width: 2em;
    min-width: 2em;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border-radius: 0.2em 0 0 0.2em;
    border-width: 1px;
    border-color: #ced4da;
    height: 100%;
    padding-top: 0.25em;
}
edml-exponential  edml-mantissa > input{
    max-width: 4em;
}

edml-exponential  edml-mantissa{
    margin-left: 0px;
    margin-right: 0px;
}

edml-input.disabled edml-exponential edml-mantissa > input{
    pointer-events:none;
}



edml-exponential  edml-mantissa .edml-number-input{
    vertical-align: bottom;
}


edml-input[solved="true"]  edml-mantissa > input{
    background-color: #7FBC7F;
}

edml-input[solved="false"]  edml-mantissa >input{
    background-color: #FFC2C2;
}

edml-vector edml-mantissa[solved="true"] >input{
    background-color: #7FBC7F;
}

edml-vector edml-mantissa[solved="false"] >input{
    background-color: #FFC2C2;
}

edml-mantissa.hidden{
    display: none;
}

edml-mantissa > input{
    min-width: 2em;
    width: 2em;
    max-width: 4em;
    width: auto;
    display: inline-block;
    background-color: white;
    border: solid;
    border-color: #ced4da;
    border-radius: 0.2em;
    border-width: 1px;
    padding-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
    font-size: 1em;
}

edml-mantissa>input:focus{
    outline: none;
}


edml-mantissa.nodecimal>input{
    padding-left: 1.5em;
}

edml-mantissa>input.hasunit{
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

edml-mantissa > .edml-number-base{
    background-color: #ced4da;
    font-size: 0.5em;
    position: absolute;
    max-width: 2em;
    width: 2em;
    min-width: 2em;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border-radius: 0.2em 0 0 0.2em;
    border-width: 1px;
    border-color: #ced4da;
    height: 100%;
    padding-top: 0.25em;
}
/** GLOBAL **/


@font-face {
    font-family: 'edmlfont';
    src: url('edmlfont.ttf')  format('truetype');
}



.edml-font{
    font-family: 'edmlfont';
}

.edml-font-logo{
    font-family: 'edmlfont';
}

.edml-font-logo:after{
    content: "0";
    display: inline-block;
    font-size: 1.25em;
}

.edml-font-logo2:after{
    font-family: 'edmlfont';
    content: "\2012";
    display: inline-block;
    font-size: 4em;
    vertical-align: middle;
}

.edmlplayer{
    user-select: none;
    overflow: hidden;     
    filter: contrast(100%);   
    container-type: inline-size;
    container-name: edmlplayer;
    font-size: 16px!important;
    height: 100%;    

}

.edmlplayer.selectable{
    user-select: unset;
}



@media print{

    html,body{
        height:unset!important;
    }

    @page{
        margin-top:1.4cm;
        margin-bottom:2cm;
        margin-left:1.5cm;
        margin-right:1.5cm;
        padding-bottom: 1em;
        size: A4;
    }



    .edmlplayer{
        display: block;
        position: static;
        overflow-y: auto;
        width: 100%;
        height: 100%;
        max-height: unset;        
        container-type: normal;
        filter: unset;
    }

    #edml{
        overflow-y: auto;
        height: 100%!important;
        max-height: auto!important;
        overflow: visible!important;
        width: 100%;
        
    }
 
    
}



:root {


    /* color definitions */
    --edml-button-background: #48587C;
    --edml-button-color: white;
    --edml-button-hoverbackground: #000000;
    --edml-button-hovercolor: white;

    --edml-secondbutton-background: #e9e9ed;
    --edml-secondbutton-color: black;
    --edml-secondbutton-hoverbackground: #cbcbcf;
    --edml-secondbutton-hovercolor: black;

    --edml-navitem-background: var(--edml-button-background);
    --edml-navitem-color: black;
    --edml-navitem-hovercolor: #0074f7;
    --edml-navitem-selectedbackground: var(--edml-button-background);
    --edml-navitem-selectedcolor: var(--edml-button-color);

    --edml-testitem-background: var(--edml-button-background);
    --edml-testitem-color: black;
    --edml-testitem-hovercolor: #0074f7;
    --edml-testitem-selectedbackground: var(--edml-button-background);
    --edml-testitem-selectedcolor: var(--edml-button-color);

    --edml-order-selected-background: var(--edml-button-background);
    --edml-order-selected-color: var(--edml-button-color);

    --edml-page-background: white;
    --edml-table-background: transparent;

    

    

    --edml-solved: rgb(222, 250, 222);
    --edml-failed: #FFC2C2;


    --edml-red: #FF0000;
    --edml-lightred: rgb(251, 209, 209);
    --edml-green: #00A500;
    --edml-lightgreen: rgb(222, 250, 222);
    --edml-black: black;
    --edml-white: white;
    --edml-lightgray: lightgray;
    

}

/* CODE formatting for code, codelisting */
edml-course span[keywordtype="keyword"]{
    color: #963ba3;
}


edml-course span[keywordtype="definitionkeyword"]{
    color: #963ba3;
}

edml-course span[keywordtype="definitionname"]{
    color: #0000ff;
}

edml-course span[keywordtype="modulekeyword"]{
    color: #963ba3;
}

edml-course span[keywordtype="controlkeyword"]{
    color: #963ba3;
}

edml-course span[keywordtype="modifierkeyword"]{
    color: #963ba3;
}

edml-course span[keywordtype="datatypekeyword"]{
    color: #0c8d5d;
}

edml-course span[keywordtype="stringkeyword"]{
    color: #aa1111;
}

edml-course span[keywordtype="stringkeyword"] *{
    color: #aa1111;
}