/* --------------------------------------
/* --      QUIZ BUILDER  NEW-CORE      --
/* -- Currently used only by the A.B.  --
/* -- Framework, eventually also to be --
/* -- used by the ROI Calcualtor, and  --
/* -- any other tool after that.       --
/* -------------------------------------- */

/*------------------------------------------------------------------

    [Table of contents]

	These styles should apply globally to all tools.

    1.0 Global
    	1.1 Spacers
    	1.2 Utility
	2.0 Tools UI
		2.1 Typography
		2.2 Animations
			2.2.1 Keyframes
			2.2.2 Timing
			2.2.3 Delays
			2.2.4 Loading Placeholders
		2.3 Buttons
		2.4 Dividers
		2.5 Borders

------------------------------------------------------------------*/
/*------------------------------------------------------------------

	1.0 Global

------------------------------------------------------------------*/
a {
	color: #008FD3;
}
	/*------------------------------------------------------------------
		1.1 Spacers

		CSS utility classes for working with an 8px "soft" grid
		- 8px represents our base unit of measure
		- The numbers after the dash in the class name represent how much to multiply the base unit by.
	------------------------------------------------------------------*/
	.mx-auto {margin-right: auto !important; margin-left: auto !important;}
	.m-0 {margin: 0 0 !important;}
	.mt-0 {margin-top: 0 !important;}
	.mr-0 {margin-right: 0 !important;}
	.mb-0 {margin-bottom: 0 !important;}
	.ml-0 {margin-left: 0 !important;}
	.mx-0 {margin-right: 0 !important; margin-left: 0 !important;}
	.my-0 {margin-top: 0 !important; margin-bottom: 0 !important;}
	.m-1 {margin: 8px 8px !important;}
	.mt-1 {margin-top: 8px !important;}
	.mr-1 {margin-right: 8px !important;}
	.mb-1 {margin-bottom: 8px !important;}
	.ml-1 {margin-left: 8px !important;}
	.mx-1 {margin-right: 8px !important; margin-left: 8px !important;}
	.my-1 {margin-top: 8px !important; margin-bottom: 8px !important;}
	.m-2 {margin: 16px 16px !important;}
	.mt-2 {margin-top: 16px !important;}
	.mr-2 {margin-right: 16px !important;}
	.mb-2 {margin-bottom: 16px !important;}
	.ml-2 {margin-left: 16px !important;}
	.mx-2 {margin-right: 16px !important; margin-left: 16px !important;}
	.my-2 {margin-top: 16px !important; margin-bottom: 16px !important;}
	.m-3 {margin: 24px 24px !important;}
	.mt-3 {margin-top: 24px !important;}
	.mr-3 {margin-right: 24px !important;}
	.mb-3 {margin-bottom: 24px !important;}
	.ml-3 {margin-left: 24px !important;}
	.mx-3 {margin-right: 24px !important; margin-left: 24px !important;}
	.my-3 {margin-top: 24px !important; margin-bottom: 24px !important;}
	.m-4 {margin: 32px 32px !important;}
	.mt-4 {margin-top: 32px !important;}
	.mr-4 {margin-right: 32px !important;}
	.mb-4 {margin-bottom: 32px !important;}
	.ml-4 {margin-left: 32px !important;}
	.mx-4 {margin-right: 32px !important; margin-left: 32px !important;}
	.my-4 {margin-top: 32px !important; margin-bottom: 32px !important;}
	.m-5 {margin: 40px 40px !important;}
	.mt-5 {margin-top: 40px !important;}
	.mr-5 {margin-right: 40px !important;}
	.mb-5 {margin-bottom: 40px !important;}
	.ml-5 {margin-left: 40px !important;}
	.mx-5 {margin-right: 40px !important; margin-left: 40px !important;}
	.my-5 {margin-top: 40px !important; margin-bottom: 40px !important;}
	.m-6 {margin: 48px 48px !important;}
	.mt-6 {margin-top: 48px !important;}
	.mr-6 {margin-right: 48px !important;}
	.mb-6 {margin-bottom: 48px !important;}
	.ml-6 {margin-left: 48px !important;}
	.mx-6 {margin-right: 48px !important; margin-left: 48px !important;}
	.my-6 {margin-top: 48px !important; margin-bottom: 48px !important;}
	.m-7 {margin: 56px 56px !important;}
	.mt-7 {margin-top: 56px !important;}
	.mr-7 {margin-right: 56px !important;}
	.mb-7 {margin-bottom: 56px !important;}
	.ml-7 {margin-left: 56px !important;}
	.mx-7 {margin-right: 56px !important; margin-left: 56px !important;}
	.my-7 {margin-top: 56px !important; margin-bottom: 56px !important;}
	.m-8 {margin: 64px 64px !important;}
	.mt-8 {margin-top: 64px !important;}
	.mr-8 {margin-right: 64px !important;}
	.mb-8 {margin-bottom: 64px !important;}
	.ml-8 {margin-left: 64px !important;}
	.mx-8 {margin-right: 64px !important; margin-left: 64px !important;}
	.my-8 {margin-top: 64px !important; margin-bottom: 64px !important;}
	.m-9 {margin: 72px 72px !important;}
	.mt-9 {margin-top: 72px !important;}
	.mr-9 {margin-right: 72px !important;}
	.mb-9 {margin-bottom: 72px !important;}
	.ml-9 {margin-left: 72px !important;}
	.mx-9 {margin-right: 72px !important; margin-left: 72px !important;}
	.my-9 {margin-top: 72px !important; margin-bottom: 72px !important;}
	.m-10 {margin: 80px 80px !important;}
	.mt-10 {margin-top: 80px !important;}
	.mr-10 {margin-right: 80px !important;}
	.mb-10 {margin-bottom: 80px !important;}
	.ml-10 {margin-left: 80px !important;}
	.mx-10 {margin-right: 80px !important; margin-left: 80px !important;}
	.my-10 {margin-top: 80px !important; margin-bottom: 80px !important;}
	.m-11 {margin: 88px 88px !important;}
	.mt-11 {margin-top: 88px !important;}
	.mr-11 {margin-right: 88px !important;}
	.mb-11 {margin-bottom: 88px !important;}
	.ml-11 {margin-left: 88px !important;}
	.mx-11 {margin-right: 88px !important; margin-left: 88px !important;}
	.my-11 {margin-top: 88px !important; margin-bottom: 88px !important;}
	.m-12 {margin: 96px 96px !important;}
	.mt-12 {margin-top: 96px !important;}
	.mr-12 {margin-right: 96px !important;}
	.mb-12 {margin-bottom: 96px !important;}
	.ml-12 {margin-left: 96px !important;}
	.mx-12 {margin-right: 96px !important; margin-left: 96px !important;}
	.my-12 {margin-top: 96px !important; margin-bottom: 96px !important;}
	.m-13 {margin: 104px 104px !important;}
	.mt-13 {margin-top: 104px !important;}
	.mr-13 {margin-right: 104px !important;}
	.mb-13 {margin-bottom: 104px !important;}
	.ml-13 {margin-left: 104px !important;}
	.mx-13 {margin-right: 104px !important; margin-left: 104px !important;}
	.my-13 {margin-top: 104px !important; margin-bottom: 104px !important;}
	.m-14 {margin: 112px 112px !important;}
	.mt-14 {margin-top: 112px !important;}
	.mr-14 {margin-right: 112px !important;}
	.mb-14 {margin-bottom: 112px !important;}
	.ml-14 {margin-left: 112px !important;}
	.mx-14 {margin-right: 112px !important; margin-left: 112px !important;}
	.my-14 {margin-top: 112px !important; margin-bottom: 112px !important;}
	.p-0 {padding: 0 0 !important;}
	.pt-0 {padding-top: 0 !important;}
	.pr-0 {padding-right: 0 !important;}
	.pb-0 {padding-bottom: 0 !important;}
	.pl-0 {padding-left: 0 !important;}
	.px-0 {padding-right: 0 !important; padding-left: 0 !important;}
	.py-0 {padding-top: 0 !important; padding-bottom: 0 !important;}
	.p-1 {padding: 8px 8px !important;}
	.pt-1 {padding-top: 8px !important;}
	.pr-1 {padding-right: 8px !important;}
	.pb-1 {padding-bottom: 8px !important;}
	.pl-1 {padding-left: 8px !important;}
	.px-1 {padding-right: 8px !important; padding-left: 8px !important;}
	.py-1 {padding-top: 8px !important; padding-bottom: 8px !important;}
	.p-2 {padding: 16px 16px !important;}
	.pt-2 {padding-top: 16px !important;}
	.pr-2 {padding-right: 16px !important;}
	.pb-2 {padding-bottom: 16px !important;}
	.pl-2 {padding-left: 16px !important;}
	.px-2 {padding-right: 16px !important; padding-left: 16px !important;}
	.py-2 {padding-top: 16px !important; padding-bottom: 16px !important;}
	.p-3 {padding: 24px 24px !important;}
	.pt-3 {padding-top: 24px !important;}
	.pr-3 {padding-right: 24px !important;}
	.pb-3 {padding-bottom: 24px !important;}
	.pl-3 {padding-left: 24px !important;}
	.px-3 {padding-right: 24px !important; padding-left: 24px !important;}
	.py-3 {padding-top: 24px !important; padding-bottom: 24px !important;}
	.p-4 {padding: 32px 32px !important;}
	.pt-4 {padding-top: 32px !important;}
	.pr-4 {padding-right: 32px !important;}
	.pb-4 {padding-bottom: 32px !important;}
	.pl-4 {padding-left: 32px !important;}
	.px-4 {padding-right: 32px !important; padding-left: 32px !important;}
	.py-4 {padding-top: 32px !important; padding-bottom: 32px !important;}
	.p-5 {padding: 40px 40px !important;}
	.pt-5 {padding-top: 40px !important;}
	.pr-5 {padding-right: 40px !important;}
	.pb-5 {padding-bottom: 40px !important;}
	.pl-5 {padding-left: 40px !important;}
	.px-5 {padding-right: 40px !important; padding-left: 40px !important;}
	.py-5 {padding-top: 40px !important; padding-bottom: 40px !important;}
	.p-6 {padding: 48px 48px !important;}
	.pt-6 {padding-top: 48px !important;}
	.pr-6 {padding-right: 48px !important;}
	.pb-6 {padding-bottom: 48px !important;}
	.pl-6 {padding-left: 48px !important;}
	.px-6 {padding-right: 48px !important; padding-left: 48px !important;}
	.py-6 {padding-top: 48px !important; padding-bottom: 48px !important;}
	.p-7 {padding: 56px 56px !important;}
	.pt-7 {padding-top: 56px !important;}
	.pr-7 {padding-right: 56px !important;}
	.pb-7 {padding-bottom: 56px !important;}
	.pl-7 {padding-left: 56px !important;}
	.px-7 {padding-right: 56px !important; padding-left: 56px !important;}
	.py-7 {padding-top: 56px !important; padding-bottom: 56px !important;}
	.p-8 {padding: 64px 64px !important;}
	.pt-8 {padding-top: 64px !important;}
	.pr-8 {padding-right: 64px !important;}
	.pb-8 {padding-bottom: 64px !important;}
	.pl-8 {padding-left: 64px !important;}
	.px-8 {padding-right: 64px !important; padding-left: 64px !important;}
	.py-8 {padding-top: 64px !important; padding-bottom: 64px !important;}
	.p-9 {padding: 72px 72px !important;}
	.pt-9 {padding-top: 72px !important;}
	.pr-9 {padding-right: 72px !important;}
	.pb-9 {padding-bottom: 72px !important;}
	.pl-9 {padding-left: 72px !important;}
	.px-9 {padding-right: 72px !important; padding-left: 72px !important;}
	.py-9 {padding-top: 72px !important; padding-bottom: 72px !important;}
	.p-10 {padding: 80px 80px !important;}
	.pt-10 {padding-top: 80px !important;}
	.pr-10 {padding-right: 80px !important;}
	.pb-10 {padding-bottom: 80px !important;}
	.pl-10 {padding-left: 80px !important;}
	.px-10 {padding-right: 80px !important; padding-left: 80px !important;}
	.py-10 {padding-top: 80px !important; padding-bottom: 80px !important;}
	.p-11 {padding: 88px 88px !important;}
	.pt-11 {padding-top: 88px !important;}
	.pr-11 {padding-right: 88px !important;}
	.pb-11 {padding-bottom: 88px !important;}
	.pl-11 {padding-left: 88px !important;}
	.px-11 {padding-right: 88px !important; padding-left: 88px !important;}
	.py-11 {padding-top: 88px !important; padding-bottom: 88px !important;}
	.p-12 {padding: 96px 96px !important;}
	.pt-12 {padding-top: 96px !important;}
	.pr-12 {padding-right: 96px !important;}
	.pb-12 {padding-bottom: 96px !important;}
	.pl-12 {padding-left: 96px !important;}
	.px-12 {padding-right: 96px !important; padding-left: 96px !important;}
	.py-12 {padding-top: 96px !important; padding-bottom: 96px !important;}
	.p-13 {padding: 104px 104px !important;}
	.pt-13 {padding-top: 104px !important;}
	.pr-13 {padding-right: 104px !important;}
	.pb-13 {padding-bottom: 104px !important;}
	.pl-13 {padding-left: 104px !important;}
	.px-13 {padding-right: 104px !important; padding-left: 104px !important;}
	.py-13 {padding-top: 104px !important; padding-bottom: 104px !important;}
	.p-14 {padding: 112px 112px !important;}
	.pt-14 {padding-top: 112px !important;}
	.pr-14 {padding-right: 112px !important;}
	.pb-14 {padding-bottom: 112px !important;}
	.pl-14 {padding-left: 112px !important;}
	.px-14 {padding-right: 112px !important; padding-left: 112px !important;}
	.py-14 {padding-top: 112px !important; padding-bottom: 112px !important;}
	/*------------------------------------------------------------------
		1.2 Utility
	------------------------------------------------------------------*/
	.text-gold {
		color: #F0AB00;
	}
