@charset "UTF-8";

/* This file uses "CSS nesting", which is a relatively new feature, but industry standard (I checked the "caniuse" website). 
	We started implementing this on our PY26 changes. VS Code supports it, just not VS.
	So for now, if you see CSS "errors", check on VSCode to see if they are spurious. */

form {
	background: var(--white)
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder {
	color: #828282;
	opacity: 1;
}

.topBluebar {
	min-height: 36px;
	background-color: var(--primary-color);
}

#titlebar {
	background: var(--primary-color);
}

	#titlebar p {
		margin: 0;
		padding: 15px 0;
		color: var(--white);
		font-family: var(--primary-font);
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		line-height: normal
	}

i {
	color: #0095FF;
	font-size: 18px;
	cursor: pointer
}

.mt-25 {
	margin-top: 25px;
}

.mb-25 {
	margin-bottom: 25px;
}

.mb-35 {
    margin-bottom: 35px;
}

.p-30 {
	padding: 30px 15px 60px 15px;
}

.p-36 {
	padding: 36px 15px 75px 15px;
}

section h1 {
	margin: 0;
	padding: 0 0 25px 0;
	color: var(--primary-dark-blue);
	font-family: var(--primary-font);
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 3em;
	text-align: center;
}

.box {
	position: relative;
	margin: 20px auto 0 auto;
	padding: 90px 12px 30px 12px;
	max-width: 564px;
	min-width: 564px;
	background: var(--white);
	/* border: 1px solid #CED4DA; */
	border-radius: 25px;
	box-shadow: #CED4DA 0px 2px 8px 0px;
}

.tab {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 18px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.step-container {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -19px;
	left: 50%;
	transform: translateX(-50%);
}

.step-indicator {
	background-color: var(--primary-color);
	color: var(--white);
	padding: 18px 15px 15px 15px;
	text-align: center;
	min-width: 156px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 18px;
}

.step-indicator::after {
	content: '';
	display: inline-block;
	border-left: 18px solid transparent;
	border-right: 20px solid var(--secondary-color);
	border-bottom: 19px solid transparent;
	transform: rotate(180deg);
	transform-origin: center;
	position: absolute;
	top: 0;
	left: 100%;
}

.step-text {
	font-size: 32px;
	line-height: 1;
	display: inline-block;
	font-weight: 500;
	font-family: var(--primary-font);
	text-transform: uppercase;
}

.box h3 {
	margin-bottom: 25px;
	color: var(--dark-grey);
	font-family: var(--primary-font);
	font-size: 32px;
	font-weight: 500;
}

.box label {
	position: relative;
	display: block;
	padding-bottom: 8px;
	line-height: 30px;
	color: var(--dark-grey);
	font-family: var(--primary-font);
	font-size: 20px;
	font-weight: 500;
}

	.box label span {
		display: inline-block;
	}

.box em {
	font-size: 18px;
	font-weight: normal;
	font-style: italic;
}

.message {
	position: absolute;
	display: inline-block;
	top: 2px;
	left: 0;
	padding: 0;
	width: 100%;
	color: var(--red);
	font-family: var(--primary-font);
	font-size: 20px;
	font-weight: 500;
	line-height: normal;
	text-align: left;
	background-color: #fff;
}

.radio-toolbar {
	display: flex;
	margin: 10px 0 10px 0;
	padding-left: 0;
	list-style: none;
}

	.radio-toolbar li {
		margin-right: 10px;
		width: 175px;
	}

		.radio-toolbar li:nth-child(3) {
			margin-right: 0;
		}

	.radio-toolbar input[type="radio"] {
		opacity: 0;
		position: fixed;
		width: 0;
	}

	.radio-toolbar label {
		display: inline-block;
		background-color: #fff;
		padding: 15px;
		width: 100%;
		color: var(--medium-gray);
		font-family: var(--primary-font);
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		border: 2px solid #c3c3c3;
		border-radius: 10px;
		box-shadow: #CED4DA 0px 2px 8px 0px;
	}

	.radio-toolbar input[type='radio'] {
		+label:hover {
			background-color: var(--light-gray);
			border-color: var(--checkbox-bd-hover);
			cursor: pointer;
		}

		&:focus+label {
			border: 2px solid var(--primary-color);
			background-color: var(--light-gray);
		}

		&:checked+label {
			font-weight: 500;
			background-color: #DBEDF6;
			border-color: var(--primary-color)
		}

		&:checked+label:hover {
			background-color: #93D1F0;
			border-color: var(--primary-color);
			color: var(--white);
			border-width: 2px;
		}

		&:checked+label:focus:not(:hover) {
			background-color: #93D1F0;
			border-color: var(--primary-color);
			color: var(--white);
		}
	}

.tip {
	margin-top: 15px;
	margin-left: 25px;
	color: #666;
	font-size: 15px;
	line-height: normal;
}

	.tip .fa-li {
		margin-top: 4px;
	}

.fa-ul > li {
	position: relative;
	padding-left: 4px;
}

#region {
	margin-left: -15px;
	padding: 10px 0 0 0;
	color: var(--medium-gray);
	font-size: 16px;
	font-weight: 300;
}

	#region li {
		padding-left: 17px;
		padding-right: 17px;
		background: url(../img/region-li-bg2.png) no-repeat 0 50%;
	}

		#region li:nth-child(1) {
			background: 0 0
		}

		#region li span {
			display: block;
			color: var(--dark-gray);
			font-size: 18px;
			font-weight: 600;
		}

