/******************
    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
*/

/* Schriftart und -größe */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans-v15-latin-regular.eot"); /* IE9 Compat Modes */
    src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v15-latin-regular.woff") format("woff"), url("../fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("../fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
}

body {
    font-family: "Open Sans";
    font-size: 16px;
}

/* Lichtstadt Logo */
.logo-container > a > img {
    max-height: 60px;
    height: auto;
    padding: 20px;
}

/* Header-Farben */
.bg-dark {
    background-color: #002c77 !important;
}

/* mobiler Headerbereich */
.navbar-toggler {
    padding: 0 !important;
}

/* Farben ans CD anpassen */
.btn-primary {
  background-color: #002c77;
  border-color: #002c77;
}
.progress-bar {
  background-color: #002c77;
}
.bg-primary {
  background-color: #002c77 !important;
}

body {
    padding-bottom: 0;
}

/* Footer */
footer {
    background-color: #002c77;
    color: #ffffff;
    padding: 15px;
    display: flex;
    justify-content: center;
}

footer a {
    color: #ffffff !important;
    text-decoration: none;
}

footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

footer ul {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

footer ul li {
  list-style-type: none;
  margin: 0 10px;
}

@media (max-width: 380px) {
  .footer ul {
    flex-direction: column;
  }
  .footer ul li {
    margin: 5px 10px;
  }
}

#surveyListFooter {
  display: none;
}

/* Hilfetexte bei Fragen */
.question-help-container {
    background-color: #efefef;
}

/* linksbündige Hinweistexte */
.text-info, .text-info:hover {
    text-align: left;
}

/* Kontrastverbesserung */
.text-info {
    color: #002c77 !important;
    background-color: #efefef !important;
}

.text-danger {
    color: #A91E10 !important;
}

.alert-danger {
  background-color: #A91E10;
}

.text-warning {
  color: #002C77;
  background: #F39C12;
}

a, a:hover, a:visited, a:active {
  color: #002c77;
}

a.btn-primary {
  color: #fff !important;
}

.text-muted {
    color: #6c757d !important;
}

.alert.alert-warning {
    color: #373737
}

.btn-outline-secondary {
    color: #677374;
    border-color: #677374;
}

/* Abstände verbessern */
.asterisk {
    margin-right: 5px;
}

.question-help-container {
    padding-top: 7px;
}

.dropdown-header {
    color: #6c757d;
    font-weight: bolder;
    font-size: 1.2rem;
}

/* zu kleine Schrift vergrößert */
.top-container .progress {
    height: 2rem;
}

.progress {
    font-size: 1rem;
}

/*!* Füge Focus hinzu*!*/
/*.ls-answers.answers-list .list-unstyled:focus-visible {*/
/*    outline: 2px rgba(12, 124, 101, 0.40) solid;*/
/*    box-shadow: rgba(12, 124, 101, 0.3) 4px 0px 0px ,rgba(12, 124, 101, 0.3) 0px 0px 4px;*/
/*    border-radius: 0.3em;*/
/*    border-inline-width: thin;*/
/*}*/

/* fix: Einträge liefen aus dem container raus */
.imageselect-list {
    justify-content: center;
    display: grid;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-cancel:hover, .btn-cancel:focus, .btn-cancel:active {
    box-shadow: rgba(12, 124, 101, 0.3) 4px 4px 0px;
    color: hsla(0, 0%, 100%, .75);
}

/* erweitere den hover-Effekt auch auf den Fokus-Effekt */
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    color: #fff;
    background-color: #95a5a6;
    border-color: #95a5a6;
}

/* Hover und Fokus Effekte von Links auf der Navbar lesbar machen*/
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: hsla(0, 0%, 100%, .75);
}

.question-number, .question-code {
    float: left;
    margin: 0 0.8em;
    border-left: white solid 6px;
    border-right: white solid 6px;
    background-color: white;
    color: #3b4344 !important;
    font-family: monospace;
    font-weight: bolder;
    border-radius: 0.3em;
}

.dropdown-sub-menu.dropdown-menu .dropdown-item:hover {
    background-color: #e3e8ee;
}


li.dropdown-item.index-item.index-item-seen::before {
    content: "✓";
    font-family: monospace;
    border-right: 6px solid rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
    border-left: 6px solid rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
    border-radius: .25rem;
    margin-right: 0.35em;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
    color: black;
}

li.dropdown-item.index-item.index-item-seen.index-item-unanswered::before {
    content: "?";
    font-family: monospace;
    border-left: 6px solid rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
    border-right: 6px solid rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
    border-radius: .25rem;
    margin-right: 0.35em;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
    color: black;
}