// White (http://www.colorhexa.com/ffffff)
$white: #fff;
// Very light gray (mostly white) (http://www.colorhexa.com/f6f6f6)
$gray-very-light-mostly-white: #f6f6f6;
// Light gray (http://www.colorhexa.com/c3c3c3)
$gray-light: #c3c3c3;
// Strong blue (http://www.colorhexa.com/008ec2)
// @see https://github.com/WordPress/WordPress/blob/4.6/wp-includes/css/buttons.css#L240
$wp-button-primary-background-focus-color: #008ec2;

body {
	background: $gray-very-light-mostly-white;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.pronamic-pay-redirect-page {
	margin: 0 auto;

	max-width: 750px;
}

.pronamic-pay-redirect-container {
	background: $white;

	border: 1px solid $gray-light;

	border-radius: 4px;

	margin: 30px auto;
	padding: 20px;

	text-align: center;

	h1 {
		margin: 0;
	}

	&:after {
		content: "";
		clear: both;
		display: table;
	}
}

hr {
	background: $gray-light;

	border: 0;

	margin: 2em auto;

	width: 60%;
	height: 1px;
}

#pronamic_ideal_form {
	label {
		display: block;

		font-weight: bold;

		margin-bottom: .5em;
	}

	p {
		.pronamic-pay-btn {
			margin-top: .5em;
		}
	}
}

.pronamic-pay-btn {
	background: $wp-button-primary-background-focus-color;

	border: 0;
	border-radius: 4px;

	color: $white;

	font-size: 24px;
	font-weight: 200;

	padding: 10px 20px;
}

.alignleft {
	text-align: left;
}
