@font-face {
       font-family: 'LatoBlack';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Black.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Black.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Black.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Black.woff') format('woff');
       font-style: normal;
       font-weight: bold;
       text-rendering: optimizeLegibility;
   }/*!sc*/

   @font-face {
       font-family: 'LatoBold';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Bold.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Bold.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Bold.woff') format('woff');
       font-style: normal;
       font-weight: bold;
       text-rendering: optimizeLegibility;
   }/*!sc*/

   @font-face {
       font-family: 'LatoHeavy';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Heavy.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Heavy.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Heavy.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Heavy.woff') format('woff');
       font-style: normal;
       font-weight: normal;
       text-rendering: optimizeLegibility;
   }/*!sc*/

   @font-face {
       font-family: 'LatoLight';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Light.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Light.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Light.woff') format('woff');
       font-style: normal;
       font-weight: light;
       text-rendering: optimizeLegibility;
   }/*!sc*/

   @font-face {
       font-family: 'Lato';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Regular.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Regular.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Regular.woff') format('woff');
       font-style: normal;
       font-weight: normal;
       text-rendering: optimizeLegibility;
   }/*!sc*/

   @font-face {
       font-family: 'LatoSemibold';
       font-display: fallback;
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Semibold.eot');
       src: url('https://www.weisse-liste.de/static/fonts/LatoLatin-Semibold.eot?#iefix') format('embedded-opentype'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Semibold.woff2') format('woff2'), url('https://www.weisse-liste.de/static/fonts/LatoLatin-Semibold.woff') format('woff');
       font-style: normal;
       font-weight: normal;
       text-rendering: optimizeLegibility;
   }/*!sc*/

/* Basics */
body.wl_fruity{
    background: #F7F9FF;
    font-family: 'Lato', sans-serif, Helvetica, Arial;
    font-size: 16px;
    padding-top: 0 !important;
}

.wl_fruity .question-container{
    padding: 15px;
    margin-bottom: 30px;
}

/* Progress Bar*/
.wl_fruity .top-container .progress-bar{
    background-color: #DEB315;
    color: #22366F;
    box-shadow: none;
    text-align: right;
    padding-right: 5px;
}
.top-container{ margin-top: 0; }
.top-container .container-fluid{ padding: 0;}
.top-container .progress { background: #fff;}


/* BORDER RADIUS */
.wl_fruity *{
    border-radius: 0 !important;
}

/* Typography */

h1, .h1{
  font-family: 'LatoBold', sans-serif, Helvetica, Arial;
  font-size: 40px;
  color: #22366F;
  line-height: 42px;
}

h2, .h2{
  font-family: 'LatoHeavy', sans-serif, Helvetica, Arial;
  font-size: 32px;
  color: #22366F;
  line-height: 38px;
}

h3, .h3{
  font-family: 'LatoSemibold', sans-serif, Helvetica, Arial;
  font-size: 24px;
  color: #22366F;
}

.wl_fruity a, .wl_fruity a:hover, .wl_fruity a:focus{
  color: #0C9ACF;
}

.wl_fruity #welcome-container .text-info, .wl_fruity #welcome-container  .text-primary{
  font-size: 16px;
  color: #333;
  line-height: 24px;
  text-align: left;
}

/* BUTTONS */

/*Primary*/
.wl_fruity .btn-primary, .wl_fruity .btn-primary[disabled], .wl_fruity .btn-primary[disabled]:hover{
    background-color: #0C9ACF;
    border: none;
    font-size: 19px;
    padding: 10px 30px;
}
.wl_fruity .btn-primary:hover, .wl_fruity .btn-primary:focus, .wl_fruity .btn-primary:active, .wl_fruity .btn-primary.active, .wl_fruity .btn-primary.active:focus, .wl_fruity .open .dropdown-toggle.btn-primary{
    background: #55B8DD;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.20);
}
.wl_fruity .btn-primary[disabled]{
  text-decoration: line-through;
  opacity: 0.3;
  background: #0C9ACF;
  color: #333;
}
/*Secondary*/
.wl_fruity .btn-default, .wl_fruity .btn-default:hover, .wl_fruity .btn-default:focus, .wl_fruity .btn-default:active, .wl_fruity .btn-default.active, .wl_fruity .open .dropdown-toggle.btn-default{
  background-color: transparent;
  border: none;
  box-shadow: inset 0px 0px 0px 2px #0C9ACF;
  color: #0C9ACF;
  transition: all 0.2s ease;
  font-size: 19px;
  padding: 10px 30px;
}

.wl_fruity .btn-default:hover, .wl_fruity .btn-default:focus, .wl_fruity .btn-default:active, .wl_fruity .btn-default.active, .wl_fruity .open .dropdown-toggle.btn-default{
  box-shadow: inset 0px 0px 0px 4px #0C9ACF;
}


/* TEXTFARBEN */
/* Blau Mittel */
.wl_fruity .text-info{
    color: #0C9ACF;
}
.wl_fruity .text-danger{
    color: #D57F0D;
}



/* FORM ELEMENTS */

/* CHECKBOX + Radio */

.checkbox-item label, .radio-item label {
    padding-left: 24px;
}

.checkbox-item label::before, .checkbox-item label::after, .radio-item label::before, .radio-item label::after{
    width: 30px;
    height: 30px;
    top: -4px;
    left: 0;
}

.checkbox-item label::before, .checkbox-item label::after{
    border-radius: 0;
}

.checkbox-item label::before, .checkbox-item input[type="radio"]+label::before, .radio-item label::before{
    background: #FFFFFF;
    border: 2px solid #0C9ACF;
}

.checkbox-item input[type="checkbox"]:checked+label::before, .radio-item input[type="radio"]:checked+label::before{
    background: #0C9ACF;
    border: none;
}
.checkbox-item input[type="checkbox"]:checked+label::after{
    color: #fff;
    content: "" !important;
    background-color: transparent;
    background-image: url(https://hotlink.ymnky.space/wl/tick.svg);
    background-size: contain;
}

body .answer-item label::after{
  background-color: transparent;
  border-color: #fff;
}

.radio-item input[type="radio"]:checked + label::after{
  background-color: transparent;
  border: 5px solid #fff;
  width: 26px;
  height: 26px;
  top: -2px;
  left: 2px;
}

.checkbox-item input[type="checkbox"]:focus + label::before, .checkbox-item input[type="radio"]:focus + label::before{
    outline: none;
    outline-offset: none;
}

/* "real" Checkbox Startseite */

input[type=checkbox]{
  position: relative;
  z-index: 0;
  -webkit-appearance: none;
}

input[type=checkbox]::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 0 !important;
  border: 2px solid #0C9ACF !important;
}
input[type=checkbox]:checked::before{
  background-color: #0C9ACF;
  background-image: url(https://hotlink.ymnky.space/wl/tick.svg);
  background-size: contain;
}

.privacy input[type=checkbox]{
  top: -34px;
  left: 15px;
}


/* TEXT INPUTS */
.wl_fruity .form-control, .wl_fruity .form-control:focus{
  min-height: 46px;
  color: #333;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #0C9ACF;
  box-shadow: none;
  background: rgba(208,208,202,0.20);
  transition: all 0.25s ease;
}

.wl_fruity .form-control:focus{
  background: rgba(208,208,202,0.70);
}


/* BOXEN und CONTAINER */


.wl_fruity .alert-warning{
    border: 1px solid #D57F0D;
    color: #D57F0D;
}

.wl_fruity .well{
    background-color: #22366F;
    color: #fff;
    box-shadow: none;
}

.wl_fruity .question-container.input-error{
    box-shadow: inset 0px 0px 0px 15px #fff, inset 0px 0px 0px 17px #D57F0D;
}


/* Datenschutz-Container */

.wl_fruity .panel-primary>.panel-heading{
  background-color: #22366F;
  border: 1px solid #22366F;
}

.wl_fruity .panel-primary{
  margin-top: 30px;
  border: 1px solid #22366F;
}



/*Tabellenzellen*/
/* .ls-even{
  background: rgba(208,208,202,0.20);
} */
table .checkbox-item label::before, table .checkbox-item label::after, table .radio-item label::before, table .radio-item label::after{
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
}
table .radio-item input[type="radio"]:checked + label::after{
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border: 3px solid #fff;
}

.radio-item .ls-label-xs-visibility, .checkbox-item .ls-label-xs-visibility{
  width: 20px;
  height: 20px;
}



/* kleinere Elemente */
.wl_fruity .navbar a.animate:after{
  background-color: #0C9ACF;
}

.logo-container>img{
  max-height: 70px;
}

.navbar{
  margin-bottom: 0;
}



/* MOBILE / RESPONSIVE */

.wl_fruity .navbar-toggle{
  border: solid 1px #0C9ACF;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background-color: transparent;
}
.fruity .navbar-toggle .icon-bar{
  background-color: #0C9ACF;
}

@media only screen and (max-width: 767px) {
  body .top-container{
    margin-top: 50px !important;
  }
}