/*	Copyright ZenuHit @ 2022.
	2022-11-16 @ 09:23. */

/*	-------------------------------------------------------------------------------------------------------------------------
//!	Zuppkast - sidor som är satta i någon status:
--	------------------------------- -------------------------------------------------------------------------------------- */


/*	--- -- -> Zasic.php.css */

:root
{	--F_1:						#295893;
	--F_2:						#a9bcd4;
	--F_3:						#c4cfdd;
	--F_V:						#ffffff;
	--F_S:						#000000;
	--F_G:						#176105;
	--F_O:						#FF9700;
	--F_R:						#d80a12;
	--F_B:						#eeeeee;}


/*	-------------------------------------------------------------------------------------------------------------------------
//!	Css grundläggande basics html:
--	------------------------------- -------------------------------------------------------------------------------------- */
	*, 
	*::before, 
	*::after
	{	box-sizing:					border-box;
		padding:					0;
		margin:						0;
		border:						0;}
	::selection
	{	background:					#c4cfdd;
		color:						#295893;}
	:focus, 
	Input:hover
	{	box-shadow:					0 0 4px #295893;
		outline:					none;}

	::moz-focus-inner
	{	border:						0;}


	Html, 
	Body
	{	min-height:					100vh;}
	Html
	{	height:						100vh;
		line-height:				1.5em;	/* 1.15em; */
		font-size: 					62.5%;	/* 10px; */
		font-family:				cursive;
		color:						purple;
		scroll-behavior:			smooth;}
		Div.Zody
		{	display:					none;}

	P
	{	line-height:				1.4em;}
		P + P
		{	margin-top:					2em;}
		P.Bold + P
		{	margin-top:					0.4em;}

	Ul, 
	Ol
	{	list-style-type:			none;
		padding:					0}
		Li
		{	margin:					0.2em 0;}
		Li A
		{	display:					block;
			width:						100%;
			height:						100%;
			padding:					0.2em;
			letter-spacing:				0.2em;}
		Nav > Ul,
		Nav > Ol
		{	font-size:					1.2em;
			line-height:				1.4em;}
	::Marker
	{	color:						#d80a12;}
		Li:hover::Marker
		{	color:						#176105;}


	H1, 
	H2, 
	H3, 
	H4, 
	H5, 
	H6
	{	font-family:				FuturaBold, Sans-Serif;
		line-height:				1.1em;
		max-width:					66ch;}
		H1 P
		{	font-weight:				normal;
			font-family:				Handwrite, "Comic Sans MS", Cursive, Sans-serif;
			font-size:					2rem;}
		P + H2
		{	margin-top:					2em;}

	Nav
	{	font-family:				FuturaBold, Sans-Serif;}

	Hr
	{	border:						2px solid var(--F_2);
		margin:						0.4rem 0;
		width:						100%;}

	A, 
	A:visited, 
	A:hover, 
	A:active,
	A:focus
	{	color:						inherit ;
		text-decoration:			none ;
		background-color:			transparent;
		border:						none;}
		A Img
		{	border:						none;}
	Nav A, 
	Nav A:visited
	{	color:						inherit ;}

	Img, 
	Object
	{	max-width:					100%;
		height:						auto;
		display:					block;}

	.Vanster
	{	text-align:					left;}
	.Hoger
	{	text-align:					right;}
	.Mitten
	{	text-align:					center;}
		.MittenMitt
		{	display:					flex;
			align-items:				center;
			justify-content:			center;}
	/* .MittenMitt
		{	display:					grid;
			place-items:				center;} */

	.Bold
	{	font-weight:				bold;}
	.Bolder
	{	font-weight:				bolder;}
	.Stor
	{	font-size:					large;}
	.Storre
	{	font-size:					larger;}
	.Zidden
	{	display:					none;}
	.Obs
	{	font-weight:				bold;
		font-style:					normal;
		color:						var(--F_O);}



/*	Tabeller */
	Table
	{	empty-cells:				show ;
		border-collapse:			collapse;
		border:						none;
		font-size:					1rem;
		width:						100% ;}
		Th, 
		Td
		{	text-align:					start;
			font-family:				MonoType, "Courier New", Courier, Monospace;
			font-size:					1.2rem;
			line-height:				1.6em;}
		Td + Td, 
		Th + Th, 
		Th + Td
		{	padding-left:				0.4em;}
		Div > Table
		{	overflow-x:					auto;}
		Caption
		{	caption-side:				bottom;
			text-align:					center;
			font-size:					inherit;
			font-family:				Handwrite, "Comic Sans MS", Cursive, Sans-serif;
			color:						inherit;}
		tHead td
		{	font-weight:				bold;}



/*	Malin: */
	#zSiten
	{	margin:						0 auto;
		max-width:					1100px;
		min-height:					50vh;
		color:						var(--F_1) ;
		position:					relative;
		z-index:					2;}

	#zHead
	{	min-height:					80px;
		padding:					20px;
		border:						2px solid var(--F_1);}
	#zBody > * + *
	{	margin:						4em 0 0 0;}
	#zTextB > * + *
	{	margin:						2em 0 0 0;}

	#Text
	{	font-family:				Pacifico;}
		#Text P
		{	font-size:					1.4rem;
			line-height:				1.6em;}
	#Kolumn
	{	font-family:				Futura, Sans-Serif;}


	#Zhange
	{	display:					none;}

	/* Zevelop */
	#zModal
	{	display:					none;
		position:					fixed;
		top:						0;
		left:						0;
		bottom:						0;
		right:						0;
		background-color:			rgba(238, 238, 238, 0.6);
		z-index:					99;
		font-family:				verdana, sans-serif;
		font-size:					1.2rem;}
	#zMedia
	{	visibility:					hidden;}


/*	Gdpr: */
	.Cookie
	{	background:					var(--F_1);
		border:						0.5em solid var(--F_V);
		color:						var(--F_V);
		position:					fixed;
		left:						0 ;
		right:						0 ;
		bottom:						-100%;
		margin:						0 auto;
		padding:					2em;
		width:						400px;
		font-size:					1.4rem;
		text-align:					center;
		z-index:					999;
		transition:					600ms;}
		.Cookie.Aktiv
		{	bottom:						100px;}
		.Cookie > Div
		{	padding-bottom:				2em;}
		.Cookie .Knapp
		{	font-size:					inherit;
			padding:					1em;}
		.Cookie .Knapp + .Knapp
		{	margin:						0 0 0 2em;}
		.Cookie .Knapp.Japp
		{	background:					var(--F_G);}
		.Cookie .Knapp.Nopp
		{	background:					var(--F_R);}



@media (prefers-color-scheme: dark)
{	Html
	{	background:					linear-gradient(
										60deg,
										var(--F_2),
										var(--F_1));
		color:						#000000;
		background-attachment:		fixed;} }


@media (prefers-reduced-motion: reduce)
{	*,
	*::before,
	*::after
	{	animation-duration:			0.01ms	!important;
		animation-iteration-count:	1		!important;
		transition-duration:		0.01ms	!important;
		scroll-behavior:			auto	!important;} }

/*	/Malin. */



@media only screen and (max-width: 440px)
{	#zSiten
	{	}
	#Zhange
	{	display:					block;
		border:						2px dashed var(--F_1);
		padding:					2em;
		color:						var(--F_1);
		text-align:					center;}
	.Cookie
	{	width:						90%;}
	.Cookie.Aktiv
	{	bottom:						20px;} }

/*	/Zasic.php.css */


/*	--- -- -> Zmodal.php.css */
/*	-------------------------------------------------------------------------------------------------------------------------
	Modal - Detta är samma på alla Malin-sidor!
--	------------------------------- -------------------------------------------------------------------------------------- */
	#zModal
	{	display:					none;
		position:					fixed;
		top:						0;
		left:						0;
		bottom:						0;
		right:						0;
		background-color:			rgba(
										238, 
										238, 
										238, 
										0.8);
		z-index:					99;}
		#zModal
		{	font-family:				verdana, sans-serif;
			color:						#295893;
			font-size:					1.2rem;}
	.Modal
	{	display:					flex;
		flex-direction:				column;
		position:					absolute;
		top:						50%;
		left:						50%;
		width:						80%;
		height:						80%;
		transform:					translate(-50%, -50%);
		padding:					2em;
		box-shadow:					0px 0px 50px 15px #c4cfdd;
		background-color:			#c4cfdd;
		overflow:					auto;
		line-height:				1.4em;
		font-weight:				normal;
		color:						#295893;}
		.Modal .Info
		{	font-style:					italic;}
		.Modal .Error
		{	color:						#d80a12;
			font-weight:				bold;}
		.Modal P + P
		{	margin-top:					1.4em;}
		.Modal Hr
		{	border:						2px solid #295893;
			margin:						0.4em 0 0.4em 0;
			padding:					0;}

		.Modal .Ztart
		{	font-size: 1.4em;
			font-weight: bold;}
		.Modal .Bold
		{	font-weight: bold;}

		.Modal .Body
		{	flex:						1;
			border-bottom:				2px solid #295893;}


		.Modal .Meny
		{	position:					sticky;
			top:						-1.8em;
			text-align:					center;
			font-size:					1.2em;
			color:						#295893;
			padding-bottom:				1em;
			border:						1px solid #c4cfdd;
			background-color:			#c4cfdd;}
			.Modal .Meny A
			{	display:					inline-block;
				color:						inherit;
				margin:						0 1em 0 0;
				padding:					0 0.6em 0.2em 0.6em;
				line-height:				2em;}
			.Modal .Meny A:last-child
			{	margin:						0;}
			.Modal .Meny A:hover
			{	background-color:			#295893;
				color:						#a9bcd4;}
			.Modal .Meny.Sub A
			{	margin:						0;
				padding:					0;
				background-color:			transparent;}
			.Modal .Meny.Sub A:hover
			{	border-bottom:				2px solid #295893;
				padding-bottom:				0;}


		.Modal .Head
		{	padding:					1.4em;
			margin:						0 0 1em 0;
			border:						4px solid #295893;
			background-color:			 #a9bcd4;
			font-size:					1.6em;
			font-weight:				bold;
			z-index:					2;}


		.Modal .Foot
		{	border:						4px solid red;
			padding:					1em;
			min-height: 2em;
			background-color: green;
			z-index:					2;}


		.Modal Table 
		{	border:						2px solid #295893;
			margin:						0 0 2em 0;
			color:						inherit;
			font-family:				monospace;}
			.Modal Table Tr
			{	line-height:				1.4em;}
			.Modal Table Tr:hover
			{	background-color:			#eeeeee;}


			.Modal Table Tr.Splitt Td
			{	border-right:				10px solid #295893;}
			.Modal Table Tr.Splitt > Td
			{	margin:						0;
				padding:					0 ;}


			.Modal Table Th:first-child, 
			.Modal Table Td:first-child
			{	padding:					0 0.4em;
				background-color:			#295893;
				color:						#a9bcd4;}
			.Modal Table Th:first-child
			{	text-align:					right;}
			.Modal Table Th:last-child, 
			.Modal Table Td:last-child
			{	padding-right:				0.4em;}
			.Modal Table Th, 
			.Modal Table Td
			{	padding-left:				1em;
				letter-spacing:				0;
				font-size:					1.2em;
				line-height:				2rem;}
			.Modal Table .Hoger
			{	text-align:					right;
				padding-right:				0.4em;}
			.Modal Table tHead
			{	border-bottom:				1px solid #a9bcd4;}
			.Modal Table tBody
			{	margin:						2em;
				border:						none;}
			.Modal Table Table
			{	border:						none;
				margin-bottom:				0.4em;}

		.Modal .PerHapsText
		{	color:						#FF9700;
			font-weight:				bold;}


@media only screen and (max-width: 800px)
{	.Modal
	{	width:						80%;
		height:						90%;} }



/*	Knappen */
	#zModalKnapp
	{	position:					fixed;
		right:						10px;
		bottom:						10px;
		width:						22px;
		height:						22px;
		font-family:				verdana, sans-serif;
		font-weight:				bold;
		font-size:					1.4rem;
		line-height:				1em;
		color:						#a9bcd4;
		padding:					3px;
		border:						1px solid #eeeeee;
		border-radius:				50%;
		cursor:						pointer;
		background-color:			#295893;
		animation:					Bakfarg 4s;
		z-index:					999;}
		@keyframes Bakfarg
		{	from					{	background-color:	#a9bcd4;}
			to						{	background-color:	#295893;} }
	#zModalKnapp.Error
	{	background-color:			#d80a12;
		animation:					BakfargError 4s 4s;
		animation-iteration-count:	4;}
		@keyframes BakfargError
		{	from					{	background-color:	#c4cfdd;
										color:				#d80a12;}
			to						{	background-color:	#d80a12;
										color:				#c4cfdd;} }
	#zModal Span.Stang
	{	position:					fixed;
		top:						0;
		right:						-24px;
		width:						24px;
		height:						2em;
		font-size:					1.8rem;
		color:						#295893;
		line-height:				2em;
		text-align:					center;
		border-top-right-radius:	8px;
		background-color:			#c4cfdd;
		cursor:						pointer;}


	.Shide
	{	}
		.Shide .Hide
		{	display:					none;}
		.Shide .Show
		{	display:					block !important;}
	.Clicked
	{	border-bottom:				2px solid #a9bcd4;}

/*	/Zmodal.php.css */


	Body
	{	background:					#a9bcd4 ;
		display:					flex;
		align-items:				center;
		justify-content:			center;}
	#zSiten
	{	min-height:					25vh;
		border:						none;
		font-family:				FuturaBold, Sans-Serif;
		text-align:					center;
		font-size:					2.2rem;
		color:						#295893;}
	#Rubrik
	{	margin:						0 0 0.4em 0;}
	#Text
	{	font-size:					0.8em;}

	#Fot
	{	position: absolute;
		bottom: 0;
	}