/*********************************************************

 * allgemeine Definitionen HTML Elemente                   *

 **********************************************************/



body {

    text-align: center;

    padding: 1em .5em;

}



h1, h2, h3, h4 {

    margin: 0;

    padding: .5em;

    text-align: left;

}



p {

    margin: 0;

    padding: .5em .25em;

}



table {

    border-spacing: 0;

}



td {

    padding: 0;

}



img {

    border-style: none;

    max-width: 100%;

}



/**********************************************************

 * Textstile                                              *

 **********************************************************/

.bold {

    font-weight: bold;

}



.winzig {

    font-size: 0.7em;

}



p.inline {

    display: inline;

    margin: 0;

    padding: 0;

}



.qp_error_text {

    color: #FF0000;

    padding: 2em;

}



.padding {

    padding: 1em;

}





/**********************************************************

 * Listen                                                 *

 **********************************************************/

ul {

    margin: 1em;

    padding-left: 1em;

}



ul > li:not(:first-child) {

    margin-top: .5em;

}



/**********************************************************

 * Formulare                                              *

 **********************************************************/

input {

    font-size: 100%;

}



input[type=text], textarea {

    border: 1px solid #DBDBDB;

}



input[type=text]:disabled, textarea:disabled {

    background: #EEEEEE;

}



input.qp_password_field {

    padding: .1em;

    vertical-align: middle;

}



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;

    overflow: hidden;

    vertical-align: middle;

    text-align: center;

    border-collapse: collapse;

    border-width: 0;

    word-wrap: break-word;

    /*-ms-word-break: break-all;*/

    /*border: 1pt dotted grey;*/

}



.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: 102;

    border: 1pt solid #999999;

    max-width: 25em;

}



.popup-div .popup-titlebar {

    display: grid;

    grid-template-columns: auto 1.5em;

    grid-template-rows: 1.5em;

    display: -ms-grid;

    -ms-grid-columns: auto 1.5em;

    -ms-grid-rows: 1.5em;

    border: 0;

    border-bottom: 1pt solid #999999;

}



.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;

}



.popup-content {

    padding: 1em;

    font-weight: normal;

    border: 0;

}



.popup-content * {

    max-width: 100%;

}



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-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;

}



/**********************************************************

 * Fragen allgemein                                       *

 **********************************************************/



.question-head {

    margin: 0;

    vertical-align: top;

}



td.question-head {

    display: table-cell;

}



.question-body {

    text-align: left;

    height: 100%;

    overflow: hidden;

    position: relative;

    padding: .5em;

}



.question-answer {

    margin-bottom: 8px;

}



.question-title-text {

    position: relative;

    padding-left: .5em;

    padding-right: .5em;

}



#questionForm > *:not(.page-nav-container) {

    margin-top: 1em;

}



.noSpace {

    margin-top: 0 !important;

}



.defaultSpace {

    margin-top: 1.5em !important;

}



.largeSpace {

    margin-top: 3em !important;

}



/**********************************************************

 * Markierung von Zwangsfragen                            *

 **********************************************************/

.mandatory-explanation {

}



.question-attribute-icon {

    display: inline-block;

    padding: 0.1em 0.4em;

    border: 1pt solid #000000;

    background: #CBCBCB;

    color: #000000;

    cursor: help;

    font-size: 0.75em;

    font-weight: bolder;

    margin: 2pt;

    z-index: 1;

}



.question-attribute-icon:hover {

    background: #E5E5E5;

}



.absolute-right {

    position: absolute;

    top: 0;

    right: 0;

}



.float-right {

    float: right;

    margin-right: 2pt;

}



.float-left {

    float: left;

    margin: 2pt;

}



.float-left,

.float-right {

    position: relative;

    display: inline-block;

    vertical-align: middle;

}



/**********************************************************

 * Hinweise zu Fragen                                     *

 **********************************************************/

.question-note {

    display: inline;

    font-size: 0.8em;

    margin-left: 1em;

}



.question-note a:active,

.question-note a:visited,

.question-note a:link,

.question-note a:focus {

    text-decoration: underline;

    color: inherit;

}



.question-note a:hover {

    text-decoration: underline;

    color: #666666;

}



