* {
	box-sizing: border-box;	
}

*:focus {
	outline: none !important;
	outline-width: none;
    box-shadow: none;
}

body {
	overflow-y: scroll;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 140%;
	-webkit-text-size-adjust: none;
}

.scroll_down {
	position: fixed;
	bottom: 60px;
	left: 90%;
	color: black;
	width: 50px;
}

.invisible {
	display: none !important;
}

.phone_screen {
	display: none;
}

.expand_element {
	cursor: pointer;
}

h1 {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	color: #132092;
	text-transform: uppercase;
	justify-self: center;
	margin: 0px;
	line-height: 72px;
}

h2 {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	font-size: 20px;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	margin: 0px;
	padding-top: 8px;
	padding-bottom: 10px;
}

h3 {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	color: #036092;
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	margin: 0px;
}

h4 {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	color: #036092;
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	margin: 0px;
}

h5 {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	color: #036092;
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	margin: 0px;
	text-align: center;
}

sup {
	font-size: 10px;
}

.gradient_text {
	justify-self: start;
	color: #161616;
	font-size: 48px;
	align-self: end;
}

.centered {
	justify-self: center;
	
}

.no_bottom_padding {
	padding-bottom: 0px !important;
}

.pseudo_element {
	display: grid;
	content: " ";
	width: 250px;
	height: 1px;
	position: fixed;
	bottom: 0px;
	justify-self: center;
}	

/* Main page emphasis */
.inline_emphasis1 {
	display: inline;
	font-size: 52px;
	font-weight: 480;
	
}
.inline_emphasis2 {
	display: inline;
	font-size: 42px;
	font-weight: 480;
	
}
.inline_emphasis3 {
	display: inline;
	font-size: 32px;
	font-weight: 480;
	
}
.inline_emphasis4 {
	display: inline;
	font-size: 32px;
	font-weight: 480;
	
}

a {
	color: #003FD1;
	text-decoration: none;
	font-weight: 480;
}

a:hover {
	color: #5283F5;
	text-decoration: none;
	font-weight: 480;
}
a:active {
	color: #113DA1;
	text-decoration: none;
	font-weight: 480;
}

button {
	font-family: "Red Hat Display", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	border: none;
    padding: 8px 25px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25rem;
	height: fit-content;
}

.tos_page {
	display: grid;
	padding: 20px;
}

.tos_page p {
	margin-top: 0px;
	margin-bottom: 10px;
}

.tos_page ul {
	margin-top: 0px;
	margin-bottom: 10px;
}

.tos_page br {
	margin: 0px;
}

/* Main page */

.page {	
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"main"
		"footer";
	min-height: 100%;
	background: #F7F7F7;
	justify-items: center;
}

/* Common Header */

header {
	position: sticky;
	top: 0; 
	grid-area: header;
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	grid-template-areas: "logo nav tokens buttons";
	border-bottom: 0px solid #cecece;
	align-content: center;
	align-items: center;
	color: #9f9c9c;
	background-color: white;
	justify-self: center;
	width: 100%;
	z-index: 20;
	padding: 0px 30px;
	height: 55px;
}

header logo {
	display: grid;
	grid-area: logo;
	object-fit: contain;
	align-content: center;
	justify-self: start;
	max-height: 100%;
	color: #51bb7b;
}

header logo img {
	width: 300px;
	display: grid;
}

header nav {
	grid-area: nav;
	list-style-type: none;
	align-content: center;
	justify-self: start;
	justify-content: start;
    text-transform: uppercase;
}

.nav_mobile {
	display: none;
}

.menu_icon {
	display: none;
	grid-area: buttons;
	justify-self: center;
	align-self: center;
	padding: 0px 5px;
	cursor: pointer;
}

header nav li {
	display: inline-block;
	padding: 0 10px;
	font-size: 1em;
}

header .buttons {
	display: grid;
	grid-area: buttons;
	justify-self: end;
	justify-items: right;
	grid-template-columns: auto auto;
	align-content: center;
	column-gap: 10px;
}

header .tokens {
	display: flex;
	grid-area: tokens;
	align-content: center;
	justify-self: end;
	cursor: pointer;
}	

header nav a {
	text-decoration: none;
	color: inherit;
	opacity: 0.6;
	transition: 0.3s;
}

header nav a button:active {
	opacity:1;
}

header nav a {
	color: #000000;
}

header nav a.active, header nav a:hover {
	opacity: 1;
	color: #000000;
}  

header button:hover {
	opacity: 1;
}

header a button {
    color: #FFFFFF;
   	background-color: #2F2E7E;
	justify-self: left;
	font-size: 1em;
	margin: 5px 0px;
}


