/*** CUSTOM FONTS ****/

@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-ext-n400.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-i400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-ext-n700.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-i400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-vietnamese-n700.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-n700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-ext-n400.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-ext-i400.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-n400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-n400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Quando';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/quando-latin-n400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-ext-n700.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-n700.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-i700.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-vietnamese-i400.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-ext-n700.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-vietnamese-n400.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-ext-n100.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-ext-i400.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-ext-n400.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-ext-i700.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-vietnamese-n100.woff2') format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-ext-n700.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-ext-i700.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-n400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-ext-n400.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-n100.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-n700.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-i400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-n700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-cyrillic-ext-n100.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-latin-i700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'PT Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-n400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Quando';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/quando-latin-ext-n400.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-n100.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-ext-i400.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/montserrat-latin-ext-i400.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'adobe-garamond-pro';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/adobe-garamond-pro-400') format('woff2');
}
@font-face {
  font-family:'PT Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fontdoc/OW5DTPTM5D5K2/pt-sans-cyrillic-i400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/*** STATIC ***/

/**********************************************************
 * Variablen                                              *
 **********************************************************/

:root {

    /* BOX-SHADOWS */
    --menu-shadow: 0.4em 0.4em 0.7em 0 rgba(0, 0, 0, 0.5);
    --button-shadow: 0.125em 0.125em 0.25em -0.0625em rgba(0, 0, 0, .5);

}

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

html,
body {
    height: 100%;
}

body {
    text-align: center;
}

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

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

p {
    margin: 0;
    padding: 0;
}

table {
    border-spacing: 0;
}

td {
    padding: 0;
}

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


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

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

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

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

[aria-hidden="true"] {
    display: none;
}

fieldset {
    min-inline-size: auto;
}

input[type=checkbox],
input[type=radio] {
    appearance: none;
    margin: 0;
    width: 1em;
    height: 1em;
}

input[type=checkbox]::before,
input[type=radio]::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: #333333; /* fallback */
    content: ' ';
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    cursor: pointer;
}

input[type=checkbox]::before {
    mask-image: url("../images/checkbox_unchecked.svg");
}

input[type=checkbox]:checked::before {
    mask-image: url("../images/checkbox_checked.svg");
}

input[type=radio]::before {
    mask-image: url("../images/radio_unchecked.svg");
}

input[type=radio]:checked::before {
    mask-image: url("../images/radio_checked.svg");
}

.star-group {
    padding: 0.5em;
}

.star-answer input[type=radio]:focus,
.star-answer input[type=radio]:active {
    border: 0;
}

/* all stars are filled by default */
.star-answer input[type=radio]::before {
    mask-image: url("../images/star-filled.svg");
}

/* if no star was clicked before, all stars are empty */
.no-vote .star-answer input[type=radio]::before {
    mask-image: url("../images/star-empty.svg");
}

/* all stars behind the checked star, are empty */
.star-answer:has(input:checked) ~ .star-answer > input::before {
    mask-image: url("../images/star-empty.svg");
}

/* currently hovered star, is filled and transparent */
.star-answer:has(input:checked) ~ .star-answer:hover > input::before {
    mask-image: url("../images/star-filled.svg");
    opacity: 0.5;
}

/* all stars behind the currently hovered star, are empty and transparent */
.star-answer:hover:has(input) ~ .star-answer > input::before {
    mask-image: url("../images/star-empty.svg");
    opacity: 0.5;
}

/* all stars in front of the currently hovered star, are filled and transparent;
   double "has(~ .star-answer)" to increase specificity */
.star-answer:has(~ .star-answer:hover):has(~ .star-answer) > input::before {
    mask-image: url("../images/star-filled.svg");
    opacity: 0.5;
}

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

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

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

.bold {
    font-weight: bold;
}

.winzig {
    font-size: 0.7em;
}

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

.padding {
    padding: 1em;
}

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

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

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

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

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

.ui-dialog .ui-dialog-content {
    padding: .5em;
    margin: .75em;
    text-align: left;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0.75em;
}

.ui-dialog .ui-dialog-titlebar-close {
    height: 1.75em;
    width: 1.75em;
    top: 1.25em;
    right: 0;
    margin: -0.5em 0 0 0;
    padding: 0.0625em;
}

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

.ui-dialog .ui-dialog-title {
    margin: .25em 0;
}

.ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    background-image: none;
    mask-image: url("../imgstatic/close_focus.svg");
    -webkit-mask-image: url("../imgstatic/close_focus.svg");
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    margin-top: -0.75em;
    margin-left: -0.75em;
    width: 1.5em;
    height: 1.5em;
}

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

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

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

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

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

