/* 	---------------------------------------------------------------------
	***** CSS-Datei für K+S *****
	---------------------------------------------------------------------

	dunkelblau:	#003a78
	gruen:		#00a13a
	hellblau:	#005ea1

	Standard-Farben: weiss: #FFFFFF | schwarz:#000000

	Die o.g. HEX-Farbwerte liefert der Endkudne bzw. seine Webseite.
	Diese Farbewerte werden nachfolgend den CSS-Variablen zugewiesen.
*/

:root{

	/* 1. Hauptfarbe für Seiten-/Text-/Box-Hintergrund und 
	für die Rahmen der Eingabefelder */

	--page_bg_color: 		#003a78;
	--input_border_color: 	#003a78;
	--header_border_color:	#003a78;

	/* 2. Button-Farben */

	--button-color: 		#00a13a;
	--button-color-hover: 	#003a78;

	/* 3. Text-Farben */

	--header_text_color:	#FFFFFF;
	--text-on-button-color:	#FFFFFF;

	/* 4. Optional: Werden auch Umfragen genutzt, so sollte sich 
		  die Umfragen-Box farblich von der Fragen-Box unterscheiden */

	--page_bg_color2: 		#005ea1;
}

/* 	---------------------------------------------------------------------
	Hintergrundbild auf Loginseite (siehe Anleitung Kapitel 2.6.2)
	Bildatei: background-image: url --> Hintergrundbild-Datei 
	Ausrichtung: background-position: horizontal: center left right
	                                  vertical: top center bottom
	---------------------------------------------------------------------
*/

.wrapper.auth .background-image {
	background-color: var(--page_bg_color) ! important;
	background-image: url('../img/kpluss-login-bg.jpg');
	background-position: center center;
	border-left: 1px solid var(--input_border_color);
}

/* Falls das Logo auf der Video-Seite nachjustiert werden muss */
.eventstream-logo img
{
	padding: 1px 0px! important;
	margin:  0px 20px! important;
	height: 80px;
	max-height: 80px; 
}

.form-control {
	border-color: var(--input_border_color) !important;
	border-radius: .2rem !important;
}

.btn-custom {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: var(--text-on-button-color) !important; 
}

.btn-custom:hover {
    background-color: var(--button-color-hover) !important;
    border-color: var(--button-color-hover) !important;
	color: var(--text-on-button-color) !important; 
}

.bg-header-custom {
	background-color: var(--page_bg_color) ! important;
}

.border-color-custom {
	border-color: var(--header_border_color) ! important;
}

.font-color-header-custom {
	color: var(--header_text_color) ! important;
}

.border-color-custom-chat {
	border-color: var(--header_border_color) !important;
}

.border-color-custom-survey {
	border-color: var(--page_bg_color2) !important;
}

.wct-header-container a.wct-header-survey {
	background-color: var(--page_bg_color2) !important;
}

.eventstream-topnavi,
.eventstream-topnavi a,
.eventstream-languages,
.eventstream-languages a {
	color: var(--header_text_color) ! important;
}

/* Falls Box-Hintergrund nicht passend für oranges Klingel-Icon */
.eventstream-container-survey-bell {
    /* color: #FFFFFF !important; */
}