/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inherit a core template and just add here some CSS, you'll still benefit of all the updates
*/

@font-face{
    font-family:Isonorm Pro;
    font-style:normal;
    font-weight:400;
    src:url(./fonts/IsonormPro.woff2) format('woff2'),
    url(./fonts/IsonormPro.woff) format('woff');
}
@font-face{
    font-family:IBM Plex Sans Thai Looped;
    font-style:normal;
    font-weight:400;
    src: url(./fonts/ibm-plex-sans-thai-looped-v5-latin-regular.eot);
    src: url(./fonts/ibm-plex-sans-thai-looped-v5-latin-regular.eot?#iefix) format('embedded-opentype'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-regular.woff2) format('woff2'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-regular.woff) format('woff'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-regular.svg#Roboto-Regular) format('svg');
}
@font-face{
    font-family:IBM Plex Sans Thai Looped;
    font-style:normal;
    font-weight:500;
    src: url(./fonts/ibm-plex-sans-thai-looped-v5-latin-500.eot);
    src: url(./fonts/ibm-plex-sans-thai-looped-v5-latin-500.eot?#iefix) format('embedded-opentype'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-500.woff2) format('woff2'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-500.woff) format('woff'),
    url(./fonts/ibm-plex-sans-thai-looped-v5-latin-500.svg#Roboto-Regular) format('svg');
}

html {
    font-size: 18px;
    line-height: 1.3rem;
    color: #3d3d3f;
}

body {
    font-size: 18px;
    line-height: 1.5rem;
    font-weight: 400;
    font-family: IBM Plex Sans Thai Looped, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
    padding-top: 60px;/* now is redefine in JS to fit any title length */
    flex-direction: column; /* article, then footer */
    display: flex; /* flex, to extend the content to full size */
    min-height: 100vh; /* full height, to bottom-align footer */
}
body > article {
    flex: 1; /* the main article should use as much space as possible */
}

.group-title {
    text-transform: uppercase;
    font-weight: 300;
    font-family: Isonorm Pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    left: -2px;
}
.navbar {
    box-shadow: none !important;
}

.navbar-light {
    background: #fff;
    border-bottom: 4px solid #0097a8;
}

.navbar-brand,
.navbar-nav li a {
    line-height: 60px;
    text-transform: uppercase;
}

.navbar-light .navbar-header .survey-name {
    color: #777;
    font-size: 18px;
    line-height: 90px;
    text-transform: uppercase;
}

.zukunftsnetz_nrw .navbar > .container-md {
    align-items: initial;
    flex-direction: column;
}

.fruity .navbar .navbar-nav .nav-item .nav-link:active,
.fruity .navbar .navbar-nav .nav-item .nav-link:focus,
.fruity .navbar .navbar-nav .nav-item .nav-link:hover {
    text-decoration: underline;
}
.fruity .navbar .navbar-nav .nav-item::after {
    display: none;
}


.progress-bar {
    background: #0399ae !important;
}

.zukunftsnetz_nrw .top-container.space-col {
    margin-top: 0;
    margin-bottom: 0;
}
.zukunftsnetz_nrw .top-container .container-fluid {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 0;
}

.zukunftsnetz_nrw .text-info,
.zukunftsnetz_nrw .text-primary,
.zukunftsnetz_nrw .text-success,
.text-info {
    color: #0399ae !important;
}

.alert {
    border-top-left-radius: 25px;
}

.question-container {
    border-top-left-radius: 25px;
    background: transparent;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .5)
}

.form-control {
    border-radius: 0;
    padding: 10px 15px;
    border: 1px solid #9caec2 !important;
    margin-bottom: 0 !important;
    color: #3d3d3f !important;
    font-family: Isonorm Pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-height: 50px;
}

.zukunftsnetz_nrw .answer-container .question-item .control-label {
    line-height: 50px;
}
.zukunftsnetz_nrw .answer-container .checkbox-item .control-label {
    line-height: unset;
}

.form-control:focus {
    box-shadow: none;
}

.radio-item label:after {
    background: #0399ae !important;
}
.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(3,153,174,0.6) !important;
}


.top-container .progress {
    box-shadow: none;
    border-radius: 0;
}
.progress .progress-bar {
    line-height: 22px;
}

.ls-even {
    background: transparent;
}

.date-timepicker-group {
    margin-bottom: 20px !important;
}

.date-timepicker-group .form-control {
    margin-bottom: 0 !important;
}

.btn {
    border-radius: 0;
}

.zukunftsnetz_nrw .btn-outline-secondary,
.btn-default {
    padding: 10px 50px;
    border: 1px solid #0399ae !important;
    color: #0399ae !important;
}

.btn-primary {
    padding: 10px;
    border: none !important;
    border-radius: 0;
    background: #0399ae !important;
    color: #fff !important;
}

.btn-info {
    background: #0399ae !important;
    color: #fff !important;
}

.zukunftsnetz_nrw .bootstrap-buttons-div .form-check .btn-check:checked + label.btn,
.zukunftsnetz_nrw .btn-group .btn-check:checked + .btn,
.zukunftsnetz_nrw .btn-group .btn-check:active + .btn,
.btn:active, .btn.active {
    background-color: #286090 !important;
    color: #fff !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active,
.zukunftsnetz_nrw .dropdown-menu > .active > a,
.zukunftsnetz_nrw .dropdown-menu > .active > a:focus,
.zukunftsnetz_nrw .dropdown-menu > .active > a:hover,
.zukunftsnetz_nrw .dropdown-menu > li > a:focus,
.zukunftsnetz_nrw .dropdown-menu > li > a:hover {
    background-color: #e6f2f2 !important;
}

.btn-primary:hover {
    background: #3d3d3f !important;
}

.zukunftsnetz_nrw .table > :not(:first-child) {
    border-top-width: 0;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border: solid #ddd !important;
    border-width: 1px 1px 2px 1px !important;
}

a {
    color: #0399ae !important;
}

.text-primary {
    color: #0399ae !important;
}

.panel-primary {
    border: 1px solid #0399ae !important;
}
.panel-primary > .panel-heading {
    background: #0399ae !important;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: #204d74 !important;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #286090 !important;
}

.navbar a.animate::after {
    background-color: #0399ae !important;
}

.navbar-toggle .icon-bar {
    background-color: #0399ae !important;
}
.navbar-toggle {
    border: solid 1px #0399ae !important;
}

input[type="checkbox"]:checked::after,
.checkbox input[type="checkbox"]:checked::after,
.checkbox-inline input[type="checkbox"]:checked::after {
    background-color: #0399ae !important;
    border-color: #0399ae !important;
}

.bootstrap-select.form-control {
    border: none !important;
    padding: 0;
}

.dropdown-menu {
    margin: 0;
    padding: 0;
    border-color: #0399ae !important;
    border-radius: 0;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.175);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: #e6e6e6;
}

.dropdown-toggle .btn {
    font-size: 17px !important;
}

.well {
    border-radius: 25px 0 0 0;
    background: none;
    box-shadow: none;
}

footer {
    border-top: 4px solid #0097a8;
    padding: 1rem;
}

footer a {
    display: inline;
}

footer .headline {
    color: #9caec2;
}

footer .smallImgContainer {
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
}

footer .smallImgContainer .imgSmall {
    height: 50px;
    margin-bottom: 10px;
}

.row {
    display:-webkit-box;
    display:flex;
    flex-wrap:wrap;
    margin-right:-25px;
    margin-left:-25px
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
    position:relative;
    width:100%;
    min-height:1px;
    padding-right:25px;
    padding-left:25px
}
.col {
    flex-basis:0;
    -webkit-box-flex:1;
    flex-grow:1;
    max-width:100%
}
.col-auto {
    flex:0 0 auto;
    width:auto
}
.col-1,
.col-auto {
    -webkit-box-flex:0
}
.col-1 {
    flex:0 0 8.33333%;
    max-width:8.33333%
}
.col-2 {
    flex:0 0 16.66667%;
    max-width:16.66667%
}
.col-2,
.col-3 {
    -webkit-box-flex:0
}
.col-3 {
    flex:0 0 25%;
    max-width:25%
}
.col-4 {
    flex:0 0 33.33333%;
    max-width:33.33333%
}
.col-4,
.col-5 {
    -webkit-box-flex:0
}
.col-5 {
    flex:0 0 41.66667%;
    max-width:41.66667%
}
.col-6 {
    flex:0 0 50%;
    max-width:50%
}
.col-6,
.col-7 {
    -webkit-box-flex:0
}
.col-7 {
    flex:0 0 58.33333%;
    max-width:58.33333%
}
.col-8 {
    flex:0 0 66.66667%;
    max-width:66.66667%
}
.col-8,
.col-9 {
    -webkit-box-flex:0
}
.col-9 {
    flex:0 0 75%;
    max-width:75%
}
.col-10 {
    flex:0 0 83.33333%;
    max-width:83.33333%
}
.col-10,
.col-11 {
    -webkit-box-flex:0
}
.col-11 {
    flex:0 0 91.66667%;
    max-width:91.66667%
}
.col-12 {
    -webkit-box-flex:0;
    flex:0 0 100%;
    max-width:100%
}
@media (min-width:576px) {
    .col-sm {
        flex-basis:0;
        -webkit-box-flex:1;
        flex-grow:1;
        max-width:100%
    }
    .col-sm-auto {
        -webkit-box-flex:0;
        flex:0 0 auto;
        width:auto
    }
    .col-sm-1 {
        -webkit-box-flex:0;
        flex:0 0 8.33333%;
        max-width:8.33333%
    }
    .col-sm-2 {
        -webkit-box-flex:0;
        flex:0 0 16.66667%;
        max-width:16.66667%
    }
    .col-sm-3 {
        -webkit-box-flex:0;
        flex:0 0 25%;
        max-width:25%
    }
    .col-sm-4 {
        -webkit-box-flex:0;
        flex:0 0 33.33333%;
        max-width:33.33333%
    }
    .col-sm-5 {
        -webkit-box-flex:0;
        flex:0 0 41.66667%;
        max-width:41.66667%
    }
    .col-sm-6 {
        -webkit-box-flex:0;
        flex:0 0 50%;
        max-width:50%
    }
    .col-sm-7 {
        -webkit-box-flex:0;
        flex:0 0 58.33333%;
        max-width:58.33333%
    }
    .col-sm-8 {
        -webkit-box-flex:0;
        flex:0 0 66.66667%;
        max-width:66.66667%
    }
    .col-sm-9 {
        -webkit-box-flex:0;
        flex:0 0 75%;
        max-width:75%
    }
    .col-sm-10 {
        -webkit-box-flex:0;
        flex:0 0 83.33333%;
        max-width:83.33333%
    }
    .col-sm-11 {
        -webkit-box-flex:0;
        flex:0 0 91.66667%;
        max-width:91.66667%
    }
    .col-sm-12 {
        -webkit-box-flex:0;
        flex:0 0 100%;
        max-width:100%
    }
}
@media (min-width:768px) {
    .col-md {
        flex-basis:0;
        -webkit-box-flex:1;
        flex-grow:1;
        max-width:100%
    }
    .col-md-auto {
        -webkit-box-flex:0;
        flex:0 0 auto;
        width:auto
    }
    .col-md-1 {
        -webkit-box-flex:0;
        flex:0 0 8.33333%;
        max-width:8.33333%
    }
    .col-md-2 {
        -webkit-box-flex:0;
        flex:0 0 16.66667%;
        max-width:16.66667%
    }
    .col-md-3 {
        -webkit-box-flex:0;
        flex:0 0 25%;
        max-width:25%
    }
    .col-md-4 {
        -webkit-box-flex:0;
        flex:0 0 33.33333%;
        max-width:33.33333%
    }
    .col-md-5 {
        -webkit-box-flex:0;
        flex:0 0 41.66667%;
        max-width:41.66667%
    }
    .col-md-6 {
        -webkit-box-flex:0;
        flex:0 0 50%;
        max-width:50%
    }
    .col-md-7 {
        -webkit-box-flex:0;
        flex:0 0 58.33333%;
        max-width:58.33333%
    }
    .col-md-8 {
        -webkit-box-flex:0;
        flex:0 0 66.66667%;
        max-width:66.66667%
    }
    .col-md-9 {
        -webkit-box-flex:0;
        flex:0 0 75%;
        max-width:75%
    }
    .col-md-10 {
        -webkit-box-flex:0;
        flex:0 0 83.33333%;
        max-width:83.33333%
    }
    .col-md-11 {
        -webkit-box-flex:0;
        flex:0 0 91.66667%;
        max-width:91.66667%
    }
    .col-md-12 {
        -webkit-box-flex:0;
        flex:0 0 100%;
        max-width:100%
    }
}
@media (min-width:992px) {
    .col-lg {
        flex-basis:0;
        -webkit-box-flex:1;
        flex-grow:1;
        max-width:100%
    }
    .col-lg-auto {
        -webkit-box-flex:0;
        flex:0 0 auto;
        width:auto
    }
    .col-lg-1 {
        -webkit-box-flex:0;
        flex:0 0 8.33333%;
        max-width:8.33333%
    }
    .col-lg-2 {
        -webkit-box-flex:0;
        flex:0 0 16.66667%;
        max-width:16.66667%
    }
    .col-lg-3 {
        -webkit-box-flex:0;
        flex:0 0 25%;
        max-width:25%
    }
    .col-lg-4 {
        -webkit-box-flex:0;
        flex:0 0 33.33333%;
        max-width:33.33333%
    }
    .col-lg-5 {
        -webkit-box-flex:0;
        flex:0 0 41.66667%;
        max-width:41.66667%
    }
    .col-lg-6 {
        -webkit-box-flex:0;
        flex:0 0 50%;
        max-width:50%
    }
    .col-lg-7 {
        -webkit-box-flex:0;
        flex:0 0 58.33333%;
        max-width:58.33333%
    }
    .col-lg-8 {
        -webkit-box-flex:0;
        flex:0 0 66.66667%;
        max-width:66.66667%
    }
    .col-lg-9 {
        -webkit-box-flex:0;
        flex:0 0 75%;
        max-width:75%
    }
    .col-lg-10 {
        -webkit-box-flex:0;
        flex:0 0 83.33333%;
        max-width:83.33333%
    }
    .col-lg-11 {
        -webkit-box-flex:0;
        flex:0 0 91.66667%;
        max-width:91.66667%
    }
    .col-lg-12 {
        -webkit-box-flex:0;
        flex:0 0 100%;
        max-width:100%
    }
}
@media (min-width:1200px) {
    .col-xl {
        flex-basis:0;
        -webkit-box-flex:1;
        flex-grow:1;
        max-width:100%
    }
    .col-xl-auto {
        -webkit-box-flex:0;
        flex:0 0 auto;
        width:auto
    }
    .col-xl-1 {
        -webkit-box-flex:0;
        flex:0 0 8.33333%;
        max-width:8.33333%
    }
    .col-xl-2 {
        -webkit-box-flex:0;
        flex:0 0 16.66667%;
        max-width:16.66667%
    }
    .col-xl-3 {
        -webkit-box-flex:0;
        flex:0 0 25%;
        max-width:25%
    }
    .col-xl-4 {
        -webkit-box-flex:0;
        flex:0 0 33.33333%;
        max-width:33.33333%
    }
    .col-xl-5 {
        -webkit-box-flex:0;
        flex:0 0 41.66667%;
        max-width:41.66667%
    }
    .col-xl-6 {
        -webkit-box-flex:0;
        flex:0 0 50%;
        max-width:50%
    }
    .col-xl-7 {
        -webkit-box-flex:0;
        flex:0 0 58.33333%;
        max-width:58.33333%
    }
    .col-xl-8 {
        -webkit-box-flex:0;
        flex:0 0 66.66667%;
        max-width:66.66667%
    }
    .col-xl-9 {
        -webkit-box-flex:0;
        flex:0 0 75%;
        max-width:75%
    }
    .col-xl-10 {
        -webkit-box-flex:0;
        flex:0 0 83.33333%;
        max-width:83.33333%
    }
    .col-xl-11 {
        -webkit-box-flex:0;
        flex:0 0 91.66667%;
        max-width:91.66667%
    }
    .col-xl-12 {
        -webkit-box-flex:0;
        flex:0 0 100%;
        max-width:100%
    }
}
@media (min-width:1600px) {
    .col-xxl {
        flex-basis:0;
        -webkit-box-flex:1;
        flex-grow:1;
        max-width:100%
    }
    .col-xxl-auto {
        -webkit-box-flex:0;
        flex:0 0 auto;
        width:auto
    }
    .col-xxl-1 {
        -webkit-box-flex:0;
        flex:0 0 8.33333%;
        max-width:8.33333%
    }
    .col-xxl-2 {
        -webkit-box-flex:0;
        flex:0 0 16.66667%;
        max-width:16.66667%
    }
    .col-xxl-3 {
        -webkit-box-flex:0;
        flex:0 0 25%;
        max-width:25%
    }
    .col-xxl-4 {
        -webkit-box-flex:0;
        flex:0 0 33.33333%;
        max-width:33.33333%
    }
    .col-xxl-5 {
        -webkit-box-flex:0;
        flex:0 0 41.66667%;
        max-width:41.66667%
    }
    .col-xxl-6 {
        -webkit-box-flex:0;
        flex:0 0 50%;
        max-width:50%
    }
    .col-xxl-7 {
        -webkit-box-flex:0;
        flex:0 0 58.33333%;
        max-width:58.33333%
    }
    .col-xxl-8 {
        -webkit-box-flex:0;
        flex:0 0 66.66667%;
        max-width:66.66667%
    }
    .col-xxl-9 {
        -webkit-box-flex:0;
        flex:0 0 75%;
        max-width:75%
    }
    .col-xxl-10 {
        -webkit-box-flex:0;
        flex:0 0 83.33333%;
        max-width:83.33333%
    }
    .col-xxl-11 {
        -webkit-box-flex:0;
        flex:0 0 91.66667%;
        max-width:91.66667%
    }
    .col-xxl-12 {
        -webkit-box-flex:0;
        flex:0 0 100%;
        max-width:100%
    }
}