/******************
    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 inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
@font-face {  
  font-family: 'Roboto Slab';
  src: url('https://www.esslingen.de/site/Esslingen_Layout_2022/resourceCached/10.5.1.1/fonts/RobotoSlab-VariableFont_wght.ttf');
  font-display: swap;
}
/* latin-ext */
/*
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../RobotoSlab_normal_100_900_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*/
/* latin */
/*
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../RobotoSlab_normal_100_900_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/

:root {
    --bs-body-bg: #f0f5f8;
    --bs-body-color: #002733;
    --bs-body-font-size: 1.25rem; /* clamp(1.063rem, calc(0.9943rem + 0.3409vw), 1.25rem); */
    --bs-font-scale: var(--bs-body-font-size) / 1.25rem;
    --bs-radio-checkbox-top-offset: calc(5px * var(--bs-font-scale));
    --bs-light-rgb: 255, 255, 255;
    --bs-bg-opacity: 1;
    --esslingen-schrift-blau: #002733;
    --esslingen-blau: #014e66;
    --esslingen-dunkelblau: #003647;
    --color-primary-rgb: 1, 78, 102;
    --bs-primary-rgb: var(--esslingen-blau);
}

body {
    color: var(--esslingen-schrift-blau);
    font-family: "Source Sans Pro", sans-serif;
}

h1, h2, h3, /* h4, h5, h6, */
.h1, .h2, .h3 /*, .h4, .h5, .h6 */ {
    color: var(--esslingen-blau);
    font-family: "Roboto Slab", serif;
    font-weight: 700;
}

a {
    color: var(--esslingen-blau);
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--esslingen-dunkelblau);
    text-decoration: underline;
    
}

#survey-nav {
    border-bottom-width: 0 !important;
    box-shadow: 0 3px 20px #00000029;
}
.navbar-toggler {
    margin: 10px;
}
.logo-container > img {
    margin: 1rem;
}

.progress-bar {
    background-color: var(--esslingen-blau);
}

.question-container {
    background-color: rgb(var(--bs-light-rgb));
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    box-shadow: 0 3px 20px 0 rgba(1, 62, 82, 0.12);
    padding: 2rem;
}
.question-container:last-child {
    margin-bottom: 0;
}

#navigator-container .text-end {
    padding-right: 0;
}
#navigator-container .text-start {
    padding-left: 0;
}

.form-control {
    font-size: var(--bs-body-font-size);
}
.form-control, .btn, .btn-lg {
    border-radius: 0;
    padding: 0.8rem 1.3rem;
}
.form-select {
    padding-right: 2.6rem;
}

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    padding-right: 1rem;
}
.radio-item label::before,
.checkbox-item label::before {
    top: 5px;
}
.radio-item label::after {
    top: 8px;
}
.checkbox-item label::after {
    top: 6px;
}
.form-check-input:checked {
    background-color: var(--esslingen-blau);
    border-color: var(--esslingen-blau);
}

.ls-answers label:not(.radio-label):not(.checkbox-label), .ls-answers th, .col-form-label {
    padding-top: calc(.8em + 1px);
}
.input-group-text.checkbox label {
    padding-top: 0;
}

.btn {
    font-size: var(--bs-body-font-size);
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-primary {
    background-color: var(--esslingen-blau);
    border-color: var(--esslingen-blau);
}
.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary:hover {
    background-color: var(--esslingen-dunkelblau);
    border-color: var(--esslingen-dunkelblau);
    text-decoration: underline;
}

.text-info {
    color: var(--bs-body-color) !important;
}
.text-info .ls-questionhelp {
    font-style: italic;
}
.text-info .ls-questionhelp:before {
    font-style: normal;
}
.dir-ltr .ls-questionhelp {
    margin-left: 1em;
}
.text-info .error {
    color: #FF0000;
}
/*
  .bg-light {
    background-color: #FFF !important;
  }

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
/