.login-content{position:absolute;overflow:hidden;top:0;height:100%;width:100%;background-color:#00a9b8}
.login-page-form{max-width:470px;margin:auto;}
.login-page-form .login-body{background-color:#fff;border-radius:10px;}
.login-body{padding:15px;position: relative;}
.login-page-logo{height:100px;text-align: center;margin:10px;}
.login-page-logo img{height:100%;}
.login-body h3{text-align:center;color:#113c45;font-weight:bold;}
.user-form .body,.user-form .foot{padding: 5px 20px;}
.user-form .input{padding:10px;border-radius: 5px;border: 1px solid #d1d1d1;outline: 0;box-shadow: 0 0 3px rgba(0,0,0,.3);background-color:#fff;}
.user-form .input::placeholder{color:#6b7f80;}
.user-form .body label{font-size:15px;color:#7d7d7d;}
.login .foot .btn{background-color: #3cefe4;color: #282828;font-family: Roboto-Bold,sans-serif;font-size:18px;}
.links{margin-top:20px;}
.links a{color:#7d7d7d;cursor:pointer;border-bottom:1px solid #7d7d7d;}
.links a:hover{color:#113c45;border-color:#113c45}
.errorMessage{background-color: red;color: #fff;border-radius: 5px;text-align: center;padding: 5px;margin-bottom: 5px;}
.requirements{margin-top:10px;color:#7d7d7d;}
.requirements .label{margin:5px 0;font-weight: 600;}
.requirements ul{margin:0 0 15px;}
.form-input .user-form .input{margin:0;}
.form-input{position: relative;}
.form-input.login-input{margin:4px auto;}
.form-input .eye-container{position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color:#113c45;}
.form-input .eye-container span.fa-eye,.form-input .eye-container.passwordShown span.fa-eye-slash{display: block;}
.form-input .eye-container span.fa-eye-slash,.form-input .eye-container.passwordShown span.fa-eye{display: none;}
.steps{margin:0 auto 10px;overflow:hidden;counter-reset: step;padding:0;width:260px;}
.steps li{list-style-type: none;color: #aaa;text-transform: uppercase;font-size: 10px;width: 50%;float: left;position: relative;text-align:center;font-weight:bold;}
.steps li:before {content: counter(step);counter-increment: step;color: #fff;background: #aaa;width: 35px;line-height: 35px;display: block;font-size: 14px;border-radius: 50%;margin: 0 auto 5px auto;position: relative;z-index:2;}
.steps li:after {content: '';width: 100%;height: 5px;background: #aaa;position: absolute;left: -50%;top: 15px;}
.steps li:first-child:after {content: '';width:50%;left:50%;background:#113c45;z-index:1}
.steps li.active:before,  .steps li.active:after{background: #113c45;color: #fff;font-weight:bold;}
.steps li.active{color:#113c45;}

.login-input .field-icon{position: absolute;background-color:#1d2030;color:#fff;top:0;height:100%;left:0;width:50px;border-top-left-radius:4px;border-bottom-left-radius:4px;font-size:16px;border:1px solid #528a96;}
.login-input .input{padding-left:55px;border:1px solid #528a96;}
.form-error-text{color: #CD5C5C;font-size:11px;height:17px;padding:2px 10px;}

.user-form .input.accept{border-color:#46A049;}
.user-form .input.error{border-color:#CD5C5C;}

.input-status{position: absolute;top:50%;transform:translateY(-50%);right:-20px;}
.input-status .fa-check{color:#46A049}
.input-status .fa-times{color:#CD5C5C}

.spinner{width:1rem;height:1rem;border-radius:50%;border:0.2em solid #fff;border-right-color: transparent;animation:0.75s linear infinite spin;margin-left:5px;position:absolute}
@keyframes spin {100% {transform: rotate(360deg)}}
.terms-text{font-size:12px;color:#6b7f80}
.terms-text a{color:#6b7f80;font-weight:bold;}

.visually-hidden {border: 0;padding: 0;margin: 0;position: absolute !important;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */}