.wrapper {
    height: 99%;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demoMailWrapper {
    max-width: 100vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-top: 3px solid gray;
    border-right: 3px solid gray;
    margin-top: 5px;
    padding: 5px;
}

.logo-container {
    max-width: 100vw;
    max-height: 40vh;
}

.header {
    max-width: 100%;
    text-align: center;
    line-height: calc(1em + 4px);
    padding: 0px 12px;
    color: #153444;

    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-size: 2em;
}

.subheader {
    font-size: 1.5em;
    line-height: calc(1em + 10px);
    padding: 0 12px;
    color: #153444;
    font-size: 1.2em;
}

.description {
    margin-top: 16px;
    text-align: center;
    padding: 0 8px;
    color: #668090
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html,
body {
    /* f84914 color1 */
    /* fc7e51 blass */
    height: 100%;
}

input[type=text], input[type=textarea], input[type=email] {
    min-width: 100%;
    max-width: 100%;
}

.outer-frame {
    position: relative;
    height: 100vh;
    align-items: center;
    margin: auto;
}

.question-frame,
.navigation,
#footer {
    width: 50%;
    margin: 0 auto;
}

.question-frame,
.navigation {
    padding: 16px;
}

.question-frame {
    min-height: 150px;
    background-color: var(--wrBackground);
}


/*.question {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}*/

.addon {
    color: #888;
    font-size: smaller;
    font-style: italic;
}

.question-number {
    height: 32px;
    width: 32px;
    line-height: 32px;
    background-color: #f84914;
    border: 1px solid #fc7e51;
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}


/*.question-text {
}*/

.question-answer {
    margin-top: 8px;
}

.question-frame:focus {
    /* Border entfernen */
    outline: none;
}

.navigation {
    display: flex;
    justify-content: left;
}

.button {
    text-align: center;
    cursor: pointer;
    margin: 0 20px 0 0;
    padding: 10px;
    width: 150px;
    background-color: #f84914;
    color: white;
    user-select: none;
    /**border: 1px solid #30b0fb;
    //border-radius: 20px;**/
    /**
    <svg viewBox="0 0 24 24" id="WW_icon-arrowright" xmlns="http://www.w3.org/2000/svg"><path d="M7.8 21.7l-1.4-1.4 8.4-8.3-8.4-8.3 1.4-1.4 9.8 9.7-9.8 9.7z"></path></svg>
*/
}

a.button:link {
    text-decoration: none;
}

.button.disabled {
    background-color: #ddd;
    color: #888;
    opacity: 0.5;
    user-select: none;
    cursor: not-allowed;
    pointer-events: none;
}

.button.finished {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.8%2021.7l-1.4-1.4%208.4-8.3-8.4-8.3%201.4-1.4%209.8%209.7-9.8%209.7z' fill='white'></path></svg>");
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 0;
}

.button:hover {
    background-color: #fc7e51;
}

.button.disabled:hover {
    background-color: #ddd;
}

.hidden {
    display: none;
}

.progressBarFrame {
    border: 1px solid #f84914;
}

.progressBar {
    color: #000;
    background-color: #f84914;
}

.error {
    color: #D8000C;
    background-color: #FFD2D2;
}

div.error {
    margin: 10px 0px;
    padding: 12px;
}


/*
.button:after {
    content:'\203A';
}*/

.error:before {
    content: '\2297';
}

.notAnswered {
    color: gray;
}