/* possibly candidates for more global applicability */
.reset{
	line-height: initial;
}

/* reset of rule in layout.css - the rule in layout.css was hiding the yearly option in the billing period dropdown here */
.monthly .quarterly, .monthly .yearly, .quarterly .monthly, .quarterly .yearly, .yearly .monthly, .yearly .quarterly {
	display: block;
}

/* reset for the benefit list in a plan panel*/
.panel > ul {
	margin-left: 0px;
}

/* reset for panel padding */
#stage.config .panel {
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}


select {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url(/images/arrow_blue.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
	font-family: "open_sansregular", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.75rem;
	padding: 3px 2em 3px 5px;
	color: #000;
	border-radius: 4px;
	border: 1px solid #adc3db;
	outline: none;
	margin-bottom: 1em;
	transition: 0.3s all ease;
	width: auto;
	text-indent: 0;
}
/* end of resets */
.text {
	font-family: "open_sansregular", Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: black;
	font-size: 14px;
}


.header {
	color: #064685;
	font-size: 40px;
}

.premiumPlus .plan_hero.header {
	color: #fff;
}

.premiumPlus .plan_hero.header.basic {
	color:#49698A;
}

.header_regular {
	font-family: "open_sansregular", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.header_light {
	font-family: "open_sanslight", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.header_semibold {
	font-family: "open_sanssemibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.header_bold {
	font-family: "open_sansbold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.header_accent {
	font-family: "bebas_neuebold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.header_xxxs {
	font-size: 13px;
}

.header_xxs {
	font-size: 16px;
}

.header_xs {
	font-size: 25px;
}

.premiumPlus .header_xs {
	font-size: 20px;
}

.header_s {
	font-size: 34px;
}

.header_m {
	font-size: 40px;
}

.header_l {
	font-size: 46px;
}

.header_xl {
	font-size: 50px;
}

.header_xxl {
	font-size: 60px;
}

.header_heavy {
	font-weight: 700;
}

.header_upper {
	text-transform:uppercase
}

.header_benefit{
	margin-bottom: 15px;
}

.header_hero {
	margin-top: 20px;
	margin-bottom: 20px;
	letter-spacing: -0.03em;
}

body.premium-plus-page .header_hero{
	margin-top: 36px;
	margin-bottom: 39px;
}

.lineheight1 {
	line-height: 1.75em;
}

.lineheight2 {
	line-height: 2em;
}

.lineheight5 {
	line-height: 5em;
}

.italic {
	font-family: "open_sansitalic", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* margin classes... very presentational... _m suffix means 'medium' */
.margin_top_m {
	margin-top: 20px;
}

.margin_btm_m {
	margin-bottom: 20px;
}


.padding_left_s {
	padding-left:1em;
}

.padding_right_s {
	padding-right:1em;
}
/* end possibly candidates for more global applicability */


/* structure */


/*.plans-container {
	display:grid;
	grid-template-rows: auto;
	grid-template-columns: auto auto;
	grid-column-gap: 10px;
	justify-content: center;
}*/

.plans-container {
	margin-top: 10px;
	display: grid;
	grid-template-rows: repeat(14, auto);
	grid-template-columns: repeat(2, 310px);
	grid-column-gap: 30px;
	grid-auto-flow: column;
	justify-content: center;
}

.plans-container.with_features{
	grid-template-rows: repeat(15, auto);
}

.plans-container.with_features_header{
	grid-template-rows: repeat(16, auto);
}

.plans-container.three_column{
	grid-template-columns: repeat(3, 270px);
	grid-column-gap: 19px;
}

.plans-container-single-column {
	grid-template-columns: repeat(1, 380px);
}

/* plan containers where there's the blue label on top indicating which is your plan need a bit more margin around the top */
.plans-container_yourplanindicator {
	margin-top: 30px;
}

.plans-container_comparefeatures {
	grid-template-rows: repeat(6, auto);
	grid-template-columns: repeat(2, 310px);
}
.plans-container_comparefeatures.premiumPlus {
	grid-template-rows: repeat(7, auto);
}

.benefits-container {
	margin-top: 20px;
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(2, 310px);
	grid-column-gap: 30px;
	grid-auto-flow: column;
	justify-content: center;
}

@media screen and (max-width: 71.25em) {
	.premium-plus-page.compare-features-page #mainframe:not(.sidebar-iconic-contracted) .plans-container.three_column.with_features_header {
		grid-template-rows: repeat(6, auto) 25px repeat(6, auto) 25px repeat(6, auto);
		grid-auto-flow: column;
		grid-template-columns: 270px;
	}
}

@media screen and (max-width: 1021px) {
	.plans-container.three_column {
		grid-column-gap: 3px;
	}
}

@media screen and (max-width: 61em) {
	.premium-plus-page.compare-features-page .plans-container.three_column.with_features_header {
		grid-template-rows: repeat(6, auto) 25px repeat(6, auto) 25px repeat(6, auto);
		grid-auto-flow: column;
		grid-template-columns: 270px;
	}

}

@media screen and (max-width: 52.5em) {
	.plans-container {
		display: grid;
		grid-template-rows: repeat(13, auto) 45px repeat(14, auto);
		grid-template-columns: auto;
		grid-column-gap: 10px;
		grid-auto-flow: column;
	}

	.plans-container.three_column{
		grid-template-columns: 270px;
		grid-column-gap: 19px;
	}

	.plans-container.three_column.with_features_header{
		grid-template-rows: repeat(16, auto) 45px repeat(15, auto) 45px repeat(15, auto);
	}

	.plans-container_comparefeatures {
		grid-template-rows: repeat(5, auto) 20px repeat(5, auto);
		grid-template-columns: auto;
	}
	.benefits-container {
		grid-template-rows: repeat(2, auto) 20px repeat(3, auto);
		grid-template-columns: auto;
	}
}

.panel {
	display: grid;
	justify-content: center;
	justify-items: center;
}

.panel_dropdown {
	justify-items: normal;
	justify-content: normal;
}

/* end structure */


/* 'skin' */

body {
	background-color: #E7EFF5;
}

h1 {
	font-family: "open_sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 2.25em;
	text-transform: none;
	letter-spacing: unset;
	margin-bottom: 0em;
	margin-top: 0px;

}

.scblue {

	color: #064685;

}

.centered {
	width: 100%;
	text-align: center;
	display: grid;
	justify-content: center;
	justify-items: center;
}

.plan-basic-padding {
	padding-top: 9px;
}

.plan {
	width: 310px;

}

.plan-header {
	padding-top: 8px;
}


body.responsive-page .panel,
.panel {
	background-color: #fff;
	border-radius: 0px;
	border: 0px;
	margin-bottom: 0px;
	border-left: 1px solid #aec3db;
	border-right: 1px solid #aec3db;
	padding: 0px; /* reset */
	padding-top: 10px;
}

body.responsive-page.premium-plus-page .panel, .premiumPlus .panel {
	background-color: #F5FAFE;
}


body.responsive-page .panel-alt, .panel-alt {
	background-color: #F5F8FB;
}

.panel-alt .stylized_select, .panel-alt .stylized_options {
	background-color: #F5F8FB;
}

.panel-alt .stylized_select, .panel-alt .stylized_options li {
	 background-color: #F5F8FB;
}

.panel-alt .stylized_options {
	background-color: #F5F8FB;
}

body.responsive-page .panel_top,
.panel_top {
	border-top: 1px solid #aec3db;
	border-radius: 4px 4px 0px 0px;
}

body.responsive-page .panel_bottom,
.panel_bottom {
	border-bottom: 1px solid #aec3db;
	border-radius: 0px 0px 4px 4px;
}

body.responsive-page.premium-plus-page .panel_bottom, .premiumPlus .panel_bottom {
	border-bottom: 0px solid #aec3db;
}

img.checkmark {
	margin-left: 10px;
	margin-right: 5px;
}


.benefits-alt.under-button-benefits {
	margin-top:15px;
}

.disabled_select {
	font-family: "open_sansregular", Arial, "Helvetica Neue", Helvetica, sans-serif;
	background-color: transparent;
	font-size: 12px;
	background-position: calc(100% - 9px) center;
	border: 1px solid #aec3db;
	border-radius: 4px;
	padding: 4px;
}
.disabled_select strong {
	font-size: 16px;
}


.panel_dropdown,
#stage.config .panel_dropdown, /* unfortunate... an override for padding in app.css. the rule there uses an id so would always override this otherwise*/
body.responsive-page .panel.panel_dropdown /* this style was being overridden after the page got the responsive-page class*/
{
	padding-left: 5%;
	padding-right: 5%;
}

body.responsive-page .plan_hero,
.plan_hero {
	background-color: #F5F8FB;
}

body.responsive-page .premiumPlus .panel.header.plan_hero, .premiumPlus .panel.header.plan_hero {
	padding-top:0px;
}

body.responsive-page .premiumPlus .plan_hero.basic,
.premiumPlus .plan_hero.basic {
	background-color: #C5D4E3;
}

body.responsive-page .premiumPlus .plan_hero.premium,
.premiumPlus .plan_hero.premium {
	background-color: #12BDEF;
}

body.responsive-page .premiumPlus .plan_hero.premiumPlus,
.premiumPlus .plan_hero.premiumPlus {
	background-color: #0078D3;
}

body.responsive-page .plan_hero_bottom,
.plan_hero_bottom {
	align-content: end;
	border-bottom: 1px solid #aec3db;
}

body.responsive-page .premiumPlus .plan_hero_bottom,
.premiumPlus .plan_hero_bottom {
	border-bottom: 0px solid #aec3db;
}

body.responsive-page .premiumPlus .panel_top,
.premiumPlus .panel_top {
	border-top: 0px solid #aec3db;
}

body.responsive-page .premiumPlus .panel,
.premiumPlus .panel {
	border-left: 0px solid #aec3db;
	border-right: 0px solid #aec3db;
}


.plan_hero_image {
	width: 90%;
}

.features_header {
	color:#333333;
	line-height: 30px;
	padding-top: 7px;
}

/*.panel {
	width: 290px;
	max-width: 90%;
	float: left;
	margin: 1% 1% 2em;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0px;
}

.panel {
	height: 510px;
	grid-template-rows: 210px 300px 0px;
}*/




select {
	background-color: white;
}

.custom-signup-banner {
	margin-bottom: 90px;
}

/*
.per-project-pricing.custom-signup-banner h3 {
	font-family: "open_sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size:1.5em;
	color: #064685;
	line-height: 32px;
	margin-bottom: 14px;
	text-align: center;
}*/

.plan-benefits-list {
	margin-top: 0px;
}

body.responsive-page .btn_plan, /* An unfortunately necessary override selector, otherwise app.css body.responsive-page .btn overrides*/
.btn_plan {
	font-family: "open_sansbold", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 15px;
	width: 234px;
	height: 50px;
	padding: 0px; /* reset any padding .btn class might apply */
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: 234px;
	grid-template-rows: 44px;
	justify-items: center;
	align-items: center;
	margin-bottom: 30px;
}

/*.end-trial-page .plan-benefits-list ul li
{
	font-size:14px;
	margin-bottom:15px;
}*/

:root {
	--benefit-margin-left: 30px;
	--sub-benefit-margin-left: 42px;
}

.benefit {
	list-style: none;
	line-height: 1.5em;
	background-image: url(/images/check_blue.svg);
	background-repeat: no-repeat;
	padding-left: var(--benefit-margin-left);
	margin-bottom: 0.75em;
	background-position-y: 6px;
	font-size: 14px;
	font-weight: 400;
	color: #333333;
}

.no_list_style{
	list-style: none;
}

.sub_benefit_list {
	margin-top: 14px;
	margin-left: var(--sub-benefit-margin-left);
}

.benefit .sub_benefit_list {
	margin-left: calc(var(--sub-benefit-margin-left) - var(--benefit-margin-left));
}

.sub_benefit_list li {
	font-size: 14px;
	font-weight: 400;
}

.sub_benefit {
	background-image: url(/images/bullet_arrow_plans.svg);
	margin-top: 10px;
	padding-left: 21px;
}

.benefit .feature-tooltip-icon {
	background-color: white;
	border-radius: 10px;
	margin-left: 5px;
}

/* The .quota class below may not be in use anywhere anymore???? */
.quota {
	padding-top: 0px;
}

#stage.config .quota-shifted-up, /* unfortunate... an override for padding in app.css. the rule there uses an id so would always override this otherwise*/
.quota-shifted-up {
	padding-top: 0px;
	padding-bottom: 10px;
	color: #666;
}

.custom-signup-banner {
	margin-top: 35px;
}


#plan-active-container {
	position: absolute;
	margin-top: -196px;
	display: block;
	width: 310px;
	text-align: center;
}

.premium-plus-page #plan-active-container{
	width:254px;
}

#plan-active-container.grid-top-version {
	position: relative;
	margin-top: -16px;
	height: 0px;
}

