/*** STATIC ***/

/**********************************************************
 * allgemeine Definitionen für HTML Elemente              *
 **********************************************************/

html,
body {
    height: 100%;
}

body {
    text-align: center;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 1rem;
    text-align: left;
}

h2 {
    font-size: 1.25em;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

p {
    margin: 0;
    padding: 0;
}

table {
    border-spacing: 0;
}

td {
    padding: 0;
}

img {
    border-style: none;
    max-width: 100%;
}


input,
select,
textarea,
button {
    font-family: inherit;
    box-sizing: border-box;
}

input[type=text],
input[type=password],
textarea {
    box-sizing: border-box;
    padding: .25em;
}

input[type=date] {
    min-height: 1.5em;
    min-width: 6em;
}

select {
    max-width: 100%;
    padding: 0.25em;
}

fieldset {
    min-inline-size: auto;
}

/**********************************************************
 * Textstile                                              *
 **********************************************************/
.text-block {
    text-align: left;
    padding: 1em
}

.text-block h3,
.text-block p {
    padding: 0;
}

.text-block h3:not(:last-child),
.text-block ul:not(:last-child),
.text-block p:not(:last-child) {
    margin: 0 0 1em 0;
}

.bold {
    font-weight: bold;
}

.winzig {
    font-size: 0.7em;
}

p.inline {
    display: inline;
    margin: 0;
    padding: 0;
}

.padding {
    padding: 1em;
}

.padding-bottom {
    padding-bottom: 4em;
}

/**********************************************************
 * Listen                                                 *
 **********************************************************/
ul {
    margin: 1em;
    padding-left: 1em;
}

ul > li:not(:first-child) {
    margin-top: .5em;
}

/**********************************************************
 * Formulare                                              *
 **********************************************************/
input {
    font-size: 100%;
}

input[type=text],
input[type=password],
textarea {
    border: 1px solid #DBDBDB;
}

textarea:disabled,
input[type=text]:disabled,
input[type=number]:disabled,
input[type=date]:disabled {
    background: #EEEEEE;
    color: #555555;
    border-color: rgba(118, 118, 118, 0.3);
}

.qp_login_form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    row-gap: 1em;
}

.qp_login_form > * {
    flex: 0 1 auto;
    margin-right: 1em;
}

.qp_login_form > *:last-child {
    margin-right: 0;
}

input.qp_password_field {
    padding: .1em;
    vertical-align: middle;
    align-self: center;
}

.consent-check {
    display: flex;
    align-items: baseline;
    padding: .5em;
}

.consent-check:not(:first-child) {
    margin-top: .5em;
}

.consent-check:not(:last-child) {
    margin-bottom: .5em;
}

.consent-check input {
    margin-right: .5em;
    position: relative;
    top: 1pt;
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
    width: 0.875em;
    height: 0.875em;
}

input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active,
input[type=button]:hover, input[type=button]:focus, input[type=button]:active,
button.ui-button:hover, button.ui-button:focus button.ui-button:active,
input.ui-button:hover, input.ui-button:focus, input.ui-button:active {
    cursor: pointer;
}

/**********************************************************
 * tabellenartige Darstellung von DIV Containern          *
 **********************************************************/

.table-cell {
    display: table-cell;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    border-width: 0;
    word-wrap: break-word;
    -ms-word-break: break-all;
}

.table-row {
    display: table-row;
    border-width: 0;
}

.table-fixed {
    display: table;
    table-layout: fixed;
    border-width: 0;
}

.table-inline {
    display: table;
    table-layout: fixed;
    border-width: 0;
    width: 100%;
    height: 100%;
}

.table {
    display: table;
}

.growX {
    width: 100%;
}

.growY {
    height: 100%;
}

/**********************************************************
 * Popups allgemein                                       *
 **********************************************************/
.popup-div {
    display: none;
    position: absolute;
    top: 0;
    margin: 0 !important;
    z-index: 1002;
    min-width: 20em;
}

.popup-div .popup-titlebar {
    display: grid;
    height: auto;
    min-height: 1.5em;
    grid-template-columns: auto 1.5em;
    grid-template-rows: auto;
    display: -ms-grid;
    -ms-grid-columns: auto 1.5em;
    -ms-grid-rows: auto;
}

.popup-title {
    grid-column: 1;
    -ms-grid-column: 1;
    align-self: center;
    font-weight: bold;
    padding: 0.2em 0.8em;
}

