/******************************************** Napis na powitanie *************************************/
#witamy {
	text-align: center;
	color: #222;
	letter-spacing: 0.1rem;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	
}

/********************************************* Formularz rejestracyjny *****************************************************/
.form_rejestr {
	max-width: 48rem;
}

.form_rejestr .szeroki_header {
	margin: 0.25rem 0 0.75rem;
}

.form_rejestr .panel_szczegoly p {
	margin: 0 0 0.75rem;
}

.form_rejestr .panel_szczegoly.waski {
	margin: auto;
	max-width: 28rem;
}

.form_rejestr #form_daneniezgodne.panel_szczegoly {
	padding: 0.1rem 1rem;
	color: black;
}

.form_rejestr .panel_szczegoly .red-info {
	color: red;
	margin: 1rem 0;
	font-weight: bold;
	border: 1px solid red;
	padding: 0 0.5rem;
	background-color: #ffffff99;
}

.form_rejestr .panel_szczegoly .red-info p {
	margin: 0.5rem 0;
}

/******************************************** Zgoda na przetwarzanie **************************************************/
.regulamin #pokaz {
	color: var(--secondcolor);
	cursor: pointer;
}

.regulamin #pokaz:hover {
	text-decoration: underline;
}

/*******************************************************************************************************************/
/********************************************* Urządzenia *****************************************************/
#urzadzeniaedycja #lista {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#urzadzeniaedycja .urzadzenie {
	display: flex;
	gap: 0.5rem;
}

#kontopanel_content .urzadzenie span {
	flex-grow: 1;
	border: 1px solid gray;
	border-radius: 0.25rem;
	padding: 0.35rem 0.5rem;
}

#urzadzeniaedycja .urzadzenie.aktywne span {
	background-color: #47a9d72f;
}

#kontopanel_content .urzadzenie button {
	width: 5rem;
	font-size: 1rem;
	float: right;
	margin: 0;
}

/*******************************************************************************************************************/
/********************************************* Wybór rodzaju konta *****************************************************/
.strona-wybor h1#wybierz {
	font-size: 2rem;
	text-transform: uppercase;
	text-align: center;
	margin: 1rem 0;
	color: #222;
}

.strona-wybor > .flex_row {
	gap: 0.5rem;
	justify-content: center;
}

#user.konto-wybor {
	--obrazek: url('/images/account/User.jpg');
}

#lifeguard.konto-wybor {
	--obrazek: url('/images/account/Lifeguard.jpg');
}

.konto-wybor {
	width: 50%;
	height: 40rem;

	background-image:
	linear-gradient(
		rgba(255, 255, 255, 1), 
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 1)
	  ),
	var(--obrazek);

	background-position: 75% center;
	background-size: cover;
	background-repeat: no-repeat;

	display: flex;
	flex-direction: column;
	border: 1px solid white;
}

.konto-wybor:hover {
	background-image:
	linear-gradient(
		rgba(255, 255, 255, 0.9), 
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.9)
	  ),
	var(--obrazek);
	border-color: black;
	cursor: pointer;
}

.konto-wybor .opis {
	padding: 1rem 2rem;
	margin-top: auto;
	display: flex;
	font-size: 1.25rem;
	filter: drop-shadow(0px 0px 15px white);
}

.konto-wybor h1 {
	font-size: 2.5rem;
	text-transform: uppercase;
	filter: drop-shadow(0px 0px 15px white);
	text-align: center;
	transition: 0.25s;
}

.konto-wybor:hover h1 {
	font-size: 2.75rem;
	color: black;
}

.tlo_obrazek_prawy.User {
	--obrazek: url('/images/account/User.jpg')
}

.tlo_obrazek_prawy.Lifeguard {
	--obrazek: url('/images/account/Lifeguard.jpg')
}

@media screen and (max-width: 900px) {
	#kontonowewybor > .flex_row {
		flex-direction: column;
	}

	.konto-wybor {
		width: 100%;
		height: 40vh;
		min-height: 22rem;
		border-color: black;
	}

	.konto-wybor h1, .konto-wybor:hover h1 {
		font-size: 2rem;

	}

	.konto-wybor .opis {
		padding: 1rem;
	}	
}