/*
	-----------------------
		Main login page
	-----------------------
*/
/* fade-in entrance */
@keyframes wp-login-fadein {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Apply to the login container */
body.login { opacity: 0; animation: wp-login-fadein 0.6s ease-in forwards; }

/* background color and font family */
body {
  background: #f8fafa;
  font-family: Inter, Arial, Verdana, sans-serif;
}
/* Position of main Login background */
#login{
	float:left;
	background-color:rgba(236,240,241,0.8);
	padding-top:0px;
	padding-left:60px;
	padding-right:60px;
	height:100%;
}

/* Set Custom Image */
.login .wp-login-logo a {
  background-image: url(pms-login-logo.png);
  width: 160px;
  margin-top:-20px !important;
  height: 140px;
  background-size: 160px 160px;
  margin-top: 0px;
  margin-bottom: 0px;
}
/* hide ugly wrap-around border on image when clicked */
.login h1 a:focus { border: none; box-shadow: none; }

/* page background image */
body.login {
  background-image: url(Web-home.webp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
/* filter over background image */
body.login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* overlay color and transparency */
  z-index: -1; /* place it behind the form and content */
  pointer-events: none; /* so it doesn’t block interactions */
}
/* Set 'Member's Login' title & 'Get Password' notice*/
#login div p{
	color:#2C5980;
}

/*
	--------------------
		Login Form
	--------------------
*/
/* Color and style of login form labels */
.login label {
  color: #454545;
  display: block;
  margin-bottom: 1em;
  font-weight: bold;
}
/* keep font small to see all of input */
.login form .input { font-weight: normal; }
#user_login.input { font-size: 16px; }
#user_pass.input { font-size: 16px; }

/* hide ugly wrap-around border when clicked */
.login #nav a:focus {
  border: none;
  box-shadow: none;
  color: #FFB416;
}
/* login form style */
.login #loginform {
	height: 260px;
	border-left-color:#b7472a;
	border-left-width:15px;
	border-radius:5px;
	box-shadow:0px 1px 3px 0px #7f8c8d;
	margin-bottom:12px;
	padding-bottom:12px;
}
/*
	----------------------
		Lost Password
	----------------------
*/
/* Lost password form */
#lostpasswordform{
	height:160px;
	border-left-color:#b7472a;
	border-left-width:15px;
	border-radius:5px;
	box-shadow:0px 1px 3px 0px #7f8c8d;
}
/* Lost password text block*/
.login #nav{
	text-align:center;
	position:relative;
	top:-60px;
}
/* Lost password info box */
#login .notice-info{
	border-left-color:#b7472a;
	border-radius:5px;
	border-left-width:15px !important;
	background-color:rgba(255,255,255,0.4);
}
/* "Lostpassword" & "Return to Login" text */
.login #nav a {
	color: #B7472A;
	font-size: 16px;
}
.login #nav a:hover {
  transition: 0.4s;
  color: #FFB416;
}
/* Eye toggle (hover) */
.wp-pwd .button-secondary span:hover{
	color:#ffb416;
}
/* Eye toggle (hover) */
.wp-pwd .button-secondary span:focus{
	color:#ffb416;
}

/*	---------------
	Button format
	---------------
*/
/* set button colours */
.wp-core-ui .button-primary {
  transition: 0.4s;
  background: #B7472A;
  border: none;
  box-shadow: 1px 1px 2px gray;
}
.wp-core-ui .button-primary:hover{
  transition: 0.4s;
  background: #FFB416;
  box-shadow: 1px 1px 2px gray;
  color: #2C5980;
}
.wp-core-ui .button-primary:focus{
  background: #FFB416;
  border: none;
  box-shadow: none;
  color: #2C5980;
}
/* Reset Pasword form */
.login #resetpassform {
	min-height: 320px;
	border-left-color:#b7472a;
	border-left-width:15px;
	border-radius:5px;
	box-shadow:0px 1px 3px 0px #7f8c8d;
}
/* set 'New Passsword' text size */
.login #pass1 {
	font-size:16px !important;
}

/*	-----------------
	Space below form
	-----------------
*/

/* remove the "Go to ..." link below the login form */
body.login div#login p#backtoblog a {
  display: none;
}

/* Space between login form & CleanTalk' notice */
.cleantalk-notice {
	position:relative;
	top:-30px;
}

/* 'Return to Page' link block */
.return-previous-link {
  margin-top: 5em !important;
  position: relative;
  text-align: center;
}

/* 'Return to Page' button link text */
.return-previous-link a {
	/*background*/
	padding:10px;
	background: #B7472A;
	border-radius:5px;
	width:100%;
	box-shadow:0px 1px 3px 0px #7f8c8d;
	/*text*/
	font-size: 14px;
	color: white;
	text-decoration: none;
}
/* changes on hover */
.return-previous-link a:hover {
	background: #FFB416;
	color: #2C5980;
	text-decoration: none;
	transition: 0.4s;
}
/* Clear focus outline around text */
.return-previous-link a:focus, .return-previous-link a:active {
	background: #FFB416;
	box-shadow:none;
	color: #2C5980;
	outline: none;
}

@media (max-width: 768px) {
	/* Position of main Login background */
	#login{
		padding-left:28px;
		padding-right:28px;
	}
	/* Space between login form & CleanTalk' notice */
	.cleantalk-notice {
		position:relative;
		top:-30px;
	}
	/* 'Return to Page' link block */
	.return-previous-link {
		position:relative;
		margin-top: 0px !important;
	}
}
