:root {
	--input-color: lightgoldenrodyellow;
}

/* Front End */

.btn-toolbar {
    margin-bottom: 1em;
}

/* appMode */

.local {
	background: pink;
}

.test {

	/*DEV*/
	/*background: orange;*/
}

.live {
	background: white;
}

/* Sadqa Bakra / Qurbani */

#SadqaBakra {
	width: 70%;
	display: inline-block;
}

#SadqaBakraQty {
	width: 25%;
	display: inline-block;
}

/* Notice */

.notice {
	border: red 2px solid;
	margin-bottom: 1em;
	padding: 1em;
	color: red;
	background-color: yellow;
}

/* Donation Types */

.highlight-dontyp {
	background-color: yellow;
}

/* Donation Summary Table */

.amount {
	text-align: right;
	padding-left: 1em;
}

.total {
	font-weight: bold;
}

.donation-table {
	/*
    background-color: #ffff00;
    border: solid 1px;
    */
	width: 100%;
}

.total {
	border-top: solid 1px;
}

.chanda-info {
	background-color: #eee;
	margin-bottom: 1em;
}

.error-message {
	color: red;
	font-weight: bold;
}

.btn-default {
	width: 100%;
}

.required {
	color: red;
	font-weight: bold;
	font-size: large;
}

.card-logos {
	text-align: center;
	margin-bottom: 1em;
	padding: 0.5em;

	/*DEV*/
	/*background-color: lightpink;*/
}

.giftaidit-logo {
	width: 200px;
}

.donation-input-group {
	margin-bottom: 10px;
	background-color: #ffff00;
}


.form-group {
	background-color: mediumpurple;
}

.dividing_border {
	/*border-top: solid thin lightgrey;*/
	background-color: pink;
}

/*********************/
/*** BASE TEMPLATE ***/
/*********************/

.header-row {
	/*DEV*/
	/*background-color: coral;*/
}

.header-flex {
	display: flex;
	align-items: flex-start;
	padding: 1em 0;
	border-bottom: black 1px solid;

	/*DEV*/
	/*border: orangered 1px solid;*/
}

.header-col {
	flex:1;

	/*DEV*/
	/*border: blue 1px solid;*/
}

.header-col-title {
	flex: 8;
	text-align: center;
}

.site-logo {
	border-radius: 50%;
	width: 6em;
}

h1.site-title {
	font-size: 24pt;
	font-weight: normal;
	line-height: 1;
	color: #777;
	text-align: center;
	margin: 0.25em;
}


/* Basket / Cart */

.cart-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cart-col {
}

.cart-container {

	margin-left: auto;
	margin-right: 0;
	padding: 1em;

	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;

	background-color: #e9f2ed;
	border-radius: 0.5em;

	/*DEV*/
	/*background-color: lightpink;*/
}

.cart {

	background-image: url('/img/shopping-cart.png');
	background-repeat: no-repeat;
	background-size: 4em 4em;

	width: 4em;
	height: 4em;

	display: flex;
	justify-content: center;
	align-items: center;

}

a.cart-link {
	text-decoration: none;
}

.cart-flex:hover {
	background-color: lightblue;
}

.cart-total {
	/*DEV*/
	/*background-color: lightseagreen;*/
}

p.cart-number {
	color: darkred;
	font-weight: bold;
	font-size: large;
	text-align: center;
}

p.cart-amount {
	color: darkred;
	font-weight: bold;
	font-size: large;
	text-align: right;
	margin:0;
}

/* Footer */

footer {
	background-color: #eee;
	padding:0;
	margin-bottom:1em;
}

.footer-flex{
	display:flex;
}

.footer-col {
	flex: 1;
	padding: 1em;
}

.footer-col:last-child {
	text-align: right;
}

.footer-col ul {
	padding:0;
	margin:0;
	list-style: none;
}

/**************************/
/*** MAIN DONATION PAGE ***/
/**************************/

/* Layout containers and grids */

.page-container {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;

	/*DEV*/
	/*background-color: #f5f5dc;*/
}

.section-container {
	background-color: ivory;
	border: darkgrey 1px solid;
	border-radius: 0.25em;
	margin: 1em 0;
	padding: 1em;
}