#plan-active-inner {
	background-color: #0078D3;
	background-image: url(/images/check_light_blue_small.svg);
	background-repeat: no-repeat;
	background-position: 3px 3px;
	font-family: "open_sansbold", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	line-height: 28px;
	color: #ffff;
	padding: 2px 10px 2px 35px;
	border-radius: 15px;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}

.premium-plus-page #plan-active-inner {
	background-color: #FFFFFF;
	background-image: url(/images/icon_your_trial_plan.svg);
	background-repeat: no-repeat;
	background-position: 4px 4px;
	font-family: "open_sansbold", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px;
	color: #0078D3;
	padding: 2px 10px 2px 24px;
	border-radius: 23px;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}

.binary-dropdown-container {
	display: none; /* default hidden - per project pricing js will show the dropdown if appropriate */
}
/* end skin */

@media screen and (max-width: 37.5em) {
	body.project-end-trial-page {
		line-height: 0;
	}

	#subnav {
		background: #fff;
	}

	#subnav h2 {
		margin-bottom: 0.35em;
		margin-top: 0;
		padding-top: .25em;
		margin-left: 0.5em;
	}

	#main-col-inner {
		margin-top: 4.25em;
	}

	body.responsive-page #main-col-inner h1.header,
	#main-col-inner h1.header {
		margin-left: 0px;
		line-height: 1.25em;
		margin-bottom: 0.75em;
		padding: 0 0.5em;
	}
}

