}h1 {
  font-size: 36px;
  font-weight: normal;
  margin: 20px 0;
}
/*body .group-container
{
  font-size:calc(1.2rem + 1.0vw)
}
@media (min-width:1200px) {
 body .group-container {
    font-size:2.5rem
  }
}
*/
 .space-col{
     margin:0;
 }
  #navigator-container {
     display: flex;
     align-items: center; /* Vertikale Zentrierung */
     margin-top: 0px;
     margin-bottom: 0px;
    
 }
 
 .logo {
    z-index:9999;
    position:fixed;
    }
           @media (max-width: 500px) {
            .logo {
                max-width: 100px;
            }
        }
/* Styles für die Startseite */        
        #welcome-container {
            background:white;
            border-radius:10px;
            padding:10px;
            width: 100%; 
            max-width: 1200px; 
            margin: 0 auto; 
            text-align: center; 

        }
        
        .start-grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 1fr;
            gap: 1.4rem;
            max-width: 1200px; 
            margin: 0 auto; 
        }
        
        .start-container-kasten {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: left;
            gap: 1.2rem;
            border-radius: 8px;
            border: 3px solid #11807D;
            width: 100%; 
           justify-content: center;
           padding: 3px;
        }

      
        .start-container-kasten p {
            width: 100%; 
            line-height: 1.5rem;
            text-align: left; 
           justify-content: center;
        }


        @media only screen and (max-width: 1400px) {
            .start-container-kasten {
                justify-content: center;
            }
        }
        
        @media only screen and (max-width: 767px) {
            .start-grid-container {
                grid-template-columns: 1fr;
               justify-content: center;
            }
        }
/* Styles für den */
.fruity .dropdown-menu > li > a:hover{
    background-color:transparent !important;
}
.fruity .dropdown-menu > li > a {
    color:white;
}

.fruity .dropdown-menu{
    border-radius:10px;
}

.fruity .list-group-item{
    margin:3px;
    border-radius:5px;
    background-color:#0041BD;
}

.group-container{
 background:white; 
 border-radius: 10px;padding:10px   
}

/*Iconcard Effekt für die Abschlussfolien */
.iconcard:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  	cursor: pointer;
}

.iconcard:active {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#nolink{
    cursor: auto;
    box-shadow:none;
    display:block;
    
}
#nolink > .icon-img-container::after {
            content: '';
            display: block;
            height: 0;
          
            max-width: 80%;
            border-top: 2px solid black;
            margin-left: auto;
            margin-right: auto;
            margin-top: 16px;
        }
#nolink2{
    cursor: auto;
    box-shadow:none;
}
        
.fruity .table-bordered, .fruity .table-bordered > tbody > tr > td, .fruity .table-bordered > tbody > tr > th, .fruity .table-bordered > tfoot > tr > td, .fruity .table-bordered > tfoot > tr > th, .fruity .table-bordered > thead > tr > td, .fruity .table-bordered > thead > tr > th {
  border-collapse:initial;
  border: none;
  border-spacing:0px;
}



.fruity .table-bordered > tbody > tr > td, 
.fruity .table-bordered > tbody > tr > th, 
.fruity .table-bordered > tfoot > tr > td, 
.fruity .table-bordered > tfoot > tr > th {
    border-block-start: 1px solid #dadada; /* Apply border to top of each cell in tbody and tfoot */
    
    
}

.checkbox-item label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top: 0;
  margin-left: -20px;
  border: 1px solid #0041BD;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
  background-color: white;
  color: #0041BD;
  border: 1px solid #0041BD;
}

.radio-item label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top: 0;
  margin-left: -20px;
  border: 1px solid #0041BD;;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}

.ls-heading,
.ls-header{
    background-color: #F5F3ED;
    color:black;
}



.ls-even {
    background-color: #FFFFFF;
}



