body {
	/* background-color: #3e568a; */
	color: #fff;
	font-size: 20px;
	/* background-image: url('../img/login_bg.jpg'); */
	/* background-size: cover; */
	/* background-position: center; */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#354171+0,485685+100 */
	background: rgb(53,65,113); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(53,65,113,1) 0%, rgba(72,86,133,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(53,65,113,1) 0%,rgba(72,86,133,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(53,65,113,1) 0%,rgba(72,86,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#354171', endColorstr='#485685',GradientType=0 ); /* IE6-9 */
}
mobile-device {
    position: absolute;
    z-index: 0;
    display: none;
    opacity: 0;
}
outer-layer,  
inner-layer {
	width: 100%;
	height: 100%;
}
inner-layer * {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
general-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-size: 90%;
}
general-bg.narrow {
	display: none;
	background-size: 100%;
}
general-bg.wide {
    background-image: url('../img/Agency Office Group 2023 desktop XS.png');
}
page-center {
	--width: 50rem;
	--logo-height:
	calc(var(
	--width) * 0.18);
	--logo-margin: 7rem;
	--input-height: 2.3rem;
	--input-margin: 0.5rem;
	--my-button-height:
	calc(var(
	--input-height) * 2 + var(--input-margin));
	--button-crown: 0.8rem;
	display: block;
	float: none;
	width: var(--width);
	max-width: 100%;
	margin: 0 auto;
	margin-top: calc(50vh - 280px);
	/* margin-top: 20vh; */
	overflow: hidden;
}
site-logo {
	width: 100%;
	height: var(--logo-height);
	background-image: url(../img/eom_logo_XS.png);
}
page-center span {
	height: var(--my-button-height);
	line-height: var(--my-button-height);
	font-size: calc(var(--my-button-height) * 1.2);
	width: 44%;
	margin-top: var(--logo-margin);
	letter-spacing: -0.3rem;
	cursor: default;
}
login-container {
	width: 56%;
	margin-top: var(--logo-margin);
}
input-box {
	width: 100%;
	height: var(--input-height);
	line-height: var(--input-height);
	font-size: calc(var(--input-height) * 0.6);
	padding-right: calc(var(--my-button-height) * 0.5);
}
input-box input {
	background: #fff;
	color: #000;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    font-size: calc(var(--input-height) * 0.6);
	font-family: 'Quicksand', sans-serif;
}
input-box:first-child {
	margin-bottom: var(--input-margin);
}
my-button {
	position: absolute;
	left: auto;
	right: 0;
	height: var(--my-button-height);
	width: var(--my-button-height);
	/*background: #3e568a;
	border: var(--button-crown) solid #000;*/
	border: none;
	background: #000;
	border-radius: 50%;
}
my-button:hover {
	cursor: pointer;
}
my-button:hover my-label {
	/* --button-crown: 1rem; */
}
my-button a {
	border-radius: 50%;
}
#go_next my-label {
	--label-size: calc(var(--my-button-height) - var(--button-crown) * 2); 
	top: var(--button-crown);
	left: var(--button-crown);
	width: var(--label-size);
	height: var(--label-size);
	line-height: var(--label-size);
	font-size: calc((var(--my-button-height) - var(--button-crown) * 2) * 0.6);
	background: #3e568a;
	border-radius: 50%;
}
error-message-box {
	width: 100%;
	line-height: 1.5em;
	font-size: 1em;
	margin-top: 10px;
	color: #ffe000;
	opacity: 0;
	cursor: default;
	text-align: right;
}
.errors error-message-box {
	opacity: 1;
}

span.version {
	position: absolute;
	top: auto;
	bottom: 5vh;
	width: 100%;
	/* text-align: center; */
	padding-left: 2rem;
	font-size: 1.2rem;
	cursor: default;
}

sys-alert {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 3rem;
	z-index:100;
	cursor: default;
	backdrop-filter:blur(2px);
	background: #fff5;
}
sys-alert>div {
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	padding: 5rem 0;
	text-align: center;
	background: rgb(53,65,113);
	border: 2px #fff dashed;
	box-shadow: 0.1rem 0.5rem 0.5rem #0004;
}
sys-alert>div.out {
	opacity: 0;
}

sys-alert h1 {
	margin-bottom: 3rem;
}
sys-alert h1, 
sys-alert p {
	width: 100%;
}
sys-alert a, 
sys-alert u {
	float: none;
	color: inherit;
}
sys-alert u a {
	float: none;
	font-size: inherit;
	text-decoration: underline;
}

.waiting {
	position: fixed;
	z-index: 0;
	opacity: 0;
}
.loading .waiting {
	width: 100%;
	height: 100%;
	z-index: 1000;
	backdrop-filter: blur(2px);
	background: #0007;
	opacity: 1;
}
/*.waiting span {
	position: absolute;
	width: 8rem;
	height: 8rem;
	text-align: center;
	left: 50%;
	top: 50%;
	cursor: default;
	transform: translateX(-50%) translateY(-50%);
	background-image: url('../img/Caricamento EOM.gif');
	background-size: contain;
	background-repeat: no-repeat;
}
@keyframes spinning {
	0%{transform: translate(-50%,-50%) rotateZ(0deg);}
	100%{transform: translate(-50%,-50%) rotateZ(360deg);}
}*/

[id='spinning_wheel'] {
    --size: 12rem;
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--size);
    width: var(--size);
    transform: translate(-50%,-50%);
    z-index: 1010;
}
#spinning_wheel div {
    position: absolute;
    width: 100%;
    height: 100%;
}
#spinning_wheel div:first-child {
    border-radius: 50%;
    background: #8097C9;
    filter: blur(1.8rem);
}
#spinning_wheel div:last-child {
    background-image: url('../img/Caricamento EOM.gif');
    background-size: contain;
    background-repeat: no-repeat;
}


@media 
screen and (max-width: 720px), 
(max-width: 10cm){
	page-center {
		width: 80%;
	    --logo-margin: 10vmin;
	    --input-height: 8vmin;
	    --input-margin: 3vmin;
	    --button-crown: 3vmin;
		margin-top: 10vh;
	}
	site-logo {
		height: 25vw;
	}
	page-center span, 
	login-container {
		width: 100%;
	}
	page-center span {
		font-size: calc(var(--my-button-height) * 0.75);
		letter-spacing: 6vw;
	}
	login-container {
		margin-top: 10vmin;
	}
	span.version {
	    padding-left: 10%;
	    font-size: 5vmin;
	}
	general-bg.wide {
		display: none;
	}
	general-bg.narrow {
	    display: inline-block;
	    background-image: url("../img/Agency_Office_Group_2023_mobile_XS.png");
	}
}