@charset "utf-8";

/* Variable declarations */ 
:root{

--font:'barlow_medium', sans-serif;	
--fontregular:'barlow_regular', sans-serif;	
--fontsemibold:'barlow_semibold', sans-serif;	
--fontbold:'barlow_bold', sans-serif;	
--text:rgba(13,36,50,0.70);
--headings:#1d1e1c;
	
--customcolor1:#1d1e1c;	
--customcolor2:#75fbd4;

--accentcolor1:#0669f9;
--accentcolor2:#04ffd2;
	
--grey:#ebeaed;
--lightgrey:#f6f6f7;
--transparentgrey:rgba(235,234,237,0.50);
	
--customgradient:linear-gradient(291.61deg, #003E72 -44.22%, #003E72 -4.04%, #0F85C5 42.22%, #04E2D2 86.81%);	
--customgradient2:linear-gradient(to left, #003e72 , #1081c5, #04ffd2);	
--customgradient3:linear-gradient(87.83deg, #003E72 -10.46%, #0F85C5 10.2%, #0BA8CA 34.54%, #07C6CE 53.53%);
			
	
}


/*Reset*/
html, body, div, span, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  abbr, address, cite, code,  del, dfn, em, img, ins, kbd, q, samp,  small, strong, sub, sup, var,  b, i,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary,  time, mark, audio, video {background:transparent;border:0;box-sizing:border-box;font-size:100%;vertical-align:baseline;outline:0;margin:0;padding:0;}
body {line-height:1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,  q:before, q:after {content:'';content:none;}
a {background:transparent;font-size:100%;vertical-align:baseline;cursor:pointer;margin:0;padding:0;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;font-style:italic;font-weight:bold;color:#000;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {height:1px;border:0;border-top:1px solid #d7d7d7;margin:1em 0;padding:0;display:block;}
input, select {vertical-align:middle;}

/********************************************************* Tipografia **********************************************************/


html{height:100%;width:100%;-webkit-text-size-adjust:100%;}
body{height:100%;width:100%;font-family:var(--font);font-size:15px;font-weight:normal;color:var(--text);}
/*Overflow-x hidden per le soluzioni*/
.solutions-template-default{overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:normal;}

h1{background:var(--accentcolor1);background:var(--customgradient3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-size:90px;font-family:var(--fontsemibold);letter-spacing:-2px;line-height:1.1em;margin-bottom:0;}
h2{font-size:36px;color:#ffffff;letter-spacing:-0.5px;line-height:1em;}



h3{font-family:var(--fontregular);font-size:30px;letter-spacing:-0.5px;line-height:1.34em;}
h4{font-size:25px;line-height:1.34em;}
h5{font-size:18px;line-height:1.7em;}
h6{font-size:18px;color:var(--text);line-height:1.7em;}
p{font-size:15px;line-height:1.7em;}
ul, ol{}
section ul, section ol{list-style-position:outside;margin-top:1em;margin-bottom:1em;margin-left:40px;}
section li{line-height:1.7em;margin-top:10px;margin-bottom:10px;padding-left:20px;}
dl{}
dt{}
dd{}
img{width:100%;}

a{color:var(--accentcolor1);}    
a:hover{color:var(--accentcolor2);}
em{}
i{}
strong, b{font-family:var(--fontbold);font-weight:normal;}
hr{}
pre{}


header{width:100vw;max-width:100%;background-color:var(--customcolor1);padding:12px 4%;display:flex;flex-wrap:wrap;align-items:center;}
	.LoginLogo{}
	.LoginLogo img{height:62px;display:block;}

.Section{height:calc(100% - 86px);width:100%;background-color:#ffffff;display:flex;flex-wrap:wrap;justify-content: space-between}
	.ContentSx{width:28%;padding:60px 4%;display:flex;flex-wrap:wrap;align-content:center;}
		
		.LoginLabel{transform:translateY(-36px);}
			.LoginLabel h1{font-size:4vw;}
			.LoginLabelText{margin-top:30px;}
			.LoginLabelText p{margin-top:24px;margin-bottom:30px;}
			.LoginLabelText p:last-of-type{margin-bottom:0;}
			.LoginLabelText a{font-family:var(--fontsemibold);text-decoration:none;transition-property:all;transition-duration:0.4s;}


	.ContentDx{width:72%;background-image: url("../../Images/Login/ContentDxBackground.svg");background-repeat:no-repeat;background-position:right 100% bottom 50%;background-size:120%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;position:absolute;top:0;bottom:0;right:0;}

		.LoginForm{width:35%;border-radius:15px;margin-left:14%;padding:30px 0;transform:translateY(-12px);}
			.LoginForm h2{width:100%;border-bottom:2px solid var(--transparentgrey);margin-bottom:24px;padding-bottom:24px;}
			.FormRow{margin-bottom:21px;display:flex;flex-wrap:wrap;}
			.FormRow.Password{position:relative;}
				label{color:#ffffff;margin-bottom:9px;display:block;}
				input[type="text"], input[type="password"]{height:40px;width:100%;border:2px solid #ffffff;background-color:#ffffff;box-sizing:border-box;border-radius:12px;font-family:var(--font);font-size:15px;padding:12px;transition-property:all;transition-duration:0.3s;}
				input[type="text"]{color:var(--headings);}
				input[type="password"]{color:var(--headings);}
					input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus {box-shadow:0 0 0 3px var(--accentcolor1);}
					input[type="text"]:focus, input[type="password"]:focus {background-color:#ffffff;border-color:#ffffff;outline:none;}

					/*Placeholder*/
					input::-webkit-input-placeholder{color:#b6bdc1;opacity:1;}/* Edge */
					input:-ms-input-placeholder{color:#b6bdc1;opacity:1;}/* Internet Explorer 10-11 */
					input::placeholder, textarea::placeholder{color:#b6bdc1;opacity:1;}
				
			.FormRow.InputButton{padding-top:24px;justify-content:center;}
				input[type="button"], input[type="submit"]{height:44px;min-width:192px;background-color:var(--customcolor1);border:2px solid var(--customcolor1);box-sizing:border-box;border-radius:15px;font-size:15px;font-family:var(--fontsemibold);font-weight:normal;color:#ffffff;padding:6px 12px;transition-property:all;transition-duration:0.4s;}
				input[type="button"]:hover, input[type="submit"]:hover{cursor:pointer;}

			.FormRow.InputButton.TwinButton{justify-content:space-between;}
				.FormRow.InputButton.TwinButton input[type="button"]:last-of-type, .FormRow.InputButton.TwinButton input[type="submit"]:last-of-type{min-width:96px;background-color:transparent;border-color:var(--transparentgrey);}

			.FormRow.InputButton.TwinLink{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;;}
				.FormRow.InputButton.TwinLink a{}

			.VisibleHiddenToggle{height:36px;width:36px;background-color:#ffffff;border-radius:13px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;position:absolute;right:12px;bottom:1px;}

			.VisibleHiddenToggle:before, .VisibleHiddenToggle::after{height:20px;width:20px;background-repeat:no-repeat;background-position:center center;background-size:20px;content:"";margin:auto;position:absolute;top:0;right:0;bottom:0;left:0;display:block;}

				.VisibleHiddenToggle:before {
					background-image: url('../../Images/Login/Eye.svg');
					opacity: 1;
				}
				.VisibleHiddenToggle:after {
					background-image: url('../../Images/Login/EyeClosed.svg');
					opacity: 0;
				}


			.ShowPassw +.VisibleHiddenToggle:before{opacity:0;}
			.ShowPassw +.VisibleHiddenToggle::after{opacity:1;}

			.VisibleHiddenToggle:hover{cursor:pointer;}
				.VisibleHiddenToggle img{width:20px;}

			.FormRow.PassForgot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;} 
			.FormRow.PassForgot a, .TwinLink a{font-size:14px;font-family:var(--fontsemibold);font-weight:normal;color:#ffffff;line-height:22px;text-decoration:none;transition-property:all;transition-duration:0.3s;} 
			.FormRow.PassForgot a:hover, .TwinLink a:hover{color:var(--accentcolor2);} 





/* Regole dispositivi >1080px */ 
@media all and (min-width: 1081px) {	
	
}
	
/* Regole dispositivi >1600px */ 
@media all and (min-width: 1400px) {

.LoginForm{padding:30px;}	
	
}


/* Regole orientamento verticale */
@media all and (max-width: 1080px) and (orientation: portrait) {
	
}


/* Eccezioni dispositivi mobili orizzontali piccoli */
@media all and (min-width: 381px) and (max-width: 1080px) and (orientation: landscape) {
	
}

/* Eccezioni dispositivi mobili verticali piccoli e orizzontali piccolissimi*/
@media all and (max-width: 1079px) and (orientation: portrait),all and (max-width: 380px){
	
}

/* Regole per dispositivi Retina | */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {



}