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

    [Table of contents]

	These styles should apply to tools within the AB framework.

	1.0 Framework UI
	2.0 AB__Context
		2.1 AB__Tool_Title
		2.2 AB__Progress
		2.3 AB__Segments
			2.3.1 AB__Unsegmented
			2.3.2 Icons
			2.3.3 Progression styles
	3.0 AB__Main
		3.1 AB__Callout
		3.2 AB__User_Input
			3.2.1 Boolean
			3.2.2 Checkboxes
	4.0 Results page
		4.1 AB__Results_Visual
		4.2 AB__Segment_Result
	5.0 DangerouslySetHTML Components
	A.0 Adjustments that need to be reviewed and backported


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

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

	1.0 Framework UI

------------------------------------------------------------------*/
.ab__framework.ab__question_screen {
	position: relative;
	overflow: visible;
	background-color: #EFEFEF;
}
@media (min-width: 992px) {
	.ab__framework.ab__question_screen {
		min-height: calc(100vh - 75px);
	}
}
/*------------------------------------------------------------------

	2.0 AB__Context

------------------------------------------------------------------*/
.ab__context {	
	position: relative;
	background-color: #FFF;
	border-bottom: 1px solid #CCC;
}
.flex_container {
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex; 
	display: flex;
	-webkit-flex-direction: column;	
	-ms-flex-direction: column;	
    flex-direction: column;		
}
.ab__context {	
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1; 
	-webkit-flex-basis: 100%;
	-ms-flex-basis: 100%;
	flex-basis: 100%; 
	padding: 30px;		
}
.ab__level_container {
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1; 
	-webkit-flex-basis: 100%;
	-ms-flex-basis: 100%;
	flex-basis: 100%;
	padding: 30px 30px 100px;
}
@media (min-width: 992px) {
	.flex_container {
		-webkit-flex-direction: row;	
		-ms-flex-direction: row;	
		flex-direction: row;		
	}
	.ab__context {
		-webkit-flex-grow: 1; 
		-ms-flex-grow: 1;
		flex-grow: 1; 
		-webkit-flex-basis: 30%;
		-ms-flex-basis: 30%;		
		flex-basis: 30%; 
		padding: 40px;		
		min-height: calc(100vh - 75px);
		border-right: 1px solid #CCC;
	}
	.ab__level_container {
		-webkit-flex-grow: 1; 
		-ms-flex-grow: 1;
		flex-grow: 1; 
		-webkit-flex-basis: 70%;
		-ms-flex-basis: 70%;
		flex-basis: 70%; 
		padding: 40px 80px 120px;
	}
}
	/*------------------------------------------------------------------
		2.1 AB__Tool_Title
	------------------------------------------------------------------*/
	.ab__tool_title h5 {
		line-height: 1;
		color: #333;
	}
	.ab__tool_title {
		margin-bottom: 24px;
	}
	.ab__tool_name,
	.ab__tool_pictogram {
		display: inline-block;
		vertical-align: bottom;
		line-height: initial;
	}
	.ab__tool_pictogram {
		margin-right: 8px;
	}
	.ab__tool_pictogram img {
		width: 24px;
	}
	@media (min-width: 992px) {
		.ab__tool_title {
			margin-bottom: 32px;
		}
		.ab__tool_pictogram img {
			width: 32px;
		}
	}
	/*------------------------------------------------------------------
		2.2 AB__Progress
	------------------------------------------------------------------*/
	.ab__progress {
		position: relative;
	}
	.ab__progress_bar {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 80%;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMycgaGVpZ2h0PSczJyBmaWxsPSdibGFjaycgLz4KPC9zdmc+Cg==");
		background-color: #999;
		background-blend-mode: screen;
		background-size: 7px;
		border-radius: 1px;
		box-shadow: none;
		border: none;
	}
	.ab__progress_bar::-webkit-progress-bar {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMycgaGVpZ2h0PSczJyBmaWxsPSdibGFjaycgLz4KPC9zdmc+Cg==");
		background-color: #999;
		background-blend-mode: screen;
		background-size: 7px;
		border-radius: 1px;
	}
	.ab__progress_bar::-webkit-progress-value {
		background-color: #F0AB00;
		transition: width .4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
	.ab__progress_bar::-moz-progress-bar {
		background-color: #F0AB00;
		transition: width .4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
	.ab__progress_text {
		position: absolute;
		right: 0;
		bottom: 0;
		font-weight: 600;
		color: #F0AB00;
		font-size: 24px;
		line-height: 1;
	}
	.ab__progress_percent {
		font-size: 12px;
	}
	@media (min-width: 992px) {
		.ab__progress {
			margin-bottom: 32px;
		}
		.ab__progress_text {
			left: 90%;
		}
	}
	/*------------------------------------------------------------------
		2.3 AB__Segments
	------------------------------------------------------------------*/
	.ab__segments,
	.ab__unsegmented {
		margin-top: 24px;
	}
	.ab__segments .segment_list {
		list-style-type: none;
	}
	.ab__segments .segment_list li {
		counter-increment: segment;
		position: relative;
		display: block;
		margin-bottom: 0;
	}
	.ab__segments li:before,
	.ab__segments .segment_icon {
		font-weight: 600;
	}
	.ab__segments .segment_name {
		font-weight: 600;
		display: inline-block;
		width: 90%;
		padding-right: 15px;
	}
	@media (min-width: 992px) {
		.ab__segments {
			margin-bottom: 16px;
		}
		.ab__segments .segment_list li {
			margin-bottom: 16px;
		}
	}
		/*------------------------------------------------------------------
			2.3.1 AB__Segmented
		------------------------------------------------------------------*/

		/*------------------------------------------------------------------
			2.3.2 Icons
		------------------------------------------------------------------*/
		.ab__segments .segment.current .segment_name:before {
			content: '\f0da';
			font-family: 'Font Awesome 5 Free';
			font-size: 16px;
			margin-right: 4px;
		}
		.ab__segments .segment_icon {
			width: 24px;
			height: 24px;
			font-size: 14px;
			line-height: 1;
			text-align: center;
			display: inline-block;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		.ab__segments .segment_icon .fas,
		.ab__segments .segment_icon .far {
			font-size: 24px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.ab__segments .segment_questions {
			position: relative;
			top: 3px;
		}
		.ab__segments .segment_icon .fas.fa-check {
			position: absolute;
			z-index: 10;
			top: 50%;
			color: #FFF;
			font-size: 12px;
			left: 50%;
			transform: translate(-50%, -50%);
			padding-bottom: 4px;
		}
		@media (min-width: 992px) {
			.ab__segments .segment_icon {
				left: 90%;
			}
		}
		/*------------------------------------------------------------------
			2.3.3 Progression styles
		------------------------------------------------------------------*/
		/* Future segment */
		.ab__segments li.segment.future .segment_name,
		.ab__segments li.segment.future:before,
		.ab__segments li.segment.future .segment_icon {
			color: #CCC;
		}
		/* Current/Completed segment */
		.ab__segments li.segment.current .segment_name,
		.ab__segments li.segment.current:before,
		.ab__segments li.segment.current .segment_icon,
		.ab__segments li.segment.completed .segment_name,
		.ab__segments li.segment.completed:before,
		.ab__segments li.segment.completed .segment_icon {
			color: #F0AB00;
		}
		/* Change icon based on segment status */
		.ab__segments li.segment.future .fas.fa-comment-alt,
		.ab__segments li.segment.future .fa-check,
		.ab__segments li.segment.current .fa-check,
		.ab__segments li.segment.current .fas.fa-comment-alt,
		.ab__segments li.segment.completed .segment_questions {
			display: none;
		}
		@media (max-width: 991px) {
			.ab__segments .segment.current .segment_name:before,
			.ab__segments li.segment.future,
			.ab__segments li.segment.completed {
				display: none;
			}
		}

	/*------------------------------------------------------------------
		2.4 AB__Teaser
	------------------------------------------------------------------*/
	.ab__teaser h5 {
		position: relative;
		font-weight: 600;
		color: #CCC;
	}
	.ab__teaser .dotted_line {
		width: 97%;
	}
	.ab__teaser .teaser_icon {
		width: 24px;
		height: 24px;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		display: inline-block;
		position: absolute;
		left: 90%;
		top: 50%;
		transform: translateY(-50%);
	}
	.ab__teaser .teaser_icon .far {
		font-size: 24px;
		color: #CCC;
	}
	@media (max-width: 991px) {
		.ab__teaser {
			display: none;
		}
	}

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

	3.0 AB__Main

------------------------------------------------------------------*/
.ab__main .screen_counter {
	color: #F0AB00;
}
.ab__main .helper_text {
	font-style: italic;
	color: #999999;
}
.ab__main .helper_text.active {
    color: #e55039; /* SAP does not have a UI red color - using #e55039 for now  */
    font-weight: 600;
}
.ab__main .helper_text.active:before {
	content: '\f06a';
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
	font-weight: 600;
	font-style: normal;
	margin-right: 8px;
	animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}
	/*------------------------------------------------------------------
		3.1 AB__Callout
	------------------------------------------------------------------*/
	.ab__callout {
		background-color: #fff;
		border: 1px solid #CCC;
		border-left: 5px solid #0078c9;
		border-radius: 1px;
	}
	.ab__callout .col.ab__callout_thumbnail img {
		max-width: 82px;
		margin: 0;
	}
	.ab__callout .col {
		display: table-cell;
		float: none;
		vertical-align: middle;
	}
	@media (min-width: 992px) {
		.ab__callout {
			display: table;
		}
		.ab__callout .col {
			display: table-cell;
			float: none;
			vertical-align: middle;
		}
		.ab__callout .col.ab__callout_content {
			text-align: left;
		}
	}
	/*------------------------------------------------------------------
		3.2 AB__User_Input
	------------------------------------------------------------------*/
	.ab__user_input ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: flex-start;
		padding-left: 0;
		margin-bottom: 0;
		list-style: none;
	}
	.ab__user_input ul.choice_full_width .choice {
		width: 100%;
	}
	.ab__user_input .choice {
		position: relative;
		font-size: 22px;
		padding: 16px;
		background-color: #FFF;
		border: 1px solid #CCC;
		border-radius: 1px;
		cursor: pointer;
		transition: 0.1s border-color cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
	.ab__user_input ul.choice_full_width .choice {
		font-size: 20px;
	}
	.ab__user_input .choice .centerer {
		display: inline-block;
	}
	.ab__user_input ul.choice_flex_width .choice {
		margin-right: 24px;
	}
	/*------------------------------------------------------------------
		3.2.1 Boolean
	------------------------------------------------------------------*/
	.ab__user_input .boolean {
		flex-basis: 200px;
		text-align: center;
	}
	.ab__user_input .choice:hover {
		border-color: #F0AB00;
	}
	.ab__user_input .choice.selected {
		color: #F0AB00;
		border-color: #F0AB00;
	}
	.ab__user_input .choice:before {
		padding-right: 8px;
		animation: iconInLeft .1s;
		-moz-animation: iconInLeft .1s; /* Firefox */
		-webkit-animation: iconInLeft .1s; /* Safari and Chrome */
	}
	.ab__user_input .choice.selected:before {
		content: '\f058';
		font-size: 20px;
		font-family: 'Font Awesome 5 Free';
		font-weight: 600;
		color: #F0AB00;
	}
	.ab__user_input .choice.selected:after {
		content: '';
		position: absolute;
		z-index: -1;
	}
	@keyframes iconInLeft
	{
		from {opacity: 0;}
		to {opacity: 100%;}
	}
	@-moz-keyframes iconInLeft
	{
		from {opacity: 0;}
		to {opacity: 100%;}
	}
	@-webkit-keyframes iconInLeft
	{
		from {opacity: 0;}
		to {opacity: 100%;}
	}
	/*------------------------------------------------------------------
		3.2.2 Checkboxes
	------------------------------------------------------------------*/


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

	4.0 Results page

------------------------------------------------------------------*/
	/*------------------------------------------------------------------
		4.1 AB__Results_Visual
	------------------------------------------------------------------*/
	.ab__result .result_visual {
		max-width: 219px; /* Half of @2x width */
	}
	.ab__result_text {
		font-weight: bold;
	}
	.ab__result_text.low_risk,
	.ab__segment_result.level_low .segment_result {
		color: #F9B92B;
	}
	.ab__result_text.medium_risk,
	.ab__segment_result.level_medium .segment_result {
		color: #F08726;
	}
	.ab__result_text.high_risk,
	.ab__segment_result.level_high .segment_result {
		color: #EA6621;
	}
	.ab__progress_ring svg {
		max-width: 300px;
		display: inherit;
	}
	.ab__progress_ring circle {
		position: relative;
		transform: rotate(130deg);
		transform-origin: 50% 50%;
	}
	.ab__progress_ring circle#fill-layer {
		transition: stroke-dashoffset 1s;
	}
	.ab__progress_ring circle#base-layer,
	.ab__progress_ring circle#fill-layer {
		stroke-linecap: round;
	}	
	/*------------------------------------------------------------------
		4.2 AB__Segment_Result
	------------------------------------------------------------------*/	
	.ab__segment_result {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 16px;
	}
	.ab__segment_result:last-of-type {
		margin-bottom: 0;
	}
	.ab__segment_result .result_visual {
		width: 25%;
		max-width: 60px;
	}
	.ab__segment_result .result_text {
		width: 75%;
		padding-left: 16px;
	}
	@media (min-width: 767px) {
		.ab__segment_result .result_text {
			font-size: 13px;
		}
	}
	.ab__segment_result .result_text .segment_result {
		font-size: 16px;
	}
/*------------------------------------------------------------------

	5.0 DangerouslySetHTML Componentts

------------------------------------------------------------------*/
.ab__result .ptc_callout {
	background-color: #f2f2f2;
	border-radius: 1px;
	border: 1px solid #CCC;
}
.ab__result .ptc_callout .ptc_citation {
	font-style: italic;
	color: #999999; 
}

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

	A.0 Adjustments that need to be reviewed and backported

------------------------------------------------------------------*/
/* Extra specificity of `col-md-4` is necessary to overcome Drupal CSS. */
@media (min-width: 992px) {
	.ab__context.col-md-4 {
		min-height: calc(100vh - 75px);
	}
}

/* Not wrapped in @media originally. */
@media (min-width: 992px) {
	.ab__progress_bar {
		/* Gives us leeway for displaying "100%" */
		width: 75%;
	}

	.ab__progress_text {
		/* Fixes "100% spilling off left rail" */
		left: unset;
		right: 1px;
	}

	/* Technically not broken. Even though the mockup says to do this,
	/*   this really catches my eye as "people are going to think it's
	/*   left-aligned when it shouldn't. This fixes it. */
	.ab__callout-content.col-sm-11 {
		padding-left: 0;
	}

	/* Added for COM-4563, needs to be moved to a better location
	/*   within this CSS file. */
	.ab__callout-content .citation {
		font-size: 12px;
		font-style: italic;
		color: #666;
	}
}

.bg--pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}
.bg--pattern-position {
    position: absolute;
    overflow: hidden;
}
.bg--pattern-bottom-left {
    transform: skew(35deg);
    transform-origin: bottom left;
    bottom: 0;
    left: 0;
    width: 35%;
    height: 100%;
}
.bg--pattern-dots {
    background-position: bottom;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iVjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDcgNyI+PHRpdGxlPkFydGJvYXJkIDMgY29weTwvdGl0bGU+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L3N2Zz4=');
    background-size: 10px;
    width: 100%;
    height: 100%;
    transform-origin: bottom;
}
.bg--pattern-dots-a10 {
    opacity: 0.1;
}
.bg--pattern-bottom-left .bg--pattern-dots {
    transform: skew(-35deg);
}