/**********************************************************

 * Antworten allgemein                                    *

 **********************************************************/

.one-column .mc-question-answer > span,

.one-column .number-question-refuse-answer > span,

.one-column .question-answer:not(.question-other-answer) label,

.scaled-question-answer > span,

.polarity-question-answer > span,

.number-question-unary-answer > span,

.scaled-question-answer label,

.polarity-question-answer label,

.number-question-unary-answer label {

    display: block;

}



.question-answer label > input[type=checkbox],

.question-answer label > input[type=radio] {

    margin: 0;

}



.answer-container {

    display: inline-flex;

    align-items: first baseline;

    margin: .5em;

}



.answer-text {

    padding-left: .5em;

}



.mc-ms-question-other-answer .answer-text {

    padding-left: 0;

    padding-right: .5em;

}



/**********************************************************

 * MC-Fragen                                              *

 **********************************************************/

.mc-question-answer:hover,

.number-question-refuse-answer:hover,

.question-refuse-answer:hover {

    background: #C0C0C0;

}



.mc-question-answer.ui-corner-all,

.question-refuse-answer.ui-corner-all {

    border: 1px solid #E5E5E5;

    display: inline-block;

}



.multiple-columns .question-answer {

    display: inline-block;

}



.mc-question .one-column .question-answer {

    display: block;

}



.mc-question-answer.selected-answer {

    background: #E5E5E5;

}



.one-column .question-other-answer label.answer-container {

    display: flex;

}



.one-column .question-other-answer span.answer-container {

    display: flex;

    margin-left: 0;

    margin-right: 0;

    padding-left: .5em;

    padding-right: .5em;

}



.question-other-answer input[type="text"]{

    width: 100%;

    min-width: 18em;

}



/**********************************************************

 * Freitextfragen                                         *

 **********************************************************/

.freeText-question-answer textarea {

    font-size: 1.25em;

    overflow: auto;

    max-width: 99.3%;

    min-width: 99.3%;

}



.freeText-question-answer input[type="text"] {

    font-size: 1.25em;

    max-width: 99.3%;

    min-width: 99.3%;

}



/**********************************************************

 * Zahlenwertfragen                                       *

 **********************************************************/

.number-question-answer-pattern, .number-question-unary-answer {

    display: inline-block;

    vertical-align: middle;

}



.numer-question-refuse-answer {

    margin-left: 0;

}



.unary-number-question {

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    overflow: hidden;

}



.unary-number-question > * {

    height: inherit;

}



/**********************************************************

 * Rangordnungsfragen                                     *

 **********************************************************/

.ranking-question-body {

    display: grid;

    display: -ms-grid;

}



.sort-target-info {

    grid-row: 1;

    -ms-grid-row: 1;

}



.sortable.target {

    grid-row: 2;

    -ms-grid-row: 2;

    min-height: 3em;

}



.sort-source-info {

    grid-row: 3;

    -ms-grid-row: 3;

}



.sortable.source {

    grid-row: 4;

    -ms-grid-row: 4;

}



.ranking-question-body > * {

    margin: 1em;

    padding: 0;

}



.ranking-question .question-refuse-answer {

    margin-left: 1em;

}



.sortable.target,

.sortable.source {

    list-style: none;

}



ul.sortable.source {

    outline: dashed 1px #87CEFA;

}



ul.sortable.target {

    outline: dashed 1px #A2FA91;

}



.ranking-question-body .sortable.disabled {

    outline: dashed 1px #E0E0E0;

}



.ranking-question-body .sortable.disabled li {

    color: #E0E0E0;

}



.sortable li {

    padding: .5em;

}



.sortable.source li {

    border: inset 1px #87CEFA;

}



.sortable.target li {

    border: inset 1px #A2FA91;

}



/**********************************************************

 * Skalierte Fragen                                       *

 **********************************************************/

.scaled-question-group {

}



.scaled-question-answer {

    text-align: center;

    height: 2.5em;

}



.scaled-question-text {

    text-align: left;

    padding-left: .5em;

    padding-right: .5em;

    font-weight: bold;

}



.scaled-block-padding-big {

    padding-top: 1em;

    padding-bottom: 1em;

}



