:root {
	--ma-green: #1F7F5C;
	--ma-red: #E56C69;
	--ma-yellow: #DBA571;
	--ma-blue: #5A9AA8;
	--ma-purple: #6A5A8C;
	--ma-lilac: #8C5D79;
	--ma-orange: #D3885A;
	--ma-bg: #D3CCB5;
	--ma-grey: #D4D2D2;
	--ma-green-alt: #19664A;
	--ma-red-alt: #B75654;
	--ma-yellow-alt: #AF845A;
	--ma-blue-alt: #3E6D78;
	--ma-purple-alt: #554870;
	--ma-lilac-alt: #704A61;
	--ma-orange-alt: #AA6E48;
	--ma-bg-alt: #ECE9E2;
	--ma-grey-alt: #E9E9E9;
}

body,
html {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
}

body {
	background: url(../img/fractal_bg_full.png), linear-gradient(0deg, var(--primary, #5a9aa8) 18.11%, var(--primary, #5a9aa8) 97.6%);
	background-blend-mode: multiply;
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
}

body>.main {
	margin: 79px 8vw 0;
	background: #FFF;
}

.main>.heading {
	padding: 44px 0;
}

.heading .logo {
	max-width: 220px;
	margin: 0 auto;
	text-align: center;
	/*	position: absolute;
	top: 36px;*/
	left: 0;
	right: 0;
}

.heading .logo img {
	/*width: 100%;*/
	max-width: 220px;
	max-height: 80px;
}

section:not(.heading) {
	margin: 0 auto;
}

section.hero {
	height: 280px;
	border-radius: 8px;
	background-image: var(--hero);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
}

.welcome {
	text-align: center;
}

.welcome>h1 {
	font-weight: 300;
	margin: 0;
	padding: 0;
	font-size: 36px;
}

.welcome>h1>span {
	font-weight: 400;
}

.welcome>p {
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	max-width: 475px;
	margin: 32px auto 44px auto;
}

.form {
	background: #F4F4F4;
	border-radius: 20px;
}

.form>div {
	padding: 23px 44px 0px 44px;
}

.form>div.highlight {
	background: #578794;
	box-shadow: 0px 0px 12px rgb(56 104 117 / 60%);
	border-radius: 8px;
	margin: 23px 20px;
	padding: 23px 24px;
}

.form>div.error>h2 {
	color: #C1211D;
}

.form>div>h2 {
	font-size: 24px;
	font-weight: 400;
	padding: 0;
	margin: 0;
	line-height: 24px;
	margin-bottom: 20px;
	color: #386875;
}

.form>div.highlight>h2 {
	color: #FFF;
}

.form>div.highlight.error {
	background: #E56C69;
	box-shadow: 0px 0px 12px rgba(150, 10, 7, 0.58);
}

.form>div.highlight h2>i {
	float: right;
	line-height: 24px;
	position: relative;
	top: 2px;
	color: #8BAFB9;
}

.form>div.highlight.error h2>i {
	color: #FFF;
}

.form>div.highlight label {
	color: #FFF;
}

.form .field_wrapper {
	display: grid;
}

/* configure specific grids */
.form .name .field_wrapper {
	/*	grid-template-columns: auto 31px 140px;*/
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;

	/*& .surname {
		grid-column-start: 1;
	}*/
}

.form .location .inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}

.form .field {
	height: 85px;
}

.form .field label {
	font-weight: 600;
	font-size: 14px;
	color: #578794;
	display: block;
}

.form .field.error label {
	color: var(--ma-red-alt);
}


.form input[type="text"],
.form input[type="date"] {
	background: #FFFFFF;
	border: 2px solid #96B3BB;
	border-radius: 4px;
	height: 44px;
	line-height: 44px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	padding: 0 12px;
	margin: 8px 0 0 0;
	width: calc(100%);
	outline: none;
}

input[type="date"] {
	text-align: left;
	padding: 0 4px;
	display: block;
	max-width: none !important;
}

.form input[type="text"]:focus,
.form input[type="date"]:focus {
	box-shadow: 0px 0px 8px #8BAFB9;
	border: 2px solid #96B3BB;
}

.form select {
	background: #FFFFFF;
	border: 2px solid #96B3BB;
	border-radius: 4px;
	height: 44px;
	line-height: 44px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	padding: 0 12px;
	margin: 8px 0 0 0;
	outline: none;
	width: calc(100%);
}

.form select:focus {
	box-shadow: 0px 0px 8px #8BAFB9;
	border: 2px solid #96B3BB;
}

.form .field.error input[type="text"],
.form input[type="text"].error {
	box-shadow: 0px 0px 8px var(--ma-red-alt);
	border: 2px solid var(--ma-red-alt);
}

.footer {
	padding: 40px 0 80px 0;
	text-align: center;
}

.footer>a {
	max-width: 362px;
	height: 48px;
	background: #1F7F5C;
	box-shadow: 0px 25px 35px -14px rgb(39 142 105 / 47%);
	border-radius: 8px;
	display: block;
	margin: 0 auto;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	color: #FFF;
	line-height: 48px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.footer>a>span.txt {
	z-index: 1;
	position: relative;
}

.footer>a>span.bg {
	position: absolute;
	width: var(--progress, 0%);
	height: 5px;
	bottom: 0px;
	left: 0;
	background: rgba(255, 255, 255, 0.5);
	transition: 0.1s width linear;
	display: none;
}

.footer>a:hover {
	background-color: #19664A;
}

#main {
	max-width: 1000px;
	margin: 40px auto 0 auto;
	background: #FFF;
	padding: 20px;

	& .hero {
		position: relative;

		&.short {
			background: var(--ma-bg-alt);
			height: 100px;
			display: grid;
			grid-template-columns: auto 140px;
			align-items: center;

			& .name {
				position: relative;
				bottom: inherit;
				left: inherit;
				display: grid;
				line-height: 67px;
				margin-left: 18px;
			}

			& .event-price {
				position: relative;
				bottom: inherit;
				right: inherit;
				bottom: inherit;
				right: inherit;
				align-self: center;
				margin-right: 0px;
			}
		}

		& .name {
			position: absolute;
			mix-blend-mode: difference;
			color: white;
			bottom: 23px;
			font-size: 36px;
			font-weight: lighter;
			left: 16px;
		}

		& .event-price {
			position: absolute;
			bottom: 23px;
			right: 16px;
			background: #ECE9E2;
			display: grid;
			padding: 8px;
			border-radius: 10px;

			& .text {
				display: block;
				font-family: "Montserrat", sans-serif;
				font-weight: 700;
				font-size: 14px;
				text-transform: uppercase;
				text-align: center;
			}

			& .price {
				font-family: "Montserrat", sans-serif;
				font-weight: 700;
				font-size: 28px;
				text-align: center;
				color: #960A07;
			}
		}
	}

	& .school-logo {
		background: var(--logo);
		width: 420px;
		height: 130px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50%;
		margin: 24px auto;
	}

	&>.name {
		text-align: center;
		color: #000;
		font-size: 36px;
		font-weight: 300;
		margin-top: 24px;
	}

	&>.event-details {
		text-align: center;
		max-width: 600px;
		margin: 0px auto;
		padding: 20px;

		& > div > i {
			margin-right: 6px;
			width: 18px;
			text-align: center;
		}
	}

	&>.login {

		background: #ECE9E2;
		padding: 20px 20px 40px 20px;
		border-radius: 10px;
		max-width: 600px;
		margin: 20px auto;

		&>h2 {
			font-family: "Montserrat", sans-serif;
			font-weight: 600;
			color: #578794;
			font-size: 16px;
			line-height: 100%;
			text-align: center;
			padding: 0;
			margin: 0 0 20px 0;
		}

		&>a {
			text-decoration: none;
			background: var(--ma-green);
			color: #FFF;
			padding: 0 20px;
			border-radius: 8px;
			line-height: 44px;
			display: block;
			width: 260px;
			text-align: center;
			margin: 0 auto;
			font-size: 16px;
			font-weight: 600;

			&:hover {
				background: var(--ma-green-alt);
			}

		}

		&>.login-form {

			&.show-request {
				& .request {
					display: grid;
				}

				& .verify {
					display: none;
				}
			}

			&.show-verify {
				& .request {
					display: none;
				}

				& .verify {
					display: grid;
				}
			}

			& .request,
			& .verify {

				display: grid;
				grid-template-columns: auto 160px;
				grid-gap: 14px;

				&.show {
					display: grid;
				}

				& .wrapper {
					position: relative;

					& i {
						color: #578794;
						position: absolute;
						height: 44px;
						line-height: 44px;
						width: 33px;
						text-align: center;
					}
				}

				& label {
					font-weight: 600;
					font-size: 14px;
					color: #578794;
					display: block;
				}

				& input {

					background: transparent;
					outline: none;
					border: none;
					font-size: 16px;
					color: #343434;
					height: 44px;
					line-height: 44px;
					padding: 0 12px 0 35px;
					width: calc(100% - 0px);
					border-bottom: 1px solid #434343;
					font-family: "Montserrat", sans-serif;

					&:hover {
						border-bottom: 1px solid #5a9aa8;
					}

					&:focus {
						border-bottom: 2px solid #578794;
					}
				}

				& a.request-otp,
				& a.verify-otp {
					background-color: var(--ma-blue);
					color: #FFF;
					text-decoration: none;
					line-height: 33px;
					height: 33px;
					text-align: center;
					font-weight: 600;
					display: grid;
					align-self: end;
					font-size: 14px;
					border-radius: 6px;
					margin-bottom: 8px;

					&:hover {
						background-color: var(--ma-blue-alt);
					}
				}

				& a.forgot {
					position: absolute;
					bottom: -20px;
					width: 100%;
					right: 0;
					text-align: right;
					font-size: 13px;
					color: #434343;

					&:hover {
						color: #000;
					}
				}

				& a[data-busy="1"] {
					background-image: url(https://admin.martialytics.com/img/loaders/white_256@2x.gif);
					background-size: 18px;
					background-repeat: no-repeat;
					background-position: 50%;
					color: transparent !important;
				}
			}

			& .verify {

				& a.resend-otp {
					text-align: right;
					font-size: 13px;
					color: #434343;

					&:hover {
						color: #000;
					}
				}
			}
		}

	}

	&>.form {
		margin: 0 0 34px 0;
	}

	&>.products {

		margin: 0 0 34px 0;
		padding: 0 0 23px 0;

		&>h2 {
			font-size: 24px;
			font-weight: 400;
			padding: 0;
			margin: 0;
			line-height: 24px;
			margin-bottom: 20px;
			color: #386875;
			padding: 23px 44px 0 44px;
		}

		&>.checkout {

			& h2 {
				display: grid;
				grid-template-columns: auto 44px;
			}

			& .header {
				display: grid;
				grid-template-columns: auto 44px 100px;
				line-height: 33px;
				padding: 0 64px 0 10px;
				margin-bottom: 0px;
				border-radius: 0px;
				font-size: 12px;
				font-weight: 600;
				border-bottom: 1px solid #cecece;
				grid-gap: 10px;

				& .qty {
					text-align: center;
				}
			}

			& .list {

				padding: 0px;

				& .empty {
					line-height: 80px;
					text-align: center;
					text-transform: uppercase;
					font-size: 14px;
					font-weight: 400;
					color: #666;
				}

				& .line {
					display: grid;
					grid-template-columns: auto 44px 100px 44px;
					line-height: 44px;
					padding: 0 10px;
					margin: 5px 0;
					border-radius: 4px;

					&:hover {
						background-color: #FFF;
					}

					& .qty {
						text-align: center;
					}

					& .remove {
						align-items: center;
						align-self: center;
						width: 33px;
						height: 33px;
						line-height: 33px;
						background: var(--ma-red);
						color: #FFF;
						justify-content: center;
						display: grid;
						text-decoration: none;
						border-radius: 100%;

						&:hover {
							background: var(--ma-red-alt);
						}
					}

					&.line-total {
						border-top: 1px solid #cecece;
						pointer-events: none;
						font-size: 12px;
						font-weight: 600;
						text-transform: uppercase;
					}
				}
			}
		}

		&>.list {
			display: grid;
			grid-template-columns: repeat(2, calc(50% - 10px));
			grid-gap: 20px;
			padding: 0 44px;

			&>.product {

				background-color: #ece9e2;
				border-radius: 8px;
				padding: 14px;

				&:hover {}

				&>h2 {
					margin: 0;
					padding: 0;
					font-weight: 600;
					font-size: 14px;
					color: #578794;
					display: block;
					text-transform: uppercase;
				}

				& .inner {

					display: grid;
					grid-template-columns: auto 70px;
					align-items: center;
					grid-gap: 14px;
					margin-top: 8px;

					& select {
						margin: 0;
						/*height: 33px;
						outline: none;
						box-shadow: none;
						border:none;
						border-radius: 6px;
						padding: 0 8px;
						box-shadow: 0px 0px 0px 1px var(--ma-bg);
						cursor: pointer;
						font-family: "Montserrat", sans-serif;
						font-weight: 600;
						font-size: 14px;*/

						/*&:hover {
	                		box-shadow: 0px 0px 0px 2px var(--ma-blue);
	                	}*/
					}

					& .add {

						&>a {
							height: 33px;
							line-height: 33px;
							display: grid;
							background-color: var(--ma-blue);
							color: #FFF;
							text-align: center;
							position: relative;
							align-content: center;
							text-decoration: none;
							border-radius: 10px;
							font-size: 14px;
							width: 55px;
							justify-self: center;

							&:hover {
								background-color: var(--ma-blue-alt);
							}
						}

						&.included {
							&>a {
								display: none;
							}

							&>.wrapper {
								display: grid;
								grid-template-columns: 20px auto 20px;
							}
						}

						&>.wrapper {
							display: none;

							& .less {
								background: #FFF;
								border-radius: 4px 0 0 4px;
								border: 2px solid #96B3BB;
								margin: 0;
								border-right: 0;
								line-height: 40px;
								text-align: center;
							}

							& .total {

								& input {
									margin: 0;
									border-radius: 0;
									border-left: 0;
									border-right: 0;
									text-align: center;
									padding: 0;
								}
							}

							& .more {
								background: #FFF;
								border-radius: 0 4px 4px 0;
								border: 2px solid #96B3BB;
								margin: 0;
								border-left: 0;
								line-height: 40px;
								text-align: center;
							}
						}
					}
				}
			}
		}

	}

	&>.waiver {
		margin: 0 0 34px 0;
		padding: 0 0 23px 0;

		&>h2 {
			font-size: 24px;
			font-weight: 400;
			padding: 0;
			margin: 0;
			line-height: 24px;
			margin-bottom: 20px;
			color: #386875;
			padding: 23px 44px 0 44px;
		}

		& .item {
			height: 84px;
			background: #D0DBDE;
			border-radius: 8px;
			padding: 0 24px;
			font-size: 18px;
			font-weight: 600;
			color: #386875;
			max-width: 338px;
			display: grid;
			grid-template-columns: auto;
			grid-gap: 19px;
			align-content: center;
			cursor: pointer;
			user-select: none;
			margin: 23px 44px;
			position: relative;

			&.error {
				background: var(--ma-red);
				color: #FFF;

				&>i {
					color: #FFF;
				}
			}

			&:hover {
				background: #88AFB9;
				color: #175265;

				&>i {
					color: #D0DBDE;
				}
			}

			&.signed {
				background: #AADCCA;
				color: #1F7F5C;
				pointer-events: none;

				&>i.fa-signature {
					display: none;
				}

				&>i.fa-check {
					display: block;
					color: #1F7F5C;
				}
			}

			&>p {
				margin: 0;
				padding: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: calc(100% - 40px);
			}

			&>i {
				align-self: center;
				font-size: 35px;
				position: absolute;
				right: 24px;
				color: #8BAFB9;

				&.fa-signature {
					display: block;
				}

				&.fa-check {
					display: none;
				}
			}
		}
	}

	&>.payment {
		margin: 0 0 34px 0;
		padding: 0 0 23px 0;
		background: #578794;

		&>h2 {
			font-size: 24px;
			font-weight: 400;
			padding: 0;
			margin: 0;
			line-height: 24px;
			margin-bottom: 20px;
			color: #FFF;
			padding: 23px 44px 0 44px;
		}
	}
}


/* stripe */
#payment-element {
	background: #FFFFFF;
	border: 2px solid #96B3BB;
	border-radius: 4px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	padding: 12px;
	margin: 23px 44px;
	width: calc(100% - 116px);
	outline: none;
}

#waiver_modal {
	padding: 32px 48px 18px 48px;
	background: #FFF;
	box-shadow: 0px 34px 82px -1px rgb(0 0 0 / 25%);
	border-radius: 20px;
	max-width: 1080px;
	width: calc(80vw - 96px);
	margin: 0px auto;
	min-height: 600px;
	position: absolute;
	z-index: 10;
	top: 40px;
	display: none;
	left: 0;
	right: 0;


	& .heading {
		display: grid;
		grid-template-columns: auto 80px;

		& h1 {
			padding: 0;
			font-family: 'Montserrat';
			font-style: normal;
			font-weight: 400;
			font-size: 24px;
			line-height: 29px;
			margin: 0;
			color: #386875;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			&>span {
				font-weight: 600;
			}
		}

		& a {
			text-decoration: none;
			text-align: right;
			font-family: 'Montserrat';
			font-style: normal;
			font-weight: 600;
			font-size: 18px;
			line-height: 29px;
			color: #386875;
			color: var(--ma-red-alt);

			&:hover {
				color: var(--ma-red);
			}
		}
	}

	& .content {
		max-height: calc(100vh - 488px);
		overflow: auto;
		margin-top: 13px;
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
		color: #386875;
		background: #F4F4F4;
		border-radius: 8px;
		padding: 18px 26px;
	}

	& .signature_footer {
		text-align: center;

		& a {
			display: inline-block;
			background: #1F7F5C;
			border-radius: 8px;
			text-decoration: none;
			color: #FFF;
			height: 48px;
			line-height: 48px;
			padding: 0 110px;

			&:hover {
				background-color: #19664A;
			}
		}
	}
}

