/* React Technologie: Stylen nur durch überschreiben von vorhandenen CSS-Variablen */
/***********************************************************************************/
/* Die Account-Konsole ist eine moderne Single-Page-Applications (SPAs), die mit React und der PatternFly-Komponentenbibliothek erstellt wurden */
/* Account-Konsole basiert auf der PatternFly-Komponentenbibliothek, die ein umfassendes System von CSS-Variablen für das Theming verwendet*/
/* Infos unter: suretec-keycloak | Dokumentation | Keycloak_26_Theme-Entwicklung_Leitfaden_.docx  */
/***********************************************************************************/


/* Überschreibene von Variablen ****************************************************/

:root {
	--pf-v5-global--BackgroundColor--dark-100: #006AB3; /* Header */
	--pf-v5-global--primary-color--100: #006AB3; /* Hauptfarbe für Kontrastfarbe */
	--pf-v5-global--primary-color--200: #008cec;  /* Button hover light */
}

/* Detailliertes Komponenten-Styling ***********************************************/


/* Suretec-Header ***************************/
/********************************************/


img.keycloak__pageheader_brand { /* Keycloak-Logo */
	display: none;	
}

.pf-v5-c-masthead__brand {
	background-image: url('../img/suretec_logo_ohne_claim_weiss.svg');	/* Suretec-Logo */
	background-repeat: no-repeat;
	height: 35px;
	width: 150px;
}

/* Header Mobile-Tablet Portrait */
@media (max-width: 768px) {
	.pf-v5-c-masthead {
		display: inline-flex;
	}
	.pf-v5-c-masthead__brand {
		background-image: url('../img/suretec_logo_ohne_claim_weiss.svg');	
		background-repeat: no-repeat;
		height: 28px;
		width: 122px;
	}
	.pf-v5-c-masthead__content {
		width: calc(100% - 122px - 40px - 16px);
	}
}

/* Dark Modus - Header **********************/

.pf-v5-theme-dark {
	--pf-v5-global--palette--black-1000: #006AB3; /* Header */
}

.pf-v5-theme-dark .pf-v5-svg { /* Hamburger Menue */
	color: #f0f0f0;	
}
.pf-v5-theme-dark .pf-v5-svg:hover {
	color: #FFFFFF;	
}

.pf-v5-theme-dark header .pf-v5-c-menu-toggle {
	background-color: #006AB3; /* Header Toogle Button */
}


/* Menü-Leiste ******************************/
/********************************************/

.pf-v5-c-nav {
	--pf-v5-c-nav__link--Color: #5ebdff;/* Menü Schriftfarbe */
}
.pf-v5-c-nav__link {
	--pf-v5-c-nav__link--m-current--Color: #5ebdff;
}
.pf-v5-c-nav__link:hover {
	--pf-v5-c-nav__link--hover--Color: #5ebdff;
}

:root {
  --pf-v5-c-page__sidebar--BackgroundColor: #233348;  /* HG */
  --pf-v5-global--BackgroundColor--dark-200: #2d3d53; /* Menü hover */
  --pf-v5-global--BackgroundColor--dark-400: #2d3d53; /* Menü focus */
}

/* Dark Modus - Menüleiste ******************/

.pf-v5-theme-dark .pf-v5-c-nav__section-title {
	color: #FFFFFF;
}

.pf-v5-theme-dark .pf-v5-c-nav__link {
	--pf-v5-c-nav__link--m-current--BackgroundColor: #2d3d53;
}
.pf-v5-theme-dark .pf-v5-c-nav__link:hover {
	--pf-v5-c-nav__link--hover--BackgroundColor: #2d3d53;
}
.pf-v5-theme-dark .pf-v5-c-nav__section-title {
	--pf-v5-global--BackgroundColor--dark-200: #2d3d53;
}
.pf-v5-theme-dark .pf-v5-c-nav__link:focus{
	--pf-v5-c-nav__link--focus--BackgroundColor: #2d3d53;
}
.pf-v5-theme-dark .pf-v5-c-nav__link:active {
	--pf-v5-c-nav__link--active--BackgroundColor: #2d3d53;
}