.scrolled {
    background-color: #621B76 /* Hintergrundfarbe beim Scrollen */
}
.content-container {
    padding-top: 20px; /* Height of the header */
    padding-bottom: 5px; /* Space for the footer */
    margin-top: 5px;
    margin-bottom: 5px;
    /*overflow-y: auto;  Add vertical scrollbar when content overflows */
    height: calc(100vh - 130px); /* Adjusted height calculation */
}

.content {
    padding: 20px;
}
#questionIndexMenu li::before {
    counter-increment: itemCount; /* Increment the counter for each li */
}

.question-container{
    box-shadow:none !important;
    border:none !important;
}

#itemCount::before {
    content: "Number of items: " counter(itemCount); /* Display the counter */
}
.progress-circles {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.circle {
    width: 20px;
    height: 20px;
    border: 3px solid #ccc; /* default circle outline color */
    border-radius: 50%;
    background-color: transparent; /* default background color */
}

.circle.filled {
    background-color: #FFFFFF; /* filled circle color */
    border-color: #FFFFFF; /* filled circle border color */
}

/* .button-nav{
 display: inline-block;
  padding: 10px 20px 10px 20px;
  background-color: #0041BD;
  border-radius: 28px;
  text-decoration: none;   
  font-family: 'Space Grotesk', sans-serif;
  color: white;
}

*/
.button-nav{
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 20px;
  /*font-family: 'Space Grotesk', sans-serif;*/
  color: #ffffff;
  font-size: 16px;
  background: #0041BD;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  font-weight: normal;  /* Set font weight to normal */
  border: none;
}

.button-nav:hover {
  background: #1e65e8;
  text-decoration: none;
}

#survey-nav .navbar-toggler {
    color: #ffffff; /* Setze die Farbe auf Weiß */
}
.navbar-toggler-icon {
  /*  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1.0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); */
    background-image: url("http://85.215.55.219/limesurvey/assets/bootstrap-icons-1.11.3/justify.svg");
    background-size: cover;
}

#dropdown-menu {
    background-color:white;
    
}
.nav-link.button-nav {
            color: #ffffff;  /* Set font color to white */
            background-color: #0041BD;  /* Optional: ensure background color is as desired */
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: normal;  /* Set font weight to normal */
           /* font-family: 'Space Grotesk', sans-serif;  Use Space Grotesk if available */ 
        }

.nav-link.button-nav:hover {
            background-color: #1e65e8;  /* Change background color on hover */
            color: #ffffff;  /* Ensure font color remains white on hover */
            text-decoration: none;
        }
        
@media (max-width: 390px) {
    .nav-link.load-button.button-nav{
        font-size:14px;
    }
    .nav-link.button-nav {
        font-size: 11px;  /* Reduce the font size */
        padding: 3px 8px;  /* Adjust the padding for a smaller button */
    }
    
}
@media (max-width: 350px) {
    .nav-link.load-button.button-nav{
        font-size:11.5px;
    }
    .nav-link.button-nav {
        font-size: 11px;  /* Reduce the font size */
        padding: 3px 8px;  /* Adjust the padding for a smaller button */
    }
    
}
        
#container-fluid {
    display: flex;
    align-items: center; /* Vertically center the content */
}

.navbar-vertically-centered .nav {
    margin: 0 auto; /* Horizontally center the navbar content */
}

.bg-color{
   background-color: rgba(98, 27, 118, 1); 
}

#survey-nav.bg-color {
    color: #fff;
    padding: 20px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

body{
    font-weight:normal;
    counter-reset: itemCount; /* Initialize the counter */
}

.h3 {
    font-size: 26px;
    /* font-family: "Space Grotesk, medium";  Hier wird die Schriftart "Grotesk" verwendet, gefolgt von einer generischen Schriftart. */
}

.fruity .text-primary, .fruity .text-info{
    color: black !important;
}

.fruity .text-secondary{
    color: rgb(182, 210, 228) !important;
}

.fruity .btn-primary{
    background-color: #0041BD;
    border: #0041BD;
}