.flex-grid-wrap {

	border-radius: 0.25em;

	margin-bottom: 5px;
	border: lightgrey 1px solid;

	/*DEV*/
	/*border: deeppink solid medium;*/
}

.flex-grid-wrap:hover {

	border: blue 1px solid;
	background-color: lightcyan;

	/*DEV*/
	/*background-color: blue;*/
}

.flex-grid {
	display:flex;
	align-items: baseline;
}

.mycol {

	margin: 5px 0;
	padding: 5px;
	font-size: 12pt;

	/*DEV*/
	/*background-color: azure;*/
	/*border: black solid thin;*/

}

.col-label {
	flex: 1;
}

.col-dontyp {
	flex: 0;
}

.col-quantity{
	flex: 0;
	padding:0;

	/*DEV*/
	/*background-color: lightgrey;*/
	/*padding: 0 .5em 0 .5em;*/
}

.col-amount{
	flex: 0;
	padding:0;

	/*DEV*/
	/*background-color: lightseagreen;*/
	/*padding: 0 .5em 0 .5em;*/
}

.qty-amount-group {
	display: flex;

	/*DEV*/
	/*background-color: purple;*/
}



.error-container {
	background-color: yellow;
	padding: 0.5em;
	margin: 0;
	border-radius: 0.25em;
	border: red 1px solid;
}

.form-row {
	margin:0;
	/*DEV*/
	/*background-color: lightgreen;*/
}

/* Input elements */

input.member-code {

	width: 6em;
	margin: 0 0.25em;
	padding: 0.25em;
	background-color: var(--input-color);
	border: lightgrey solid thin;
	text-align: right;

	display: table-cell;
	vertical-align: middle;

}

input.remarks {

	width: 23em;
	margin: 0 0.25em;
	padding: 0.25em;
	background-color: var(--input-color);
	border: lightgrey solid thin;
	text-align: left;

	display: table-cell;
	vertical-align: middle;

}

select.subdontyp-selector-simple {
	width: 24em;
}

select.subdontyp-selector-with-qty {
	width: 15em;
}

input.donation-amount {

	display: table-cell;
	vertical-align: middle;

	width: 6em;
	margin: 0 0.25em;
	padding: 0.25em;
	background-color: var(--input-color);
		border: lightgrey solid thin;
	text-align: right;
}

input.donation-quantity {

	width: 6em;
	margin: 0 0.25em;
	padding: 0.25em;
	border: lightgrey solid thin;
	text-align: right;
	background-color: var(--input-color);

	/*DEV*/
	/*background-color: lightsalmon;*/
}

input.donation-total {

	font-weight: bold;

	display: table-cell;
	vertical-align: middle;

	width: 6em;
	margin: 0 0.25em;
	padding: 0.25em;
	border: lightgrey solid thin;
	text-align: right;

	/*DEV*/
	/*background-color: lightgreen;*/
}

input.calculated-field {
	background-color: #ddd;
}

/* Other Elements */

span.currency-symbol {

	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: large;
	padding: 0;

	/*DEV*/
	/*background-color: red;*/
	/*border: black thin solid;*/
}

div.donation-amount-group {
	display:table;
}

.btn {
	margin-bottom: 0;
}

.btn-default {
	/* removed in Bootstrap upgrade, so adding back */
	background-color: #fff;
	border-color: #ccc;
}

.btn-block {
	/* removed in Bootstrap upgrade, so adding back */
	width:100%;
}

.total-label {
	font-weight: bold;
}

/* styles applied dynamically */

.hidden {
	display: none;
}

/* Remove spinner buttons from input fields*/

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:0;
}

/* Firefox */

input[type=number] {
	-moz-appearance: textfield;
}

/*************************/
/*** CONFIRMATION PAGE ***/
/*************************/

.receipt-container {
	background-color: ivory;
	border: darkgrey 1px solid;
	border-radius: 0.25em;
	margin: 1em 0;
	padding: 1em;
}

.receipt-title {
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
}

/* Receipt Tables */

.receipt-table {
	border: black 1px solid;
	margin-bottom: 2em;
	width: 100%;
}