.scaled-block-padding-normal {

    padding-top: .25em;

    padding-bottom: .25em;

}



.scale-label {

    vertical-align: bottom;

    padding-bottom: .25em;

}



.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%;

}



.slider {

    vertical-align: middle;

    padding: .5em 1em;

}



.scaled-block-refuse {

    border-left: 1px solid #999999;

}



/**********************************************************

 * Polaritätsprofil-Fragen                                *

 **********************************************************/



.polarity-label-left {

    text-align: right;

}



.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;

}



/**********************************************************

 * Bilder im Fragebogen                                   *

 **********************************************************/

.imageQuestion {

    text-align: center;

}



/**********************************************************

 * Erläuterungen                                          *

 **********************************************************/

.explanation {

    font-size: 1em;

    margin-top: 10px;

    margin-bottom: 10px;

    margin-left: 5px;

    padding: 2px 30px 2px 5px;

}



/**********************************************************

 * Navigations-Container & -Buttons                       *

 **********************************************************/

.page-nav-container {

    padding: 1rem .5rem;

    margin: 1em 0 0 !important;

    box-sizing: border-box;

}



.ui-button {

    padding: .1em 1em;

    text-align: center;

    cursor: pointer;

    line-height: inherit;

    width: auto;

}



.next-page-button-container > .ui-button:hover,

.prev-page-button-container > .ui-button:hover,

.next-page-button-container > .ui-button:focus,

.prev-page-button-container > .ui-button:focus {

    cursor: pointer;

}



.prev-page-button-container > .ui-button,

.next-page-button-container > .ui-button {

    width: 100%;

    white-space: normal;

}



.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;

}



/* Fortschrittsbalken

 */

.progress-bar-container {

    clear: both;

}



.page-nav-container .progress-label {

    height: 0;

    line-height: 1.9em;

    text-align: center;

    font-weight: bold;

    margin: 0;

}



.ui-progressbar {

    box-sizing: border-box;

}



.ui-progressbar .ui-progressbar-value {

    margin: 0;

    position: relative;

    overflow: hidden;

}



/**********************************************************

 * allgemeine Anpassungen gegenüber jquery-ui             *

 **********************************************************/



.ui-dialog .ui-dialog-content {

    text-align: left;

}



.ui-widget {

    font-size: 1em;

    font-family: inherit;

}



.ui-widget input,

.ui-widget select,

.ui-widget textarea,

.ui-widget button {

    font-family: inherit;

}



.ui-widget-header {

    border: inherit;

    background: inherit;

}



.ui-state-hover,

.ui-widget-content .ui-state-hover,

.ui-widget-header .ui-state-hover,

.ui-state-focus,

.ui-widget-content .ui-state-focus,

.ui-widget-header .ui-state-focus,

.ui-state-active,

.ui-widget-content .ui-state-active,

.ui-widget-header .ui-state-active {

    background: rgba(255, 255, 255, 0.5);

    color: #363636;

}



.ui-state-hover a,

.ui-state-hover a:hover,

.ui-state-hover a:link,

.ui-state-hover a:visited,

.ui-state-focus a,

.ui-state-focus a:hover,

.ui-state-focus a:link,

.ui-state-focus a:visited {

    color: #FFFFFF;

}



html .ui-button.ui-state-disabled:hover,

html .ui-button.ui-state-disabled:active,

html body .ui-button.ui-state-default,

html body .ui-button,

html body a.ui-button {

    padding: .25em .5em;

    text-align: center;

    cursor: pointer;

    font-size: .95em;

}



/**********************************************************

 * Banner                                                 *

 **********************************************************/



.box-heading {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    padding-top: 1em;

}



.box-heading h1 {

    font-weight: normal;

    flex-grow: 1;

}



.logo {

    max-height: 6em;

    max-width: 100%;

}



/**********************************************************

 * Hauptanzeige                                           *

 **********************************************************/



h2.ui-widget-header {

    font-weight: normal;

}



.content-width {

    text-align: left;

    position: relative;

    max-width: 70em;

    min-width: 19em;

    margin: 0 auto;

}



.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;

}



/**********************************************************

 * Footer                                                 *

 **********************************************************/