#signature_wrapper {
	max-width: 592px;
	height: 200px;
	background: #f4f4f4;
	border-radius: 8px;
	margin: 16px auto;
	position: relative;

	&>p {
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 500;
		position: absolute;
		top: 18px;
		left: 26px;
		font-size: 24px;
		margin: 0;
		color: #386875;
		pointer-events: none;
	}

	&>i {
		position: absolute;
		font-size: 96px;
		color: #8BAFB9;
		opacity: 0.4;
		right: 28px;
		top: 27px;
		line-height: 96px;
		pointer-events: none;
	}

	&.error {

		& .signature_pad {
			box-shadow: 0px 0px 5px 0px var(--ma-red-alt);
		}
	}

	& .signature_pad {
		max-width: 592px;
		height: 200px;
		margin: 0 auto;

		& canvas {
			width: calc(100%);
			height: 200px;
			margin: 0px 0px;
			border: none;
		}

		& .controls {
			opacity: 0;
			pointer-events: none;
			position: absolute;
			top: 20px;
			right: 20px;
			top: 14px;
			right: 18px;
			transition: 0.2s ease-in-out opacity;
			will-change: opacity;

			&.show {
				opacity: 1;
				pointer-events: auto;
			}

			& a {
				padding: 4px 8px;
				font-size: 14px;
				color: #fff;
				display: block;
				text-decoration: none;
				background: var(--ma-red);
				border-radius: 4px;

				&:hover {
					background-color: var(--ma-red-alt);
				}
			}
		}
	}
}

