html {
    position: relative;
    min-height: 100%;
    border: 0 !important;
}

body {
    line-height: 1.5em;
}

h2, h3 {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
}

h2 {
    line-height: 1.2em;
    padding-top: 1em;
}

h2.ui-widget-header,
.ui-widget-header.battery-heading
{
    text-align: left;
    padding: .5em .75em;
    font-size: inherit;
    margin-bottom: 0;
}

p {
    margin: 0;
    padding: .5em .25em;
}

img {
    max-width: 100%;
}

ul {
    list-style: disc;
    margin: 1em;
    padding-left: 1em;
}

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

select {
    max-width: 100%;
}

/*  PORTAL-LAYOUT
 */

.headstripe {
    min-height: 1.5em;
    text-align: right;
}

.language-list {
    list-style: none;
    margin: 0;
}

.language-list > li {
    display: inline;
    padding: .25em .5em;
}

.language-list > li a.current-language,
.language-list > li a.current-language:hover,
.language-list > li a.current-language:active,
.language-list > li a.current-language:visited {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
}

.language-full {
    display: none;
}

.portaltitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 120%;
    font-size: 2em;
}

.portal-logo-left,
.portal-logo-right {
    display: inline-block;
    margin-top: 1em;
    max-width: 100%;
}

.logo-default {
    width: 19em;
}

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

/* burger menu
 */

#burger-container {
    cursor: pointer;
    z-index: 200;
    position: absolute;
    font-size: 97%;
}

.burger-bar1, .burger-bar2, .burger-bar3 {
    width: 2.1875em; /*35px*/;
    height: 0.3125em; /*5px*/;
    margin: 0.375em /*6px*/ 0;
    transition: 0.4s;
}

/* Rotate first bar */
.burger-change .burger-bar1 {
    -webkit-transform: rotate(-45deg) translate(/*-9px*/ -0.5625em, 0.375em /*6px*/);
    transform: rotate(-45deg) translate(/*-9px*/ -0.5625em, 0.375em /*6px*/);
}

/* Fade out the second bar */
.burger-change .burger-bar2 {
    opacity: 0;
}

/* Rotate last bar */
.burger-change .burger-bar3 {
    -webkit-transform: rotate(45deg) translate(/*-8px*/ -0.5em, /*-8px*/ -0.5em);
    transform: rotate(45deg) translate(/*-8px*/ -0.5em, /*-8px*/ -0.5em);
}

#burger-items-container:not(.burger-open) {
    display: none;
}

#burger-items-container.burger-open {
    position: absolute;
    z-index: 200;
    left: 3.8em;
}

#burger-items-container.burger-open .button {
    padding: 1em 2em;
}

.burger-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 199;
    display: none;
}

html body .navigation-background.ui-state-default {
    border: 0;
    line-height: 100%;
}

.navigationbar {
    height: 2.94em;
}

.navigationbar a {
    text-decoration: none;
}

#help-button {
    position: relative;
    z-index: 199;
}

.help-button-container {
    float: right;
}

.help-button-container .nav-text {
    display: none;
}

.nav-icon {
    vertical-align: middle;
    display: inline-block;
}

.nav-text {
    vertical-align: baseline;
    font-size: 2em;
}

.nav-icon img {
    width: 2em;
    height: 2em;
}

html .navigationbar .nav-item {
    border: 1px solid;
    text-align: left;
    vertical-align: middle;
    display: block;
    cursor: pointer;
}

.nav-item .button {
    padding: .25em .5em;
}

.dropdown-open, .dropdown-close {
    height: .55em;
    vertical-align: middle;
}

.dropdown-open {
    display: inline-block;
}

.dropdown-close {
    display: none;
}

.ui-state-active .dropdown-open {
    display: none;
}

.ui-state-active .dropdown-close {
    display: inline-block;
}