.box-footing {

    text-align: center;

    margin-bottom: 1em;

    font-size: 80%;

}



/**********************************************************

 * Feedback-Panels                                        *

 **********************************************************/

ul.feedbackPanel {

    padding: .25em;

    margin: 0;

    text-align: left;

    list-style: none;

}



ul.feedbackPanel li {

    padding: .5em;

}



li.feedbackPanelSUCCESS {

    color: #009900;

}



li.feedbackPanelINFO {

    color: #000000;

}



.block-validation {

    margin: 0 1em;

}



/**********************************************************

 * HTML-Quittung                                          *

 **********************************************************/

table.summary {

    width: 100%;

}



table.summary td,

table.summary th {

    border: 0 none;

    padding: 3px;

}



table.summary td[colspan="2"] {

    border-right: 0;

}



table.summary td.summary-headline {

    font-weight: bold;

}



/* media-queries und davon abhängige Angaben

 */



.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;

}





@media screen and (max-width: 34em) {



    html body .ui-button {

        padding: .5em 1em;

    }



    .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;

    }



    .single-scale .mobile-only .empty-cell {

        display: none !important;

    }



    .individually-labeled .answers-table .scaled-question-answer:not(.slider-answer) {

        display: grid;

        width: 100% !important;

        grid-template-columns: 2.5em auto;

        grid-template-rows: 2.5em;

        display: -ms-grid;

        -ms-grid-columns: 2.5em auto;

        -ms-grid-rows: 2.5em;

    }



    .individually-labeled .answers-table .scaled-question-answer:not(.slider-answer) > input {

        grid-column: 1;

        justify-self: center;

        align-self: center;

        -ms-grid-column: 1;

        -ms-justify-self: center;

        -ms-align-self: center;

    }



    .individually-labeled .answers-table .scaled-question-answer:not(.slider-answer) > span {

        grid-column: 2;

        justify-self: left;

        align-self: center;

        -ms-grid-column: 2;

        -ms-justify-self: left;

        -ms-align-self: center;

    }



    .individually-labeled .slider-answer {

        display: block;

        width: auto !important;

        margin-bottom: 0;

    }



    .scaled-question-answer.ui-corner-all:hover {

        background: #C0C0C0;

    }



    .individually-labeled .scaled-question-answer.ui-corner-all {

        border: 1px solid #E5E5E5;

    }



    .individually-labeled .scaled-question-answer {

        margin-bottom: .5em;

    }



    .individually-labeled .answers-table {

        padding: .5em;

    }



    .selected-answer {

        background: #E5E5E5;

    }



    .polar-labeled .slider-refuse-text.mobile-only {

        display: none;

    }



    .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-label-left,

    .polarity-label-right {

        display: none;

    }



    .polarity-answer {

        display: grid;

        display: -ms-grid;

        height: 3em;

        flex-grow: 1;

    }



    .polarity-answer input {

        margin: auto;

    }



    .polarity-refuse {

        display: grid;

        grid-template-columns: auto 2.5em;

        grid-template-rows: 3em;

        display: -ms-grid;

        -ms-grid-columns: auto 2.5em;

        -ms-grid-rows: 3em;

        width: 100% !important;

        border: 0;

        margin-right: 1em;

        margin-left: 1em;

    }



    .polarity-refuse > span {

        grid-column: 1;

        justify-self: end;

        align-self: center;

        -ms-grid-column: 1;

        -ms-justify-self: end;

        -ms-align-self: center;

    }



    .polarity-refuse > input {

        grid-column: 2;

        -ms-grid-column: 2;

        margin: auto;

    }



    .polarity-mobile-header:not(:first-child) {

        border-top: 1pt solid #E0E0E0;

        margin-top: 1em;

    }





    .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;

    }

}



#debug {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 1em;

    height: 1em;

    background-color: red;

}



