@charset "UTF-8";

body{
 background-color: #FFF;
 color: #000
}

/*
 Frame
 */
 
.useraccess--{
 display: flex;
 justify-content: center; 
 padding-top: 40px;
 min-height: 440px
}
.useraccess__outer{
 margin-top: 0
}
.useraccess__inner{
 display: block
}
.useraccess-- .logo{
 display: none
}
.useraccess-panel+.useraccess-panel{
 margin-top: 20px
}
.useraccess-container{
 min-width: 360px
}
.useraccess-container.wide{
 width: 100%;
 max-width: 600px
}

/*
 Basics
 */

.useraccess-- .right-label{
 float: right; 
 text-decoration: none
}
.useraccess-- input[type="text"], 
.useraccess-- input[type="password"], 
.useraccess-- select,
.useraccess-- button.btn, 
.useraccess-- a.btn{
 width: 100%;
 border-radius: 4px
}
.useraccess-- input[type="text"].single-character{
 width: auto;
 text-align: center
}
.useraccess-- input[type="text"].single-character+input[type="text"].single-character{
 margin-left: 7px
}
.useraccess-- button.btn, 
.useraccess-- a.btn{
 color: inherit;
 text-align: center
}
.useraccess-- a.btn{
 text-decoration: none
}
.useraccess-- .form-field>.has-button{
 position: relative
}
.useraccess-- .form-field>.has-button.button-left input{
 padding-left: 60px	
}
.useraccess-- .form-field>.has-button.has-select.button-left input{
 padding-left: 140px	
}
.useraccess-- .form-field>.has-button.button-left input ~ span.label,
.useraccess-- .form-field>.has-button.button-left select ~ span.label{
 left: 61px
}
.useraccess-- .form-field>.has-button.has-select.button-left input ~ span.label,
.useraccess-- .form-field>.has-button.has-select.button-left select ~ span.label{
 left: 140px
}
.useraccess-- .form-field>.has-button.button-right input,
.useraccess-- .form-field>.has-button.button-right select{
 padding-right: 40px 
}
.useraccess-- .form-field>.has-button a[href].field-button,
.useraccess-- .form-field>.has-button span.field-button{
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 width: 40px;
 height: 100%;
 text-decoration: none;
 background-repeat: no-repeat;
 background-position: center
}
.useraccess-- .form-field>.has-button.has-select select.field-button{
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 width: 120px;
 height: 100%;
 border-radius: 4px 0 0 4px;
}
.useraccess-- .form-field>.has-button a[href].field-button.text-label,
.useraccess-- .form-field>.has-button span.field-button.text-label{
 text-align: center;
 width: 50px;
 border-right: solid #8f8f9d 1px;
 padding-top: 12px
}

.useraccess-- .form-field>.js-feedback{
 position: relative	
}
.useraccess-- .form-field>.js-feedback>span{
 position: absolute;
 left: 1px;
 bottom: 3px;
 display: inline-block;
 padding: 4px 10px;
 background-color: #990000;
 color: #fff;
 font-size: 0.75rem
}

/*
Experimental
.useraccess-- .form-field.placeholder-label>.has-button.button-left a[href].field-button.text-label,
.useraccess-- .form-field.placeholder-label>.has-button.button-left span.field-button.text-label{
 padding-top: 12px;
 transition: ease padding-top 100ms
}
.useraccess-- .form-field.placeholder-label>.has-button.button-left input.active ~ a[href].field-button.text-label,
.useraccess-- .form-field.placeholder-label>.has-button.button-left input.active ~ span.field-button.text-label{
 padding-top: 17px
}

*/

.useraccess-- .form-field>.has-button.button-left a[href].field-button,
.useraccess-- .form-field>.has-button.button-left span.field-button{
 left: 0
}
.useraccess-- .form-field>.has-button.button-right a[href].field-button,
.useraccess-- .form-field>.has-button.button-right span.field-button{
 right: 0
}

.useraccess-- .form-field>.has-button input[type="password"]+a[href].field-button{
 background-image: url( "../images/eye.png" );
}
.useraccess-- .form-field>.has-button input[type="text"]+a[href].field-button{
 background-image: url( "../images/eye-closed.png" );
}

