styles.css

/** Question editing **/

#page-mod-questionnaire-questions .qcontainer .fitemtitle,
#page-mod-questionnaire-questions #id_questionhdr .fitemtitle {
    display: none;
}

#page-mod-questionnaire-questions .qcontainer .qnums {
    font-weight: bold;
    float: left;
    color: gray;
}

#page-mod-questionnaire-questions .qcontainer .fstatic {
    width: 97%;
    margin-right: 1em;
    margin-left: 5px;
    /* Set a negative margin-bottom to save some vertical space! */
    margin-bottom: -10px;
}

#page-mod-questionnaire-questions .mform .fitem fieldset.felement {
    margin-left: 0;
    padding-left: 1%;
    margin-bottom: 0;
}

#page-mod-questionnaire-preview fieldset,
#page-mod-questionnaire-complete fieldset {
    margin-bottom: 0;
}

#page-mod-questionnaire-questions .mform .fitem .fitemtitle {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 0;
}

#page-mod-questionnaire-questions .moving {
    border: medium dotted maroon;
}

div.qoptcontainer div.ftextarea {
    clear: both;
    float: none;
    width: 600px;
    margin: 0 auto 10px;
}

div.qoptcontainer div.ftextarea textarea.qopts {
    width: 600px;
    height: 10em;
    margin-left: 1px;
}

.response span.selected,
.generalboxcontent span.selected {
    font-weight: bold;
}

td.selected {
    background-color: #e4f1fa;
    border: 1px solid gray;
}

#page-mod-questionnaire-myreport div.respdate {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 6px;
    padding-top: 6px;
    border-bottom: 1px dashed gray;
}

#page-mod-questionnaire-complete .message,
#page-mod-questionnaire-complete .notifyproblem,
#page-mod-questionnaire-preview .message,
#page-mod-questionnaire-preview .notifyproblem,
#page-mod-questionnaire-complete .thankbody,
#page-mod-questionnaire-complete .thankhead {
    background-color: #fff;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 10px;
    padding: 5px;
}

#page-mod-questionnaire-complete .notifyproblem,
#page-mod-questionnaire-preview .notifyproblem {
    border-color: red;
}

#page-mod-questionnaire-fbsections .notifyproblem {
    text-align: left;
    padding: 0;
}

#page-mod-questionnaire-complete .message,
#page-mod-questionnaire-preview .message,
#page-mod-questionnaire-complete .thankbody,
#page-mod-questionnaire-complete .thankhead {
    border-color: blue;
}

.surveyPage {
    background-color: #eee;
    border-bottom-color: #000;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    clear: right;
    padding: 3px;
    margin-bottom: 5px;
    margin-top: 0;
}

/* alternate columns formatting */

#page-mod-questionnaire-complete .c0,
#page-mod-questionnaire-preview .c0,
#page-mod-questionnaire-print .c0,
#page-mod-questionnaire-report .individual .c0,
#page-mod-questionnaire-myreport .individual .c0 {
    background-color: #fafafa;
    border: 1px solid silver;
    padding-left: 5px;
    padding-right: 5px;
}

#page-mod-questionnaire-complete .raterow:hover,
#page-mod-questionnaire-preview .raterow:hover {
    background-color: #e4f1fa;
}

#page-mod-questionnaire-complete td.raterow:hover,
#page-mod-questionnaire-preview td.raterow:hover {
    border: 1px solid navy;
}

#page-mod-questionnaire-complete td.notanswered,
#page-mod-questionnaire-preview td.notanswered {
    /* border: none; */
    background-color: #fafafa;
}

#page-mod-questionnaire-complete td.notcompleted,
#page-mod-questionnaire-preview td.notcompleted {
    border: 2px solid red;
    background-color: #fafafa;
}

