:root {
    --border-color: #bdc3c7;
    --button-background: #8d003b;
    --button-hover-background: #B3024B;
    --button-color: #fff;
    --button-hover-color: #fff;
    --background-from: #99003F;
    --background-to: #8a0039;
    --wrapper-background: #ffffff;
    --questionnaire-odd-background: #FFE2EE;
    --question-background: #fff;
    --question-label-background: #fff;
    --question-hover-background: #ffeff6;
    --question-label-color: #333;
    --question-label-selected-background: #B3024B;
    --question-label-selected-color: #fff;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(353deg, var(--background-from), var(--background-to));
    background-attachment: fixed;
    line-height: 1.5em;
    font-size: 1.2em;
}

.bg {
    background-image: url('../images/pink-blobs.png');
    background-repeat: no-repeat;
}

.bg2 {
    background-image: url('../images/pink-blobs2.png');
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

h1 {
    font-size: 1.6em;
    font-family: 'Baloo 2', sans-serif;
}

h2 {
    font-size: 1.2em;
    margin: 25px 10px 15px 10px;
    font-family: 'Baloo 2', sans-serif;
}

* {
    box-sizing: border-box;
}

.screenreader {
    position: absolute;
    top: -9999px;
}

.wrapper {
    max-width: 1100px;
    min-height: 100vh;
    margin: 0 auto;
    box-shadow: rgb(0 0 0 / 13%) 0 0 65px;
    padding-top: 20px;
    background: var(--wrapper-background);
}

#menu {
    width: 100%;
    background: var(--wrapper-background);
    box-shadow: rgb(0 0 0 / 33%) 0 0 65px;
    margin-bottom: 20px;
}

#menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: -20px;
}

#menu ul li {
    padding: 0;
    font-size: 1.2em;
    font-family: 'Baloo 2', sans-serif;
    cursor: pointer;
}

#menu ul li:hover {
    background: var(--button-background);
    color: var(--button-color);
}

#menu ul li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
}

#menu ul li a:hover {
    color: var(--button-color);
}

legend {
    padding: 0;
    display: table;
}

fieldset {
    border: 0;
    padding: 0.01em 0 0 0;
    margin: 0;
    min-width: 0;
}

body:not(:-moz-handler-blocked) fieldset {
    display: table-cell;
}

label {
    white-space: nowrap;
}

.paragraph {
    padding: 0 20px 20px 20px;
}

.questionnaire {
    position: relative;
    padding: 40px 20px;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    margin-bottom: -1px;
}

.questionnaire:nth-child(odd) {
    background: var(--questionnaire-odd-background);
}

.choice.questionnaire {
    padding: 30px 20px 50px 20px;
}

.choice.questionnaire .description {
    font-weight: bold;
    font-family: 'Baloo 2', sans-serif;
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 1.2em;
}

.choice.questionnaire .question {
    padding: 15px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background: var(--question-background);
}

.choice.questionnaire .question:hover {
    background: var(--question-hover-background);
}

.choice.questionnaire legend {
    float: left;
    text-align: left;
    margin-right: 5px;
}

.choices {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.choices label {
    margin-left: 20px;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 5px;
    padding-right: 12px;
}

.choices label:hover,
.choices label.selected {
    border: 1px solid #ccc;
    background: var(--question-label-selected-background);
    color: var(--question-label-selected-color);
}

.scale.questionnaire legend {
    font-weight: bold;
    font-family: 'Baloo 2', sans-serif;
    margin-bottom: 20px;
}

.scale.questionnaire label {
    border: 1px solid var(--border-color);
    margin-right: -1px;
    padding: 10px 7px;
    display: inline-block;
    margin-bottom: 3px;
    border-radius: 5px;
    background: var(--question-label-background);
    color: var(--question-label-color);
    cursor: pointer;
}

.scale.questionnaire label:hover,
.scale.questionnaire label.selected {
    background: var(--question-label-selected-background);
    color: var(--question-label-selected-color);
}

input[type=radio] {
    cursor: pointer;
    margin: 10px;
}

.report-scroll {
    overflow-x: auto;
    width: 100%;
}

.scale.questionnaire .scale-names {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto 0 auto;
    max-width: 365px;
}

.textinput textarea {
    width: 600px;
    max-width: 90%;
    height: 100px;
    font-family: sans-serif;
    font-size: 1em;
    padding: 10px;
    resize: none;
}

button.submit {
    margin: 30px;
    font-size: 1.1em;
    padding: 20px;
    border-radius: 10px;
    border: none;
    background: var(--button-background);
    color: var(--button-color);
}

button.submit:hover {
    background: var(--button-hover-background);
    color: var(--button-hover-color);
    cursor: pointer;
    transform: scale(1.02);
}

.scale-label {
    position: absolute;
    top: -9999px;
}

.scale.questionnaire.optional .scale-label {
    position: relative;
    top: 0;
}

.scale.questionnaire.optional .scale-names {
    display: none;
}

.mobile-only {
    display: none;
}

.invalid {
    border: 1px solid red !important;
}

.error {
    border: 1px solid #ab3f00;
    background: #ffb6af;
    padding: 8px;
    margin: 20px;
    border-radius: 10px;
}

.success {
    border: 1px solid #06ab00;
    background: #b2ffaf;
    padding: 8px;
    margin: 20px;
    border-radius: 10px;
}

.submission-alert {
    border: 1px solid #ab5b00;
    background: #ffe3af;
    padding: 8px;
    margin: 20px;
    border-radius: 10px;
}

.content {
    padding: 15px;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}

th, td {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}

thead tr {
    background-color: #d6d6d6;
    font-weight: bold;
}

a:link, a:visited {
    color: rgb(201 0 82);
}

span.small {
    font-size: 0.7em;
}

/* Style for all input elements */
input, select {
    font-size: 1em;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Style for text input */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    max-width: 500px;
}

input.small-number {
    width: 60px;
}

/* Style for radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 10px;
}

/* Style for submit button */
input[type="submit"] {
    background-color: #af153c;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 10px;
}

button {
    margin-top: 15px;
    font-size: 1em;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--background-from), var(--background-to));
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
}

