:root{     
 font-size: 16px;
}

*, *:before, *:after{
 box-sizing: border-box
}

html, body{
 min-height: 100%
}

body{
 margin: 0; 
 padding: 0;
 background-color: #3179bb;
 background-image: linear-gradient( 145deg, #43b3f2 0%, #1e3e83 100% );
 background-repeat: no-repeat;
 background-size: 100% 100%;
 color: #252525;
}

body, input, select, textarea, button{
 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5
}

input, select, textarea, button{	
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

a, input, select, textarea, button{	
 outline: none
}

button{
 margin: 0;
 padding: 0;
 border: 0;
 background-color: transparent
}
button{
 #width:0px;
 overflow: visible
}
button::-moz-focus-inner{
 border: 0;
 padding: 0;
}

/* .btn */

button, a.btn{
 display: inline-block;	
 font-size: 1rem;
 background-color: #c0c0c0;
 color: #444;
 text-decoration: none;
 cursor: pointer
}
button.btn, a.btn{
 padding: 10px 20px;
 text-align: center
}

/* .btn styled */

button.btn, a.btn{
 background-color: #3b9ed7;
 color: #FFF;
 border-radius: 6px		
}

.login{
 display: flex;
 align-items: center;
 justify-content: center; 
 min-height: 90vh
}

.login__outer{
 background-color: #FFF; 
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);	
 display: inline-block
}

.login__inner{

}

.login-form-wrapper{
 min-width: 400px;
}

.login-heading-wrapper{
 font-size: 1.50rem;
 font-weight: 700;
 text-align: center;
 margin-bottom: 4px
}

.login-input-wrapper label{
 display: none;
}

.login-input-wrapper input{
 height: 46px;
 padding: 0 20px 0 0;
 text-indent: 20px;
 width: 100%;
 border: 1px solid #767676;
 border-radius: 6px;
 resize: none;
}

.login-reveil-password{
 display: block;
}

.login-subheading-wrapper{
 margin-bottom: 24px;
 text-align: center
}

.login-input-wrapper{
 margin-bottom: 14px
}

.login-button-wrapper{
 margin-bottom: 7px;
}

.login-footer-wrapper{
	
}

/**
 field framework
*/

.inp-group{
 position: relative	
}

/**
 message handling
*/

.login-message-wrapper{
 position: fixed;
 top: 50px;
 right: 0;
 background-color: #ffd4d2;
 padding: 30px 50px 30px 90px;
 font-size: 1rem;
 border-radius: 6px 0 0 6px;
 opacity: 0;
 transform: translate3d( 100%, 0, 0 );
 transition: ease transform 300ms 1ms, ease opacity 200ms 100ms;
}

html.loaded .login-message-wrapper:not( :empty ){
 opacity: 1;
 transform: translate3d( 0%, 0, 0 )
}

html.loaded .login-message-wrapper.retract{
 opacity: 0;
 transform: translate3d( 100%, 0, 0 );
}

.login-message-wrapper .login-message-wrapper__inner:before{
 position: absolute;
 top: 50%;
 left: 20px;
 display: block;
 content: "";
 font-size: 30px;
 font-weight: 700px;
 width: 50px;
 height: 50px;
 line-height: 49px;
 margin-top: -25px;
 text-align: center;
 background-color: transparent;
 border-radius: 50%
}

.login-message-wrapper .login-message-wrapper__inner.alert:before{
 content: "!";
 background-color: #FFBF00;
 color: #FFF
}

.login-message-wrapper .login-message-wrapper__inner.failed:before{
 content: "!";
 background-color: #eb5757;
 color: #FFF
}

.field-group.required-ingroup.flag label{
 color: #eb5757
}
.field-group.required-ingroup.flag input.required.flag{
 color: #eb5757;
 border-color: #eb5757
}

.login-form-area.shakey{
 animation: shakey 0.82s cubic-bezier(.36,.07,.19,.97) both;
 transform: translate3d(0, 0, 0);
 backface-visibility: hidden;
 perspective: 1000px
}

@keyframes shakey{
	
 10%, 90% {
  transform: translate3d(-1px, 0, 0)
 }
  
 20%, 80% {
  transform: translate3d(2px, 0, 0)
 }

 30%, 50%, 70% {
  transform: translate3d(-4px, 0, 0)
 }

 40%, 60% {
  transform: translate3d(4px, 0, 0)
 }
  
}


/**
 password reveiler
*/

.inp-group.reveil-password>input{
 padding-right: 70px;
  z-index: 2
}

.inp-group.reveil-password>a{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 display: block;
 width: 50px;
 height: 100%;
 text-align: center;
 background-color: transparent;
 border-left: none;
 border-top-right-radius: 6px;
 border-bottom-right-radius: 6px;
 text-decoration: none;
 z-index: 2
}

.inp-group.reveil-password>a.active{
 text-decoration: line-through
}

.inp-group.reveil-password>a:before{
 content: '';
 display: block;	
 width: 100%;
 height: 100%;
 background-image: url( '../images/icon-pw-hidden.png' );
 background-repeat: no-repeat;
 background-position: center
}
.inp-group.reveil-password>a.active:before{
 background-image: url( '../images/icon-pw-visible.png' );
}

.login-password-helper i{
 display: inline-block;
 width: 9px;
 height: 9px;
 border: solid #000 1px;
 border-radius: 50%;
 background-color: #FFF;
 vertical-align: middle
}

.login-password-helper i.active{
 background-color: green
}

/* Modifications - General */

.login-form-area a{
 color: #252525
}

.login-footer-wrapper{
 text-align: center
}

/* Modifications - Login Home */

.login-form-area.login-form-login .login-heading-wrapper span.default-label{
 display: none	
}
.login-form-area.login-form-login .login-heading-wrapper:before{
 content: 'Welcome back'
}
.login-form-area.login-form-login .login-button-wrapper.login-button-login button.btn{
 display: block;
 width: 100%;
 background-color: #9dd337
}
.login-form-area.login-form-login .login-button-wrapper.login-button-login button.btn:HOVER{
 background-color: #7ea92c
}
.login-form-area.login-form-login .login-button-wrapper.login-button-forgotten-password a.btn{
 display: block;
 width: 100%;
 background-color: transparent;
 color: #252525
}
.login-form-area.login-form-login .login-button-wrapper.login-button-forgotten-password a.btn:HOVER{
 color: #000;
 text-decoration: underline
}

/* Modifications - Forgotten Password */

.login-form-area.login-form-forgotten-password .login-heading-wrapper{
 font-size: 1.25rem	
}
.login-form-area.login-form-forgotten-password .login-button-wrapper.login-button-send button.btn{
 display: block;
 width: 100%;
 background-color: #9dd337
}
.login-form-area.login-form-forgotten-password .login-button-wrapper.login-button-send button.btn:HOVER{
 background-color: #7ea92c
}
.login-form-area.login-form-forgotten-password .login-button-wrapper.login-button-login a.btn{
 display: block;
 width: 100%;
 background-color: transparent;
 color: #252525
}
.login-form-area.login-form-forgotten-password .login-button-wrapper.login-button-login a.btn:HOVER{
 color: #000;
 text-decoration: underline
}

/* Modifications - Change Password */

.login-form-area.login-form-reset-password .login-heading-wrapper{
 font-size: 1.25rem	
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-change-password button.btn{
 display: block;
 width: 100%;
 background-color: #9dd337
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-change-password button.btn:HOVER{
 background-color: #7ea92c
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-login a.btn{
 display: block;
 width: 100%;
 background-color: transparent;
 color: #252525
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-login a.btn:HOVER{
 color: #000;
 text-decoration: underline
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-forgotten-password a.btn{
 display: block;
 width: 100%;
 background-color: #9dd337;
 color: #FFF
}
.login-form-area.login-form-reset-password .login-button-wrapper.login-button-forgotten-password a.btn:HOVER{
 background-color: #7ea92c
}