#page-mod-questionnaire-complete .c1,
#page-mod-questionnaire-preview .c1,
#page-mod-questionnaire-print .c1,
#page-mod-questionnaire-report .individual .c1,
#page-mod-questionnaire-myreport .individual .c1 {
    background-color: #eee;
    border: 1px solid silver;
    padding-left: 5px;
    padding-right: 5px;
}

#page-mod-questionnaire-myreport .individualresp,
#page-mod-questionnaire-preview .individualresp,
#page-mod-questionnaire-print .individualresp {
    border: #c0c0c0 1px solid;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0;
    margin-bottom: 10px;
    margin-top: 10px;
}

#page-mod-questionnaire-complete .notice .buttons div,
#page-mod-questionnaire-complete .notice .buttons form {
    display: inline;
}

#page-mod-questionnaire-complete .notice .buttons input {
    margin-bottom: 10px;
}

.floatprinticon {
    margin-top: -30px;
    float: right;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons {
    text-align: center;
    width: 100%;
    position: relative;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-prev {
    float: left;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-save {
    margin-left: 20%;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-prev + .control-button-save {
    margin-left: 0;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-next,
#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons .control-button-submit {
    float: right;
}

#page-mod-questionnaire-complete .mod_questionnaire_controlbuttons input {
    margin-right: 0;
}

#page-mod-questionnaire-complete .mod_questionnaire_completepage .generalbox .notice {
    padding: 0.5em 0 0.5em 0;
}

/* progress bar styling */

#page-mod-questionnaire-complete .questionnaire-progressbar {
    height: 14px;
    margin-top: 5px;
    border: 1px solid #dedede;
    border-radius: 5px;
    width: auto;
    overflow: hidden;
}

#page-mod-questionnaire-complete .questionnaire-progressbar-progress {
    background-color: #1177d1;
    height: 100%;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

#page-mod-questionnaire-complete .questionnaire-progressbar-info {
    float: right;
}

#page-mod-questionnaire-complete #questionnaire-progressbar-percent {
    margin-left: 5px;
    margin-right: 5px;
    min-width: 25px;
    text-align: center;
}

#page-mod-questionnaire-complete .questionnaire-progressbar-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 10px;
    height: auto;
    overflow: hidden;
}

#page-mod-questionnaire-complete .mod_questionnaire_completepage.generalbox .homelink ~ .homelink {
    padding-top: 10px;
}

.qn-legend {
    float: left;
    font-size: inherit;
    width: auto;
}

/* format paragraph top and bottom margins for better vertical positioning in questions text */
.qn-question p {
    margin-bottom: 0.6em;
    margin-top: 0.5em;
}

.qn-question {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    /* make background same color as quiz question text */
    background-color: #e4f1fa;
}

#page-mod-questionnaire-questions .qn-question {
    margin-left: 40px;
}

.unselected {
    color: gray;
}

/*respondents list feature*/

.respondentscolumn {
    float: left;
    margin-left: 20px;
}
.respondentsnavbar {
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-bottom: 5px;
    background-color: #f2f2f2;
}

/* new quiz-like formatting for 2.5 */

#page-mod-questionnaire-questions .qn-container {
    border: 1px dotted gray;
    margin-bottom: 1em;
}

.dir-rtl .qn-container {
    text-align: right;
}
.qn-info {
    float: left;
    width: auto;
    padding: 7px;
    background: #eee;
    font-weight: bold;
}

.qn-info h2.qn-number {
    margin: 0;
    font-size: 1.5em;
    line-height: 1.2em;
}

.qn-question,
.qn-answer {
    margin: 0 0 0.5em;
    overflow: auto;
}

.qn-answer input[type=radio] {
    margin-left: 0.5em;
}

.qn-answer > label + input[type=radio] {
    margin-left: 0;
}

.qn-answer > textarea,
.qn-content .editor_atto_wrap .editor_atto_content {
    resize: vertical;
}

.qn-answer textarea,
.qn-answer input[type="text"] {
    box-sizing: border-box;
    height: auto;
}

