#wrapper {
    display: flex;
    flex-flow: column ;
}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(255,255,255,0.0)
    url('/img/wait.gif')
    5% 95%
    no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
    display: block;
}

button {
    margin: 10px;
    font-size: 1.2em;

}
/*button.btn_q_del {*/
/*    font-size: smaller;*/
/*    */
/*}*/

button.back{
    background-color: #3C807A;

}
button.add{
    background-color: #fce94f;
}
button.del{
    background-color: rosybrown;
}
button.edit{
    background-color: #0f7cc0;
}
button.selected{
    background-color: #40d0a6;
}
button.correct{
    border: 5px solid lime;
}
button.incorrect{
    background-color: rosybrown;
}
button.selected.incorrect{
    border: 5px solid red;
}

button.apply{
    background-color: burlywood;
}
button.question.learn{
    background-color: #fce94f;
}

textarea{
    margin: 10px;
    font-size: xx-large;
}
input{
    margin: 10px;
    font-size: large;
}
h1{
    margin: 10px;
    color: #999999;
    font-size: large;
}
h2{
    margin: 10px;
    text-align: center;
}
h2[state='wrong']{
    color: red;
}
h2[state='correct']{
    color: #3C807A;
}
h3{
    margin: -10px 10px;
    color: #999999;
    font-size: large;
}
.image_container{
    margin: 10px;
    /*max-height: 300px;*/
    display: flex;
    align-items: center;
    /*justify-content: center;*/

}
img {
    width: auto;
    max-height: 400px;
    margin: auto;
    font-size: large;
}
.del_image{
    position: absolute;
    z-index: 5;
    font-size: small;
}
.multi_question{
    font-size: x-large;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multi_question input{
    height: 1em;
    width: 1em;
}

.question_panel {
    display: flex;
    flex-flow: row;
    margin: 10px;
    background-color: oldlace;
}
.question_panel input{
    height: 1em;
    width: 1em;
    font-size: smaller;
}

.question_panel .controls{
    display: flex;
    flex-flow: column;
}
.question_panel .input_row{
    display: flex;
    font-size: small;
    align-items: center;
    justify-content: center;
 }
.question_panel textarea{
    margin: 10px;
    width: 100%;
    min-height: 6em;
    height: auto;
    font-size: larger;
}
.highlight{
    border: 2px solid red;
    animation: highlight 0.7s ease-out;

}
@keyframes highlight {
    50%{
        transform: scale(1.5);

    }
    100%{
        transform: scale(1);
    }
}
.controls button,label  {
    font-size: smaller;

}