@charset "UTF-8";

/*
 * The legacy site's style.css, rule for rule, its values read from
 * tokens.css. The language selector's rules come from both style.css and
 * templates/header.php; the one block repeated in both is kept once.
 */

html {
	margin: var(--space-0);
}

body {
	margin: var(--space-0);
	padding: var(--space-0);
}

a, a:visited, a:hover, a:link {
	color: inherit;
}

a:hover {
	text-decoration: none;
	color: var(--color-black);
}

.container {
	padding: var(--space-0);
	margin: 0 auto;
}

.underline {
	color: inherit;
	text-decoration: underline;
}

#step-indicator {
	position: absolute;
	right: var(--space-15);
	top: var(--space-10);
}

.fundname {
	float: left;
	width: var(--size-320);
	text-align: left;
	margin-right: var(--space-20);
	padding-top: var(--space-4);
}

.fundcolumn {
	float: left;
	width: 50%;
}

#easyleft {
	float: left;
	width: 60%;
	padding-right: var(--space-30);
}

#easyright {
	float: left;
	width: 40%;
}

.beneficiary {
	float: left;
	width: 100%;
	margin-bottom: var(--space-20);
	display: none;
}

#beneficiary_1,
.beneficiary.beneficiary-shown {
	display: block;
}

.beneficiary-headline {
	width: 100%;
	background-color: var(--color-blue);
	padding: var(--space-8);
	color: var(--color-white);
}

.beneficiary-left {
	float: left;
	width: 55%;
	margin-top: var(--space-10);
	border-right: var(--border-1) solid var(--color-gray-8c);
	margin-right: 5%;
	box-sizing: border-box;
}

.beneficiary-right {
	float: left;
	width: 40%;
	margin-top: var(--space-10);
}

.beneficiary-input-holder {
	width: 100%;
	float: left;
}

.beneficiary_mailing_form {
	width: 100%;
	float: left;
	display: none;
}

.beneficiary_mailing_form.beneficiary-shown {
	display: block;
}

#add-beneficiary {
	background-color: var(--color-brick);
	color: var(--color-white);
	padding: var(--space-10);
	text-transform: uppercase;
}

.delete-beneficiary {
	float: right;
	text-align: right;
	font-family: var(--font-family-plain);
	text-transform: uppercase;
	font-weight: bold;
}

.delete-beneficiary i {
	margin-right: var(--space-8);
}

.blue-btn {
	background-color: var(--color-blue);
	width: var(--size-120);
	color: var(--color-white);
	height: var(--size-35);
	text-transform: uppercase;
	border: none;
	float: left;
}

.orange-btn {
	background-color: var(--color-white);
	width: var(--size-120);
	color: var(--color-navy);
	height: var(--size-35);
	text-transform: uppercase;
	border: none;
	margin-right: var(--space-10);
	text-align: center;
	float: left;
	line-height: var(--line-height-35);
}

.required {
	color: var(--color-red);
}

.required-text {
	color: var(--color-text);
	font-style: italic;
	font-size: var(--font-size-12);
}

/* Mobile */
@media (max-width: 480px) {
	.container {
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
	}

	#step-indicator {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}

	#step2-well {
		height: var(--size-300);
	}

	#step3-well {
		height: var(--size-300);
	}

	#step4-well-easy {
		height: var(--size-800);
	}

	.fundcolumn {
		width: 100%;
	}

	.fundname {
		width: 100%;
		text-align: left;
	}

	#easyleft,
	#easyright {
		width: 100%;
	}

	#easyright {
		margin-top: var(--space-20);
	}

	.beneficiary-left,
	.beneficiary-right {
		width: 100%;
	}

	.beneficiary-left {
		border: none;
	}
}

/* Mobile (portrait) to tablet */
@media (max-width: 767px) {
	#step-indicator {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}

	#step2-well {
		height: var(--size-250);
	}

	#step3-well {
		height: var(--size-220);
	}

	#step4-well-easy {
		height: var(--size-850);
	}

	.fundcolumn {
		width: 100%;
	}

	#easyleft,
	#easyright {
		width: 100%;
	}

	#easyright {
		margin-top: var(--space-20);
	}
}

/* Tablet (landscape) */
@media (min-width: 768px) and (max-width: 979px) {
	#step-indicator {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}

	#step4-well-easy {
		height: var(--size-850);
	}
}

/* Language selector */

.onelinkwrapper {
	display: inline-block;
	float: left;
	font-size: var(--font-size-16);
	color: var(--color-text);
	font-family: var(--font-family-voya);
	padding-right: var(--space-20);
	padding-top: var(--space-15);
}

.onelinkwrapper > input[type="checkbox"] {
	display: none;
}

.onelinkwrapper > label:after,
.onelinkwrapper > a[role="button"]:after {
	content: "\f0d8";
	font-family: FontAwesome;
	display: inline-block;
	margin-left: var(--space-6);
}