@media screen and (min-width: 34em) {



    body {

        padding-left: 1em;

        padding-right: 1em;

    }



    .box-heading {

        padding-bottom: 2em;

    }



    .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;

    }



    .progress-bar-container {

        margin-left: 10em;

        margin-right: 10em;

        clear: none;

    }



    .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;

    }



    .double-scale-divider {

        border-left: 2pt solid;

    }



    .polarity-refuse > span {

        display: none;

    }



    .polarity-mobile-header {

        display: none;

    }



    /*********************************************************

    * Rangordnungsfragen (Desktop)                           *

    **********************************************************/



    .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;

    }



    /**********************************************************

     * Zebramuster                                            *

     **********************************************************/

    div.zebra:nth-of-type(even),

    div.zebra-inv:nth-of-type(odd) {

        background: #FFFFFF;

    }



    div.zebra:nth-of-type(odd),

    div.zebra-inv:nth-of-type(even) {

        background: #E0E0E0;

    }



    .zebra:hover,

    .zebra-inv:hover {

        background: #C0C0C0;

    }



    #debug {

        background-color: green;

    }

}



/*!

 * jQuery UI CSS Framework 1.12.1

 * Released under the MIT license.

 * http://jquery.org/license

 */



body {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 1em;

}



/* Component containers

----------------------------------*/

.ui-widget {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 1em;

}



.ui-widget .ui-widget {

    font-size: 1em;

}



.ui-widget input,

.ui-widget select,

.ui-widget textarea,

.ui-widget button {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 1em;

}



.ui-widget.ui-widget-content {

    border: 1px solid #000000;

}



html {

    background: #ebebeb;

    color: #282828;

}



.ui-widget {

    border: 1px solid #ffffff;

    background: #ffffff;

    color: #282828;

}



.ui-widget-content {

    border: 1px solid #ebebeb;

    background: #ebebeb;

    color: #282828;

}



.ui-widget-content a {

    color: #282828;

}



.ui-widget-header {

    border: 1px solid transparent;

    background: transparent;

    color: #000000;

    font-weight: bold;

}



.ui-widget-header a {

    color: #000000;

}



/* Interaction states

----------------------------------*/

.ui-state-default,

.ui-widget-content .ui-state-default,

.ui-widget-header .ui-state-default,

.ui-button,

    /* We use html here because we need a greater specificity to make sure disabled

    works properly when clicked or hovered */

html .ui-button.ui-state-disabled:hover,

html .ui-button.ui-state-disabled:active {

    border: 1px solid #000000;

    background: #353535;

    font-weight: normal;

    color: #d4d4d4;

}



.ui-state-default a,

.ui-state-default a:link,

.ui-state-default a:visited,

a.ui-button,

a:link.ui-button,

a:visited.ui-button,

.ui-button {

    color: #d4d4d4;

    border: 1px solid #000000;

    background: #000000;

    text-decoration: none;

}



.ui-state-hover,

.ui-widget-content .ui-state-hover,

.ui-widget-header .ui-state-hover,

.ui-state-focus,

.ui-widget-content .ui-state-focus,

.ui-widget-header .ui-state-focus,

.ui-button:hover,

.ui-button:focus {

    border: 1px solid #353535;

    background: #353535;

    font-weight: normal;

    color: #fcd900;

}



.ui-state-hover a,

.ui-state-hover a:hover,

.ui-state-hover a:link,

.ui-state-hover a:visited,

.ui-state-focus a,

.ui-state-focus a:hover,

.ui-state-focus a:link,

.ui-state-focus a:visited,

a.ui-button:hover,

a.ui-button:focus {

    color: #fcd900;

    background-color: #353535;

    text-decoration: none;

}



.ui-visual-focus {

    box-shadow: 0 0 3px 1px rgb(94, 158, 214);

}



.ui-state-active,

.ui-widget-content .ui-state-active,

.ui-widget-header .ui-state-active,

a.ui-button:active,

.ui-button:active,

.ui-button.ui-state-active:hover {

    border: 1px solid #353535;

    background: #353535;

    font-weight: normal;

    color: #fcd900;

}



.ui-icon-background,

.ui-state-active .ui-icon-background {

    border: #353535;

    background-color: #fcd900;

}



.ui-state-active a,

.ui-state-active a:link,

.ui-state-active a:visited {

    color: #fcd900;

    text-decoration: none;

}



input:focus,

textarea:focus,

button:focus {

    outline: 2pt solid #353535;

}



