body {
	margin: 0;
}

.login-split-screen {
	float: left;
	box-sizing: border-box;
}

.login-container {
	background-color: #FFF;
	/*white-space: nowrap;*/
	font-family: 'Montserrat', sans-serif;
}

.login-title{
	font-weight: 500;
	font-size: 30px;
}

.login-welcome-text {
	height: 110px;
}

.login-gazelle-logo {

	background: url(../img/Gazelle-logo-black.png) no-repeat;
	height: 133px;
}
.login-container .screen-img-area {
	background-size: cover;
	background: url("../img/Gazelle_login_bg.jpg") no-repeat left top;
	color: #fff;
	height: 100vh;
	max-width: 754px;
	width: calc(100vw - 600px);
}
.login-container .screen-img-area .login-text-container {
	padding-top: 35vh;
	text-align: center;
	color: #FFFFFF;
}
.login-container .screen-img-area .title {
	font-size: 50px;
	font-weight: 600;
	line-height: 49px;
	margin: 0 0 20px 0;

}

.login-container .screen-img-area .subtitle {
	margin: 0;
	font-size: 50px;
	line-height: 49px;
	font-weight: lighter;
}
.login-container .screen-img-area hr {
	width: 35%;
}
.login-container .screen-img-area .motto {
	font-size: 24px;
	line-height: 24px;
	font-weight: lighter;

}
.login-container .screen-login-area {
	height: 100vh;
	margin-left: calc(10vw);
	padding-top: calc(9vh);
}
.login-container .screen-login-area h4 {
	color: #33322F;
	font-size: 30px;
	font-weight: 600;
	line-height: 40px;
}
.login-container .screen-login-area p {
	color: #757575;
	font-size: 14px;
}
.login-container .screen-login-area label {
	margin-bottom:2px;
	color: #27353D;
	font-size: 14px;
	font-weight: 600;
}
.login-container .screen-login-area input {
	border:1px solid #c0c0c0;
	border-radius:4px;
	box-sizing:border-box;
	display: block;
	font-family: 'Montserrat', sans-serif;
	height: 40px;
	margin-top:4px;
	padding-left: 10px;
	width: 400px;
}

.login-container .screen-login-area input:focus{
	border:1px solid black;
	box-shadow: 0 0 6px 0 rgba(156,212,217,0.5);
}

.login-container .screen-login-area input.wrong{
	border: 1px solid red;
}
.login-container .screen-login-area .error-message {
	height: 36px;
	width: 214px;
	color: #D0021B;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	white-space:nowrap;
}


.login-container #login-user {
	margin-bottom: 20px;
}

.login-container #login-pass {
	margin-bottom: 12px;
}

.login-control-container {
	width: 400px;
}

.btn{
	--colorButton:rgb(39,53,61);
	--colorFontButton:#ffffff;
	--colorButtonHover:#476270;
	--colorFontButtonHover: #fff;
	--btnHeight:50px;
	--btnWidth:120px;

	background-color:var(--colorButton);
	border: 2px solid var(--colorButton);
	border-radius: 3px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	color: var(--colorFontButton);
	cursor:pointer;
	height:var(--btnHeight);
	text-align:center;
	width: 400px;
	font-size: 16px;
	box-sizing: border-box;
	padding-top: 12px;
}

.btn:hover{
	--colorButtonHover:#476270;
	--colorFontButtonHover: #fff;

	background-color:var(--colorButtonHover);
	color: var(--colorFontButtonHover);
	border: 2px solid var(--colorButtonHover);
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

@media (max-width: 1388px) {
	.login-container .screen-img-area .title {
		font-size: 40px;
		margin-bottom: 15px;
	}
	.login-container .screen-img-area .subtitle {
		font-size: 40px;
	}
	.login-container .screen-img-area .motto {
		font-size: 20px;
	}

}

@media (max-width: 1100px) {
	.login-container .screen-img-area .title {
		font-size: 35px;
		margin-bottom: 10px;
	}

	.login-container .screen-img-area .subtitle {
		font-size: 35px;
	}
	.login-container .screen-img-area .motto {
		font-size: 18px;
	}

}

/* action List CSS */

#login-lang {
	height: 25px;
	width: 113px;
	border: 1px solid #27353D;
	border-radius: 17px;
	float: right;
	box-shadow: 0 0 14px 0 rgba(0,0,0,0.1);
	padding: 4px 15px;
	line-height: 1.1;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	background: #FFF;
	font-size: 13px;
}


.login-container ~ .al_ls {
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;

}

.al_control{
	position:relative;
	overflow:hidden;
}


.al_arrow_down {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #555;
	height: 0;
	position:absolute;
	right:10px;
	top:calc(50% - 3px);
	width: 0;
}


.al_ls{
	box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
	box-sizing:border-box;
	background-color:white;
	position:absolute;
	z-index:1000;
}
.al_ls_btn{ /* bottone con lista*/
	box-shadow:0 0 8px rgba(0,0,0,.25);
	box-sizing:border-box;
	background-color:white;
	color:#555555;
	position:absolute;
	z-index:1000;
}
.al_ls > div > label > div:hover,
.al_ls_btn > div > label > div:hover{
	--colorBG:#e1f2f3;
	background-color: var(--colorBG);
	cursor:pointer;
}
.login-container ~ .al_ls > div > label:first-child > div:hover,
.login-container ~ .al_ls_btn > div > label:first-child > div:hover{
	border-radius:3px 3px 0 0;
}
.login-container ~ .al_ls > div > label:last-child > div:hover,
.login-container ~ .al_ls_btn > div > label:last-child > div:hover{
	border-radius:0 0 3px 3px;
}
.login-container ~ .al_ls > div > label > div,
.login-container ~ .al_ls_btn > div > label > div{
	padding: 8px 15px;
	font-size: 13px;
}

.al_cnt_lbl{
	max-height:400px;
	overflow-x: hidden;
	overflow-y: auto;
}

.al_arrow_down {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #555;
	height: 0;
	position:absolute;
	right:10px;
	top:calc(50% - 3px);
	width: 0;
}
.al_arrow_up {
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #c0c0c0;
	position:absolute;
	top:-7px;
}
.al_topbar_ac{
	border-bottom: 7px solid white;
}

.al_control{
	position:relative;
	overflow:hidden;
}
.al_nowrap > div > label{white-space:nowrap}
.al_ico{
	float:left;
	margin-right:7px;
}
.al_btn_arrow_down, .al_btn_arrow_up{
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	height: 0;
	position:absolute;
	right:5px;
	top:calc(50% - 3px);
	width: 0;
}
.al_btn_arrow_down{
	border-bottom: 0;
	border-top: 6px solid #ffffff;
}
.al_btn_arrow_up{
	border-bottom: 6px solid #ffffff!important;
	border-top: 0 !important;
}

.flag-it-IT {
	background: url(../img/flag-it.svg) no-repeat;
	width: 23px;
	height: 15px;
}

.flag-en-US {
	background: url(../img/flag-gb.svg) no-repeat;
	width: 23px;
	height: 15px;
}

.flag-idn-IDN {
	background: url(../img/flag-id.svg) no-repeat;
	width: 23px;
	height: 15px;
}

.img-alert {
	background: url('../img/alert.png') no-repeat;
	display: inline-block;
	float:left;
	height: 20px;
	width: 30px;
}

.error-message p.alter-text {
	color: red;
	padding: 0px 0;
	box-sizing: border-box;
}