/*
 * This CSS customizes the Keycloak Account Theme.
 *
 * For general PatternFly classes and variables:
 * See PatternFly v5 Documentation: https://www.patternfly.org/developer-resources/global-css-variables/#about-css-variables
 *
 * For Keycloak Theme structure and .ftl files:
 * See Keycloak Theme Development Guide (official Keycloak docs).
 */

:root {
	/* Textfarb-Variablen auf Weiß setzen */
	--pf-v5-global--Color--100: white;
	--pf-v5-global--Color--200: white;
	--pf-v5-global--Color--300: white;
	--pf-v5-global--Color--dark-100: white;
	--pf-v5-global--Color--light-100: white;
	--pf-v5-global--text--Color--100: white;
	--pf-v5-global--text--Color--link: #1EFBD0;
	/*Hintergrund*/
	--pf-v5-global--BackgroundColor--dark-100: black;
	--pf-v5-global--BackgroundColor--dark-300: black;
	--pf-v5-global--BackgroundColor--100: black;
	--pf-v5-global--primary-color--100: #1EFBD0;
	--pf-v5-global--primary-color--200: #1EFBD0;
	--pf-v5-global--active-color--400: #1EFBD0;
	--pf-v5-global--primary-color--300: #1EFBD0;
	--pf-v5-global--link--Color--dark: #1EFBD0;
	--pf-v5-global--link--Color--light: #1EFBD0;
	--pf-v5-global--link--Color: #1EFBD0;
	--pf-v5-global--primary-color--dark-100: #1EFBD0;
	--pf-v5-global--active-color--100:  #1EFBD0;
	--pf-v5-global--link--Color--dark--hover: #1EFBD0;
	--pf-v5-global--link--Color--hover: #1EFBD0;
	--pf-v5-global--palette--black-1000: black;


}

body {
	font-family: 'Montserrat', sans-serif;
	color: white;
}


:where(.pf-v5-theme-dark):root {
	--pf-v5-c-page__sidebar--BackgroundColor: black;
	border: none;
}


/* Background-img */
/*________________________________*/
.pf-v5-c-page.pf-m-resize-observer.pf-m-breakpoint-2xl.pf-m-height-breakpoint-2xl{
	background:
			url('../img/Waves_Header.svg') no-repeat bottom,
			linear-gradient(10deg, #000 30%, #002b3f 55%);
	background-size: 170em;
}
.pf-v5-c-page__main{
	background:
			url('../img/Waves_Header.svg') no-repeat bottom,
			linear-gradient(10deg, #000 30%, #002b3f 55%);
	background-size: 170em;
}
/*________________________________*/
/*Navbar*/
/*________________________________*/
.pf-v5-c-menu__list{
	padding: 0;
}
.pf-v5-c-menu__content{
	background: black;
	color: white;
}
.pf-v5-c-menu__item:hover{
	background: black;
	color: #1EFBD0;
}
.pf-v5-c-masthead{
	display: flex;
}
.pf-v5-c-masthead.pf-m-display-inline {
	background-color: black;
}
.pf-v5-c-masthead__content{
	justify-content: flex-end;
	width: max-content;
	background: transparent;
	>.pf-v5-c-toolbar{

		width: max-content;
	}
}
.pf-v5-c-menu-toggle {
	background-color: black;
	border: 1px solid;
	border-color: #1EFBD0;
}
/*Login-Avatar*/
.pf-v5-c-toolbar__item .pf-v5-c-avatar {
	display: none;
}
.pf-v5-c-masthead__brand{
	width: max-content;
}

/*________________________________*/
/* SIDEBAR */
.pf-v5-c-page__sidebar {
	width: 14.25em;
	background-color: black;
	background-size: 170em;
	color: white;
}
.pf-v5-c-nav__link:hover{
	background: black;
}
.pf-v5-c-nav__link.pf-m-current{
	background: black;
}
.pf-v5-c-nav__link.pf-m-current:hover{
	background: black;
}
.pf-v5-c-nav__link:focus{
	background: transparent;
}

#pf-1753362669270xjhtwrtzx{
	background: black;
}
/*Main*/

.pf-v5-l-grid__item.pf-m-12-col-on-sm.pf-m-8-col-on-md {
	background-color: black;
	border: 1px solid #1EFBD0;
	border-top-right-radius: 32px;
	border-bottom-left-radius: 32px;
	max-width: 500px;
	padding: 0 25px 35px 25px;
}
.pf-v5-c-page__main-section._sticky_1cdve_5{
	background-color: black;
	margin-bottom: 10px;
}

.pf-v5-l-grid.pf-m-gutter {
	width: 1000px;
	justify-content: center;
	align-items: flex-start;
}

/*________________________________*/
/* Inputfelder */
/*________________________________*/
.pf-v5-c-menu-toggle.pf-m-full-width.pf-m-typeahead {
	background-color: transparent;
	--pf-v5-c-menu-toggle--after--BorderBottomColor: transparent; /* Entfernen der spezifischen Pseudo-Element-Border-Variablen */
}
.pf-v5-c-form-control {
	border-bottom: transparent; /* Entfernen der spezifischen Pseudo-Element-Border-Variablen */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
	background-color: black;
	border: 1px solid #1EFBD0;
	border-radius: .25em;
	color: white;
}


/*________________________________*/

/* Inputfelder */
/*________________________________*/
#cancel-btn {
	display: none;
}