.signup_button {
	background: linear-gradient(209deg, #2a9bd7 0%, #132092 100%);
	color: #FFFFFF;
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 1;	
	transition: 0.3s;
	margin: 5px 0px;
	padding: 8px 25px;
}

.signup_button:hover {
	opacity: 1;
}

.otp {
	margin: 20px 0px 0px 0px;
}

.otp_window .otp_resend_button, .otp_window .prompt {
	display: none;
}

.otp_message {
	padding-top: 10px;
}	

.otp_resend_container {
	height: 30px;
}

.account_button {
	justify-self: left;
	background: #132092;
	color: #FFFFFF;
	font-size: 1em;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
}

.account_button:hover {
	opacity: 0.8;
}

.signout_button {
	background: #d7dbe5;
	color: #2f3236;
	font-size: 1em;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
}

.signout_button:hover, .signup_button:hover {
	opacity: 0.8;
}

.signin_button:disabled {
	background-color: #DCDCDC;
	color: #666666;
	opacity: 1;
}

.signin_button {
	background: #132092;
	color: #FFFFFF;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
}

.signin_button:hover {
	opacity: 0.8;
}

.signin_hero_button {
	width: fit-content;
	justify-self: center;
	background: linear-gradient(209deg, #2a9bd7 0%, #132092 100%);
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 1;	
	transition: 0.3s;
	margin: 10px 0px;
}

.signin_hero_button:hover {
	opacity: 0.9 !important;
	transition: 0.3s !important;
}

.ghost_button {
	width: fit-content;
	justify-self: center;
	background: #ffffff;
	color: #0367d7;
	font-size: 20px;
	font-weight: 600;
	border: 3px solid #0367d7;
	text-transform: uppercase;
	opacity: 0.8;	
	transition: 0.3s;
	padding: 5px 25px;
	margin: 10px 0px;
}

.ghost_button:hover {
	opacity: 1 !important;
	transition: 0.3s !important;
}

.prefooter {
	align-self: end;
}

.footermenu {
	display: grid;
	grid-template-columns: repeat(3,1fr) auto;
	column-gap: 200px;
}

.footer_menu_items {
	display: grid;
	align-self: start;
	align-content: start;
}

.footercol {
	display: grid;
	width: 100%;
	justify-self: end;
	justify-content: start;
    justify-items: start;
	align-items: start;
	height: fit-content;
}

.footercol h2 {
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.footercol3 {
	display: grid;
	background: url("/static/madeinusa.png") no-repeat;
	background-size: contain;
	width: 100px;
	min-height: 100%;
	justify-self: end;
	justify-content: start;
    justify-items: start;
	align-items: start;
	align-self: end;
}

footer {
	grid-area: footer;
	display: grid;
	width: 100%;
	justify-items: center;
	background: #e6e6e6;
	border-top: 1px solid #c7c7c7;
	box-shadow: inset 0px 2px 3px #c7c7c7;
	z-index: 2;
	min-height: 220px;
	padding-top: 10px;
}

.copyright {
	display: grid;
	justify-items: center;
	font-size: 14px;
	padding: 10px 0px 20px 0px;
	align-self: end;
}

footer a {
	color: #333333 !important;
	opacity: 1;
}

footer a:hover {
	opacity: 0.8;
}

footer a:visited {
	color: #595959 !important;
}

footer .footer_links {
	display: flex;
	column-gap: 20px;
	justify-content: center;
}

.page > #home {	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
	justify-content: center;
	align-content: center;
	height: fit-content;
}

.page > #home .emphasized {
	display: grid;
	background: linear-gradient(164deg, #132092 28%, #1c86be 68%, #132092 88%);
	background-size: 200% 200%;
	justify-self: center;
	padding: 20px 0px 20px 5px;
	color: #fff;
	width: 100%;
	animation: joinus 18s ease infinite;
}

.page > #home .regular {
	display: grid;
	background: white;
	padding: 100px 5px;
	justify-self: center;
	width: 100%;
}

.member_welcome {
	display: grid;
	width: 100%;
	grid-template-areas:
		"welcome_title welcome_title"
		"membership_upgrade membership_upgrade"
		"discovery_video_area discovery_points"
		"planner_points planner_video_area"
		"welcome_graphic welcome_graphic";
	grid-template-columns: 1fr 1fr;	
	grid-template-rows: auto auto 1fr 1fr auto;
	height: fit-content;
}

.member_welcome .membership_upgrade {
	grid-area: membership_upgrade;
	width: fit-content;
	justify-self: center;
	font-size: 20px;
	max-width: 90%;
	margin-bottom: 30px;
}

.welcome_graphic {
	grid-area: welcome_graphic;
	width: 100%;
	height: 150px;
	background: transparent url("/static/welcome-graphic-1.png") top center no-repeat;
	background-size: contain;
	padding: 0;
}

.welcome_title {
	display: grid;
	grid-area: welcome_title;
	width: 100%;
	justify-self: center;
}

.welcome_title h1 {
    background: linear-gradient(45deg, #e6167d 10%, #132092 25%, #132092 40%, #2a9bd7);
    background-clip: text;
    color: transparent;
    font-size: 36px;
	justify-self: center;
	padding: 20px 10px 10px 10px;
}

.navigate_mobile {
	display: none;
	justify-content: center;
	text-align: center;
	justify-self: center;
}
	
.navigate_full {
	display: inline;
	justify-content: center;
	justify-self: center;
	text-align: left;
	max-width: 600px;
}

.discovery_points {
	display: grid;
	grid-area: discovery_points;
	width: 100%;
	height: 100%;
	background: #2a9bd7 url("/static/welcome-graphic-2.png") top right no-repeat;
	background-size: 13%;
	color: #ffffff;
	font-size: 20px;
	line-height: 140%;
	justify-self: center;
	align-items: center;
	align-content: center;
	padding: 40px 20px;
}

.discovery_video_area {
	display: grid;
	grid-area: discovery_video_area;
	background-color: #2a9bd7;
	height: 100%;
}

.video_discovery_guide {
	align-self: center;
	justify-self: end;
	width: auto;
	max-width: 46vw;
	max-height: 50vh;
}

.video_planner_guide {
	align-self: center;
	justify-self: start;
	width: auto;
	max-width: 46vw;
	max-height: 50vh;
}

.discovery_points a, .planner_points a {
	justify-self: center;
	color: #ffffff;
	font-weight: 700;
}

.points_bullets {
	width: 500px;
	justify-self: center;
	justify-content: start;
}

.welcome_button {
    background: #ffffff;
    color: #132092;
    font-size: 1em;
    text-transform: uppercase;
    opacity: 1;
    transition: 0.3s;
}

.welcome_button:hover {
    opacity: 0.8;
}

.planner_points {
	display: grid;
	grid-area: planner_points;
	width: 100%;
	height: 100%;
	background: #132092 url("/static/welcome-graphic-3.png") bottom left no-repeat;
	background-size: 20%;
	color: #ffffff;
	font-size: 20px;
	line-height: 140%;
	justify-self: center;
	align-items: center;
	align-content: center;
	padding: 40px 20px;
}

.planner_video_area {
	display: grid;
	grid-area: planner_video_area;
	background-color: #132092;
	width: 100%;
}

.navigate_mobile {
	display: none;
}

.home_content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"content_personalized content_image_1"
		"content_image_2 content_reimagined"
		"content_accessible content_image_3"
		"content_image_4 content_joinus"
		"content_everybody content_everybody";
}

.home_content h1 {
	font-size: 32px;
	line-height: 120%;
	padding-bottom: 30px;
}

.content_personalized {
	display: grid;
	grid-area: content_personalized;
	min-width: 80%;
	max-width: 1000px;
	min-height: 500px;
	justify-self: end;
	align-items: start;
	align-self: center;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px 30px 30px 30px;
}

.content_image_1 {
	grid-area: content_image_1;
	display: grid;
	width: 100%;
	background: #34a2d4 url("/static/home-graphic-01.webp") center no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.content_reimagined {
	display: grid;
	grid-area: content_reimagined;
	min-width: 80%;
	max-width: 1000px;
	min-height: 500px;
	justify-self: start;
	align-self: center;
	align-items: start;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px 30px 30px 30px;
}

.content_image_2 {
	grid-area: content_image_2;
	display: grid;
	width: 100%;
	background: #121489 url("/static/home-graphic-02.webp") center no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.content_accessible {
	display: grid;
	grid-area: content_accessible;
	min-width: 80%;
	max-width: 1000px;
	min-height: 500px;
	justify-self: end;
	align-self: center;
	align-items: start;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px 30px 30px 30px;
}

.content_image_3 {
	grid-area: content_image_3;
	display: grid;
	width: 100%;
	background: #cee9fb url("/static/home-graphic-03.webp") center bottom no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.content_joinus {
	display: grid;
	grid-area: content_joinus;
	min-width: 80%;
	max-width: 1000px;
	min-height: 500px;
	justify-self: start;
	align-items: start;
	align-self: center;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px 30px 30px 30px;
}

.content_image_4 {
	grid-area: content_image_4;
	display: grid;
	width: 100%;
	background: #cee9fb url("/static/home-graphic-04.webp") center bottom no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.content_everybody {
	grid-area: content_everybody;
	display: grid;
	width: 100%;
	height: 300px;
	justify-content: center;
	align-content: center;
	background: #122092;
	background: linear-gradient(10deg, #e6167d, #122092, #2a9bd7);
	background-size: 150% 150%;
	animation: joinus 5s ease infinite;
}

.content_everybody h2 {
	color: #FFFFFF;
	font-size: 36px;
	font-weight: 500;
}

.citation {
	display: grid;
	grid-template-columns: auto;
	font-size: 10px;
	justify-self: end;
	padding: 10px 0px 0px 0px;
	align-self: end;
}

/* Common Messaging Text Format */
.messaging_text {
	display: grid;
	min-width: 80%;
	max-width: 1000px;
	min-height: 500px;
	align-self: center;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px;
}	

.page > #about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"aboutuscol aboutusimg1"
		"aboutusimg2 aboutusanalyzing"
		"aboutusjoin aboutusjoin";
}

.aboutuscol {
	grid-area: aboutuscol;
	justify-self: end;
	align-items: center;
}

.aboutuscol h1 {
	padding-bottom: 25px;
}

.aboutuscoldescr {
	align-self: start;
}

.aboutusimg1 {
	grid-area: aboutusimg1;
	display: grid;
	width: 100%;
	background: url("/static/about-graphic-photo.webp") center center no-repeat, linear-gradient(101deg, #2a9bd7, #132092);
	background-size: contain;
	justify-self: end;
	padding: 0px;
}

.aboutusimg2 {
	grid-area: aboutusimg2;
	display: grid;
	width: 100%;
	background: url("/static/about-graphic-02.webp") bottom center no-repeat, linear-gradient(101deg, #2a9bd7, #ffffff);
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.aboutusanalyzing {
	grid-area: aboutusanalyzing;
	justify-self: start;
	align-items: center;
}

.aboutusjoin {
	display: grid;
	grid-area: aboutusjoin;
	background: #122092;
	background: linear-gradient(10deg, #e6167d, #122092, #2a9bd7);
	background-size: 150% 150%;
	color: #FFFFFF;
   	font-size: 32px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	min-height: 500px;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
	animation: joinus 10s ease infinite;
}

@keyframes joinus {
    0%{background-position: 64% 0%}
    50%{background-position: 37% 100%}
    100%{background-position: 64% 0%}
}

.page > #mission {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"aboutmission hearty-hands"
		"medsgraphic mission2"
		"mission3 beacongraphic"
		"missionoutcome missionoutcome"
		"missionpassion passiongraphic"
		"joinmission joinmission"
		"missionseparator missionseparator";
}

.aboutmission {
	display: grid;
	grid-area: aboutmission;
	justify-self: end;
	align-items: start;
}

.aboutmission h1 {
	padding-bottom: 10px;
}

.hearty-hands {
	grid-area: hearty-hands;
	display: grid;
	width: 100%;
	background: transparent url("/static/hearty-hands.png") center no-repeat;
	background-size: contain;
	justify-self: end;
	padding: 0px;
}

.medsgraphic {
	grid-area: medsgraphic;
	display: grid;
	width: 100%;
	background: transparent url("/static/medsgraphic.png") center no-repeat;
	background-size: contain;
}
	
.mission2 {
	grid-area: mission2;
	align-items: center;
	justify-self: start;

}

.mission3 {
	grid-area: mission3;
	align-items: center;
	justify-self: end;
}

.beacongraphic {
	grid-area: beacongraphic;
	display: grid;
	width: 100%;
	background: #2a9bd7 url("/static/beacongraphic.png") no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.missionoutcome {
	display: grid;
	grid-area: missionoutcome;
	background: #122092;
	background: linear-gradient(10deg, #2a9bd7 15%, #122092 40%, #122092);
	background-size: 150% 150%;
	color: #FFFFFF;
   	font-size: 32px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	min-height: 500px;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
	animation: joinus 10s ease infinite;
}

.missionwrapper1 {
	grid-area: missionpassion;
	display: grid;
	background-color: #dee7e6;
}

.missionwrapper2 {
	grid-area: passiongraphic;
	display: grid;
	background-color: #dee7e6;
}

.missionpassion {
	grid-area: missionpassion;
	min-height: 500px;
	justify-self: end;
	align-items: center;
}

.passiongraphic {
	display: grid;
	grid-area: passiongraphic;
	width: 100%;
	background: transparent url("/static/missionpassion.png") no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.joinmission {
	display: grid;
	grid-area: joinmission;
	background-color: #FFFFFF;
	background: linear-gradient(45deg, #e6167d 10%, #e6167d 20%, #132092 35%, #132092 45%, #e6167d 80%);
    background-size: 150% 150%;
	background-clip: text;
	color: transparent;
   	font-size: 36px;
	font-weight: 500;
	font-style: normal;
	line-height: normal;
	min-height: 600px;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
	animation: joinus 10s ease infinite;
}

.joinmissionimg {
	display: grid;
	grid-area: joinmission;
	background:  transparent url("/static/joinmission.png") bottom no-repeat;
	background-size: contain;
	min-height: 600px;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
}

.missionseparator {
	display: grid;
	grid-area: missionseparator;
	Background-color: #2a9bd7;
	width: 100%;
	min-height: 200px;
	justify-self: start;
	align-self: center;
	align-items: center;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

/* Coded-in Page */

.codedin_wrapper {
	display: grid;
	width: 100%;
	grid-template-areas:
		"codedin_title codedin_title"
		"codedin_what codedin_graphic1"
		"codedin_graphic2 codedin_why"
		"codedin_approach codedin_graphic3"
		"codedin_commitment codedin_commitment"
		"codedin_choose codedin_choose";
	grid-template-columns: 1fr 1fr;	
}

.codedin_title {
	display: grid;
	grid-area: codedin_title;
	width: 100%;
	justify-self: center;
}

.codedin_title h1 {
    color: black;
    font-size: 36px;
	justify-self: center;
	padding: 20px 10px 30px 10px;
}

.codedin_what {
	display: grid;
	grid-area: codedin_what;
	width: 100%;
	min-height: 400px;
	background: #b31342;
	color: #ffffff;
	font-size: 20px;
	align-items: center;
	justify-self: center;
	align-content: center;
	justify-content: center;
	padding: 0 10px;
}

.codedin_what h2, .codedin_why h2, .codedin_approach h2, .codedin_commitment h2 {
	font-size: 36px;
	line-height: 120%;
}

.codedin_graphic1 {
	grid-area: codedin_graphic1;
	display: grid;
	width: 100%;
	background: transparent url("/static/coded-in-graphic-1.png") center left no-repeat;
	background-size: contain;
	justify-self: end;
	padding: 0px;
}

.codedin_graphic2 {
	grid-area: codedin_graphic2;
	display: grid;
	width: 100%;
	background: transparent url("/static/coded-in-graphic-2.png") bottom right no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.codedin_why {
	display: grid;
	grid-area: codedin_why;
	width: 100%;
	min-height: 400px;
	background: #06315e;
	color: #ffffff;
	font-size: 20px;
	align-items: center;
	justify-self: center;
	align-content: center;
	justify-content: center;
	padding: 0 10px;
}

.codedin_approach {
	display: grid;
	grid-area: codedin_approach;
	width: 100%;
	min-height: 400px;
	background: #2a9bd7;
	color: #ffffff;
	font-size: 20px;
	align-items: center;
	justify-self: center;
	align-content: center;
	justify-content: center;
	padding: 0 10px;
}

.codedin_graphic3 {
	grid-area: codedin_graphic3;
	display: grid;
	width: 100%;
	background: transparent url("/static/coded-in-graphic-3.png") center center no-repeat;
	background-size: contain;
	justify-self: end;
	padding: 0px;
}

.codedin_commitment {
	display: grid;
	grid-area: codedin_commitment;
	background: #ffffff;
	color: #000000;
   	font-size: 20px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	min-height: 400px;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
}

.codedin_choose {
	display: grid;
	grid-area: codedin_choose;
	background: #122092;
	background: linear-gradient(10deg, #e6167d, #122092, #2a9bd7);
	background-size: 150% 150%;
	color: #FFFFFF;
   	font-size: 36px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	min-height: 400px;
	text-align: center;
	justify-self: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
	animation: joinus 10s ease infinite;
}

/* Guarantee Page */

.page > #guarantee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	grid-template-areas:
		"guarantee1 guarantee_graphic_1"
		"guarantee_graphic_2 guarantee2"
		"guarantee3 guarantee_graphic_3"
		"guarantee_graphic_4 guarantee4"
		"guarantee5 guarantee_graphic_5"
		"guarantee6 guarantee6"
		"guarantee7 guarantee7";
}

.guarantee1{
	grid-area: guarantee1;
	justify-self: end;
	align-items: start;
}

.guarantee1 h1 {
	padding-bottom: 10px;
}

.guarantee_graphic_1 {
	grid-area: guarantee_graphic_1;
	display: grid;
	width: 100%;
	background: transparent url("/static/guarantee-graphic-01.webp") center no-repeat;
	background-size: contain;
	justify-self: end;
	padding: 0px;
}

.guarantee_graphic_2 {
	grid-area: guarantee_graphic_2;
	display: grid;
	width: 100%;
	background: transparent url("/static/guarantee-graphic-02.webp") center no-repeat;
	background-size: contain;
}

.guarantee2 {
	grid-area: guarantee2;
	justify-self: start;
	align-items: center;
 }

.guarantee3 {
	grid-area: guarantee3;
	justify-self: end;
	align-items: center;
}

.guarantee_graphic_3 {
	grid-area: guarantee_graphic_3;
	display: grid;
	width: 100%;
	background: transparent url("/static/guarantee-graphic-03.png") center no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.guarantee_graphic_4 {
	grid-area: guarantee_graphic_4;
	display: grid;
	width: 100%;
	background: transparent url("/static/guarantee-graphic-04.webp") center no-repeat;
	background-size: contain;
}

.guarantee4 {
	grid-area: guarantee4;
 	justify-self: center;
	align-items: center;
}

.guarantee5 {
	grid-area: guarantee5;
	min-height: 600px;
	justify-self: end;
	align-items: center;
 }

.guarantee_graphic_5 {
	display: grid;
	grid-area: guarantee_graphic_5;
	width: 100%;
	background: transparent url("/static/guarantee-graphic-05.webp") center no-repeat;
	background-size: contain;
	justify-self: start;
	padding: 0px;
	margin-bottom: 40px;
}

.guarantee6 {
	display: grid;
	grid-area: guarantee6;
	width: 100%;
	background-color: #132092;
	background: linear-gradient(45deg, #e6167d 10%, #2a9bd7 20%, #132092 35%, #132092 45%, #e6167d 80%);
    background-size: 500% 500%;
	color: #ffffff;
   	font-size: 56px;
	font-weight: 500;
	font-style: normal;
	min-height: 250px;
	justify-self: center;
	justify-items: center;
	align-self: center;
	align-items: center;
	padding: 5% 20% 5% 20%;
	animation: joinus 10s ease infinite;
	text-align: center;
	line-height: normal;
}

.guarantee7 {
	display: grid;
	grid-area: guarantee7;
	min-width: 60%;
	max-width: 1000px;
	min-height: 150px;
	justify-self: center;
	align-items: end;
	align-self: center;
   	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 30px 30px 30px 30px;
}


/* FAQ Page */

.page > #faq {
	display: grid;
	grid-template-columns: auto;
	justify-items: center;
	padding-bottom: 100px;
	width: 100%;
}


.faq_title {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"faq_heading faq_graphic";
	min-height: 230px;
	width: 100%;
}
	
.faq_title h1 {
	grid-area: faq_heading;
	align-self: center;
	justify-self: center;
	text-align: center;
}	
	
.faq_graphic {
	display: grid;
	grid-area: faq_graphic;
	width: 100%;
	background: url("/static/faq-graphic.png") top left no-repeat, linear-gradient(101deg, #2a9bd7, #132092);
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

#faq > .landing_faq_wrapper {
	background: unset;
}

.page_text {
	font-size: 16px;
	width: 800px;
	justify-self: center;
}

h2.page_text  {
	font-size: 20px;
}


.page > #home .signup_start {
	display: grid;
	align-self: start;
	background: url("/static/GetASecondOpinion-Cover.webp") center bottom repeat;
	background-size: contain;
	justify-items: center;
	height: fit-content;
	padding-bottom: 120px;
	width: 100%;
}

.spacer {
	display: none;
	height: 100px;
}

.intro_wrapper {
	display: grid;
	width: min-content;
	height: fit-content;
}

.signup_start .text {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto;
	justify-content: center;
	justify-self: center;
	align-content: center;
	align-self: center;
	padding: 10px 30px;
	font-size: 20px;
	line-height: initial;
	background-color: #f7f7f7;
}

.get_started_button {
	display: grid;
}

.video_intro {
	align-self: start;
	justify-self: center;
	width: auto;
	max-width: 100vw;
	height: 60vh;
}

.signup_start .signin_button, .signup_flow .next_button, .signup_flow .back_button {
	justify-self: end;
	font-size: 20px;
	text-transform: uppercase;
	margin: 25px 0px 10px 0px;
	width: 100%;
}

.signup_start .image {
	background: #DDEEFF;
	object-fit: cover;
	width: 100%;
}

.page > #intro_brief, .page > #intro_detail, .page > #tool_overview, .page > #testimonials {
	display: grid;
	width: 100%;
	justify-items: center;
	align-items: center;
}

.signup_block {
	display: grid;
	width: 100%;
	background: #ffffff;
	background-size: cover;
	justify-items: center;
	align-items: center;
	padding-bottom: 20px;
	grid-row-gap: 10px;
}

.signup_block h1 {
	font-size: 42px;
	color: #132092;
	font-weight: 900;
	line-height: 140%;
	text-align: center;
	padding: 15px 10px 20px 10px;
}

.signup_block .video_intro {
	height: 55vh;
	object-fit: cover;
}

.signup_block .case_study {
	display: grid;
	width: 100%;
	padding: 0px 10px;
}

.signup_block .case_study img {
	max-width: 100%;
	max-height: 60vh;
	justify-self: center;
	border-radius: 15px;
}

.big_button {
	padding: 14px 25px;
	border-radius: 1.625rem;
	box-shadow: rgb(38, 57, 77) 0px 10px 15px -10px;
}

.slidedown, .slideup {
	display: none !important;
}

.slidedown_animate {
    animation-name: slideDown;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

.slideup_animate {
	animation-name: slideUp;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

.fadein {
	opacity: 0;
    transform: translateY(20vh);
    transition: opacity 1s, transform 1s;
}

.fadein_animate {
	opacity: 1;
    transform: translateY(0);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(+100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.bounce {
	animation-name: bounce;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes bounce {
	0%, 100% {transform: translateY(0);}
	3%, 96% {transform: translateY(+2px);}
	7%, 93% {transform: translateY(+4px);}
	15%, 85% {transform: translateY(+8px);}
	18%, 82% {transform: translateY(+10px);}
	21%, 79% {transform: translateY(+12px);}
	25%, 75% {transform: translateY(+15px);}
	28%, 72% {transform: translateY(+17px);} 
	31%, 69% {transform: translateY(+19px);} 
	33%, 66% {transform: translateY(+21px);}
	36%, 63% {transform: translateY(+23px);} 
	39%, 60% {transform: translateY(+25px);} 
	42%, 57% {transform: translateY(+27px);} 
	50% {transform: translateY(+30px);}   
}

#intro_brief h3, #intro_detail h3 {
	font-size: 24px;
	color: #282828;
	text-align: center;
	padding: 20px 10px;
	line-height: 140%;
}

.quote_element {
	display: grid;
	width: 100%;
	max-width: 1100px;
	height: 80px;
	background: #dee7e6;
	color: #282828;
	font-size: 22px;
	font-style: italic;
	line-height: 140%;
	align-items: center;
	text-align: center;
	justify-items: center;
	border-left: 20px solid #2a9bd7;
	box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px;
	padding: 10px;
	margin: 20px 0;
}

.element_holder.quote_holder {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.element_holder.quote_holder.hidden {
	opacity: 0;
}

.logos img {
	width: 200px;
}

.backed_by .logos {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 30px;
	align-items: center;
	justify-items: center;
	opacity: 0.8;
}

.price_element {
	display: grid;
	color: #2a9bd7;
	font-size: 28px;
	font-weight: 800;
	align-items: center;
	text-align: center;
	padding: 15px;
	border-left: 4px solid #dee7e6;
	border-right: 4px solid #dee7e6;
	border-radius: 10px;
}

.signup_buttons {
	display: grid;
}

.backed_by {
	display: grid;
	justify-items: center;
	align-items: center;
	background: transparent;
	padding: 30px 0;
	background: #ffffff;
	width: 100%;
}

.backed_by h2 {
	color: #646464;
	line-height: 140%;
}

.features_block {
	display: grid;
	padding: 30px 60px;
	width: 100%;
	min-height: 400px;
	justify-items: center;
	justify-self: center;
}

.features {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 30px;
	width: fit-content;
	padding: 0px 30px;
}

.feature {
	display: grid;
	grid-template-rows: 100px 50px 1fr;
	grid-row-gap: 20px;
	max-width: 350px;
	background: #ffffff;
	align-items: center;
	justify-items: center;
	text-align: center;
	border: 1px solid #258bc2;
	border-radius: 10px;
	box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px;
	padding: 30px 10px;
}

.feature h2, .feature h3 {
	color: #132092;
}

.feature h3 {
	font-size: 20px;
	text-transform: uppercase;
}

.feature_icon {
	height: 80px;
	align-self: center;
	justify-self: center;
}

.feature_text {
	text-align: center;
	align-self: start;
	font-size: 20px;
	padding: 0px 20px;
}

.bottom_button_block {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 30px;
	align-items: center;
}

.highlight {
	color: #2a9bd7;
	font-size: 28px;
}

.benefits_block {
	display: grid;
	padding: 30px 60px 0px 60px;
	background: #122092;
    background: linear-gradient(170deg, #e6167d, #122092, #2a9bd7);
    background-size: 150% 150%;
	width: 100%;
	height: 300px;
	color: white;
	align-items: center;
	justify-items: center;
	animation: joinus 10s ease infinite;
	grid-row-gap: 20px;
	color: black;
}

.benefits_block h3 {
	color: #ffffff;
	font-size: 38px;
	font-weight: 600;
	line-height: 140%;
	text-transform: uppercase;
	padding: 0px;
	text-align: center;
}

.stats_block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: fit-content;
	grid-column-gap: 100px;
}

.stat {
	display: grid;
	grid-auto-flow: column;
	text-align: center;
	grid-row-gap: 20px;
	text-align: center;
	max-width: 300px;
	align-items: center;
}

.stat_percent {
	font-size: 40px;
	font-weight: 800;
}

.guarantee_detail {
	padding-top: 10px !important;
	font-size: 10px !important;
}

.guarantee_detail_end {
	padding-top: 40px;
}

.guarantee_detail a {
	color: #ffffff;
}

.guarantee_detail_end a {
	color: #000000;
}

.final_block {
	display: grid;
	grid-template-rows: repeat(4,auto);
	width: 100%;
	color: #282828;
	text-align: center;
	justify-items: center;
	align-items: center;
	text-align: center;
	padding-bottom: 30px;
	background: #ffffff;
	grid-row-gap: 20px;
	height: fit-content;
}

#intro_brief .final_block h3, #intro_detail .final_block h3, .features_block h2 {
	color: #132092;
	font-size: 38px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 30px 10px 0px 10px;
}

.features_block h2 {
	padding: 30px 0px;
}

.final_block .feature_text {
	align-self: center;
	justify-self: center;
	font-size: 24px;
	color: #036092;
}

#intro_brief .signin_hero_button, #intro_detail .signin_hero_button {
	width: fit-content;
}

#intro_detail .signup_block h1 {
	padding-bottom: 0px;
}	

#intro_detail .signup_block h3 {
	padding: 0px 10px;
}

#intro_detail .features_content h1 {
  font-size: 32px;
  line-height: 120%;
  padding-bottom: 30px;
  text-transform: uppercase;
}

.feature_comparison {
	display: grid;
	grid-template-rows: auto repeat(8,1fr);
	padding: 10px 20px;
	grid-column-gap: 0px;
}

.vertical_element {	
	display: grid;
	grid-template-rows: 100px 1fr;	
	text-align: center;
	justify-items: center;
	align-items: center;
	height: 100%;
}

.feature_column_header, .feature_row {
	display: grid;
	grid-template-columns: 2fr repeat(3,1fr);
	grid-column-gap: 20px;
	justify-items: center;
	align-items: center;
	align-content: center;
	padding: 10px 0px;
}

.feature_column_header {
	font-size: 20px;
	font-weight: 600;
}

.feature_row {
	border-bottom: 1px solid #9bd1ee;
}

.feature_row > *:first-child {
	justify-self: start;
	font-size: 20px;	
	font-weight: 600;
}

.logo_inline {
	max-height: 80px;
	max-width: 150px;
	justify-self: center;
}

.icon20 {
    height: 20px;
    justify-self: center;
}

.features_content {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.features_content h3 {
	font-size: 28px;
	line-height: 120%;
	padding-bottom: 30px;
	text-transform: uppercase;
}

.feature_content {
	display: grid;
	min-width: 80%;
	max-width: 1000px;
	min-height: 300px;
	justify-self: end;
	align-items: start;
	align-self: center;
   	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	padding: 70px 30px 70px 30px;
}

.feature_content.align_start {
	justify-self: start;
}

.feature_image img {
	justify-self: center;
	align-self: center;
    max-width: 80%;
    box-shadow: #26334d 0px 20px 30px -10px;
	max-height: 800px;
}

.feature_image.noshadow img {
	box-shadow: unset;
}

.feature_image {
	display: grid;
	width: 100%;
	background: transparent;
	justify-self: center;
	padding: 0px;
}

.feature_image.wide img {
	width: 100%;
}


/* Tool Overview */
.intro_block {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	grid-row-gap: 10px;
	justify-items: center;
	max-width: 1000px;
}

.intro_block h1, .background_block h1 {
	font-size: 36px;
	line-height: 120%;
	text-align: center;
	justify-self: center;
	padding: 20px 20px 0px 20px;
}	

.intro_block h3 {
	padding: 0px 10px;
}

.intro_block .feature_text {
	padding: 30px 0px;
}

#tool_overview h2, .landing_faq_wrapper h2 {
	font-size: 30px;
	justify-self: center;
	align-self: center;
	padding: 10px;
	text-align: center;
	line-height: normal;
}

#tool_overview h5 {
	font-size: 26px;
	justify-self: center;
	align-self: center;
	padding: 10px;
}

.intro_block .video_intro {
	max-height: 55vh;
	justify-self: center;
	align-self: center;
	height: auto;
	max-width: 1000px;
}

#tool_overview .features_content, #testimonials .features_content, #membership .features_content {
	grid-template-columns: auto;
	width: 100%;
}

.feature_content_wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 50px 30px;
}

.feature_content_wrapper .get_started_button {
	margin-top: 40px;
}

#tool_overview .feature_image, #testimonials .feature_image {
	width: auto;
	min-width: 500px;
	max-width: 100%;
}

.highlight_block {
	background: #2a9bd7;
}

.tool_overview_2 {
	background: #f7f7f7;
}

.tool_overview_3 {
	background: #e4e4e4;
	padding-top: 30px;
	padding-bottom: 0px;
}

.tool_overview_4.features_block {
	padding: 30px 0px 0px 0px;
	background: #ffffff;
}

.tool_overview_4 .features_content {
	padding-top: 30px;
}

.tool_overview_4 .feature_content_wrapper {
	padding: 0px !important;
}

#tool_overview .feature_content_wrapper, #membership .feature_content_wrapper {
	padding: 30px 30px;
}

.features_block.tool_overview_2, .features_block.tool_overview_3 {
	padding: 30px 0px;
}

.features_block.tool_overview_3 {
	padding-bottom: 0px;
}

.tool_overview_2 .feature_content_wrapper:nth-child(even) {
	background: #e4e4e4;
}

.tool_overview_3 .feature_content_wrapper:nth-child(even) {
	background: #f7f7f7;
}

.video_container {
	display: grid;
	width: min-content;
}

.background_block {
	display: grid;
	width: 100%;
	background: url("/static/product-overview-background.webp"), url("/static/product-overview-graphic-1.webp");
	background-size: cover, 20%;
	background-position: center center, right top;
	background-repeat: no-repeat, no-repeat;
	justify-content: center;
	justify-items: center;
	padding-bottom: 30px;
}

.background_block h1 {
	justify-self: center;
}

.emphasized_text {
	display: grid;
	max-width: 1200px;
	font-size: 24px;
	font-weight: 400;
	grid-row-gap: 20px;
	line-height: normal;
	padding: 10px 30px 30px 30px;	
}

.emphasized_text p {
	margin: 0px;
}

.overview_image_2, .overview_image_3, .overview_image_4, .overview_image_5 {
	display: grid;
	width: 100%;
	background-size: contain;
	justify-self: start;
	padding: 0px;
	min-height: 500px;
}

.overview_image_2 {
	background: #121489 url("/static/home-graphic-02.webp") center no-repeat;
	background-size: contain;
}

.overview_image_3 {
	background: #329ad4 url("/static/product-overview-graphic-3.webp") center no-repeat;
	background-size: contain;
}

.overview_image_4 {
	background: #3aa1d1 url("/static/product-overview-graphic-4.webp") center no-repeat;
	background-size: contain;
}

.overview_image_5 {
	background: #1b1f8f url("/static/product-overview-graphic-5.webp") center no-repeat;
	background-size: contain;
}

/* Landing Pages */
.landing_page {
	display: grid;
	width: 100%;
	background: #f0e9de;
}

.landing_intro_wrapper {
	display: grid;	
	justify-self: center;
	background: #cfccc3;
	width: 100%;
	justify-items: center;
}

.landing_intro {
	display: grid;
	grid-template-columns: min-content auto;
	width: fit-content;	
	grid-column-gap: 15px;
	max-width: 95%;
}

.landing_signup {
	display: grid;
	max-width: 30%;	
	min-width: 400px;
	justify-items: start;
	grid-row-gap: 30px;
	height: min-content;
	align-self: center;
	justify-self: end;
	grid-row-gap: 10px;
}

.landing_signup_image {
	max-height: 600px;
	max-width: 100%;
	object-fit: cover;
	object-position: bottom center;
	align-self: end;
	transition: all 0.5s ease-in-out;
}

.landing_signup h1 {
	justify-self: start;
	color: #121212;
	font-size: 40px;
	font-weight: 800;
	line-height: normal;
	text-transform: none;	
}

.landing_signup .emphasized_text {
	padding: 0px;
}

.landing_benefits_wrapper {
	display: grid;
	width: 100%;
}

.landing_benefits_wrapper .benefits_block {
	background: linear-gradient(170deg, #abcbf2, #ccebfc, #abcbf2);
	padding: 20px 60px;
	height: auto;
	min-height: 200px;
	grid-row-gap: 0px;
}

.landing_benefits_wrapper .stat {
	max-width: 400px;
	grid-template-columns: auto 1fr;
	grid-column-gap: 10px;
}

.landing_benefits_wrapper .stat_percent {
	font-size: 60px;
	width: fit-content;
	color: #132092;
}

.landing_benefits_wrapper .stat_text {
	color: black;
	font-size: 28px;
	line-height: normal;
	text-align: start;
}

.landing_benefits_wrapper .benefits_block h3 {
	color: unset;
	text-transform: none;
}

.landing_benefits_wrapper .guarantee_detail a {
	color: black;
}

.landing_cards_wrapper {
	display: grid;
	width: 100%;
	background: #f0e9de;
}

.landing_cards_wrapper .landing_highlight_image {
	justify-self: center;
	max-height: 100vh;
	max-width: 100vw;
	min-height: 600px;
}

.landing_cards_wrapper .landing_highlight_image.guide_mobile {
	min-height: unset;
}

.landing_cards_wrapper .feature {
	 border: 1px solid #ebe1d3;
}

.landing_stories_wrapper {
	display: grid;
	width: 100%;
}

.landing_stories {
	display: grid;
	position: relative;
	justify-self: center;
	max-width: 1300px;
	width: 90%;
	padding-top: 20px;
}

.landing_stories_content {
	display: grid;
	grid-auto-flow: column;
	width: 100%;
	overflow: hidden;
	justify-self: center;
	scroll-snap-type: x mandatory;
}

.carousel_arrow {
	display: grid;
	position: absolute;
	top: 50%;
	font-size: 40px;
	color: white;
	background: #333333;
	align-content: center;
	justify-content: center;
	opacity: 0.7;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index: 10;
	align-self: center;
	cursor: pointer;
	user-select: none;
}

#story_forward {
	right: 20px;
}

#story_back {
	left: 20px;
}

.landing_story {
	display: grid;
	grid-template-rows: 1fr auto 1fr auto;
	justify-items: center;
	max-width: 420px;
	padding: 15px 20px;
	transition: transform 0.5s;
	scroll-snap-align: start;
	align-items: center;
	background: #fefefe;
    border-radius: 30px;
    box-shadow: #26334d 0px 10px 8px -10px;
    margin-bottom: 10px;
    border: 1px solid #ddd8d2;
}

.landing_story_title {
	display: grid;
    color: #3d4167;
    font-size: 26px;
    text-align: center;
    line-height: 1.1;
    font-weight: 600;
    padding: 0px;	
}

.landing_story_image {
	width: 380px;
	max-width: 70vw;
}

.landing_story_quote, .landing_story_person {
	max-width: 100%;
	display: grid;
	justify-self: end;
	text-align: end;
}

.landing_story_quote.align_start {
	text-align: start;
}

.landing_story_quote {
	font-style: italic;
	font-size: 20px;
	padding: 20px 0px;
	align-self: start;
}

.landing_story_person {
	padding-top: 10px;
}

.landing_story_testimonials {
	justify-self: end;
	font-size: 20px;
}

.landing_features_wrapper {
	display: grid;
	width: 100%;
	background: #f0e9de;
	padding-bottom: 40px;
}

.landing_page .get_started_block {
	padding-bottom: 30px;
}

.landing_faq_wrapper {
	display: grid;
	width: 100%;
	background: #ffffff;
	padding: 40px 0px;
}

.landing_features, .landing_faq {
	display: grid;
	max-width: 1500px;
	justify-self: center;
}

.landing_faq {
	width: 100%;
}

.landing_faq_entries {
	display: grid;
}

.landing_feature, .landing_faq_entry {
	display: grid;
    padding: 10px;
    border-radius: 30px;
    margin: 5px 0px 0px 0px;
	width: 90%;
	justify-self: center;
	align-content: center;
}

.landing_feature {
    background: #fefefe;
}

.landing_faq_entry {
    background: #f1eee9;    
}

.landing_feature_header, .landing_faq_header {
	display: grid;
	font-size: 36px;
	grid-template-columns: 1fr auto;
	padding: 20px 80px;
	align-content: center;
	align-items: center;
	grid-column-gap: 20px;
}

.landing_feature_title, .landing_faq_title {
	line-height: 1.1;
    font-size: 26px;
    font-weight: 600;
    color: #3d4167;
}

.landing_faq_title {
	font-size: 22px;
}

.landing_faq_wrapper .pricing_container {
	grid-area: auto;
}

.landing_faq_wrapper .pricing_grid {
	box-shadow: unset;
}

.expand_image {
	width: 30px;
}

.feature_expanded, .faq_entry_expanded {
	display: grid;
	max-height: 0;
	grid-column: span 2;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	grid-row-gap: 20px;
	line-height: normal;
	font-size: 26px;	
}


.feature_expanded > span, .faq_entry_expanded > span {
	padding-top: 20px;
	line-height: normal;
    font-size: 20px;
    font-weight: normal;
    color: #000000;
}

.landing_final_wrapper {
	padding: 10px 0px 30px 0px;
	background: #ffffff;
}

.landing_final_wrapper .final_block {
	padding-bottom: 0px;
}

/* Testimonials page */
#testimonials h1 {
	justify-self: center;
	padding: 20px 10px;
}

#testimonials h3 {
	justify-self: center;
}

#testimonials .feature_content {
	padding-top: 0px;
}

#testimonials .landing_story_title {
	padding: 20px 0px;
}

#testimonials .background_block {
	background: #f7f7f7 url("/static/testimonials-graphic-01.webp") top center no-repeat;
	background-size: clamp(800px, 30%, 1200px);
	padding-top: 40px;
	padding-bottom: 10px;
}

/* Tooltips */

.tooltip {
	display: none;
	max-width: min(600px, 80vw);
	width: 450px;
	height: fit-content;
	background-color: #4b1692;
	box-shadow: rgb(38,57,77) 0px 20px 30px -10px;
	text-shadow: 2px 2px 4px #370c71;
	color: #fff;
	text-align: center;
	padding: 15px 15px;
	border-radius: 3px;
	position: absolute;
	align-content: start;
	justify-content: center;
	justify-items: center;
	z-index: 10;
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	user-select: none;
}

.tooltip.above::after {
	top: 100%;
	left: var(--after-left, 50%);
	content: " ";
	position: absolute;
	border-width: 15px;
	border-style: solid;
	border-color: #4b1692 transparent transparent transparent;
}

.tooltip.below::after {
	bottom: 100%;
	left: var(--after-left, 50%);
	content: " ";
	position: absolute;
	border-width: 15px;
	border-style: solid;
	border-color: transparent transparent #4b1692 transparent;
}