/*------------------------------------------------------------------

	2.0 Tools UI

------------------------------------------------------------------*/

	/*------------------------------------------------------------------
		2.1 Typography
	------------------------------------------------------------------*/
	.ab__framework h2 {
		font-size: 26px;
		line-height: 34px;
		font-weight: 300;
		color: #333;
	}
	.ab__framework h5 {
		font-size: 16px;
		line-height: 26px;
		font-weight: 600;
		color: #CCC;
	}
	.ab__framework p.lg {
		font-size: 18px;
		line-height: 28px;
		font-weight: 300;
		color: #333;
	}
	.ab__framework p.helper {
		color: #999;
		font-style: italic;
	}
	@media (max-width: 767px) {
		.ab__framework h1 {
			font-size: 24px;
		}
	}
	/*------------------------------------------------------------------
		2.2 Animations
	------------------------------------------------------------------*/
		/*------------------------------------------------------------------
			2.2.1 Keyframes
		------------------------------------------------------------------*/
		@-webkit-keyframes fadeInTop {
			0% {
				opacity: 0;
				bottom: 50px;
			}
			100% {
				opacity: 1;
				bottom: 0;
			}
		}
		/*------------------------------------------------------------------
			2.2.2 Timing
		------------------------------------------------------------------*/
		.motion_top {
			position: relative;
			animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
			animation-name: fadeInTop;
			animation-duration: .25s;
			-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
		}
		/*-----------------------------------------------------------------
			2.2.3 Delays
		------------------------------------------------------------------*/
		.motion_delay_0 {
			-webkit-animation-delay: 0.00s;
			animation-delay: 0.00s;
		}
		.motion_delay_1 {
			-webkit-animation-delay: 0.05s;
			animation-delay: 0.05s;
		}
		.motion_delay_2 {
			-webkit-animation-delay: 0.10s;
			animation-delay: 0.10s;
		}
		.motion_delay_3 {
			-webkit-animation-delay: 0.15s;
			animation-delay: 0.15s;
		}
		.motion_delay_4 {
			-webkit-animation-delay: 0.20s;
			animation-delay: 0.20s;
		}
		.motion_delay_5 {
			-webkit-animation-delay: 0.25s;
			animation-delay: 0.25s;
		}
		.motion_delay_6 {
			-webkit-animation-delay: 0.30s;
			animation-delay: 0.30s;
		}
		.motion_delay_7 {
			-webkit-animation-delay: 0.35s;
			animation-delay: 0.35s;
		}
		.motion_delay_8 {
			-webkit-animation-delay: 0.40s;
			animation-delay: 0.40s;
		}
		.motion_delay_9 {
			-webkit-animation-delay: 0.45s;
			animation-delay: 0.45s;
		}
		.motion_delay_10 {
			-webkit-animation-delay: 0.50s;
			animation-delay: 0.50s;
		}

		/*-----------------------------------------------------------------
			2.2.4 Loading Placeholders
		------------------------------------------------------------------*/
		.text-input__loading--line {
			height: 10px;
			width: 100%;
			margin-bottom: 10px;
			animation: pulseBg 1s infinite ease-in-out;
		}
		.text-input__loading--circle {
			height: 50px;
			width: 50px;
			border-radius: 100%;
			margin-bottom: 10px;
			animation: pulseBg 1s infinite ease-in-out;
		}
		@keyframes pulseBg {
			0% {
				background-color: rgba(200, 200, 200, 0.1);
			}
			50% {
				background-color: rgba(200, 200, 200, 0.3);
			}
			100% {
				background-color: rgba(200, 200, 200, 0.1);
			}
		}
		.text-input__loading--line:nth-of-type(3n+1) {
			width: 80%;
		}
		.text-input__loading--line:nth-of-type(3n+3) {
			width: 60%;
			margin-bottom: 20px;
		}
	/*------------------------------------------------------------------
		2.3 Buttons
	------------------------------------------------------------------*/
	.btn.primary.tools_ui {
		font-size: 16px;
		padding: 16px 24px;
		cursor: pointer;
		color: #FFF;
	}
	.btn.primary.inactive.tools_ui {
		opacity: 0.3;
	}
	.btn.primary:active,
	.btn.primary:hover,
	.btn.primary:focus {
		color: #FFF;
	}
	.btn.primary .fa,
	.btn.primary .far,
	.btn.primary .fas {
		margin-left: 24px;
	}
	/*------------------------------------------------------------------
		2.4 Dividers
	------------------------------------------------------------------*/
	.dotted_line {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMycgaGVpZ2h0PSczJyBmaWxsPSdibGFjaycgLz4KPC9zdmc+Cg==");
		background-color: #999;
		background-blend-mode: screen;
		background-size: 7px;
		display: block;
		height: 2px;
		width: 100%;
	}
	/*------------------------------------------------------------------
		2.5 Borders
	------------------------------------------------------------------*/
	.border-grey {
		border-width: 1px;
		border-style: solid;
		border-color: #CCC;
	}