html{
    font-size: 14px;
    font-family: 'Libre-Baskerville', serif;
    /* font-family: 'Courier New', Courier, monospace; */
}

header{
    text-align: center;
}

fieldset{
    border: none;
}

.alg-demo{
    display: flex;
}

.alg-input-haelfte{
    display: block;
    width: min-content;
    border: 1px solid grey;
    border-radius: 5px;
}

.alg-input{
    display: block;
}

.alg-input label{
    font-size: 12px;
    display: block;
}

.alg-input-auto{
    display: flex;
    justify-content: space-between;
}

.alg-input-manu{
    display: block;
}

.alg-input-manu textarea{
    display: block;
    resize: none;
}

#grammatikInput{
    margin-bottom: 10px;
}

.alg-input-go{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.alg-input-go button{
    width: 150px;
}

.alg-input-go div{
    padding: 5px;
}

.input-hinweise-div{
    height: 120px;
}

.alg-output-haelfte{
    display: flex;
    flex: 1;
    border: 1px solid grey;
    border-radius: 5px;
    align-items: center;
    justify-content: space-around;
}

.matrix-table {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

.matrix-table th {
    padding: 4px;
    width: 60px;
    height: 35px;
    box-sizing: border-box;
}

.matrix-table td {
    padding: 4px;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    box-sizing: border-box;
    word-break: break-word;
}

.matrix-pyramide {
    border-collapse: collapse;
    text-align: center;
    display: block;
    transform: rotate(180deg);
}

.matrix-pyramide tr{
    display: flex;
    justify-content: center;
    transform: rotate(180deg);
}

.matrix-pyramide th{
    padding: 4px;
    width: 60px;
    height: 35px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-pyramide td{
    padding: 4px;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    box-sizing: border-box;
    word-break: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-pyramide td:nth-of-type(n){
    border-right: none;
    border-bottom: none;
}

.matrix-pyramide td:last-of-type{
    border-right: 1px solid black;
    border-top: 1px solid black;
}

.matrix-pyramide tr:nth-of-type(2) td{
    border-bottom: 1px solid black
}
/* Controls */

.matrix-control{
    height: fit-content;
}

.matrix-controls{
    margin-left: 45px;
    margin-top: 15px;
    border: 1px solid grey;
}

.schritt-anzeige{
    width: 100px;
}

.schritt-auswahl{

}

.ansicht-auswahl{
    display: block;
}

#matrixSlider {
    width: 100%;
}

.schritte-buttons{
    display: flex;
    justify-content: center;
}

.user-loesung-pruefen {
    display: flex;
    justify-content: center;
}

.pruefen-buttons {
    display: flex;
    justify-content: center;
}

/* Hinweishälfte */

.matrix-hinweise{
    display: flex;
    align-items: center;
}

.hinweise-ausgabe{
    width: 320px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

/* Erläuterungsbox */

.erlaeuterung-box{
    /* width: min-content; */
}

.erlaeuterung-tabelle{
    width: 150px;
    border: 1px solid grey;
    border-radius: 5px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.zeilen-legende th{
    border: 1px solid grey;
    text-align: center;
    padding: 2px;
}

.erlaeuterung-zeile td{
    border: 1px solid grey;
    text-align: center;
    word-wrap: break-word;
    padding: 2px;
}

.positives-ergebnis{
    padding: 10px;
}

.negatives-ergebnis{
    padding: 10px;
}

.ergebnis-hinweis{
    padding: 10px;
}

.fragebogen-hinweis{
    padding: 10px;
    background-color: rgba(255, 217, 0, 0.842);
    background-clip: content-box;
}

.ui-fehler-hinweis .fragebogen-hinweis{
    padding: 0px;
}

.fehler-scroll{
    height: 150px;
    display: flex;
    justify-content: center;
    overflow-y: scroll;
}

.gold{
    background-color: gold;
}

.farbenblind .gold{
    background-color: rgb(143, 182, 77);
}

.blau{
    background-color: royalblue;
}

.farbenblind .blau{
    background-color: rgba(196, 105, 31, 0.945);
}

.grau{
    background-color: lightsalmon;
}

.rot {
    background-color: red;
}

.gruen {
    background-color: green;
}

/* Uebungstabelle */

.matrix-table textarea{

}

.ui-cell {
    padding: 0px;
}

.ui-cell-solution{
    display: none;
}

.ui-cell-compare {

}

.gruener-text {
    color: black;
}

.roter-text {
    /* background-color: red;
    color: white; */
    text-decoration: line-through;
}

.schwarzer-text {
    /* color: black; */
    text-decoration: underline;
}

.ui-fehler-tabelle{
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

.ui-fehler-tabelle th{
    border: 1px solid lightgray;
    padding: 2px;
}

.ui-fehler-tabelle td{
    border: 1px solid lightgray;
    padding: 2px;
    max-width: 45px;
}

footer{
    text-align: center;
}

.alg-info{
 display: flex;
 flex-direction: column;
 align-items: center;
}

.alg-info img{
}

.alg-info div{
    display:flex;
}

.alg-info figure{
    display: inline-block;
    margin: 20px;
}

figure img {
    vertical-align: top;
    /* border: 1px solid black; */
}

img .noborder{
    border: none;
}


figure figcaption {
    text-align: center;
    padding: 5px;
}