/* Whole elements */

/* Text Inputs */
.text input[type="text"],
.text input[type="tel"],
.text input[type="password"],
.text input[type="date"] {
	border: 1px solid #3B6B90;
	font-size: 18px;
	font-weight: 400;
	font-family: inherit;
	height: 48px;      /* 50 - 2 */
	line-height: 48px; /* 50 - 2 */
	padding: 0 10px;
	background-color: #FFF;
	letter-spacing: 1px;
}

.text input[type="text"].datepicker {
	background: white url('/_assets/img/icons/date_icon-start.svg') no-repeat right 10px center;
	background-size: 30px 30px;
	padding-right: 50px;
}

.text input#effective_date {
	background-image: url('/_assets/img/icons/date_icon-start.svg');
}

.text input#termination_date {
	background-image: url('/_assets/img/icons/date_icon-end.svg');
}

/* Reduce the width on account of the extra padding that makes space for the date icon */
.text_220 input[type="text"].datepicker {
	width: 168px; /* 220 - 11 - 51 */
}


.text input[type="text"][disabled] {
	background-color: transparent
}

.text_80 input[type="text"] {
	width: 58px; /* 80 - (11 * 2) */
}

.text_143 input[type="text"] {
	width: 121px; /* 143 - (11 * 2) */
}

.text_220 input[type="text"] {
	width: 198px; /* 220 - (11 * 2) */
}

.text_330 input[type="text"], .text_330 input[type="password"] {
	width: 308px; /* 330 - (11 * 2) */
}

.text_centered input[type="text"], .text_centered input[type="password"] {
	text-align: center;
}

@media (max-width: 480px) {
	.text_330 input[type="text"], .text_330 input[type="password"] {
		width: 248px; /* 270 - (11 * 2) */
	}
}

/* span under text input that should match it, seen on e-signature pages */
span.match_text_input_above {
	border: 1px solid #3B6B90;
	border-top: none;
	display: block;
	background-color: #F5F5F5;
	padding: 0 10px;
	line-height: 25px;
	height: 25px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select:none;
	user-select:none;
	-o-user-select:none;
}


/* Frozen Input - This is text which shows up where an input would normally be, and in line with the inputs */
.fr_body_cell.frozen_input {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 400;
	padding-top: 23px; /* Occupy the space where the label/h3 normally is */
}


/* Textarea Inputs */
.textarea textarea {
	border: 1px solid #3B6B90;
	font-size: 18px;
	font-weight: 400;
	font-family: inherit;
	padding: 10px;
	background-color: #FFF;
}

.textarea textarea[disabled] {
	background-color: transparent;
}

.textarea_454 textarea {
	width: 432px; /* 454 - (11 * 2) */
}

@media (max-width: 480px) {
	.textarea_454 textarea {
		width: 248px; /* 270 - (11 * 2) */
	}
}

/* Radio Buttons */
.radio_buttons {
	display: flex;
	position: relative;
	border-left: 1px solid #3B6B90;
	flex-wrap: wrap;
}

.radio_buttons input[type="radio"] {
	opacity: 0; /* use opacity instead of visibility:hidden to make tabbable -- still need to make label highlighted. */
	position: absolute;
	top: 0;
}

.radio_buttons label {
	display: block;
	border: 1px solid #3B6B90;
	border-left: none;
	height: 48px;      /* 50 - 2 */
	line-height: 48px; /* 50 - 2 */
	text-align: center;
	background-color: #FFF;
	color: #3B6B90;
	margin-bottom: 0;
	cursor:pointer;
	font-size: 18px;
	font-weight: 400;
}

.radio_buttons label:hover,
.radio_buttons input:focus + label /* highlight on tab, too */
{
	background-color: #DEE5F1;
}

.radio_buttons input:checked + label {
	background-color: #517A9A;
	color: #FFF;
}

.radio_buttons.radio_85 label {
	width: 83px; /* 85 - 2 */
}