.ui-selectmenu-button.ui-button {
    width: fit-content;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* DATA VIEW
*/
.dataview-container {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    margin-top: .75em;
    padding: .75em;
}

.dataview-scrollable {
    overflow-y: auto;
}

.dataview-scrollable thead th,
.dataview-scrollable tfoot td {
    position: sticky;
    z-index: 1;
}

.dataview-scrollable thead th {
    top: 0;
}

.dataview-scrollable tfoot td {
    bottom: 0;
}

.dataview-toolbar {
    margin-bottom: .75em;
    padding: 0.25em;
    flex-wrap: wrap;
    row-gap: 0.125em;
}

.dataview-toolbar,
.dataview-toolbar-left,
.dataview-toolbar-right,
.toolbar-part {
    display: flex;
    align-items: center;
    column-gap: .5em;
}

.dataview-toolbar-right {
    flex-grow: 1;
    justify-content: end;
}

.dataview-toolbar-rows-per-page,
.dataview-toolbar-search,
.dataview-toolbar-selection {
    display: flex;
    align-items: center;
    gap: 0.125em;
}

.dataview-toolbar input[type=search] {
    min-width: 5em;
    max-width: 25em;
    height: 2em;
    line-height: 1.15;
    padding: .25em;
}

.dataview-toolbar-search > .action-btn.ui-button {
    height: 2em;
    width: auto;
    justify-content: center;
}

.dataview-toolbar .ui-selectmenu-button.ui-button {
    padding: .25em .5em;
}

.ui-selectmenu-button.ui-button {
    width: auto;
    padding: .125em .5em;
    margin-inline-start: .35em;
}

.ui-selectmenu-menu {
    position: absolute;
    max-width: fit-content;
    text-align: start;
}

.ui-selectmenu-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ui-selectmenu-menu .ui-menu-item {
    padding: 0.5em;
    margin: 0;
}

.ui-selectmenu-menu .ui-menu-item:hover {
    cursor: pointer;
}

.ui-selectmenu-menu .ui-menu-item-wrapper {
    color: inherit;
    background: inherit;
    border: none;
}

.ui-menu.hide-first > *:first-child {
    display: none;
}

.responsive-cell-label {
    display: inline-block;
    width: 38%;
    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;
}

.portal-actions > .ui-button {
    display: inline-block;
    margin: .125em;
    padding-block: 0;
}

/** styles for va-table columns
 */

.col-lecturers .ui-button,
.col-actions .ui-button,
.col-account-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 .order-by-icon {
    margin-left: .25em;
}

table.dataview thead th,
table.dataview thead td {
    padding: .5em .75em;
    text-align: left;
}

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

table.dataview tfoot th,
table.dataview tfoot td {
    padding: .5em .75em .25em .75em;
}

table.dataview tbody th,
table.dataview tbody td {
    padding: .125em .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,
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;
}

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

    cursor: pointer;
    *cursor: hand;
}

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

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

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

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

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

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

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

.table {
    display: table;
}

.growX {
    width: 100%;
}

.growY {
    height: 100%;
}

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

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

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

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

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

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

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

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

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

.popup-content img {
    height: auto;
}

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

/**********************************************************
 * Datumsfragen allgemein                                 *
 **********************************************************/
.date-question-answer input {
    direction: ltr;
}

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

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

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

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

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

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

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

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

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

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

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

.popup-target {
    cursor: pointer;
}

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

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

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

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

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

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

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

.question-head {
    margin: 0;
}

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

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

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

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

.no-space .question-row,
.no-space .block-validation,
.quest-row + .quest-row.no-space .scaled-question-group,
.quest-row + .quest-row.no-space .text-block {
    border-top-width: 0;
}

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

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

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

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

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

.no-space.col-layout .question-row,
.no-space.col-layout .block-validation,
.col-layout + .quest-row.no-space .question-row,
.col-layout + .quest-row.no-space .block-validation,
.col-layout + .quest-row.no-space .text-block {
    border-top-width: 1px;
}

