/* ==============================================================
   User Login
   style declarations for userLogin.xhtml
   ==============================================================*/
/* USER LOGIN */
.user-login {
	&.active {}
	& > .fa {}
	/* WRAPPER */
	&__wrapper {}
	/* HEADER / BODY */
	&__header,
	&__body {}
	&__header,
	&__body,
	&__footer {
		.btn--link {
			&:active, 
			&:focus, 
			&:active:focus {}
		}
		.btn--full {
			&:active, 
			&:focus, 
			&:active:focus {}
		}
	}
	/* HEADER */
	&__header {
		h2 {}
	}
	&__header-logo {}
	/* BODY */
	&__body {
		h3 {}
	}
	&__body-login-select {}
	&__body-login-type-wrapper {}
	&__body-login-type {
		&.local {}
		&.external,
		&.retrieve,
		&.create {}
		.form-group,
		p {}
	}
	&__body-action {
		.btn--full {}
		.btn--link {}
	}
	&__body-login-open-id {
		h3 {
			span {}
			&:before {}
		}
		ul {
			.mx-list-reset;
			li {
				&:last-child {}
				&.Google,
				&.Facebook {
					a {
						&:before {}
					}
				}
				&.Google {
					a {
						&:before {}
					}
				}
				&.Facebook {
					a {
						&:before {}
					}
				}
			}
			a {
				&:hover,
				&:active,
				&focus {}
			}
		}
	}
	/* FOOTER */
	&__footer {
		.btn {}
	}
}

/* MODIFICATION */
#login-body { 
	.user-login {	  
	    & > .fa {}	
	}
}

/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {} 

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}