/* Interaction Cues

----------------------------------*/

.ui-state-highlight,

.ui-widget-content .ui-state-highlight,

.ui-widget-header .ui-state-highlight {

    border: 1px solid #353535;

    background: #ebebeb;

    color: #000000;

}



.ui-state-checked {

    border: 1px solid #353535;

    background: #ebebeb;

}



.ui-state-highlight a,

.ui-widget-content .ui-state-highlight a,

.ui-widget-header .ui-state-highlight a {

    color: #000000;

}



.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;

}



.ui-priority-primary,

.ui-widget-content .ui-priority-primary,

.ui-widget-header .ui-priority-primary {

    font-weight: bold;

}



.ui-priority-secondary,

.ui-widget-content .ui-priority-secondary,

.ui-widget-header .ui-priority-secondary {

    opacity: .7;

    font-weight: normal;

}



.ui-state-disabled,

.ui-widget-content .ui-state-disabled,

.ui-widget-header .ui-state-disabled {

    opacity: .35;

    background-image: none;

}



/* Progress Bar*/

.ui-progressbar-value {

    background: transparent;

}



.ui-progressbar-value .progress-label {

    color: #000000;

}



/* Misc visuals

----------------------------------*/



/* Corner radius */

.ui-corner-all,

.ui-corner-top,

.ui-corner-left,

.ui-corner-tl {

    border-top-left-radius: 0;

}



.ui-corner-all,

.ui-corner-top,

.ui-corner-right,

.ui-corner-tr {

    border-top-right-radius: 0;

}



.ui-corner-all,

.ui-corner-bottom,

.ui-corner-left,

.ui-corner-bl {

    border-bottom-left-radius: 0;

}



.ui-corner-all,

.ui-corner-bottom,

.ui-corner-right,

.ui-corner-br {

    border-bottom-right-radius: 0;

}



/* Overlays */

.ui-widget-overlay {

    background: #000000;

    opacity: .3;

}



.ui-widget-shadow {

    -webkit-box-shadow: 0 0 5px #666666;

    box-shadow: 0 0 5px #666666;

}



/* We use #burger-container here because we need a greater specificity */

#burger-container .burger-bar1,

#burger-container .burger-bar2,

#burger-container .burger-bar3 {

    background: #d4d4d4;

}



/* We use #burger-container here because we need a greater specificity */

#burger-container .burger-bar1:hover,

#burger-container .burger-bar2:hover,

#burger-container .burger-bar3:hover {

    background: #fcd900;

}



.header-footer {

    border: 1px solid #353535;

    background-color: #353535;

    color: #fffff;

}



.page-nav-container {

    border-top: 1px solid transparent;

    background: transparent;

    color: #282828;

}



.box-content {

    border-bottom: 1px solid transparent;

    border-left: 1px solid transparent;

    border-right: 1px solid transparent;

    background: #ebebeb;

    color: #282828;

    overflow: hidden;

}



.header-footer a:not(.nav-item),

.header-footer a:not(.nav-item):visited,

.header-footer a:not(.nav-item):active {

    background: transparent;

    color: #ffffff;

    text-decoration: none;

}



.header-footer a:not(.nav-item):hover {

    background: transparent;

    color: #ffffff;

    text-decoration: underline solid;

}



table.dataview .headers th > a,

table.dataview .headers th > a:visited,

table.dataview .headers th > span,

.box-content a:not(.disabled-link):not([disabled]):not(.ui-button),

.box-content a:not(.disabled-link):not([disabled]):not(.ui-button):visited,

.ui-widget-content a:not(.disabled-link):not([disabled]):not(.ui-button),

.ui-widget-content a:not(.disabled-link):not([disabled]):not(.ui-button):visited,

.ui-widget-content a:not(.disabled-link):not([disabled]):not(.ui-button):active {

    background: transparent;

    color: #a6921a;

    text-decoration: none;

}



table.dataview .headers th > a:hover,

.box-content a:not(.disabled-link):not([disabled]):not(.ui-button):hover,

.ui-widget-content a:not(.disabled-link):not([disabled]):not(.ui-button):hover {

    background: transparent;

    color: #a6921a;

    text-decoration: underline solid;

}



