/**
 * Our plugin-wide CSS file.
 *
 * @package WordPress
 * @subpackage LXB Login
 * @since LXB Login 0.1
 */

/**
 * TABLE OF CONTENTS
 *
 * 1. The login form
 * 2. Events
 * 3. StatusPage.io
 * 4. Mobile
 */

 /**
  * 1. The login form
  */

 	/* Hide the form until we do some js stuff to it */
 	#login, .lxb_login-login_page {
 		opacity: 0;
 	}

 	body.login.no-js {

 		display: block;
 	}

	/* Wrap the WP login form. */
	.lxb_login-login_page {
		padding-top: 8%;
	}

	.lxb_login-login_form {
		background: white;
		border: 1px solid #dbdbdb;
		margin: 0 auto;
		position: relative;
		width: 365px;
		overflow: hidden;
	}

	.lxb_login-login_form .clear { clear: both; }

	.lxb_login-login_page form {
		margin-top: 0px;
		box-shadow: none;
		border: none;
		padding: 40px;
		padding-top: 25px;
		border: none;
	}

	/* Add the LexBlog logo */
	body.login .lxb_login-login_page div#login h1 a {
		background-image: url( "../images/login-form-image.svg" );
		width: 190px !important;
		height: 40px;
		background-size: 100%;
		margin: 0 40px 0;
		margin-bottom: 25px;
	}

	.lxb_login-login_page #login {
		width: 100%;
		padding: 45px 0 0 0;
		margin: auto;
	}

	/* If we have an event set up, we need more space to show it */
	.lxb_login-login_form.event {
		width: 840px;
		display: table;
	}

	/* Split our form wrapper in 2 to show the event */
	.lxb_login-login_form.event .lxb_login-login_form_wrap {
		width: 365px;
		border-right: 1px solid #dbdbdb;
		display: table-cell;
	}

	.lxb_login-login_form.event .lxb_login-login_event_wrap {
		width: 470px;
		padding: 45px 40px 50px 40px;
		box-sizing: border-box;
		display: table-cell;
		vertical-align: top;
	}

	/* Error/success messaging treatment */
	.lxb_login-login_page #login_error,
	.lxb_login-login_page .message {
		background: #f0f0f0;
		box-sizing: border-box;
		border-top: 1px solid #dbdbdb;
		border-bottom: 1px solid #dbdbdb;
		/*margin-top: 45px;*/
		margin-bottom: 5px;
		box-shadow: none;
		-webkit-box-shadow: none;
	}

	/* "Remember me" checkbox */
	.lxb_login-login_page .forgetmenot { 
		width: 52%;
    	padding-top: 10px;
	}

	.lxb_login-login_page label[for = 'simba_two_factor_auth'] {
		width: 100%;
	}

	/* 2FA message */
	.lxb_login-login_page label[for = 'simba_two_factor_auth'] ~ .forgetmenot {
    	
    	padding-top: 0;
    	margin-bottom: 5px;
	
    	display: flex;
    	align-items: start;

	}

	.lxb_login-login_page .forgetmenot .simba_tfa_otp_login_help {
		display: none;
	}

	.lxb_login-login_page .forgetmenot .simba_tfa_otp_login_help + br {
		display: none;
	}

	.lxb_login-login_page #simba_tfa_mark_as_trusted {
		margin-top: 3px;
	}

	/* Login form fields */
	.lxb_login-login_page label { color: #333; }

	.lxb_login-login_page #login input[ type = 'text' ],
	.lxb_login-login_page #login input[ type = 'password' ] { border-radius: 3px; }

	.lxb_login-login_page #login input[ type = 'submit' ] {
		background: #000000;
		border: none;
		box-shadow: none;
		text-shadow: none;
		height: 40px;
		text-transform: uppercase;
		padding: 0 40px 2px;
		font-size: 15px;
	}

	.lxb_login-login_page #login input[ value = 'Get New Password' ] {
		padding: 0 67px 2px;
	}

	.lxb_login-login_page #login input[ value = 'Reset Password' ] {
		padding: 0 80px 2px;
	}

	.lxb_login-login_page #login input[ type = 'submit' ]:hover { background: #333; }

	.lxb_login-login_page #lostpasswordform input[ type = 'submit' ] { float: left; }

	/* Navigation links at bottom of form */
	.lxb_login-login_page #login #nav,
	.lxb_login-login_page #backtoblog {
		margin: 0 0 20px 40px;
		padding: 0;
	}

	.lxb_login-login_page #login #nav a,
	.lxb_login-login_page #backtoblog a,
	.lxb_login-login_page-tools a { color: #999999; }

	.lxb_login-login_page-tools a:hover,
	.lxb_login-login_page #login #nav a:hover { color: #00a9e0; }

	.lxb_login-login_page-tools {
		width: 320px;
		padding-left: 40px;
		margin: 0px auto 40px;
		color: #999999;
	}

	.lxb_login-login_page-tools .lxb_login-status_page_link {
		margin-top: 20px;
	}

	#loginform p.submit {
		position: relative;

		/* Clear the float.  */
		overflow: hidden;

	}

	.LXB_Login_Markup-get_spinner { 
		position: absolute;
    	left: 122px;
    	top: 12px;
	}

	.simbaotp_spinner {
		position: absolute;
    	left: 117px;
    	top: 6px;
	}

	.lxb_login-image {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto 20px auto;
	}