.dropdown-box {
    display: inline-block;
    border: 1px solid #010101;
    border-top-color: #efefef;
    background-color: #efefef;
    border-radius: 0 0 0.3em 0.3em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    padding: 0 1em 1em 1em;
    box-shadow: 0 0.1em 0.1em 0.1em #dadad9;
}

.help-heading {
    text-align: left;
}

.login-password,
.login-submit {
    vertical-align: middle;
    display: block;
    margin-top: .5em;
}

.footer-container {
    margin-top: 2em;
}

.footer {
    text-align: right;
    margin: 0 auto;
    padding-top: .25em;
    padding-bottom: .25em;
    min-height: 1.5em;
}

.shadow {
    display: table;
    height: .3em;
    width: 100%;
}

.shadow-down {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.shadow-up {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.content-width {
    margin-left: auto;
    margin-right: auto;
    padding-left: .5em;
    padding-right: .5em;
}

.text-block {
    padding: 1em;
}

.space-top {
    margin-top: 5em;
}

.chapter {
    min-height: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
    padding-bottom: 0.1em;
}

.win-box {
    display: inline-table;
    margin-left: 1em;
}

.win-box > p {
    display: table-row;
}

.win-box > p > span {
    display: table-cell;
    padding-left: .5em;
    padding-right: .5em;
}

.disabled-link {
    text-decoration: none;
    cursor: default;
}

/** COLUMN LIST
 */
.col-list {
    margin-top: 0;
    list-style: none;
}

.col-list li {
    margin-bottom: .5em;
}

.col-list-item {
    display: inline-block;
    width: 0;
    position: relative;
    left: -1.5em;
}

/* FEEDBACK MESSAGES
 */

.feedback {
    margin: .5em;
}

.scaled-question-group .feedback {
    margin: 0 .5em;
}

.feedback p {
    padding: 1em;
    color: #000000;
}

.question-head .feedback p,
.scaled-question-group .feedback p {
    padding: .25em .5em;
}

.question-head .feedback {
    margin: 0 0 0 1em;
    font-weight: normal;
}

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

/* BREADCRUMBS
 */
.breadcrumbs-top {
    border-bottom: 1px solid #010101;
}

.breadcrumbs-bottom {
    border-top: 1px solid #010101;
}

.breadcrumb-list {
    list-style: none;
    padding-left: 0;
    margin: .25em 0;
    line-height: 1.2em;
    font-size: 80%;
}

.breadcrumb-list li {
    display: inline-block;
    margin-right: .25em;
}

html .breadcrumb-list li:not(:first-child)::before {
    content: "\0203A";
    display: inline-block;
    vertical-align: text-top;
}

/* DATA VIEW
*/

.dataview-toolbar {
    margin-bottom: 1em;
}

.dataview-toolbar-item {
    display: block;
    margin-top: .5em;
    margin-bottom: .5em;
}

.search-bar {
    display: flex;
    font-size: initial;
}

.search-input {
    margin: 0;
}

.search-input.ui-button {
    flex: 0;
    display: grid;
    display: -ms-grid;
}

input[type=search].search-input {
    padding-left: .5em;
}

.search-icon {
    width: 1.2em;
    height: 1.2em;
    min-width: 1.2em;
    min-height: 1.2em;
    margin: auto;
}

.responsive-cell-label {
    display: inline-block;
    width: 38%;
    font-weight: bold;
    vertical-align: top;
}

.responsive-cell-value {
    display: inline-block;
    width: 58%;
}

.results-list {
    list-style: none;
    padding-left: 0;
    margin-top: .25em;
    margin-bottom: .25em;
}

.results-actions {
    display: inline-block;
}

/** styles for va-table columns
 */

.col-lecturers .ui-button {
    margin: .125em;
}

.col-actions .ui-button {
    margin: .125em;
}

/* hide column headers for small screens
*/
.dataview .headers {
    display: none;
}

table.dataview {
    display: inline-table;
    width: 100%;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
}

table.dataview .order-by-header {
    display: inline-block;
}

table.dataview .headers th > a,
table.dataview .headers th > span {
    text-decoration: none !important;
}

table.dataview .order-by-icon {
    margin-left: .25em;
}

table.dataview tbody td {
    border: 0;
}

table.dataview tbody tr.even,
table.dataview tbody tr.odd {
    background-color: white;
}

table.dataview tbody tr:hover {
    background-color: whitesmoke;
}

table.dataview thead th,
table.dataview tfoot th {
    font-weight: bold;
}

table.dataview thead th,
table.dataview thead td {
    padding: .5em .75em;
    border-bottom: 1pt solid #111111;
    text-align: left;
}

table.dataview .order-by-unsorted {
    opacity: .45;
}

table.dataview thead th:active,
table.dataview thead td:active {
    outline: none;
}

table.dataview tfoot th,
table.dataview tfoot td {
    padding: .5em .75em .25em .75em;
    border-top: 1pt solid #111111;
}

table.dataview tbody th,
table.dataview tbody td {
    padding: .4em .5em;
}

table.dataview tbody tr:first-child th,
table.dataview tbody tr:first-child td {
    border-top: none;
}

table.dataview tbody tr {
    margin-top: 1em;
    margin-bottom: 1em;
}

table.dataview tbody tr:not(:last-child) {
    border-bottom: 1pt solid grey;
}

table.dataview,
table.dataview th,
table.dataview td {
    box-sizing: content-box;
}

table.dataview .navigatorLabel {
    clear: both;
    float: left;
    padding: 0.755em;
}

table.dataview .navigator {
    float: right;
    text-align: right;
    padding: 0.25em;
}

table.dataview .navigator-few-elements .first,
table.dataview .navigator-few-elements .prev,
table.dataview .navigator-few-elements .next,
table.dataview .navigator-few-elements .last {
    display: none;
}

table.dataview tr.headers th {
    display: block;
    border: 0;
}

/*  Navigation Buttons: << < 1 2 3 ... 23 24 25 > >>
 */
table.dataview .navigator a {

    box-sizing: border-box;
    display: inline-block;
    padding: 0.5em 1em;
    margin-left: 0.2em;
    text-align: center;
    border: 1px solid transparent;

    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    font-weight: bolder;
    font-style: normal;
}

table.dataview .navigator a[disabled="disabled"] {
    cursor: default !important;
}

table.dataview .navigator a:hover {
    text-decoration: underline;
}

table.dataview .navigator a:active {
    border: 1px solid black;
}

table.dataview .navigator .ellipsis {
    padding: 0 1em;
}

/** make dataview look like a list for mobile
 */
table.dataview tbody,
table.dataview tr,
table.dataview td {
    display: block;
}

/* LAYOUT-TABELLEN
 */
.table-cell {
    display: table-cell;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    border-collapse: collapse;
    border-width: 0;
    word-wrap: break-word;
}

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

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

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

.table {
    display: table;
}

.growX {
    width: 100%;
}

/* POPUPS
 */
.popup-div {
    display: none;
    position: absolute;
    top: 0;
    margin: 0 !important;
    z-index: 102;
    box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.25);
}
.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;
    align-self: center;
    -ms-grid-column: 1;
    -ms-align-self: center;
    color: #000000;
    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;
    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%;
}

