/*
Theme Name: Child Mental Health Treatment Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0a15
Description: Custom WordPress theme that extends the builder theme.
Author: Nerdery
Author URI: https://nerdery.com
template: bb-theme
*/

/* Add your custom styles here... */

/* ---------------------------------------------------------------------
Mayo Fonts
------------------------------------------------------------------------ */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 9, 2020 */
@font-face {
	font-family: 'Mayo Clinic Sans Bold';
	src: url('fonts/mayoclinicsans-bold-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicsans-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}
.gform_wrapper .gform_page .gform_page_footer
@font-face {
	font-family: 'Mayo Clinic Sans Regular';
	src: url('fonts/mayoclinicsans-regular-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicsans-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Sans PC Bold';
	src: url('fonts/mayoclinicsanspc-bold-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicsanspc-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif Bold';
	src: url('fonts/mayoclinicserif-bold-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserif-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif Regular';
	src: url('fonts/mayoclinicserif-regular-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserif-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif Display Bold';
	src: url('fonts/mayoclinicserifdisplay-bold-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserifdisplay-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif Display Regular';
	src: url('fonts/mayoclinicserifdisplay-regular-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserifdisplay-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif PC Bold';
	src: url('fonts/mayoclinicserifpc-bold-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserifpc-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'Mayo Clinic Serif PC Regular';
	src: url('fonts/mayoclinicserifpc-regular-webfont.woff2') format('woff2'),
	url('fonts/mayoclinicserifpc-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

/* Set the bold font for bold tags. */
.fl-builder-content .fl-rich-text strong,
.fl-builder-content .fl-rich-text b {
	font-family: "Mayo Clinic Sans Bold";
}

/* Set the bold header font for bold header tags in the rich text editor. */
.fl-builder-content .fl-rich-text h1 strong,
.fl-builder-content .fl-rich-text h2 strong,
.fl-builder-content .fl-rich-text h3 strong,
.fl-builder-content .fl-rich-text h4 strong,
.fl-builder-content .fl-rich-text h5 strong,
.fl-builder-content .fl-rich-text h6 strong {
	font-family: "Mayo Clinic Serif Display Bold";
}

/* ---------------------------------------------------------------------
Generic Classes
------------------------------------------------------------------------ */
.downloadLinkIsHidden {
	display: none !important;
}

.isCentered {
	text-align: center;
}

/* ---------------------------------------------------------------------
Motivation Plan - Part of Gravity Forms
------------------------------------------------------------------------ */
.motivation_plan span {
	text-transform: lowercase;
}

/* ---------------------------------------------------------------------
Gravity Forms Checkboxes
Not sure why we have to have specific browser classes, but that's
what we're overwriting.
------------------------------------------------------------------------ */
.fl-module-content .gform_wrapper .gfield_checkbox li input,
.fl-module-content .gform_wrapper .gfield_checkbox li input[type=checkbox],
.fl-module-content .gform_wrapper .gfield_radio li input[type=radio],
.fl-module-content .gform_wrapper.gf_browser_chrome .gfield_checkbox li input,
.fl-module-content .gform_wrapper.gf_browser_chrome .gfield_checkbox li input[type=checkbox],
.fl-module-content .gform_wrapper.gf_browser_chrome .gfield_radio li input[type=radio],
.fl-module-content .gform_wrapper.gf_browser_safari .gfield_checkbox li input,
.fl-module-content .gform_wrapper.gf_browser_safari .gfield_checkbox li input[type=checkbox],
.fl-module-content .gform_wrapper.gf_browser_safari .gfield_radio li input[type=radio] {
	margin-top: 8px;
	vertical-align: top;
}

/* ---------------------------------------------------------------------
Gravity Forms Correct/Incorrect Answers
------------------------------------------------------------------------ */
.fl-module-content .gf-incorrect,
.fl-module-content .gf-correct {
	border-left: 2px solid #e4002b;
	padding-left: 10px;
	margin-left: 6px !important;
	font-style: italic;
}

.fl-module-content .gf-correct {
	border-left: 2px solid #00873e;
}

/* ---------------------------------------------------------------------
Accordions
------------------------------------------------------------------------ */

.gfieldset-legend,
.gform_wrapper .gform_page .gsection {
	border: none;
}

.gform_wrapper .gform_page .gsection {
	margin-bottom: 10px;
}

.gform_wrapper .gform_page .gform_page_footer {
	border-top: none;
	padding-top: 30px;
}

.gform_wrapper:not(.gform_validation_error) .accordion_step .gfieldset > ul.gform_fields,
.m_section {
	display: none;
}

body .gform_wrapper .accordion_step .m_section > li:first-child,
body .gform_wrapper li.hidden_label input {
	margin-top: 0;
}

.gform_wrapper .accordion_step .gfieldset ul.gform_fields {
	margin-bottom: 30px !important;
}

.gform_wrapper .gsection.gsection_child {
	margin-bottom: 0;
}

body .gform_wrapper .accordion_step .ginput_container_checkbox,
body .gform_wrapper .fear_accordion_step .ginput_container_checkbox {
	margin-left: 10px;
}

body .gform_wrapper .accordion_step .accordion-mix,
body .gform_wrapper .accordion_step .accordion-mix ul,
body .gform_wrapper .accordion_step .accordion-mix .ginput_container {
	margin: 0px !important;
}

.gform_wrapper .accordion_step .accordion-mix ul.gfield_checkbox li {
	border-bottom: 0px;
	margin: 0px;
	padding: 5px !important;
}

.gform_wrapper .accordion_step .gfieldset ul li:not(.accordion-mix) {
	border-bottom: 0px;
	margin: 0px;
	padding: 5px 0px 5px 30px !important;
}

.gfieldset .accordion_step .gfield_checkbox {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.gform_wrapper .accordion_step .gfieldset .gfield_label {
	display: none;
}

/* fear accordion */
.fear_accordion_step .gfieldset-legend,
.fear_accordion_step .accordion-mix .ginput_container {
	display: none;
}

.fl-module-content .gform_wrapper label.accordion-parent,
.fl-module-content .gform_wrapper .top_label .gfield_label, .gform_wrapper legend.gfield_label,
.fl-module-content .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label,
.fl-module-content .gform_wrapper .gfield_radio li label, .gform_wrapper .gfield_radio li label {
	font-size: 18px;
	font-weight: 400;
}

.fl-module-content .gform_wrapper ul.gfield_checkbox li input[type="checkbox"] + label,
.fl-module-content .gform_wrapper ul.gfield_radio li input[type="radio"] + label,
.fl-module-content .gform_wrapper ul.gfield_checkbox li input[type="checkbox"]:checked + label,
.fl-module-content .gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label {
	font-weight: 400;
}


.fear_accordion_step fieldset {
	margin-left: 40px;
}

/* ---------------------------------------------------------------------
Menu Focus/Hover States
------------------------------------------------------------------------ */
/*Important to override something in the Builder theme.*/
.menu-item {
	border-bottom: 2px solid transparent !important;
}

.menu-item:hover {
	border-bottom: 2px solid #000000 !important;
}

/* ---------------------------------------------------------------------
SubMenu Indents
------------------------------------------------------------------------ */
.fl-menu-mobile-clone ul.sub-menu {
	padding-left: 20px;
}

.current_page_item,
.current-menu-item,
.current_page_parent {
	border-bottom: 2px solid #0057B8 !important;
}

/* ---------------------------------------------------------------------
Covid-19 Accordion Button
------------------------------------------------------------------------ */
.covid90-accordion .fl-accordion-content a {
	color: #111;
	background-color: #fff;
	border: 1px solid #111;
	font-size: 16px;
	text-transform: uppercase;
}

.covid90-accordion .fl-accordion-content a:hover {
	background-color: #0057b8;
	color: #fff;
	text-decoration: none;
}

.covid90-accordion .fl-accordion-content p {
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
Global Button Edits
------------------------------------------------------------------------ */

.fl-builder-content a.fl-button,
.covid90-accordion .fl-accordion-content a,
.fl-page input[type="button"],
.fl-page input[type="submit"],
.fl-button.button {
	padding: 5px 40px;
}

.fl-page input[type="submit"],
.fl-page input[type="button"],
.fl-page .gform_wrapper .gform_page_footer input.button {
	font-size: 16px;
}

.fl-builder-content a.fl-button:hover,
.covid90-accordion .fl-accordion-content a:hover,
.fl-page input[type="button"]:hover,
.fl-page input[type="submit"]:hover {
	border: 1px solid #0057b8;
}

.a_expand::after {
	font-family: "Font Awesome 5 Free";
	content: "\f107";
	margin-left: 5px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
Buttons in accordions for mobile
------------------------------------------------------------------------ */
@media only screen and (max-width: 650px) {
	.covid90-accordion .fl-accordion-content a {
		padding: 5px 10px;
		display: block;
	}
}

/* ---------------------------------------------------------------------
Responsive Embeds
------------------------------------------------------------------------ */

.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}

/* ---------------------------------------------------------------------
GF Progress Bar
------------------------------------------------------------------------ */
.fl-module-content .gf_progressbar_title {
	display: none;
}

.fl-module-content .gform_wrapper .gf_progressbar {
	background: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.fl-module-content .gform_wrapper .gf_progressbar::after {
	border-radius: 0;
	background-color: #333;
	opacity: .1;
}

.fl-module-content .gform_wrapper .gf_progressbar_percentage {
	background-image: none;
	background-color: #0057b8;
	border-radius: 0;
}

.fl-module-content .gform_wrapper .gf_progressbar_wrapper {
	border-bottom: none;
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.fl-module-content .gform_wrapper .gf_progressbar_percentage.percentbar_100 {
	border-radius: 0;
}

/* ---------------------------------------------------------------------
My Cycle container styles
------------------------------------------------------------------------ */
/* parent container */

.cycle-container {
	padding-bottom: 24px;
	margin-bottom: 54px;
	margin-top: 24px;
}

/* cycle cards */

.cycle {
	padding: 10px;
	background-color: #ffffff;
	text-align: center;
	position: relative;
	border-radius: 4px;
  box-shadow: 0 10px 20px 0 rgba(168, 168, 168, 0.2);
	border: solid 1px #000000;
	z-index: 10;
	max-height: 100px;

}

.cycle-bd {
	max-height: 80px;
	overflow-y: auto;
}

.cycle:before {
	display: block;
	content: '';
	position: absolute;
}

.cycle_inner:before {
	background-color: #0057B8;
	width: 32px;
	height: 10px;
	border-radius: 5px;
	left: 50%;
	top: -5px;
	transform: translateX(-50%);
}

.cycle_outer {
	border: 1px solid #A8A8A8;
}

.cycle_outer:before {
	background-color: #00873E;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	position: absolute;
	left: -10px;
	top: -20px;
	border: 10px solid #ffffff;
}


.cycle-label {
	font-family: 'Mayo Clinic Serif Bold', serif;
	font-size: 16px;
}

.cycle-label_inner {
	color: #0057B8;
}

.cycle-label_outer {
	color: #00873E;
}

.cycle-value {
	font-size: 12px;
	font-family: 'Mayo Clinic Sans Regular', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
Tables!
------------------------------------------------------------------------ */
.fl-rich-text td {
	padding: 5px;
	border: 1px solid #ccc;
}

.my-cycles-table {
	width: 100%;
	min-width: 750px;
	margin-bottom: 20px;
	table-layout: fixed;
}
.my-cycles-table th {
	background: #0057B8;
	color: #fff;
	padding: 7px 14px;
}
.my-cycles-table tr {
	background: #f7f7f7;
	color: #666666;
	padding: 7px;
}
.my-cycles-table td {
	padding: 7px 14px;
}
.my-cycles-table tr:nth-child(odd) {
	background: #fff;
	color: #666666;
}


/* ---------------------------------------------------------------------
Grid - for Anxiety
------------------------------------------------------------------------ */
.scroll-container {
	overflow-x: scroll;
} /* to allow the user to scroll the graphic on smaller viewports */

.grid {
  display: inline-grid;
	grid-template-rows: 1fr 2fr 1fr;
	/* 7 col / 3 row */
	grid-template-columns: [col] 200px [col] 75px [col] 200px [col] 75px [col] 200px [col] 75px [col] 200px;
	align-items: center;
	grid-row-gap: 10%;
	min-width: 890px; /* adds min-width to keep elements from getting squished on mobile */
}

.grid-col {
	text-align: center;
	position: relative;
}

/* 1st row / 1st graphic */
.grid-col_sets-off {
  grid-column: col;
	grid-row: 1;
	align-self: flex-start;
}

.grid-col_sets-off .arrow_right-dark {
	position: absolute;
	top: 20px;
	left: 70%;
}

.grid-col_expectations {
  grid-column: col 3;
	grid-row: 1;
	align-self: flex-start;
}

.grid-col_expectations .arrow_down-dark {
	position: absolute;
	left: 50%;
	top: 50%;
}

.grid-col_expectations .arrow_right-dark {
	position: absolute;
	top: 20px;
	left: 70%;
}

.grid-col_expectations .arrow_right-dark {
	position: absolute;
	top: 20px;
}

.grid-col_face-fears {
	grid-column: col 5;
	grid-row: 1;
	align-self: flex-start;
}

.grid-col_face-fears .arrow_right-gray {
	position: absolute;
	top: 20px;
	left: 70%;
}

.grid-col_new-expectations {
	grid-column: col 7;
	grid-row: 1;
	align-self: flex-start;
}

.grid-col_new-expectations .arrow_down-gray {
	position: absolute;
	left: 50%;
}

/* 2nd row */
.grid-col_same-expectations {
  grid-column: col;
  grid-row: 2;
}

.grid-col_heading-anxiety {
	grid-column: col 2;
	grid-row: 2;
;
}

.grid-col_heading-anxiety .grid-col-hdg {
	transform: translateX(25%);
}

.grid-col_arrow-down-dark {
	grid-column: col 3;
	grid-row: 2;
}

.grid-col_arrow-up-gray {
	grid-column: col 5;
	grid-row: 2;
}

.grid-col_heading-exposure {
	grid-column: col 6;
	grid-row: 2;
}

.grid-col_arrow-down-gray {
	grid-column: col 7;
	grid-row: 2;
}

/* 3rd row */
.grid-col_reinforcements {
  grid-column: col;
	grid-row: 3;
}

.grid-col_arrow-reinforcements {
  grid-column: col 2;
  grid-row: 3;
}

.grid-col_avoidance {
  grid-column: col 3;
	grid-row: 3;
}

.grid-col_avoidance .arrow_left-dark {
	position: absolute;
	top: 20px;
	right: 30%;
}

.grid-col_build-confidence {
	grid-column: col 5;
	grid-row: 3;
}

.grid-col_build-confidence .arrow_up-gray {
	position: absolute;
	left: 50%;
	bottom: 50%;
}

.grid-col_arrow-face-fears-secondary {
	grid-column: 6;
	grid-row: 3;
}

.grid-col_face-fears_secondary {
	grid-column: col 7;
	grid-row: 3;
}


.grid-col_face-fears_secondary .arrow_left-gray {
	position: absolute;
	top: 20px;
	right: 30%;
}

/* heading styles */
.grid-col-hdg {
	text-align: center;
  font-family: 'Mayo Clinic Serif Bold';
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
	color: #000000;
	position: absolute;
}

/*-----------------------------------------------------------------------------
Arrows - background images
------------------------------------------------------------------------------- */
.arrow {
	width: 100%;
	height: 20px; /* make em big for now */
	background-repeat: no-repeat;
}

.arrow_right-dark {
	background-image: url(../bb-theme-child/img/right_arrow.svg);
}

.arrow_up-dark {
	background-image: url(../bb-theme-child/img/up_arrow_short.svg);
}

.arrow_left-dark {
	background-image: url(../bb-theme-child/img/left_arrow.svg);
}

.arrow_down-dark {
	background-image: url(../bb-theme-child/img/down_arrow_long.svg);
	height: 230px;
}

.arrow_down-gray {
	background-image: url(../bb-theme-child/img/gray_down_arrow.svg);
}

.arrow_left-gray {
	background-image: url(../bb-theme-child/img/gray_left_arrow.svg);
}

.arrow_down-gray {
	background-image: url(../bb-theme-child/img/down_arrow_long_gray.svg);
	height: 230px;
}

.arrow_right-gray {
	background-image: url(../bb-theme-child/img/gray_right_arrow.svg);
}

.arrow_up-gray {
	background-image: url(../bb-theme-child/img/up_arrow_long_gray.svg);
	height: 230px;
}

/*-----------------------------------------------------------------------------
Arrows - alignment: these are in their own grid-col but need some alignment with the boxes
------------------------------------------------------------------------------- */

.grid-col_same-expectations .arrow_up-dark,
.grid-col_reinforcements .arrow_up-dark {
	height: 100px;
	position: absolute;
	left: 47%;
	top: -30px;
}

.arrow_aligned-horizontal {
	position: absolute;
	top: 20px;
}

.arrow_aligned-vertical {
	position: absolute;
}

.arrow_aligned-bottom {
	bottom: -60px;
}

.arrow_aligned-top {
	top: -50px;
}

.grid-col_arrow-down-dark .arrow {
	left: 50%;
}

.grid-col_arrow-up-gray .arrow,
.grid-col_arrow-down-gray .arrow {
	left: 50%;
}

.grid-col_arrow-reinforcements .arrow,
.grid-col_arrow-face-fears-secondary .arrow {
	right: -30%;
}



/* ---------------------------------------------------------------------
	Fear Ladder Table
------------------------------------------------------------------------ */
.fear-ladder {
	width: 100%;
	margin-bottom: 20px;
	table-layout: fixed;
}

.fear-ladder th {
	background: #0057B8;
	color: #fff;
	padding: 7px 14px;
}

.fear-ladder th:first-of-type {
	width: 70%;
}

@media only screen and (max-width: 500px) {
	.fear-ladder th:first-of-type {
		width: 60%;
	}
}

.fear-ladder tr {
	background: #f7f7f7;
	color: #666666;
	padding: 7px;
}

.fear-ladder td {
	padding: 7px 14px;
}

.fear-ladder tr:nth-child(odd) {
	background: #fff;
	color: #666666;
}

/* ---------------------------------------------------------------------
	Media Queries to add background images on tablet and desktop
------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
Trying to make the page bigger when we take screenshots.
------------------------------------------------------------------------ */
.js-min-screensize {
	min-width: 1200px !important;
	font-variant-ligatures: none !important;
	padding: 30px;
}

.js-ss-add-padding {
	padding: 20px;
}

/* ---------------------------------------------------------------------
Section Navigation
------------------------------------------------------------------------ */
.section_navigation .fl-button {
	display: inline-block;
	margin-right: 20px;
	margin-top: 20px;
}

.section_navigation .fl-button .fas,
.gfield .fl-button .fas {
	line-height: 1;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
Icons in download buttons
------------------------------------------------------------------------ */
.fl-builder-content a.mix-flexbox {
	display: inline-flex;
	align-items: normal;
}

/* ---------------------------------------------------------------------
Form downloading and email
------------------------------------------------------------------------ */
.cmh-confirmation-section {
	border: 1px solid #ccc;
}
.cmh-email-form {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #ccc;
}
.cmh-email-error {
	border-color: red !important;
}

.cmh-user-feedback-error {
	color: red;
}

.cmh-user-feedback-success {
	color: green;
}