/*-------------------------------
            Page styles
--------------------------------*/
h1:empty, 
h1.title,
h2.title,
h3.title,
table#mheader2 {
	display: none;
	/*The h1 of this page is specified below so mheader and anything that is echo'd on to the page is removed*/
}
main#donations-page {
	display: grid;
	grid-template-columns: 1fr 30ch;
	grid-column-gap: 30px;
}
@media (max-width: 800px) {
	main#donations-page {
		display: block;
	}
}
#donations-page * {
	box-sizing: border-box;
}
#donations-page section {
	margin-bottom: 2em;
}
#donations-page label {
	font-weight: inherit;
	/*Removes Bootstrap default without stripping anything we included in the framework*/
	display: block;
	position: relative;
}
h3:first-child {
	margin-top: 1em;
}
#donations-page input,
#donations-page textarea, 
#donations-page select {
	margin-bottom: 1em;
	border: 1px solid #a9a9a9;
	padding: .25em .5em;
	position: relative;
}
/*input, textarea, select{
	margin-bottom: 1em;
	border: 1px solid #a9a9a9;
	padding: .25em .5em;
	position: relative;
}*/
#donations-page select,
#donations-page input:not([type="submit"]) {
	width: 100%;
	max-width: 300px;
}
#donations-page textarea {
	width: 100%;
	height: 6em;
	max-width: 450px;
	padding: .25em .5em;
}
#donations-page .mms_label_error{
	color:red;
	font-weight:bold;
}
#donations-page .mms_input_error{
	border:1px solid red;
}
.mms_error{
	text-align:center;
	font-weight:bold;
	color:red;
	font-size:200%;
}
/*-------------------------------
            Article
--------------------------------*/
.checkbox-wrapper {
	margin-bottom: 1em;
}
#donations-page .checkbox-wrapper input[type="checkbox"] + label {
    display: inline-block;
}
@media(max-width: 430px) {
	#donations-page .checkbox-wrapper input[type="checkbox"] + label {
	    display: inline;
	}
}
.prop-label{
	float:left;
	font-weight:bold;
}
.right-input{
	float:right;
}
.checkbox-control{
	max-width:300px;
}
#gift-amount .buttons-group {
	display: grid;
	max-width: 650px;
	margin-bottom: 1em;
	grid-template-columns: repeat(auto-fill, minmax(auto, 15ch));
	grid-row-gap: .5em;
	grid-column-gap: 1em;
}
#nextPaymentOpts .buttons-group {
	display: grid;
	max-width: 650px;
	margin-bottom: 1em;
	grid-template-columns: repeat(auto-fill, minmax(auto, 15ch));
	grid-row-gap: .5em;
	grid-column-gap: 1em;
}
@supports (display: block) {
	/*IE doesn't support @supports so we use it to filter these styles from that browser*/
	#donations-page .amount-button input[name="amount-input"] {
		display: none;
	}
	#donations-page .amount-button input[name="pay-date"] {
		display: none;
	}
	.checkbox-wrapper {
		margin-left: calc(1em + .5ch);
		/*Adjusts position for the custom checkbox styles coming below*/
	}
	.checkbox-wrapper input[type="checkbox"] {
		display: none;
	}
	.checkbox-wrapper input[type="checkbox"] + label::before {
		/*Rebuild empty checkbox to replace the default that looks different in every browser and is difficult to style*/
	    content: '';
	    height: 1.1em;
	    width: 1em;
	    display: inline-block;
	    background: none;
	    margin: 0;
	    bottom: -.1em;
	    border: 1px solid #a9a9a9;
	    position: absolute;
	    top: 0;
	    left: -2.1ch;
	}
	.checkbox-wrapper input[type="checkbox"]:checked + label::after {
		/*Add in our custom checkmark when input is checked*/
	    content: '';
	    position: absolute;
	    width: 0.6em;
	    height: 0.4em;
	    background: transparent;
	    top: 0.3em;
	    left: -1.8ch;
	    border: 2.25px solid currentColor;
	    border-top: none;
	    border-right: none;
	    transform: rotate(-45deg);
	}
	.amount-button label,
	.amount-input {
		padding: 0.75em .5em;
		width: 12ch;
		background: white;
		font-weight: normal;
		border: 1px solid #a9a9a9;
		height: 2.5em;
		line-height: 1;
		text-align: left;
		width: inherit; /*Remove when figuring non-grid fallback*/
	}
	.amount-input::placeholder {
		font-size: .9em;
	}
	.amount-input:not(:placeholder-shown) {
		/*background: tomato;*/
	}
	.amount-input::-webkit-inner-spin-button, 
	.amount-input::-webkit-outer-spin-button { 
	  -moz-appearance: none; 
	  -webkit-appearance: none; 
	  appearance: none; 
	  margin: 0; 
	}
	.amount-button input:checked + label,
	#donations-page .amount-input:not(:placeholder-shown) {
		/*When either a radio button is selected or an amount is added in the text input for the gift amount, these styles will be applied*/
		padding: calc(0.75em - 1px) .5em;
		font-weight: bold;
		border: 2px solid #a9a9a9;
		background: #eee;
	}
}
.total {
	font-size: 1.25em;
}
.total span:nth-child(2) {
	font-size: 1.5em;
	font-weight: bold;
}
@media (min-width: 800px) {
	article .total {
		display: none;
	}
}
#payment-method-options > section[id$="-inputs"] {
	max-height: 0;
	transition: max-height .5s;
	overflow: hidden;
	margin-bottom: 0;
}
#payment-method-options > section[id$="-inputs"].show {
	max-height: 1000px;
	/*We use a very large number here because we're animating from a height of 0 to the element's full height without knowing what that number is*/
}
#payment-method-options > section[id$="-inputs"] h3 {
	display: none;
}
#payment-method,
#payment-method > option {
	cursor: pointer;
}
section[id$="-inputs"].show + section[id$="-inputs"].show {
	margin-bottom: 2em;
}
.double-up-inputs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1em;
	width: 300px;
}
.double-up-inputs.big {
	width: inherit;
}
.double-up-inputs label {
	grid-row-start: 1;
}
/*.double-up-inputs label[for="cc_exp"]::after {
	content: '(MM/YY)';
	display: block;
	font-size: 0;
	transition: .125s ease-in font-size;
}
.double-up-inputs:focus-within label[for="cc_exp"]::after {
	font-size: inherit;
}*/
.double-up-inputs input {
	grid-row-start: 2;
}
.double-up-inputs input:nth-of-type(1), 
.double-up-inputs label:nth-of-type(1) {
    grid-column-start: 1;
}
.double-up-inputs input:nth-of-type(2), 
.double-up-inputs label:nth-of-type(2) {
    grid-column-start: 2;
}
#billing-information {
	max-width: 450px;
}
#billing-information .double-up-inputs {
	max-width: 100%;
}
#billing-information input[name="billing-address"] {
	max-width: 100%;
}
.city-state-zip {
	display: grid;
	grid-template-columns: 2fr 1fr 9ch;
	max-width: 100%;
	grid-column-gap: 1em;
}
.city-state-zip label {
	grid-row-start: 1;
}
.city-state-zip input,
.city-state-zip select {
	grid-row-start: 2;
}
#billing-information select[name="billing-country"] {
	margin-bottom: 2em;
}
/*-------------------------------
            Aside
--------------------------------*/
aside {
	position: -webkit-sticky;
	position: sticky;
	top: 1em;
	height: 10px; /*Sticky elements must have height declared. It's not really 10px, but there is no overflow property so it won't be hidden*/
	height: fit-content;
}
@media (max-width: 800px) {
	aside {
		display: none;
	}
}
aside, aside p {
    font-size: .95em;
}
input[type="password"] + a {
	display: block;
	margin-bottom: .5em;
}
aside .total {
	font-size: 1em;
}
aside .total span:nth-child(-n+3) {
	font-size: inherit;
	font-weight: inherit;
}
aside .total span:first-child {
	/*display: block;*/
	font-weight: bold;
}
#campaign-description-container{
	display:none;
}
iframe{
	border: none;
	height: 30px;
}
/*-------------------------------
        Legacy Browser styles
--------------------------------*/
/*Target just IE*/
@media screen and (min-width:0\0) {
	main#donations-page {
		display: block;
	}
	article {
		float: left;
		width: calc(100% - 40ch);
	}
	aside {
		float: left;
		width: 40ch;
	}
	#donations-page .amount-button input[name='amount-input'] {
		display: inline;
		width: inherit;
	}
	#donations-page .amount-button input[name='pay-date'] {
		display: inline;
		width: inherit;
	}
	#donations-page .amount-button label {
		width: auto;
		display: inline;
	}
}