.radio_buttons.radio_110 label {
	width: 108px; /* 110 - 2 */
}

.radio_buttons.radio_220 label {
	width: 218px; /* 220 - 2 */
}


/* Submit Buttons */
/* Currently using common button styles from default.css. Add class "major_cta" to submit button. */
.fr_body_cell.submit_button {
	flex: 1 1 auto; /* Make button container expand so button can use to establish max width at small sizes */
}


/* Select Menus */
.select {
}

.select select {
	border: 1px solid #3B6B90;
	font-size: 18px;
	font-weight: 400;
	font-family: inherit;
	height: 50px;      /* 50px - 0 */
	line-height: 50px; /* 50px - 0 */
	padding-left: 10px;
	background-color: #FFF;
}

.select select[disabled] {
	background-color: transparent;
}

.select option {
}

.select.select_143 select {
	width: 143px; /*  143 - (11 * 2) */
}


/* Checkbox */
.checkbox {
	position: relative; /* contain absolute position hidden checkbox */
}

.checkbox input[type="checkbox"] {
	visibility: hidden;
	position: absolute;
	top: 0;
	right: 0;
}

.checkbox label span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #3B6B90;
	background-color: #FFF;
	margin-right: 10px;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	color: #333;
}

.checkbox input[type="checkbox"]:checked + label span {
}

.checkbox input[type="checkbox"]:checked + label span:before {
	content: "\2713";
}


/* Add Person Buttons */
.add_person {
}

.add_person span {
	display: block;
	width: 100px;
	text-align: center;
	height: 30px;
	line-height: 30px;
	font-size: 17px;
	color: #3B6B90;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.add_person span:hover {
	text-decoration: underline;
}

/* Head of the form, contains introductions, progress meter, secure badge */

.section.form_head {
	overflow: hidden; /* contain background color */
}

.section.form_head .section_liner {
}

.section.form_head .section_content {
	margin-top: 20px;
	margin-bottom: 20px;
}

.section.form_head p {
	margin: 10px 0;
	font-size: 19px;
}


/* Secure badge near progress meter */
.comodo_trustlogo {
	float: right;
	margin-left: 10px;
}


/* Progress meter at the top of the form, where you are in the progress of filling out the application */
.progress_meter {
	display: flex;
}

.progress_meter .progress_step {
	padding: 0 20px;
	margin: 0;
	text-transform: uppercase;
	font-size: 20px;
	color: #9A9A9A;
	border-left: 1px solid #9A9A9A;
	white-space: nowrap;
}

.progress_meter .progress_step:first-child {
	border-left: none;
	padding-left: 0;
}