.popup-close {
    grid-column: 2;
    -ms-grid-column: 2;
}

.popup-close.ui-button {
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: auto;
}

.popup-close-icon {
    width: 1em;
    height: 1em;
    margin: auto;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.popup-content {
    padding: 1em;
    font-weight: normal;
    border: 0;
    overflow-y: auto;
}

.popup-content * {
    max-width: 100%;
}

.popup-content img {
    height: auto;
}

div.popup-div input[type=text],
div.popup-div textarea {
    background-color: #FFFFFF;
    width: 99%;
}

/**********************************************************
 * Datumsfragen mit Date-Picker                           *
 **********************************************************/
/* einzelne Felder */
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
    font-weight: normal;
    border: 0;
}

/* beim Mouse-Over */
.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-widget-content .ui-state-hover,
.ui-datepicker .ui-widget-header .ui-state-hover,
.ui-datepicker .ui-state-focus,
.ui-datepicker .ui-widget-content .ui-state-focus,
.ui-datepicker .ui-widget-header .ui-state-focus {
    font-weight: normal;
}

/**********************************************************
 * Datumsfragen ohne Date-Picker                          *
 **********************************************************/

.date-question .question-body p {
    margin-top: 1em;
}

.date-month-year {
    display: flex;
    align-items: center;
}

.month-first {
    flex-direction: row;
    justify-content: flex-start;
}

.month-first .date-year {
    padding-left: .5em;
}

.year-first {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.year-first .date-year {
    padding-right: .5em;
}

/**********************************************************
 * Hinweise zu Fragen als Tooltips/Popups                 *
 **********************************************************/
.tooltip-text {
    display: none;
}

.tooltip-body {
    text-align: left;
}

.popup-target {
    cursor: pointer;
}

/**********************************************************
 * Wellenauswahl                                          *
 **********************************************************/
.survey-list {
    list-style: none;
}

/**********************************************************
 * Sprachauswahl                                          *
 **********************************************************/

form.language-box {
    margin: .5em;
}

.language-list {
    list-style: none;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0;
}

.language-list li {
    display: inline-block;
    margin-right: .5em;
    margin-left: .5em;
}

/**********************************************************
 * Layout in Spalten                                      *
 **********************************************************/
.col-layout-root > :not(.col-layout) {
    width: 100%;
}

.col-layout-root {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5%;
}

.col-layout input[type=text] {
    width: 100% !important;
}

/**********************************************************
 * Fragen allgemein                                       *
 **********************************************************/

.question-row {
    padding: 1em 1em 0 1em;
}

.question-head {
    margin: 0;
}

.question-body {
    text-align: left;
    height: 100%;
    position: relative;
    padding-top: 1em;
    padding-bottom: 1em;
}

.question-title-text {
    position: relative;
}

.quest-row {
    margin-top: 1em;
    text-align: left;
}

.no-space {
    margin-top: 0 !important;
}

.no-space:not(.col-layout) .question-row,
.no-space:not(.col-layout) .block-validation {
    border-top: 0;
}

.defaultSpace {
    margin-top: 1.5em !important;
}

.largeSpace {
    margin-top: 3em !important;
}

/* AJAX loading indicator */
.ajax-indicator img {
    position: relative;
    left: -1.75em;
    width: 1.5em;
    height: 1.5em;
    max-width: none;
}

.scaled-question-group .ajax-indicator img {
    top: .25em;
}

.ajax-indicator {
    float: right;
    overflow: visible;
    width: 0;
    height: 0;
}

/**********************************************************
 * Markierung von Zwangsfragen                            *
 **********************************************************/

.mandatory {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0;
    vertical-align: top;
    cursor: help;
    z-index: 1;
}

.question-row .mandatory,
.scaled-question-group .mandatory {
    float: right;
    margin-top: -1em;
    margin-right: -1em;
}

.mandatory-explanation .mandatory {
    margin-right: .25em;
}

.mandatory-bitv {
    font-weight: bold;
    font-size: 120%;
    color: red;
    line-height: 0;
}

.mandatory-explanation-bitv {
    font-weight: bold;
}


/**********************************************************
 * Hinweise zu Fragen                                     *
 **********************************************************/
.question-note {
    display: inline;
    font-size: 0.8em;
    margin-left: 1em;
}

.question-note .popup-div,
.question-note .popup-title,
.question-note .popup-content {
    display: block;
}

/**********************************************************
 * Antworten allgemein                                    *
 **********************************************************/

.question-answer.ui-corner-all {
    box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .5);
    margin-right: 1em;
    margin-bottom: 1em;
}

