/*
* Login Styles
*
* @package    AJR Design Plugin
* @since      1.4.0
* @subpackage ajr-design-plugin/assets/css
**/

/* VARIABLES */
/* --------------------------------------------------------------------------------------------- */
:root {
	/* sizes */
	--input_height:45px;

	/* fonts 
	--font_heading:'Exo', sans-serif;
	--font_primary:'Roboto', sans-serif;
	--font_secondary:'Roboto Mono', serif;
	--font_accent:'Roboto Slab', serif;*/

	/* colors - see ajrdesign-root 
	--colour_accent:255,0,100;
	--colour_accent_hover:225,0,60;
	--colour_accent_active:255,75,125;
	--colour_success:20,150,20;
	--colour_error:250,200,140;
	--colour_warning:230,0,0;
	--colour_text:75,75,75;
	--colour_grey:125,125,125;
	--colour_grey_light:150,150,150;
	--colour_grey_lighter:180,180,180;
	--colour_grey_lightest:245,245,245;*/

	/* transitions */
	--transition: 0.6s ease-in;
	--transition-hover: 0.6s ease-out;

	/* placeholders 
	--font_size_placeholder: 0.9em !important;
	--font_weight_placeholder: 300 !important;
	--colour_placeholder: 170,170,170 !important;*/

	/* morph */
	--morph_up_input_shadow: inset 3px 3px 3px 0px rgb(0 0 0 / 10%), inset -3px -3px 3px 0px #fff !important;
}

/* PLACEHGOLDERS */
/* --------------------------------------------------------------------------------------------- */
::-webkit-input-placeholder { font-size:var(--font_size_placeholder); font-weight:var(--font_weight_placeholder); color:rgb(var(--colour_placeholder)); } /* Edge */
:-ms-input-placeholder { font-size:var(--font_size_placeholder); font-weight:var(--font_weight_placeholder); color:rgb(var(--colour_placeholder)); }/* Internet Explorer 10-11 */
::placeholder { font-size:var(--font_size_placeholder); font-weight:var(--font_weight_placeholder); color:rgb(var(--colour_placeholder)); }


/* ERROR PAGE - logout confirmation */
/* --------------------------------------------------------------------------------------------- */
#error-page {
	max-width:none;
	margin:0;
	padding:0;
	overflow:hidden; }
	#error-page .wp-die-message {
		display:-webkit-flex; display:flex;
		height:100vh;
		width:100vw;
		margin:2rem;
		padding:1.5rem 2rem; }
	#error-page .wp-die-message::before {
		/* logo */ }


/* LAYOUT */
/* --------------------------------------------------------------------------------------------- */
* {
    box-sizing: border-box; }

html {}

body {
	display:-webkit-flex; display:flex;
	-webkit-flex-direction:column; flex-direction:column;
	-webkit-justify-content:center; justify-content:center;
	min-height:100vh;
	height:auto;
    /*width: 100vw;*/
	font-family:var(--font_primary);
	font-size:16px;
	color:rgb(var(--colour_text));
	background:rgb(var(--colour_grey_lightest)); }

pre {
	width:500px;
	max-width:100vw;
	margin:0.25em auto !important;
	font-size:0.6em; }
	.pre_success { color:rgb(var(--colour_success)); }
	.pre_error { color:rgb(var(--colour_error)); }
	.pre_warning { color:rgb(var(--colour_warning)); }

#login {
	align-self:center;
	width:500px;
	margin:2rem auto 0;
	padding:0; }

@media screen and (max-width:767px) {
	body {
		height:85vh; }

	#login {
		width:90%; }
}

/* LOGO */
/* --------------------------------------------------------------------------------------------- */
.login h1 {
	margin-bottom:1.5rem;
	font-weight:900; }
	.login h1 a {
		width:100%;
		height:2rem;
		margin:0 auto;
		padding-top:5.5rem;
		background-size:auto 5rem;
		font-family:var(--font_heading);
		font-size:0.6em;
		font-weight:inherit;
		color:rgb(var(--colour_black)) !important;
		text-indent:0; }
	.login h1 a:empty {
		height:50px;
		padding-top:0;
		background-size:contain; }

/* MESSAGES */
/* --------------------------------------------------------------------------------------------- */
.login #login_error,
.login .message,
.login .success {
    border-left-width: 2px;
	border-left-color: rgb(var(--colour_error));
    padding:1em 1.4em;
    margin:0.5em 0 0 0;
	line-height:1.2em;
	font-size:0.8em;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); }
.login #login_success {
	border-left-color: rgb(var(--colour_success)); }
.login #login_error {
	border-left-color: rgb(var(--colour_accent)); }
/*.login .message {
	display:-webkit-flex; display:flex;
	-webkit-justify-content:center; justify-content:center; }*/

.login #login_error + form,
.login .message + form,
.login .success + form {
	margin:0.75em auto 2rem; }

.login #login_error + .nav,
.login .message + .nav,
.login .success + .nav {
	margin-top:calc(1rem + 1em); }