.foreground-popup-div {
    z-index: 300;
}

.tooltip-text {
    display: none;
}

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

.popup-target {
    cursor: pointer;
}

/* FRAGEBOGEN
 */
.question-head {
    padding: 0.2em 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.question-head > * + * {
    margin-left: 0.1em;
}

legend.question-head > div {
    display: inline-block;
}

.question-body {
    text-align: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 1em 1em 0.2em;
}

.question-answer {
    margin-bottom: 0.8em;
}

.question-title-text {
    padding-left: .5em;
    padding-right: .5em;
}

.question-title-text h4 {
    margin: 0;
    display: inline;
}

.subHeading h4 {
    margin: 0;
    display: inline;
}

#questionForm > * {
    margin-top: 1em;
}

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

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

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

.answer-text {
    padding-left: .5em;
    padding-right: .5em;
}

/* Zwangsfragen
 */
.mandatory,
.tutor {
    display: inline-block;
    border: 1pt solid #000000;
    background: #CBCBCB;
    color: #000000;
    cursor: help;
    margin: 0;
}

.mandatory:hover,
.tutor:hover {
    background: #E5E5E5;
}

.question-head .mandatory,
.question-head .tutor {
    margin-left: .5em;
}

.scaled-question-group .mandatory,
.scaled-question-group .tutor {
    margin-right: .5em;
}