/* override of app css .project-plans rule for the single project adjust plan page*/
.project-plans {
	display: block;
}

.inline-block {
	display: inline-block;
}

.compare-plans-container {
	display: grid;
	justify-content: center;
}

#stage .panel p.yearly_saving {
	margin-bottom: 10px;
	margin-top: 10px;
}

.session-replay-tooltip-icon{
	margin-left:5px;
}

body.responsive-page .panel.panel_disabled {
	pointer-events: none;
	background-color: #F5FAFE;
}

body.responsive-page .panel.panel_disabled.plan_hero.basic,
body.responsive-page .panel.panel_disabled.plan_hero.premium {
	background-color: #D4DFEC;
}

body.responsive-page .panel.panel_disabled .stylized_select_wrapper .stylized_select,
body.responsive-page .panel.panel_disabled .disabled_select,
body.responsive-page .panel.panel_disabled .binary-dropdown-container select{
	color:#71859D;
	background-color: #F5FAFE;
}
body.responsive-page .panel.panel_disabled_text, body.responsive-page .panel.panel_disabled_text .benefit {
	opacity: 1;
	background-color: #F5FAFE;
	color:#71859D;
}

#stage.config .panel.panel_disabled.quota-shifted-up,
body.responsive-page .panel.panel_disabled .binary-dropdown-container ,
body.responsive-page .panel.panel_disabled .yearly_saving {
	color:#71859D;
}

