/******************
    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
*/
/* 04.02.2022 Lucas Prein: Hintergrundfarbe hinter Stadt Bochum Logo auf weiß gesetzt */
.navbar {
    background:white;
}

/* 22.05.2025 Caroline Müller: Weiter Button in Bochum blau */
button.ls-move-next-btn {
    background-color: #0F2864 !important; 
    color: white !important; 
    border: none;
}

button.ls-move-next-btn:hover  {
    background-color: #0F2864 !important;
}

/* 30.06.2025 Caroline Müller: Absenden Button in Bochum blau */
button.ls-move-submit-btn  {
    background-color: #0F2864 !important; 
    color: white !important; 
    border: none;
}

button.ls-move-submit-btn:hover   {
    background-color: #0F2864 !important;
}

/* 22.05.2025 Caroline Müller: Info-text grau */
.ls-questionhelp {
    color: #cbd0cc !important; 
}

.text-info {
    color: #cbd0cc !important; 
}

/* 22.05.2025 Caroline Müller: Fortschrittsbalken in Bochum blau */
.progress-bar {    
    background-color: #0F2864 !important; 
}

/* 30.06.2025 Caroline Müller: Schriftfarbe der Umfragebeschreibung, Willkommensnachricht und Endnachricht ändern */
.survey-description, .survey-welcome, .completed-text {
    color: #0F2864 !important;
}



/* 22.05.2025 Caroline Müller: Abstand nach unten bei Tabellen vergrößern*/
.answer-container table.ls-answers {
    margin-bottom: 10px !important;
}

/* 12.10.2022 J. Tomaszewski: Logo auf dem Handy anzeigen */

.logo-container.hidden-xs {
    display: block !important;
}

@media screen and (min-width:992px){
#gridcontainer {
    display: grid;
    grid-template-areas: "area1 area2 area3 area4 area5 area6";
    background-color: #0094D8;
    color: #fff;
    }
}


@media screen and (max-width:991px){
#gridcontainer {
    display: grid;
    grid-template-areas: "area1 area2 area3"
                         "area4 area5 area6";
    background-color: #0094D8;
    color: #fff;
    }
}
@media screen and (max-width:587px){
#gridcontainer {
    display: grid;
    grid-template-areas: "area1 area2"
                         "area3 area4"
                         "area5 area6";
    background-color: #0094D8;
    color: #fff;
    }
}
.header {
    background-color: #0094D8;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}
.zelle {
    background-color: #fff;
    color: #000;
    padding: 10px;
    text-align: center;
    border: 1px solid #0094D8;
}

#item1 { grid-area: area1;}
#item2 { grid-area: area2;}
#item3 { grid-area: area3;}
#item4 { grid-area: area4;}
#item5 { grid-area: area5;}
#item6 { grid-area: area6;}



/*img{
    max-width: 100%;
    height: auto;
}
*/

/*@media only screen and (max-width: 641px) {
    .logo-container.hidden-xs {
        max-width: 60%;
        /*display: block !important;*/
    }
}
*/



/* 13.10.2022 D. Loose: im Slider marken setzen */

/*<style type="text/css">*/
 
	/* Slider Tick Marks */
 
	@media only screen and (min-width: 768px) {
 
		.with-inserted-ticks .slider-container {
			padding-right: 50px;
			padding-left: 50px;
		}
	}
 
	.with-inserted-ticks .slider-item {
		margin-bottom: 50px;
	}
 
	.with-inserted-ticks .slider-container .help-block {
		margin: 25px 0 0 -20px;
		width: 40px;
		text-align: center;
	}
 
	.with-inserted-ticks .slider-container .help-block.pull-right {
		margin: 25px -20px 0 0;
	}
 
	.inserted-tick {
		position: absolute;
		top: 50%;
		height: 10px;
		width: 2px;
		margin-top: -5px;
		margin-left: -1px;
		background-color: #DDDDDD; 
	}
 
	.inserted-tick.left-0,
	.inserted-tick.left-100 {
		background-color: transparent;
	}
 
	.inserted-tick .tick-text {
		position: absolute;
		top: 150%;
		width: 100px;
		margin-left: -50px;
		color: #000000;
		text-align: center; 
	}
 
	@media only screen and (max-width: 768px) {
 
		.inserted-tick.left-0 .tick-text {
			margin-left: 0px;
			text-align: left; 
		}
 
		.inserted-tick.left-100 .tick-text {
			margin-left: -100px;
			text-align: right; 
		}

	}

/*</style>*/