.mandatory svg,
.tutor svg {
    width: 1em;
    margin-bottom: -.125em;
}

.mandatory-fg,
.tutor-fg{
    fill: #000000;
}

/* 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;
}

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

/** Zahlenwertfragen
 */
/* Safari and Chrome */
.number-question-answer-no-pattern input[type=number]::-webkit-inner-spin-button,
.number-question-answer-no-pattern input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Removes leftover margin */
}

/* FF */
.number-question-answer-no-pattern input[type=number] {
    -moz-appearance: textfield;
}

/* MC-Fragen
 */

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

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

.question-answer.ui-corner-all:hover {
    background: #CBCBCB;
}

.question-answer.ui-corner-all {
    border: 1px solid #CBCBCB;
}

.multiple-columns.question-body {
    padding-bottom: 0;
}

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

.multiple-columns .question-answer {
    display: inline-block;
    margin: 0 0 1em 0;
}

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

.mc-other-answer input[type="text"] {
    border: 0;
}

.mc-other-answer input[type="text"]:not(:focus) {
    outline: 1pt solid #CBCBCB;
}

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

.one-column .mc-other-answer {
    flex-wrap: wrap;
}

.mc-other-answer .answer-text {
    flex-shrink: 0;
}

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

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

.mc-question .selected-answer {
    background: #E5E5E5;
}

/* Freitextfragen
 */
.freetext-answer textarea {
    font-size: 1.25em;
    overflow: auto;
    max-width: 99.3%;
    min-width: 99.3%;
    width: 99.3%;
    border: 1pt solid;
}

.freetext-answer input[type="text"] {
    font-size: 1.25em;
    max-width: 99.3%;
    min-width: 99.3%;
    border: 1pt solid;
}

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

/**********************************************************
 * Skalierte Fragen                                       *
 **********************************************************/
.scaled-question-group {
}

.scaled-block-refuse {
    border-left: 1pt solid #999999;
}

.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: .5em;
    padding-right: 2em;
    display: flex;
    align-items: center;
}

.scaled-question-text > * + * {
    margin-left: 0.1em;
}

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

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

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

.scaled-question-text div:not(.ui-helper-hidden) {
    display: inline-block;
}

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

.scale-label > span {
    padding: .5em .5em .25em .5em;
    display: inline-block;
}

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

.slider {
    padding: .5em 0 .5em 1em;
    margin-right: 3em;
}

.slider .untouched-hint {
    font-size: 80%;
    font-style: italic;
}

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

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

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

/* Zwischenüberschriften
 */
div.subHeading {
    padding: 0.2em 0.5em;
}

div.subHeading + div.subHeading {
    border-top: none;
}

h3.kopf {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}


/* Erläuterungen
 */
.explanation {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0.5em;
    padding: 0.2em 3em 0.2em 0.5em;
}

/**********************************************************
 * Navigations-Container & -Buttons                       *
 **********************************************************/
.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;
}

.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-family: inherit;
    font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: inherit;
}

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

.ui-selectmenu-button.ui-button {
    width: auto;
}

/* Hauptanzeige
 */

.browserwarning {
    text-align: center;
    font-weight: bold;
    border: 1pt solid red;
    margin-bottom: 0.5em;
    padding: 0.2em 0.2em 0.2em 0.5em;
}