body.responsive-page .panel.panel_disabled_text .benefit {
	background-image: url(/images/check_blue_disabled.svg);
}

body.responsive-page .panel_disabled.panel_bottom .btn{
	opacity: 0.0;
}

body.responsive-page .premiumPlus .panel_disabled.plan_hero.basic, .premiumPlus .panel_disabled.plan_hero.basic{
	background-color:rgba(197, 212, 227, 0.7);
}

body.responsive-page .premiumPlus .panel_disabled.plan_hero.premium, .premiumPlus .panel_disabled.plan_hero.premium{
	background-color:rgba(197, 212, 227, 0.7);
}


body.responsive-page .premiumPlus .panel_disabled.plan_hero, .premiumPlus .panel_disabled.plan_hero{
	color: #71859D;
}

body.responsive-page .premiumPlus .panel_disabled.header {
	color: #71859D;
}

.panel_disabled .stylized_select {
	background-image: none;
}
.reduced_letter_spacing {
	padding-left: 150px;
	padding-right: 150px;
	line-height: 1.25em;
	margin-top: 20px;
	margin-bottom: 20px;
}

body.responsive-page #stage .our-customers{
	margin-top: 2em;
}

body.responsive-page #stage .our-customers p {
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 10px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

body.responsive-page #stage .our-customers .customer-quote {
	margin-top: 2em;
}

body.responsive-page .plan_hero,
.plan_hero {
	background-color: #F5F8FB;
}

body.responsive-page .premiumPlus .panel.header.plan_hero, .premiumPlus .panel.header.plan_hero {
	padding-top:0px;
}

body.responsive-page #stage h1.our-customers-header {
	margin-top: 1em;
}

.centered_without_grid {
	width: 100%;
	text-align: center;
	justify-content: center;
	justify-items: center;
}