#notice .qn-question {
    margin: 0;
}

.req {
    font-size: x-small;
}

.qdepend {
    color: red;
    padding-left: 5px;
    margin-bottom: 5px;
}

.qdepend-or {
    color: orange;
    padding-left: 5px;
    margin-bottom: 5px;
}
.qn-content {
    margin-bottom: 10px;
    margin-left: 55px;
}

/* move horizontal radio buttons closer to their labels */
.qn-answer input[type="radio"],
.qn-answer input[type="checkbox"] {
    margin-right: 3px;
}

#page-mod-questionnaire-show_nonrespondents input[type="radio"] {
    margin-right: 1px;
}

.qn-answer label,
#page-mod-questionnaire-show_nonrespondents label {
    margin-right: 0.6em;
}

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

#page-mod-questionnaire-fbsections .c0,
#page-mod-questionnaire-fbsections .c1 {
    border: 1px solid silver;
    padding-left: 4px;
    padding-right: 4px;
}

#page-mod-questionnaire-fbsections .c0 {
    background-color: #fafafa;
}

#page-mod-questionnaire-fbsections .c1 {
    background-color: #eee;
}

#page-mod-questionnaire-fbsections input[type="radio"] {
    margin-right: 0;
}

#page-mod-questionnaire-fbsections .qn-legend {
    padding-left: 8px;
}

#page-mod-questionnaire-fbsections .qcontainer.qcontent {
    margin-bottom: -5em;
}
#page-mod-questionnaire-report div.chart {
    overflow: auto;
    margin-left: -40px;
}

#page-mod-questionnaire-report .generaltable.questionnairereport td {
    border: 1px solid silver;
}

.qn-container .smalltext {
    font-size: 0.75em;
}

#page-mod-questionnaire-questions #region-main .mform .fitem .felement {
    margin-bottom: 0;
}

.qn-indent {
    margin-left: 20px;
}

.mod_questionnaire_flex-container {
    display: inline-flex;
}

#page-mod-questionnaire-view .mod_questionnaire_viewpage div.complete,
#page-mod-questionnaire-view .mod_questionnaire_viewpage div.yourresponse,
#page-mod-questionnaire-view .mod_questionnaire_viewpage div.allresponses {
    flex-grow: 1;
    margin-right: 10px;
}

#page-mod-questionnaire-questions #fitem_id_allchoices #id_allchoices,
#page-mod-questionnaire-questions #fitem_id_allnameddegrees #id_allnameddegrees {
    resize: both;
}

.path-mod-questionnaire .slidecontainer {
    width: 100%;
}

.path-mod-questionnaire .slider {
    -webkit-appearance: none;
    width: 100%;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    float: left;
    margin-top: 40px;
}
.path-mod-questionnaire .slider input {
    width: 100%;
}

.path-mod-questionnaire .slider:hover {
    opacity: 1;
}

.path-mod-questionnaire .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: #04aa6d;
    cursor: pointer;
    border-radius: 50%;
}

.path-mod-questionnaire .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #04aa6d;
    cursor: pointer;
}

.path-mod-questionnaire .question-slider {
    display: flex;
    align-items: baseline;
}

.path-mod-questionnaire .left-side-label {
    text-align: right;
    padding-right: 20px;
    margin-top: 40px;
    flex-grow: 1;
}

.path-mod-questionnaire .right-side-label {
    text-align: left;
    padding-left: 20px;
    margin-top: 40px;
    flex-grow: 1;
}

.path-mod-questionnaire .middle-side-content {
    flex-grow: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.path-mod-questionnaire .middle-side-label {
    text-align: center;
}

.path-mod-questionnaire .bubble {
    background: #000;
    color: white;
    padding: 3px;
    border-radius: 10px;
    left: 50%;
    transform: translate(-52%, -50px);
    position: relative;
    text-align: center;
    width: 40px;
}
.path-mod-questionnaire .bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    left: 50%;
}