#account-picker {

	display: none;
	position: relative;

	& .selector {

		&>.selected.student {
			grid-template-columns: 44px auto 44px;
			background: #ffffff;
			border-radius: 8px;
			padding: 8px 0 8px 8px;
			cursor: pointer;
			width: calc(100% - 8px);

			& .arrow {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		& .wrapper {
			display: none;
			background: #FFF;
			border-radius: 8px;
			position: absolute;
			width: calc(100%);
			top: 0px;
			padding: 0px;
			box-shadow: 0px 18px 28px -24px rgba(0, 0, 0, 0.5);
			overflow: hidden;

			&.show {
				display: block;
			}

			& .list {
				max-height: calc((44px + 16px) * 4);
				overflow: auto;

				& .student.selected {
					background: var(--ma-blue);
					color: #FFF;

					& .intials .pi {
						border-color: #FFF;
					}
				}
			}

			& .logout {

				border-top: 2px solid var(--ma-bg);

				&>a {
					display: block;
					line-height: 33px;
					text-align: center;
					padding: 0 12px;
					text-decoration: none;
					width: 120px;
					margin: 9px auto;
					background: var(--ma-lilac);
					color: #FFF;
					border-radius: 6px;

					&:hover {
						background: var(--ma-lilac-alt);
					}
				}
			}
		}

		& .student {
			display: grid;
			grid-template-columns: 44px auto;
			line-height: 44px;
			grid-gap: 14px;
			font-family: "Montserrat", sans-serif;
			margin-bottom: 0px;
			padding: 8px;
			cursor: pointer;

			&:hover {
				background: var(--ma-blue);
				color: #FFF;

				& .initials .pi {
					border-color: #FFF;
				}
			}

			& .initials {
				position: relative;
				text-align: center;
				width: 44px;
				height: 44px;

				& .pi {
					width: 40px;
					height: 40px;
					background: var(--pi);
					background-position: 50%;
					background-size: contain;
					position: absolute;
					border-radius: 100%;
					border: 2px solid #434343;
					top: 0;
					left: 0;
				}
			}

			& .name {
				&>span {
					font-weight: 600;
				}
			}
		}
	}
}

#event-meta-data {
	display: none;
}


