/* AM-Sites License Manager — Login/Reset password widgets */

.amslm-btn-outline {
	padding: 8px 14px !important;
	border: 1px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Explicit, high-specificity hover/focus state so the site's theme button
 * styles (which were making this text invisible on hover) can't win. */
.amslm-btn-outline:hover,
.amslm-btn-outline:focus {
	background: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}

.amslm-password-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.amslm-password-wrapper input {
	padding-right: 44px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Reset Password page: make sure the wrapper, inputs, and buttons never
 * exceed the viewport width on phones — the missing box-sizing above
 * (padding added OUTSIDE the width instead of being included in it) was
 * the actual cause of the page not being mobile-friendly. */
#amslm-resetpassword-wrapper,
#amslm-lostpassword-box {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#amslm-resetpassword-wrapper input,
#amslm-resetpassword-wrapper button,
#amslm-lostpassword-box input,
#amslm-lostpassword-box button {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 480px) {
	#amslm-resetpassword-wrapper,
	#amslm-lostpassword-box {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.amslm-btn-outline,
	#amslm-resetpassword-form button[type="submit"] {
		font-size: 14px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

.amslm-eye-toggle {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 4px !important;
	margin: 0 !important;
	line-height: 0 !important;
	color: #555 !important;
	width: auto !important;
	height: auto !important;
}

.amslm-eye-toggle:hover,
.amslm-eye-toggle:focus {
	color: #000 !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.amslm-eye-toggle svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	pointer-events: none;
}