@CHARSET "UTF-8";

/** VENDOR IMPORT **/
@import "../../../vendor/bootstrap/4/css/bootstrap.min.css";
@import "../../../vendor/fontawesome/5/css/all.min.css";
/** END VENDOR IMPORT **/

/** FONTS IMPORT **/
@font-face {
    font-family: 'Frutiger';
    src: url('../../../fonts/Frutiger-Light.eot');
    src: url('../../../fonts/Frutiger-Light.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/Frutiger-Light.woff') format('woff'),
    url('../../../fonts/Frutiger-Light.ttf')  format('truetype'),
    url('../../../fonts/Frutiger-Light.otf')  format('opentype'),
    url('../../../fonts/Frutiger-Light.svg#svgFontName') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Frutiger';
    src: url('../../../fonts/Frutiger-Bold.eot');
    src: url('../../../fonts/Frutiger-Bold.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/Frutiger-Bold.woff') format('woff'),
    url('../../../fonts/Frutiger-Bold.ttf')  format('truetype'),
    url('../../../fonts/Frutiger-Bold.otf')  format('opentype'),
    url('../../../fonts/Frutiger-Bold.svg#svgFontName') format('svg');
    font-weight: 600;
    font-style: normal;
}
/** END FONTS IMPORT **/

/** GENERAL Container from layout_de (Navigation, Header, Content, Footer **/

html, body {
    font-family: 'Frutiger', sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #878787;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url('../../../www/img/kachel.jpg');
}

/** COLORS **/
.g1-primary { color: #6d84c0 !important; }
.g1-primary-bg { background: #6d84c0 !important; }
.g1-secondary { color: #0758a1 !important; }
.g1-secondary-bg { background: #0758a1 !important; }
.g1-grey { color: #878787 !important; }
.g1-grey-bg { background: #878787 !important; }

#site_wrapper {
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#content {
    max-width: 960px;
    background: #FFF;
    flex-grow: 1;
}
#footer .container {
    max-width: 960px;
}
.padded {
    padding: 0 140px 0 128px;
}
.narrow {
    margin: 0 0 5px 0;
}
.static {
    display: flex;
    align-items: center;
    height: 38px;
}
.footer-text {
    color: #878787;
}

/** LINKS **/
a, a:active, a:hover, a:visited, a:focus, a:link {
    text-decoration: none;
    color: #878787;
}

.btn-link:focus, .btn-link:active, .btn-link:hover {
    text-decoration: none;
}

/** HEADLINES **/
h1 {
    font-size:26px;
    line-height: 30px;
    font-weight: 400;
}
h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}
/** TABLES **/
table{
    border-collapse: collapse;
    empty-cells: show;
    border:0;
}
table.full-width{
    width:100%;
}
th, td{
    vertical-align: top;
    border: 0;
    padding: 4px 0;
}

td.divider {
    font-size:1.25em; /* 20px */
    line-height: 3em; /* 30px */
    font-weight:400;
    color:#6d84c0;
}
table.survey th, table.survey td {padding: 6px; text-align: center; vertical-align: middle;font-size: 0.85em}
table.survey td.topic {text-align: left;}
table.survey th, table.survey td.topic {font-weight: normal;}
table.survey tr.error td.topic {background:#FBE3E4;}
table.survey th,
table.survey td {border-top:1px solid #0077b3; border-bottom:1px solid #0077b3; border-right:1px solid #0077b3;}
table.survey td:last-child,
table.survey th:last-child{border-right: 0px solid #0077b3;}
textarea.survey {border:1px solid #0077b3;width:748px;height:200px;padding:10px}
textarea.survey.checkbox {width: 380px; height: 100px;padding:10px;}

table.survey .radio, .checkbox {
    margin-left:33px;
}

table.survey .radio:not(.man) input[type=radio] ~ .check {
    top: 7px;
    height: 1.2em;
    width: 1.2em;
}

table.survey input[type=radio] ~ .check::before {
    left: 2px;
    top: 2px;
    height: 8px;
    width: 8px;
}

table.survey .checkbox {
    margin-left:5px;
}

table.survey .checkbox-inline {
    margin: -5px 0 -5px 15px;
}

table.survey .with-text {
    margin: -5px 0 -20px -28px;
}

table.survey .with-text .text {
    width:250px;
}

table.survey .text {
    margin-left:10px;
}
/** FORM Stuff **/
.form-row {
    margin-right: 0;
}
.form-control:focus {
    border-color: #878787;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #878787;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #878787;
}
.ff .form-control {
    text-align: left;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #FFF;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='%236d84c0'/%3E%3C/svg%3E");
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #FFF;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%236d84c0' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")
}
.custom-control-label::before {
    border: 2px solid #6d84c0;
}
.custom-control-label::before, .custom-control-label::after {
    top: 0.15rem;
    height: 1.2em;
    width: 1.2em;
}
.custom-control-label::after {
    left: -1.482rem;
    top: 0.125rem;
}
.custom-radio.crr .custom-control-label::after {
    left: -1.5rem;
}
.padding-correction {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
}
label.confirmation {
    padding: 0;
}
div.confirmation {
    border: 0;
    padding: 0;
    display: flex;
    align-items: end;
}

/** Validation **/
.error, label.is-invalid, div.is-invalid {
    color: #dc3545;
}

.h-inherit {
    height: 100% !important;
}

.btn-brand {
    background-color: #878787;
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

.btn-done {
    background-color: #89898f;
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    height: 45px;
}
.btn:hover { color: #FFFFFF; }
.btn-brand:hover {
    background-color: #878787;
}
.btn.no-cursor { cursor: default !important; }

.btn-brand:active, bth-brand:focus {}
.btn-brand:disabled {}

.btn-logout {
    display: flex;
    height: 30px;
    flex-flow: column;
    justify-content: center;
}

#header_img {
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: center;
}