/*
 * Shortcode: charitable-form.scss
 * -----------------------------------------------
*/
.charitable-login-form,
.charitable-form-fields {
	.charitable-fieldset {
		background: #fafafa;
	}
	.charitable-form-field.odd {
		margin-right: 15px;
		clear: left;
	}
	.charitable-form-field {
		float: left;
		width: 49%;
	}

	/* Large Devices, Wide Screens */
	@include media-breakpoint-down(xl) {
		.charitable-form-field {
			width: 49%;
		}
		.charitable-form-field.odd {
			margin-right: 10px;
		}
	}

	input[type="text"], input[type="email"], 
	input[type="url"], input[type="password"], 
	input[type="search"], input[type="number"], 
	input[type="date"], input[type="tel"], 
	textarea {
		max-width: 300px;
		max-width: 30rem;
		width: 100%;
		padding: 2px 15px;
		margin-top: 0;
		border-width: 1px;
		border-width: 0.1rem;
		border-style: solid;
		border-color: #ececee;
		border-radius: 0px;
		font-size: 14px;
		font-size: 13px;
		box-shadow: none;
		background-color: #fff;
		-webkit-appearance: none;
		height: 42px;
	}
	select {
		position: relative;
		width: 100%;
		max-width: 300px;
		max-width: 30rem;
		padding: 2px 15px;
		border-width: 1px;
		border-width: 0.1rem;
		border-style: solid;
		border-color: #ececee;
		border-radius: 0.2rem;
		height: 40px;
	}
	/* Extra Small Devices, Phones */
	@include media-breakpoint-down(sm) {
		.charitable-form-field {
			float: none;
			width: 100%;
		}
		input[type="text"], input[type="email"], 
		input[type="url"], input[type="password"], 
		input[type="search"], input[type="number"], 
		input[type="date"], input[type="tel"], 
		textarea{
			max-width: 36rem !important;
		}
	}
}

#charitable-registration-form {
	.charitable-form-fields .charitable-form-field {
		float: none;
		width: 100%;
	}
}

.charitable-donation-form {
	.charitable-donation-options {
		.donation-amounts {
			.donation-amount {
				float: none;
				width: auto;
				display: inline-block;
				vertical-align: middle;
				border: none;
				padding: 0 20px 0.5em 0;
				margin: 0 0 1em;
				&.suggested-donation-amount {
					.amount {
						font-size: 18px;
						text-align: center;
						background: #fff;
						display: block;
						margin-bottom: 0;
						padding: 25px 30px;
					}
					.description {
						text-align: center;
						font-size: 13px;
						width: 100%;
						background: #f3f3f3;
					}
					&.selected {
						.description {
							background-color: #444;
							color: #fff;
						}
						.amount {
							background-color: #F89D35;
							color: #fff;
							border: none;
						}
					}
				}
			}
		}
	}
}


.charitable-submit-field,
.charitable-form-field {
	.button {
		padding: 10px 40px;
		background: #F89D35;
		box-shadow: none;
		border: none;
		color: #fff;
		margin-top: 10px;
		&:hover {
			background: #EC930F;
		}
	}
}
.charitable-login-form {
	input[type="submit"] {
		padding: 10px 40px;
		background: #F89D35;
		box-shadow: none;
		border: none;
		color: #fff;
		margin-top: 10px;
		&:hover {
			background: #EC930F;
		}
	}
}


#charitable-donation-amount-form .donation-amounts .donation-amount, #charitable-donation-form .donation-amounts .donation-amount {
	width: auto;
	padding: 0;
	margin: 0 15px 20px 0;	
	&.selected {
		border: 1px solid #fafafa;
		color: #333;
	}
	label {
		padding: 0;
	}
	&:nth-child(2n+2) {
		margin: 0 15px 20px 0;
	}
}

#charitable-donation-form .donation-amounts .donation-amount {
	.custom-donation-amount-wrapper {
		padding: 20px;
	}
	&.selected {
		.custom-donation-amount-wrapper {
			label {
				color: #fff;
			}
		}
	}

}