@import url('https://fonts.googleapis.com/css?family=Roboto:100,300');

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap');

body{
	padding: 0;
	margin: 0;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #333;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #333;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #333;
}
input:focus {
  background-color: transparent;
}
a{
	text-decoration: none;
	color: #505FAE;
}
.login-banner-message{
	background-color: #f4d558;
	text-align: center;
	padding: 10px;
}
.login-container{
	height: 560px;
  width: 840px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  position: absolute;
  border-radius: 15px;
	display: flex;
	flex-direction: row;
	-webkit-box-shadow: 0px 0px 20px 0px #999999; 
	box-shadow: 0px 0px 20px 0px #999999;
	background: #fff;
}
.login-container.sample-logon{
	height: 450px;
  block-size: 450px;
}
.branding{
	min-width: 250px;
}
.branding{
		padding: 10px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #86bae1;
    background-image: url(/resources/img/toronto-skyline-login.jpg);
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.branding.morning{
    background-image: url(/resources/img/login-graphic-colour-day.png),linear-gradient(#ffcd96,#fbedb6);
}
.branding.day{
    background-image: url(/resources/img/login-graphic-colour-day.png),linear-gradient(#fbedb6,#86bae1);
}
.branding.evening{
    background-image: url(/resources/img/login-graphic-colour-night.png),linear-gradient(#505FAE,#ff44b3);
}
.branding.night{
    background-image: url(/resources/img/login-graphic-colour-night.png), linear-gradient(#000,#640789);
}
.login-container .logo{
	text-align: left;
	padding: 15px;
}
.login-container .logo img{
	height: 50px;
}
.main-header{
	font-family: 'Lato',sans-serif;
	color: #000;
	font-size: 42px;
	font-weight: 300;
	margin:0;
}
.main-header span{
	color: #505FAE;
	display: block;
}
.authentication{
	padding: 25px;
  background-position: center;
  position: relative;
}
.authentication h1{
	font-family: 'Work Sans',sans-serif;
	color: #000;
	font-size: 32px;
	font-weight: 300;
	color: #505FAE;
}
.authentication span{
	display: block;
}
.user-info{
	margin:10px;
}
.tfa-inputs{
	display: none;
}
.login-fields > div{
	position: relative;
}
.login-fields input, .verify-fields input{
	margin: 10px auto;
	border:none;
	background: rgb(80,95,174,0.1);
	border-bottom: 2px solid transparent;
	border-radius: 5px;
	height: 45px;
	padding: 5px;
	font-size: 18px;
	outline: none;
	color: #333;
}
.tfa-code input{
	margin:0;
	width: 45px;
	text-align: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
	-moz-appearance: textfield;
}
.resend-code{
	display: none;
}
.password-field{
	display: flex;
	flex-direction: row;
}

.mm-navbar .main-header{
	padding: 0!important;
}


.login-message{
	font-family: 'Roboto',sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #BF1918;
    text-decoration: none;
    text-align: center;
}
.login-button{
	height: 50px;
	border-radius: 5px;
	width:150px;
	margin: 10px auto;
	background: #505FAE;
	color:#fff;
	border:none;
	border-bottom: 2px solid #505FAE;
	text-transform: uppercase;
	cursor: pointer;
	vertical-align: bottom;
	font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 18px;
}
input:hover,input:focus{
	border-bottom: 2px solid #86bae1;
}
.login-button:hover{
	background-color: #86bae1;
}
.help-message a{
	font-family: 'Work Sans',sans-serif;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	color: #505FAE;
}

.password-strength{
	display: none;
	width:80%;
	margin: 10px auto;
	border:1px solid #f7f7f7;
	border-radius: 5px;
	height: 25px;
	font-size: 18px;
	outline: none;
	color: #fff;
}
.status-bar{
	width:0;
	border:none;
	border-radius: 5px;
	height: 25px;
}
.resend-code{
	margin-top: 25px;
}
#showPassword{
	display: inline-block!important;
	position: absolute;
	right: 0;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #f4d558;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  color: #86bae1;
}
.loader:after {
  left: 3.5em;
  color: #505FAE;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


.password-requirements{
	background: rgba(255,255,255,0.95);
  border-radius: 15px;
  padding: 5px;
}
.password-requirements h3{
	font-family: 'Work Sans',sans-serif;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	color: #505FAE;
}
.password-requirements > div > div{
	font-family: 'Work Sans',sans-serif;
}
.password-requirements > div > div.completed{
	text-decoration: line-through;
	color: green;
}
@media screen and (max-width: 860px){
	.login-container{
	  width: 90vw;
	}
}
@media screen and (max-width: 739px){
	.authentication .min-width-325{
	  	width: 90%;
	}
}
@media screen and (max-width: 680px){
	.login-container .logo img{
		height: 40px;
	}
	.main-header{
		font-size: 50px;
		line-height: 50px;
	}
}
@media screen and (max-width:500px){
	body{
		padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
	}
	body.morning{
    background:#ffcd96;
	}
	body.day{
	    background:#fbedb6;
	}
	body.evening{
	    background:#505FAE;
	}
	body.night{
	    background:#000;
	}
	.login-container{
		height: 100vh;
	  width: 100vw;
	  left: unset;
	  top: unset;
	  transform: unset;
	  border-radius: 0;
	}
	.authentication{
		padding: 10px;
	}
	.resend-code{
		margin:5px;
	}
	.resend-code a{
		display: block;
	}
	.branding{
		flex:1;
		border-radius: 0;
	}
}
@media screen and (max-width: 400px){
	.tfa-code input{
		width: 35px;
		height: 35px;
	}
}
@media screen and (max-width: 360px){
	
}

@media screen and (max-width: 320px){
	.login-container .logo img{
		height: 30px;
	}
	.main-header{
		font-size: 30px;
		line-height: 30px;
	}
	.login-fields,
	.verify-fields{
		max-width: 300px;
		margin: 0 auto;
	}
	.tfa-code input{
		width: 30px;
		height: 30px;
	}
}

@media screen and (max-width: 280px){
	.branding,.authentication{
		padding: 20px;
	}
	.login-fields,
	.verify-fields{
		max-width: 260px;
		margin: 0 auto;
	}
	.tfa-code input{
		width: 20px;
		height: 20px;
	}
}