.pf-v5-c-form.pf-m-horizontal{
	display: block;
}
.pf-v5-c-form__group.pf-m-action {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: var(--pf-v5-global--spacer--lg);
	margin-bottom: var(--pf-v5-global--spacer--lg);

}

#kc-form-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pf-v5-c-button.pf-m-primary {
	margin-left: 40px;
	color: black;
	width: 425px;
	height: 42px;
	border-top-left-radius: 0;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 0;
	background: #00C3A0;
}

.pf-v5-c-button.pf-m-primary:hover {
	color: #1EFBD0;
	background: black;
	border: 1px solid #1EFBD0;
}

.pf-v5-c-button.pf-m-secondary{
	color: black;
	background: #1EFBD0;
}
.pf-v5-c-button.pf-m-secondary:hover{
	color: #1EFBD0;
	background: black;
	border: 1px solid #1EFBD0;
}
.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg{
	margin: auto;
}
/* Labels over input-field */
.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pf-v5-global--spacer--xs); /* Kleiner Abstand zwischen Label und Input */
}

.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group .pf-v5-c-form__group-label {
	width: 100%;
	text-align: left;
}

.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group .pf-v5-c-form__group-control {
	width: 100%;
}


/*________________________________*/


.pf-v5-c-menu-toggle__text {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden;
}

/*Logo*/
._brand_1gmge_1 {
	height: 60px;
}


.pf-v5-c-page__main-section.pf-m-light {
	display: flex;
	gap: 45px;


	/* Main Singning in */
 >.pf-v5-c-page__main-section.pf-m-light.pf-v5-u-px-0 {
	 margin: 0 auto 100px auto;
	 display: block;
	 background-color: black;
	 border: 1px solid #1EFBD0;
	 border-top-right-radius: 32px;
	 border-bottom-left-radius: 32px;
	 max-width: 500px;
	 min-height: 600px;
	 height: max-content;
	 padding: 25px;

	 > h2 {
		 padding: 35px;
		 border-bottom: 1px solid #002b3f;
		 margin: 0 auto;
	 }

	 > div {
		 display: block;
		 padding: 35px;
	 }

	 > .pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg {
		 display: block;

		 > button {
			 border: 1px solid;
			 border-color: #1EFBD0;
		 }
	 }
 }
	>ul {

		> li {
			background-color: transparent;
			border: none;
			padding-bottom: 20px;
		}
	}
}
.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg {
	border: 1px solid #1EFBD0;
	margin-top: 5px;
	background-color: #1EFBD0;
	color: black;
}
.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg:hover {
	background-color: black;
	color: #1EFBD0;
}
.pf-v5-l-split.pf-m-gutter.pf-v5-u-mb-lg{
	display: block;
	width: 100%;
}

.pf-v5-c-data-list__item-row {
	width: 100%;
	background-color: black;
	border-top: 1px solid #1EFBD0;
	border-bottom: 1px solid #1EFBD0;
}

.pf-v5-c-page__header-tools .pf-v5-c-avatar {
	display: none;
}

.pf-v5-c-page__main-section.pf-m-light {
	background-color: transparent;
	max-width: 500px;
}
/*Applications*/
.pf-v5-c-data-list__expandable-content{
	background-color: rgba(0, 44, 63, 0.82);
}
.pf-v5-c-data-list__expandable-content.pf-v5-u-flex-grow-1{
	background-color: black;
}
@media only screen and (max-width: 768px) {
	.pf-v5-c-button.pf-m-primary {
		margin-left: 5px;
	}
	.pf-v5-l-grid.pf-m-gutter {
		width: auto;
		justify-content: center;
		align-items: flex-start;
	}
	.pf-v5-c-page__main-section.pf-m-light {
		display: block;
	}
}