/* Button Links */
a.button-link {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--background-from), var(--background-to));
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

a.button-link.small {
    padding: 5px 10px;
    font-size: 0.9em;
}

.button-link:hover,
button:hover {
    background-color: var(--button-hover-background);
}

.button-link:active,
button:hover {
    background-color: var(--button-background);
}

.img-wrapper {
    position: relative;
    display: inline-block;
}

.img-point {
    background: #c50000;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(49%, -49%);
}

img {
    max-width: 90%;
}

span.answer-text {
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

table.report {
    cursor: default;
}

.report-answer {
    text-align: center;
    cursor: default;
}

.sensitive {
    filter: blur( 5px );
}

.sensitive:hover {
    filter: none;
}

body.blurred {
    filter: blur( 13px );
}

.report-survey {
    white-space: nowrap;
}

.submission-date {
    font-size: 0.8em;
    margin-top: -6px;
    white-space: nowrap;
}

.prev-submissions-list {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 300px;
    margin: 0 auto;
}

h1.survey-preview {
    background: #a70000;
    color: #fff;
    padding: 20px;
    margin-top: 0;
}

.survey-link-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 10px solid #8e003b;
    padding: 0px 20px 20px 20px;
    border-radius: 30px;
    box-shadow: rgba(0,0,0.9) 0 0 20px;
    text-align: center;
    width: 700px;
    max-width: 90%;
}

.survey-link-prompt p {
    font-size: 0.9em;
}

.survey-link-box {
    padding: 9px;
}

.message {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 0;
    margin-left: 0;
    z-index: 99999;
    background: #4ccd4a;
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 5px;
}

button.close-closable {
    background: #625e5e;
}

.copy-on-click {
    cursor: pointer;
}

.answer-1,
.questionnaire label.qans-1:hover {
    background: #6dff68;
    color: #000;
}

.answer-2,
.questionnaire label.qans-2:hover {
    background: #deff68;
    color: #000;
}

.answer-3,
.questionnaire label.qans-3:hover {
    background: #ffe368;
    color: #000;
}

.answer-4,
.questionnaire label.qans-4:hover {
    background: #ffa468;
    color: #000;
}

.answer-5,
.questionnaire label.qans-5:hover {
    background: #ff7f68;
    color: #000;
}

.answer-6,
.questionnaire label.qans-6:hover {
    background: #ff5739;
}

.answer-7,
.questionnaire label.qans-7:hover {
    background: #ff300c;
    color: #fff;
}

.answer-8,
.questionnaire label.qans-8:hover {
    background: #c21d00;
    color: #fff;
}

.answer-9,
.questionnaire label.qans-9:hover {
    background: rgb(129, 0, 0);
    color: #fff;
}

.answer-10,
.questionnaire label.qans-10:hover {
    background: rgb(80, 0, 0);
    color: #fff;
}

@media (max-width: 700px) {
    body {
        background: var(--wrapper-background);
    }

    .choices {
        display: block;
        font-size: 0.95em;
    }

    .choice.questionnaire legend {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding: 0 15px;
        margin-right: 0;
    }

    .choice.questionnaire .question {
        background: none;
    }

    .choice.questionnaire .question {
        display: block;
        margin-top: 20px;
    }

    .wrapper {
        border: none;
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .scale.questionnaire label {
        padding: 7px 5px;
    }

    .scale.questionnaire .scale-names {
        display: none;
    }

    .scale-label {
        position: relative;
        top: 0;
    }

    .mobile-only {
        display: initial;
    }
}

@media (max-width: 350px) {
    body {
        font-size: 0.95em;
    }

    .questionnaire {
        padding: 30px 10px;
    }

    .choice.questionnaire {
        padding: 30px 10px;
    }
}