.fruity .btn-primary:focus{
    background-color: #0041BD;
    border: #0041BD;
}

.fruity .btn-primary:hover{
    background-color: #0041BD;
    border: #0041BD;
    filter: brightness(70%);
}

.fruity .btn-outline-secondary{
    background-color: hsla(0,0%,100%,.2);
    border: 1px solid rgb(45, 137, 204);
    color: rgb(45, 137, 204);
}

.fruity .btn-outline-secondary:focus{
    background-color: hsla(0,0%,100%,.2);
    border: 1px solid rgb(45, 137, 204);
    color: rgb(45, 137, 204);
}

.fruity .btn-outline-secondary:hover{
    background-color: hsla(0,0%,100%,.2);
    border: 1px solid rgb(45, 137, 204);
    color: rgb(45, 137, 204);
    filter: brightness(70%);
}

.fruity .btn-link{
    color: rgb(45, 137, 204);
}

.fruity .btn-link:hover{
    color: rgb(45, 137, 204);
    filter: brightness(70%);
}

.fruity a{
    color: rgb(45, 137, 204);
}

.fruity a:hover{
    color: rgb(45, 137, 204);
    filter: brightness(70%);
}

/* .fruity .navbar .navbar-nav .nav-item:hover::after{
    background-color: rgb(45, 137, 204);
}
*/
.fruity .form-control {
  background-color: #E4EAF8;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  color: #636363;
}

.fruity .form-control:focus{
    border: 1px solid rgb(45, 137, 204);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(45, 137, 204,.6);
}

body .answer-item label::after
{
  background-color: rgb(45, 137, 204);
}


thead{
    background-color: rgb(182, 210, 228);
}

.ls-answers tbody .answertext {
  text-align: left;
  font-weight: bold;
}

.video-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  border-radius: 10px; /* Abgerundete Ecken mit einem Radius von 10 Pixeln */
}
.video-container-hoch{
        position: relative;
        width: calc(100vw * 2 / 3); /* 2/3 of the screen width */
        height: calc((100vw * 2 / 3) * 16 / 9); /* Height based on 9:16 aspect ratio */
        max-width: calc((100vh * 2 / 3) * 9 / 16);
        max-height: calc(100vh * 2 / 3);
        margin: 0 auto; /* Center horizontally */
        background-color: #000; /* Black background for aesthetics */
        overflow: hidden;
    }


.video-input {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}


.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

math{
    font-weight: bold;
}