.col-layout .question-row {
    display: inline-block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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


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

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

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

.question-answer.ui-corner-all {
    box-shadow: var(--button-shadow);
    margin-right: 1em;
    margin-bottom: 1em;
}

.refuseRadioGroup {
    margin-top: 1em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.side-by-side .question-head {
    margin-bottom: 1em;
    float: left; /* hack to make it possible to style the position of legend inside of fieldset */
}

.side-by-side .question-head::after {
    clear: both;
}

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

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

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

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

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

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

.number-question input {
    text-align: right;
    direction: ltr;
}

/**********************************************************
 * Platzhalterfragen                                      *
 **********************************************************/
.wildcard-question input {
    text-align: left;
    direction: ltr;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.scale-labels {
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.slider-reset .ui-button img {
    width: 1.4em;
}

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

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

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

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

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

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

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

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

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

.polarity-answer {
    padding: 1em;
}

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

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

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

.ui-button {
    box-shadow: var(--button-shadow);
}

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

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

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

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

#back,
#delete,
#confirm,
#continue,
#resume,
#change,
#summary {
    width: 100%;
    white-space: normal;
    min-height: 4em;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

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

/**********************************************************
 * Action Button                                          *
 **********************************************************/
.action-btn.ui-button,
.action-btn.ui-button:hover,
.action-btn.ui-button:focus,
.action-btn.ui-button:active {
    line-height: 1.5em;
    padding: .25em 1em;
    display: inline-flex;
    align-items: center;
}

button[disabled],
.ui-button.action-disabled,
.ui-button.action-disabled:hover,
.ui-button.action-disabled:focus,
.ui-button.action-disabled:active {
    opacity: .35;
}

.action-btn svg {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
}

.action-label {
    margin-left: .5em;
    white-space: nowrap;
}

.action-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-size: 1.5em 1.5em;
    background-position: center;
    mask-mode: luminance;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/**********************************************************
 * Action Panel                                           *
 **********************************************************/
.web-action-dialog.ui-dialog {
    position: fixed;
    width: auto !important;;
    padding: 0;
    box-shadow: var(--menu-shadow);
}

.ui-dialog .ui-resizable-s {
    height: .7rem;
    bottom: -.7rem;
}

.ui-dialog .ui-resizable-sw {
    width: .7rem;
    height: .7rem;
    bottom: -.7rem;
    left: -.7rem;
}

.ui-dialog .ui-resizable-w {
    left: -.7rem;
    width: .7rem;
}

.ui-dialog .ui-resizable-nw {
    width: .7rem;
    height: .7rem;
    bottom: -.7rem;
    left: -.7rem;
}

.ui-dialog .ui-resizable-n {
    height: .7rem;
    bottom: -.7rem;
}


.ui-dialog .ui-resizable-ne {
    width: .7rem;
    height: .7rem;
    bottom: -.7rem;
    right: -.7rem;
}

.ui-dialog .ui-resizable-e {
    right: -.7rem;
    width: .7rem;
}

.ui-dialog .ui-resizable-se {
    width: .7rem;
    height: .7rem;
    bottom: -.7rem;
    right: -.7rem;
}

.web-action-dialog.ui-dialog.ui-widget.ui-widget-content {
    border-width: 0.75em;
    border-style: solid;
    border-top: none;
    box-shadow: var(--menu-shadow);
}

.web-action-dialog.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    border: none;
}

.action-panel .form-table {
    display: inline-table;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.action-panel .help-btn {
    height: 2em;
    width: 2em;
    padding: .125em;
}

.help-open.help-btn {
    align-self: end;
}

.i-help {
    mask-image: url("../imgstatic/help_focus.svg");
}

.help-open .i-help {
    mask-image: url("../imgstatic/close_focus.svg");
}

.help-btn.ui-button.help-open,
.help-btn.help-btn.ui-button:hover.help-open,
.help-btn.help-btn.ui-button:active.help-open,
.help-btn.help-btn.ui-button:focus.help-open {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.help-text {
    width: 100%;
    margin-top: calc(-.5em - 1pt);
    padding: 1em;
}

.help-text h1,
.help-text h2,
.help-text h3 {
    text-align: left;
    margin: 0;
    padding: .5em .25em .25em .25em;
    background: transparent;
    border: 0;
    font-family: inherit;
}

.action-panel textarea,
.action-panel input[type=text] {
    width: 100%;
}

.action-panel textarea {
    height: 5em;
}

.action-panel .multi-select label {
    display: block;
    margin: .25em;
}

.action-panel .explanation-image {
    max-height: 5em;
}

.action-dialog-content {
    max-height: 50vh;
}

/* Action Form and Inputs
 */
.web-action-panel-form-container {
    text-align: center;
    margin-bottom: 4em;
}

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

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

.form-cell {
    display: table-cell;
    vertical-align: baseline;
    padding: .5em .25em;
}

label.form-cell {
    width: 30%;
    max-width: 20em;
}

.action-input-cell {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: .5em;
}

.multi-selection-entries-container {
    flex-grow: 1;
    text-align: center;
    padding-bottom: 1em;
}

.action-input {
    display: flex;
    flex-grow: 1;
    gap: .5em;
    align-items: center;
    padding-bottom: 0.25em;
}

.action-input > .int-range-slider {
    flex-grow: 1;
}

.multi-selection-add {
    margin-top: 1em;
}

.multi-selection-entries {
    margin: .5em;
    display: flex;
    align-items: center;
}

.multi-selection-check {
    flex:  0 0 6em;
    text-align: left;
    margin-left: 0.75em;
}

.multi-selection-check > input[type=checkbox] {
    margin-left: 1.5em;
}

.multi-selection-text {
    flex: 1 1 auto;
    text-align: left;
    padding: .25em;
    margin: 0 .25em;
    min-width: 0;
}

.multi-selection-move {
    flex: 0 0 1em;
}

.multi-selection-delete.action-btn.ui-button {
    height: 2.5em;
    width: auto;
    aspect-ratio: 1 / 1;
}

.multi-selection-delete > .action-icon {
    background-size: 1.75em;
}

.action-input input[type=text],
.action-input input[type=date],
.action-input input[type=number],
.action-input input[type=password],
.action-input textarea {
    background: white;
}

/* Palette
 */
.palette {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 2em 1fr 2em;
    flex: 1;
}

.palette-buttons {
    display: grid;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    padding-top: 2em;
}

.palette-add,
.palette-remove,
.palette-up,
.palette-down,
.palette-addAll,
.palette-removeAll {
    display: block;
    margin-bottom: 0.25em;
    width: 1.5em;
    height: 1.5em;
}

.palette-choices,
.palette-selected {
    display: grid;
    grid-template-rows: 2em 1fr;
}

.palette-choices-select,
.palette-selection-select {
    overflow: auto;
}

.palette-header {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: normal;
    font-size: smaller;
}

.palette .ui-button {
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    line-height: 0;
}

.login-panel {
    text-align: center;
}

/* Action Progress
 */
.action-overlay-container {
    display: none;
}

.action-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 999;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ldBar {
    margin: auto;
}

.ldBar path.mainline {
    stroke-width: 10;
}

.ldBar path.baseline {
    stroke-width: 14;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.feedback p {
    padding: 1em;
}

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

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

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

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

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

.ui-state-error {
    padding: .25em .5em;
}

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

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

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

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

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

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

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

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

.login-table {
    display: inline-table;
    margin-bottom: 1em;
}

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

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

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

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

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

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

/**********************************************************
 * Error Page                                             *
 **********************************************************/

.exception-stack {
    height: 30em;
    display: block;
    padding: 0.5em;
    overflow-y: scroll;
    font-size: 80%;
    text-align: start;
    border: 1px solid black;
    background-color: white;
    margin-bottom: 2em;
}

.exception-stack pre {
    font-size: 80%;
}

.exception-stack h4 {
    margin-block-start: 0.5em;
    margin-block-end: 0.2em;
    padding: 0.5em;
}

/**********************************************************
 * API documentation                                      *
 **********************************************************/

.api-block + .api-block {
    margin-top: 1.5em;
}

.api-block h4 {
    text-align: center;
    margin: 0 0 1em 0;
    font-size: 1.25em;
}

.api-block h4:not(:first-child) {
    padding-top: 1em;
}

.api-table {
    border-collapse: collapse;
    width: 100%;
    padding: 0 1em;
}

.api-table th {
    text-align: left;
}

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

.api-section {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 1em;
    padding: .5em;
}

.api-config-name,
.api-config-type,
.api-config-default {
    width: 300px;
    padding: .5em;
}
.api-config-key {
    width: 400px;
    padding: .5em;
}
.api-config-help {
    width: 740px;
    padding: .5em;
}

.api-block h5 {
    margin: 0;
    padding: .5em .25em;
    font-size: 1em;
}

.api-block .toc-tree {
    margin: auto;
}

/* table of contents */

.api-block .toc-tree {
    margin: auto;
    width: fit-content;
}

.toc-tree .tree-junction,
.toc-tree .tree-junction-expanded {
    display: none;
}

.api-block .tree-node {
    background: inherit;
}

.api-block .tree-node:before {
    content: '●';
    margin-right: .25em;
}

.api-block .tree-subtree .tree-node:before {
    content: '○';
}


.api-block .toc-tree .tree-subtree {
    margin-left: 4em;
}

/**********************************************************
 * QWC Page Layout                                        *
 **********************************************************/
.qwc body {
    display: flex;
    flex-direction: column;
}

.qwc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75em;
    padding-inline: 1em;
    height: 4em;
}

.qwc-header-logo {
    width: auto;
    max-height: 4em;
    margin-bottom: -1.5em;
}

.qwc .header-info {
    line-height: 1.2;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    margin-bottom: 1em;
}

.action-dropdown {
    margin-top: 0.125em;
    padding-bottom: 0.15em;
    display: inline-flex;
    align-items: center;
    border: 1pt transparent solid;
    border-bottom: 0;
    gap: 0.125em;
    box-sizing: border-box
}

.action-dropdown:has(.ui-selectmenu-button-open) {
    border: 1pt #0082ba solid;
    border-bottom: 0;
}

.action-dropdown:hover > *,
.action-dropdown:focus > *,
.action-dropdown:active > * {
    opacity: 0.35;
}

.action-dropdown .ui-selectmenu-button.ui-button {
    position: relative;
    padding: 0;
    margin: 0;
    height: 1.25em;
    width: 1.25em;
    display: inline-block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
}

.action-dropdown .ui-selectmenu-button.ui-button:hover,
.action-dropdown .ui-selectmenu-button.ui-button:focus,
.action-dropdown .ui-selectmenu-button.ui-button:active {
    border: 0;
    outline: 0;
}

.action-dropdown .ui-selectmenu-button:after {
    content:'\25BC';
    display:inline-block;
    width: 100%;
    height: auto;
    pointer-events:none; /* let the click pass trough */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.5em;
    margin-top: -0.6em;
}

.action-dropdown .ui-selectmenu-text {
    display: none;
}

.action-dropdown .ui-selectmenu-button .ui-icon {
    display: none;
}

.action-dropdown-label {
    text-decoration: underline;
    cursor: pointer;
    padding-left: 0.5em;
}

.action-dropdown-menu.ui-selectmenu-open {
    border: 1pt solid #0082ba;
    box-shadow: var(--menu-shadow);
}

.action-dropdown-menu .ui-widget.ui-widget-content {
    border: 0;
}

.action-dropdown-menu.ui-selectmenu-menu .ui-menu-item {
    background-color: white;
    color: #0082ba;
}

.action-dropdown-menu.ui-selectmenu-menu .ui-menu-item:hover {
    background-color: #0082ba;
    color: white;
}

.action-dropdown-menu .ui-menu {
    box-sizing: border-box;
    padding: 0;
    border-radius: 0;
}

.action-dropdown-menu .ui-menu-item {
    box-sizing: border-box;
    border-radius: 0;
    list-style: none;
}

.action-dropdown-menu .ui-menu-item + .ui-menu-item {
    border-top: 1pt solid #0082ba;
}

.action-dropdown-menu .hide-first .ui-menu-item:first-child + .ui-menu-item,
.action-dropdown-menu .hide-first .ui-menu-item:hover + .ui-menu-item {
    border-top: 0;
}

.qwc-main {
    flex-grow: 1;
    padding: 0 1em 1em 1em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.qwc-main .action-btn {
    align-self: center;
}

.qwc-main .ui-tabs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow:  inherit;
    padding: 0;
}

.qwc-main .ui-tabs-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: inherit;
}

.qwc-main .ui-tabs-nav .action-icon {
    width: 1.25em;
    height: 1.25em;
}

.qwc-main .dataview-container {
    overflow: inherit;
}

.qwc-main .dataview-scrollable {
    display: flex;
    align-items: flex-start;
    overflow: auto;
}

.qwc-main .dataview {
    flex-grow: 1;
}

.qwc-main .dataview tr.headers th {
    background: inherit;
}

.qwc-main .dataview tr.navigation td {
    background: inherit;
}

.qwc-main .col-name {
    text-align: start;
}

.qwc-main .col-note {
    text-align: start;
}

/**********************************************************
 * QWC Login                                              *
 **********************************************************/

.login {
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.login-container {
    width: 50em;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    box-shadow: -0.0625em -0.0625em 0.5em 0 rgba(0, 0, 0, 0.2), 0.5em 0.5em 0.5em 0 rgba(0, 0, 0, 0.2);
}

.login-left {
    flex: 1 1 0;
    display: grid;
    padding: 1.5em;
}

.login-logo {
    width: 80%;
    height: auto;
    justify-self: start;
    margin-top: 2em;
}

.login-left-header {
    margin: 0;
    padding: 0;
    color: inherit;
    background: inherit;
    border: 0;
}

.login-left-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    align-content: end;
    gap: 0.5em;
    padding: 0 0.25em;
}

.login-left-footer a + a {
    margin-left: 1em;
}

.login-left-footer a {
    font-size: smaller;
    color: var(--blubb-hellgrau);
    text-decoration: none;
}

.login-version-text {
    font-weight: normal;
}

.login-right {
    flex: 1 1 0;
    padding: 1.5em;
    display: grid;
}

.login-profile-img {
    margin-bottom: 1em;
    justify-self: center;
    height: 7em;
}

.login-form {
    padding: 1.5em;
    display: grid;
    grid-auto-rows: minmax(max-content, auto);
    gap: 1em;
}

.login-form-row {
    display: flex;
    flex-wrap: wrap;
    text-align: start;
}

.login-label {
    flex: 1 1 100%;
}

.login-input {
    flex: 1 1 100%;
    height: 2.5em;
}

.login-submit {
    height: 100%;
    width: 100%;
}

/**********************************************************
 * QWC Tab Layout                                         *
 **********************************************************/
.ui-tabs.ui-widget-content {
    border: none;
    padding: 0;
    min-width: fit-content;
}

.ui-tabs .ui-tabs-panel {
    padding: 0;
}

.ui-tabs .ui-tabs-nav {
    border: 0;
    padding: 0;
    display: flex;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0;
    border-radius: 0;
}

.ui-tabs-nav li + li.ui-tabs-tab {
    margin-left: -1pt;
    position: relative;
}

.ui-tabs-nav li + li.ui-tabs-tab::before {
    content: "";
    left: -0.56em;
    top: 0.7em;
    position: absolute;
    width: 1em;
    height: 1em;
    transform: scaleX(1.5) rotate(45deg);
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    outline: none; /*override a:focus */
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: .5em 1.25em;
}

.ui-tabs .ui-tabs-tab:first-child .ui-tabs-anchor {
    padding-left: 1em;
}

.ui-tabs .dataview-container {
    margin: 0;
    padding: 0;
}

/**********************************************************
 * QWC Views                                              *
 **********************************************************/

.qwc-publish-view,
.qwc-results-view,
.qwc-online-settings-view {
    margin: 0.75em;
    padding-block: 0.75em;
    overflow: auto;
}

.qwc-logo-preview {
    max-height: 6em;
}

/**********************************************************
 * QWC Questions                                          *
 **********************************************************/

.qwc-questions-view {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: inherit;
}

.qwc-note-text {
    text-align: start;
    padding: .5em;
    font-style: italic;
}

.qwc-questions-view > .qwc-note-text {
    border-bottom: 1em solid #0082ba;
}

.qwc-questions-inspector .qwc-note-text {
    margin-bottom: 1em;
    border: 2pt dotted #0082ba;
    border-radius: .5em;
    background-color: #ffffff;
}

.qwc-note-text a,
.qwc-note-text a:visited,
.qwc-note-text a:focus,
.qwc-note-text a:hover {
    color: #0082ba;
}

.qwc-note-text a:focus,
.qwc-note-text a:hover {
    text-decoration: none;
}

.qwc-note-text h3 {
    padding: 0 1em .5em 0;
}

.qwc-note-text > * {
    display: block;
}

.qwc-note-text > *:not(:first-child) {
    margin-top: .5em;
}

.qwc-questions-toolbar .action-btn {
    align-self: start;
}

.qwc-questions-toolbar.toolbar {
    padding: 0;
    row-gap: 0;
}

.qwc-questions-container {
    display: flex;
    gap: 0.75em;
    flex-grow: 1;
    overflow: inherit;
}

.qwc-questions-inspector {
    padding: .5em;
    text-align: start;
    overflow: auto;
}

.qwc-questions-inspector .table-row:not(:last-child) .table-cell {
    border-bottom: 1pt solid #CCCCCC;
}

.qwc-mc-answers {
    margin: 1em 0 0 0;
    padding: 0;
    width: 100%;
}

.qwc-mc-answers .table-cell {
    text-align: start;
    padding: .25em;
}

.qwc-questions-tree {
    flex-grow: 1;
    flex-shrink: 130;
    padding: .5em;
    overflow: auto;
}

.tree-node {
    display: flex;
    cursor: pointer;
    padding: 1em .5em;
}

.qwc-questions-tree .ui-sortable *:has(.tree-branch) {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.tree-content {
    display: flex;
    gap: .5em;
    flex-grow: 1;
}

.tree-node-center {
    flex-grow: 1;
}

.qwc-note-icon {
    width: 1.25em;
    height: 1.25em;
    mask-image: url("../images/note.svg");
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: #0082ba;
}

.toolbar,
.toolbar-part,
.toolbar-part-right {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.tree-node-label {
    text-align: left;
    word-break: break-word;
    -ms-word-break: break-word;
}

.three-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: auto;
}

.toolbar {
    padding: .5em;
    flex: 0 0 3em;
}

.qwc-questions-tree .toolbar {
    padding-inline: 0;
}

.toolbar-part:not(:first-child) {
    margin-left: 1em;
}

.toolbar-part-right {
    margin-left: auto;
}

/**********************************************************
 * QWC Publish                                            *
 **********************************************************/

.three-col-layout {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    row-gap: 0.25em;
    padding: 0.25em 0.5em;
    justify-items: stretch;
    align-items: stretch;
}

.three-col-layout > * {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
}

.three-col-span-3 {
    grid-column: span 3;
}

/**********************************************************
 * QWC Results                                            *
 **********************************************************/

.qwc-results-view .response-rate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.5em;
}

.qwc-results-view .response-rate .table-inline {
    width: auto;
}

.qwc-results-view .response-rate .last-vote-date {
    flex: 1 1 100%;
}

.last-vote-date span + span {
    margin-inline-start: 0.5em;
}

.qwc-results-view .response-rate .table-cell {
    text-align: end;
    padding-top: 0.5em;
    padding-inline: 1em;
}

.qwc-results-view .response-rate .table-cell.response-rate-label {
    text-align: start;
}

.qwc-results-view .results-actions {
    display: grid;
    gap: 0.5em;
    justify-content: center;
}


/*** GENERATED ***/

/* FONTS */

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

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

/* BORDER RADIUS */

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

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

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

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

/* PAGE COLORS */

html {
    background: #f5faff;
}

html.qwc {
    background: #ffffff;
}

h2 {
    color: #ffffff;
    border: 1pt solid #0082ba;
    background: #0082ba;
}

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

.qwc .box-heading {
    color: #007DB8;
    background: #ffffff;
    border: 1pt solid #ffffff;
}

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


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

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


/* BUTTONS */

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

.ui-button:hover,
a.ui-button:hover,
a:link.ui-button:hover,
a:visited.ui-button:hover,
.ui-button:focus,
a.ui-button:focus,
a:link.ui-button:focus,
a:visited.ui-button:focus,
.ui-button:active,
a.ui-button:active,
a:link.ui-button:active,
a:visited.ui-button:active {
    color: #ffffff;
    border: 1pt solid #e57500;
    background: #0b4c6d;
    text-decoration: none;
}

.ui-slider-handle.untouched {
    background: #f5faff;
    border: 2pt solid #0b4c6d;
}

.ui-button .action-icon {
    background-color: #ffffff;
}

.ui-button:hover .action-icon,
.ui-button:active .action-icon,
.ui-button:focus .action-icon {
    background-color: #ffffff;
}

/* QWC Buttons */

.qwc .ui-button,
.qwc a.ui-button,
.qwc a:link.ui-button,
.qwc a:visited.ui-button {
    color: #ffffff;
    background: #007DB8;
    border: 1pt solid #007DB8;
}

.qwc .ui-button:hover,
.qwc a.ui-button:hover,
.qwc a:link.ui-button:hover,
.qwc a:visited.ui-button:hover,
.qwc .ui-button:focus,
.qwc a.ui-button:focus,
.qwc a:link.ui-button:focus,
.qwc a:visited.ui-button:focus,
.qwc .ui-button:active,
.qwc a.ui-button:active,
.qwc a:link.ui-button:active,
.qwc a:visited.ui-button:active {
    color: #e57500;
    background: #ffffff;
    border: 1pt solid #e57500;
}

.qwc .ui-button .action-icon {
    background-color: #ffffff;
}

.qwc .ui-button:hover .action-icon,
.qwc .ui-button:active .action-icon,
.qwc .ui-button:focus .action-icon {
    background-color: #e57500;
}

/* QUESTIONS */

input[type=checkbox]::before,
input[type=radio]::before {
    background-color: #4d4d4d;
}

input[type=checkbox]:checked::before,
input[type=radio]:checked::before,
.star-answer input::before {
    background-color: #0082ba;
}

.question-row,
.scaled-question-group {
    border: 1px solid #0082ba;
    background: #ffffff;
    color: #000000;
}

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

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

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

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

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

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

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

.mandatory-fg {
    fill: #ffffff;
}

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

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

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

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

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

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

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

/* TEXT CONTENT */

.text-block {
    border: 1px solid #0082ba;
    background: #ffffff;
    color: #000000;
}

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

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

/* API Documentation */

.api-block h4:not(:first-child) {
    border-top: 1px solid #0082ba;
}

.api-table tr:not(:last-child) td {
    border-bottom: 1px solid #0082ba;
}

.api-section + .api-section {
    border-top: 1px solid #0082ba;
}

.api-block .tree-node:before {
    color: #0082ba;
}

/* ERRORS */

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

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

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

/* TEXT INPUT */

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

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

/* FOCUS */

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

/* PROGRESS */
.ui-progressbar {
    border: 1px solid #0082ba;
    background: #ffffff;
    color: #000000;
}

.ui-progressbar .ui-progressbar-value {
    background: #daebf7;
    color: #000000;
}

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

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

.web-action-dialog {
    border-radius: 3px;
}

.web-action-dialog .ui-dialog-titlebar.ui-corner-all {
    border-radius: 0;
}

.web-action-dialog.ui-dialog.ui-widget.ui-widget-content {
    background-color: #daebf7;
    border-color: #0082ba;
}

.web-action-dialog.ui-dialog .ui-dialog-titlebar {
    color: #ffffff;
    background: #0082ba;
}

.web-action-dialog.ui-dialog .ui-dialog-content {
    color: #000000;
    background: #f5faff;
}

.web-action-dialog.ui-dialog label.form-cell,
.web-action-dialog.ui-dialog p.info-text {
    color: #000000;
}

.web-action-dialog.ui-dialog .ui-dialog-buttonpane {
    background: #daebf7;
}

.web-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    background: #ffffff;
}

.web-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover .ui-icon {
    background: #ffffff;
}

.qwc .web-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    background: #ffffff;
}

.qwc .web-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover .ui-icon {
    background: #e57500;
}

.help-btn.ui-button,
.help-btn.ui-button:focus {
    border: 1px solid #0082ba;
    background: #ffffff;
    color: #0082ba;
}

.help-btn.ui-button:active,
.help-btn.ui-button:hover {
    border: 1px solid #0082ba;
    background: #0082ba;
    color: #ffffff;
}

.help-btn.ui-button .action-icon,
.help-btn.ui-button:focus .action-icon {
    background: #0082ba;
}

.help-btn.ui-button:active .action-icon,
.help-btn.ui-button:hover .action-icon {
    background: #ffffff;
}

.help-open.help-btn,
.help-open.help-btn:focus {
    background: #ffeee3;
}

.help-text {
    color: #000000;
    background-color: #ffeee3;
    border: 1pt solid #0082ba;
}

.help-text h1,
.help-text h2,
.help-text h3 {
    color: #000000;
}

.ui-selectmenu-menu .ui-menu-item:hover {
    color: #ffffff;
    background: #0b4c6d;
}

.ui-selectmenu-open {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}

/* Data View */

.dataview-container {
    color: #ffffff;
    background: #0082ba;
    border: 0;
}

.dataview-scrollable {
    background: #f5faff;
}

.dataview-toolbar {
    color: #ffffff;
    background: #0082ba;
    border: 0;
}

table.dataview tr.headers th,
table.dataview tr.headers td {
    color: #000000;
    background: transparent;
    border: 0.25em solid transparent;
}

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

table.dataview thead th > a,
table.dataview thead th > a:link,
table.dataview thead th > span {
    color: #000000;
    text-decoration: none;
}

table.dataview thead tr,
table.dataview tbody tr,
table.dataview tfoot tr {
    color: #000000;
    background: #f5faff;
    border: 0;
}

table.dataview tbody td {
    color: #000000;
    background: #daebf7;
    border: 0.25em solid #f5faff;
}

table.dataview tbody tr td:first-child,
table.dataview thead tr th:first-child {
    border-left-width: 0.5em;
}

table.dataview tbody tr td:last-child,
table.dataview thead tr th:last-child {
    border-right-width: 0.5em;
}

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

/* Data View Toolbar Buttons */

.dataview-toolbar input[type=search] {
    border: 0;
    outline: none;
}

.dataview-toolbar .ui-selectmenu-button.ui-button {
    color: #0082ba;
    background: #ffffff;
}

.dataview-toolbar .ui-button,
.dataview-toolbar a.ui-button,
.dataview-toolbar a:link.ui-button,
.dataview-toolbar a:visited.ui-button {
    color: #0082ba;
    background: #ffffff;
    border: 1pt solid #ffffff;
}

.dataview-toolbar .ui-button:hover,
.dataview-toolbar a.ui-button:hover,
.dataview-toolbar a:link.ui-button:hover,
.dataview-toolbar a:visited.ui-button:hover,
.dataview-toolbar .ui-button:focus,
.dataview-toolbar a.ui-button:focus,
.dataview-toolbar a:link.ui-button:focus,
.dataview-toolbar a:visited.ui-button:focus,
.dataview-toolbar .ui-button:active,
.dataview-toolbar a.ui-button:active,
.dataview-toolbar a:link.ui-button:active,
.dataview-toolbar a:visited.ui-button:active {
    color: #e57500;
    background: #ffffff;
    border: 1pt solid #e57500;
}

.dataview-toolbar .ui-button .action-icon {
    background-color: #0082ba;
}

.dataview-toolbar .ui-button:hover .action-icon,
.dataview-toolbar .ui-button:active .action-icon,
.dataview-toolbar .ui-button:focus .action-icon {
    background-color: #e57500;
}

/* Data View Navigation Buttons: << < 1 2 3 ... 23 24 25 > >> */
table.dataview .navigator a {
    color: #000000;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: bolder;
    font-style: normal;
}

table.dataview .navigator a:hover {
    border-color: #e57500;
}

table.dataview .navigator a[disabled="disabled"] {
    border-color: #0082ba;
    background: #ffffff;
}

table.dataview .navigator a[disabled="disabled"].prev,
table.dataview .navigator a[disabled="disabled"].first,
table.dataview .navigator a[disabled="disabled"].next,
table.dataview .navigator a[disabled="disabled"].last {
    color: #000000;
    border: 1px solid transparent;
    background: transparent;
    opacity: .3;
}

/* QWC Page */

.qwc-header {
    color: #007DB8;
    background: #ffffff;
    border: 0;
}

/* QWC Header Links */

.qwc-header a {
    font-weight: bold;
}

.qwc-header a,
.qwc-header a:active,
.qwc-header a:visited,
.qwc-header a:link,
.qwc-header a:focus,
.qwc-header a:focus-visible {
    color: #007DB8;
    background: transparent;
    border: 0;
    text-decoration: underline solid;
}

.qwc-header a:hover {
    color: #e57500;
    background: transparent;
    text-decoration: none;
}

.qwc-header .ui-selectmenu-button:hover .ui-selectmenu-icon,
.qwc-header .ui-selectmenu-button:focus .ui-selectmenu-icon,
.qwc-header .ui-selectmenu-button:active .ui-selectmenu-icon {
    background-color: #e57500;
}

.action-dropdown .ui-selectmenu-button.ui-button {
    background-color: transparent;
}

.action-dropdown .ui-selectmenu-button.ui-button:hover,
.action-dropdown .ui-selectmenu-button.ui-button:focus,
.action-dropdown .ui-selectmenu-button.ui-button:active {
    color: transparent;
    background: transparent;
}

.action-dropdown .ui-selectmenu-button:after {
    color: #007DB8;
    background-color: transparent;
}

/* QWC Login */
.login-right {
    color: #000000;
    background: #007DB8;
}

.login-form {
    color: #000000;
    background: #f5faff;
}

/* QWC Tabs */
.ui-tabs.ui-widget-content {
    background: transparent;
}
.ui-tabs .ui-tabs-panel {
    color:  #000000;
    background: #f5faff;
    border: 0.75em solid #007DB8;
    border-radius: 0;
}

.ui-tabs-nav .ui-tabs-tab {
    color:  #007DB8;
    background: #f5faff;
    border: 1pt solid #007DB8;
}

.ui-tabs-nav .ui-tabs-tab.ui-tabs-active {
    color: #ffffff;
    background: #007DB8;
}

.ui-tabs-nav li + li.ui-tabs-tab::before {
    border-top-right-radius: 3px;
    border-top: 1pt solid #007DB8;
    border-right: 1pt solid #007DB8;
    /*background: linear-gradient(45deg, transparent 50%, #f5faff 50%);*/
    background: #f5faff;
}

.ui-tabs-nav li.ui-tabs-active + li.ui-tabs-tab::before {
    border-top: 1pt solid #007DB8;
    border-right: 1pt solid #007DB8;
    /*background: linear-gradient(45deg, transparent 50%, #007DB8 50%);*/
    background: #007DB8;
}

.ui-tabs-nav li + li.ui-tabs-tab.ui-tabs-active::before {
    border-top: 1pt solid #f5faff;
    border-right: 1pt solid #f5faff;
}

.ui-tabs-nav .ui-tabs-tab .action-icon {
    background-color: #007DB8;
}

.ui-tabs-nav .ui-tabs-tab.ui-tabs-active .action-icon {
    background-color: #ffffff;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    color: inherit;
    background: transparent;
    border: 0;
}

/* QWC Questions */
.qwc-questions-container {
    color: #ffffff;
    background: #007DB8;
    border: 0;
}

.qwc-questions-tree {
    color: #000000;
    background: #f5faff;
    border: 0;
}

.qwc-questions-toolbar {
    color: #ffffff;
    background: #007DB8;
    border: 0;
}

.qwc-questions-inspector {
    color: #000000;
    background: #f5faff;
    border: 0;
}

.tree-node {
    color: #000000;
    background: #DAEBF7;
    border: 0;
}

.tree-node:hover {
    background: rgba(0, 0, 0, .1);
}

.tree-node.selected {
    outline: 2pt solid #2D4D6B;
}

/* QWC Questions Toolbar Buttons */

.qwc-questions-toolbar .ui-button,
.qwc-questions-toolbar a.ui-button,
.qwc-questions-toolbar a:link.ui-button,
.qwc-questions-toolbar a:visited.ui-button {
    color: #007DB8;
    background: #ffffff;
    border: 1pt solid #f5faff;
}

.qwc-questions-toolbar .ui-button .action-icon {
    background-color: #007DB8;
}

.qwc-questions-toolbar .ui-button:hover .action-icon,
.qwc-questions-toolbar .ui-button:active .action-icon,
.qwc-questions-toolbar .ui-button:focus .action-icon {
    background-color: #e57500;
}

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

    #debug {
        background-color: red;
    }

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

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

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

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

    .box-footing li {
        display: block;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .polarity-refuse {
        margin: 1em;
    }

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

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

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

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

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

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

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

    .web-action-dialog.ui-dialog {
        max-width: 90%;
    }

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

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

    }

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

    .three-col-layout {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .three-col-layout > *:nth-child(3n + 1) {
        margin-top: 0.5em;
    }

    .three-col-span-3 {
        grid-column: span 1;
        justify-content: start;
    }

    /* QWC */
    .qwc-header-logo {
        display: none;
    }
}

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

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

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

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

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

@media screen and (min-width: 34em) {
    /** make dataview look like a table again
    */
    .dataview-toolbar {
        flex-wrap: nowrap;
        row-gap: 0;
    }

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

    .sort-dropdown {
        display: none;
    }

    .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 tr.headers th {
        display: table-cell;
    }

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