.onelinkwrapper > ul#langdropdown {
	position: absolute;
	z-index: var(--z-dropdown);
	display: none;
	top: calc(-7.2em + var(--space-14));
	background: var(--color-white);
	margin: var(--space-0);
	list-style: none;
	width: 100%;
	border-radius: var(--radius-5);
	box-shadow: var(--shadow-dropdown);
	padding-left: var(--space-0);
}

.removeHover {
	display: none !important;
}

.showDropdown {
	display: block !important;
}

.onelinkwrapper > [type="checkbox"]:checked + label:after,
.onelinkwrapper > ul#langdropdown:target ~ a:after {
	content: "\f0d8";
}

#globefa {
	font-size: var(--font-size-30);
	vertical-align: middle;
	padding-right: var(--space-10);
	color: var(--color-gray-6e);
	font-family: "FontAwesome";
}

.onelinkwrapper span {
	display: block;
	padding: var(--space-16) var(--space-35) var(--space-16) var(--space-25);
	cursor: pointer;
}

.speech-bubble {
	position: relative;
	border-radius: var(--radius-bubble);
}

.activeLang,
#langdropdown span:hover {
	background: var(--color-text);
	color: var(--color-white);
}

#langdropdown span {
	font-size: var(--font-size-18);
}

#langdropdown span:nth-child(1) {
	border-radius: var(--radius-5) var(--radius-5) 0 0;
	font-weight: bold;
}

#langdropdown span:nth-child(2) {
	border-radius: 0 0 var(--radius-5) var(--radius-5);
}

#selectedLang {
	padding: var(--space-15) 0 var(--space-10) 0;
}

#globefa:hover,
#selectedLang:hover {
	cursor: pointer;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 80%;
	width: 0;
	height: 0;
	border: var(--border-15) solid transparent;
	border-top-color: var(--color-white);
	border-bottom: 0;
	margin-left: var(--space-neg-15);
	margin-bottom: var(--space-neg-9);
}

.speechBubbleHover:after {
	border-top-color: var(--color-text);
}

.tenPercentDarker {
	color: var(--color-gray-555) !important;
}

.twentyPercentDarker {
	color: var(--color-gray-3b) !important;
}

#langdropdown span.lang-bold {
	font-weight: bold;
}

#langdropdown span.lang-normal {
	font-weight: normal;
}

#popup-modal-content {
	font-family: var(--font-family-voya) !important;
	font-size: var(--font-size-18) !important;
	color: var(--color-text) !important;
}

#voya-close-btn {
	font-family: var(--font-family-voya) !important;
	font-size: var(--font-size-18) !important;
	font-weight: var(--font-weight-semibold) !important;
	border-radius: var(--radius-30) !important;
	margin: 0 var(--space-2) !important;
	padding: var(--space-11) var(--space-20) !important;
	cursor: pointer;
	border: none;
	background-color: var(--color-teal);
	color: var(--color-white);
}

#voya-close-btn:hover {
	background-color: var(--color-teal-dark);
}

@media screen and (max-width: 900px) {
	#popup-modal-content {
		width: 85% !important;
		max-width: 80% !important;
	}
}

/* Accessibility and step two (the later part of legacy style.css) */

.skip-link {
	position: absolute;
	top: var(--space-neg-40);
	left: 0;
	background: var(--color-black);
	color: var(--color-white);
	padding: var(--space-8) var(--space-16);
	text-decoration: none;
	font-weight: bold;
	z-index: var(--z-skip);
}

.skip-link:focus {
	top: 0;
	outline: var(--border-3) solid var(--color-focus);
	outline-offset: var(--space-2);
}

.contribution-group {
	border: none;
	padding: 0;
	margin-top: var(--space-30);
}

.contribution-group legend {
	font-size: var(--font-size-1em);
	font-weight: bold;
	margin-bottom: var(--space-8);
	padding: 0;
}

.contribution-help {
	font-size: var(--font-size-09em);
	color: var(--color-text-soft);
	margin-bottom: var(--space-12);
}

.contribution-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}

.contribution-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
}

/* The per-input labels are hidden on screen and kept for screen readers. */
.label-text,
.sr-only {
	position: absolute;
	width: var(--size-1);
	height: var(--size-1);
	padding: 0;
	margin: var(--space-neg-1);
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.input-prefix,
.input-suffix {
	font-size: var(--font-size-16);
}

.contribution-input {
	width: var(--size-100);
}

.contribution-input:focus {
	outline: var(--border-3) solid var(--color-focus);
	outline-offset: var(--space-2);
}

.contribution-separator {
	font-size: var(--font-size-16);
	padding: 0 var(--space-4);
}

/* A darker blue, for contrast. */
.info-btn {
	background: none;
	border: none;
	padding: var(--space-4);
	cursor: pointer;
	color: var(--color-link-blue);
	font-size: var(--font-size-18);
	line-height: 1;
}

.info-btn:focus {
	outline: var(--border-3) solid var(--color-focus);
	outline-offset: var(--space-2);
	border-radius: var(--radius-2);
}