/* ——— LOGIN PAGE ——— */
@import url('https://fonts.googleapis.com/css?family=Roboto');

body, html {
	background: #ffffff;
	font-family: 'Roboto', sans-serif;
}
#login {
	height: 400px;
	padding-top: calc(50vh - 200px);
	padding-bottom: calc(50vh - 200px);
	padding-left: 0;
	padding-right: 0;
	font-family: 'Roboto', sans-serif;
}

/* LOGO */
.login h1 a {
	width: 85px;
	height: 85px;
	background-size: contain;
	background-position: center;
	max-width: 100%;
	background-image: url('../images/wordpress-logo.svg')
}

/* MESSAGES */
.login #login_error, .login .message {
	margin-bottom: 20px;
	border-left-color: #555D66; /* —— ADD BRAND COLOR HERE —— */
	font-family: 'Roboto', sans-serif;
}

/* FORM */
.login form {
	font-family: 'Roboto', sans-serif;
	background: transparent;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: none !important;
}
.login label {
	color: #555D66; /* —— ADD BRAND COLOR HERE —— */
	font-family: 'Roboto', sans-serif;
}
.login form .input,
.login input[type=text] {
  background: #FFF;
	color: #555D66; /* —— ADD BRAND COLOR HERE —— */
  border: none;
  border-bottom: solid 1px #555D66; /* —— ADD BRAND COLOR HERE —— */
	box-shadow: none;
	transition: ease all .3s;
	font-family: 'Roboto', sans-serif;
}
.login input[type=text]:focus,
.login input[type=password]:focus {
	border-bottom: solid 1px #555D66; /* —— ADD BRAND COLOR HERE —— */
	outline: none;
}
.login input[type=password] {
	margin-bottom: 30px;
}

/* LINKS BELOW FORM */
.login #backtoblog, .login #nav {
	padding: 0;
	display: none;
	visibility: hidden;
	font-family: 'Roboto', sans-serif;
}
.login #backtoblog a, .login #nav a {
	color: #10618e;
	font-family: 'Roboto', sans-serif;
}

/* LOGIN BUTTON */
.wp-core-ui .button-primary {
	font-family: 'Roboto', sans-serif;
	background: #555D66; /* —— ADD BRAND COLOR HERE —— */
	color: #FFFFFF;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	line-height: 40px;
	transition: ease all .2s;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:active{
	background: #555D66; /* —— ADD BRAND COLOR HERE —— */
	border-color: #555D66; /* —— ADD BRAND COLOR HERE —— */
	box-shadow: inset 0 2px 0 #555D66; /* —— ADD BRAND COLOR HERE —— */
	color: #FFFFFF;
}
.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
	height: 40px;
	line-height: 42px;
	padding: 0 20px;
	text-transform: uppercase;
	letter-spacing: .05rem;
}

/* SIDEKICK BRANDING */
.login:after {
	content:'';
	display: block;
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 200px;
	height:290px;
	background-size: cover;
	background-image: url('../images/sidekick-logo-200x290.svg');
}

/* AUTOCOMPLETE IN WEBKIT BROWSERS (CHROME) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0px;
	border-bottom: 1px solid #555D66; /* —— ADD BRAND COLOR HERE —— */
  -webkit-text-fill-color: #555D66; /* —— ADD BRAND COLOR HERE —— */
  -webkit-box-shadow: 0 0 0px 1000px #FFF inset !important;
  transition: background-color 5000s ease-in-out 0s;
}