@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {font-family: 'Roboto', sans-serif;position: unset;}

:root {
    --primary: #c6b783;
    --heading: #00263c;
    --background: var(--heading);
	--field: #fff;
    --primary-hover: var(--heading);
	--btn-line-height: 42px;
}

body {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100vh;
	margin: 0;
	left: 0;
	right: 0;
	max-width: unset;
	/* background-size: 36%; */
	background: var(--background);
}


#mysyscontainer::after{
    content: '';
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: unset;
    height: 60vmin;
    width: 40vw;
    transform:unset;
    background: var(--background) url('/templates/mylogin/img/waib/waib-ib.svg') 50% 50% no-repeat;
    background-size: contain;
    transform: translate(-50vw, 0vmin);
    /* transform: translate(-63vw, -27vmin); */
}
#mysyscontainer {margin-left:auto;width:50%;background:white;}

.wrapper {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* background: var(--primary); */
	width: unset;
}

.footer {opacity:0.8;}
.login,
.footer,
.footer a {
	color: var(--heading);
}
a,a:hover {
	color: var(--primary);
}
a:hover {cursor:pointer;}

#login-form {background: unset;box-shadow: unset;}

.logo img {
	max-width: 50%;
	margin: 0;
}

#modlgn-username, #modlgn-passwdt, #modlgn-passwd, input {
	border-radius: 0;
	padding: 1em;
	background: var(--field);
}
.btn.send, #secretkey {padding: 1em;line-height:unset;} /* same as code input */
#secretkey {padding: 1em 1ex;}
input:focus {border-color:var(--primary);}
#form-login-remember  {}
#form-login-remember label {font-weight:normal;}

#form-login-remember {padding-top:8px;line-height:var(--btn-line-height);}
	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,
	input:-internal-autofill-previewed,
	input:-internal-autofill-selected,
	textarea:-internal-autofill-previewed,
	textarea:-internal-autofill-selected,
	select:-internal-autofill-previewed,
	select:-internal-autofill-selected
	{
		-webkit-box-shadow: 0 0 0px 1000px var(--field) inset;
		transition: background-color 5000s ease-in-out 0s;
	}

.btn:not(.help-mfa) {border-radius:0;/* padding:1em 3em; */padding: 8px 35px;line-height: var(--btn-line-height);box-shadow:none;border:0;letter-spacing: .187em;text-transform:uppercase;}
.btn-primary {
	background-color: var(--primary); color:white;opacity:1;;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: var(--primary-hover);
}


@media only screen and (max-width:1280px) {
	#mysyscontainer {width:100%;}
	#mysyscontainer:after {
		content: unset;
	}
}

@media only screen and (min-height: 641px) {
	.footer {
		width: unset;
	}
}

.alert {margin-bottom:0;}

#system-message-container {margin-top:1em;}

img[src*='visibility'] {padding: 22px 1em;}
@media only screen and (min-width:1440px) {
	img[src*='visibility'] {padding: 12px;}
}