@keyframes pulseBorder {
  0% { box-shadow: 0 0 0 0 rgba(75, 22, 146, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(75, 22, 146, 0); }
  100% { box-shadow: 0 0 0 0 rgba(75, 22, 146, 0); }
}

.pulse_border {
  animation: pulseBorder 1.5s infinite;
}

/* Memory cards */
.loading_screen {
	display: grid;
	justify-content: center;
	justify-items: center;
	align-content: center;
	border: 0px solid white;
	border-radius: 30px;
	width: 100%;
	max-width: 500px;
	height: fit-content;
	justify-self: center;
	align-self: center;
	padding: 25px;
	opacity: 1;
}

.loading_screen.full_loader {
	background: white;
}

.loading_state {
	color: green;
	font-weight: bold;
}

.loader_bar {
	display: none;
	width: 350px;
	background: repeating-linear-gradient(90deg, #f3f3f3, #2a9bd7, #f3f3f3, #2a9bd7, #f3f3f3);
	background-repeat: repeat-x;
	height: 20px;
	animation: RollingBar 3s linear infinite;
	background-size: 200% 100%;
}

#instructions, .game_area {
	background: white;
}

#instructions, #progress_prompt, #notify_prompt {
	display: none;
	padding-top: 10px;
	margin: 0px;
}

#notify_prompt {
	grid-row-gap: 10px;
}

#instructions {
	padding: 10px;
}

.notify_button {	
	display: grid;
	background-color: #2a9bd7;
	color: white;
	font-size: 18px;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
	align-self: end;
	height: fit-content;
	width: fit-content;
	justify-self: center;	
}

@keyframes RollingBar {
	0% 		{background-position:0 0;}
	25% 	{background-position:-25% 0};
	50%		{background-position:-50% 0;}
	75% 	{background-position:-75% 0;}
	100%	{background-position:-100% 0;}
}

.loading_state.blinker {
	color: red;
	font-weight: bold;
}

.loading_screen .prompt {
	justify-self: center;
}

.loading_screen .loader {
	height: 80px;
	width: 80px;
}

.scores {
	display: grid;
}
.scores > .current_score {
	justify-self: start;
	font-weight: bold;
	color: #50536F;
}
.scores > .high_score {
	justify-self: end;
	font-weight: bold;
	color: #50536F;
}

.game_area {
	display: none;
	grid-template-columns: auto;
	justify-content: center;
	margin: 0px;
}

.board_container {
	display: grid;
}

.board {
	display: grid;
	grid-area: board_element;
	grid-template-rows: repeat(4, 100px);
	grid-template-columns: repeat(4, 100px);
	border: 1px solid #5aa4cb;
	width: fit-content;
}

.game_outcome {
	display: none;
	grid-area: board_element;
	justify-self: center;
	justify-items: center;
	align-self: center;
	border: 4px solid #e6167d;
	border-radius: 15px;
	margin: 0px;
	padding: 10px;
	background: white;
	width: fit-content;
	z-index: 10;
}

.game_outcome h1 {
	color: #e6167d;
	font-size: 25px;
	text-align:center;
}

.cell {
	border: 1px solid #7497f1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding: 2px;
	background-origin: content-box;
}
	
/* Discovery Page */

 #main_reg {
	height: fit-content;
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-areas:
		"title_row title_row title_row title_row"
		"inactive_error inactive_error inactive_error inactive_error"
		"medicine_row aux_row submit_row submit_row"
		"condition_row aux_row submit_row submit_row"
		"conditions_pane conditions_pane conditions_pane conditions_pane"
		"need_help need_help need_help need_help";
	column-gap: 10px;
	grid-row-gap: 10px;
	align-self: center;
	justify-self: center;
	margin: 100px 10px 200px 10px;
	padding: 25px;
	z-index: 2;
}

.discovery_container {
	display: grid;
	grid-area: main;
	width: 100%;
	height: 100%;
	background: url("/static/top-discovery-graphic.png"), url("/static/bottom-discovery-graphic.png");
	background-size: 30%, 30%;
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;	
}

.planner_container {
	display: grid;
	grid-area: main;
	width: 100%;
	height: 100%;
	background: url("/static/top-planner-graphic.png"), url("/static/bottom-planner-graphic.png");
	background-size: 30%, 30%;
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;	
}

#main_reg input {
	justify-self: start;
}

#main_reg h3 {
	justify-self: center;
}

#main_reg h1 {
	display: grid;
	grid-area: title_row;
	justify-self: center;
	align-self: center;
}


#insufficient_tokens_free, #insufficient_tokens_enhanced {
	grid-area: inactive_error;
	display: none;
	justify-self: center;
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	max-width: 800px;
}

.medicine_row {
	grid-area: medicine_row;
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 14px;
}

.condition_row {
	grid-area: condition_row;
	display: grid;
	align-items: center;
	font-size: 14px;
}

#main_reg > .patient_bio_settings_element {
	display: grid;
	grid-template-columns: 40px 1fr;
	justify-self: end;
	font-weight: 400;
}

#main_reg > .patient_bio_settings_element > .icon {
	display: grid;
	justify-self: center;
}

.medicine_row .login_input, .condition_row .login_input, .profile_changes .login_input  {
	width: 550px;
	height: 40px;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	margin: 0px;
}

#new_profile {
	display: none;
}

#profile_add #new_profile {
	display: grid;
}

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

.submit_row {
	display: grid;
	grid-template-columns: auto auto;
	grid-area: submit_row;
	justify-content: center;
	align-content: center;
	justify-self: center;
	grid-row-gap: 10px;
	z-index: 2;
}

.need_help {
	grid-area: need_help;
	justify-self: center;
	align-self: center;
}

.planner_container .need_help {
	grid-area: auto;
	padding: 10px 0px;
}

.conditions_pane_wrapper {
	grid-area: conditions_pane;
	display: none;
	transition: all 300ms ease-in;
	overflow: hidden;
	height: 0px;
}

.conditions_pane_reg {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"patient_bio_settings"
		"preexisting_row"
		"other_meds";
	column-gap: 20px;
	grid-row-gap: 20px;
}

#bio_message {
	color: #2a9bd7;
}

.patient_bio_settings {
	display: grid;
	grid-area: patient_bio_settings;
	grid-template-columns: repeat(4, auto);
	background: #f7f7f7;
	border-radius: 30px;
	border: 1px solid #7B99CE;
	justify-items: center;
	grid-column-gap: 40px;
	padding: 20px 10px;
}

.patient_bio_settings_element {
	display: flex;
	align-items: center;
		align-self: center;
	grid-column-gap: 10px;
	height: 40px;
	font-weight: 400;
}

.patient_bio_settings_element > .icon {
	height: 32px;
	justify-self: center;
}

.conditions_pane_reg > .preexisting_row {
	grid-area: preexisting_row;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	grid-row-gap: 20px;
	grid-column-gap: 20px;
	border-radius: 30px;
	border: 1px solid #7B99CE;
	padding: 20px;
	margin: 0px;
}

.conditions_pane_reg .patient_meds {
	display: grid;
	grid-area: other_meds;
	grid-template-columns: min-content auto 1fr;
	grid-template-areas:
		"med_list med_list med_list"
		"new_med add_med med_status";
	background: #f7f7f7;
	border-radius: 30px;
	border: 1px solid #7B99CE;
	grid-column-gap: 15px;
	grid-row-gap: 25px;
	align-items: center;
	padding: 20px;
}

.conditions_pane_reg .patient_meds .med_list{	
	grid-area: med_list;
	display: flex;
	flex-wrap: wrap;
}

.conditions_pane_reg .patient_meds .new_med {
	grid-area: new_med;
	width: 475px;
	font-size: 16px;
	height: 40px;
	margin: 0px;
	
}

.add_med {
	grid-area: add_med;
	background-color: #2a9bd7;
	color: white;
	height: 40px;
	opacity: 1;
	transition: 0.3s;
	font-size: 16px;
}

.add_med:hover {
	opacity: 0.8;
}

.conditions_pane_reg .patient_meds .med_status {
	display: inline;
	grid-area: med_status;
	padding: 10px 5px;
	font-size: 16px;
	align-self: center;
	justify-self: start;
	text-align: center;
}

.lookup_profile_selector .element_holder {
	justify-self: start;
}

.lookup_profile_selector .profile_changes {
	justify-self: start;
	width: 100%;
}

.tos {
	display: grid;
	grid-template-columns: auto;
	justify-items: center;
	align-items: center;
}

.register_pane {
	display: grid;
	grid-area: register_pane;
	padding: 10px;
	background: pink;
	font-size: 1.2em;
	align-content: center;
	justify-content: center;
	border-radius: 10px;
	text-justify: inter-word;
}

.submit_button  {
	border: none;
    padding: 8px 25px;
   	color: #FFFFFF;
    font-weight: 600;
	font-size: 1.5em;
    cursor: pointer;
    border-radius: 1.25rem;
    background-color: #2F2E7E;
	text-align:center; 
	opacity: 0.9;
	transition: 0.3s;
}

.submit_button:hover {
	opacity: 1;
}

.submit_button[disabled] {
	background-color: gray;
}

/* Pricing */

#membership {
	display: grid;
	width: 100%;
	background: url("/static/membership-graphic-01.png"), url("/static/membership-graphic-02.png");
	background-size: 30%, 26%;
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;
	justify-content: center;
}

#membership h1 {
	font-size: 48px;
}

#membership p {
	padding-bottom: 10px;
	margin: 0px;
}

#membership .tool_overview_4 {
	background-color: unset;
}

#membership .tool_overview_4 .features_content {
	padding-top: 0px;
}

.membership_graphic_03 {
	display: grid;
	min-height: 400px;
	background: transparent url("/static/membership-graphic-03.png") center center no-repeat;
	background-size: contain;
	align-items: center;
}

.membership_graphic_04 {
	display: grid;
	min-height: 400px;
	background: transparent url("/static/membership-graphic-04.png") center center no-repeat;
	background-size: contain;
	align-items: center;
}

.membership_graphic_05 {
	display: grid;
	min-height: 500px;
	background: transparent url("/static/membership-graphic-05.webp") center center no-repeat;
	background-size: contain;
	align-items: center;
}

.membership_graphic_06 {
	display: grid;
	max-height: 400px;
	justify-self: center;
    box-shadow: #26334d 0px 20px 30px -10px;
	max-width: 90%;
}

.pricing_container {
	display: grid;
	align-items: center;
	padding: 10px;
}

.pricing_grid {
	display: grid;
	height: 360px;
	grid-template-columns: 1fr 1.5fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
		"empty-square membership add-ons add-ons "
		"price membership-price discovery-price-25-1 planner-price-25-1"
		"discovery discovery-tokens-1 discovery-tokens-2 discovery-tokens-empty"
		"planner planner-tokens-1 planner-tokens-empty planner-tokens-2";
	background: #ffffff;
	border: 0px solid #ffffff;
	border-radius: 30px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	text-transform: uppercase;
	width: fit-content;
	justify-self: center;
}

.pricing_grid .element_holder {
	width: 100%;
}

.price {
	display: grid;
	grid-area: price;
	background: #ffffff;
	color: #132092;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	font-weight: bolder;
	padding: 10px;
}

.discovery {
	display: grid;
	grid-area: discovery;
	background: #ffffff;
	color: #132092;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	font-weight: bolder;
	padding: 10px;
}

.planner {
	display: grid;
	grid-area: planner;
	background: #ffffff;
	color: #132092;
	align-items: center;
	justify-items: center;
	border-radius: 0 0 0 30px;
	font-weight: bolder;
	padding: 10px;
}


.planner-price-25-1 {
	display: grid;
	grid-area: planner-price-25-1;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	padding: 10px;
	font-weight: 600;
}

.discovery-price-25-1 {
	display: grid;
	grid-area: discovery-price-25-1;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	border-right: 1px solid #2a9bd7;
	padding: 10px;
	font-weight: 600;
}

.membership-price {
	display: grid;
	grid-area: membership-price;
	background: #132092;
	color: #ffffff;
	font-weight: 600;
	padding: 5px;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #ffffff;
	padding: 10px;
}

.add-ons {
	display: grid;
	grid-area: add-ons;
	background: #ffffff;
	color: #132092;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	border-radius: 0 30px 0 0;
	font-weight: bolder;
	padding: 10px;
}

.membership {
	display: grid;
	grid-area: membership;
	background: #132092;
	color: #ffffff;
	font-weight: bolder;
	padding: 5px;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #ffffff;
	padding: 10px;
}

.empty-square {
	display: grid;
	grid-area: empty-square;
	background: #ffffff;
	border-bottom: 1px solid #2a9bd7;
	border-radius: 30px 0 0 0;
	padding: 10px;
}

.discovery-tokens-1 {
	display: grid;
	grid-area: discovery-tokens-1;
	background: #132092;
	color: #ffffff;
	font-weight: 600;
	padding: 5px;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #ffffff;
	padding: 10px;
}

.discovery-tokens-2 {
	display: grid;
	grid-area: discovery-tokens-2;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid #2a9bd7;
	border-right: 1px solid #2a9bd7;
	padding: 10px;
}

.discovery-tokens-empty {
	display: grid;
	grid-area: discovery-tokens-empty;
	border-bottom: 1px solid #2a9bd7;	
	padding: 10px;
}

.planner-tokens-1 {
	display: grid;
	grid-area: planner-tokens-1;
	background: #132092;
	color: #ffffff;
	font-weight: 600;
	padding: 5px;
	align-items: center;
	justify-items: center;
	padding: 10px;
}

.planner-tokens-2 {
	display: grid;
	grid-area: planner-tokens-2;
	padding: 10px;
}

.planner-tokens-empty {
	display: grid;
	grid-area: planner-tokens-empty;
	border-right: 1px solid #2a9bd7;
	padding: 10px;
}

.membership_image {
	display: grid;
	grid-area: membership_image;
}

.membership_spacer_footer {
	display: grid;
	min-height: 80px;
}

.membership_upgrade {
	padding: 15px;
	color: black;
	background: #dee7e6 url(message-background.webp) no-repeat center center;
	box-shadow: rgb(38,57,77) 0px 20px 30px -10px;
	border-radius: 3px;
	border-bottom: 4px solid #e6167d;
	margin-bottom: 10px;
	max-width: 800px;
	justify-self: center;
}

.membership_upgrade h3 {
	color: #e6167d;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	padding-bottom: 20px;
}

.membership_upgrade span {
	font-size: 18px;
}

.membership_upgrade_button {
	justify-self: center;
	padding: 30px 10px;
}

/* Discovery Guide */

#discovery_guide, #planner_guide, #profiles_guide {
	display: grid;
	width: 70%;
	max-width: 1000px;
}

.discovery_graphic {
	display: grid;
    height: 150px;
    background: url("/static/discovery-guide-graphic.png") right top no-repeat;
    background-size: contain;
}

.planner_graphic {
	display: grid;
    height: 150px;
    background: url("/static/planner-guide-graphic.png") right top no-repeat;
    background-size: contain;
}

.profiles_graphic {
	display: grid;
    height: 150px;
    background: url("/static/profiles-guide-graphic.png") right top no-repeat;
    background-size: contain;
}

.guide_overview h1 {
	font-size: 36px;
	line-height: 120%;
	text-align: center;
	justify-self: center;
	padding: 20px 0px 10px 0px;
}

.guide_overview {
	padding: 10px 0px 20px 0px;
}

.guide_overview_text {
	padding-bottom: 10px;
}

.guide_quick {
	display: grid;
	grid-template-columns: auto;
	background: #2a9bd7;
	color: #ffffff;
	font-size: 20px;
	border-radius: 50px;
	padding: 20px 30px 0px 30px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.guide_quick h2 {
	justify-self: center;
	font-size: 28px;
	font-weight: 500;
	border-bottom: 1px solid #ffffff;
}

.guide_quick ul {
	line-height: 180%;
	padding-bottom: 20px;
}

.guide_quick ul li {
	line-height: 150%;
}

.guide_steps {
	display: grid;
	padding: 40px 0 0 0;
}

.guide_steps h2 {
	justify-self: center;
	color: #132092;
	font-size: 28px;
	font-weight: 500;
	padding-bottom: 30px;
}

.guide_step {
	display: grid;
	grid-template-columns: auto;
	padding: 0px 0px 60px 0px;
}

.step_text .profile_buttons, .step_text .unsaved_changes, .step_text .unsaved_changes .value {
	display: inline;
	margin: 0px;
	padding: 0px 5px;
	font-weight: 600;
}

.tip {
	display: grid;
	grid-template-columns: auto;
	background: #ffffff;
	border-top: 1px solid #2a9bd7;
	border-right: 1px solid #2a9bd7;
	border-bottom: 1px solid #2a9bd7;
	border-left: 30px solid #2a9bd7;
	border-radius: 0px;
	padding: 10px 0 40px 0;
	margin-bottom: 40px;
	justify-self: start;
}

.tip_content {
	display: grid;
	padding: 30px;
}

.tip_title {
	align-items: center;
	padding-bottom: 15px;
}

.tip_content h3 {
	color: #2a9bd7;
	font-size: 20px;
}

.tip_content .step_image {
	margin: 10px 0px 30px 0px;
}

.tip_text {
	display: inline-block;
	width: 100%;
	padding-left:20px;
}

.tip_title, .caution_title {
	display: flex;
}

.tip .step_image {
	justify-self: center;
	width: 90%;
	border: 0 solid #b9bbd4;
	box-shadow: #26334d 0px 20px 30px -10px;
}

.guide_overview {
	display: grid;
	grid-template-columns: auto;	
}

.step_image {
	justify-self: center;
	width: 90%;
	box-shadow: #26334d 0px 20px 30px -10px;
}

.step_image.true_size {
	width: auto;
}

.step_text {
	display: inline;
	width: 100%;
	padding: 10px 0px 10px 0px;
	align-items: center;
}

.step_text.icons {
	line-height: 190%;
}

.step_text .icon, .tip_text .icon {
	vertical-align: middle;
}

.guide_step ul {
	padding-bottom: 10px;
}

.tip .icon, .caution .icon {
	width: 50px;
	align-self: center;
}

.tip .caution {
	padding: 30px 10px 30px 10px;
	margin: 0px;
	margin-left: 10px;
}

.tip .caution_title {
	padding-left: 0px;
}

.caution {
	display: grid;
	grid-template-columns: auto;
	width: 100%;
	background: #ffffff;
	border-top: 1px solid #e6167d;
	border-right: 1px solid #e6167d;
	border-bottom: 1px solid #e6167d;
	border-left: 30px solid #e6167d;
	border-radius: 0px;
	padding: 10px 0px 40px 0px;
	margin-bottom: 40px;	
	justify-self: start;
}

.caution_title {
	align-items: center;
	padding-bottom: 15px;
}

.caution_title h3 {
	color: #e6167d;
	font-size: 20px;
}

.caution_content {
	display: grid;
    padding: 30px;
}

.guide_mobile {
	display: none;
}

.landing_mobile {
	display: none;
}

/* Results Page */

.page > #results {
	width: 90%;
	grid-area: main;
	display: grid;
	grid-template-columns: 0.25fr 0.25fr 0.5fr;
	grid-template-rows: repeat(3,auto);
	grid-template-areas:
		"report_header report_header report_header"
		"scores user_rating write_up"
		"scores your_rating write_up";
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	height: fit-content;
}


.patient_data .patient_conditions {
	grid-area: patient_conditions;
	justify-self: left;
	display: flex;
}

.patient_data .patient_meds {
	grid-area: patient_meds;
	justify-self: left;
	display: flex;
}

.patient_data .patient_meds_excluded {
	grid-area: patient_meds_excluded;
	display: flex;
	color: red;
	justify-self: left;
}

.scores_pane_reg {
	grid-area: scores;
	display: grid;
	grid-template-rows: fit-content(70px) 1fr;
	border: 1px solid black;
	border-radius: 10px;	
}

.scores_pane_unreg {
	grid-area: scores;
	display: grid;
	border-radius: 10px;
	background-color: pink;
	padding: 10px;
	align-content: center;
	justify-items: center;
}

.scores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 10px;
	justify-content: center;
}

.scores .drug_name {
	justify-self: end;
}

.stars {
	display: flex;
	justify-self: start;
	font-size: 14px;
	grid-column-gap: 5px;
}

.checked {
  color: orange;
}

.note {
	font-size: 0.75em;
	text-align: center;
	text-justify: center;
	border-bottom: 1px solid black;
	padding: 5px;
}

.user_rating {
	display: grid;
	grid-template-columns: 1fr;
	grid-area: user_rating;
	border: 1px solid black;
	border-radius: 10px;
	justify-items: center;
	justify-content: center;
	align-items: center;
	font-size: 1.2em;
	padding: 5px;
}

.small_note {
	font-size: 0.5em;
}
.your_rating {
	display: grid;
	grid-template-columns: 1fr;
	grid-area: your_rating;	
	border: 1px solid black;
	border-radius: 10px;
	justify-items: center;
	justify-content: center;
	align-items: center;
	font-size: 1.2em;
	padding: 5px;
}

/* New Results Page */

.page > #results_v2 {
	width: 90%;
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: fit-content 1fr;
	grid-template-areas:
		"report_header"
		"drug_comparison"
		"drug_scores";
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	height: fit-content;
}

.drug_panel > .your_rating {
	border: none;
}

.drug_panel > .user_rating {
	border: none;
}

.page > #results_v2 > .drug_comparison {
	grid-area: drug_comparison;
	display: grid;
	border: 3px solid #6495ED;
	border-radius: 10px;
	background-color: #ADD8E6;
	padding: 10px;
}

.page > #results_v2 > .drug_scores {
	grid-area: drug_scores;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-row-gap: 10px;
}


/* Profile Page */

#profile, #reports, #sprofile {	
	grid-area: main;
	display: grid;
	grid-template-areas:
		"profile_menu profile_area";
	grid-template-columns: 240px 1fr;
	padding-top: 20px;
	width: 100%;
	max-width: 1500px;
	grid-row-gap: 0px;
}

.results_container, .planner_results_container {
	display: none;
	z-index: 10;
	background: #F3F3F3;
	width: 100%;
	height: fit-content;
}

.action_icons {
	display: flex;
	width: fit-content;
	justify-items: end;
	justify-self: end;
	align-items: center;
	column-gap: 10px;
	align-self: center;
}

.action_icon {
	cursor: pointer;
	height: 30px;
	width: 30px;
	opacity: 1;
	transition: 0.1s;
}

.action_icon:hover {
	opacity: 0.8;
}

.share_optional #share_button {
	display: none;
}

.profile_area {
	display: grid;
	grid-area: profile_area;
	padding-left: 20px;
	padding-bottom: 100px;
	align-content: start;
	align-items: start;
	height: 100%;
	margin: 0px;
	grid-row-gap: 20px;
}

.sprofile_area {
	display: none;
	grid-area: profile_area;
	padding-left: 20px;
	padding-bottom: 100px;
	align-content: start;
	align-items: start;
	height: 100%;
	margin: 0px;
	grid-row-gap: 20px;
}

.sprofile_area.disputes {
	grid-row-gap: 0px;
}

.sprofile_area.disputes.double_column {
	grid-row-gap: 10px;
	grid-column-gap: 10px;
}

.single_column {
	display: grid;
	grid-template-columns: 1fr;
	height: fit-content;
	grid-row-gap: 10px;
}