.progress_meter .progress_step a:link    {color: #3B6B90}
.progress_meter .progress_step a:visited {color: #3B6B90}
.progress_meter .progress_step a:hover   {color: #F38538}
.progress_meter .progress_step a:active  {color: #F38538}

.progress_meter .progress_step.current_step {color: #000; font-weight: 400}

.progress_meter .progress_step.disabled_step {color: #9A9A9A}

.progress_meter ~ h1 {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 20px;
	margin-top: 5px;
	display: none;
}

@media (max-width: 720px) {
	/* Make main STM progress meter into bubbles rather than text */
	.progress_meter {
		width: 250px;
		justify-content: space-between;
		background: transparent url('/_assets/img/icons/progress_line.svg') no-repeat scroll center center;
	}

	/* Start showing the H1 since the rest of the progress meter text goes away */
	.progress_meter ~ h1 {
		display: block;
	}

	/* Graphics are in a small sprites file where disabled: 0, current: -30px, link: -60px; link_hover: -90px */

	.progress_meter .progress_step {
		padding: 0;
		border: none;
		text-indent: 100%; /* Hide the text from view  */
		white-space: nowrap; /* Hide the text from view  */
		overflow: hidden; /* Hide the text from view  */
		height: 30px;
		width: 30px;
		background: transparent url('/_assets/img/icons/progress_circles.svg') no-repeat scroll 0 -60px;
		background-size: 30px 120px;
	}

	/* The way this is currently written, the default state is the link, and then disabled and current are called out. This makes the link state have a hover effect. */
	.progress_meter .progress_step:hover {
		background-position: 0 -90px;
	}

	/* Make sure the <a> appears in the bubbles view window, so the user can click the link, since we shifted the text out of the frame. */
	.progress_meter .progress_step a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.progress_meter .progress_step.current_step {background-position: 0 -30px}

	.progress_meter .progress_step.disabled_step {background-position: 0 0}

}


/* Second kind of progress at the top, seen on pick plans pages */
.quote_status {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 30px 0;
}

.quote_status h1 {
	color: #3B6B90;
	text-transform: uppercase;
	margin: 0;
	margin-right: 15px;
	font-size: 24px;
	width: 265px; /* Match colums below; 300 column - 15 current gutter - 20 whitespace to left edge */
}

.section.form_head .quote_status p {
	margin: 0;
	margin-right: 10px;
	letter-spacing: 1px;
}



/* Typical form row, from row all the way down to cells */
/* This could be a fieldset ? */
.form_row {
	display: flex;
	background-color: #F0F3FB;
}

/* This could be a fieldset legend ? */
.f_row_head {
	flex: 0 0 300px;
	background-color: #FFF;
}

.f_row_head h2 {
	text-align: right;
	margin: 10px 30px 0 0;
	text-transform: uppercase;
	color: #3B6B90;
	font-size: 20px;
	font-weight: 400;
}

@media (max-width: 720px) {
	.form_row {
		display: block;
		border-top: 1px solid rgba(170, 170, 170, 0.3);
	}

	.f_row_head {
		width: auto;
		background-color: transparent;
	}

	.f_row_head h2 {
		text-align: left;
		margin: 15px 30px 0 30px; /* Spacing to cell below done with spacing on top of the cell */
	}
}

@media (max-width: 480px) {
	.f_row_head h2 {
		margin: 15px 15px 0 15px;
	}
}

/*
Row can have C-shaped padding, padding at top, left, and bottom.
Currently doing without the padding at top and bottom to tighten up rows.
The cells typically have 10px of top and bottom whitespace to separate from each other.
30px at left is so all contained cells align at the right place on the left.
Omitting whitespace on right is because cells have their own trailing whitespace.
*/
.f_row_body {
	flex: 1;
	padding: 0 0 0 30px;
}

@media (max-width: 480px) {
	.f_row_body {
		padding: 5px 0 5px 15px; /* 15 desired at all four sides, but child cells provide 10 at top and bottom, and 15 or more at right */
	}
}

/* A text intro to the rest of the row body */
.fr_body_intro {
	display: block;
	font-size: 18px;
	font-weight: 400;
}

.frb_intro_cells {
	display: flex;
}

.frb_intro_cell {
	margin: 10px 0; /* this container is roughly equivalent to .fr_body_cell */
	padding: 0 10px;
}

.frb_intro_cell:first-child {
	padding-left: 0; /* text should start at left margin */
}

.frb_intro_cell ~ .frb_intro_cell {
	border-left: 1px solid #333;
}

@media (max-width: 480px) {
	.frb_intro_cell {
		padding: 0 10px; /* tighten up spacing between cells */
	}
}




/* When the row body is composed of a series of blocks or cells  */
.fr_body_cells {
	display: flex;
	flex-wrap: wrap;
}

.fr_body_cell {
}

/* Using " > label" to only target the ones at the top of cells, not radio button or checkbox labels */
.fr_body_cell > label, .fr_body_cell h3 {
	display: block;
	margin: 0 0 5px 0;
	font-size: 16px;
	font-weight: 300;
	color: #333;
}

.fr_body_cell > label {
}

.fr_body_cell h3 {
}


/*
10 on top and bottom is partly to space the cell from the row edges,
but also to space one cell from another vertically. 14 at right is to
space this cell from the next one horizontally, and also to space this
cell away from the right edge of the screen in mobile.
*/
.fr_body_cells.gap_14 {
}

.fr_body_cells.gap_14 .fr_body_cell {
	margin: 10px 14px 10px 0;
}


/*
10 on top and bottom is partly to space this cell away from the row top
and bottom, and partly to space this cell away from other cells when they
cells wrap and are stacked vertically. The 44 at right is how far to push
away the next cell when they are stacked horizontally. The 44 at right also
comes into play in mobile view, or narrow screen widths.
*/
.fr_body_cells.gap_44 {
}

.fr_body_cells.gap_44 .fr_body_cell {
	margin: 10px 44px 10px 0;
}




/* A special form row that acts a spacer, for creating a break between sections */
.form_row.spacer {
}

.form_row.spacer .f_row_head {
	height: 80px;
	padding: 0;
}

.form_row.spacer .f_row_body {
}

@media (max-width: 720px) {
	/* Special spacer row */
	.form_row.spacer {
		background-color: #FFF;
		height: 80px;
	}

	.form_row.spacer .f_row_head {
		height: auto;
	}

	.form_row.spacer .f_row_body {
		height: auto;
		background-color: transparent;
		padding: 0;
	}
}


/* A special form row that shows a SSL badge */
.form_row.ssl {
}

.form_row.ssl .f_row_head img {
	display: block;
	margin: 10px auto;
}


/* Icons for removing rows */
.fr_body_cells a._remove_row {
	margin-top:45px;
}

.f_row_head a._remove_row {
	display:none;
	float:right;
	margin:20px;
}

@media (max-width: 720px) {
	/* Remove row icons */
	.fr_body_cells a._remove_row {
		display:none;
	}
	
	.f_row_head a._remove_row {
		display:block;
	}
}


/* Positive SSL Site Seal in the head of some form pages */
.positive_ssl_site_seal {
	float: right;
	margin-top: -76px;
	margin-bottom: 10px;
}

@media (max-width: 480px) {
	.positive_ssl_site_seal {
		display: none;
	}
}




/* When a form page is divided into two vertical columns */
.form_columns {
	display: flex;
}

.form_column {
}

.form_column.left {
	width: 300px;
}

.form_column.right {
	flex: 1;
}


@media (max-width: 960px) {
	/* Undo two columns on pick a plan pages for example  */
	.form_columns {
		display: block;
	}

	.form_column.left {
		width: auto;
	}

}


/* Plan blocks or rows have been moved to a separate file. See section-plan_blocks.css */


/* Plan Filtering section, when selecting a plan */
.quote_filters {
}

.quote_filters h2 {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 1px;
	margin-bottom: 15px;
}

.quote_filters fieldset {
	margin-right: 15px;
	display: block;
	margin-bottom: 30px;
}

.quote_filters fieldset legend {
	display: block;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 10px;
	letter-spacing: 1px;
}

.quote_filters fieldset ul {
}

.quote_filters fieldset ul li {
	margin-bottom: 10px;
}

.quote_filters fieldset input[type="radio"] {
	vertical-align: -2px;
}

.quote_filters fieldset label {
	font-size: 18px;
	color: #3B6B90;
}

.quote_filters fieldset label span.count {
	color: #333;
}

.quote_filters fieldset label span.count::before {
	content: "(";
}

.quote_filters fieldset label span.count::after {
	content: ")";
}

.quote_filters fieldset input[type="radio"]:disabled ~ label {
	color: #9A9A9A;
}

.quote_filters fieldset input[type="radio"]:disabled ~ label span.count {
	color: #9A9A9A;
}

/* When the two columns stack up */
@media (max-width: 960px) {
	.quote_filters {
		display: none;
	}
}



/* Left column content, seen on plans page where left column would otherwise be unused, appears in place of refine_search */
.left_column_content {
	margin-right: 15px;
	background-color: #F0F3FB;
	padding: 30px 20px;
}

.left_column_content h2 {
	border: 1px solid #F38538;
	background-color: #FFF;
	text-transform: uppercase;
	margin: 0;
	padding: 10px;
	font-size: 21px;
	text-align: center;
	margin-bottom: 20px;
}

.left_column_content p {
	margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 15px;
}

.left_column_content ul {
	margin-bottom: 10px;
	border: 1px solid transparent;
}

.left_column_content li {
	margin-bottom: 10px;
	font-size: 17px;
}

.left_column_content li::before {
	content: '\2014 ';
}



/* When the left column has ad copy about the selected item */
.coverage_benefits {
	margin: 0 20px;
	background-color: #F0F3FB;
	padding: 20px;
}

/* When column stack rather than being side-by-side */
@media (max-width: 960px) {
	.coverage_benefits {
	}
}

/* When we get into mobile */
@media (max-width: 600px) {
	.coverage_benefits {
		display: none;
	}
}

/* Eligibility Question, appears on eligibility questions page */
.form_row.question {
}

.form_row.question .f_row_body {
	padding: 30px;
}

.form_row.question .fr_body_question {
	border: 1px solid #3B6B90;
	background-color: #FFF;
	padding: 30px;
	display: flex;
	align-items: flex-start;
}

.form_row.question .radio_buttons {
	flex: 0 0 170px;
	margin-left: 15px;
}

.form_row.question .question_text {
	line-height: 1.5;
	font-size: 19px;
	font-weight: 400;
	margin-bottom: 15px;	
}

.form_row.question ul.question_subtext {
	display: block;
	list-style:disc outside none;
    margin: 0 0 1em 0;
    padding-left: 40px;
}
.form_row.question ul.question_subtext li {
	display: list-item;
	margin:0.25em 0;
	line-height: 1.25;
}

.form_row.question .question_text ol.lower-alpha {
	margin-left: 30px;
	list-style-type: lower-alpha;
}

.form_row.question .question_text ul.small-bullet li {
	padding-left: 20px;
	background: transparent url('/_assets/img/icons/bullet-small.svg') no-repeat scroll 0 65%;
}


@media (max-width: 600px) {
	.form_row.question .f_row_body {
		padding: 15px;
	}

	.form_row.question .fr_body_question {
		padding: 15px;
		display: block;
	}
}



/* Framed question, appears on payment page question about 90 days */
.fr_body_cell.framed_question {
	border: 1px solid #3B6B90;
	font-size: 17px;
	background-color: #FFF;
	padding: 20px;
}

.fr_body_cell.framed_question h3 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 15px;
	color: #333;
}

.fr_body_cell.framed_question input[type=radio] {
	display: block;
	float: left;
}

.fr_body_cell.framed_question label {
	display: block;
	margin-bottom: 15px;
	margin-left: 30px;
	color: #333;
}

@media (max-width: 600px) {
	.fr_boy_cell.framed_question {
		padding: 10px;
	}
}



/* Scrolling disclaimer as seeen on payments page */
.scrolling_disclaimer {
	overflow-y: scroll;
	height: 80px;
	border: 1px solid #3B6B90;
	font-size: 17px;
	background-color: #FFF;
	padding: 20px;
	margin-bottom: 15px;
}

.scrolling_disclaimer h3 {
	font-size: 17px;
	font-weight: 600;
	color: #0001;
}

.scrolling_disclaimer h3 a {
	color: #000;
}

.scrolling_disclaimer h3 a:hover,
.scrolling_disclaimer h3 a:focus {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.scrolling_disclaimer {
		padding: 10px;
	}

}

.tipso_bubble {
	z-index: 100000 !important;
}