html > body .search-input {

    border: 1pt solid #000000;

}



html > body .search-input:hover {

    border-color: #353535;

}



html > body .search-input:focus {

    border-color: #353535;

}



.detail-results-item {

    border: 1pt solid #282828;

}



table.dataview .navigator .goto a[disabled="disabled"] {

    border: 1pt solid #a6921a;

}



@media screen and (max-width: 34em) {

    /* Battery & scaled questions for mobile */

    .scaled-question-text {

        border: 1px solid transparent;

        background: transparent;

        color: #000000;

        font-weight: bold;

    }

}



/* anpassungen */



h1, h2 {

    text-align: center;

    font-family: "adobe-garamond-pro",garamond,serif;

    font-weight: 400;

    font-style: italic;

}





@font-face {

  font-family: adobe-garamond-pro;

  src: url("https://use.typekit.net/af/e4771c/0000000000000000000130e5/27/l?subset_id=1&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/e4771c/0000000000000000000130e5/27/d?subset_id=1&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/e4771c/0000000000000000000130e5/27/a?subset_id=1&fvd=i4&v=3") format("opentype");

  font-style: italic;

  font-weight: 400;

}



html {

		 background-color: #d2d2d2;

		 color: #282828;

}



body {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 1em;   

    padding: 0;

    position: absolute;

		 top: 0;

		 bottom: 0;

		 width: 100%;

}



#customHtmlId { 

    position: absolute;

		 top: 0;

		 bottom: 0;

		 width: 100%;

}



.flex-wrap {    

    display: flex;

		 min-height: 100%;

    flex-direction: column;

    align-content: stretch;

}



.header-footer {

    border: 0;

    margin: 0;

}



.box-heading {

    padding: 0;

}



.box-heading h1 {

    color: #fff;

    text-align: left;

    padding-left: 1em;

}



.box-content {

    flex-grow: 1;

    overflow: visible;

}



.box-footing {

    padding: 1em 2em;

}



.footer {   

    font-weight: bold;  

}



.question-title-text, 

.scaled-question-text {

    font-weight: normal;

    padding: .5em 1em;

}



.ranking-question-body ul > li.ui-sortable-handle {

    border: 1pt solid #505050;

    box-shadow: 1pt 1pt .25em #b0b0b0;

    background-color: #fff;

}



.ranking-question-body ul.sortable.source {

    outline: none;

}



.ranking-question-body ul.sortable.target {

    outline: 4pt dashed #c4c4c4;

}



#questionForm > div > .ui-widget {

    margin: .25em;

    background-color: #ffffff;

}



.question-body {

    border-width: 2pt 0 0 0;

    background-color: transparent;

    padding: 1em;

}



.page-nav-container {

    background-color: #ffffff;

}



html body .ui-button,

html body .ui-button:hover,

html > body .page-nav-container .ui-button,

html > body .page-nav-container .ui-button:hover {

    padding: .5em 1.5625em;

    font-weight: bold;

    font-size: 1em;

    line-height: 1.125;

}



.prev-page-button-container > .ui-button:not(:first-child),

.next-page-button-container > .ui-button:not(:first-child) {

    margin-top: .5em;

}



.prev-page-button-container > .ui-button:last-child,

.next-page-button-container > .ui-button:last-child {

    margin-bottom: 0;

}



.progress-bar-container {

    padding-top: 1em;

}



.ui-progressbar-value {

    background-color: #fcd900;

}



@media screen and (min-width: 34em) {

    

    div.zebra:nth-of-type(odd),

    div.zebra:nth-of-type(even),

    div.zebra-inv:nth-of-type(odd),

    div.zebra-inv:nth-of-type(even) {

        background-color: transparent       

    }

    

    div.zebra,

    div.zebra-inv {

        border-top: 2pt solid #e5e5e5;

    }

    

    .scaled-question-group > .table-inline {

        border-collapse: collapse;

    }



    .progress-bar-container {

        padding-top: .3125em;

    }

    

    #questionForm > div > .ui-widget {

        margin: 1em;

    }

    

    .page-nav-container {

        margin: 1em !important;

    }

}



.centered {

    text-align: center;

}