.double_column {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.triple_column {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
}

.triple_column .account_info, .double_column .account_info  {
	width: 100%;
}

.dispute_evidence_drugs {
	display: grid;
	grid-template-columns: 1fr auto 3fr;
	width: 100% !important;
}

.dispute_evidence_elements {
	display: grid;
	grid-template-columns: auto 1fr;
	width: 100% !important;
}

.dispute_evidence_rejected {
	display: grid:
	grid-template-columns: auto;
	width: 100%;
}

.triple_wide {
	grid-column: span 3 !important;
	width: auto !important;
}

.double_wide {
	grid-column: span 2 !important;
	width: auto !important;
}

.green_text {
	color: green;
}

.control_buttons {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	justify-items: center;
	align-items: center;
	padding: 20px;
	height: 100%;
	grid-column-gap: 20px;
}

.control_buttons .error_text {
	width: 100%;
}

.control_buttons .cancel_button {
	justify-self: start;
}

.item_lookup {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 10px;
	justify-content: start;
	align-items: center;
	align-content: center;
}

.item_lookup .login_input {
	margin: 0px;
	width: 550px;
}

.user_info {
	display: none;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	grid-row-gap: 15px;
	grid-column-gap: 15px;
}

.user_info .profile_buttons {
	margin: 0px;
	grid-template-columns: auto auto auto;
}

.user_info .account_info {
	width: 100%;
	align-items: start;
	align-content: start;
}

#effects_minor, #effects_severe, #effects_profile {
	height: 6em !important;
}

.efficacy_data {
	display: grid;
	align-items: start;
}

.efficacy_line {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 15px;
	align-items: center;
}

.settings_line #drug_price {
	width: 120px;
}

.profile_area.discovery_panels, .profile_area.planner_panels {
	grid-row-gap: 0px;
}

.profile_area .discovery_panel {
	display: grid;
	grid-template-columns: 200px 1fr 180px;
	border: none;
	padding: 8px 10px;
	background-color: #f2f2f2;
	grid-column-gap: 10px;
	align-content: center;
	align-items: center;
	font-size: 16px;
	height: 60px;
}

.profile_area .planner_panel {
	display: grid;
	grid-template-columns: 200px 220px 1fr 180px;
	border: none;
	padding: 8px 10px;
	background-color: #F2F2F2;;
	grid-column-gap: 10px;
	align-content: center;
	align-items: center;
	font-size: 16px;
	height: fit-content;
	min-height: 60px;
}

 .account_settings, .account_membership {
	display: grid;
 }

.planner_panels h2, .discovery_panels h2 {
	font-weight: 500;
	font-size: 24px;
	color: #516FA2;
	text-transform: capitalize;

}

.discovery_panel .element_holder, .planner_panel .element_holder {
	justify-self: start;
}

.discovery_panel:nth-child(odd), .planner_panel:nth-child(odd), .dispute_panel:nth-child(odd) {
  background: #FFFFFF;
}

.discovery_parameters {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.results_button {
	display: grid;
	width: 180px;
	height: 30px;
	align-content: center;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-transform: uppercase;
	background-color: #2a9bd7;
	opacity: 1;
	transition: 0.3s;
}

.results_button:hover {
	opacity: 0.8;
}

#lookup_presets.profile_area {
	display: none;
	grid-template-rows: auto auto 0.90fr 0.1fr;
	grid-row-gap: 0px;
}

#account_settings.profile_area {
	display: none;
	grid-template-columns: 1fr;
}

.settings_control_area {
	display: grid;
	height: fit-content;
	align-self: end;
}

.settings_status_message {
	justify-self: end;
	align-self: end;
	padding-right: 20px;
}

.settings_control_area .profile_buttons {
	margin-top: 0px;
}

#account_membership.profile_area {
	display: none;	
}

.account_membership {
	display: grid;
	height: fit-content;
	grid-template-columns: auto auto;
	width: fit-content;
	grid-column-gap: 10px;
	grid-row-gap: 20px;
}

.account_membership .double_wide {
	max-width: 920px;
}
	
.account_info {
	height: 100%;
}

.subscription_button {	
	display: grid;
	background-color: #132092;
	color: white;
	font-size: 20px;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
	align-self: end;
	height: fit-content;
}

.subscription_button:hover {
	opacity: 0.8;
}

.subscription_button:disabled {
	background-color: #d7dbe5;
	color: #2f3236;
	opacity: 0.8;
}

.checkout_button {	
	display: grid;
	background-color: #132092;
	color: white;
	font-size: 20px;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
}

.checkout_button:hover {
	opacity: 0.8;
}

.checkout_button:disabled {
	background-color: #d7dbe5;
	color: #2f3236;
	opacity: 0.8;
}

.cart_cancel {
	display: grid;
	justify-self: center;
	background-color: #d7dbe5;
	color: #2f3236;
	font-size: 20px;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
}

.cart_cancel:hover {
	opacity: 0.8;
}


#valid_through_line, #must_activate, #stripe_subscription_button, #stripe_portal_button, #add_tokens, #token_expiration, #token_expiration_reminder {
	display: none;
}

.customer_cart {
	display: grid;
	justify-content: center;
	justify-items: center;
	align-content: center;
	border: 0px solid white;
	border-radius: 30px;
	height: fit-content;
	justify-self: center;
	align-self: center;
	padding: 25px;
	background: white;
	opacity: 1;
	width: 500px;
}

.purchase_line {
	grid-template-columns: 1fr auto;
	display: grid;
	justify-items: start;
	justify-content: start;
	align-items: center;
	grid-column-gap: 30px;
	width: 100%;
}

.purchase_line .element_holder {
	justify-self: start;
}

.customer_cart .profile_buttons {
	margin: 0px;
	padding-top: 30px;
}


#feedback.profile_area {
	display: none;
}

.feedback {
	width: fit-content !important;
	display: grid;
	max-width: 800px;
	justify-items: start;
	grid-row-gap: 0px !important;
}

.feedback_request {
	padding-bottom: 20px;
}

.feedback_comments {
	width: 100% !important;	
	height: 320px !important;
	margin: 0px !important;
	padding: 15px !important;
	resize: none;
	justify-self: center;
}

.feedback .character_count {
	justify-self: center;
}

.feedback .secondary_button {
	width: fit-content;
	justify-self: center;
}

.feedback .status_message {
	text-align: center;
	justify-self: center;
	height: fit-content;
	padding: 10px 0px;
}

#checkout_wrapper.profile_area {
	display: none;
	height: 100%;
	width: 1030px;
	grid-row-gap: 15px;
	padding-bottom: 20px !important;
}

#checkout_wrapper .checkout_button {
	justify-self: center;
}

.lookup_profile_selector {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 30px;
	align-items: center;
	padding: 0px 10px 5px 45px;
	margin-bottom: 10px;	
}

.lookup_profile_selector .profile_selector {
	grid-area: auto;
}

.lookup_profile_selector .login_input {
	margin: 0px;
}

.profile_add {
	display: none;
	grid-template-columns: 1fr min-content min-content;
	align-items: center;
	width: fit-content;
	grid-column-gap: 20px;
}

.profile_dropdown {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 10px;
	align-items: center;
	margin: 0px;	
}

#active_profile, #current_condition {
	height: 40px;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 140%;
	height: 40px;
	background: #E8EBF4;
	border: 1px solid #D8DCE8;
	border-radius: 30px;
	color: #000000;
	padding: 0px;
	padding-left: 10px;
}

#current_condition {
	width: fit-content;
}

.profile_changes {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	height: 60px;
	justify-self: center;
}

.profile_changes .login_input {
	max-width: 320px;
}

.profile_changes .profile_changes_buttons {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 20px;
	align-items: center;
}

.secondary_button {
	background-color: #2a9bd7;
	cursor: pointer;
	color: white;
	opacity: 1;
	transition: 0.3s;
	font-size: 16px;
}

.secondary_button:hover {
	opacity: 0.8;
}

.secondary_button:disabled {
	opacity: 1;
	background-color: #DCDCDC;
}

.secondary_button + .cancel_button {
	color: #2f3236;
	background-color: #d7dbe5;
	text-transform: unset;
}

.profile_delete_button {
	display: none;
	color: #666666;
	text-decoration: underline;
}

.profile_delete_button:hover {
	text-decoration: underline;
}

.lookup_profile_selector .unsaved_changes {
	justify-self: end;
	display: none;
	border-radius: 30px;
	background: pink;
	padding: 10px;
	color: black;
}

.lookup_presets {
	display: grid;
	margin-top: 25px;
}

.lookup_presets .error_text, .lookup_profile_selector .error_text {
	height: 20px;
}

.lookup_presets .error_text {
	justify-self: center;
}

.profile_area .need_help {
	grid-area: auto;
	justify-self: start;
}

.profile_buttons {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: auto auto auto;
	justify-content: right;
	align-content: center;
	align-items: center;
	margin-top: 15px;
	margin-right: 25px;
	padding: 10px;
}

.profile_buttons button {
	height: 42px;
	font-size: 20px;
	width: fit-content;
	justify-self: center;
	align-content: center;
	text-transform: uppercase;
}

.profile_buttons .save_button {
	color: #FFFFFF;
	font-weight: 600;
	cursor: pointer;
	background-color: #132092;
	opacity: 1;
	transition: 0.3s;
}

.profile_buttons .save_button:hover {
	opacity: 0.8;
}

.profile_buttons .reset_button {
	color: #2f3236;
	font-weight: 600;
	cursor: pointer;
	background-color: #d7dbe5;
	opacity: 1;
	transition: 0.3s;
}

.profile_buttons .reset_button:hover {
	opacity: 0.8;
}

.profile_buttons button[disabled] {
	background-color: #DCDCDC;
	color: #666666;
	opacity: 1;
}

.profile_buttons button[disabled]:hover {
	background-color: #DCDCDC;
	color: #666666;
	opacity: 1;
}


.profile_menu {
	display: grid;
	position: sticky;
	top: 75px;
	grid-template-columns: auto;
	grid-area: profile_menu;
	justify-items: left;
	list-style-type: none;
	height: fit-content;
}

.profile_menu button {
	width: 200px;
	display: grid;
	color: black;
	padding: 8px 15px 8px 15px;
	justify-self: right;
	align-content: center;
	height: 50px;
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	margin: 0px;
}

.profile_menu button.inactive {
	background-color: #F7F7F7;
	color: #000000;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	border-right: 1px solid #CCCCCC;
	border-radius: 0px;
	opacity: 0.6;
	transition: 0.3s;
	justify-self: right;
}
.profile_menu button.inactive:hover {
	opacity: 1;
}


.profile_menu button.active {
	background-color: #e8ebf4;
	color: #2F2E7E;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	border-radius: 0px;
	border-right: 1px solid #9ba2b9;
	opacity: 0.8;
	transition: 0.3s;
	justify-self: right;
}

.profile_menu button.active:hover {
	opacity: 1;
}

.account_settings {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;	
	width: fit-content;
	grid-row-gap: 20px;
	grid-column-gap: 10px;
}

.account_settings .profile_buttons {
	margin-right: 0px;
	margin-bottom: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	justify-content: end;
	align-content: end;
}

.account_info {
	display: grid;
	grid-area: auto;
	border-radius: 30px;
	border: 1px solid #7B99CE;
	padding: 20px;
	grid-column-gap: 40px;
	grid-row-gap: 10px;
}

#account_membership .account_info {
	width: 450px;
}

.account_info.current_password {
	width: 100% !important;
}

.account_info .signup_prompt {
	justify-self: start;
	margin: 0px;
	padding: 0px;
	padding-bottom: 10px;
	font-size: 14px;
}

.settings_line {
	display: grid;
	grid-template-columns: minmax(max-content, 150px) 1fr;
	justify-items: end;
	align-items: center;
	column-gap: 30px;	
}

.settings_line .account_provider {
	display: grid;
	grid-template-columns: auto auto;
	justify-self: start;
	align-items: center;
	grid-column-gap: 10px;
}

.settings_line .login_input {
	margin: 0px;
}

.settings_line .label {
	justify-self: start;
}

.settings_line .element_holder{
	justify-self: start;
}

dialog:not([open]){
  display:none
}

/* Dispute Form */

.dispute_form {
	display: grid;
	position: fixed;
	grid-template-columns: 1fr;
	justify-content: center;
	justify-items: center;
	border: 0px solid white;
	border-radius: 30px;
	width: 90%;
	max-width: 800px;
	height: fit-content;
	justify-self: center;
	align-self: center;
	align-content: start;
	padding: 25px;
	background: white;
	opacity: 1;
	grid-row-gap: 10px;
}

.dispute_form_content {
	display: grid;
	grid-row-gap: 10px;
	width: 100%;
}

.dispute_criteria {
	display: grid;
	grid-template-columns: auto;
	grid-row-gap: 15px;
	width: 100%;
}

.dispute_criterion {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 10px;
	justify-self: start;
	align-self: center;
	background-color: #c9d2d2;
	border: 1px solid #bac1c1;
	border-radius: 30px;
	padding: 8px 14px;
}

.dispute_criterion_selected {
	background-color: #b2dede;
	border: 1px solid #acd3d2;
	outline: none;
	opacity: 1;
	transition: 0.3s;
}

.dispute_icons {
	display: flex;
	grid-column-gap: 5px;
	justify-items: center;
	align-items: center;	
}

.dispute_label {
	text-align: center;
	align-self: center;
}

.dispute_med_entry_included {
    display: grid;
	width: fit-content;
    height: fit-content;
	font-size: 16px;
    justify-self: start;
	background-color: #b2dede;
    border: 1px solid #acd3d2;
	border-radius: 30px;
	outline: none;
	margin: 5px;
    padding: 8px 10px;
	opacity: 1;
	transition: 0.3s;
}

.dispute_med_entry_excluded {
	display: grid;
	width: fit-content;
    height: fit-content;
	font-size: 16px;
    justify-self: start;
	text-decoration: line-through;
    background-color: #c9d2d2;
    border: 1px solid #bac1c1;
	border-radius: 30px;
	outline: none;
	margin: 5px;
    padding: 8px 10px;
}

.dispute_questions {
	display: grid;
	grid-row-gap: 20px;
}

.dispute_question {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 30px;
}

.dispute_prompt {
	display: inline;
	justify-self: start;
    font-size: 16px;
}

.dispute_basis_item {
	display: flex;
    grid-column-gap: 10px;
    justify-items: center;
    align-items: center;
}

.dispute_item_text {
	font-size: 14px;
	background: linear-gradient(129deg, rgba(219,218,218,1) 8%, rgba(242,241,241,1) 74%, rgba(219,218,218,1) 100%);
	padding: 20px;
	border-radius: 30px;
}

.dispute_item_number, .dispute_item_list, .dispute_item_labeled_list, .dispute_item_bars {
	justify-self: center;
}

.dispute_item_number .value {
	font-size: 20px;
}

.dispute_evidence {
	display: grid;
	grid-template-columns: 1fr;
	padding-bottom: 10px;
	grid-row-gap: 10px;
}

.dispute_form .error {
	display: inline;
	font-size: 16px;
	text-align: center;
	justify-self: center;
	height: fit-content;
	margin: 0px;
	padding: 5px 0px;
}

.dispute_question_text {
	font-style: italic;
	color: #263d8b;
}

.text_comment {
	padding: 15px !important;
	width: 100% !important;
	height: 15em !important;
	margin-bottom: 0px !important;
	resize: none !important;
}

.dispute_form.ratings .login_input {
	padding: 15px;
	width: 100%;
	height: 15em;
	margin-bottom: 0px;
}

.dispute_form .character_count {
	font-size: 12px;
	justify-self: center;
	margin-top: -10px;
}

.url_input {
	width: 100% !important;
	margin: 0px !important;
}

.dispute_buttons {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 10px;
	align-items: center;
}

.dispute_button {
	color: #FFFFFF;
	background-color: #2a9bd7;
	cursor: pointer;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
	margin: 5px 0px;
}

.dispute_button:hover {
	opacity: 0.8;
}

.share_stop {
	background-color: #ED4924 !important;
}

.shared_report_view {
	display: grid;
	height: fit-content;
	max-width: 90%;
	width: 600px;
	align-self: center;
	padding-bottom: 30px;
}

.shared_report_view h1 {
	padding: 30px 10px;
	line-height: normal;
}

.shared_report_view button {
	justify-self: center;
	width: fit-content;
}

.shared_report_view .membership_upgrade {
	margin-top: 50px;
}

.shared_report_disclaimer {
	font-size: 18px;
	padding-bottom: 30px;
}

.sharing_form {	
	position: fixed;
}	

.shared_report_view .error_text, .sharing_form .error_text {
	justify-self: center;
	padding-bottom: 20px;
	text-align: center;
}

.cancel_button {
	color: #2f3236;
	background-color: #d7dbe5;
	cursor: pointer;
	text-transform: uppercase;
	opacity: 1;
	transition: 0.3s;
	justify-self: center;
}

.cancel_button:hover {
	opacity: 0.8;
}

.dispute_button:disabled {
	background-color: #DCDCDC;
	color: #666666;
	opacity: 1;
}

.dispute_form .success {
	color: black;
}

#share_form_intro {
	padding-top: 20px;
}

.share_form_close {
	position: absolute;
	top: 20px;
	right: 20px;
	height: 30px;
}

.share_link {
	display: none;
	align-items: center;
	grid-auto-flow: column;
	grid-column-gap: 20px;
	padding-bottom: 20px;
}

.share_link_url {
	display: grid;
	align-content: center;
	justify-content: center;
	margin: 0px !important;
	padding: 15px;
	width: fit-content !important;
	color: darkblue !important;
	font-weight: 600 !important;
	font-size: 20px !important;
}

.share_link_buttons {
	justify-self: center;
}

.dispute_panel {
	display: grid;
	grid-template-columns: 200px 60px 1fr 1fr auto;
	border: none;
	padding: 8px 10px;
	background-color: #f2f2f2;
	grid-column-gap: 10px;
	align-content: center;
	align-items: center;
	font-size: 16px;
	height: 60px;
}


/* Reports Page */
 .planner_panels, .discovery_panels {
	 display: none;
 }
 
#reports {
	display: grid;
	grid-template-areas:
		"reports_graphic reports_graphic"
		"profile_menu profile_area";
	align-content: start;
	padding-top: 0px;
 }
 
 .reports_graphic {
 	display: grid;
	grid-area: reports_graphic;
	height: 93px;
	background: url("/static/reports-graphic.png") center center no-repeat;
	background-size: contain;
 }

/* Sign Up Page */

#signup {
	display: none;
	grid-area: main;
	width: 1000px;
	height: auto;
	grid-template-areas:
		"signup_graphic_4"
		"title"
		"disclaimer"
		"invite_code_message"
		"signup_email"
		"or_pane"
		"signup_social";
	grid-template-columns: auto;
	align-items: center;
	align-self: center;
	justify-content: center;
	justify-items: center;
	padding: 30px 67px;
}

.signup_email {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, auto);
	align-self: start;
	justify-content: center;
	width: 100%;
}

#signup .signup_email {
	grid-area: signup_email;
}

#signup > .signup_social {
	display: grid;
	grid-area: signup_social;
	grid-template-columns: 1fr;
	align-self: start;
}

#signin > .signup_social {
	display: grid;
	grid-area: auto;
	grid-template-columns: 1fr;
	align-self: start;
}

#signin .login_prompt {
	max-width: 366px;
	width: 100%;
	text-align: center;
	justify-self: center;
	font-size: 14px;
}

#signup h1 {
	grid-area: title;
	justify-self: center;
}

#signup h2, #signin h2 {
	justify-self: center;
}

.signup_email > .signup_prompt {
	margin-top: 0px;
	margin-bottom: 10px;
	width: 366px;
	font-size: 14px;
	text-align: center;
}

#signup > .signup_button {
	width: 151px;
	height: 42px;
	justify-self: center;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	margin-top: 30px;
}

#signup > .signup_button:disabled {
	background-color: #cecece;
}

#signup > #invite_code {
	margin-top: 10px;
	margin-bottom: 0px;
	grid-area: invite_code;
}

#signup .error {
	display: inline;
	grid-area: invite_code_message;
	height: fit-content;	
	margin-bottom: 5px;
	justify-content: center;
	text-align: center;
	margin: 0px;
	padding: 10px 0px;
}

#signup_flow_step_3 .error {
	display: inline;
	height: fit-content;	
	justify-content: center;
	text-align: center;
	margin: 0px;
	padding: 20px 0px 0px 0px;
}

#signup > .tos {
	grid-area: disclaimer;
	text-align: center;
	max-width: 366px;
}

#signup > .signup_flow_prompt {
	display: none;
	grid-area: signup_flow_prompt;
}

.response_row {
	font-weight: 500;
	text-align: center;
	height: 2em;
}

.register_button {	
	border: none;
    padding: 8px 25px;
    color: #fff;
    font-weight: 600;
	font-size: 1.3em;
    cursor: pointer;
   	border-radius: 1.25rem;
    background-color: #51bb7b;
	justify-self: center;
	align-self: center;
	height: 2em;
	margin: 5px;
}

.register_button:hover {
	background-color: darkgreen;
}

.register_button[disabled] {
	background-color: gray;
}

.validation_prompt {
	grid-area: validation_prompt;
	height: 30px;
}

/* Sign-up Flow */

.signup_graphic_1 {
	display: grid;
	width: 400px;
	height: 181px;
	background: url("/static/sign-up-step-1.png") center center no-repeat;
	background-size: contain;
}

.signup_graphic_2 {
	display: grid;
	width: 400px;
	height: 210px;
	background: url("/static/sign-up-step-2.png") center center no-repeat;
	background-size: contain;
}

.signup_graphic_3 {
	display: grid;
	width: 400px;
	height: 223px;
	background: url("/static/sign-up-step-3.png") center center no-repeat;
	background-size: contain;
}

.signup_graphic_4 {
	display: grid;
	grid-area: signup_graphic_4;
	width: 400px;
	height: 160px;
	background: url("/static/sign-up-step-4.png") center center no-repeat;
	background-size: contain;
}

.signup_graphic_final {
	display: grid;
	width: 400px;
	height: 348px;
	background: url("/static/sign-up-step-5.webp") center center no-repeat;
	background-size: contain;
}

.signup_flow {
	width: 1200px;
	height: fit-content;
	display: none;
	grid-template-columns: 1fr;
	padding: 20px;
	align-self: center;
	align-items: center;
	align-content: center;
	justify-items: center;
}

.signup_flow > .patient_bio_settings {
	grid-area: auto;
}

.signup_flow > .conditions_pane_reg {
	width: 100%;
	padding: 0px;
}

.signup_flow .or_pane {
	padding-top: 20px;
	padding-bottom: 20px;
}

.signup_flow #checkout {
	display: grid;
	width: 100%;
	justify-self: center;
}	

.step_buttons {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-content: center;
	grid-column-gap: 10px;
}

.step_buttons > .back_button {
	background: #d0d2da;
	color: #333333;
	opacity: 1;
	transition: 0.3s;
}

.step_buttons > .back_button:hover {
	opacity: 0.8;
}

.signup_flow_prompt {
	padding: 12px 20px 15px 20px;
	font-size: 16px;
}

.signup_complete {
	display: grid;
	grid-template-columns: auto;
	width: 1200px;
	padding: 20px;
	align-self: center;
	align-items: center;
	align-content: center;
	justify-items: center;
	font-size: 20px;
	z-index: 2;
}

/* Sign In Page */

.page > #signin {
	width: 500px;
	grid-area: main;
	display: grid;
	align-items: center;
	align-self: center;
	justify-content: center;
	grid-template-columns: auto;
	grid-template-rows: repeat (12, auto);
/*	background-color: white;
	border: 4px solid white;
	border-radius: 30px;
	box-shadow: 2px 2px 4px 0px #d0d0d0 inset; */
	height: fit-content;
	padding: 30px 30px;
}

