@charset "UTF-8";

html,
body{
 height: 100%
}

body{
 background-color: #5a59a6;
 background: linear-gradient( 135deg, #913EE7 0%, #5F3DC1 100% );
 color: #424b5a
}

body, input, select, textarea, button{
 font-family: Ubuntu, -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"
}


/*
 Frame
 */
 
.useraccess--{
 display: flex;
 justify-content: center;
 align-items: center;
 padding-top: 10px;
 padding-bottom: 10px;
 height: 100%;
 max-height: 1000px
}
.useraccess__outer{
 background-color: #fff;
 border-radius: 16px;
 box-shadow: 6px 6px 12px -6px #00000080
}
.useraccess-- .logo{
 width: 300px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
 background-image: url( "../images/phonic-planets-alt.svg" );
 background-position: center;
 background-repeat: no-repeat
}

.useraccess-panel+.useraccess-panel{
 margin-top: 20px
}
.useraccess-container{
 margin-top: 20px
}

/*
 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%;
 padding-top: 10px;
 padding-bottom: 10px;
 border-radius: 8px
}
.useraccess-- .placeholder-label input[type="text"], 
.useraccess-- .placeholder-label input[type="password"]{
 padding-top: 20px;
 padding-bottom: 4px
}
.useraccess-- .placeholder-label input.active~span.label{
 top: 1em
}
.useraccess-- input[type="text"], 
.useraccess-- input[type="password"]{
 border-color: #b3bcce	
}
.useraccess-- button.btn, 
.useraccess-- a.btn{
 border-color: #61d3ce;
 background-color: #61d3ce;
 color: #313640;
 text-transform: uppercase
}
.useraccess-- button.btn:disabled{
 border-color: #ebebeb;
 background-color: #ebebeb;
 color: #c0c0c0;
 cursor: not-allowed
} 
.useraccess-- .form-field>.has-button{
 position: relative
}
.useraccess-- .form-field>.has-button input,
.useraccess-- .form-field>.has-button select{
 border-radius: 8px;
 padding-right: 40px
}
.useraccess-- .form-field>.has-button a[href].field-button{
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 width: 40px;
 height: 100%;
 border: solid #d9dadc 1px;
 text-decoration: none;
 background-repeat: no-repeat;
 background-position: center
}
.useraccess-- .form-field>.has-button input+a[href].field-button{
 border: none
}
.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-- .password-adviser>p{
 margin-bottom: 7px
}
.useraccess-- .password-adviser .password-adviser-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;
}

/*
 Suggested layout and styles
 */
 
.useraccess--{
 padding-left: 15px;
 padding-right: 15px
}
.useraccess-- .useraccess__outer{
 width: 100%;
 max-width: 500px;
 background-color: #fff;
 padding: 32px 20px;
 border-radius: 16px
}
.useraccess-- .useraccess-panel .wrapper{
 padding: 0 50px
}
.useraccess-- .useraccess-panel .wrapper .wrapper__outer{
 width: 100%
}
.useraccess-- .useraccess-container-separator{
 padding: 0 90px;
 text-align: center
}
.useraccess-- .useraccess-container-separator p{
 position: relative
}
.useraccess-- .useraccess-container-separator p:before{
 content: '';
 position: absolute;
 top: 50%;
 left: 0;
 display: block;
 width: 100%;
 border-bottom: solid 1px #424b5a
}
.useraccess-- .useraccess-container-separator p b{
 position: relative;
 display: inline-block;
 padding: 0 20px;
 background-color: #fff;
 z-index: 1
}
.useraccess-- .useraccess-container .title{
 font-size: 1.2rem;
 text-align: center
}
.useraccess-- .useraccess-container .subtitle{
 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
}
.useraccess-- .useraccess-container.success .message{
 background-color: #ebf6d7;
 border-color: #aece73
}
.useraccess-- .useraccess-container.failed .message{
 background-color: #f8d4dc;
 border-color: #e4a6b4
}
.useraccess-- input[type="text"], 
.useraccess-- input[type="password"], 
.useraccess-- select,
.useraccess-- button.btn, 
.useraccess-- a.btn{
 border-radius: 8px
}
.useraccess-- button.btn, 
.useraccess-- a.btn{
 font-weight: 700;
 border-radius: 8px
}
.useraccess-- .useraccess-container .title+.message,
.useraccess-- .useraccess-container .title+.wrapper,
.useraccess-- .useraccess-container .subtitle+.message,
.useraccess-- .useraccess-container .subtitle+.wrapper,
.useraccess-- .useraccess-container .message+.wrapper,
.useraccess-- .useraccess-container .fields>div+div{
 margin-top: 14px
}
.useraccess-- .useraccess-container .fields label{
 display: inline-block;
 padding: 0 0 7px 1px;
 font-weight: 700
}
.useraccess-- .advisor-box .advisor-box-item i{
 border-color: #000;
 background-color: #FFF
}
.useraccess-- .advisor-box .advisor-box-item.active i{
 background-color: #339900
}
.useraccess-- .useraccess-links{
 text-align: center	
}
.useraccess-- .useraccess-links ul a{
 color: #313640;
 text-decoration: underline;
 text-transform: uppercase
}

/*
 Loading Transition
 */
 
.useraccess__inner.loading{
 position: relative
}
.useraccess__inner .loading-spinner{
 width: 0;
 height: 0;
 opacity: 0;
 transition: ease opacity 150ms
}
.useraccess__inner.loading .loading-spinner{
 display: block;
 width: 30px;
 height: 20px;
 position: absolute;
 top: 120px;
 left: 50%;
 border-width: 0 2px;
 border-radius: 6px;
 border-color: #424b5a;
 opacity: 1
}
.useraccess__inner.loading .loading-spinner:before{
 background-color: #424b5a
}

.useraccess__inner .__ajax-wrapper{
 z-index: 1;
 opacity: 1;
 transition: ease opacity 100ms
}
.useraccess__inner.loading .__ajax-wrapper{
 opacity: 0;
 pointer-events: none
}

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

@media ( min-width: 992px ){
	
 .useraccess--{
  padding-left: 20px;
  padding-right: 20px;
 }
	
}

@media ( min-height: 800px ){
	
 .useraccess--{
  padding-bottom: 100px
 }
 .useraccess-- .useraccess__outer{
  padding: 42px 20px
 }
 .useraccess-- .useraccess__inner{
  padding-top: 20px
 }
	
}