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

 * allgemeine Definitionen fuer HTML Elemente             *

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

html {

    font-size: 100.01%

}



body {

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

    font-size: .9em;

    text-align: center;

    color: #000000;

    background-color: #FFFFFF;

    margin: 0 0 0 0.5%;

    height: 100%;

    padding: 0;

    width: 99%;

}



h1, h2, h3, h4 {

    margin: 0;

    padding-top: 5px;

    padding-right: 10px;

    padding-bottom: 5px;

}



th, h3, h4 {

    text-align: left;

    font-size: 0.95em;

}



table {

    border-spacing: 0;

}



td {

    padding: 0;

}



img {

    border-style: none;

}



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

 * Textstile                                              *

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

.bold {

    font-weight: bold;

}



.winzig {

    font-size: 0.7em;

}



p.inline {

    display: inline;

    margin: 0;

    padding: 0;

}



p.qp_error_text {

    color: #FF0000;

}



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

 * Ãœberschriften                                          *

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

h2 {

    padding-left: 5px;

    font-weight: normal;

    font-size: 1.05em;

}



h2.content, div.content {

    background-color: #FFFFFF;

    color: #000000;

}



h2.error {

    color: #FFFFFF;

    background-color: #E50000;

}



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

 * Links allgemein                                        *

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

a:visited, a:link {

    color: #2F2F2F;

}



a:hover, a:focus, a:active {

    color: #B0B0B0;

    text-decoration: none;

}



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

 * Listen                                                 *

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

ul.liste {

    margin-top: 5px;

    list-style-type: square;

}



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

 * 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 {

    font-size: 0.9em;

    padding: 0;

    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 {

    background: #FFFFFF;

    color: #0576BA;

    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: 0px;

    word-wrap: break-word;

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

    /*border: 1pt dotted grey;*/

}



.table-row {

    display: table-row;

    border-width: 0px;

}



.table-fixed {

    display: table;

    table-layout: fixed;

    border-width: 0px;

}



.table-inline {

    display: inline-table;

    table-layout: fixed;

    border-width: 0px;

    width: 100%;

    height: 100%;

}



.table {

    display: table;

}



.growX {

    width: 100%;

}



.growY {

    height: 100%;

}



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

 * Später-Fortsetzen & Daten-Löschen                      *

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

form.resume-later-button-form {

    float: right;

    clear: both;

    margin: 2px 4px;

}



div.delete-popup-div,

div.resume-later-popup-div {

    background: #DAEDFA;

    border: 1px solid #0576BA;

    border-radius: 5px;

    padding: 1em;

    display: none;

    position: absolute;

    right: -2px;

    top: 0;

    z-index: 999;

}



a.resumeLaterButton {

    border: 1px solid #0576BA;

    border-radius: 5px;

}



a.resumeLaterButton:hover {

    background: #0576BA;

}



a.resumeLaterButton > img {

    height: 40px;

}



.ui-icon.ui-icon-close {

    background-position: -80px -128px;

    border-bottom-left-radius: .5em;

    border-top-right-radius: .5em;

    border-bottom: 1px solid #0576BA;

    border-left: 1px solid #0576BA;

    cursor: pointer;

    position: absolute;

    right: 0;

    top: 0;

    background-color: #DAEDFA;

}



.ui-icon.ui-icon-close:hover {

    background-color: #FFF;

}



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

 * Sprachauswahl                                          *

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

form.language-box {

    position: absolute;

    right: 10px;

    top: 118px;

}



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

 * Fragen allgemein                                       *

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

div.question-row {

    margin: 0 0 10px 0;

    padding: 0;

}



.question-head {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 2px 0;

    margin: 0;

    display: inline-block;

    vertical-align: top;

}



td.question-head {

    display: table-cell;

}



div.question-body {

    text-align: left;

    height: 100%;

    overflow: hidden;

    position: relative;

    padding: 10px 10px 2px;

}



.question-answer {

    margin-bottom: 8px;

}



.question-title-text {

    position: relative;

    padding-left: 10px;

    padding-right: 10px;

}



#questionForm > div {

    margin: 23px 20px 0;

    border: 1px solid #FFFFFF;

}



#questionForm > div.subHeading + div,

#questionForm > div.imageQuestion + div,

#questionForm > div:not(:first-child) + div.explanation,

