@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    background-color: #f8f8f8;
}

.clickable {
    cursor:pointer;
}

.chrome {
}

.chrome-header {
    background-color: white;
    padding: 20px;
    border-bottom: 2px solid #eeedec;
}

.chrome-header-logo {
    height:40px;
}

.examflow {
    width: 100%;
    display: inline-block;
}

.examflow-tabs {
    width: 100%;
    display: inline-block;
    height: 45px;
    min-height: 45px;
    max-height: 45px;
    background-color:white;
}

.examflow-body {
    width: 100%;
    padding: 20px;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;
    margin-top: -6px;
    background-color: white;
}

.examflow-tab {
    float: left;
    padding: 10px 20px;
    height:100%;
    overflow:hidden;
    border-left: 1px solid #222;
    border-top: 1px solid #222;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align:center;
    cursor:pointer;
    user-select:none;
}

.examflow-tab:last-child {
    border-right: 1px solid #222;
}

.examflow-tab:not(.active) {
    border-bottom: 1px solid #222;
}

.examflow-tab.active {
    background-color: #0069ca;
    color:white;
}

.question-number {
    width:75px;
    text-align:right;
    padding-right:10px;
    display:inline-block;
}

.question-question {
    margin-left:75px;
}

.question-question textarea {
    height:125px;
}

.question-multiplechoice {
    margin:0;
    padding:0;
}

.question-multiplechoice li {
    list-style:none;
    cursor:pointer;
}

.question-multiplechoice-number {
    width:30px;
    text-align:right;
    margin-right:5px;
    display:inline-block;
}

.examflow-caption {
    text-align:center;
}

.markquestion-options {
    margin:10px 0 0 0;
    padding:0;
    display:inline-block;
}

.markquestion-options li {
    list-style:none;
    float:left;
    margin-right:10px;
    cursor:pointer;
}

.markquestion-answerkey {
    margin-top: 10px;
}

.markquestion-answerkey > span {
    padding:5px;
    background-color:#808080;
    color:white;
    font-size:9pt;
    border-radius:3px;
}

.results-header, .results-score {
    border: 1px solid #e8e6e3;
    border-radius: 10px;
    padding: 20px;
}

.results-header {
    margin-bottom: 10px;
}

.results-score {
    margin-top: 10px;
    text-align:center;
}

.results-header h5 {
    padding:0;
    margin:0;
}

.results-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}

.results-number {
    border: 1px solid #e8e6e3;
    border-radius: 10px;
    padding: 20px;
    font-size:24px;
    font-weight:bold;
    overflow:hidden;
}

.results-number:not(:last-child) {
    margin-right:5px;
}

.results-number:not(:first-child) {
    margin-left:5px;
}

.results-number label {
    width:100%;
    margin-bottom:5px;
    font-size:11pt;
    font-weight:normal;
}

.results-green {
    border-color: #36c436;
}

.results-red {
    border-color: #d2222d;
}

.results-yellow {
    border-color: #E3B962;
}

.results-blue {
    border-color: #9eeaf9;
}

.results-score-green {
    background-color: #36c436;
    color: white;
}

.results-score-red {
    background-color: #d2222d;
    color: white;
}

.results-score-yellow {
    background-color: #E3B962;
    color: white;
}

.height-100px {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
}

.height-150px {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
}

.height-200px {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
}

.width-33pc {
    width: 33% !important;
    min-width: 33% !important;
    max-width: 33% !important;
}

.width-50pc {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
}

.width-125px {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
}

.practicalfaults {
    margin:0;
    padding:0;
}

.practicalfaults li {
    list-style:none;
}

.taglist {
    margin:0;
    padding:0;
}

.taglist li {
    float: left;
    padding: 5px 10px;
    border: 1px solid #222;
    border-radius:4px;
    margin: 5px;
    list-style:none;
}

.signoff-label {
    background-color: #AFC4E3;
    padding: 4px 8px;
    border: 1px solid #5574A3;
    border-radius: 2px;
}

.takephoto-video {
    width: 100%;
}