.simplecaptcha {
    margin-bottom: 2em;
    padding: 0.5em;
}

#preview-watermark {
    position: fixed;
    z-index: 97;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-grid;
    display: -ms-inline-flexbox;
    font-size: 4em;
}

#preview-watermark * {
    opacity: 0.15;
    color: gray;
    transform: rotate(-45deg);
    margin: auto;
    height: 0;
}

.above-overlay {
    position: relative;
    z-index: 98;
}

.above-overlay-pos-absolute {
    position: absolute;
    z-index: 99;
}

/* EvalInfoBar
 */

.infobar-item {
    display: inline-block;
    margin-right: 0.5em;
}

.infobar-label {
    font-weight: bold;
}

/* ResultsPage
 */

.detail-results-container {
    max-width: 23em;
}

.detail-results-item {
    display: block;
    box-sizing: border-box;
    margin: .25em;
    max-width: 22.5em;
}

.detail-results-text {
    padding: 0 .25em 1em .25em;
}

.detail-results-item .scale-label {
    margin-left: .25em;
    margin-right: .25em;
    font-size: 80%;
}

.detail-results-img {
    padding: .25em;
    box-sizing: border-box;
}

.detail-results-item .disclose-content {
    position: relative;
    height: 0;
}

.detail-results-heading {
    padding-left: .5em;
}

a.discloser.disclose-root,
.disclose-root a.discloser {
    text-decoration: none;
    cursor: pointer;
}

.disclose-content.disclosed {
    position: absolute;
    height: auto;
    max-height: none;
}

.answer-legend {
    margin: 0;
    padding: 0;
    position: relative;
    height: 0;
    display: inline-block;
    overflow: hidden;
}

.disclosed .answer-legend {
    position: static;
    height: auto;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 2em auto;
    -ms-grid-columns: 2em auto;
    margin-top: 1em;
}

.answer-legend dt {
    font-weight: bold;
    padding: .25em;
}

.answer-legend dd {
    margin: 0;
    padding: .25em;
}

.profile-text {
    text-align: left;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 1.875em;    /* 30px */
}

.profile-text p {
    margin: 0;
    font-size: 1em;     /* 16px */
    padding: .25em;     /*  4px */
    line-height: 1.5em; /* 24px */
}

.profile-text:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    width: 25%;
    height: 100%;
}

.profile-text.disclosed::after {
    display: none;
}

.profile-text.disclosed {
    box-sizing: content-box;
    max-width: inherit;
}

.profile-right {
    width: 9.375em;     /* 150px */
    height: 1.875em;    /*  30px */
}

.result-image-width {
    width: 22em;
}

.result-footer {
    width: 22em;
    height: 2em;
}

.result-comments .result-question {
    font-weight: bold;
}

.result-comments .result-answers {
    margin-bottom: 1em;
}

.comment-result-item,
.comment-result-item-img {
    padding: .25em;
    margin: .25em;
}

.comment-result-item {
    font-family: inherit;
    overflow-y: auto;
    word-break: break-word;
}

.result-comments-more {
    padding: .25em;
}

.indicator-text {
    text-align: left;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.break-words {
    word-break: break-all;
}

.space-below {
    margin-bottom: 4em;
}

.big-space-below {
    margin-bottom: 16em;
}

.centered {
    display: block;
    text-align: center;
    vertical-align: middle;
}

.centered > * {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

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

/** very small width (compact phones in portrait mode)
 */
@media screen and (max-width: 20em) {

    .portaltitle {
        font-size: 1.75em;
    }

    #burger-items-container .nav-text {
        font-size: 1.5em;
    }

    #burger-items-container.burger-open .button {
        padding: .5em 1em;
    }

    .nav-text {
        font-size: 1.5em;
    }

    .responsive-cell-label,
    .responsive-cell-value {
        display: block;
        width: auto;
    }

    #password {
        margin-bottom: .5em;
    }
}

