body {
	background-color: var(--color-login-bg);
}

.col-logo {
	padding-right: 90px;
}

.col-controls {
	border-left: 1px solid var(--color-login-separator);
	padding-left: 90px;
}

.title {
	color: var(--color-login-title-text);
}

.logo-img {
	margin-bottom: 20px;
}

.logo-wrapper {
	max-width: 188px;
    float: right;
}

.controls-wrapper {
	max-width: 285px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.controls-wrapper label {
	font-size: 12px;
	color: var(--color-login-text);
	text-transform: uppercase;
}

.controls-wrapper .form-control {
	margin: 16px 0px;
	padding-left: 40px !important;
}

.overlay-input .img {
    z-index: 1000;
    position: absolute;
    margin: 2px 8px;
    text-align: initial;
}

.overlay-input .img:after {
	font-style: normal;
	font-size: 22px;
	font-family: bootstrap-icons;
	color: var(--color-control-border);
    padding-right: 4px;
    border-right: 1px solid var(--color-login-separator);
}

.overlay-input .img.login:after {
	content: "\F4E1";
}

.overlay-input .img.password:after {
	content: "\F47B";
}

.wrapper {
	height: 100vh !important;
	align-items: center!important;
}

.logo-img path {
	fill: var(--color-login-logo);
}

@media(max-width: 767px) {
	
	.container {
		height: 100vh;
	}
	
	.col-logo {
		padding: 0;
		margin: 0;
	}
	
	.col-controls {
		border-left: none;
		padding: 0;
		margin-top: 50px;
		transition: all 0.3s ease;
	}
	
	.logo-wrapper {
		display: contents;
	}
	
	.controls-wrapper {
		align-items: center;
		display: contents;
	}
	
	.wrapper {
		display: block;
		padding: 24px;
		height: fit-content !important;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		max-width: 350px;
		transition: width 1s ease;
	}
	
	.controls-wrapper label {
		width: 100%;
		text-align: center;
	}
	
	.wrapper > * {
		padding: 0;
	}
	
	.logo-img {
		display: block;
		width: 100%;
	}
	
	.title {
		text-align: center;
	}
}

@media(max-height: 350px) {

	.col-logo {
		display: none;
	}
	
	.col-controls {
		margin-top: 0 !important;
	}
}