.refuseRadioGroup {
    margin-top: 1em;
}

.refuse-answer .question-answer.ui-corner-all {
    margin-bottom: 0;
    margin-top: 1em;
}

.question-answer input[type=checkbox],
.question-answer input[type=radio] {
    position: relative;
    top: .125em;
}

.question-answer input[type=checkbox],
.question-answer input[type=radio],
.scaled-question-answer input {
    margin: 0;
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
    width: 0.875em;
    height: 0.875em;
}

.answer-container {
    display: inline-flex;
    align-items: first baseline;
    padding: .75em;
    box-sizing: border-box;
}

.answer-text:not(:first-child) {
    padding-left: .5em;
}

.mc-other-answer input[type=text],
.freetext-answer input[type=text] {
    padding: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.mc-other-answer input[type=text] {
    margin-left: .5em;
    margin-bottom: .5em;
}

.mc-other-answer .answer-text {
    max-width: calc(100% - 1.5em);
}

.answer-container.mc-other-answer:not(:has(input[type=radio])) .answer-text {
    max-width: 100%;
}

.answer-container.mc-other-answer {
    flex-wrap: wrap;
}

.date-month-year.month-first select.date-month,
.date-month-year.year-first select.date-year {
    margin-right: .5em;
}

.number-question-answer-pattern input[type=text] {
    margin: 2pt;
}

.question-answer p {
    margin-top: 0.5em;
}

/**********************************************************
 * MC-Fragen                                              *
 **********************************************************/

.multiple-columns.question-body {
    margin-left: -.5em;
    margin-right: -.5em;
    padding-bottom: 0;
}

.one-column.question-body {
    padding-bottom: 0;
}

.one-column .answer-container {
    display: flex;
    margin-bottom: 1em;
}

.one-column .mc-other-answer input[type="text"] {
    flex-grow: 1;
}

.multiple-columns .answer-container {
    margin: 0 .5em 1em .5em;
}

.mc-other-answer {
    padding-top: 0;
    padding-bottom: 0;
}

.mc-other-answer .answer-text {
    flex-shrink: 0;
    padding-top: .75em;
    padding-bottom: .75em;
}

.mc-dropdown .answer-container {
    padding: 0;
}

/**********************************************************
 * Freitextfragen                                         *
 **********************************************************/
.side-by-side {
    display: grid;
    gap: 1.25em;
    padding-bottom: 0.5em;
    grid-auto-flow: column;
}

.side-by-side .question-body {
    padding: 0;
}

.freetext-answer textarea {
    font-size: 1.25em;
    overflow: auto;
    width: 100%;
    resize: vertical;
}

.freetext-answer input[type="text"] {
    font-size: 1.25em;
    width: 100%;
}

/**********************************************************
 * Zahlenwertfragen                                       *
 **********************************************************/
.number-question-answer-pattern {
    display: inline-block;
    vertical-align: middle;
}

.number-question-answer.refuse-answer {
    margin-left: 0;
}

.number-question-answer.refuse-answer .answer-container {
    display: flex;
}

/**********************************************************
 * Rangordnungsfragen                                     *
 **********************************************************/
.ranking-question-body {
    display: grid;
    display: -ms-grid;
}

.ranking-question-body {
    grid-template-columns: 50% 50%;
    -ms-grid-columns: 50% 50%;
}

.sort-source-info,
.sortable.source {
    grid-column: 1;
    -ms-grid-column: 1;
}

.sort-target-info,
.sortable.target {
    grid-column: 2;
    -ms-grid-column: 2;
}

.sort-source-info,
.sort-target-info {
    grid-row: 1;
    -ms-grid-row: 1;
}

.sortable.target,
.sortable.source {
    grid-row: 2;
    -ms-grid-row: 2;
}

.sort-target-info {
    grid-row: 1;
    -ms-grid-row: 1;
}

.sortable.target {
    grid-row: 2;
    -ms-grid-row: 2;
    min-height: 3em;
}

.sortable.target,
.sortable.source {
    list-style: none;
}

ul.sortable {
    margin: 1em 0 0 0;
    padding: .5em;
}

ul.sortable.target {
    outline: dashed 2pt rgba(0, 0, 0, .3);
}

.question-answer.ui-sortable-handle {
    padding: .75em;
}

/**********************************************************
 * Skalierte Fragen                                       *
 **********************************************************/

.scaled-question-group > .table-inline > .table-row:last-child > .table-cell,
.scaled-question-group .table-row.scale-title > .table-cell,
.scaled-question-group > .table-inline.double-scale > .table-row.desktop-only > .table-cell.scale-title {
    border-bottom: 0;
}

.scaled-question-group > .table-inline {
    display: table;
    width: unset;
}

.scaled-question-group > .table-inline > .table-row {
    display: table-row;
    width: unset;
}

.scaled-question-group > .table > .table-row > .table-cell,
.scaled-question-group > .table-inline > .table-row > .table-cell {
    display: table-cell;
    width: unset;
}

.scaled-question-group .single-scale .mobile-only .empty-cell {
    display: table-cell;
}

.scaled-question-group .individually-labeled .scale-title-mobile,
.slider-labels-mobile {
    display: none;
}

.scaled-block-refuse {
    border-radius: 0 !important;
    box-sizing: border-box;
}

.scaled-question-answer {
    text-align: center;
    height: 2em;
}

.scaled-question-answer.scaled-block-padding-none {
    height: auto;
}

.scaled-question-text {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.scaled-question-text.scaled-block-padding-none {
    padding-top: .25em;
    padding-bottom: .25em;
}

.scaled-question-text.scaled-block-padding-normal {
    padding-top: 1em;
    padding-bottom: 1em;
}

.scaled-question-text.scaled-block-padding-big {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.scale-label {
    vertical-align: bottom;
}

.scale-label label {
    padding: 1.5em .5em .25em .5em;
    display: inline-block;
    word-break: break-word;
    text-align: center;
}

.scale-labels {
    height: 100%;
}

.polar-label-left {
    text-align: left;
}

.polar-label-right {
    text-align: right;
}

.scale-label-content,
.scale-title-content {
    margin: .5em;
}

.scale-title-mobile {
    text-align: center;
    padding: .25em 1em;
}

.double-scale-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.ui-slider {
    box-shadow: 0 .1em .25em rgba(0, 0, 0, 0.25) inset, .1em 0 .25em rgba(0, 0, 0, 0.25) inset;
    margin: 1em 1em .5em 1em;
}

.ui-slider-handle {
    top: -.5em;
    margin-left: -1em;
    height: 2em;
    width: 2em;
    padding: 0;
}

.slider .untouched-hint,
.slider input[type="text"] {
    border: 0;
    font-size: 80%;
    font-style: italic;
    text-align: center;
    margin-bottom: .5em;
}

.slider-with-reset .slider {
    margin-right: 2.25em;
}

.slider-reset {
    float: right;
    height: 0;
    width: 0;
    overflow: visible;
    line-height: 0;
}

.slider-reset .ui-button {
    position: relative;
    top: -2em;
    left: -2.25em;
    height: 2em;
    width: auto;
    padding: 0 .5em;
}

.text-block.no-space {
    border-bottom: 0;
}

.text-block.no-space + .scaled-question-group {
    border-top: 0;
}

/**********************************************************
 * Polaritätsprofil-Fragen                                *
 **********************************************************/

.polarity-answer {
    border: 1pt solid transparent;
}

.polarity-label-left {
    text-align: right;
}

.polarity-label-left > .scale-label-content {
    margin-top: 1em;
    margin-right: 1em;
}
.polarity-label-right {
    text-align: left;
}

.polarity-label-top {
    vertical-align: bottom;
    padding-bottom: .25em;
    align-self: flex-end;
}

.polarity-answer,
.polarity-label-top {
    text-align: center;
}

.polarity-mobile-header {
    display: none;
}

.polarity-answer {
    padding: 1em;
}

/**********************************************************
 * Interaktive Karte                                      *
 **********************************************************/
.geolocation-map {
    margin: 1em auto;
    width: 90%;
    height: 30em;
}

/**********************************************************
 * Bilder im Fragebogen                                   *
 **********************************************************/
.imageQuestion {
    text-align: center;
}

/**********************************************************
 * Navigations-Container & -Buttons                       *
 **********************************************************/
.page-nav-container {
    margin: 1em 0 0 !important;
    box-sizing: border-box;
}

.ui-button {
    box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .5);
}

.prev-page-button-container > .ui-button:not(:first-child),
.next-page-button-container > .ui-button:not(:first-child) {
    margin-top: 1em;
}

.prev-page-button-container > .ui-button:last-child,
.next-page-button-container > .ui-button:last-child {
    margin-bottom: 1em;
}

.prev-page-button-container {
    width: 9em;
    float: left;
}

.next-page-button-container {
    width: 9em;
    float: right;
}

#back,
#delete,
#confirm,
#continue,
#resume,
#change,
#summary {
    width: 100%;
    white-space: normal;
    min-height: 4em;
}

.resume-later {
    max-width: 90%;
    text-align: left;
}

.resume-later input {
    display: block;
    margin: .5em 0;
}

/* Fortschrittsbalken
 */
.progress-bar-container {
    margin-left: 10em;
    margin-right: 10em;
    clear: none;
}

.page-nav-container .progress-label {
    height: 0;
    line-height: 4em;
    text-align: center;
    font-weight: bold;
}

.ui-progressbar {
    box-sizing: border-box;
    height: 4em;
}

.ui-progressbar .ui-progressbar-value {
    box-sizing: border-box;
    height: 4em;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/**********************************************************
 * allgemeine Anpassungen gegenüber jquery-ui             *
 **********************************************************/

.ui-dialog .ui-dialog-content {
    text-align: left;
}

.ui-widget-header {
    border: inherit;
    background: inherit;
}

h2.ui-widget-header {
    font-weight: normal;
}

.scaled-block-margin-small.scaled-question-group.ui-widget {
    margin-top: .125em;
}

.scaled-block-margin-normal.scaled-question-group.ui-widget {
    margin-top: .5em;
}

.scaled-block-margin-big.scaled-question-group.ui-widget {
    margin-top: 2em;
}

/**********************************************************
 * Banner                                                 *
 **********************************************************/

.box-heading {
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.heading-left,
.heading-right {
    padding: 1em;
}

.heading-right {
    flex-grow: 1;
}

.box-heading h1 {
    font-weight: normal;
    text-align: right;
}

.logo {
    max-height: 6em;
    max-width: 100%;
}

/**********************************************************
 * Hauptanzeige                                           *
 **********************************************************/

#customHtmlId {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    min-height: 100%;
}

.content-container {
    margin-top: 1em;
    margin-bottom: 1em;
}

#customHtmlId.embedded {
    justify-content: center;
    width: 98%;
    margin: auto;
}

.embedded .content-container {
    margin-top: 1%;
    margin-bottom: 1%;
}

.box-content {
    flex-grow: 1;
}

.content-width {
    max-width: 70rem;
    min-width: 19rem;
    margin: 0 auto;
    width: 95%;
}

.questionnaire {
    width: 95%;
    margin: 0 auto 5px auto;
}

.browserwarning {
    text-align: center;
    font-weight: bold;
    border: 1px solid red;
    margin-bottom: 5px;
    padding: 2px 2px 2px 5px;
}

.simplecaptcha {
    margin-bottom: 20px;
    padding: 5px;
}

.ir-chart {
    max-width: 30em;
    margin: 1em auto;
    border: 1pt solid #e5e5e5;
    padding: 1em;
}

.ir-chart figcaption {
    margin-bottom: 1em;
}

/**********************************************************
 * Footer                                                 *
 **********************************************************/
.box-footing {
    text-align: center;
    font-size: 80%;
    box-sizing: border-box;
    padding: 1rem;
}

.box-footing li {
    list-style: none;
    display: inline-block;
}

.footer-divider:before {
    content: '|';
    margin-right: .5em;
    margin-left: .5em;
}

/**********************************************************
 * Feedback-Panels                                        *
 **********************************************************/
.feedback {
    margin: .5em;
}

.feedback p {
    padding: 1em;
}

.feedback p:not(:first-child) {
    margin-top: 1em;
}

.question-head .feedback {
    margin-bottom: 1em;
}

.validation-goto-first {
    margin-left: .5em;
}

.validation-goto {
    position: absolute;
    /* unsichtbar, aber für assistive Technologien erreichbar */
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.validation-goto:focus {
    /* hebt unsichtbarkeit auf */
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
}

/**********************************************************
 * HTML-Quittung                                          *
 **********************************************************/

table.summary {
    width: 100%;
    margin: 1em auto;
    border: 1px solid #666666;
    border-collapse: collapse;
    word-break: break-word;
}

table.summary th:last-child {
    width: 40%;
}

table.summary td,
table.summary th {
    padding: .5em;
}

table.summary td[colspan="2"] {
    border-right: 0;
}

table.summary td.summary-headline {
    font-weight: bold;
}

.download-pdf-link {
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

/**********************************************************
 * Auswertungslogin                                       *
 **********************************************************/

.login-table {
    display: inline-table;
}

.login-row {
    display: table-row;
}

.login-cell {
    display: table-cell;
    padding: .25em .5em;
}

/**********************************************************
 * Mobil/Desktop                                          *
 **********************************************************/

.mobile-only {
    /* unsichtbar, aber für assistive Technologien erreichbar */
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
}

.desktop-only {
    /* hebt unsichtbarkeit auf */
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
}

#debug {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 1em;
    height: 1em;
    background-color: green;
}


/*** GENERATED ***/

/* FONTS */

body {
    font-family: 'Source Sans Pro', sans-serif;;
    font-size: 1em;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;;
}

/* BORDER RADIUS */

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}

/* PAGE COLORS */

html {
    background: #eaeaea;
}

h2 {
    color: #542d24;
    border: 1pt solid transparent;
    background: transparent;
}

.box-heading {
    color: #542d24;
    border: 1pt solid #542d24;
    border-bottom-width: 1em;
    background: #ffffff;
    margin-top: 0.75em;
}

.box-footing {
    color: #542d24;
    border: 1pt solid #542d24;
    background: #ffffff;
    margin-bottom: 0.75em;
}


.box-footing a,
.box-footing a:visited,
.box-footing a:active {
    background: transparent;
    color: #542d24;
    text-decoration: underline solid;
}

.box-footing a:hover {
    background: transparent;
    color: #542d24;
    text-decoration: none;
}


/* BUTTONS */

.ui-button,
a.ui-button,
a:link.ui-button,
a:visited.ui-button {
    color: #ffffff;
    border: 1pt solid #542d24;
    background: #542d24;
    text-decoration: none;
}

.ui-button:hover,
a.ui-button:hover,
a:link.ui-button:hover,
a:visited.ui-button:hover,
.ui-button:active,
a.ui-button:active,
a:link.ui-button:active,
a:visited.ui-button:active {
    color: #ffffff;
    border: 1pt solid #e98300;
    background: #542d24;
    text-decoration: none;
}

/* QUESTIONS */
.question-row,
.scaled-question-group {
    border: 1px solid #542d24;
    background: #ffffff;
    color: #542d24;
}

.question-answer.ui-corner-all {
    border: 1px solid #d1d1d7;
    background: #ffffff;
    color: #542d24;
}

.question-answer.ui-corner-all:hover,
.scaled-question-answer:hover,
.scaled-question-group .table-row > .table-cell.polarity-answer:hover,
.scaled-question-group .table-row > .table-cell.polarity-refuse:hover {
    border: 1px solid #d1d1d7;
    background: #f5f5fa;
    color: #542d24;
}

.question-answer.ui-corner-all.selected-answer,
.scaled-question-answer.selected-answer,
.scaled-question-group .table-row > .table-cell.polarity-answer.selected-answer,
.scaled-question-group .table-row > .table-cell.polarity-refuse.selected-answer {
    border: 1px solid #e98300;
    background: #f5f5fa;
    color: #542d24;
}

.question-note a:active,
.question-note a:visited,
.question-note a:link {
    background: transparent;
    color: #542d24;
    text-decoration: underline solid;
}

.question-note a:focus,
.question-note a:hover {
    background: transparent;
    color: #542d24;
    text-decoration: none;
}

h2 .question-note a,
h2 .question-note a:active,
h2 .question-note a:visited,
h2 .question-note a:link {
    font-family: 'Source Sans Pro', sans-serif;;
    font-weight: normal;
    font-size: initial;
    background: transparent;
    color: #ffffff;
    text-decoration: underline solid;
}

h2 .question-note a:focus,
h2 .question-note a:hover {
    background: transparent;
    color: #ffffff;
    text-decoration: none;
}

.mandatory-fg {
    fill: #ffffff;
}

.mandatory {
    border: 1px solid #e98300;
    background: #e98300;
}

/* POP-UPS */
.popup-div {
    font-family: 'Source Sans Pro', sans-serif;;
    font-size: 1rem;
    font-weight: normal;
}

.ui-dialog .ui-dialog-titlebar,
.popup-titlebar {
    border: 1px solid #d6492a;
    background: #d6492a;
    color: #ffffff;
}

.ui-dialog,
.popup-content,
body .ui-tooltip {
    border: 1px solid #d6492a;
    background: #ffffff;
    color: #000000;
}

.ui-dialog-content {
    background: #ffffff;
    color: #000000;
}

.popup-content a,
.popup-content a:active,
.popup-content a:visited,
.popup-content a:link
.question-note .popup-content a,
.question-note .popup-content a:active,
.question-note .popup-content a:visited,
.question-note .popup-content a:link {
    background: transparent;
    color: #0082ba;
    text-decoration: underline solid;
}

.popup-content a:focus,
.popup-content a:hover,
.question-note .popup-content a:focus,
.question-note .popup-content a:hover {
    background: transparent;
    color: #0082ba;
    text-decoration: none;
}

/* TEXT CONTENT */

.text-block {
    border: 1px solid #542d24;
    background: #ffffff;
    color: #542d24;
}

.text-block a:not(.ui-button),
.text-block a:not(.ui-button):visited,
.text-block a:not(.ui-button):active {
    background: transparent;
    color: #542d24;
    text-decoration: underline solid;
}

.text-block a:not(.ui-button):focus,
.text-block a:not(.ui-button):hover {
    background: transparent;
    color: #542d24;
    text-decoration: none;
}

/* ERRORS */

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #ff1212;
    background: #fddfdf;
    color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: #5f3f3f;
}