@media screen and (max-width: 34em) {
    .dropdown-box {
        width: inherit !important;
    }

    .footer-item-container-right {
        display: block;
        text-align: center;
        float: none;
    }

    .footer-item-container-left {
        display: block;
        text-align: center;
        margin-top: 1em;
        float: none;
    }

    .footer-item-right:before {
        content: "";
        display: block;
    }

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

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

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

    .individually-labeled .answers-table .scaled-question-answer:not(.slider-answer) {
        display: grid;
        display: -ms-grid;
        width: 100% !important;
        height: auto;
        min-height: 2.5em;
        grid-template-columns: 2.5em auto;
        grid-template-rows: auto;
        -ms-grid-columns: 2.5em auto;
        -ms-grid-rows: auto;
    }

    .individually-labeled .answers-table .scaled-question-answer:not(.slider-answer) > input {
        grid-column: 1;
        -ms-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 {
        text-align: left;
        padding: .5em .5em .5em 0;
        line-height: normal;
        grid-column: 2;
        -ms-grid-column: 2;
        justify-self: left;
        align-self: center;
        -ms-grid-column: 2;
        -ms-justify-self: left;
        -ms-align-self: center;
    }

    .individually-labeled .scaled-block-refuse {
        border-left: 0;
    }

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

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

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

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

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

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

    .individually-labeled .selected-answer {
        background: #E5E5E5;
    }

    .popup-div {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/** medium width (phones in landscape mode)
 */
@media screen and (min-width: 34em) {

    .login-password,
    .login-submit {
        margin-top: 0;
        display: inline-block;
    }

    .footer-item-container-right {
        display: block;
        text-align: center;
        float: none;
    }

    .footer-item-container-left {
        display: block;
        text-align: center;
        margin-top: 1em;
        float: none;
    }

    .footer-item-right:before {
        content: none;
        display: inline;
    }

    .footer-item-right:not(:first-child):before {
        content: " | ";
        display: inline;
    }

    .content-width {
        max-width: 46em;
        padding-left: 1em;
        padding-right: 1em;
    }

    .nav-icon {
        display: none;
    }

    html .navigationbar {
        height: auto;
        min-height: 2em;
    }

    html .navigationbar .nav-text {
        display: inline;
        font-size: 1em;
    }

    /* We use html .navigationbar here because we need a greater specificity */
    html .navigationbar .nav-item {
        width: 7em;
        display: table-cell;
        font-size: 110%;
        text-align: center;
    }

    html .navigationbar .nav-item:not(:last-child) {
        border-right-width: 0;
    }

    html .navigationbar .nav-item {
        border-bottom: 0;
        border-top: 0;
    }

    html .navigationbar #burger-items-container {
        display: table;
        float: left;
    }

    html .navigationbar .nav-item {
        position: relative;
        z-index: 200;
    }

    #burger-container {
        display: none;
    }

    .col-list {
        -moz-column-count: 1;
        -moz-column-gap: 2em;
        -webkit-column-count: 1;
        -webkit-column-gap: 2em;
        column-count: 1;
        column-gap: 2em;
        line-height: 2em;
    }

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

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

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

    /* Zebramuster */

    .zebra:nth-child(odd),
    .zebra-inv:nth-child(even) {
        background: rgba(0, 0, 0, 0.06);
    }

    .zebra:nth-child(even),
    .zebra-inv:nth-child(odd) {
        background: transparent;
    }

    .zebra:hover, .zebra-inv:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .language-full {
        display: inline;
    }

    .language-short {
        display: none;
    }

    .portal-logo-left,
    .portal-logo-right {
        max-width: 48%;
    }

    .portal-logo-left {
        float: left;
    }

    .portal-logo-right {
        float: right;
    }

    #preview-watermark {
        font-size: 6em;
    }

    .result-comments .result-answers {
        display: flex;
        flex-wrap: wrap;
    }

    .result-comments-more {
        width: 100%;
    }

    .comment-result-item {
        width: 16em;
        height: 10em;
    }

    .comment-result-item-img {
        max-width: 33em;
    }

    .profile-text {
        height: 3.125em;
    }


    .profile-text:after {
        width: 70%;
        height: 1.5em;    /* 24px */
    }

    .profile-right {
        width: 15.625em;    /* 250px */
        height: 3.125em;    /*  50px */
    }
}