#questionForm > div.explanation + div {

    margin-top: 0;

    border-top: none;

}



#questionForm > div.noSpace {

    margin-top: 0 !important;

}



#questionForm > div.defaultSpace {

    border: 1px solid #DAEDFA;

    margin-top: 23px !important;

}



#questionForm > div.largeSpace {

    border: 1px solid #DAEDFA;

    margin-top: 46px !important;

}



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

 * Markierung von Zwangsfragen                            *

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

.question-attribute-icon {

    display: inline-block;

    padding: 1pt;

    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 .selected {

    background: #E5E5E5;

}



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

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

    margin: 0;

}



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

 * Zebramuster                                            *

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

.zebra:nth-child(even),

.zebra-inv:nth-child(odd) {

    background: #FFFFFF;

}



.zebra:nth-child(odd),

.zebra-inv:nth-child(even) {

    background: #E0E0E0;

}



.zebra:hover,

.zebra-inv:hover {

    background: #C0C0C0;

}



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

 * MC-Fragen                                              *

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

.mc-question-answer:hover {

    background: #C0C0C0;

}



.mc-question-answer > span, .number-question-refuse-answer > span {

    border: 1px solid #E5E5E5;

    padding: 2px 2px 2px 21px;

    text-indent: -19px;

    display: inline-block;

}



.multiple-columns .question-answer {

    display: inline-block;

}



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

 * Freitextfragen                                         *

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

.freeText-question-answer textarea {

    font-size: 1.25em;

    overflow: auto;

    max-width: 99.3%;

    min-width: 99.3%;

}



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

 * Zahlenwertfragen                                       *

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

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

    display: inline-block;

}



.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 > .question-body {

    overflow: visible;

}



.ranking-question-body > div {

    display: table-row;

}



.ranking-question-body > div > div {

    display: table-cell;

    width: 49%;

}



.ranking-question-body div.source {

    padding-right: 1%;

}



.ranking-question-body div.target {

    padding-left: 1%;

}



.ranking-question-body ul.sortable {

    padding: 0;

    list-style-type: none;

    vertical-align: top;

    width: 100%;

    display: block;

    float: left;

}



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

    outline: dashed 1px #87CEFA;

}



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

    outline: dashed 1px #A2FA91;

}



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

    outline: dashed 1px #E0E0E0 !important;

}



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

    color: #E0E0E0 !important;

}



.ranking-question-body ul.sortable li {

    border-radius: 3px;

}



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

    border: inset 1px #87CEFA;

}



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

    border: inset 1px #A2FA91;

}



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

 * Skalierte Fragen                                       *

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

.scaled-question-group {

}



.scaled-question-answer {

    text-align: center;

}



.scaled-block-refuse {

    text-align: center;

    border-left: 1px solid #999999;

}



.scaled-question-text {

    text-align: left;

    margin-left: .5em;

    margin-right: .5em;

}



.scaled-question-text > span {

    font-weight: bold;

}



.scale-label {

    vertical-align: bottom;

}



.polar-label-left {

    text-align: left;

}



.polar-label-right {

    text-align: right;

}



.scale-label-content,

.scale-title-content {

    margin: .5em;

}



.double-scale-divider {

    border-left: 2pt solid;

}



.double-scale-table {

    display: inline-table;

    table-layout: fixed;

    width: 100%;

    height: 100%;

}



.slider {

    vertical-align: middle;

    padding: 10pt 8pt;

}



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

 * Polaritätsprofil-Fragen                                *

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



.polarity-label-left {

    text-align: right;

}



.polarity-label-right {

    text-align: left;

}



.polarity-label-top {

    vertical-align: bottom;

}



.polarity-answer,

.polarity-label-top {

    text-align: center;

}



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

 * Bilder im Fragebogen                                   *

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

.imageQuestion {

    text-align: center;

}



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

 * Zwischenüberschriften                                  *

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

div.subHeading {

    background: none repeat scroll 0 0 #888888;

    color: #000000;

    padding: 2px 5px;

}



div.subHeading + div.subHeading {

    border-top: none;

}



h3.kopf {

    padding-top: 4px;

    padding-bottom: 4px;

}



td.subHeading {

    padding: 5px;

    border-bottom: 15px solid #FFFFFF;

}