/* countdown timer */
.login .countdown_timer {
	display:inline-block; }
	.login .countdown_timer span.hrs + span.mins,
	.login .countdown_timer span.hrs + span.secs,
	.login .countdown_timer span.mins + span.secs {
		padding-left:1px; }

/* hide if empty */
.login #login_success:empty,
.login #login_error:empty {
	display:none !important; }


/* FORM */
/* --------------------------------------------------------------------------------------------- */
.login form {
	padding:1.5rem;
	border:none;
	border-radius:10px;
	box-shadow: -10px -10px 20px 0 rgb(255 255 255), 5px 5px 20px 0 rgb(0 0 0 / 10%);
	/*background:none;
	background: radial-gradient(closest-side, #fff, #fff, #eee);*/
	background: linear-gradient(160deg, #eeeeee, #ffffff);
	/*-webkit-transition: background var(--transition);
			transition: background var(--transition); }
	.login form:hover {
		background: linear-gradient(325deg, #eeeeee, #ffffff);
		-webkit-transition: background var(--transition-hover);
				transition: background var(--transition-hover);*/ }

input::selection	  { background:rgba(var(--colour_accent),0.1) !important; /* WebKit/Blink Browsers */ }
input::-moz-selection { background:rgba(var(--colour_accent),0.1) !important; /* Gecko Browsers */ }


/* FORM LOADING */
/* --------------------------------------------------------------------------------------------- */
form.loading {
	position:relative;
	cursor:wait; }
	form.loading::before,
	form.loading::after {
		content:'';
		position:absolute;
		z-index:10; }
	form.loading::before {
		top:0;
		left:-5px;
		right:-5px;
		bottom:0;
		background:rgba(255,255,255,0.75); }
	form.loading::after {
		font-family:var(--icons_fontawesome);
		content:'\f110';
		top:calc(50% - 35px + 0.5rem);
		left:calc(50% - 10px);
		font-size:20px;
		font-weight: 900;
		color:rgb(var(--colour_accent));
		-webkit-animation: fa-spin 2s infinite linear;
				animation: fa-spin 2s infinite linear; }

/* LABLES */
/* --------------------------------------------------------------------------------------------- */
.login form label {
	margin:0; }
.login form label[for=user_login],
.login form label[for=user_pass] {
	display:none; }

/* INPUTS */
/* --------------------------------------------------------------------------------------------- */
.login form input:not(#wp-submit),
.login form input#user_login,
.login form input#user_pass,
.login form input#pass1,
.login form input#pass2,
.login form input#captcha,
.login form input#jetpack_protect_answer,
.login form input[type=text],
.login form input[type=number],
.login form input[type=checkbox],
.login form input[type=radio] {
	min-height: var(--input_height);
	margin:0 0 0.5em;
	padding: 0.6rem 1rem 0.5rem;
	font-family:var(--font_primary);
	font-size:1em;
	letter-spacing:0.02em;
	text-align:center;
	border:1px solid transparent !important;
	border-radius: 5px !important;
	background: rgba(255,255,255,0.4);
	box-shadow: inset 3px 3px 3px 0px rgb(0 0 0 / 10%), inset -3px -3px 3px 0px rgb(0 0 0 / 5%); }
.login form input[type=checkbox],
.login form input[type=radio] {
	width:20px !important;
	height:20px !important;
	min-height:20px !important;
	margin:0 5px 0 0 !important; }
	input[type=checkbox]:checked::before {
		margin:1px 0 0;
		width:100%;
		height:100% }
.login form input:not(#wp-submit):hover,
.login form input:not(#wp-submit):focus {
	background:rgba(255,255,255,0.6) !important; }
/*input:focus:not(#pass1.bad):not(#pass1.short):not(#pass1.bad):not(#pass1.good):not(#pass1.strong):not(#pass2) {
	border-color:#e35b5b; }*/

/* password strength */
#pass-strength-result {
	font-size:0.9em;
	font-weight:400 !important;
	text-transform:uppercase;
	color:#444;
	border-radius:4px;
	opacity: 1; }
	.description.indicator-hint {
		font-size:0.8em;
		font-family:inherit; }

/* password show/hide icon */
.login .button.wp-hide-pw {
    margin: 0;
	font-size:inherit; }
	.login .button.wp-hide-pw > .dashicons {
		width: 1em;
		height: 1em;
		top: 50%;
		transform: translateY(-50%);
		font-size:1em;
		color: rgb(var(--colour_accent)); }
	.login .button.wp-hide-pw > .dashicons:hover {
		color: rgb(var(--colour_accent)); }

/* jetpack maths recaptcha */
.login form #jetpack_protect_answer {
	margin:0;
	text-align:center;
	outline:none;
	border:none; }
	label[for=jetpack_protect_answer] + span {
		vertical-align:bottom; }

/* HUMAN CONFIRMATION */
/* --------------------------------------------------------------------------------------------- */
.login form .human_confirmation {
	display:none;
	margin:0.5em 0 1em !important;
	line-height:1em;
	text-align:center;
	color:#999; }
	.login form .human_confirmation label {
		font-family: var(--font_primary);
		line-height: inherit;
		font-size:0.8em !important; }
		.login form .human_confirmation label/* span*/ {
			display:-webkit-flex; display:flex;
			-webkit-align-items:center; align-items:center;
			-webkit-justify-content:center; justify-content:center;/*
			margin-top:2px;*/ }
	.login form .human_confirmation input {
		min-height:30px !important;
		width:50px;
		margin:0 0 0 5px !important;
		padding:0 !important; }

/* REMEMBER ME */
/* --------------------------------------------------------------------------------------------- */
.login form .forgetmenot {
	float:none !important;
	display:none;
	margin:0.5em 0 1em !important;
	line-height:1em;
	text-align:center;
	color:#999; }
	.login form .forgetmenot label {
		font-family: var(--font_primary);
		line-height: inherit;
		font-size:0.8em !important; }

/* BUTTONS & LINKS */
/* --------------------------------------------------------------------------------------------- */
.login form p.submit {
	margin:0.5em 0 0 0 !important; }
.login form #wp-submit,
.login form #wp-submit:active {
	float:none;
	display:block;
	width:100%;
	min-height:var(--input_height);
	font-family:var(--font_primary);
	line-height:var(--input_height);
	font-size:0.9em;
	font-weight:300;
	letter-spacing:0.02em;
	text-transform:uppercase;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
	border:none;
	background: rgb(var(--colour_accent)); }
	.login form #wp-submit:hover {
		background: rgb(var(--colour_accent_hover)); }
	.login form #wp-submit:active,
	.login form #wp-submit:focus,
	.login .button.wp-hide-pw:focus {
		border:none !important;
		box-shadow:none !important; }
		.login form #wp-submit[disabled] {
			color:#ddd !important; }

/* generate password */
.login form button.wp-generate-pw,
.login form button.wp-generate-pw:visited {
	width:100%;
	margin:-1.5em 0 1.5rem !important;
	color:rgb(var(--colour_accent));
	border-color:rgb(var(--colour_accent));
	background:#fff !important; }
	.login form button.wp-generate-pw:hover {
		color:rgb(var(--colour_accent_hover));
		border-color:rgb(var(--colour_accent_hover)); }
	.login form button.wp-generate-pw:active {
		color:rgb(var(--colour_accent_active));
		border-color:rgb(var(--colour_accent_active)); }

/* wp default links after login form */
.login #nav,
.login #backtoblog {
	display:none; }

/* ajrdesign links after login form */
.login .nav,
.login .privacy-policy-link {
	display:block;
	margin:0.5em auto;
	font-family:var(--font_primary);
	font-size:0.8em;
	text-align:center; }
	/*.login form + .nav,
	.login .nav:first-of-type {
		margin-top:2rem; }
	.login .nav:last-of-type {
		margin-bottom:2rem; }*/

/* links */
a, a:visited,
.login #nav a, .login #nav a:visited,
.login #backtoblog a, .login #backtoblog a:visited,
.login .privacy-policy-page-link a:active, .login .privacy-policy-page-link a:visited {
	text-decoration:none;
	color:rgb(var(--colour_text)); }
#login a:not(.nav,.privacy-policy-link), #login a:not(.nav,.privacy-policy-link):visited,
.message.success a.login_link, a.login_link:visited {
	color:rgb(var(--colour_accent)); }
a:hover,
.login .nav a:hover,
.login .backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color:rgb(var(--colour_accent_hover)) !important; }
a:focus,
.login .nav a:focus,
.login .backtoblog a:focus,
.login .privacy-policy-page-link a:focus {
	box-shadow:none !important; }
a:active,
.login .nav a:active,
.login .backtoblog a:active,
.login .privacy-policy-page-link a:active {
	color:rgb(var(--colour_accent_active)) !important; }

/* privacy policy */
.login .privacy-policy-page-link {
	margin:1.5em auto 0; }

/* custom after login form */
.login footer {
	display:-webkit-flex; display:flex;
	-webkit-flex-direction:column; flex-direction:column;
	-webkit-justify-content:center; justify-content:center;
	margin:0 auto 2rem; }
.login #login_error + footer,
.login .message + footer {
	margin-top:1.5rem; }

	.login footer .ajrdesign_copyright {
		display:-webkit-flex; display:flex;
		-webkit-justify-content: center; justify-content: center;
		margin-top:3em;
		font-size:0.8em;
		font-weight:300;
		text-align:center;
		color:rgb(var(--colour_grey_light)); }
		.login footer .ajrdesign_copyright .ajrdesign_divider {
			margin:0 0.75em;
			font-size:1em;
			color:rgb(var(--colour_grey_lighter)); }


@media screen and (max-device-width:599px) {
	input[type=text],
	input[type=number],
	select,
	textarea {
		font-size:16px !important; }
}