.page > #signin > h1 {
	margin-bottom: 25px;
	justify-self: center;
}	

.login_input {
	font-family: "Red Hat Display", sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 140%;
	width: 366px;
	height: 40px;
	background: #E8EBF4;
	border: 1px solid #D8DCE8;
	border-radius: 30px;
	color: #000000;
	justify-self: center;
	margin-bottom: 20px;
}

.login_input:focus {
	outline: none;
	background: #f0f3fd;
	border: 1px solid #acb6d3;
}

.login_input:disabled {
	opacity: 0.7;
}

.signup_prompt {
	font-size: 16px;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	justify-self: center;
	margin-top: 0px;
	margin-bottom: 20px;
}

#signin .signup_prompt {
	padding-top: 10px;
}

.reset_prompt {
	font-size: 16px;
	width: 100%;
	max-width: 366px;
	justify-self: center;
	padding-top: 5px;
}

#signin > .signin_button {
	width: 151px;
	height: 42px;
	justify-self: center;
	color: #FFFFFF;
	font-size: 20px;
}

.page > #signin > .signin_button:disabled {
	background-color: #cecece;
}

.page > #signin > #password {
	margin-bottom: 0px;
}

.error {
	display: inline;
	font-size: 18px;
	color: #ED4924;
	justify-content: start;
	align-content: center;
	height: 60px;
	margin: 10px 0px;
}

#signin .error {
	justify-self: center;
	text-align: center;
	height: fit-content;
}

.or_pane {
	grid-area: "or_pane";
	display: flex;
	flex-direction: row;
	padding-top: 8px;
	padding-bottom: 10px;	
	font-size: 20px;
	font-weight: 600;
	max-width: 366px;
	width: 100%;
	justify-self: center;
}

.or_pane:before, .or_pane:after {
	content: "";
	flex: 1 1;
	border-bottom: 1px solid black;
	margin: auto;
}
.or_pane:before {
	margin-right: 20px;
}
.or_pane:after {
	margin-left: 20px;
}

.social_media {
	display: grid;
	grid-template-columns: auto 1fr;
	width: 366px;
	height: 42px;
	font-size: 16px;
	font-weight: 480;
	background-color: white;
	border-radius: 29px;
	border: 1px solid #7B99CE;
	margin-bottom: 15px;
	padding: 0px;
	justify-self: center;
	align-content: center;
	align-items: center;
}

.social_media:hover {
	background-color: #ECF4FF;
}

.social_button {
	display: grid;
	justify-self: start;
	align-self: center;
	height: 30px;
	width: 30px;
	margin-left: 10px;
}

.page > #password_reset, .page > #password_set {
	width: 60%;
	max-width: 500px;
	grid-area: main;
	display: grid;
	justify-self: center;
	padding: 10px;
	margin: 10px;
	align-self: center;
	justify-items: center;
	height: fit-content;
}

.email_input {
	display: grid;
	width: 100%;
}

#signin > .signin_button, #password_reset .signin_button {
	width: fit-content;
	height: 42px;
	justify-self: center;
	color: #FFFFFF;
	font-size: 20px;
}

/* Common Elements */

.tos_window {
	width: 500px;	
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-template-areas: 
		"title"
		"tos"
		"invite_box"
		"action_buttons";
	border: 4px solid white;
	border-radius: 30px;
	box-shadow: 2px 2px 4px 0px #d0d0d0 inset;
	padding: 0px;	
	grid-row-gap: 5px;
	grid-column-gap: 5px;
	align-self: center;
	padding: 30px;
}

.tos_window > .title {
	display: grid;
	grid-area: title;
	height: 100%;
	width: 100%;
	grid-area: title;
	justify-content: center;
	word-wrap: break-word;
	word-break: break-all;	
}

.tos_window > .invite_box {
	display: grid;
	grid-area: invite_box;
	margin: 10px;
}

.tos_window > .action_buttons {
	grid-area: action_buttons;
	justify-self: center;
	vertical-align: middle;
	margin-bottom: 10px;
}

.tos_window > .action_buttons > .reject_button {
	color: #fff;
	padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25rem;
    background-color: red;
}

.tos_window > .tos {
	grid-area: tos;
	margin: 10px;
}

.tos_window:not([open]){
  display:none;
}

.results_view {
	display: grid;
	grid-template-columns: auto;
	grid-template-areas:
		"logo"
		"results_header"
		"drug_panes";
	padding: 20px;	
	grid-row-gap: 5px;
	grid-column-gap: 10px;
	height: fit-content;
	background-color: #f3f3f3;
	justify-self: center;
	min-width: 900px;
	max-width: 1500px;
	width: 80%;
	padding-top: 60px;
}

#planner_view {
	width: 100%;
}

.results_menu {
	position: fixed;
	width: 100%;
	height: 55px;
	display: grid;
	grid-template-columns: auto 1fr;
	background-color: white;
	padding: 0px 30px;
	align-items: center;
}

.results_menu a {
	display: grid;
	align-content: center;
}

.results_menu img {
	justify-self: start;
	align-self: center;
	height: 25px;
}

.results_menu .logo {
	width: 300px;
	height: unset;
}

.results_view .g2o_logo {
	display: none;
	justify-self: center;
}

.results_header {
	display: grid;
	grid-area: results_header;
	grid-template-columns: fit-content(40%) 1fr;
	grid-template-areas:
		"report_data report_data"
		"discovery_info patient_info"
		"disclaimer disclaimer"
		"second_opinion second_opinion";
	border-radius: 30px;
	border: 0px;
	padding: 0px;
	grid-row-gap: 5px;
	grid-column-gap: 10px;
	height: fit-content;	
	justify-self: center;
	width: 100%;
}

.planner_header {
	display: grid;
	grid-area: results_header;
	grid-template-columns: auto;
	grid-template-areas:
		"report_data"
		"patient_info"
		"disclaimer"
		"second_opinion";
	padding: 0px;
	grid-row-gap: 5px;
	height: fit-content;	
	justify-self: center;
	width: 100%;
}

.icon {
	height: 29px;
	justify-self: center;
}

.icon_hero {
	width: 80px;
	justify-self: center;
}

.icon_close {
	height: 10px;
}

.icon_large {
	height: 120px;
	justify-self: center;
}

.report_data {
	display: grid;
	grid-area: report_data;
	grid-template-rows: auto auto auto;
	justify-items: center;
	justify-content: center;
	grid-row-gap: 10px;
}

.report_data .report_name {
	line-height: unset;
}

.report_data .g2o_logo {
	display: none;
	height: 40px;
}

.disclaimer {
	display: grid;
	grid-area: disclaimer;
	width: 100%;
	background: #4A485B;
	color: white;
	padding: 10px;
	margin: 10px 10px 5px 10px;	
	font-size: 11px;
}

.disclaimer.element_holder .icon {
	align-self: center;
	justify-self: center;
	color: white;
}

.disclaimer.element_holder {
	margin-bottom: 5px;
}
.discovery_info {
	display: grid;
	grid-area: discovery_info;
	grid-template-rows: auto auto;
	grid-gap: 5px;
	align-content: center;
	justify-items: center;
	border-right: 2px solid #8F8DA6;
	padding: 0 10px;
}

.results_view .patient_info {
	display: grid;
	grid-area: patient_info;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"patient_icon patient_bio"
		"patient_icon patient_conditions"
		"patient_icon patient_meds";
	justify-content: start;
	grid-row-gap: 10px;
}

.patient_info > .patient_icon {
	display: grid;
	grid-area: patient_icon;
	align-content: center;
	align-self: center;
	justify-content: center;
	padding: 20px;
	height: max-content;
}

.patient_info > .patient_bio {
	display: flex;
	grid-area: patient_bio;
	justify-content: start;
}

.element_holder {
	display: grid;
	grid-template-columns: auto auto;
	align-content: center;
	align-items: center;
	justify-content: center;
	grid-column-gap: 10px;	
	justify-self: center;
	padding-right: 10px;
}

.element_holder .icon {
	align-self: center;
	justify-self: center;
	color: white;
}

.element_holder .value {
	display: grid;
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
}

.element_holder.synopsis .value {
	display: inline;
}

.patient_info > .patient_conditions {
	display: grid;
	grid-area: patient_conditions;
	align-content: center;
	justify-content: start;
}

.results_header > .patient_info > .patient_meds, .planner_header > .patient_info > .patient_meds {
	display: grid;
	grid-area: patient_meds;
	justify-content: start;
}

.patient_conditions .icon {
	align-self: center;
	justify-self: center;
}

.patient_conditions .element_holder {
	justify-self: start;
}

.patient_meds .element_holder {
	justify-self: start;
}

.patient_conditions ul, .patient_meds ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-items: center;
	padding: 0px;
	margin: 0px;
	gap: 10px;
}

.patient_conditions ul li {
	border-radius: 30px;
	padding: 5px 10px;
	border: 1px solid #BEC4E0;
	background-color: #CBD0E5;
	width: fit-content;
	height: auto;
	align-content: center;
}

.included {
	background-color: #b2dede;
	border: 1px solid #acd3d2;
	opacity: 1;
	transition: 0.3s;
}

.included:hover {
	opacity: 0.8;
}

.static {
	opacity: 1 !important;
	transition: none !important;
	cursor: default !important;
}

.excluded {
	text-decoration: line-through;	
	background-color: #c9d2d2;
	border: 1px solid #bac1c1 !important;
	opacity: 1;
	transition: 0.3s;
}

.excluded:hover {
	opacity: 0.8;
}

.patient_meds ul li, .meds_selected ul li {
	border-radius: 30px;
	padding: 5px 10px;
	border: 1px solid #acd3d2;
	width: fit-content;
	font-size: 16px;
}

.patient_meds .included {
	background-color: #b2cade;
	border: 1px solid #acbfd3;
	opacity: 1;
}

.planner_panel .patient_meds .included:hover {
	background-color: #b2cade;
	border: 1px solid #acbfd3;
	opacity: 1;
}


.patient_meds .included:hover {
	opacity: 0.8;
}

.patient_info > .patient_meds ul li {

}

.second_opinion {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-area: second_opinion;
	background: linear-gradient(129deg, rgba(219,218,218,1) 8%, rgba(242,241,241,1) 74%, rgba(219,218,218,1) 100%);
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	padding: 0px;
	justify-items: center;
	align-items: center;
	grid-column-gap: 10px;
}


.second_opinion_logo {
	display: grid;
	padding: 5px;
	justify-items: center;
	align-items: center;
}

.second_opinion_logo .icon_hero {
	display: grid;
	align-self: center;
}

.second_opinion_logo h3 {
	display: grid;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
	align-self: start;
}

.second_opinion .synopsis {
	padding: 5px 10px 5px 0px;
}

.drug_panes {
	display: grid;
	grid-template-columns: 1fr;
	grid-area: drug_panes;
	justify-self: center;
	margin: 0px;
	width: 100%;
}	

.drug_pane.primaryRx {
	background-color: #f1fdf6;
}

.drug_pane.primaryRxAtypical {
	background-color: #fce5da;
}

.drug_pane {
	display: grid;
	grid-template-columns: min-content max-content 1fr 1fr 1fr;
	grid-template-areas:
		"drug_rank drug_names drug_names drug_names drug_names"
		"drug_rank drug_brands drug_brands drug_brands drug_brands"
		"drug_rank all_drug_brands all_drug_brands all_drug_brands all_drug_brands"
		". score_gauges drug_interactions medicare_part_d user_ratings"
		"details_open details_open details_open details_open details_open"
		"result_details result_details result_details result_details result_details"
		"details_close details_close details_close details_close details_close";
	grid-column-gap: 10px;
	border-radius: 0px 0px 30px 30px;
	border: 0px solid #F3F3F3;
	padding: 10px 0px 0px 0px;
	margin: 10px 0px;
	background-color: white;
	width: 100%;
}	

.drug_rank {
	display: grid;
	grid-area: drug_rank;
	grid-template-columns: auto;
	justify-self: center;
	justify-content: center;
	align-self: start;
	padding: 0px;
}

.drug_rank > .icon {
	display: grid;
	grid-area: drug_rank_elements;
	align-self: start;
	justify-self: center;
	height: 80px !important;
}

.drug_rank > .value {
	display: grid;
	grid-area: drug_rank_elements;
	align-self: start;
	justify-self: center;
	font-size: 24px;
	font-weight: 700;
	padding-top: 13px;
}

.rank-gold > .value {
	color: #7e6327;
}

.rank-silver > .value {
	color: #4f4f4f;
}

.rank-copper > .value {
	color: #663e18;
}

.rank-plain > .value {
	color: #656b76;
}

.drug_names {
	display: grid;
	grid-area: drug_names;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"drug_icons drug_name";
	grid-column-gap: 5px;
	height: fit-content;
	align-self: center;
	margin: 0px 0px 10px 20px;
}

.drug_name {
	display: grid;
	grid-area: drug_name;
	justify-self: start;
	align-self: center;
	font-size: 22px;
	font-weight: 600;
	padding: 5px;
}

.all_drug_brands  {
	display: none;
	grid-area: all_drug_brands;
	justify-self: start;
	align-content: start;
	font-size: 14px;
	margin: 10px 20px 10px 20px;	
}

.drug_icons {
	display: grid;
	grid-template-columns: auto auto;
	grid-area: drug_icons;
	justify-self: start;
	align-content: start;
	justify-content: start;
	align-self: center;
	font-size: 0.8em;
	grid-column-gap: 10px;
}

.drug_brands {
	display: grid;
	grid-area: drug_brands;
	justify-self: start;
	align-content: center;
	font-size: 14px;
	margin: 10px 20px 10px 20px;	
}

.score_gauges {
	display: grid;
	grid-area: score_gauges;
	grid-template-columns: repeat(6,auto);
	width: fit-content;
	justify-self: center;
	font-size: 12px;
	margin-bottom: 15px;
	padding: 0px 20px;
}

.score_bars {
	display: grid;
	grid-area: score_gauges;
	grid-template-columns: repeat(4,auto);
	width: fit-content;
	justify-self: center;
	font-size: 12px;
	padding: 10px 20px;
	grid-column-gap: 10px;
}

.score_bars_invalid {
	grid-area: score_gauges;
}

.score_bars_invalid_1 {
	grid-area: score_gauges_1;
}

.score_bars_invalid_2 {
	grid-area: score_gauges_2;
}
.score_bar {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"gauge_label"
		"gauge_icon";		
	justify-content: center;
	justify-items: center;
	align-content: center;
	height: 100%;
}

.score_bar > .icon {
	grid-area: gauge_icon;
	align-self: end;
}

.score_bar > .value {
	grid-area: gauge_label;
	text-align: center;
	align-content: start;
}

.medicare_part_d {
	display: grid;
	grid-area: medicare_part_d;
	height: 60px;
	justify-self: center;
	align-self: center;
}

#planner_drug_panes .medicare_part_d {
	height: 60px;
}

.drug_datacard {
	display: grid;
	grid-area: score_gauges;
	grid-template-columns: repeat(4,auto);
	width: fit-content;
	justify-self: center;
	font-size: 12px;
	padding: 10px 20px;
	grid-column-gap: 20px;
}

.drug_datacard .element_holder {
	padding: 0px;
}

.drug_score {
	display: flex;
	font-size: 21px;
	justify-self: center;
	align-self: center;
}

.drug_data_element_hor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 5px;
}

.drug_data_element_ver {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-row-gap: 2px;
}

.drug_data_effects {
	display: grid;
	grid-template-columns: repeat(3,auto);
	grid-column-gap: 5px;
}

.effects_element {
	display: grid;
	grid-template-areas:
		"placement";
}

.effects_element .icon, .effects_element .drug_score {
	grid-area: placement;
	align-self: center;
	justify-self: center;
	font-size: 14px;
}

.effects_element .icon {
	height: 38px;
}

.efficacy_best {
	color: green;
}	

.efficacy_average {
	color: orange;
}

.efficacy_lower {
	color: red;
}

.efficacy_ratio {
	font-size: 12px;
}

.drug_panes > .drug_pane > .drug_names,
.drug_panes > .drug_pane > .drug_brands,
.drug_panes > .drug_pane > .all_drug_brands,
.drug_panes > .drug_pane > .score_gauges {
	margin-left: 0px;
}

.score_gauges_2, .drug_names_2, .drug_brands_2, .all_drug_brands_2 {
	margin-left: 0px;
}

.score_gauge {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"gauge_label"
		"gauge_score";		
	justify-content: center;
	justify-items: center;
	align-content: center;
	margin: 0px;
	height: min-content;
	grid-row-gap: 2px;
}

.score_gauge > .score {
	grid-area: gauge_score;
	font-size: 22px;
	font-weight: 600;
	align-content: center;
}

.score_gauge > .name {
	grid-area: gauge_label;
	text-align: center;
	align-content: center;
}

.score_gauge .value {
	align-self: center;
}

.drug_interactions {
	display: grid;
	grid-template-columns: auto auto;
	grid-area: drug_interactions;
	justify-self: center;
	align-content: center;
	grid-column-gap: 10px;
}

#planner_drug_panes .drug_interactions {
	align-content: end;
}

.text_label {
	font-size: 11pt;
}

.user_ratings {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"user_stars rating_count";
	grid-area: user_ratings;
	width: fit-content;
	grid-column-gap: 5px;
	align-self: center;
	justify-self: center;
	padding-right: 15px;
}

.user_ratings:hover{
	opacity: 0.7;
}

.your_ratings {
	display: flex;
	width: fit-content;
	border: none;
	grid-column-gap: 5px;
	margin: 10px;
	font-size: 20px;
}

.rating_icon {
	display: none;
	grid-area: rating_icon;
	height: 1.8em;
	justify-self: center;
	align-self: center;
}

.user_stars {
	display: grid;
	grid-area: user_stars;
	align-content: center;
	height: 1.5em;
	justify-self: center;
}

.rating_count {
	display: grid;
	grid-area: rating_count;
	align-items: center;
	font-size: 14px;	
	width: fit-content;
}

.details_open {
	display: grid;
	grid-area: details_open;
	justify-self: center;
	justify-content: center;
	padding: 4px;
	width: 100%;
	height: fit-content;
	background: #d3e9f4;
	background: linear-gradient(125deg, rgba(19, 32, 146, 0.3) 30%, rgba(42, 155, 215, 0.3) 80%);
	opacity: 1;
	transition: 0.3s;
	margin: 0px 4px 0px 4px;
	border-radius: 0 0 30px 30px;
}

.details_open:hover {
	opacity: 0.8;
}

.result_details {
	display: none;
	grid-template-columns: 0.3fr 0.2fr 0.5fr;
	grid-area: result_details;
	grid-template-areas:
		"minor_interactions minor_interactions major_interactions"
		"precondition_details precondition_details precondition_details"
		"second_opinion second_opinion second_opinion"
		"drug_ingredients drug_usage drug_usage"
		"drug_pregnancy drug_pregnancy drug_pregnancy"
		"drug_cautions drug_cautions drug_cautions";
	padding: 0px 20px;
	margin: 10px 0px;
	grid-row-gap: 15px;
	align-items: start;
}

.result_details_dual {
	display: none;
	grid-template-columns: 1fr 50px 1fr;
	grid-area: result_details;
	padding: 0px 20px;
	margin: 10px 0px;
	grid-row-gap: 15px;
}

.result_details_dual > .minor_interactions,
.result_details_dual > .major_interactions,
.result_details_dual > .drug_ingredients,
.result_details_dual > .drug_cautions,
.result_details_dual > .drug_usage,
.result_details_dual > .drug_pregnancy {
	grid-area: auto;
	align-content: start;
}

.drug_ingredients {
	display: grid;
	grid-area: drug_ingredients;
	justify-self: start;
	font-size: 14px;
}

.interaction_details {
	display: grid;
	grid-template-areas:
		"icon interaction_summary"
		". patient_meds";
	grid-column-gap: 5px;
}

.interaction_details > .icon, .precondition_details .icon {
	grid-area: icon;
}

.interaction_details > .interaction_summary, .precondition_details > .interaction_summary  {
	grid-area: interaction_summary;
	align-self: center;
	justify-self: start;
}

.interaction_details > ul {
	grid-area: patient_meds;
}

.precondition_details {
	display: grid;
	grid-area: precondition_details;
	grid-template-areas:
		"icon interaction_summary"
		". patient_preconditions";
	grid-column-gap: 5px;
	justify-self: start;
}

.precondition_details > ul {
	grid-area: patient_preconditions;
}

.minor_interactions {
	display: grid;
	grid-area: minor_interactions;
	justify-self: start;
}

.major_interactions {
	display: grid;
	grid-area: major_interactions;
	justify-self: start;
}

.drug_usage {
	display: grid;
	grid-area: drug_usage;
	justify-self: start;
	font-size: 14px;
}

.drug_pregnancy {
	display: grid;
	grid-area: drug_pregnancy;
	justify-self: start;
	font-size: 14px;
}

.drug_cautions {
	display: grid;
	grid-area: drug_cautions;
	justify-self: start;
	font-size: 14px;
}

.drug_usage .icon, .drug_cautions .icon, .drug_incredients .icon, .all_drug_brands .icon, .drug_brands .icon, .drug_pregnancy .icon  {
	align-self: start;
}

.details_close {
	display: none;
	grid-area: details_close;
	justify-self: center;
	justify-content: center;
	padding: 5px;
	width: 100%;
	height: fit-content;
	background: #FFFFFF;
	opacity: 1;
	transition: 0.3s;
	border-radius: 0 0 30px 30px;
}

.details_close:hover {
	background: #eeeded;
}

.planner_pane_dual {
	display: grid;
	grid-template-columns: auto auto auto 100px auto auto auto;
	grid-template-areas:
		"outcome_icon outcome_icon outcome_icon outcome_icon outcome_icon outcome_icon outcome_icon"
		"drug_names_1 drug_names_1 drug_names_1 drug_arrow drug_names_2 drug_names_2 drug_names_2"
		"drug_brands_1 drug_brands_1 drug_brands_1 . drug_brands_2 drug_brands_2 drug_brands_2"
		"all_drug_brands_1 all_drug_brands_1 all_drug_brands_1 . all_drug_brands_2 all_drug_brands_2 all_drug_brands_2"
		"second_opinion second_opinion second_opinion second_opinion second_opinion second_opinion second_opinion"
		"score_gauges_1 drug_interactions_1 medicare_part_d_1 . score_gauges_2 drug_interactions_2 medicare_part_d_2"
		"details_open details_open details_open details_open details_open details_open details_open"
		"result_details result_details result_details result_details result_details result_details result_details"
		"details_close details_close details_close details_close details_close details_close details_close";
	background: #FFFFFF;
	border-radius: 0 0 30px 30px;
	border: 0px solid white;
	padding: 0px;
	margin: 10px 0px;
	width: 100%;
	grid-row-gap: 5px;
}

.outcome_icon  {
	display: grid;
	grid-area: outcome_icon;
	height: 20px;
	justify-self: center;
	align-self: start;
	margin-bottom: 10px;
}

.drug_names_1 {
	grid-area: drug_names_1;
}

.drug_names_2 {
	grid-area: drug_names_2;
}

.drug_brands_1 {
	grid-area: drug_brands_1;
}

.drug_brands_2 {
	grid-area: drug_brands_2;
}

.all_drug_brands_1 {
	grid-area: all_drug_brands_1;
}

.all_drug_brands_2 {
	grid-area: all_drug_brands_2;
}

.drug_datacard_1, .score_bars_1 {
	grid-area: score_gauges_1;
}

.drug_datacard_2, .score_bars_2 {
	grid-area: score_gauges_2;
}