h4.subHeading {

    margin-top: 0;

    margin-bottom: 0;

    padding-top: 0;

    padding-bottom: 0;

}



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

 * Erläuterungen                                          *

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

div.explanation {

    font-size: 1em;

    margin-top: 10px;

    margin-bottom: 10px;

    margin-left: 5px;

    padding: 2px 30px 2px 5px;

}



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

 * Tooltips                                               *

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

.tooltip-text {

    display: none;

}



.tooltip-body {

    text-align: left;

}



.popup-target {

    cursor: pointer;

}



.popup-div {

    position: absolute;

    background-color: #FFFFFF;

    border: 1pt solid #0576BA;

    border-radius: .5em;

    padding: 1em;

    display: block;

    z-index: 999;

    font-weight: normal;

}



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

 * Navigations-Container & -Buttons                       *

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

div.page-nav-container {

    background: #FFFFFF;

    padding: 8px 0;

    margin: 1em 0 0 !important;

    display: inline-block;

    width: 100%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    /*runde ecken - selber radius in: div.cornered, div.box-content, div.contentContainer, div.page-nav-container*/

    border-bottom-left-radius: 1em;

    border-bottom-right-radius: 1em;

    border-color: #FFFFFF;

}



div.page-nav-container:after {

    content: ".";

    clear: both;

    display: block;

    visibility: hidden;

    height: 0;

}



div.page-nav-container div {

    margin: 0 7px;

}



div.next-page-button-container > .ui-button,

div.prev-page-button-container > .ui-button {

    padding: 2px;

    border: 1px solid #FFFFFF;

    color: #000000;

    background: #b2b1b1;

    text-align: center;

    cursor: pointer;

    font-size: .95em;

    width: auto;

}



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

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

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

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

    background: #FFFFFF;

    color: #000000;

    cursor: pointer;

}



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

div.next-page-button-container > .ui-button,

form.resume-later-button-form .ui-button {

    width: 100%;

    white-space: normal;

}



div.prev-page-button-container {

    width: 175px;

    float: left;

}



div.next-page-button-container {

    width: 175px;

    float: right;

}



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

 * Fortschrittsbalken                                     *

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

div.page-nav-container div.progress-bar-container {

    margin: 0 189px;

}



.page-nav-container .progress-label {

    height: 0;

    line-height: 1.9em;

    text-align: center;

    font-weight: bold;

    margin: 0;

}



.ui-progressbar {

    border: 1px solid #000000;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}



.ui-progressbar .ui-progressbar-value {

    margin: 0;

    position: relative;

    background: #B2B1B1;

    overflow: hidden;

}



.ui-progressbar-value .progress-label {

    color: #000000;

}





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

 * allgemeine Anpassungen gegenüber jquery-ui             *

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

.ui-button {

    display: inherit;

    position: inherit;

}



input.ui-button {

    padding: 1px;

}



.ui-dialog .ui-dialog-content {

    text-align: left;

}



.ui-widget {

    font-family: inherit;

    font-size: 0.9em;

}



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

    background: #F86752 url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;

    color: #FFFFFF;

}



.ui-state-active,

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

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

    background: #FFFFFF url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;

}



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

}



.ui-widget-header {

    background-color: #FFFFFF;

    color: #000000;

}



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

 * Banner                                                 *

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

div.box-heading {

    padding: 0px 0 0px 0px;

    min-height: 140px;

    background-repeat: repeat-x;

    background-position: 0 0px;

}



div.box-heading > div {

    margin-top: 0px;

}



div.box-heading div.box-heading-text {

    float: left;

    padding-top: 25px;

    margin-left: 0px;

    vertical-align: top;

    font-size: 18pt;

    color: #000000;

    font-weight: normal;

}



div.box-heading div.box-heading-img {

    float: left;

    background-color: #FFFFFF;

    padding: 0px 0px;

    border-radius: 0px;

    -moz-border-radius: 0px;

    -webkit-border-radius: 0px;

    border: 0px solid #FFFFFF;

    display: inline-block;

    line-height: 100px;

    max-width: 40%;

}



div.box-heading img.logo {

    max-height: 100px;

    max-width: 100%;

    vertical-align: left;

}



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

 * Header                                                 *

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

