/*
widget.css

Better styling for Kimbia widgets, including multigive.

	* Neutralizes a lot of default Kimbia display behaviors: extra margin, padding in odd places, etc.
	* Uses CSS specificity to override frustrating uses of `!important` in the default stylesheet.
	* Uses `display: table-cell` to better manage field/label layout instead of floats now that we've dropped IE7 support.

*/

/* *K* Denotes Overriding a Kimbia Default */

.kimbiaDiv {
	margin: 0 auto !important; /*K*/
	/*max-width: 400px;*/
}

	/* MULTIGIVE RULES */
	.k_donation_categories {
		display: table !important;
		width: 100%;
	}
		.k_donation_header_row,.k_donation_category_row,.k_donation_minimum_amount_row {
			display: table-row !important;
		}
			.k_donation_header_cell,.k_donation_category_cell,.k_donation_minimum_amount_cell {
				display: table-cell !important;
			}
				/*
					We want to apply `padding-right` to the spans that act as cells for fields or headers, EXCEPT for the last one, which isn't actually the last span.
					Extra wrinkle, this needs to work for n number of hierarchical "columns."
					Structure is as follows:

					.k_donation_header_row
						» .k_donation_header_cell.k_donation_header_level_0
						» .k_donation_header_cell.k_donation_header_level_1
						» .k_donation_header_cell.k_donation_header_level_2     (sometimes)
						» .k_donation_category_header_questions                 (optional)
						» .k_donation_header_cell                               (empty, column placeholder for remove btn)
					.k_donationcategory_row
						» .k_donation_category_cell.k_donation_category_level_0
						» .k_donation_category_cell.k_donation_category_level_1
						» .k_donation_category_cell.k_donation_category_level_2 (sometimes)
						» .k_donation_category_questions                        (optional)
						» .k_donation_category_cell                             (placeholder for remove btn when present)

					So logic is:
						.k_donation_header_cell                                 (all cells, but omits the optional category question)
						[class*=k_donation_header_level]                        (all .k_donation_header_cell where a .k_donation_category_level_N class exists, omits the remove button cell)
						:not(:nth-last-child(3))                                (except for the one that's the third from the end within the parent, this covers 2- and 3-level hierarchies)
				*/
				.k_donation_header_cell[class*=k_donation_header_level]:not(:nth-last-child(3)),
				.k_donation_category_cell[class*=k_donation_category_level]:not(:nth-last-child(3)),
				.k_donation_minimum_amount_cell[class*=k_donation_category_level]:not(:nth-last-child(3)) {
					padding-right: 1em;
				}

			.k_donation_header_cell {
				font-size: 0.8em;
			}
			.k_donation_category_cell {
				padding-bottom: 0.4em;
			}
				.twitter-typeahead {
					display: block !important;
				}
					.tt-dropdown-menu {
						-webkit-box-shadow: 0 6px 13px 0 rgba(0,0,0,0.25);
						-moz-box-shadow: 0 6px 13px 0 rgba(0,0,0,0.25);
						box-shadow: 0 6px 13px 0 rgba(0,0,0,0.25);
					}
						.tt-dropdown-menu p {
							margin: 0;
							padding: 0.5em;
						}
			.k_donation_category_select,.k_donation_category_text {
				border: 1px solid #999;				/* Replicate Kimbia Defaults */
				font-size: 0.9em;					/* Replicate Kimbia Defaults */

				box-sizing: content-box;
				height: 24px;
				padding: 0.2em;
				vertical-align: middle !important;	/* !important overrides inline style added to typeahead. */
				width: 98%; 						/* Generic fallback first for <=IE8. */
				width: calc(100% - 0.4em - 2px);	/* Fit in `display: table-cell` using calc() for everyone else. */
			}

			button.k_donation_categories_remove {
				-webkit-box-shadow: 0 2px 0 0 rgba(70,0,0,1);
				-moz-box-shadow: 0 2px 0 0 rgba(70,0,0,1);
				box-shadow: 0 2px 0 0 rgba(70,0,0,1);

				background: rgb(150,30,30);
				background: rgba(150,30,30,0.8);
				border-radius: 20px;
				color: rgb(255,255,255);
				margin-left: 0.5em;
				width: 26px;
			}
				button.k_donation_categories_remove:hover {
					background: rgb(150,30,30);
					background: rgba(150,30,30,1);
					border-color: rgb(70,0,0);
				}

		.k_donation_minimum_amount_row {
			font-size: 0.8em;
			font-style: italic;
			line-height: 1.2em;
			text-align: center;
		}

	.k_donation_categories_button_row {
		display: table-row;
	}
		button.k_donation_categories_add,button.k_donation_categories_remove {
			border: 1px solid transparent;
			font-size: 1em;
			font-weight: bold;
			height: 26px;
		}
		button.k_donation_categories_add {
			-webkit-box-shadow: 0 2px 0 0 rgb(0,70,0);
			-moz-box-shadow: 0 2px 0 0 rgb(0,70,0);
			box-shadow: 0 2px 0 0 rgb(0,70,0);

			background: rgb(30,150,30);
			background: rgba(30,150,30,0.8);
			border-radius: 10px;
			color: rgb(255,255,255);
			margin: 1em 0;
		}
			button.k_donation_categories_add:after {
				content: " Add Gift";
			}
			button.k_donation_categories_add:hover {
				background: rgb(30,150,30);
				background: rgba(30,150,30,1);
				border-color: rgb(0,70,0);
			}

	.k_donation_categories_subtotal_row {
		border-top-color: rgb(127,127,127) !important;
	}
		.k_donation_categories_subtotal_label {
			font-style: italic;
		}



	/* BETTER KIMBIA DEFAULTS */
	.k_column {
		width: 100%;
	}

		.k_section {
			margin-bottom: 1em;
			padding-top: 1em;
		}

			.k_section.k_sectionDonation {
				padding-top: 0;
			}

	.formDefLabel {
		display: none !important;					/*K*/
	}

	.inputGroup {
		margin: 0 !important;						/*K*/
		width: 100%;
	}

	label {
		display: table-cell !important;				/*K*/
		float: none !important;						/*K*/
		padding: 0.1em 0 !important;				/*K*/
		vertical-align: top;
		width: 30% !important;						/*K*/
	}
		label.groupLabel {
			font-size: 1.3em !important;			/*K*/
		}
			label {
				font-size: 1em !important;			/* Separated so that `label.groupLabel` can be first and have precedence. */
			}

		/*
			This is the only real way to override the Kimbia widget using !important inside an element selector.
			Since all the labels have a class attribute, we reference this using an attribute selector, which has a higher precedence than an element selector. */
		*/
		label[class] {
			float: none !important;
			width: 30% !important;
		}
		label.groupLabel.section {
			padding: 1em 0 0.5em !important;		/*K*/
			width: 100% !important;					/* Overrides the override of the Kimbia default. */
		}

	input.k_number,input.k_text,input.k_money,select.k_select,textarea.k_textarea {
		box-sizing: content-box;					/* Fixes mismatched <input> and <select> sizes. */
		display: inline-block !important;			/*K*/
		font-size: 1em !important;					/*K*/
		width: calc(100% - 4px) !important;			/*K*/
	}

	input.k_number,input.k_text,input.k_money,select.k_select {
		height: 24px;
		margin-left: 0 !important;					/*K*/
		max-width: none !important;					/*K*/
		padding: 1px !important;					/*K*/
	}

	input.k_number,input.k_text,input.k_money,textarea.k_textarea {
		width: calc(100% - 4px) !important;			/*K*/
	}

	select.k_select {
		width: calc(100% - 2px) !important;			/*K*/
	}

	span.fieldCaption {
		display: block;
		margin-left: 0 !important;					/*K*/
		width: 100%;
	}

	input.k_radioCB {
		box-sizing: content-box;
		display: inline-block !important;			/*K*/
		float: left !important;
		height: 13px;
		margin: 0.25em 1em 0 0 !important;
		width: 13px;
	}
		label[class].k_radioCB {
			border-bottom: 0.15em rgba(0,0,0,0) solid;	/* Fake extra space on the bottom using an invisible border */
			display: table-cell;					/*K*/
			height: 2em;							/*K*/
			padding: 0;								/*K*/
			vertical-align: middle;
			width: auto;							/*K*/
		}

		.k_paymentPlanTitle {
			display: inline-block;
			width: 100%;
		}

	.k_button.forward {
		font-size: 1.2em !important;
		line-height: 2em;
		padding: 10%;
		width: 150%;
	}

	/* Improved mobile handling by pushing fields below labels on mobile. */
	@media (max-width: 400px) {
		label {
			display: table-row !important;			/*K*/
			width: 100% !important;					/*K*/
		}
			label.groupLabel.section {
				display: block !important;			/* Override the override of the Kimbia default */
			}

		input.k_number,input.k_text,input.k_money,select.k_select,textarea.k_textarea {
			max-width: none !important;				/*K*/
			width: calc(100% - 4px) !important;		/*K*/
		}

			div.kimbiaDiv input.k_otherText {
				margin: 0;
			}
	}

@media (max-width: 400px) {
	/*

		The .k_questionBlock selector in the middle lets me have rules with higher specificity to override Kimbia defaults.
		Unfortunately, because I still have to use `!important` to override the Kimbia default, I can't include an <=IE8 fallback for `width`, which doesn't support calc().
		This may then cause minor weird behaviors in <=IE8 at <=400px, but there's nothing to be done. This is a mercifully-fringe scenario though.

	*/
	div.kimbiaDiv.two_col .k_questionBlock input.k_text,input.k_money,select.k_select {
		max-width: none !important;
		width: calc(100% - 4px) !important;			/* 2px for padding + 2px for border */
	}
}

@media screen and (max-width: 991px) {
	div[class].kimbiaDiv label {
		width: 100% !important;
	}
	div[class].kimbiaDiv.two_col input[class].k_text, div[class].kimbiaDiv.two_col input[class].k_money {
		max-width: none !important;
		width: calc(100% - 4px) !important;
	}
	div[class].kimbiaDiv.two_col select[class].k_select {
		max-width: none !important;
		width: calc(100% - 2px) !important;
	}
}

/* HOSTED PAGE ONLY */
#centering {
	width: auto !important;
}