#index-menu ul.dropdown-menu li {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
img {
    max-width: 100%;
    height: auto !important;
    
}
.numeric-item input[data-number='1'] {
    text-align: left;
}
/* Wird benötigt um die Hintergrundfarbe für die besuchten Kacheln festzulegen*/
.visited-or-answered {
        background-color: #e7ebf1; 
}
.thumb-up-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 1.2rem;
    padding: 30px;


}

  
  .flex-container {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 20px;
        border: none;
    }

    .flex-aligncenter, .flex-align-center {
        align-items: center;
    }

    .flex-aligntop, .flex-align-top {
        align-items: flex-start;
    }

    .flex-alignbottom, .flex-align-bottom {
        align-items: flex-end;
    }

    .flex-alignstretch, .flex-align-stretch {
        align-items: stretch;
    }

    .flex-just-center {
        justify-content: center;
    }

    .flex-just-start {
        justify-content: flex-start;
    }

    .flex-just-end {
        justify-content: flex-end;
    }

    .flex-static-r, .flex-static-l {
        width: max-content;
        height: min-content;
    }
    .flex-static-r {
        margin-left: 1em;
    }
    .flex-static-l {
        margin-right: 1em;
    }

    .flex-filler {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
        width: 100%;
        margin-bottom: 0.5em;
    }

    @media only screen and (min-width: 768px),
    print {

        .flex-filler {
            flex-basis: 0;
        }

    }


    .flexitem50mobile100,
    .flexitem50mobile100.imgcontainer {
        width: 100%;
        padding: 0 20px;
        margin: 10px 0;
    }

    /* Kein Abstand über-/unterhalb für erstes/letztes Element */

    .flexitem50mobile100:first-child,
    .flexitem50mobile100.imgcontainer:first-child {
        margin-top: 0;
    }

    .flexitem50mobile100:last-child,
    .flexitem50mobile100.imgcontainer:last-child {
        margin-bottom: 0;
    }

    @media only screen and (min-width: 768px),
    print {

        .flexitem50mobile100,
        .flexitem50mobile100.imgcontainer  {
            width: 50%;
            margin: 0;
        }
    
    }

    
    .flex-images {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .flex-images > img {
        width: 45%;
        min-width: 200px;
        max-width: 450px;
        height: auto;
        margin: 10px;
        flex-grow: 1;
    }
    .tile {
    padding: 6px 16px;
    max-width: 560px;
    margin: 0;
    border: none;
    background: none;
}


    .tile-xs-1, .tile-xs-2, .tile-xs-3, .tile-xs-4, .tile-xs-5, .tile-xs-6,
    .tile-sm-1, .tile-sm-2, .tile-sm-3, .tile-sm-4, .tile-sm-5, .tile-sm-6,
    .tile-md-1, .tile-md-2, .tile-md-3, .tile-md-4, .tile-md-5, .tile-md-6,
    .tile-lg-1, .tile-lg-2, .tile-lg-3, .tile-lg-4, .tile-lg-5, .tile-lg-6 {
        padding: 16px;
    }

    .tile-xs-1 {
        width: 100%;
    }
    .tile-xs-2 {
        width: -webkit-calc(100% / 2);
        width: -moz-calc(100% / 2);
        width: calc(100% / 2);
    }
    .tile-xs-3 {
        width: -webkit-calc(100% / 3);
        width: -moz-calc(100% / 3);
        width: calc(100% / 3);
    }
    .tile-xs-4 {
        width: -webkit-calc(100% / 4);
        width: -moz-calc(100% / 4);
        width: calc(100% / 4);
    }
    .tile-xs-5 {
        width: -webkit-calc(100% / 5);
        width: -moz-calc(100% / 5);
        width: calc(100% / 5);
    }
    .tile-xs-6 {
        width: -webkit-calc(100% / 6);
        width: -moz-calc(100% / 6);
        width: calc(100% / 6);
    }

    @media only screen and (min-width: 768px) {

        .tile-sm-1 {
            width: 100%;
        }
        .tile-sm-2 {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
        }
        .tile-sm-3 {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
        }
        .tile-sm-4 {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
        }
        .tile-sm-5 {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
        }
        .tile-sm-6 {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
        }

    }

    @media only screen and (min-width: 992px) {

        .tile-md-1 {
            width: 100%;
        }
        .tile-md-2 {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
        }
        .tile-md-3 {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
        }
        .tile-md-4 {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
        }
        .tile-md-5 {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
        }
        .tile-md-6 {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
        }

    }

    @media only screen and (min-width: 1200px) {

        .tile-lg-1 {
            width: 100%;
        }
        .tile-lg-2 {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
        }
        .tile-lg-3 {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
        }
        .tile-lg-4 {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
        }
        .tile-lg-5 {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
        }
        .tile-lg-6 {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
        }

    }

    

    .tiles-xs-1 > .tile {
        width: 100%;
        margin: 0 auto;
    }
    .tiles-xs-2 > .tile {
        width: -webkit-calc(100% / 2);
        width: -moz-calc(100% / 2);
        width: calc(100% / 2);
    }
    .tiles-xs-3 > .tile {
        width: -webkit-calc(100% / 3);
        width: -moz-calc(100% / 3);
        width: calc(100% / 3);
    }
    .tiles-xs-4 > .tile {
        width: -webkit-calc(100% / 4);
        width: -moz-calc(100% / 4);
        width: calc(100% / 4);
    }
    .tiles-xs-5 > .tile {
        width: -webkit-calc(100% / 5);
        width: -moz-calc(100% / 5);
        width: calc(100% / 5);
    }
    .tiles-xs-6 > .tile {
        width: -webkit-calc(100% / 6);
        width: -moz-calc(100% / 6);
        width: calc(100% / 6);
    }

    @media only screen and (min-width: 768px) {

        .tile {
            padding: 16px;
            border: none;
        }

        .tiles-sm-1 > .tile {
            width: 100%;
            margin: 0 auto;
        }
        .tiles-sm-2 > .tile {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
            margin: 0;
        }
        .tiles-sm-3 > .tile {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
            margin: 0;
        }
        .tiles-sm-4 > .tile {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
            margin: 0;
        }
        .tiles-sm-5 > .tile {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
            margin: 0;
        }
        .tiles-sm-6 > .tile {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
            margin: 0;
        }

    }

    @media only screen and (min-width: 992px) {
        
        .tile{
            border: none;
        }

        .tiles-md-1 > .tile {
            width: 100%;
            margin: 0 auto;
        }
        .tiles-md-2 > .tile {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
            margin: 0;
        }
        .tiles-md-3 > .tile {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
            margin: 0;
        }
        .tiles-md-4 > .tile {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
            margin: 0;
        }
        .tiles-md-5 > .tile {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
            margin: 0;
        }
        .tiles-md-6 > .tile {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
            margin: 0;
        }

    }

    @media only screen and (min-width: 1200px) {

        .tiles-lg-1 > .tile {
            width: 100%;
            margin: 0 auto;
        }
        .tiles-lg-2 > .tile {
            width: -webkit-calc(100% / 2);
            width: -moz-calc(100% / 2);
            width: calc(100% / 2);
            margin: 0;
        }
        .tiles-lg-3 > .tile {
            width: -webkit-calc(100% / 3);
            width: -moz-calc(100% / 3);
            width: calc(100% / 3);
            margin: 0;
        }
        .tiles-lg-4 > .tile {
            width: -webkit-calc(100% / 4);
            width: -moz-calc(100% / 4);
            width: calc(100% / 4);
            margin: 0;
        }
        .tiles-lg-5 > .tile {
            width: -webkit-calc(100% / 5);
            width: -moz-calc(100% / 5);
            width: calc(100% / 5);
            margin: 0;
        }
        .tiles-lg-6 > .tile {
            width: -webkit-calc(100% / 6);
            width: -moz-calc(100% / 6);
            width: calc(100% / 6);
            margin: 0;
        }

    }

    

    @media only screen and (min-width: 768px),
    print {
        .tile-done > .iconcard::after {
            font-size: 80px;
            height: 80px;
            width: 80px;
        }
    }

    /* Standard-Bild */

    .standardbild {
        width: 100%;
        height: auto;
        max-width: 600px;
    }

    /* Bild-Container */

    .imgcontainer {
        min-width: min-content;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }

    .imgcontainer > img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .childimgcenter > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .childimgcenter > figcaption {
        text-align: center;
    }

    .childimgrightmobilecenter > img,
    .childimgleftmobilecenter > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    @media only screen and (min-width: 768px),
    print {

        .childimgrightmobilecenter > img {
            margin-right: 0;
        }

        .childimgleftmobilecenter > img {
            margin-left: 0;
        }

    }

    .imgfloatblock,
    .img-float-block,
    .split-block {
        margin: 30px 10px;
    }
    .imgfloatblock::after,
    .img-float-block::after {
        content: '';
        display: block;
        clear: both;
    }

    .split-block {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }

    @media only screen and (min-width: 768px),
    print {
        .imgfloatblock,
        .img-float-block,
        .split-block {
            margin-left: 40px;
            margin-right: 40px;
        }
    }

    .img-floater,
    .split-img {
        float: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        -webkit-box-shadow: 0 2px 8px -2px #2256A0;
        -moz-box-shadow: 0 2px 8px -2px #2256A0;
        box-shadow: 0 2px 8px -2px #2256A0;
    }
    .img-floater.img-rounded,
    .img-floater.img-rounded-30,
    .split-img.img-rounded,
    .split-img.img-rounded-30 {
        overflow: visible;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .img-floater-circle,
    .split-img-circle {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
    }

    .split-img,
    .split-img-circle {
        align-self: flex-start;
    }

    @media only screen and (min-width: 450px) {
        .img-floater,
        .split-img {
            width: 400px;
        }
    }

    @media only screen and (min-width: 768px),
    print {
        .img-floater,
        .split-img {
            width: 40%;
            margin-left: 0;
            margin-right: 40px;
        }
        .split-img {
            margin-bottom: 0;
        }
        .img-floater {
            float: left;
            margin-bottom: 20px;
        }
    }

    .img-floater > img,
    .split-img > img {
        display: block;
        margin: 0 auto;
        height: 100%;
        width: auto;
    }
    .img-floater.img-rounded > img,
    .img-floater.img-rounded-30 > img,
    .split-img.img-rounded > img,
    .split-img.img-rounded-30 > img {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        -webkit-box-shadow: 0 2px 8px -2px #2256A0;
        -moz-box-shadow: 0 2px 8px -2px #2256A0;
        box-shadow: 0 2px 8px -2px #2256A0;
    }

    .split-text {
        flex-basis: 100%;
        flex-shrink: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    @media only screen and (min-width: 768px),
    print {

        .split-text {
            flex-basis: 0;
            flex-grow: 1;
        }

    }

    .split-text > .textb-xl,
    .split-text > .text-b-xl,
    .split-text > .bigbold,
    .split-text > .xlarge_bold,
    .split-text > .schrift-sehr-gross-fett {
        margin-bottom: 20px;
    }

    .split-text > p:last-child {
        margin-bottom: 0;
    }

    .img-rounded,
    .img-rounded-30 {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        overflow: hidden;
    }

    .iconcard {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        border: 1px solid #11807D;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        /*box-shadow: 0 2px 6px 0 #b3b3b3;*/
        -webkit-box-shadow: 2px 4px 6px -3px #2256A0;
        -moz-box-shadow: 2px 4px 6px -3px #2256A0;
        box-shadow: 2px 4px 6px -3px #2256A0;
        padding: 10px;
        height: 100%;
        font-weight:bold;
    }
    
    .icon-img-container,
    .icon-img-container-lg {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        text-align: center;
    }
    .icon-img-container {
        height: 90px;
       /* margin-bottom: 16px;*/
    }
    .icon-img-container-lg {
        height: 150px;
       /*  margin-bottom: 16px;*/
    }

    .iconcard > .icon-img-container {
        flex-basis: 90px;
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 15px;
    }

    .iconcard > .icon-img-container::after {
        display: none;
    }

    @media only screen and (min-width: 600px) {
        .icon-img-container {
            height: 108px;
         /*   margin-bottom: 16px; */
        }
        .icon-img-container-lg {
            height: 180px;
         /*    margin-bottom: 16px; */
        }
        .iconcard > .icon-img-container {
            height: 90px;
        }
    }

    @media only screen and (min-width: 768px) {
        .icon-img-container {
            height: 120px;
            margin-bottom: 0;
        }
        .icon-img-container-lg {
            height: 200px;
            margin-bottom: 0;
        }
        .iconcard {
            display: block;
            padding: 16px;
            border-width: 2px;
        }
        .iconcard > .icon-img-container {
            height: 120px;
            margin-bottom: 16px;
            margin-left: auto;
            margin-right: auto;
        }

        .iconcard > .icon-img-container::after {
            content: '';
            display: block;
            height: 0;
            width: 240px;
            max-width: 80%;
            border-top: 2px solid black;
            margin-left: auto;
            margin-right: auto;
            margin-top: 16px;
        }

    }

    .icon-img {
        width: auto;
        height: 100%;
        display: block;
        margin: 0 auto;
        max-width: unset;
    }

    .img-square > .icon-img {
        width: 90px;
        height: 90px;
        object-fit: cover;
    }
    .img-square-lg > .icon-img {
        width: 150px;
        height: 150px;
        object-fit: cover;
    }

    @media only screen and (min-width: 600px) {

        .img-square > .icon-img {
            width: 108px;
            height: 108px;
            object-fit: cover;
        }
        .img-square-lg > .icon-img {
            width: 180px;
            height: 180px;
            object-fit: cover;
        }
        .iconcard > .img-square > .icon-img {
            width: 90px;
            height: 90px;
        }

    }

    @media only screen and (min-width: 768px),
    print {

        .img-square > .icon-img {
            width: 120px;
            height: 120px;
            object-fit: cover;
        }
        .img-square-lg > .icon-img {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        .iconcard > .img-square > .icon-img {
            width: 120px;
            height: 120px;
        }

    }

    .icon-text {
        max-width: 560px;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .icon-text > .textcenter,
    .icon-text > .text-center,
    .icon-text > .text-zentriert {
        text-align: left;
    }

    @media only screen and (min-width: 768px),
    print {
        .icon-text {
            margin-left: auto;
            margin-right: auto;
        }
        .icon-text > .textcenter,
        .icon-text > .text-center,
        .icon-text > .text-zentriert {
            text-align: center;
        }
    }

    .iconblock {
        margin: 30px 10px;
    }

    .iconblock-text-lg, .iconblock-text {
        width: 100%;
    }

    @media only screen and (min-width: 768px),
    print {
        .iconblock {
            margin-left: 40px;
            margin-right: 40px;
        }
        .iconblock > .icon-img-container-lg {
            flex-basis: 250px;
            margin-right: 32px;
            min-width: max-content;
        }
        .iconblock > .icon-img-container {
            flex-basis: 200px;
            margin-right: 24px;
            min-width: max-content;
        }
        .iconblock > .iconblock-text-lg,
        .iconblock > .iconblock-text  {
            flex-basis: 0;
            flex-grow: 1;
            align-self: center;
        }
    }

    .iconblock + .iconblock,
    .iconblock + .imgfloatblock,
    .imgfloatblock + .iconblock,
    .imgfloatblock + .imgfloatblock {
        margin-top: 45px;
    }

/* Violet background for the navbar */
.bg-violet {
    background-color: violet !important;
}

/* Link button styling */
.link-button {
    background-color: blue;
    color: white !important;
    border: none;
    padding: 0 20px; /* Adjusted padding to ensure vertical centering */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    text-align: center;
    height: 48px; /* Set a fixed height for consistency */
}

.link-button:hover {
    background-color: darkblue;
    text-decoration: none;
    color: white !important;
}

.nav-item.dropdown .nav-link {
    background-color: blue;
    color: white !important;
    border: none;
    padding: 0 20px; /* Adjusted padding to ensure vertical centering */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    text-align: center;
    height: 48px; /* Set a fixed height for consistency */
}

.nav-item.dropdown .nav-link:hover {
    background-color: darkblue;
    color: white !important;
}

/* Keep default styles for dropdown menu items */
.dropdown-item {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

/* Center and right-align navbar items */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
}

.navbar-brand {
    margin-right: auto;
}

/* Prevent navbar items from stacking on smaller screens */
.navbar-nav .nav-item {
    white-space: nowrap;
    margin:5px;
}


.dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#survey-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {*/
/*    table.ls-answers tbody .control-label {*/
/*        text-align: left;*/
/*        background-color: #7f398e;*/
/*        color:white;*/
/*    }*/

/*}*/
/*.ls-heading.ls-header {*/
/*    background-color: #7F398E;*/
/*    color: white;*/
/*}*/