/* Copyright 2023 Craig Mautner (mailto:craig.mautner@gmail.com)
 *
 * This file is part of the wordpress plugin MissionQuiz.
 *
 * MissionQuiz is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option)
 * any later version.
 *
 * MissionQuiz is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * MissionQuiz. If not, see <https://www.gnu.org/licenses/>.
 */

/* container styling */
.outer {
    font-family: 'Roboto', sans-serif !important;
}

.outer.a {
    color: #0074D9;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}

.active-slide {
    position: relative;
    opacity: 1;
    z-index: 2;
}

.quiz-container {
    position: relative;
    min-width: 200px;
    max-width: 630px;
    margin: auto;
    width: 95%;
    border-radius: 2px;
    background-color: rgba(245, 245, 245, 0);
    border: 3px solid #5e5e5e00;
    padding: 10px;
}
.quiz-container > * {
    line-height: 1.4em;
}

.button-container {
    position: relative;
    display: block;
    padding: 10px;
    padding-left: 20px;
}

.answer-container {
    position: relative;
    display: block;
}

/* content styling */
.question {
    font-size: medium;
    text-align: left;
}
.image {
    max-width: 100%;
    display:block;
    margin:auto;
    max-height: 300px;
}
.answers {
    margin: 10px;
    font-size: 18px;
    text-align: center;
}
/* button styling */
.button1 {
    padding:10px;
    border-radius:0.12em !important;
    font-family:'Roboto',sans-serif !important;
    font-weight:300 !important;
    color:#000000 !important;
    text-align: center !important;
    transition: all 0.2s !important;
    font-size: 20px !important;
    display:block;
    margin:auto !important;
    min-width: 150px !important;
    background-color: rgb(230, 230, 230) !important;
}

.button1:hover {
    background-color: rgb(197, 197, 197) !important;
    cursor: pointer !important;
}

.button-answers {
    padding: 10px !important;
    border: 0em solid #818181 !important;
    border-radius: 0.12em !important;
    font-family:'Roboto',sans-serif !important;
    font-weight: 300 !important;
    color: #000000 !important;
    text-align: left !important;
    transition: all 0.2s !important;
    font-size: medium !important;
    display: block !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    white-space: normal !important;
    background-color: #e0e0e0 !important;
    left: 0;
    top: 0;
	height: 40px;
}

.button-answers-hover:hover {
    background-color: rgb(197, 197, 197) !important;
    cursor: pointer !important;
}

.percent-bar {
    width: 0%;
    background-color: red;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.answer-label {
    position: absolute;
    left: 0;
    top: 0;
    margin: 8px;
    font-size: 16px;
    cursor: pointer !important;
}

.percent-label {
    width: 40px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 3px;
    font-size: 11px;
    transform: translateY(-50%);
    background-color: white;
    text-align: center;
    display: none;
}

/* results styling */

.results-container {
    position: relative;
}

#results-overall {
    padding: 5px 0px 10px 0px;
    font-size: 18px;
}

.correct {
    background-color: rgb(92, 218, 92) !important;
}
.correct:hover {
    background-color: rgb(92, 218, 92) !important;
}
.incorrect {
    background-color: rgb(129, 129, 129);
}
.incorrect:hover {
    background-color: rgb(129, 129, 129) !important;
}
.correct-word {
    color: forestgreen;
}
.incorrect-word {
    color: crimson;
}
.question-header {
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    text-align: right;
}
.hide {
    display: none;
}
.disabled {
    pointer-events: none;
}
#explanation {
    text-align: left;
    display: block;
    font-size: medium;
}

.checkmark {
    color: green;
    display: none;
}

.wrong {
    color: red;
    display: none;
}

.percent {
    width: 50%;
    height: 24px;
    left: 0;
    color: black;
    border-radius: 5px;
    display: block;
}