#success_modal {
	padding: 32px 48px 18px 48px;
	background: var(--ma-green);
	box-shadow: 0px 34px 82px -1px rgb(50 70 46 / 46%);
	border-radius: 20px;
	max-width: 600px;
	width: calc(80vw - 96px);
	margin: 0px auto;
	min-height: 310px;
	position: fixed;
	z-index: 10;
	top: 60px;
	display: none;
	left: 0;
	right: 0;
	text-align: center;
	color: #FFF;
}

#success_modal>p {
	font-size: 20px;
	/*
This will work really well!
Ben S 2022 
*/

}

#success_modal>i {
	width: 150px;
	height: 150px;
	display: inline-block;
	line-height: 150px;
	border-radius: 100%;
	border: 2px solid #fff;
	font-size: 44px;
	margin: 20px 0;
}

#error_modal {
	padding: 32px 48px 18px 48px;
	background: #fff;
	box-shadow: 0px 34px 82px -1px rgb(50 70 46 / 46%);
	border-radius: 20px;
	max-width: 600px;
	width: calc(80vw - 96px);
	margin: 0px auto;
	min-height: 310px;
	position: fixed;
	z-index: 10;
	top: 60px;
	display: none;
	left: 0;
	right: 0;
	text-align: center;
	color: #FFF;
	grid-template-rows: 34px auto 48px;
	overflow: hidden;
}