.receipt-table td {
	border: black 1px solid;
	padding: 0.5em;
}

.receipt-table td:nth-child(2) {
	text-align: right;
	width: 20%;
}

.receipt-table tr:first-child  {
	background-color: khaki;
}

.receipt-table tr:last-child {
	font-weight: bold;
}

/* Grand Total table */

.grand-total-container {

	background-color: ivory;
	border: darkgrey 1px solid;
	border-radius: 0.25em;
	margin: 1em 0;
	padding: 1em;

}

.grand-total-table {
	border: black 1px solid;
	width: 100%;
}

.grand-total-table td {
	border: black 1px solid;
	padding: 0.5em;
	background-color: gold;
	font-weight: bold;
}

.grand-total-table td:nth-child(2) {
	text-align: right;
	width: 20%;
}

.button-flex {
	display:flex;
}

.button-col {
	flex: 1;
	margin: 1em;
}

/******************************/
/*** STRIPE PAYMENT ***/
/******************************/

input.cardholder {
	width: 23em;
	margin: 0 0.25em;
	padding: 0.25em;
	background-color: var(--input-color);
	border: lightgrey solid thin;
	text-align: left;

	display: table-cell;
	vertical-align: middle;
}

#pii {
	display:none;
}

.loading {
	//background-color: yellow;
}

.processing {
	background-color: grey;
}

.error {
	background-color: lightcoral;
}

.success {
	background-color: lightgreen;
}


#confirmation .status.success,
#confirmation .status.processing,
#confirmation .status.receiver,
#confirmation .status.error {
	display: none;
}

#card-element {
	border: 1px solid lightgrey;
	border-radius: 0.25em;
	padding: 0.5em;
}

.element-errors {
	color:red;
}


/******************************/
/*** ZAKAAT CALCULATOR PAGE ***/
/******************************/

.zakaatInput {
	width: 100px;
	background-color: #ffff00;
}

.zakaatTable td {
	border: solid thin #204d74;
	padding: 5px;
	vertical-align: top;
}

.zakaatTableResults td {
	border: solid thin #204d74;
	padding: 5px;
	vertical-align: top;
}

.zakaatTable td:nth-child(2) {
	width: 175px;
}

.zakaatTableResults td:nth-child(3) {
	text-align: right;
}

.zakaatTableResults td:nth-child(4) {
	text-align: right;
}

.zakaatTableResults td:nth-child(6) {
	text-align: right;
}

.zakaatTableResults td:nth-child(5) {
	text-align: center;
}

.zakaatTable thead {
	font-weight: bold;
}

.zakaatTableResults thead {
	font-weight: bold;
}

.no-space-after {
	margin-bottom: 0;
}

.finalResult {
	background-color: #dff0d8;
}

.zakaatCalculatorInput {
	width: 100%;
}

/*********************/
/*** MEDIA QUERIES ***/
/*********************/

@media (min-width: 800px) { /* applies to any width greater than this */

	.page-container {
		width: 760px; /* 95% */
	}

}

@media (max-width: 800px) { /* applies to any width below this */

	.flex-grid {
		display: block;
	}

	.donation-amount-group {
		width: 100%;
	}

	input.member-code, input.remarks, input.cardholder {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	input.donation-amount,
	input.donation-quantity,
	input.donation-total {
		width: 100%;
		margin: 0;
		text-align: left;
	}

	select.subdontyp-selector-simple,
	select.subdontyp-selector-with-qty {
		width: 100%;
	}

	.qty-amount-group {
		display: table;
		padding: 1em;
		margin: 1em;
	}

	.qty-amount-group .col-quantity {
		display: table-cell;
		width: 40%;
	}

	.qty-amount-group .col-amount {
		display: table-cell;
		width: 40%;
	}

	.button-flex {
		display: block;
	}

}


@media (max-width: 420px) { /* applies to any width below this */

	.page-container {
		width: 98%;
	}

	.header-flex {
		display: block;
	}

}

@media (max-width: 600px) { /* applies to any width below this */

	.footer-flex {
		display: block;
		text-align: center;
	}

	.footer-col:last-child {
		text-align: center;
	}

}