h2.qp_page_heading {

    margin-left: 0;

    padding-left: 0;

    font-size: 16pt;

    color: #000000;

    background: #FFFFFF;

}



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

 * Hauptanzeige                                           *

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

div.contentContainer {

    clear: left;

    padding: 0 0 0px;

    margin: 0;

    width: 100%;

    background-color: #FFFFFF;

    /*runde ecken - selber radius in: div.cornered, div.box-content, div.contentContainer, div.page-nav-container*/

    border-bottom-left-radius: 1em;

    border-bottom-right-radius: 1em;

}



div.cornered {

    text-align: left;

    position: relative;

    max-width: 1000px;

    background-color: #FFFFFF;

    /*runde ecken - selber radius in: div.cornered, div.box-content, div.contentContainer, div.page-nav-container*/

    border-radius: 1em;

    border: 0px solid #ffffff;

    margin: 0px auto 0;

}



div.box-content {

    padding: 10px 0 0;

    background-color: #FFFFFF;

    /*runde ecken - selber radius in: div.cornered, div.box-content, div.contentContainer, div.page-nav-container*/

    border-bottom-left-radius: 1em;

    border-bottom-right-radius: 1em;

}



div.contentContainer > * {

    margin: 0 20px;

}



div.questionnaire {

    width: 95%;

    margin: 0 auto 5px auto;

}



div.browserwarning {

    text-align: center;

    font-weight: bold;

    border: 1px solid red;

    margin-bottom: 5px;

    padding: 2px 2px 2px 5px;

}



div.simplecaptcha {

    margin-bottom: 20px;

    padding: 5px;

}



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

 * Footer                                                 *

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

div.box-footing {

    text-align: center;

    color: #888;

}



a.footer:visited, a.footer:link, a.footer:hover, a.footer:focus, a.footer:active {

    text-decoration: none;

    color: #8FBEF4;

}



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

 * Feedback-Panels                                        *

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

ul.feedbackPanel {

    color: #FF0000;

    list-style-type: none;

    margin: 10px;

    padding: 0;

    text-align: left;

}



ul.feedbackPanel > li {

    font-weight: bold;

}



li.feedbackPanelSUCCESS {

    color: #009900;

}



li.feedbackPanelINFO {

    color: #000000;

}



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

 * HTML-Quittung                                          *

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

table.summary {

    width: 100%;

    border: 1px solid #DAEDFA;

}



table.summary th {

    background: none repeat scroll 0 0 #DAEDFA;

}



table.summary td, table.summary th {

    border: 0 none;

    padding: 3px;

}



table.summary td:first-child, table.summary th:first-child {

    border-right: 1px solid #ffffff;

}



table.summary td.summary-headline {

    font-weight: bold;

}



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

 * Impressum                                              *

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

.overlay-bg {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background: rgba(0, 0, 0, 0.75);

}



.overlay-content {

    background: #FFFFFF;

    padding: 1%;

    width: 50%;

    height: 70%;

    position: relative;

    top: 15%;

    left: 50%;

    margin: 0 0 0 -25%;

    border-radius: 4px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);

    white-space: pre-wrap;

    overflow: auto;

}



.close-btn {

    margin-top: 30px;

    margin-bottom: 10px;

}



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

 * Anonymisierer                                          *

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

input.submit {

    padding: 1px;

    border: 1px solid #6F6F6F;

    background: #0576BA;

    color: #FFFFFF;

    text-align: center;

    cursor: pointer;

    font-size: .9em;

    width: auto;

    vertical-align: middle;

}



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

 * Reset Cache Link                                       *

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

a.resetCache {

    color: #DADADA;

    float: right;

    font-size: 0.9em;

    font-weight: normal;

    margin: 0 10px;

    text-decoration: none;

    position: absolute;

    right: 160px;

    top: 127px;

}



a.resetCache:hover, a.resetCache:focus, a.resetCache:active {

    color: #B0B0B0;

}



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

 * Browserspezifische Anpassungen                         *

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

/* Anpassungen für Firefox */

_::-moz-range-track {

    margin: 0 0 -30px;

}



input.ui-button::-moz-focus-inner,

button.ui-button::-moz-focus-inner {

    border: 0;

    padding: 1px 3px;

}



/* Anpassung für Opera */

_:-o-prefocus {

    margin: 0 0 -29px;

}