/* Template UNION Responsive */
/*
    Farben:
    // dunkelblau: #033664 > gemäss Homepage, nicht verwendet
    dunkelolive: #4c4847 (fonts) 
    petrol: #42818f (links, buttons)
*/


/**** common ****/

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    width: 100%;
    margin: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.5em;
    color: #4c4847;
    font-family: Arial, Sans-Serif;
}

a, a:visited {
    color: #42818f;
    text-decoration: none;
}

    a:hover, a:active {
        color: #111111;
    }

img {
    border: 0;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #cccccc;
    padding: 0.2em;
}

    input[type=radio], input[type=checkbox] {
        background-color: transparent;
        border: 0;
    }

    input[type=submit] {
        background-color: #42818f;
        color: white;
        text-transform: uppercase;
        font-size: 16px;
        padding: 0.5em 1.5em;
    }


/**** template elements ****/

.logo-25-jahre {
    text-align: center;
}
@media screen and (min-width: 380px) {
    .logo-25-jahre {
        float: left;
        margin-right: 0.5em;
    }
}
/**** webtest elements ****/

.wtTestTitleCell {
    border-bottom: 3px solid #cccccc;
    padding-top: 1em;
}

:not(.cont-disabled).opt-cont:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.opt-selected {
    background-color: transparent;
}

.wtHeadCell {
    border: none;
}

.div_custom {
    position: relative !important;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}


.wtRegistrationForm .form-input {
    margin-bottom: 2px;
}

@media screen and (max-width: 380px) {

    .wtRegistrationForm .form-label {
        width: 100%;
    }

    .wtRegistrationForm .form-input {
        width: 100%;
    }
}

.wtQuestionMainCell {
    padding-bottom: 1em !important; /* nach jeder Frage etwas Abstand */
}

    .wtQuestionMainCell img {
        max-width: 100%;
    }

    .wtQuestionMainCell > div {
        width: 100%;
    }

.wtAnswerComment {
    border: none;
    width: 100%;
}


/* pager */

.pagerActive {
    border-color: #42818f;
    background-color: #42818f;
}


/* test elements*/

/* Schieberegler mehr Platz für aktuellen Wert / Werteeingabe */
.wtSliderQuestion input.wtFliesstext {
    width: 50px !important; /* da fix inline gestyled */
}

/* Abstand nach Frage-Titel */
.wtQuestionHeadCell {
    padding-bottom: 0.4em !important; /* (wegen padding 0 aus webtest_styles...) */
}

/* Linien um Fragen */
td.wtHorizontalTopLimitCell {
    background-color: #fff;
    height: 1px;
}

td.wtHorizontalSeparatorCell {
    background-color: #ccc;
    height: 1px;
}

td.wtHorizontalBottomLimitCell {
    background-color: #fff;
    height: 1px;
}

.wtError {
    font-weight: normal;
    color: #333333;
}

.wtWarning {
    display: block;
    font-weight: normal;
    background-color: #ffff66;
    color: #333333;
    padding: 2px;
}

.wtAnswerOptionCell.wtWarning,
.wtMatrixVerticalSeparatorCell.wtWarning,
td.wtKlein.wtWarning,
td.right.wtWarning {
    display: table-cell;
}


.wtWarning a, .wtWarning a:visited, .wtWarning a:hover {
    font-weight: bold;
    color: #333;
}

div.language_chooser {
    text-align: right;
    color: #ccc;
}

.wtKlein {
    font-size: inherit; /* (PATCH, da Stil auf Teilfragen-Beschriftung angewendet ist) */
}

/* Spalten Matrix-Fragen */

.header-col-1 {
    width: 500px !important;
}

.header-col-2 {
    width: 50px !important;
}

.header-col-3 {
    width: 50px !important;
}


/* Sammel-Validierungsmeldungen ausblenden */

.all-warnings {
    display: none;
}

.wtTestOverview .wtAnswerOptionTable .wtAnswerOptionCell .bold {
    font-weight: normal;
}

.wtTestOverview .wtAnswerOptionTable .wtAnswerOptionCell .wtAnswerContentBox {
    text-align: right;
}

.wtTestOverview .wtAnswerOptionTable.wtRegistrationForm .wtAnswerOptionCell .wtAnswerContentBox,
.wtTestOverview .wtAnswerOptionTable.wtCompactStandard .wtAnswerOptionCell .wtAnswerContentBox {
    text-align: left;
}

.wtAnswerOptionCell[style="width:50%;"] {
    width: 80% !important;
}