/**
 * 2. Events
 */
	.lxb_login-login_page .lxb_login-login_event_wrap .upcoming {
		color: #777777;
		text-transform: uppercase;
		margin-bottom: 20px;
	}

	.lxb_login-login_page .event-title a {
		text-decoration: none;
		color: #00a9e0;
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 25px;
		display: block;
	}

	.lxb_login-login_page .event-title a:hover { color: #000; }

/**
 * 3. StatusPage.io
 */
	.lxb_login-login_page .lxb_login-status-login {
		width: 365px;
		margin: 0 auto;
	}

	.lxb_login-login_form.event .lxb_login-status-login { width: 840px; }

	.lxb_login-login_page .lxb_login-status_box .lxb_login-incident_title {
		padding: 15px;
		font-size: 14px;
	}

	/* The status thing needs some bottom whitespace. */
	.lxb_login-status-login { margin-bottom: 2em; }

	/* Don't let WordPress text-decorate our links! */
	.lxb_login-status-login .lxb_login-incident_link { text-decoration: none; }

	/* Paragraphs are about the only markup in the incident description, and they need some whitespace help. */
	.lxb_login-status_box.verbose p { margin-top: 0; margin-bottom: .5em; }
	.lxb_login-status_box.verbose p:last-child { margin-bottom: 0; }

	/* Fix for 'interim' login form, i.e. when you are logged out and still have an active session */
	.interim-login #login_error, .interim-login.login .message { margin: 40px 0 0; }

	.login .notice-warning {
    	border-left-color: #dba617 !important;
	}

	.login .notice-error {
    	border-left-color: #d63638 !important;
	}


/**
 * 4. Mobile
 */
	@media screen and ( max-width: 840px ) {

		/* Form should be 100% width*/
		.lxb_login-login_page .lxb_login-login_form {
			margin: 0 0 40px 0;
			width: 100%;
		}

		.lxb_login-login_page .lxb_login-status-login {
			width: 100%;
			margin: 0 auto;
		}

		.lxb_login-login_event_wrap {
			border-top: 1px solid #dbdbdb;
		}

		.lxb_login-login_form.event,
		.lxb_login-login_page .lxb_login-login_form.event .lxb_login-login_form_wrap,
		.lxb_login-login_page .lxb_login-login_form.event .lxb_login-login_event_wrap,
		.lxb_login-login_form.event #login_error,
		.lxb_login-login_form.event .message {
	 	    width: 100%;
	 		display: block;
	 		box-sizing: border-box;
	 	}

		.lxb_login-login_page .lxb_login-login_page-tools {
			width: auto;
		}

		.lxb_login-login_page .lxb_login-login_form.event {
			margin-top: 0;
		}

		/* We need some additional padding on the logo if there's an error */
		h1 ~ #login_error {
			padding-top: 40px;
		}

	 	/** Don't show the event section if the login is being shown in an iframe (i.e. when you are logged out by someone else **/
	 	.interim-login .lxb_login-login_form.event .lxb_zendesk-login_event_wrap {
		 	display: none;
	 	}

	 	.lxb_login-login_form.event {
		 	margin-left: 0;
		 	margin-right: 0;
		 	padding-bottom: 50px;
	 	}

	 	.lxb_login-login_form.event .lxb_zendesk-login_event_wrap {
		 	border-top: 1px solid #dbdbdb;
		 	padding-bottom: 40px;
	 	}

	 	.lxb_login-login_form.event + .lxb_login-status-login {
		 	width: 100%;
	 	}

	 	.mobile #login #backtoblog, .mobile #login #nav {
		 	margin-left: 40px;
	 	}

	}