.login {
    width: 100%;
    height: 100%;
    position: fixed;
}

.login .left-panel {
    background-color: white;
    width: 38.196%;
    display: inline-block;
    height: 100%;
}

.login .left-panel .left-panel-container {
	height: calc( 100% - 40px);
	min-height: 500px;
}

.login .right-panel {
    width: 61.804%;
    background-color: var(--primary-teal);
    display: inline-block;
    height: 100%;
    float: right;
}

@media (max-width: 991px) {
	.login .left-panel {
		width: 100%;
	}
	
	.login .right-panel {
		width: 0%;
		display: none;
	}
}


.login .left-panel .wordmark {
	top:20px;
	left: 20px;
	position: relative;
}

.login .queal-logo {
	position: relative;
    top: 10%;
}

.login .queal-logo img {
	max-height: 250px;
    max-height: 25vh;
}
@media (max-width: 991px) {
	.login .queal-logo {
	    top: 5%;
	}
	.login .queal-logo img {
		max-height: 100px;
		max-height: 12vh;
	}
}

.login .left-panel .login-container,
.login .left-panel .lost-container {
	display: none;
	width: 100%;
	max-width: 500px;
    position: relative;
    margin: 0 auto;
    padding: 0 15px;
    top: 15%;
    text-align: center;
}
@media (max-width: 991px) {
	.login .left-panel .login-container,
	.login .left-panel .lost-container {
		top: 8%;
	}
}

.login .left-panel .login-container.active,
.login .left-panel .lost-container.active {
	display: block;
}

.login .left-panel .login-container .login-heading,
.login .left-panel .lost-container .login-heading {
	padding-bottom: 20px;
}

.login-form .has-float-label,
.lost-form .has-float-label {
	width: 100%;
    padding-bottom: 20px;
}

.login-form .pass-forgot {
	float: right;
	font-size: 75%;
	cursor: pointer;
}

.btn-login:hover {
    color: var(--white);
    background-color: var(--middle-teal);
    border-color: var(--middle-teal);
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--white) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.login .lost-container .fa-back {
	position: relative;
    float: left;
    left: 0px;
    top: 10px;
    color: var(--primary-teal);
	font-size: 1.3em;
	cursor: pointer;
}

.login .left-panel .new-here {
	position: relative;
    left: 20px;
}

.login .right-panel .frame {
	height: 100%;
    width: 100%;
    position: relative;
}

.login .right-panel .frame img {
	max-height: 50%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}