/* CSS file for the Javascript Quiz App 2023 version */
body {
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    cursor: default;
    box-sizing: border-box;
}

span {
    margin: 0px;
    padding: 0px;
}

#sWelcome {
    font-size: 26px;
    /* font-size: 1.8vw; */
}

#sExtraTime {
    font-size: 20px;
}

#sHeadingLinks {
    float: right;
    font-size: 26px;
    padding-top: 0px;
    text-decoration: none;
}

#sQuestionNumber {
    float: right;
    font-size: 20px;
    padding-top: 3px;
    text-decoration: none;
    color: #404040
}
/* Used for the level selector radio buttons */
.cNowrap {
    font-size: 20px;
}
/* Used for the "Just practicing" note or the running total score */
.cScore {
    font-size: 28px;
    margin: 6px 0px 0px 0px;
}

/* The buttons: */
button {
    border: 2px solid #606060;
}

.cNoUnderline {
    text-decoration: none;
}

    .cNoUnderline:visited,
    .cNoUnderline:link {
        color: #4040e0;
    }

    .cNoUnderline:hover {
        color: #202080;
        text-decoration: underline;
    }

/* Short version is for the Start and Submit buttons. */
.rightButton {
    font-size: 1.6vw; /* originally 24px; */
    width: 80%;
    min-width: 80%;
    margin: 3px 0px 3px 0px;
}

.rightButtonShort {
    font-size: 1.2vw; /* originally 24px; */
    width: 40%;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .rightButtonShort:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    }

    .rightButtonShort:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #404040);
        color: #ffffff;
    }

.leftButtonShort {
    font-size: 1.6vw; /* originally 24px; */
    width: 10%;
    margin: 2px;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .leftButtonShort:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    }

    .leftButtonShort:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #404040);
        color: #ffffff;
    }

.cButtonLogin {
    font-size: 32px;
    width: 30%;
    margin: 4% 4% 4% 4%;
    padding: 1%;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .cButtonLogin:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    }

    .cButtonLogin:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #404040);
        color: #ffffff;
    }

#btnShowAnswer {
    background-image: linear-gradient(to bottom, #e0e0ff, #aCaCcF);
}

    #btnShowAnswer:hover {
        background-image: linear-gradient(to bottom, #d0d0f8, #9C9CbF);
    }

    #btnShowAnswer:active {
        background-image: linear-gradient(to bottom, #c0c0ef, #8C8CaF);
    }

#btnShowAnswerUnder {
    background-image: linear-gradient(to bottom, #e0e0ff, #aCaCcF);
    min-width: 30%;
    width: 30%;
}

    #btnShowAnswerUnder:hover {
        background-image: linear-gradient(to bottom, #d0d0f8, #9C9CbF);
    }

    #btnShowAnswerUnder:active {
        background-image: linear-gradient(to bottom, #c0c0ef, #8C8CaF);
    }

#btnNextQuestion {
    background-image: linear-gradient(to bottom, #a0e0a0, #80a080);
}

    #btnNextQuestion:hover {
        background-image: linear-gradient(to bottom, #90d090, #709070);
    }

    #btnNextQuestion:active {
        background-image: linear-gradient(to bottom, #80c080, #608060);
    }

#btnNextQuestionUnder {
    background-image: linear-gradient(to bottom, #a0e0a0, #80a080);
    min-width: 30%;
    width: 30%;
}

    #btnNextQuestionUnder:hover {
        background-image: linear-gradient(to bottom, #90d090, #709070);
    }

    #btnNextQuestionUnder:active {
        background-image: linear-gradient(to bottom, #80c080, #608060);
    }


/* Used for divs in which contents are centred: */
.cCentreContents {
    text-align: center;
    display: block;
    justify-content: center;
    align-items: center;
}

.cCentreLoginTitle {
    text-align: center;
    text-decoration: none;
    font-size: 42px;
    color: green;
    margin: 40px auto 10px auto;
}

/* Quiz questions, additional information and system messages: */
.cQuizText {
    float: left;
    display: block;
    width: 100%;
    font-size: 24px;
    font-family: Helvetica,Arial,sans-serif;
    margin-block-start: auto;
    margin: 2px 3px 1px 10px;
}