.form-group {
	display: block !important;
	margin-bottom: 25px !important;
}

.form-control {
	display: block;
	padding: 16px 20px;
	width: 100% !important;
	height: 64px;
	color: var(--dark-gray);
	font-family: var(--primary-font);
	font-size: 1.25em;
	font-weight: 400;
	text-align: left;
	border: 2px solid var(--medium-gray);
	border-radius: 10px;
	box-shadow: #CED4DA 0px 2px 8px 0px;
}

.form-control.is-valid,
.form-control.is-invalid {
	border-width: 2px;
	border-color: var(--red);
}

.form-select {
	height: 64px;
	border: 2px solid var(--medium-gray)
}

.btn-secondary {
	margin: 0 auto;
	padding: 5px 50px;
	height: 60px;
	min-width: 200px;
	color: var(--white);
	font-family: var(--primary-font);
	font-size: 1.5em;
	font-weight: normal;
	background-color: var(--primary-dark-blue);
	border-color: var(--primary-dark-blue);
	border-radius: 30px;
	/* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 3px 6px -3px inset; */
}

@media (hover: hover) and (pointer: fine) {
	.btn-secondary.active, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
		color: var(--white) !important;
		background-color: var(--secondary-dark-blue) !important;
		border-color: var(--secondary-dark-blue) !important;
	}
}

@media (hover: none) and (pointer: coarse) {
	.btn-secondary.active, .btn-secondary:active {
		color: var(--white) !important;
		background-color: var(--secondary-dark-blue) !important;
		border-color: var(--secondary-dark-blue) !important;
	}
}

@media (hover: none) and (pointer: coarse) {
	.btn-secondary:focus, .btn-secondary:hover {
		color: var(--white);
		background-color: var(--primary-dark-blue);
		border-color: var(--primary-dark-blue);
	}
}

	.disTxt {
		color: var(--dark-gray);
		font-size: 1em;
		font-weight: 400;
		line-height: 24px;
	}

		.disTxt a {
			font-weight: 400;
		}

		.disTxt strong {
			font-weight: 700;
		}

	@media (min-width:280px) and (max-width:767px) {
		.topBluebar {
			min-height: 36px;
			background-color: var(--primary-color);
		}

		form {
			background: var(--white);
		}

		.p-30 {
			padding: 30px 15px;
		}

		.p-36 {
			padding: 36px 15px 60px 15px;
		}

		section h1 {
			font-size: 2em;
			line-height: 1.125em;
		}

		.step-indicator {
			padding: 14px 15px;
			min-width: 140px;
		}

		.step-text {
			font-size: 24px;
		}

		.box {
			padding: 80px 12px 30px 12px;
			width: auto;
			min-width: inherit;
		}

			.box h3 {
				font-size: 28px;
			}

			.box label {
				font-size: 18px;
			}

		.radio-toolbar label {
			padding: 10px 2px;
			font-size: 16px;
		}

		.btn-secondary {
			padding: 5px 30px;
			font-size: 1.25em;
		}

		#titlebar {
			display: none !important;
		}

		.box label {
			font-size: 1em;
		}

		.form-control {
			font-size: 1em;
		}

		.message {
			top: 4px;
			font-size: 1em;
		}

		.disTxt {
			font-size: 0.8em;
			line-height: 20px;
		}
	}

	@media screen and (max-width: 469px) {
		.box {
			width: auto;
			min-width: inherit;
		}
	}

	@media screen and (max-width: 414px) {
	}

	@media screen and (max-width: 320px) {
		.p-30 {
			padding: 30px 15px;
		}

		.radio-toolbar label {
			font-size: 14px;
		}
	}

	@media (min-width: 240px) and (max-width: 280px) {
		section h1,
		fieldset legend {
			font-size: 1.5em;
			line-height: 1.125em;
		}

		.box label {
			font-size: .875em;
			line-height: normal;
		}

		i {
			color: #0095FF;
			font-size: 14px;
			cursor: pointer;
		}

		.btn-secondary {
			font-size: 1em;
			min-width: 180px;
		}

		.radio-toolbar label {
			padding: 12px 2px;
			font-size: 12px;
		}

		.form-control {
			padding: 16px 12px;
			height: 56px;
		}

		.form-select-lg {
			font-size: 1em;
			padding: 16px 10px;
			height: 56px;
		}

		.message {
			top: 0px;
			font-size: 1em;
		}

		#region li span {
			font-size: 14px;
		}

		.disTxt {
			line-height: 20px;
		}
	}
.medicare-solutions-landing-page-referrer #step1 .topBluebar,
.medicare-solutions-landing-page-referrer #step2 .topBluebar {
	display: none;
}