:root
{
	--desktop-line-height: 1.8em;
	--mobile-line-height: 1.8em;
	--background-input-required: khaki;
	--label-min-width: 110px;
	--panel-max-width: 1100px;
}

body
{
	/* font-size: 1em; */
	/* supprime le 'highlighting' sur touche (écran tactile) */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body *
{
	/* font-size: inherit; */
	font-family: serif;
}

@media screen
{
	body
	{
		margin: 0px;
		width: 100vw;
		height: 100vh;
	}
	
	main > div, .content-body
	{
		max-height: -webkit-fill-available;
		overflow: auto;
	}
	
	main > div::-webkit-scrollbar, .content-body::-webkit-scrollbar
	{
		display: none;
	}
	
	/* Permet de retarder l'affichage de la page jusqu'à ce que le thème soit appliqué */
	body main > div
	{
		/* visibility: hidden; */
	}
	
	/* body.theme-default main > div */
	body main > div
	{
		visibility: visible;
		background: radial-gradient(circle, #4d4c4c 100px, #7b8387);
		color: white;
	}
	
	body.theme-diza main > div
	{
		visibility: visible;
		color: white;
		background:
		radial-gradient(black 15%, transparent 16%) 0 0,
		radial-gradient(black 15%, transparent 16%) 8px 8px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
		background-color:#282828;
		background-size:16px 16px;
	}
	
	body.theme-houllad main > div
	{
		visibility: visible;
		color: white;
		background-color:#5A5F63;
		background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
		radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
		background-size:80px 80px;
		background-position:0 0, 40px 40px;
	}
	
	body.theme-cross main > div
	{
		visibility: visible;
		color: white;
		background:
		radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
		radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
		linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
		linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
		background-color: slategray;
		background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
	}
	
	body.theme-stripes main > div
	{
		visibility: visible;
		color: white;
		background-color: #026873;
		background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
		linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
		linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
		background-size: 13px, 29px, 37px, 53px;
	}
	
	body.theme-waves main > div
	{
		visibility: visible;
		color: white;
		background:
		radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
		radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
		background-color: slategray;
		background-size:75px 100px;
	}
	
	.panel
	{
		background-color: rgba(0, 0, 0, 0.6);
		padding: 1%;
	}

	.panel fieldset
	{
		color: white;
		padding: 1%;
	}
	
	input[type="button"], button
	{
		background-color: greenyellow;
		padding: 8px !important;
		cursor: pointer;
		box-shadow: 1px 1px 2px 0px;
		border-radius: 5px;
	}
}

main
{
	overflow: auto;
	margin: auto;
	min-height: -webkit-fill-available;
	/* max-width: var(--panel-max-width); */
	
	display: flex;
	flex-direction: column;
  justify-content: center;
}

input:required, select:required
{
	background-color: var(--background-input-required);
}

label, .label
{
	text-align: center;
  line-height: var(--desktop-line-height);
	/* background-color: darkslategray; */
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	white-space: nowrap;
	min-width: var(--label-min-width);
}

.loader
{
	position: relative;
}

.loader::before
{
	--width: 16px;
	--height: 16px;
	
	content: "";
	position: absolute;
	box-sizing: border-box;
	left: calc(50% - var(--width) / 2);
	top: calc(50% - var(--height) / 2);
	
  border: 2px solid white;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: var(--width);
  height: var(--height);
  animation: spin 2s linear infinite;
}

@keyframes spin
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

input, select, button
{
	/* line-height: var(--desktop-line-height); */
	padding: 0px 1px;
	border: 0px;
	font-size: inherit;
}

input:not([type="button"]):disabled, select:disabled, textarea:disabled
{
	background-color: rgb(235, 235, 235);
	color: black;
}

@media print
{
	*
	{
		color: black !important;
	}
	
	body
	{
		font-size: 10.5pt;
	}
	
	.panel
	{
		padding: 0px;
	}
	
	.panel fieldset
	{
		border: 1px solid;
	}
	
	tr
	{
		page-break-inside: avoid;
	}
	/*
	body::after
	{
		font-size: small;
		font-family: serif;
		content: "Gérez vos boutiques/magasins efficacement et faîtes vos factures/devis sur https://gesma.ml";
		position: fixed;
		bottom: 0px;
		border-top: 1px solid;
		width: -webkit-fill-available;
	}
	*/
}

@media (prefers-color-scheme: dark)
{
	/*
  body, body main > div
	{
    background-color: black !important;
    color: white !important;
  }
	*/
}