.medicare_part_d_1 {
	grid-area: medicare_part_d_1;
}

.medicare_part_d_2 {
	grid-area: medicare_part_d_2 ;
}

.drug_interactions_1 {
	grid-area: drug_interactions_1;
}

.drug_interactions_2 {
	grid-area: drug_interactions_2;
	padding-right: 10px;
}

.drug_arrow {
	display: grid;
	grid-area: drug_arrow;
	justify-self: center;
	align-self: start;
	width: 48px;
}

.element_holder.drug_brands .icon {
	height: 29px;
}

.planner_pane_single {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-areas:
		"outcome_icon outcome_icon outcome_icon"
		"drug_names_1 drug_names_1 drug_names_1" 
		"drug_brands_1 drug_brands_1 drug_brands_1"
		"all_drug_brands_1 all_drug_brands_1 all_drug_brands_1"
		"second_opinion second_opinion second_opinion"
		"score_gauges_1 drug_interactions_1 medicare_part_d_1"
		"details_open details_open details_open"
		"result_details result_details result_details"
		"details_close details_close details_close";
	border-radius: 0 0 30px 30px;
	padding: 0px;
	margin: 10px 0px;
	background-color: white;
	width: 100%;
	grid-row-gap: 5px;
}

.planner_pane_single > .second_opinion, .planner_pane_dual > .second_opinion {
	background: linear-gradient(129deg, rgba(233,240,245,1) 8%, rgba(242,241,241,1) 74%, rgba(226,235,241,1) 100%);
	box-shadow: none;
}

.result_details > .second_opinion {
	background: linear-gradient(129deg, rgba(233,240,245,1) 8%, rgba(242,241,241,1) 74%, rgba(226,235,241,1) 100%);
	box-shadow: none;
	border-radius: 6px;
}

.response_message {
	display: grid;
	position: fixed;
	grid-template-columns: 1fr;
	justify-content: center;
	justify-items: center;
	border: 0px solid white;
	border-radius: 30px;
	width: 90%;
	max-width: 600px;
	height: fit-content;
	align-content: start;
	padding: 25px;
	background: white;
	opacity: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	grid-row-gap: 10px;
}

.response_container {
	height: fit-content;
	width: fit-content;
}

.response_message > .title {
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 20px;
	padding: 10px 0px;
	text-align: center;
	height: fit-content;
}

.response_message .message {
	display: inline;
	padding: 10px 0px;
	grid-row-gap: 10px;
	height: fit-content;
}

.response_message .element_holder {
	padding: 10px 0px;
	font-size: 18px;
	text-align: center;
}

.response_message .profile_buttons {
	margin-right: 0px;
}

::backdrop {
	background-color: rgba(85, 98, 142, 0.7);	
}

.title {
	display: flex;
	justify-content: center;
	justify-self: center;
	align-self: center;
	margin: 0px;
	padding: 0px;
}

.title h2 {
	display: grid;
	justify-self: center;
	align-self: center;
	padding: 0px;
}

.title .logo {
	object-fit: contain;
	align-content: center;
	align-self: center;
	width: 75px;
	margin: 0px;
	padding: 0px;
}

.message {
	display: inline;
	font-size: 16px;
	padding: 10px;	
}

.error_breakable_name {
	word-break: break-all;
}

.message p {
	padding: 0px;
	margin: 0px;
}

.response_message > .signin_button  {
	display: grid;
	min-width: 151px;
	height: 42px;
	justify-self: center;
	background: #2a9bd7;
	color: #FFFFFF;
	font-size: 20px;
	text-transform: uppercase;
}	

.fliptoggle {
	display: grid;
	grid-template-columns: min-content min-content min-content;
	grid-row-gap: 10px;
	column-gap: 10px;
	grid-template-areas:
		"label_l switch label_r";
	align-items: center;
	padding: 10px;
}

.fliptoggle .label_r {
	grid-area: label_r;
	justify-self: start;
	font-size: 16px;
	font-weight: 400;
}

.fliptoggle .label_l {
	grid-area: label_l;
	justify-self: end;
	font-size: 16px;
	font-weight: 400;
}

.fliptoggle .switch {
	grid-area: switch;
	justify-self: center;
}

.profile_selector {
	display: grid;
	grid-template-columns: auto auto;
	grid-area: aux_row;
	justify-items: center;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	font-size: 14px;
	grid-column-gap: 10px;
	justify-self: center;
}

.profile_selector > .label {
	display: flex;
	text-justify: center;
}

.condition_selector {
	justify-self: start;
	grid-area: auto;
}

.slidecontainer {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
	"desc desc desc"
	"slider_range slider_range slider_range"
	"label_l value label_r";	
  text-align: center;
  background: linen;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
}

.slidecontainer .label_r {
	grid-area: label_r;
	justify-self: end;
}

.slidecontainer .label_l {
	grid-area: label_l;
	justify-self: start;
}

.slidecontainer .value {
	grid-area: value;
	justify-self: center;
}

.slidecontainer .desc {
	grid-area: desc;
	justify-self: center;
}

.input_number {
	display: flex;
	background: #e8ebf4;
	border: 1px solid #D8DCE8;
	border-radius: 30px;
	color: #333333;
	align-content: center;
	justify-content: center;
	justify-items: end;
	text-align: center;
	width: 80px;
}

.input_date {
	width: 180px;
}

.input_number:focus {
	outline: none;
	background: #f0f3fd;
	border: 1px solid #acb6d3;

}

.input_code {
	background: #e8ebf4;
	border: none;
	border-bottom: 1px solid #D8DCE8;
	color: #333333;
	align-content: center;
	justify-content: center;
	justify-items: center;
	text-align: center;
	width: 50px;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}
.input_code:focus {
	outline: none;
	background: #f0f3fd;
	border: 1px solid #acb6d3;

}

.errored {
	border: 1px solid #ED4924 !important;
}

.highlighted {
	border: 1px solid #8a3192 !important;
}

.error_text {
	display: inline;
	color: #ED4924;
	font-weight: 600;
}

.highlighted_text {
	color: #8a3192;
	font-weight: 600;
}

#meds_selector {
	display: grid;
	grid-template-columns: 1fr;
	width: 1200px;
	justify-self: center;
	align-self: center;
	justify-items: center;
	align-content: center;
	padding: 30px;
}

meds_selector .membership_upgrade {
	margin-top: 25px;
}

#meds_selector h1 {
	display: flex;
	justify-self: center;
	justify-items: center;
	word-wrap: break-word;
}

#meds_selector .signup_prompt {
	margin-top: 0px;
	margin-bottom: 20px;
}

#meds_selector > .patient_meds {
	display: grid;
	grid-area: auto;
}

#membership_inactive {
	display: none;
}

#meds_selector > #membership_inactive, #meds_selector > #insufficient_tokens_enhanced {
	grid-area: auto;
}

#meds_selector > .submit_row {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;
	grid-area: auto;
	justify-self: center;
}

#meds_selector .conditions_pane_wrapper, #meds_selector .profile_selector, #meds_selector .submit_row {
	grid-area: auto;
}

.planner_prompt {
	max-width: 800px;
	padding: 20px 0px;
}

#no_meds, #no_meds_custom, #meds_view {
	display: none;
}


.meds {
	cursor: pointer;
}

.meds_selected {
	display: grid;
	grid-template-columns: repeat(3,auto);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	align-items: center;
	align-content: center;
	margin-top: 25px;
	margin-bottom: 20px;
}

.meds_selected h3 {
	justify-self: center;
}


.meds_selected > .login_input {
	display: grid;
	margin: 0px;
}

.discover_button {	
	display: grid;
	background: #132092 url("/static/discovery-icon.svg") 10% center no-repeat;
	background-size: 29px;
	padding-left: 50px;
	color: #FFFFFF;
	font-size: 20px;
	text-transform: uppercase;
	opacity: 1;
    transition: 0.3s;
}

.plan_button {	
	display: grid;
	background: #132092 url("/static/planner-icon.svg") 10% center no-repeat;
	background-size: 29px;
	padding-left: 50px;
	color: #FFFFFF;
	font-size: 20px;
	text-transform: uppercase;
	opacity: 1;
    transition: 0.3s;
}

.discover_button:hover, .plan_button:hover {
	opacity: 0.8;
}

.discover_button:disabled {
	background: #DCDCDC url("/static/discovery-icon.svg") 10% center no-repeat;
	background-size: 29px;
	padding-left: 50px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	color: #666666;
	opacity: 1;
}


.plan_button:disabled {
	background: #DCDCDC url("/static/planner-icon.svg") 10% center no-repeat;
	background-size: 29px;
	padding-left: 50px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	color: #666666;
	opacity: 1;
}

.med_entry {
	display: grid;
	margin: 5px;
	border-radius: 30px;
	padding: 5px 10px;
	border: 1px solid #acd3d2;
	width: fit-content;
	height: fit-content;
	font-size: 16px;
	justify-self: center;
}

.meds_selected .included {
	background-color: #b2cade;
	border: 1px solid #acbfd3;
	opacity: 1;
	cursor: default;
}

.input_number > .values input[type='number'] {
  	text-align: center;
	width: 5.5em;
}

 .desc
{
	font-weight: 500;
	font-size: 22px;
	color: #516FA2;
	width: auto;
	white-space: nowrap;
 }

.input_number > .values {
	font-size: 1.3em;
}
	
.togglecontainer {
	display: grid;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-items: center;
	grid-row-gap: 0px;
}

.optiontoggle  {
	justify-self: center;
	align-self: center;
}

.togglecontainer .label {
	display: grid;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

/* Not Found */
.page > #not_found {
	display: grid;
	grid-template-rows: auto auto;
	width: 100%;
	height: 100%;	
	justify-content: center;
	align-items: start;
	background-color: #e6e6e6;
	color: #474A51;	
	align-items: start;
	padding: 20px 10px;
}

.not_found_message {
	padding: 10px;
	text-align: center;
	font-weight: 400;
	font-size: 2em;
	line-height: 1.6;
	font-family: 'Noto Sans', Lato, Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

.not_found_background {
	background: url("/static/not-found.png") center center no-repeat;
	background-size: contain;
	height: 100%;
	min-height: 100px;
}

/* Unused */
.slider_range {
  grid-area: slider_range;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #add8e6;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-range:hover {
  opacity: 1;
}

.slider_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
}

/* Width = 2xSlider_width + slider_left
   height = Slide_height + 2xslider_bottom */
.switch {
  position: relative;
  display: flex;
  align-self: center;
  justify-self: center;
  width: 40px;
  height: 23px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D8DCE8;
  border: 0px solid #D8DCE8;
  -webkit-transition: .4s;
  transition: .4s;  
}

.slider:focus {
	outline: solid;
}

.gender_switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.gender_selection {
	display: grid;
	grid-template-columns: auto 1fr;
	background-color: #e8ebf4;
	color: black;
	padding: 10px 10px 10px 15px;
	align-items: center;
	justify-items: center;
	column-gap: 10px;
	opacity: 1;	
	border: 1px solid #D8DCE8;
	border-radius: 30px 0px 0px 30px;
}

.gender_selection:hover {
	opacity: 0.8;
	cursor: pointer;
}

.gender_selection:nth-child(even) {
	border-radius: 0px 30px 30px 0px;
	padding-left: 15px;
	padding-right: 10px
}

.gender_selection.male {
	background-color: #bbb9db;
}
	
.gender_selection.female {
	background-color: #f4a3c9;
}
	
.slider.gender {
	background-color: #E54D99;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #5975BB;
}

input:checked + .slider.gender {
  background-color: #5650A5;
}

input:focus + .slider {
	outline: solid;
}

/* translate = switch_width - slider_width - 2xslider_left */
input:checked + .slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.slider.round.disabled {
	background-color: gray;
}

.slider.round.disabled:before {
  border-radius: 50%;
  display: none;
}

input {
  width: 95%;
  padding: 12px;
  border: 1px solid black;
  border-radius: 30px;
  margin: 5px 0;
  opacity: 1;
  font-size: 1em;
  line-height: 1.2em;
  text-decoration: none; /* remove underline from anchors */
}

input::placeholder {
	color: #333333;
}

input:disabled {
	opacity: 0.7;
}

.clickable_button:active {
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

#circular_loader {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(206,206,206,0.6);
	z-index: 10;
}

#loading_container {
	position: absolute;
	display: none;
    width:100%;
    height:100%;
    background-color: rgba(1, 17, 68, 0.7);
	z-index: 11;
	justify-content: center;
	justify-items: center;
}

.loader_dialog {
	display: grid;
	background: none;
	border: none;
	overflow: auto;
	padding: 0px;
	justify-self: center;
}

.loader {
  position: relative;  
  justify-self: center;
  align-self: center;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid  #138d75;
  border-bottom: 16px solid  #138d75;
  width: 140px;
  height: 140px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#prompt {
	display: grid;
	grid-area: main;
	width: 100%;
	grid-template-rows:	0.5fr 0.5fr;
}

#prompt > #promptForm {
	display: grid;
	grid-template-rows: auto auto auto auto auto 1fr auto;
	margin: 10px;
	padding: 10px;
}

.knobs {
	width: 90px;
	margin: 10px;
	height: 25px;
}

#prompt > #response {
	display: grid;
	height: 100;
	margin: 10px;
	padding: 10px;
	background-color: black;
	color: white;
}

#prompt > #promptForm > #user_prompt {
    text-align: left;
    padding-top: 0;
	overflow-wrap: break-word;
}

#prompt > #promptForm > button {
	display: grid;
	background-color: #2e86c1;
	font-size: 1em;
	border-radius: 10px;
	padding: 5px;
	color: white;
	width: 100px;
	justify-self: center;
}

.blobs {
width: 100%;
height: 300px;
}

.blob1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("/static/g2o-blob-02.svg") center top;
	background-size: contain;
	background-repeat: no-repeat;
	transform-origin: center;
	animation: Blob1 24s linear infinite;
	opacity: 0.1;
}

.blob2 {
	position: fixed;
	top: 100px;
	left: 0;
	width:100%;
	height:100%;
	background: url("/static/g2o-blob-01.svg") center top;
	background-size: contain;
	background-repeat: no-repeat;
	transform-origin: center;
	animation: Blob1 15s linear infinite;
	opacity: 0.3;
}

.blob3 {
	position: fixed;
	top: 100px;
	left: 0;
	width:100%;
	height:100%;
	background: url("/static/g2o-blob-03.svg") center top;
	background-size: contain;
	background-repeat: no-repeat;
	transform-origin: center;
	animation: Blob1 5s linear infinite;
	opacity: 0.2;
}

@keyframes Blob1 {
	0% 	{rotate: 0turn;}
	50% 	{rotate: 0.5turn;}
	100%	{rotate: 1turn;}
}

@keyframes Blob2 {
	0% 	{rotate: 0turn;}
	50% 	{rotate: 0.5turn;}
	100%	{rotate: 1turn;}@
}

@keyframes Blob3 {
	0% 	{rotate: 0turn;}
	50% 	{rotate: 0.5turn;}
	100%	{rotate: 1turn;}
}

.grecaptcha-badge { 
	visibility: hidden !important;
}

@media print {
	@page {
		margin: 1cm;
	}
	
	.results_header, .second_opinion, .planner_second_opinion, .drug_usage, .drug_cautions, .synopsis, .drug_datacard, .drug_rank, .drug_pregnancy, .icon {
		page-break-before: auto;
		page-break-inside: avoid !important;
		page-break-after: auto;
		break-before: auto;
		break-inside: avoid;
		break-after: auto;
	}
	
	header, footer, .page, .action_icons, .details_open, .details_close, .drug_brands, .rating_count, .results_menu {
		display: none !important;
	}
	
	
	.results_view .g2o_logo {
		display: grid;
	}
	
	.all_drug_brands {
		font-size: 8px;
	}
	
	.results_container, .planner_results_container {
		position: absolute;
		background: #FFFFFF;
	}
	
	.result_details, .result_details_dual, .all_drug_brands {
		display: grid;
	}
	
	.second_opinion, .planner_second_opinion {
		font-size: 12px;
		padding: 0px;
		margin: 0px;
		height: fit-content;
	}
	
	.results_view, .planner_view {
		border: none;
		align-self: start;	
		background: #FFFFFF;
		width: 720px;
		padding: 0px;
		font-size: 10px;
	}
	
	.drug_panes, .planner_drug_panes {
		width: 100%;
	}
	
	.drug_panes > .drug_pane {
		margin-left: 5px;
		margin-right: 5px;
		padding: 0px;
		width: 100%;
		font-size: 12px;
	}
	
	.planner_drug_panes > .planner_drug_pane {
		margin-left: 5px;
		margin-right: 5px;
		padding: 0px;
		width: 100%;
	}
	
	.planner_pane_dual {
		padding: 0px 5px;
	}
		
	.planner_pane_dual > .score_gauges > .score_gauge {
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}
		
	.results_view .score_bars {
		 font-size: 10px;
	 }
	
	.planner_pane_dual .score_bars {
		font-size: 8pt;
		margin: 0px;
	}
		
	.planner_pane_dual > .score_bars > .score_bar {
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
		padding-bottom: 10px;
	}
	
	.drug_score {
		font-size: 14px;
	}
	
	.patient_conditions ul li {
		font-size: 6pt;
	}
	
	.patient_meds ul li {
		font-size: 6pt;
		padding: 0px 5px;
	}
	
	.icon {
		height: 25px;
	}
	
	.icon_large {
		height: 60px;
		justify-self: center;
	}
}