/* Multiple choice buttons: */
.cMultipleChoice {
    margin: 3px 6px 2px 6px;
    font-size: 24px;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 24px;
    width: 12%;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .cMultipleChoice:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #c0c0c0);
    }

    .cMultipleChoice:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #808080);
    }

/* The answer box for typing in answers: */
#divInputTextBox {
    margin: 0px 0px 0px 6px;
    width: 100%;
    font-size: 24px;
    display: flex;
    flex-wrap: nowrap;
}

.cLoginInput {
    font-size: 32px;
}

.cInputBox {
    margin: 0px;
    flex-grow: 1;
    font-size: 24px;
}

.cInputText {
    margin: 5px 2px 2px 2px;
    font-size: 24px;
}

#tbAnswerBox {
    margin: 2px 2px 6px 2px;
    padding: 1px 2px 1px 2px;
    width: 98%;
    font-size: 24px;
}

/* The screen is divided horizontally between divLeftMain and divRightMain: */
#divLeftMain {
    width: 80%;
    display: inline-block;
    float: left;
    /* background:#ccc; */
}

#divRightMain {
    width: 20%;
    display: inline-block;
    /* float: left; */
}

#divDuCalc {
    background: #e0f0e0;
    border: 2px solid #808080;
}

/* The div for the main svg with the question graphics: */
.cQuestionBlock {
    float: left;
    width: 100%;
    /* background:lightgreen; */
}

/* The submit and reset puzzle buttons: */
.cSubmitButton {
    font-size: 20px;
    width: 80%;
    min-height: 32px;
    margin: 0.5% 10%;
    display: block;
    overflow: auto;
    text-align: center;
    vertical-align: middle;
    height: 30px;
    padding: 2px;
    transition: 0.3s;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .cSubmitButton:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #c0c0c0);
    }

    .cSubmitButton:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #808080);
    }


.cLoginTable {
    text-align: center;
    font-size: xx-large;
    margin: 5% auto 0 auto;
}

.tableRowThing {
    text-align: right;
    padding: 10px;
}

/* Main divs for structure: */
div.headWelcomeOne {
    float: left;
    width: 99%;
    padding: 3px 6px 6px 6px; /* background-color: #C0FFC0; */
}

div.headWelcomeTwo {
    float: left;
    width: 99%;
    height: 24px;
    padding: 3px 6px 6px 6px; /* background-color: #D0C0FF; */
}

div.zoomScroller {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

/* Headings */
h2.h2WithButtons {
    padding: 2px;
    margin: 8px;
}

p.headings {
    border-style: solid;
    border-color: lightgray;
    border-width: 0.5px;
    margin: 5px;
    padding: 5px
}

/* The question select box: */
#tbQuestionSelect {
    width: 80%;
    font-size: larger;
}

/* Checkboxes: make them larger and rounded */
input[type='checkbox'] {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 5px;
    border: 2px solid #229;
}

    input[type='checkbox']:checked {
        background: #cdf;
    }

        input[type='checkbox']:checked:after {
            content: "✔";
            position: relative;
            font-size: 13px;
            left: 0.1em;
            top: -0.2em;
        }
/* SVGs */
svg {
    margin: 0px;
    padding: 0px;
}
    /* Try to stop unpleasant text highlighting in Chrome */
    svg text::selection {
        background: none;
    }

/* SVG current stuff */
line.currentStuff {
    stroke: green;
}

text.currentStuff {
    stroke: green;
}

text.voltageStuff {
    stroke: green;
}

text.powerOutStuff {
    stroke: darkred;
}

text.powerInStuff {
    stroke: darkblue;
}

text.energyStuff {
    stroke: brown;
}

text.headerStuff {
    stroke: black;
}

/* Paragraphs */
p {
    font-size: larger;
    margin: 0px 0px 2px 0px
}

#pSystemInfo {
    color: darkred
}

#pQuestionInfo {
    color: black
}

#pQuestionText {
    color: darkviolet
}

#pQuestionNotes {
    color: darkgreen
}

#pAnswer {
    width: 100%;
    float: left;
    text-align: center;
    font-size: x-large;
    color: blue;
}

#pScore {
    width: 100%;
    float: left;
    text-align: center;
    color: darkblue;
    font-size: 24px;
    margin: 6px 0px 6px 0px;
}

#pCookies {
    width: 90%;
    float: left;
    text-align: left;
    color: darkblue;
    font-size: 24px;
    margin: 2%;
}