.useraccess-- .advisor-box>p{
 margin-bottom: 7px
}
.useraccess-- .advisor-box .advisor-box-item i{
 display: inline-block;
 width: 9px;
 height: 9px;
 margin-right: 10px;
 border: solid transparent 1px;
 border-radius: 50%;
 background-color: transparent
}
.useraccess-- .useraccess-container.animate{
 transform: translate3d(0, 0, 0);
 backface-visibility: hidden;
 perspective: 1000px
}
.useraccess-- .useraccess-container.animate.success{
 animation: shake-vertical 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.useraccess-- .useraccess-container.animate.failed{
 animation: shake-horizontal 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-vertical{
	
 10%, 90% {
  transform: translate3d( 0, -2px, 0 )
 }
  
 20%, 80% {
  transform: translate3d( 0, 4px, 0 )
 }

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

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

@keyframes shake-horizontal{
	
 10%, 90% {
  transform: translate3d( -2px, 0, 0 )
 }
  
 20%, 80% {
  transform: translate3d( 4px, 0, 0 )
 }

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

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

@keyframes reveal-message{
	
 0%{
  opacity 0
 }
 100%{
  opacity: 1
 }
  
}

/*
 Suggested layout and styles
 */
 
.useraccess-- .useraccess-container .title{
 font-size: 1.5rem;
 text-align: center
}
.useraccess-- .useraccess-container .message{
 padding-top: 14px;
 padding-bottom: 14px;
 margin-bottom: 14px;
 border: solid 1px transparent;
 border-radius: 6px;
 background-color: transparent;
 text-align: center;
 opacity: 0;
 animation: reveal-message 500ms linear both;
}


.useraccess-- .useraccess-container.success .message{
 background-color: #ebf6d7;
 border-color: #aece73
}
.useraccess-- .useraccess-container.failed .message{
 background-color: #f8d4dc;
 border-color: #e4a6b4
}
.useraccess-- .useraccess-container .wrapper, 
.useraccess-- .useraccess-links .wrapper{
 padding: 20px;
 border: solid 1px #ebedef;
 border-radius: 6px
}
.useraccess-- .useraccess-container .wrapper{ 
 background-color: #f6f8fa	
}
.useraccess-- .useraccess-links .wrapper{ 
 background-color: #FFF	
}
.useraccess-- input[type="text"], 
.useraccess-- input[type="password"], 
.useraccess-- select,
.useraccess-- button.btn, 
.useraccess-- a.btn{
 border-radius: 4px
}
.useraccess-- button.btn:disabled, 
.useraccess-- a.btn:disabled{
 opacity: 0.25;
 pointer-events: none
}
.useraccess-- .useraccess-container .title+.message,
.useraccess-- .useraccess-container .title+.wrapper,
.useraccess-- .useraccess-container .message+.wrapper,
.useraccess-- .useraccess-container .fields>div+div{
 margin-top: 14px
}
.useraccess-- .useraccess-container  .fields>div.field-button{
 margin-top: 30px
}
.useraccess-- .useraccess-container .fields label:not( input[type="checkbox"]+label ):not( input[type="radio"]+label ){
 display: inline-block;
 padding-left: 7px;
 margin-bottom: 4px
}
.useraccess-- .useraccess-container .fields a[href].styled-banner{
 display: block;
 border: solid 0 transparent;
 color: inherit;
 text-decoration: none;
}
.useraccess-- .useraccess-container .fields a[href].styled-banner,
.useraccess-- .useraccess-container .fields input[type="checkbox"].styled-banner+label,
.useraccess-- .useraccess-container .fields input[type="radio"].styled-banner+label{
 padding: 10px 20px;
 border-width: 1px;
 border-color: #8f8f9d
}
.useraccess-- .useraccess-container .fields a[href].styled-banner+.styled-banner,
.useraccess-- .useraccess-container .fields label+input[type="checkbox"].styled-banner+label,
.useraccess-- .useraccess-container .fields label+input[type="radio"].styled-banner+label{
 margin-top: 20px
}
.useraccess-- .advisor-box .advisor-box-item i{
 border-color: #000;
 background-color: #FFF
}
.useraccess-- .advisor-box .advisor-box-item.active i{
 background-color: #339900
}

/*
 Remember 2fa widget
 */
 
.form-field.field-remember2fa>a{
 padding-left: 22px
}

/* 
 Messages, Flagging 
 */
 
.user-field.required.flag{
 border-color: #cc0000 !IMPORTANT
}
.user-field.required.warning.flag{
 border-color: #ffbf00 !IMPORTANT
}

/*
 Wys
 */
.wys p,
.wys ul{
 margin: 0
}

.wys p+p,
.wys ul+ul,
.wys ol+ol,
.wys p+ul,
.wys p+ol,
.wys ul+p,
.wys ul+ol,
.wys ol+ul,
.wys ol+p{
 margin-top: 14px
}