@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
    #debug {
        border: 4pt solid black;
    }

    html > body {
        font-size: 85%;
    }
}

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

    body {
        margin: 0 0 10em;
    }

    .footer-container {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

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

    .footer-item-container-right {
        text-align: right;
        float: right;
        white-space: nowrap;
    }

    .footer-item-container-left {
        text-align: left;
        float: left;
        margin-top: 0;
    }

    .content-width {
        max-width: 63em;
        padding-left: .5em;
        padding-right: .5em;
    }

    .detail-results-container {
        display: flex;
        flex-wrap: wrap;
        max-width: none;
    }

    .detail-results-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        width: 22.5em;
        max-width: none;
    }

    .detail-results-text {
        flex-grow: 1;
    }

    .detail-results-heading {
        flex-basis: 100%;
    }

    .comment-result-item {
        width: 19em;
    }

    .comment-result-item-img {
        max-width: 39em;
    }

    .footer {
        padding-top: .1em;
        padding-bottom: .1em;
    }

    .footer .footer-item-container {
        font-size: 80%;
    }

    .border-body {
        margin-bottom: 5em;
    }

    .nav-icon {
        display: inline;
    }

    .nav-icon img {
        width: 1em;
        height: 1em;
    }

    html .navigationbar .nav-item {
        width: 9em;
    }

    .col-list:not(.col-list-disabled) {
        -moz-column-count: 2;
        -moz-column-gap: 2em;
        -webkit-column-count: 2;
        -webkit-column-gap: 2em;
        column-count: 2;
        column-gap: 2em;
        line-height: 2em;
    }

    .dataview-toolbar-item {
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
        margin-bottom: 0;
    }

    .sort-dropdown {
        display: none;
    }

    /** make dataview look like a table again
    */
    .responsive-cell-label {
        display: none;
    }

    .responsive-cell-value {
        display: block;
        width: 100%;
    }

    table.dataview tbody {
        display: table-row-group;
    }

    table.dataview tr,
    table.dataview tr.headers {
        display: table-row;
    }

    table.dataview td {
        display: table-cell;
    }

    table.dataview tbody tr.odd {
        background-color: #f9f9f9;
    }

    table.dataview tr.headers th {
        display: table-cell;
        border-bottom: 1pt solid #111111;
        padding: .5em .25em;
    }

    table.dataview tbody td {
        border-top: 1pt solid #dddddd;
    }

    table.dataview tbody tr {
        margin-top: 0;
        margin-bottom: 0;
        border: 0;
    }

    #preview-watermark {
        font-size: 8em;
    }

    .profile-right {
        width: 21.875em;    /* 350px */
        height: 4.375em;    /*  70px */
    }

}

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

    .content-width {
        max-width: 79em;
    }

    .header {
        min-height: 8em;
    }

    .col-list:not(.col-list-disabled) {
        -moz-column-count: 3;
        -moz-column-gap: 2em;
        -webkit-column-count: 3;
        -webkit-column-gap: 2em;
        column-count: 3;
        column-gap: 2em;
        line-height: 2em;
    }

    .comment-result-item {
        width: 22.5em;
    }

    .comment-result-item-img {
        max-width: 35em;
    }

}


/* buttons */
.button {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40ffffff', endColorstr='#00ffffff', GradientType=0); /* IE6-9 */
}

/* highlight */
.button:hover, .button:focus {
    background: rgba(255, 255, 255, 0.4);
}