/* TEXT INPUT */

input[type=text],
input[type=date],
input[type=number],
input[type=password],
textarea {
    border: 1px solid #4d4d4d;
    background: transparent;
    color: #000000;
}

/* INTERACTIVE MAP */
.geolocation-map {
    border: 1px solid #4d4d4d;
}

/* FOCUS */

a:focus,
.ui-button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2pt solid #e57500;
}

/* PROGRESS */
.ui-progressbar {
    border: 1px solid #542d24;
    background: #ffffff;
    color: #542d24;
}

.ui-progressbar .ui-progressbar-value {
    background: #542d24;
    color: #ffffff;
}

.double-scale-divider,
.scaled-block-refuse {
    border-left: 1px solid #d1d1d7;
}

.scaled-question-group > .table-inline > .table-row > .table-cell,
.scaled-question-group > .table-fixed > .table-row > .table-cell {
    border-bottom: 1px solid #d1d1d7;
}

/* Mobile Layout */
@media screen and (max-width: 34em) {

    #debug {
        background-color: red;
    }

    .box-heading h1 {
        text-align: left;
    }

    .heading-left {
        padding-bottom: 0;
    }

    .heading-right {
        padding-top: 0;
    }

    .progress-bar-container {
        margin-left: 0;
        margin-right: 0;
        clear: both;
    }

    .box-footing li {
        display: block;
    }

    .footer-divider:before {
        content: '';
        margin-right: 0;
        margin-left: 0;
    }

    .login-table {
        display: inline-block;
        margin: auto;
        text-align: left;
    }

    .login-row,
    .login-cell {
        display: block;
    }

    .box-content {
        padding: 0 .5rem;
    }

    html > body .no-logo-mobile {
        display: none;
    }

    .page-nav-container {
        padding-left: 0;
        padding-right: 0;
    }

    .question-body select {
        width: 100%;
    }

    .mc-other-answer input[type=text] {
        width: 100%;
        margin: .25em .25em .75em .25em;
        padding: .25em;
    }

    .scaled-question-group > .table-inline,
    .scaled-question-group > .table-inline > .table-row,
    .scaled-question-group > .table-inline > .table-row > .table-cell,
    .individually-labeled .answers-table,
    .individually-labeled .answers-table .table-row {
        display: block;
        width: auto !important;
    }

    .scaled-question-group > .table-inline > .table-row > .table-cell {
        border-bottom: 0;
    }

    .individually-labeled .scaled-question-answer,
    .polarity-refuse {
        border: 1px solid #d1d1d7;
        background: #ffffff;
        color: #542d24;
    }

    .scaled-question-group > .table-inline > .table-row:not(:last-child) {
        border-bottom: 1px solid #d1d1d7;
    }

    .single-scale .mobile-only .empty-cell {
        display: none !important;
    }

    .individually-labeled .answers-table .scaled-question-answer,
    .polarity-refuse {
        display: flex;
        align-items: baseline;
        width: 100% !important;
        height: auto;
        padding: 1em;
        text-align: left;
    }

    .individually-labeled .slider-answer {
        display: block;
        width: auto !important;
        margin-bottom: 0;
    }

    .scaled-question-group .individually-labeled .scale-title-mobile,
    .slider-labels-mobile {
        display: block;
    }

    .individually-labeled .scaled-question-answer.ui-corner-all,
    .polarity-refuse {
        box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .5);
        margin-right: .25em;
    }

    .individually-labeled .scaled-question-answer input,
    .polarity-refuse input {
        position: relative;
        top: .125em;
    }

    .individually-labeled .scaled-question-answer {
        margin-bottom: 1em;
    }

    .individually-labeled .answers-table {
        padding: .5em;
    }

    .polar-labeled .slider-refuse-text.mobile-only {
        display: none;
    }

    .double-scale-divider,
    .scaled-block-refuse {
        border-left: 0;
    }

    .slider-labels-mobile {
        display: grid;
        grid-template-columns: 50% 50%;
        display: -ms-grid;
        -ms-grid-columns: 50% 50%;
        padding: 0 .5em;
    }

    .slider-labels-mobile .polar-label-left {
        grid-column: 1;
        justify-self: left;
        -ms-grid-column: 1;
        -ms-justify-self: left;
    }

    .slider-labels-mobile .polar-label-right {
        grid-column: 2;
        justify-self: right;
        -ms-grid-column: 2;
        -ms-justify-self: right;
    }

    .battery.question-title-text.mobile-only {
        padding-top: .5em;
        padding-bottom: .5em;
        text-align: left;
    }

    .polarity-row {
        display: flex;
        flex-wrap: wrap;
    }

    .polarity-answer.table-cell {
        width: auto !important;
        flex-grow: 1;
        padding: 1em;
    }

    .polarity-label-left,
    .polarity-label-right {
        display: none;
    }

    .polarity-mobile-header:not(:first-child) {
        border-top: 1pt solid #E0E0E0;
    }

    .polarity-mobile-header .scale-title-content {
        width: 100%;
        text-align: center;
    }

    .polarity-mobile-header .polarity-label-left,
    .polarity-mobile-header .polarity-label-right {
        display: block;
        width: 50%;
        padding: .5em;
        box-sizing: border-box;
    }

    .polarity-mobile-header .polarity-label-left {
        text-align: left;
        padding-right: 1em;
    }

    .polarity-mobile-header .polarity-label-right {
        text-align: right;
        padding-left: 1em;
    }

    .polarity-refuse {
        margin: 1em;
    }

    .ranking-question-body {
        grid-template-columns: 100%;
        -ms-grid-columns: 100%;
    }

    .sort-target-info {
        grid-row: 1;
        -ms-grid-row: 1;
        grid-column: 1;
        -ms-grid-column: 1;
    }

    .sortable.target {
        grid-row: 2;
        -ms-grid-row: 2;
        grid-column: 1;
        -ms-grid-column: 1;
    }

    .sort-source-info {
        padding-top: 1em;
        grid-row: 3;
        -ms-grid-row: 3;
        grid-column: 1;
        -ms-grid-column: 1;
    }

    .sortable.source {
        grid-row: 4;
        -ms-grid-row: 4;
        grid-column: 1;
        -ms-grid-column: 1;
    }

    .popup-div {
        left: -1em !important;
        width: 26em !important;
        max-width: 26em !important;
    }

    .box-heading {
        flex-wrap: wrap;
    }

    .mobile-only {
        /* hebt unsichtbarkeit auf */
        clip: auto;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
    }

    .desktop-only {
        /* unsichtbar, aber für assistive Technologien erreichbar */
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;

    }

    .col-layout {
        min-width: 100%;
    }
}

/* IE11-only */
@media screen and (max-width: 34em) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .scaled-question-group .polarity-mobile-header .table-cell.polarity-label-top {
        display: inline-block;
    }

    .polarity-row label {
        min-height: 1.5em;
    }

    .polarity-row label:not(.polarity-refuse) input {
        position: relative;
        left: 1.5em;
        top: 1.5em;
    }

    .polarity-row label input,
    .scaled-question-group .individually-labeled label input {
        width: .75em;
        margin-left: .75em;
    }

    .polarity-row label.polarity-refuse span {
        display: inline-block;
        margin-top: 0.75em;
    }
}