#error_modal h2 {
	color: #434343;
	padding: 0;
	margin: 0;
	text-align: left;
}

#error_modal h2 i {
	position: absolute;
	color: var(--ma-orange);
	font-size: 310px;
	top: -30px;
	right: -80px;
	transform: rotate(-12deg);
	opacity: .2;
}

#error_modal p {
	color: #434343;
	font-size: 20px;
	font-weight: 500;
}

#error_modal a {
	max-width: 362px;
	width: 100%;
	height: 48px;
	background: #1F7F5C;
	box-shadow: 0px 25px 35px -14px rgb(39 142 105 / 47%);
	border-radius: 8px;
	display: block;
	margin: 0 auto;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	color: #FFF;
	line-height: 48px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

#error_modal a:hover {
	background: var(--ma-green-alt);
}

html.success #success_modal {
	display: block;
}

html.success #bg_modal {
	display: block !important;
}

html.error #error_modal {
	display: grid;
}

html.error #bg_modal {
	display: block !important;
}

html.success .footer>a {
	pointer-events: none;
	background-image: url(https://services.martialytics.com/assets/images/white_tick32@2x.png);
	background-size: 20px;
	background-position: 50% 60%;
	background-repeat: no-repeat;
	color: transparent;
}

html.success .footer>a>.bg {
	width: calc(100%) !important;
}

html.processing .footer>a {
	pointer-events: none;
	background-image: url(https://services.martialytics.com/assets/images/white_256@2x.gif);
	background-size: 20px;
	background-position: 50% 60%;
	background-repeat: no-repeat;
	color: transparent;
}


#bg_modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.iti {
	display: block !important;
}

/* devices */
@media (max-width: 600px) {
	.form .field_wrapper {
		display: block;
		grid-gap: 0;
	}

	#main {
		& .hero {
			&.short {

				min-height: 100px;
				height: auto;

				& .name {
					font-size: 24px;
					line-height: inherit;
				}
			}
		}

		& > .event-details {
			& .copy {
				text-align: center;
			}

			& > .start-time, & > .location, & > .date {
				text-align: left;
				font-size: 16px;
				line-height: 24px;

				& > i {
					margin-right: 6px;
                    width: 18px;
                    text-align: center;
				}
			}
		}
		& > .login {
			& > h2 {
				font-size: 15px;
				margin: 0 auto 20px auto;
			}
			& > .login-form {
				& .request, & .verify {
					grid-template-columns: auto 100px;
				}
			}
		}

		& .products {
			& > .list {
				grid-template-columns: auto !important;
				padding: 0 12px;
			}

			& > .checkout {
				& > .header {
					padding: 0 37px 0 6px;
					grid-template-columns: auto 33px 80px;
					grid-gap:0px;
				}
				& > .list {
					& > .line {
						grid-template-columns: auto 33px 80px 33px;
						line-height: inherit;                    
						font-size: 13px;
                   		padding: 4px;
						margin: 5px 0;
					}
				}
			}
		}

		& > .payment {
			& > h2 {
				padding: 23px 12px 0 12px;
			}
		}
	}

	#payment-element {
		margin: 23px 12px;
		width: calc(100% - 52px);
	}

	section.hero {
		height: 240px;
	}

	.form>div {
		padding:23px 12px 0px 12px;
	}
}