.layer-quiz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5em 2em 2em 2em;
}

.quiz-message-start {
    text-align: center;
}

#message-start-pass, #message-start-fail, #message-start-pass-no-attempts, #message-start-fail-no-attempts {
    display: none;
}
#message-end-pass, #message-end-fail, #message-end-best, #message-end-pass-no-attempts, #message-end-fail-no-attempts, #message-end-best-no-attempts {
    display: none;
}

.quiz-answer.selected{
    background-color: #e0dfe1;
}

.quiz-button {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.quiz-answer {
    
}

.quiz-help {
    
}

.quiz-help-review {
    display: none;
}

.quiz-answer.correct {
    color: green;
}
.quiz-answer.wrong {
    color: red;
}
.quiz-answer.selected.correct {
    color: white;
    background-color: green;
}
.quiz-answer.selected.wrong {
    color: white;
    background-color: red;
}

.quiz-button {
    z-index: 1000;
}

#quiz-start {
    top: 75%;
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 10%;
    text-align: center;
    margin: 0;
}
#quiz-next {
    top: 90%;
    left: 92%;
    transform: translateX(-50%);
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin: 0;
}
#quiz-feedback {
    top: 75%;
    left: 60%;
    transform: translateX(-50%);
    display: none;
}
#quiz-feedback-window {
    z-index: 9000;
    position: absolute;
    padding: 12.5% 25%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: none;
}
#quiz-feedback-next {
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
}
#quiz-submit {
    top: 90%;
    left: 92%;
    transform: translateX(-50%);
    display: none;
}
#quiz-try-again {

    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 10%;
    text-align: center;
    margin: 0;
}
#quiz-review {
    top: 75%;
    left: 30%;
    transform: translateX(-50%);
    display: none;
}

#quiz-finish {
    top: 83%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 10%;
    text-align: center;
    margin: 0;
}

#quiz-list {
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 1000;
}

.quiz-list-item {
    float: left;
    font-size: 0.75em;
    margin: 0 0.25em 0 0;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    opacity: 0.75;
    background-color: #CCCCCC;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.quiz-list-item.correct {
    color: white;
    background-color: green;
    opacity: 0.75;
}
.quiz-list-item.wrong {
    color: white;
    background-color: red;
    opacity: 0.75;
}

.quiz-list-item.active, .quiz-list-item.active.wrong {
    background-color: #d07857;
    opacity: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.quiz-list-item.active.correct {
    background-color: yellow;
    opacity: 1;
}

.quiz-question {
    background-color: #ffffff;
}