@media screen and (max-width: 1350px) {
	/* Header */
	h1 {
		line-height: normal;
		font-size: 24px		
	}
	
	h4 {
		padding: 10px;
		margin: 0px;
	}

	header {
		padding-right: 10px;
		padding-left: 10px;
	}
	
	header logo img {
		width: auto;
		height: 25px;
	}
	
	header {
		width: 100%;
		height: 40px;
	}
	
	header a button, .signup_button {
		font-size: 12px;
		padding: 5px 10px;
	}
	
	.page > #home {	
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		justify-content: center;
		align-content: center;
	}
	
	/* Sign-up Start */
	.page > #home .regular {
		padding: 30px 5px;
	}
	
	.page > #home .signup_start {
		display: grid;
		align-self: start;
		background: url("/static/GetASecondOpinion-Cover.webp") center bottom repeat;
		background-size: contain;
		justify-items: center;
		padding-bottom: 0px;
	}
	
	.page_text {
		padding: 10px;
	}
	
	.signup_start .text {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto;
		justify-content: center;
		justify-self: center;
		align-content: center;
		align-self: center;
		padding: 30px;
		font-size: 16px;
		line-height: initial;
		background-color: #f7f7f7;
		height: fit-content;
		width: fit-content;
	}

	.signin_hero_button {
		justify-self: center;
	}	

	.signup_start .signin_button, .signup_flow .next_button, .signup_flow .back_button {
		justify-self: end;
		font-size: 20px;
		text-transform: uppercase;
		margin: 25px 0px 10px 0px;
	}

	.signup_start .image {
		background: #DDEEFF;
		object-fit: cover;
	}
	
	.page_text {
		width: 100%;
	}
	
	.welcome_graphic {
		height: 100px;
		padding-bottom: 20px;
	}
	
	.welcome_title h1 {
		font-size: 30px;
		text-align: center;
		padding: 15px 10px;
	}
	
	.navigate_mobile {
		display: inline;
		max-width: 80%;
	}
	
	.navigate_full {
		display: none;
	}
	
	.discovery_points, .planner_points {
		font-size: 20px;
	}
	
	.discovery_points, .planner_points {
		max-height: unset;
		padding: 50px 20px;
	}
	
	.points_bullets {
		font-size: 18px;
	}
	
	.home_content {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"content_image_1"
			"content_personalized"
			"content_image_2"
			"content_reimagined"
			"content_image_3"
			"content_accessible"
			"content_image_4"
			"content_joinus"
			"content_everybody";
	}
	
	.home_content h1 {
		font-size: 24px;
		line-height: 120%;
		padding-bottom: 10px;
	}
	
	.content_personalized, .content_reimagined, .content_empowered, .content_accessible, .content_joinus {
		font-size: 16px;
		width: 100%;
		min-height: auto;
		justify-self: center;
	}
	
	.content_image_1, .content_image_2, .content_image_3, .content_image_4 {
		height: 200px;
	}
	
	.content_everybody {
		font-size: 28px;
		min-height: auto;
		padding: 30px 30px;
		line-height: 120%;
		text-align: center;		
	}
	

	footer {
		width: 100%;
	}
	
	.footermenu {
		column-gap: 30px;
	}
	
	.footercol {
		width: 100%;		
	}
		
	/* Reports Page */
	.results_view {
		width: unset;
	}
	
	.results_menu {
		padding: 0px 10px;
		height: 40px;
	}
	
	.results_menu .logo {
		width: unset;
		height: 25px;
	}
		
	#reports.reports_view {
		display: grid;
		grid-template-areas:
			"reports_graphic"
			"profile_menu"
			"profile_area";
		align-content: start;
		grid-template-rows: auto auto 1fr;
		padding-top: 0px;
	 }
	 
	 .reports_graphic {
		 display: grid;
		 height: 50px;
	 }
	 
	 .discovery_panels, .planner_panels {
		padding: 0px;
		margin: 0px;
		grid-row-gap: 0px;
	}
	
	.discovery_panels h2, .planner_panels h2 {
		justify-self: center;
		font-size: 20px;
	}
	
	.planner_pane_dual .drug_datacard {
		padding: 5px 10px 5px 5px;
		grid-column-gap: 5px;
	}
	
	.profile_area .discovery_panel {
		width: 100%;
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		border: none;
		grid-column-gap: 0px;
		font-size: 14px;
		height: fit-content;
		justify-items: center;
		justify-content: center;
	}
	
	.profile_area .planner_panel {
		grid-template-columns: auto;
		justify-items: center;
	}
	
	.discovery_panel .element_holder, .planner_panel .element_holder {
		justify-self: center;
		padding: 5px 0px;
	}
	
	.discovery_parameters {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
	}
	
	.results_button {
		font-size: 14px;
		width: fit-content;
	}
	
	.patient_meds ul li, .patient_conditions ul li {
		font-size: 14px;
	}
	
	.profile_area {
		width: 100%;
	}
	
	#profile .profile_area {
		padding: 0px 20px 40px 20px;
	}
		
	.profile_area .conditions_pane_reg {
		padding: 10px 0px;
	}
	 
	/* About Page */
	.page > #about {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"aboutusimg1"
			"aboutuscol"
			"aboutusimg2"
			"aboutusanalyzing"						
			"aboutusjoin";
	}
	
	#about h1 {
		font-size: 30px;
		padding-bottom: 10px;
	}
	
	.aboutuscol, .aboutusanalyzing {
		font-size: 16px;
		width: 100%;
		min-height: auto;
		justify-self: center;
	}
	
	.aboutusjoin {
		font-size: 18px;
		min-height: auto;
		padding: 30px 30px;
	}
	
	.aboutusimg1, .aboutusimg2 {
		height: 200px;
	}
	
	.aboutusimg1 {
		background: url("/static/about-graphic-photo.webp") center no-repeat, linear-gradient(101deg, #2a9bd7, #132092);
		background-size: contain;
	}
	
	.aboutusimg2 {
		background: url("/static/about-graphic-02.webp") center no-repeat, linear-gradient(101deg, #2a9bd7, #ffffff);
		background-size: contain;
	}
	
	/* Mission Page */
	.page > #mission {
		grid-template-columns: 1fr;
		grid-template-areas:
			"hearty-hands"
			"aboutmission"
			"medsgraphic"
			"mission2"
			"beacongraphic"
			"mission3" 
			"missionoutcome"
			"passiongraphic"
			"missionpassion"
			"joinmission"
			"missionseparator";
		
	}
	
	#mission h1, #membership h1 {
		font-size: 30px;
	}
	
	.aboutmission, .missionpassion, .messaging_text {
		font-size: 18px;
		width: 100%;
		min-height: auto;
		justify-self: center;
	}
	
	.missionoutcome, .joinmission {
		font-size: 18px;
		min-height: auto;
		padding: 40px 30px;
	}
	
	.hearty-hands, .medsgraphic, .beacongraphic, .passiongraphic {
		height: 200px;			
	}
	
	.passiongraphic {
		background: transparent url("/static/missionpassion.png") center center no-repeat;
		background-size: contain;
	}
	
	.joinmissionimg {
		min-height: 100%;
	}
	
	.missionseparator {
		min-height: 40px;
	}
	
	/* Coded-in Page */
	.codedin_wrapper {
		grid-template-columns: auto;
		grid-template-areas:
			"codedin_title"
			"codedin_what"
			"codedin_graphic1"
			"codedin_why"
			"codedin_graphic2"
			"codedin_approach"
			"codedin_graphic3"
			"codedin_commitment"
			"codedin_choose";
	}		
		
	.codedin_title h1 {
		font-size: 24px;
		text-align: center;
		padding: 10px 0px;
	}
	
	.codedin_wrapper h2 {
		font-size: 22px;
	}

	.codedin_graphic1, .codedin_graphic2, .codedin_graphic3 {
		height: 300px;
	}
	
	.codedin_what, .codedin_why, .codedin_approach, .codedin_commitment {
		font-size: 18px;
		min-height: 200px;
	}
	
	.codedin_commitment {
		padding: 20px;
	}
	
	.codedin_choose {
		padding: 20px;
		font-size: 28px;
		min-height: 300px;
	}
	
	.codedin_graphic1 {
		background: transparent url("/static/coded-in-graphic-1-mobile.png") center left no-repeat;
		background-size: cover;
	}
	
	/* Membership Page */	
	.membership_graphic_03, .membership_graphic_04, .membership_graphic_05 {
		min-height: unset;
		height: 350px;
	}
	

	/* Accuracy Guaranteed Page */
	.page > #guarantee {
		grid-template-columns: 1fr;
		grid-template-areas:
			"guarantee_graphic_1"		
			"guarantee1"
			"guarantee_graphic_2"
			"guarantee2"
			"guarantee_graphic_3"
			"guarantee3"
			"guarantee_graphic_4" 			
			"guarantee4"
			"guarantee_graphic_5"
			"guarantee5"
			"guarantee6"
			"guarantee7";
		padding: 10px 0px 20px 0px;
	}
	
	
	.guarantee1 h1 {
		padding-top: 0px;
		font-size: 30px;
	}
	

	.guarantee5 .gradient_text {
		font-size: 30px;
		text-align: center;
	}
	
	.guarantee6 {
		min-height: 200px;
		padding: 5% 10% 5% 10%;
	}
	
	.guarantee6 span {
		font-size: 36px;
		text-align: center;
	}
	
	.guarantee7 {
		font-size: 10px;
		padding: 5px;
	}
	
	.guarantee_graphic_1, .guarantee_graphic_2, .guarantee_graphic_3, .guarantee_graphic_4, .guarantee_graphic_5 {
		height: 200px;
	}
	
	/* Sign-up Page */
	
	.signup_flow {
		width: 100%;
		padding: 10px;
	}
	
	.signup_graphic_1, .signup_graphic_2, .signup_graphic_3, .signup_graphic_4 {
		height: 100px;
		width: 100%;
	}
	
	.signup_graphic_final {
		height: 250px;
		width: 100%;
	}
	
	.signup_flow h1 {
		font-size: 20px;
		line-height: 50px;
	}
	
	.signup_flow_prompt {
		padding: 12px 10px;
	}
	
	.desc {
		margin: 0 auto;
		font-size: 18px;
	}
		
	/* Sign-up Step 1 */

	.patient_bio_settings {
		grid-template-rows: repeat(4, auto);
		grid-template-columns: auto;
		margin: 0px 0px 10px 0px;
		grid-row-gap: 15px;
		grid-column-gap: 0px;
	}

	.patient_bio_settings_element {
		display: flex;
		align-items: center;
		grid-column-gap: 0px;
		height: fit-content;
		font-weight: 400;
		justify-self: center;
		grid-column-gap: 5px;
	}
	
	.patient_bio_settings_element > .icon {
		height: 32px;
		justify-self: center;
	}
	
	
	/* Sign-up Step 2 */
	.conditions_pane_reg > .preexisting_row {
		grid-template-columns: auto;
		grid-template-rows: auto;
		margin: 0px;
	}	
	
	.togglecontainer {
		grid-template-rows: auto;
		grid-template-columns: auto auto;
	}
	
	.togglecontainer .label {
		justify-self: start;
	}
	
	.togglecontainer .optiontoggle {
		justify-self: end;
	}

	/* Sign-up Step 3 */
	.conditions_pane_reg .patient_meds {
		grid-template-columns: auto;
		grid-template-areas:
			"med_list"
			"new_med"
			"med_status"
			"add_med";
		padding: 10px;
		margin: 0px;
		grid-row-gap: 10px;
		grid-column-gap: 0px;
	}
	
	.conditions_pane_reg .patient_meds .new_med {
		width: 100%;
		max-width: 366px;
		justify-self: center;
		
	}
	
	.add_med {
		width: fit-content;
		justify-self: center;
	}
	
	.med_status {
		height: fit-content;
		justify-self: center;
	}
	
	.med_list {
		padding-bottom: 20px;
	}
	
	#signup {
		width: 100%;
		grid-template-columns: auto;
		align-items: center;
		align-self: center;
		justify-content: center;
		justify-items: center;
		padding: 10px 10px 30px 10px;
	}
	
	.signup_flow .login_input, #signin .login_input, #password_set .login_input, #password_reset .login_input, #main_reg .login_input, #main_reg .profile_dropdown {
		width: 100%;
		margin: 5px 0px;
		max-width: 366px;
	}
	
	.signup_social {
		width: 100%;
		padding: 0px 20px;
	}
	
	#signup > #invite_code {
		width: auto;
	}
	
	#signup > .error {
		width: 80%;
		max-width: 366px;
		font-size: 16px;
	}
	
	.signup_email {
		padding: 10px 20px;
	}
	
	.social_media {
		width: 100%;
		max-width: 366px;
		margin: 5px;
		padding: 5px 10px;
	}
	
	.signup_flow .or_pane {
		color: black;
		font-size: 20px;
	}
	
	.account_info > .signup_prompt, .signup_email > .signup_prompt {
		font-size: 13px;
		width: auto;
		max-width: 366px;
	}
	
	
	/* Sign-in Page */
	.page > #signin {
		width: 100%;
		max-width: 500px;
	}
	
	#signin .signup_social {
		padding: 0px;
	}
	
	#signin .login_prompt {
		font-size: 12px;
		margin-top: 10px;
	}
	
	#signin .error {
		font-size: 14px;
	}
	
	.conditions_pane_reg .patient_meds .med_status {
		font-size: 14px;
	}
	
	.page > #password_reset, .page > #password_set {
		width: 100%;
		max-width: 500px;
		margin: 0px;		
	}
	
	.email_input {
		padding: 0px 20px;
	}
	
	/* FAQ */
	
	.faq_title {
		grid-template-columns: auto;
		grid-template-areas:
			"faq_heading"
			"faq_graphic";
		min-height: auto;
	}
	
	.faq_title h1 {
		font-size: 30px;
		line-height: normal;
		padding: 15px;
	}
	
	.faq_graphic {
		height: 100px;
		background: url("/static/faq-graphic.png")left center no-repeat, linear-gradient(101deg, #2a9bd7, #132092);
		background-size: contain;
	}
	
	.faq_section {
		width: 100%;
		padding: 15px 30px;
	}
	
	.signin_button {
		margin: 5px 0px;
	}		
	
	/* Header */
	
	header .tokens .icon {
		height: 20px;
	}
	
	header .tokens .element_holder {
		grid-column-gap: 5px;
	}
	
	header nav {
		display: none;
	}
	
	.menu_icon {
		display: grid;
		height: 18px;
		width: 35px;
	}
		
	ul.nav_mobile {
		position: fixed;
		display: none;
		width: 100%;
		z-index: 10;
		grid-template-columns: auto;
		justify-items: center;
		list-style-type: none;
		margin: 33px 0 0 0;
		padding: 20px 20px;
		font-size: 12px;
		grid-row-gap: 15px;
		background: #ffffff;
		border-top: 1px solid #ffffff;
		border-right: 1px solid #f3f3f3;
		border-bottom: 1px solid #f3f3f3;
		border-left: 1px solid #f3f3f3;
		border-radius: 0px 0px 6px 6px;
	}
	
	.nav_mobile button {
		width: 100%;
		margin: 0px;
	}
	
	.nav_mobile li {
		justify-items: center;
		width: 100%;		
		margin: 0px;
		border-bottom: 1px solid #f4f4f4;
		padding-bottom: 5px;
	}
	
	.nav_mobile li:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.nav_mobile a {
		opacity: 0.6;
		transition: 0.3s;
	    text-transform: uppercase;
		justify-self: center;
	}
	
	.nav_mobile a.menu_button {
		opacity: 1;
	}
	
	.nav_mobile a button:active {
		opacity:1;
	}
	
	.nav_mobile a {
		display: flex;
		justify-content: center;
		color: #000000;
	}
	
	.nav_mobile a.active, .nav_mobile a:hover {
		opacity: 1;
	}  
	
	header .buttons.signed_in {
		display: none;
	}
	
	/* Discovery Page */
	
	 #main_reg {
		width: 100%;
		grid-template-columns: auto;
		grid-template-areas:
			"title_row"
			"inactive_error"
			"medicine_row"
			"condition_row"
			"aux_row"
			"conditions_pane"
			"submit_row"
			"need_help";
		margin: 0px;
	}
	
	.profile_changes {
		grid-template-columns: auto;
		grid-template-rows: unset;
		grid-row-gap: 10px;
		height: auto;
	}
	
	#lookup_profiles .profile_changes {
		padding-bottom: 20px;
	}
	
	#main_reg > .medicine_row, #main_reg > .condition_row {
		justify-self: center;
	}
	
	.need_help {
		padding-bottom: 30px;
	}
	
	.profile_area .need_help {
		padding-bottom: 10px;
		padding-top: 5px;
		padding-right: 5px;
		justify-self: center;
	}

	.submit_row {
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		justify-self: center;
	}
		
	#main_reg h1 {
		text-align: center;
		padding-top: 30px;
	}
	
	.profile_selector {
		justify-self: center !important;
	}
	
	.submit_row {
		padding-bottom: 10px;
	}
	
	.conditions_pane_reg {
		grid-row-gap: 10px;
		width: 100%
		justify-self: center;
	}
	
	.conditions_pane_reg .patient_meds .med_status {
		justify-self: center;
	}
	
	.add_med {
		margin-right: 0px;
		font-size: 14px;
	}
	
	/* Discovery Guide */	
	.guide_mobile {
		display: inline;
	}
	
	.list_item {
		display: list-item;
	}
	
	.guide_desktop {
		display: none;
	}
	
	#discovery_guide, #planner_guide {
		width: 80%;
		max-width: unset;
		padding: 0px 20px;
	}
	
	.discovery_graphic {
		display: grid;
        height: 50px;
	}
	
	.profiles_graphic {
		display: grid;
        height: 50px;
	}
	
	.planner_graphic {
		display: grid;
        height: 50px;
	}
	
	.guide_overview h1 {
		font-size: 24px;
		text-align: center;
	}
	
	.guide_quick {
		padding: 10px;
		font-size: 16px;
	}
	
	.guide_quick ul {
		padding: 0px 20px 0px 30px;
	}
	
	.guide_quick h2 {
		font-size: 20px;
	}
	
	.guide_steps h2 {
		line-height: 120%;
		text-align: center;
		padding: 5px 0px;
		font-size: 20px;
	}
	
	.tip {
		padding-top: 0px;
	}
	
	.tip_content {
		padding-left: 0px;
		padding-right: 20px;
	}
	
	.tip_title {
		padding-left: 0px;
		padding-bottom: 10px;
	}
	
	.tip .caution {
		margin-left: 10px;
	}

	.tip .caution_title {
	padding-left: 0px;
	}
	
	/* Planner */
	
	#meds_selector {
		grid-template-columns: 1fr;
		width: 100%;
		justify-self: center;
		align-self: center;
		justify-items: center;
		align-content: center;
		padding: 30px;
		padding-bottom: 60px;
	}
	
	#meds_selector h1 {
		text-align: center;
		padding: 30px 0px;
	}
	
	#meds_selector .login_input {
		width: 100%;
		font-size: 14px;
	}
	
	#meds_selector .med_entry {
		word-wrap: anywhere;
		font-size: 14px;
		margin: 0px;
	}
	
	#meds_selector h4 {
		text-align: center;
		font-size: 14px;
	}
	
	#meds_selector .error {
		font-size: 14px;
		padding: 10px 0px;
		height: fit-content;
		margin: 0px;
	}
	
	#main_reg .error_text, #meds_selector .error_text {
		font-size: 14px;
	}
	
	.lookup_presets .error_text, .lookup_profile_selector .error_text {
		height: 60px;
	}
	
	.planner_container .need_help {
		grid-area: auto;
	}
	
	/* Profile */
	#profile, #reports {	
		grid-area: main;
		display: grid;
		grid-template-areas:
			"profile_menu"
			"profile_area";
		grid-template-rows: auto 1fr;
		grid-template-columns: auto;
		margin: 30px 0;
		width: 100%;
		grid-row-gap: 0px;
		margin: 0px;
		padding: 0px;
	}
	
	.lookup_profile_selector {
		grid-template-columns: 1fr;
		grid-row-gap: 10px;
		padding: 10px 10px 0px 10px;
		margin-bottom: 0px;
	}
	
	.lookup_profile_selector .error_text {
		height: 0px;
	}
	
	#lookup_profile_error {
		height: auto;
		font-size: 14px;
		text-align: center;
	}
	
	.profile_changes .profile_changes_buttons {
		grid-template-columns: 1fr 1fr min-content;
	}
	
	.lookup_profile_selector .profile_changes {
		justify-self: center;
		width: min-content;
	}
	
	.profile_add {
		width: 100%;
		grid-template-columns: auto auto;
		grid-row-gap: 10px;
	}
	
	.profile_add .secondary_button {
		justify-self: center;
	}
	
	.profile_changes .login_input {
		width: 100%;
	}
	
	.profile_add #new_profile {
		grid-column: span 2;
	}
	
	.lookup_profile_selector .unsaved_changes {
		justify-self: center;
		margin-top: 10px;
		font-size: 12px;
	}
	
	.profile_menu {
		justify-self: start;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: unset;
		grid-area: profile_menu;
		justify-self: center;
		justify-items: center;
		list-style-type: none;
		height: fit-content;
		width: 100%;
		position: unset;
		top: unset;
	}

	.profile_menu.inactive_member, .profile_menu.no_profile {
		grid-template-columns: repeat(3,1fr);
	}

	.profile_menu.inactive_member.no_profile {
		grid-template-columns: repeat(2,1fr);
	}
	
	.profile_menu.reports_menu {
		grid-template-columns: repeat(2,1fr);
	}
	
	.profile_menu button {
		font-size: 12px;
		width: 100%;
	}
	
	.profile_area {
		margin: 0px;
		padding: 0px;
	}
	
	.profile_buttons {
		grid-template-columns: auto auto;
		grid-template-areas:
			"status_message status_message"
			"reset_button save_button";
		justify-content: center;
		margin: 0px;
	}
	
	.profile_buttons button {
		font-size: 14px;
	}
	
	.profile_buttons .status_message {
		grid-area: status_message;
		height: fit-content;
		font-size: 14px;
		justify-self: center;
		padding: 15px 5px;
	}
	
	.profile_buttons .reset_button {
		grid-area: reset_button;
	}
	
	.profile_buttons .save_button {
		grid-area: save_button;
	}
	
	.account_settings {
		grid-template-columns: auto;
		grid-template-rows: auto;
		margin: 0px;
		padding: 10px 0px;
		justify-self: center;
	}
	
	.account_info {
		margin: 0px;
		width: 100%;
		justify-self: center;
	}
	
	.double_wide {
		grid-column: unset !important;
	}
	
	.settings_line {
		grid-template-columns: auto;
	}
	
	.account_settings .settings_line .login_input {
		width: 100%;
		max-width: 366px;
	}
	
	.account_settings .settings_line .label {
		font-size: 12px;
		justify-self: center;
	}
	
	.settings_control_area {
		justify-items: center;
		align-items: center;.account
	}
	
	.settings_status_message {
		padding: 10px 5px;
		font-size: 14px;
		align-self: center;
		justify-self: center;
		height: fit-content;
		text-align: center;
	}
	
	.profile_buttons {
		padding: 0px;
		align-self: center;
	}
	
	.account_membership {
		grid-template-columns: auto;
		margin: 0px;
		padding: 10px 0px;
		width: 100%;
		grid-row-gap: 20px;
	}
	
	#account_membership .account_info {
		width: 100%;
		max-width: 450px;
	}
	
	#account_membership .settings_line {
		grid-template-columns: 80px 1fr;
	}
	
	#account_membership .settings_line  .label{
		font-size: 12px;
	}
	
	.subscription_button, .checkout_button {
		font-size: 18px;
	}
	
	#checkout_screen {
		width: 100%;
	}
	
	#checkout_screen .cancel_button {
		width: fit-content;
		justify-self: center;
	}
	
	.feedback {
		padding: 20px;
		margin: 10px 0px;
	}
	
	.feedback.account_info {
		height: auto;
	}
	
	.feedback .status_message {
		font-size: 15px;
		height: fit-content;
		padding: 10px 5px;
		align-content: center;
	}
	
	.results_view, #planner_view {
		width: 100%;
		min-width: unset;
		max-width: unset;
	}
	
	.dispute_form .signup_flow_prompt {
		font-size: 12px;
	}
	
	.dispute_form .error {
		font-size: 14px;
	}
		
	.results_menu .dispute_button {
		padding: 5px;
	}
		
	.loading_screen {
		padding: 20px 10px;
		max-width: 400px;
	}
	
	.loading_screen .prompt {
		font-size: 12px;
	}
	
	.loading_screen .notify_button {
		font-size: 14px;
	}
	
	.board {
		grid-template-rows: repeat(4, 70px);
		grid-template-columns: repeat(4, 70px);
	
	}
			
	#intro_detail .features_content {
		grid-template-columns: 1fr;
		padding: 0px 30px;
	}
	
	.feature_image, #tool_overview .feature_image, #testimonials .feature_image {
		width: unset;
		max-width: 100%;
		max-height: 800px;
		margin-bottom: 20px;
		width: unset !important;
		min-width: unset !important;
	}
	
	.feature_image img {
		width: unset;
		max-height: 800px;
		max-width: 100%;
	}
	
	.feature_content {
		font-size: 18px;
		width: 100%;
		min-height: auto;
		justify-self: center;
		padding: 30px;
	}
	
	.emphasized_text {
		max-width: 875px;
		font-size: 16px;
	}
	
	.intro_block {
		max-width: auto;
	}
	
	#intro_detail .feature_content h1, h4 {
		font-size: 24px;
		line-height: 120%;
		padding-bottom: 10px;
		justify-self: center;
		text-align: center;
	}
	
	.guarantee_detail_end {
		justify-self: center;
	}
	
	#tool_overview .feature_content_wrapper, #membership .feature_content_wrapper {
		grid-template-columns: auto;
		padding: 10px 30px;
		grid-row-gap: 15px;
	}
	
	#testimonials .feature_content_wrapper {
		grid-template-columns: auto;
		padding: 30px 30px;
	}
	
	.planner_prompt {
		padding-bottom: 40px;
	}
	
	.overview_image_2, .overview_image_3, .overview_image_4, .overview_image_5 {
		min-height: unset;
		height: 200px;
	}
	
	.feature_content_wrapper .get_started_button {
		margin-top: 20px;
	}
	
	.landing_stories_content {
		overflow: scroll;
		max-width: 100vw;
	}
	
	.carousel_arrow {
		display: none;
	}

	.guarantee_graphic_5 {
		margin-bottom: 0px;
	}
	
	#meds_selector .membership_upgrade {
		margin-top: 50px;
	}
	
}

@media screen and (max-width: 1150px) {
	.planner_pane_dual .drug_datacard {
		grid-template-columns: repeat(2,1fr);
		grid-row-gap: 10px;
	}
	
	.planner_pane_dual .drug_datacard .drug_score {
		font-size: 18px;
	}
	
	.points_bullets {
		width: 80%;
		padding-left: 0px;
	}
	
	.member_welcome {
		grid-template-areas:
			"welcome_title"
			"membership_upgrade"
			"discovery_video_area"
			"discovery_points"
			"planner_video_area"
			"planner_points"
			"welcome_graphic";
		grid-template-columns: 1fr;	
		grid-template-rows: auto auto auto auto auto auto;
	}
	
	.discovery_points {
		background: #2a9bd7 url("/static/welcome-graphic-2m.png") bottom right no-repeat;
		background-size: 13%;
	}
	
	.video_discovery_guide, .video_planner_guide {
		max-width: unset;
		width: 80%;
		max-height: unset;
		justify-self: center;
	}
	
	.intro_block {
		grid-template-rows: repeat(4,auto);
		height: auto;
		min-height: unset;
	}
	
	.intro_block .feature_text {
		padding: 20px 20px;
	}
	
	.signup_block .case_study {
		justify-items: center;
		padding: 0px;
	}
	
	.signup_block .case_study img {
		width: auto;
		border-radius: unset;
	}
	
	.emphasized_text {
		max-width: 775px;
	}
	
	.landing_signup_image {
		height: 400px;
	}
	
	.landing_signup h1 {
		font-size: 38px;
	}
	
	#meds_selector .membership_upgrade {
		max-width: 75%;
	}
	
}

