// LaterPay contribution elements

.lp-button-wrapper {
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-box-pack: center;
}

.lp-button {
	margin-top: 0.5em;
	cursor: pointer;
	color: rgb(255, 255, 255);
	background-color: #01a99d;
	border-radius: 8px;
	padding: 0 8px;
}

.lp-link {
	text-decoration: none;
	padding: 13px 18px 13px 40px;
	font-weight: 600;
	font-size: 16px;
}


.lp-dialog-wrapper {
	z-index: 2;
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;

	.lp-dialog {
		background: rgb(255, 255, 255);
		border-radius: 8px;
		box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px -1px;
		box-sizing: border-box;
		color: rgb(34, 34, 34);
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		line-height: 1.2;
		margin: 1em auto;
		max-width: calc(448px);
		padding: 0;
		text-align: center;
		text-decoration: none;
		text-shadow: none;
		text-transform: none;
	}

	.lp-header-wrapper {
		border-radius: 8px 15px 0px 0px;
		padding-bottom: calc(10.5px);
		box-sizing: inherit;
		font-family: inherit;
		color: rgb(34,34,34);
		background-color: #fff;

		.lp-header-padding {
			background-color: transparent;
			max-width: 100%;
			height: auto;
			padding: calc(10.5px) calc(10.5px) 0;
			font-weight: normal;
			margin-left: auto;
			margin-right: auto;
			box-sizing: inherit;
			font-family: inherit;
		}

		.lp-header-text {
			font-size: calc(26.25px);
			font-weight: 600;
			letter-spacing: -.015em;
			line-height: 1.4;
			padding: 32px 21px 0;
			box-sizing: inherit;
			font-family: inherit;
		}
	}

	.lp-body-wrapper {
		.lp-amount-text {
			display: block;
			font-size: 17px;
			color: #888;
			font-weight: 600;
			letter-spacing: 0.15px;
			margin: 0 0 30px 0;
		}

		.lp-amount-presets-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			max-width: 320px;
			margin: 0 auto;

			.lp-amount-presets {
				border: thin solid rgb(238, 239, 238);
				border-radius: 8px;

				.lp-amount-preset-wrapper {
					cursor: pointer;
					box-sizing: border-box;
					display: block;
					float: left;
					padding: 0 5px;

					&:first-child, &:last-child {
						padding: 0;
					}

					.lp-amount-preset-button {
						text-align: center;
						line-height: 50px;
						width: 55px;
						font-size: 16px;
						border-radius: 8px;
						color: rgb(93, 93, 93);
					}

					.lp-amount-preset-button-selected {
						background-color: rgb(1, 169, 157);
						font-weight: 600;
						color: rgb(255, 255, 255);
					}
				}
			}
		}

		.lp-custom-amount-wrapper {

			.lp-custom-amount {
				display: inline-block;
				font-size: 16px;
				margin: 0.3em auto;
				float: none;
				left: 0;
				right: 0;

				.lp-custom-input-wrapper {
					position: relative;

					i {
						position: absolute;
						display: block;
						top: 11px;
						pointer-events: none;
						width: 30px;
						text-align: center;
						font-style: normal;
						left: 5px;
					}
				}

				.lp-custom-amount-label {
					width: 100%;
					line-height: inherit;
					margin: auto;
					padding: 4px 6px;
					box-sizing: border-box;
					color: rgb(74, 74, 74);
					vertical-align: middle;
					font-weight: 700;
					font-size: 0.95em;
					display: block;
					cursor: default;

					.lp-custom-amount-text {
						font-size: 14px;
						margin-top: 2px;
						margin-bottom: 5px;
						color: #888;
						font-weight: 600;
						letter-spacing: 0.15px;
					}
				}

				.lp-custom-amount-input {
					font-family: inherit;
					line-height: inherit;
					font-size: 16px;
					width: 120px;
					text-align:left;
					border: thin solid rgb(238, 239, 238);
					border-radius: 8px;
					padding-left: 30px;
					height: 40px;
				}
			}
		}

		.lp-dialog-button-wrapper {
			display: inline-flex;
			margin-top: 10px;
		}
	}

	.lp-powered-by {
		margin-top: 30px;
		padding-bottom: 18px;
		color: rgb(65, 65, 65);
		font-size: 14px;
		text-align: center;
		vertical-align: top;

		.lp-powered-by-link {
			color: inherit;
			font-family: inherit;
			position: relative;
			font-size: 18px;
			box-shadow: none;
			outline: 0 none;
			vertical-align: top;
			text-decoration: none !important;
		}
	}
}