/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

h1 {
	font-size: 2.25em;
	color: #4b629c;
}

.US-Dollar-Warning {
	color: #4b629c;
	grid-row: 2 / 3;
	grid-column: 1 / 3;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
}

.Player_Button_Donate {
	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */
	margin-top: 2em;
}

.DonationContent {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: solid;
	border-color: #4b629c;
	background-color: #c3fae8;
	margin-left: 33%;
	margin-right: 33%;
	padding-bottom: 0.0625em;
}


.Donation-Page-Title {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.Donation-Data {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	width: 100%;
	background-color: #FFFFFF;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25% 50% 25%;
}

.Donate-Image-And-Text {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
}






.Donation-Type {
	list-style-type: none;
	color: #4b629c;
	display: grid;
	grid-templat-columns: repeat(2 1fr);
}



	.Donation-Type label,
	.Donation-Type input {
		background: #D2CCDB;
		color: #4b629c;
	}

		.Donation-Type input[type="radio"] {
			opacity: 0.01;
			z-index: 100;
		}

			.Donation-Type input[type="radio"]:checked + label,
			.Checked + label {
				background: #4b629c;
				color: #FFFFFF;
			}

	.Donation-Type label {
		border: 0.0625em solid #CCC;
		cursor: pointer;
		z-index: 90;
	}

		.Donation-Type label:hover {
			background: #DDD;
		}

.Donation-Type-Error {
	color: red;
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	margin-left: 0.5em;
	margin-top: 0.5em;
}

	.Donation-Type-Error span {
		color: red;
	}

.One-Time {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}

	.One-Time label {
		display: inline-block;
		width: 100%;
		text-align: center;
	}

.Monthly {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

	.Monthly label {
		display: inline-block;
		width: 100%;
		text-align: center;
	}



.Donation-Amount {
	list-style-type: none;
	color: #4b629c;
	display: grid;
	grid-templat-columns: repeat(2 1fr);
	margin-left: 5%;
}


	.Donation-Amount label,
	.Donation-Amount input {
		background: #D2CCDB;
		color: #4b629c;
	}

		.Donation-Amount input[type="radio"] {
			opacity: 0.01;
			z-index: 100;
		}

			.Donation-Amount input[type="radio"]:checked + label,
			.Checked + label {
				background: #4b629c;
				color: #FFFFFF;
			}

	.Donation-Amount label {
		border: 0.0625em solid #CCC;
		cursor: pointer;
		z-index: 90;
	}

		.Donation-Amount label:hover {
			background: #DDD;
		}


.Donation-Amount-Error {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	margin-top: 0em;
}

	.Donation-Amount-Error span {
		color: red;
	}

.a25 {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}

	.a25 label {
		display: inline-block;
		width: 90%;
		text-align: center;
	}

.a50 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

	.a50 label {
		display: inline-block;
		width: 90%;
		text-align: center;
	}

.a75 {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
}

	.a75 label {
		display: inline-block;
		width: 90%;
		text-align: center;
	}

.a100 {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
}

	.a100 label {
		display: inline-block;
		width: 90%;
		text-align: center;
	}

.aOther {
	grid-row: 4 / 5;
	grid-column: 1 / 2;
}

	.aOther label {
		display: inline-block;
		width: 90%;
		text-align: center;
	}

.aOtherAmount {
	grid-row: 4 / 5;
	grid-column: 2 / 3;
}

	.aOtherAmount input {
		display: inline-block;
		width: 90%;
		margin-top: 0.75em;
		text-align: center;
		color: #4b629c;
	}

.input-icon {
	position: relative;
}

	.input-icon > i {
		position: absolute;
		display: block;
		transform: translate(0, -50%);
		top: 65%;
		pointer-events: none;
		width: 1.5625em;
		text-align: center;
		font-style: normal;
		color: #4b629c;
	}

	.input-icon > input {
		padding-left: 1.5625em;
		padding-right: 0;
	}

.input-icon-right > i {
	right: 0;
}

.input-icon-right > input {
	padding-left: 0;
	padding-right: 1.5625em;
	text-align: right;
}



.Donation-Button {
	grid-row: 6 / 7;
	grid-column: 2 / 3;
	margin-right: 10%;
	margin-top: 0.5em;
	justify-self: right;
}

	.Donation-Button button {
		color: #4b629c;
	}




.Donate-Image {
}

	.Donate-Image img {
		width: 95%;
	}

.Donate-Text {
	width: 95%;
	padding: 5%;
}