@media screen and (max-width: 960px) {
	#checkout_wrapper.profile_area {
		width: 100%;
	}
	
	.intro_wrapper {
		width: 100%;
	}
	
	.drug_pane {
		grid-template-areas:
			"drug_rank drug_names drug_names drug_names drug_names"
			"drug_rank drug_brands drug_brands drug_brands drug_brands"
			"drug_rank all_drug_brands all_drug_brands all_drug_brands all_drug_brands"
			"score_gauges score_gauges drug_interactions medicare_part_d user_ratings"
			"details_open details_open details_open details_open details_open"
			"result_details result_details result_details result_details result_details"
			"details_close details_close details_close details_close details_close";
	}	
	
	.drug_score {
		font-size: 18px;
	}

	.planner_pane_dual {
		grid-template-columns: 1fr 1fr 100px 1fr 1fr;
		grid-template-areas:
			". . outcome_icon . ."
			"drug_names_1 drug_names_1 drug_arrow drug_names_2 drug_names_2"
			"drug_brands_1 drug_brands_1 . drug_brands_2 drug_brands_2"
			"all_drug_brands_1 all_drug_brands_1 . all_drug_brands_2 all_drug_brands_2"
			"second_opinion second_opinion second_opinion second_opinion second_opinion"
			"score_gauges_1 score_gauges_1 . score_gauges_2 score_gauges_2"
			"drug_interactions_1 medicare_part_d_1 . drug_interactions_2 medicare_part_d_2"
			"details_open details_open details_open details_open details_open"
			"result_details result_details result_details result_details result_details"
			"details_close details_close details_close details_close details_close";
	}
	
	.results_view .planner_pane_dual .drug_interactions {
		justify-self: center;
	}
	
	.planner_pane_dual .score_gauges, .planner_pane_dual .score_bars  {
		padding: 10px 0px;
	}
	
	.planner_pane_dual .score_gauges .score_gauge, .planner_pane_dual .score_gauges .score_bar {
		align-self: end;
	}
	
	.planner_pane_dual .score_gauges .value, .planner_pane_dual .score_bars .value {
		width: 33px;	
		font-size: 10px;
		line-height: 120%;
	}
	.not_found_message {
		font-size: 20px;
	}
	
	.intro_block h1, .background_block h1 {
		font-size: 34px;
	}
	
	.signup_block h1 {
		font-size: 30px;
	}
	
	.features_block {
		padding: 30px 20px;
		height: auto;
	}
	
	.feature_text {
		font-size: 18px;
	}
	
	.scroll_down {
		display: none;
	}
	
	#tool_overview .signup_block {
		height: unset;
	}
	
	.feature_row > *:first-child, .feature_column_header {
		font-size: 18px;	
	}
	
	.emphasized_text {
		max-width: 750px;
	}
	
	.landing_feature_header, .landing_faq_header {
		padding: 10px;
	}
	
	.landing_benefits_wrapper .benefits_block h3 {
		font-size: 32px;
	}
	
	.landing_benefits_wrapper .stat_text {
		font-size: 24px;
	}
	
	.landing_signup_image {
		height: 350px;
	}
	
	.landing_signup {
		min-width: 300px;
	}
	
	.landing_signup h1 {
		font-size: 34px;
	}
	
	.medicare_part_d {
		height: 60px;
	}
	
	.drug_datacard {
		padding: 10px 5px 10px 0px;
	}
	
	.welcome_title h1 {
		font-size: 24px;
		text-align: center;
		padding: 15px 10px;
	}
	
}

@media screen and (max-width: 800px) {
	.video_intro {
		height: auto !important;
		width: 100%;
	}
	
	/* Reports */
	
	.results_view {
		width: 100%;
		min-width: unset;
		max-width: unset;
		padding: 50px 0px 0px 0px;
	}
	
	.planner_view .second_opinion, .results_view .second_opinion {
		grid-template-columns: min-content 1fr;
		font-size: 12px;
		padding: 0px 10px;
	}
	
	.results_view .second_opinion_logo {
		padding: 0px;
	}
	
	.results_view .icon_hero {
		width: 29px;
		align-self: center;
	}
	
	.action_icons {
		display: flex;
		justify-self: end;
		margin: 0px;
		padding-right: 10px;
	}
	
	.results_header {
		grid-template-columns: auto;
		grid-template-areas:
			"report_data"
			"discovery_info"
			"patient_info"
			"disclaimer"
			"second_opinion";
		margin: 0px;
	}
	
	.report_data .report_name {
		font-size: 20px;
	}
	
	.report_data .report_generated_date {
		font-size: 14px;
	}
	
	.planner_header .disclaimer, .results_header .disclaimer {
		margin: 0px;
		padding: 5px 10px;
	}
	
	.discovery_info {
		margin: 0px;
		padding: 0px 10px 10px 10px;
		border-right: none;
		border-bottom: 2px solid #8F8DA6;
		text-align: center;
	}
	
	.patient_info {
		padding: 0px 10px;
		grid-column-gap: 20px;
		grid-row-gap: 10px;
		justify-self: center;
		width: fit-content;
	}
	
	.patient_info .value {
		font-size: 11px;
	}
	
	.patient_info > .patient_icon {
		margin: 0px;
		padding-left: 10px;
	}
	
	.patient_icon .icon_large {
		height: 50px;
	}
	
	.patient_conditions ul li, .results_view .included, .results_view .excluded {
		font-size: 11px;
		padding: 0px 5px;
	}
	
	.drug_pane {
		grid-template-columns: 60px auto auto auto;
		grid-template-areas:
			"drug_rank drug_names drug_names drug_names"
			"drug_rank drug_brands drug_brands drug_brands"
			"drug_rank all_drug_brands all_drug_brands all_drug_brands"
			"score_gauges score_gauges score_gauges score_gauges"			
			". drug_interactions medicare_part_d user_ratings"
			"details_open details_open details_open details_open"
			"result_details result_details result_details result_details"
			"details_close details_close details_close details_close";
	}
	
	.medicare_part_d, #planner_drug_panes .medicare_part_d {
		height: 42px;
	}
		
	.drug_names {
		padding: 10px;
		margin: 0px;
	}
	
	.drug_name {
		word-break: break-word;
		padding: 0px;
	}
	
	.result_details {
		grid-template-columns: auto;
		grid-template-areas:
			"minor_interactions"
			"major_interactions"
			"precondition_details"
			"second_opinion"
			"drug_ingredients"
			"drug_usage"
			"drug_pregnancy"
			"drug_cautions";
		padding: 0px 10px;
		margin: 0px;
		grid-row-gap: 10px;
	}
	
	.all_drug_brands, .drug_brands {
		font-size: 10px;
		margin: 0px;
		padding: 0px 10px;
	}
	
	.score_gauges {
		justify-self: center;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 10px;
		margin: 0px;
		padding: 15px 0px;
	}
	
	.score_gauge, .score_bar {
		margin: 0px;
	}
	
	.score_gauge .score {
		font-size: 18px;
	}
	
	.score_bars {
		justify-self: center;
		grid-column-gap: 10px;
		margin: 0px;
		padding: 15px 0px;
	}
		
	.planner_pane_dual .score_bars {
		font-size: 10px;
		width: max-content;
	}
	
	.planner_pane_dual .score_bars .icon {
		width: 45px;
	}
	
	.user_ratings {
		padding: 0px;
		align-self: center;
		justify-self: center;
	}
	
	.drug_interactions {
		margin: 0px;
		align-self: center;
		justify-self: center;
	}
	
	.interaction_summary {
		font-size: 12px;		
	}
	
	.drug_ingredients, .drug_usage, .drug_cautions, .drug_pregnancy {
		font-size: 11px;
	}
	
	.drug_ingredients .icon, .drug_usage .icon, .drug_cautions .icon, .drug_pregnancy .icon  {
		height: auto;
		width: 29px;
	}
	
	.details_close, .details_open {
		margin: 15px 0px 0px 0px;
	}
	
	.planner_pane_dual .score_gauges {
		grid-column-gap: 5px;
		font-size: 10px;
		width: max-content;
	}
	
	.planner_pane_dual .score_gauges .icon {
		height: 25px;
	}
	
	.drug_interactions {
		padding-right: 10px;
	}			
	
	#discovery_guide, #planner_guide {
		width: 100%;
	}
	
	.pricing_grid {
		font-size: 12px;
		height: auto;
		border-radius: 10px;		
	}
	
	.pricing_grid .element_holder {
		padding: 5px;
		grid-column-gap: 5px;
	}
	
	.pricing_grid .element_holder .icon {
		height: 25px;
	}
	
	.price, .discovery, .planner, .membership, .membership-price {
		padding: 5px;
		text-align: center;
		line-height: normal;
	}
	
	.membership_graphic_03, .membership_graphic_04, .membership_graphic_05 {
		min-height: unset;
		height: 200px;
	}
	
	.messaging_text  {
		font-size: 16px;
		padding: 30px 15px;
	}
	
	.feature_content {
		font-size: 16px;
	}
	
	.navigate_mobile {
		max-width: 90%;
	}
	
	.discovery_points, .planner_points {
		padding: 30px 20px;
		font-size: 18px;
	}
	
	.signup_block {
		padding-top: 10px;
	}
	
	.signup_block h1, .intro_block h1, .background_block h1 {
		padding: 10px 10px 0px 10px;
		font-size: 30px;
		text-align: center;
	}
	
	.background_block h1 {
		padding: 30px;
	}
	
	#tool_overview h2 {
		font-size: 26px;
	}
	
	.quote_element {
		height: 150px;
	}
	
	#intro_brief h3, #intro_detail h3, h4{
		font-size: 26px !important;
		text-align: center;
	}
	
	#tool_overview h3, #membership h3 {
		font-size: 24px;
	}
		
	.quote_element {
		width: 100%;
		height: 100px;
		text-align: center;
	}
	
	.backed_by img {
		width: 200px;
	}
	
	.features_block {
		height: auto;
	}
	
	.features {
		grid-template-columns: 1fr;
		grid-row-gap: 30px;
	}
	
	.feature {
		grid-template-rows: 100px 40px 1fr;
		text-align: center;
	}
	
	.feature_text {
		font-size: 16px;
	}
	
	.benefits_block {
		height: auto;
		padding: 20px 0px;
	}
	
	.benefits_block h3, .benefits_block .stats_block {
		padding: 0px 20px 20px 20px !important;
	}
		
	.stats_block {
		grid-template-columns: 1fr;
		grid-row-gap: 40px;
	}
	
	.landing_mobile {
		display: grid;
	}
	
	.landing_desktop {
		display: none;
	}
	
	.stat {
		max-width: unset;
	}
	
	.benefits_block .guarantee_detail {
		padding: 0px 40px;
		text-align: center;
		line-height: 150%;
		font-size: 8px;
	}
	
	.bottom_button_block {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-row-gap: 5px;
	}
	
	#tool_overview .video_intro {
		max-height: 65vh;
	}
	
	.video_container {
		width: fit-content;
	}
	
	.video_container .feature_text {
		padding: 20px;
	}
	
	.feature_column_header, .feature_row {
		grid-template-columns: 3fr repeat(3,1fr);
	}
	
	.feature_row > *:first-child, .feature_column_header {
		font-size: 15px;
	}
	
	.logo_inline {
		max-width: 60px;
	}
	
	.vertical_element {
		grid-template-rows: 65px auto;
		line-height: 140%;
	}
	
	.guarantee6 {
		line-height: 80%;
	}
	
	.signup_block h1, .intro_block h1, .background_block h1 {
		font-size: 28px;
	}
	
	.emphasized_text {
		max-width: 575px;
	}
	
	.landing_feature_header {
		padding: 10px;
		font-size: 20px;
	}
	
	.landing_benefits_wrapper .benefits_block h3 {
		font-size: 26px;
	}
	
	.landing_feature_title {
		font-size: 22px;
	}
	
	.landing_faq_title {
		font-size: 20px;
	}
	
	.feature_expanded > span, .faq_entry_expanded > span {
		font-size: 18px;
	}
	
	.landing_signup {
		width: 100%;
		max-width: unset;
		justify-items: center;
		padding: 10px 10px 0px 10px;
	}
	
	.landing_signup h1 {
		font-size: 30px;
		justify-self: center;
	}
	
	 .landing_signup_image {
		 height: auto;
		 width: 100%;
	 }
	
	.landing_faq_wrapper h2 {
		font-size: 24px;
	}
	
	.landing_intro {
		max-width: 100%;
		grid-template-columns: auto;
		padding: 0px 0px 20px 0px;
	}
			
	.not_phone_screen {
		display: none !important;
	}	
	
	.phone_screen {
		display: grid;
	}
	
	#testimonials .feature_content h3 {
		font-size: 24px;
		padding-bottom: 0px;
	}
	
	.landing_story_quote {
		text-align: start;
	}
	
	#testimonials .background_block {
		padding-bottom: 0px;
	}
	
	.shared_report_view {
		width: unset;
	}
	
	.share_link {
		grid-auto-flow: row;
		grid-row-gap: 20px;
	}
	
	#meds_selector .membership_upgrade {
		max-width: 85%;
	}
	
}

@media screen and (max-width: 550px) {
	.drug_name {
		font-size: 18px;
	}	
	
	.drug_datacard {
		grid-column-gap: 10px;
		padding: 10px 5px;
	}
	
	.drug_datacard .element_holder {
		grid-column-gap: 5px;
	}
	
	.drug_datacard .value {
		font-size: 10px;
	}
	
	.planner_pane_dual .score_bars .icon {
		width: 33px;		
	}
			
	.planner_pane_dual .drug_datacard  {
		grid-template-columns: repeat(2,1fr);
		grid-row-gap: 10px;
		grid-column-gap: 3px;
		padding: 10px 5px;
	}
	
	.planner_pane_dual .drug_datacard .value {
		font-size: 8px;
	}
	
	.planner_pane_dual .drug_datacard_1 {
		padding-right: 0px;
	}
	
	.planner_pane_dual .drug_datacard_2 {
		padding-left: 0px;
	}
	
	.planner_panes .score_gauges, .planner_panes .score_bars  {
		grid-column-gap: 5px;
	}
	
	.drug_score {
		font-size: 14px !important;
	}
	
	.drug_rank > .icon {
		height: 50px !important;
	}
	
	.drug_rank > .value {
		font-size: 18px;
		padding-top: 4px;
	}
	
	.efficacy_ratio, .efficacy_ratio {
		font-size: 8px;
	}
	
	 .icon {
		height: 20px !important;
	}
	
	.planner_pane_dual .drug_datacard .element_holder {
		grid-column-gap: 3px;
	}
	
	.effects_element .icon {
		height: 29px !important;
	}
	
	.drug_pane {
		grid-template-columns: 40px auto auto auto;
		grid-template-areas:
			"drug_rank drug_names drug_names drug_names"
			"drug_rank drug_brands drug_brands drug_brands"
			"drug_rank all_drug_brands all_drug_brands all_drug_brands"
			"score_gauges score_gauges score_gauges score_gauges"			
			"drug_interactions drug_interactions medicare_part_d user_ratings"
			"details_open details_open details_open details_open"
			"result_details result_details result_details result_details"
			"details_close details_close details_close details_close";
	}
	
	.planner_pane_single {
		grid-template-columns: auto auto;
		grid-template-areas:
			"outcome_icon outcome_icon"
			"drug_names_1 drug_names_1" 
			"drug_brands_1 drug_brands_1"
			"all_drug_brands_1 all_drug_brands_1"
			"second_opinion second_opinion"
			"score_gauges_1 score_gauges_1"
			"drug_interactions_1 medicare_part_d_1"
			"details_open details_open"
			"result_details result_details"
			"details_close details_close";	
	}
	
	.navigate_mobile {
		max-width: 100%;
	}
	
	.footermenu {
		padding-top: 20px;
		grid-column-gap: 20px;
	}
	
	.footermenu a {
		font-size: 12px;
	}
	
	.footermenu h2 {
		font-size: 14px;
	}
	
	#discovery_guide, #planner_guide, #profiles_guide {
		width: 90%;
	}
	
	.video_discovery_guide, .video_planner_guide {
		width: 100%;
	}
	
	/* Response and OTP */
	.response_message {
		width: 90%;
		max-width: 400px;
		padding: 10px;
	}
	
	.response_message .logo {
		width: 40px;
	}
	
	.response_message .title {
		font-size: 16px;
	}
	
	.otp .input_code {
		width: 40px;
	}		
	
	.med_status {
		height: fit-content;
		justify-self: center;
	}
	
	.subscription_button, .checkout_button {
		font-size: 16px;
	}
	
	.loader_bar {
		width: 320px;
	}
	
	.dispute_form {
		padding: 10px;
	}
		
	.signup_block h3 {
		padding: 10px !important;
	}
	
	.signin_hero_button, .ghost_button {
		font-size: 18px;
	}
	
	.price_element {
		padding: 10px 10px;
	}
	
	.backed_by {
		padding-top: 10px;
	}	
	
	.backed_by h2 {
		padding-bottom: 15px;
	}
	
	.signup_block {
		grid-row-gap: 5px;
		padding-top: 5px;
	}
	
	.intro_block h5 {
		font-size: 18px !important;
	}
	
	#tool_overview h3, #membership h3 {
		font-size: 18px !important;
	}
	
	.quote_element {
		font-size: 16px;
	}
	
	.backed_by img {
		width: 150px;
	}
	
	#intro_detail .final_block h3 {
		padding-top: 10px;
		font-size: 18px !important;
	}
	
	#intro_brief h3, #intro_detail h5 {
		font-size: 14px !important;
	}
	
	.features_block {
		padding-top: 0px;
		width: 90%;
	}
	
	.features_block.tool_overview_4 {
		padding: 30px 0px 0px 0px;
		width: 100%;
	}
	
	.features_block.tool_overview_4 .feature_content {
		padding: 20px 30px;
	}
	
	.features_block.highlight_block {
		width: 100% !important;
	}
	
	.features_block.tool_overview_2, .features_block.tool_overview_3 {
		width: 100%;
	}
	
	.features_block.highlight_block {
		padding-top: 30px;
	}
	
	.features {
		padding-right: 0px;
		padding-left: 0px;
	}
	
	.feature {
		padding-top: 20px;
		padding-bottom: 20px;
		grid-template-rows: 60px 40px 1fr;
	}
	
	.feature_icon {
		height: 60px;
	}		
	
	#intro_brief .benefits_block h3, #intro_detail .benefits_block h3 {
		font-size: 20px !important;
	}
	
	.footercol3 {
		width: 50px;
		align-self: center;
	}
	
	.feature_content {
		padding: 20px 0px;
	}
	
	.feature_column_header, .feature_row {
		grid-template-columns: 1.5fr repeat(3,1fr);
		grid-column-gap: 2px;
		padding: 1px 0px;
	}
	
	.feature_comparison {
		grid-template-rows: auto repeat(8,1fr);
		height: fit-content;
		padding-top: 0px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.feature_row > *:first-child, .feature_column_header {
		font-size: 12px;	
	}
	
	#tool_overview h2 {
		font-size: 19px;
	}
	
	.step_image {
		width: 100%;
	}
	
	#intro_detail .features_content {
		padding: 0px;
	}
	
	.signup_block h1, .intro_block h1, .background_block h1 {
		font-size: 20px;
	}
	
	.feature_content_wrapper .ghost_button {
		font-size: 16px;
	}
	
	#signup > .tos {
		font-size: 14px;
	}
	
	.landing_signup h1 {
		font-size: 28px;
		text-align: center;
	}
	
	.final_block {
		grid-row-gap: 10px;
	}
	
	.landing_page .benefits_block, #testimonials .benefits_block {
		padding: 20px 10px;
	}
	
	#testimonials .background_block {
	background-size: 100%;
	padding-top: 20px;
	padding-bottom: 10px;
}
	
	.landing_page .stats_block h3 {
		padding: 0px !important;
	}
	
	.landing_page .stat_percent {
		font-size: 40px;
	}
	
	.landing_page .stats_block {
		padding-left: 0px !important;
		padding-right: 0px !important;	
	}
	
	.landing_story_testimonials {
		font-size: 12px;
	}
	
	.landing_feature_title {
		font-size: 20px;
	}
	
	.landing_faq_title {
		font-size: 18px;
	}
	
	.feature_expanded > span, .faq_entry_expanded > span {
		font-size: 16px;
	}
	
	 .landing_story_title {
		 font-size: 18px;
	 }
	 
	 .landing_story_quote {
		 font-size: 16px;
	 }
	 
	 .landing_story_person {
		 font-size: 14px;
	 }
	 
	 .landing_faq_entry .planner-price-50-1, .landing_faq_entry .planner-price-25-1, .landing_faq_entry .discovery-price-50-1, .landing_faq_entry .discovery-price-25-1 {
		 padding: 10px 0px;
	 }
	 
	 .landing_faq_entry .pricing_grid .element_holder .icon {
		 height: 10px !important;
	 }
	 
	 #testimonials .feature_content h3 {
		font-size: 18px;
	 }
	 
	 #testimonials .feature_content_wrapper {
		 padding: 20px 30px;
	 }
	 
	 .tooltip {
		 width: 250px;
	 }
	 
	 .dispute_button {
		 font-size: 10px;
	 }
	 
	.share_form_close {
		top: 10px;
		right: 10px;
	}
	
	.drug_pane .drug_interactions {
		padding-bottom: 0px;
		justify-self: center;
	}
	
	.result_details {
		padding-top: 10px;
	}
	
	.planner_pane_dual {
		grid-template-columns: 1fr 1fr 48px 1fr 1fr;
	}
	
	.score_bar > .value {
		align-content: center;
	}
	
	#meds_selector .membership_upgrade {
		max-width: 100%;
		margin-top: 35px;
	}
	
	 #account_membership .membership_upgrade span {
		 font-size: 16px;
	 }
	 
	 .faq_title h1 {
		font-size: 24px;
	 }	
	 
	 .landing_faq_wrapper h2 {
		 font-size: 20px;
	 }
}

@media screen and (max-width: 375px) {
	header logo img, .results_menu .logo {
		height: 16px;
	}
	
	.planner_pane_dual .score_bars {
		grid-column-gap: 2px;
	}
	
	.planner_pane_dual .score_bars .icon {
		width: 26px;
	}

	.result_details_dual {
		word-break: break-word;
	}
	
	.planner_pane_dual 
	
	.drug_arrow, .outcome_icon {
		width: 42px;
	}

	#profile .profile_area, #main_reg {
		padding: 0px 5px;
	}
	
	.profile_menu button {
		font-size: 10px;
	}
	
	.profile_menu button {
		padding: 0px 5px;
	}
	
	.price, .discovery, .planner, .membership {
		font-size: 10px;
	}
	.
	signup_flow {
		padding: 10px 5px;
	}
	
	.copyright {
		font-size: 12px;
	}
	
	.purchase_line {
		font-size: 14px;
	}
	
	.loader_bar {
		width: 250px;
	}
	
	.board {
		grid-template-rows: repeat(4,65px);
		grid-template-columns: repeat(4,65px);
	}
	
	.dispute_label {
		font-size: 14px;
	}
	
	.dispute_buttons button {
		padding: 8px 15px;
	}
	
	.response_message .title {
		font-size: 14px;
	}
	
	.signin_hero_button, .ghost_button {
		font-size: 14px;
	}
	
	.quote_element {
		height: 120px;
	}
	
	.backed_by .logos {
		grid-column-gap: 10px;
	}
	
	.backed_by img {
		width: 130px;
	}
	
	.footercol3 {
		width: 40px;
		align-self: center;
	}
	
	.feature_column_header, .feature_row {
		grid-template-columns: 1.7fr repeat(3,1fr);
	}
	
	.logo_inline {
		max-width: 50px;
	}
	
	.footermenu {
		grid-column-gap: 7px;
	}
	
	.feature_content_wrapper .ghost_button {
		font-size: 12px;
	}
	
	.landing_signup h1 {
		font-size: 26px;
	}
	
	 .landing_benefits_wrapper .benefits_block h3 {
		 font-size: 22px;
	 }
	 
	 .stat_percent {
		 font-size: 32px;
	 }
	 
	 .landing_benefits_wrapper .stat_text {
		  font-size: 22px;
	 }
	 
	 .landing_story_title {
		 font-size: 16px;
	 }
	 
	 .landing_story_quote {
		 font-size: 14px;
	 }
	 
	 .landing_story_person {
		 font-size: 12px;
	 }
	
	.landing_faq_entry .pricing_grid {
		font-size: 9px !important;
	}
	
	.share_link_url {
		font-size: 12px;
		padding: 15px 10px;
	}
	
	.planner_pane_dual {
		grid-template-columns: 1fr 1fr 40px 1fr 1fr;
	}
	
	 #account_membership .settings_line .value, #account_membership .membership_upgrade span {
		 font-size: 14px;
	 }
	 
	 .membership_upgrade_button {
		padding-bottom: 0px;
	}
	
	#meds_selector .membership_upgrade {
		margin-top: 15px;
	}

}