* {
	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;	
}

html.modal-open,
body.modal-open {
    overflow: hidden;
}

.invisible {
	display: none !important;
}

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;
}

sup {
	font-size: 10px;
}

.gradient_text {
	justify-self: start;
	background: linear-gradient(45deg, #e6167d 10%, #132092 25%, #132092 40%, #2a9bd7);
	background-clip: text;
	color: transparent;
	font-size: 48px;
	align-self: end;
}

.centered {
	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: 3;
	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;
}

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;
}

.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: 40%;
	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;
	transition: 0.3s;
}


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

.copyright {
	display: grid;
	justify-items: center;
	font-size: 14px;
	padding: 10px 0px 15px 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 .regular {
	display: grid;
	background: white;
	padding: 100px 5px;
	justify-self: center;
	width: 100%;
}


.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;
}

.navigate_mobile {
	display: none;
}

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

.page > #provider {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

/* FAQ Page */

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

.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;
}	
	
.faq_graphic {
	display: grid;
	grid-area: faq_graphic;
	width: 100%;
	background: url("faq-graphic.png") top left no-repeat, linear-gradient(101deg, #2a9bd7, #132092);
	background-size: contain;
	justify-self: start;
	padding: 0px;
}

.faq_section {
	width: 70%;
	padding-top: 30px;
}

.faq_question_answer {
	display: grid;
}

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

.faq_answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;	
}

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

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

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


/* 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;
}

#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;
}
	
 #main_provider {
	height: fit-content;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	column-gap: 10px;
	grid-row-gap: 10px;
	align-self: center;
	justify-self: center;
	margin: 100px 10px 200px 10px;
	padding: 25px;
	z-index: 2;
}

#main_provider input {
	justify-self: start;
}

#main_provider h3 {
	justify-self: center;
}

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


#subscription_inactive {
	grid-area: inactive_error;
	display: none;
	justify-self: center;
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
}

.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_provider > .patient_bio_settings_element {
	display: grid;
	grid-template-columns: 40px 1fr;
	justify-self: end;
	font-weight: 400;
}

#main_provider > .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;
}

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

.conditions_pane_provider {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 20px;
	grid-row-gap: 20px;
}

.patient_bio_settings {
	display: grid;
	grid-area: patient_bio_settings;
	grid-template-columns: repeat(8, 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(6,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: grid;
	grid-area: med_status;
	padding: 5px;
	font-size: 14px;
	align-self: center;
	justify-self: start;
}

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

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

.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;
}

/* Guides */

#guide {
	display: grid;
	width: 70%;
	max-width: 1000px;
}

.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;
	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;
}

/* Results Page */

.page > #results {
	width: 90%;
	grid-area: main;
	display: grid;
	grid-template-columns: 0.2fr 0.2fr 0.5fr 0.2fr ;
	grid-template-rows: repeat(6,auto);
	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 {
	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;
}

.checked {
  color: orange;
}

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

.user_sentiment {
	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;
}


.page > #results {
	width: 90%;
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: fit-content 1fr;
	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 > .drug_comparison {
	grid-area: drug_comparison;
	display: grid;
	border: 3px solid #6495ED;
	border-radius: 10px;
	background-color: #ADD8E6;
	padding: 10px;
}

.page > #results > .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.3;
}

.action_icon:hover {
	opacity: 0.8;
}

.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;
}

.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_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;
}

#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: 20px;
	margin: 10px 0px;
}

.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: auto auto;	
	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;
	width: min-content;
	grid-row-gap: 10px;
}

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

.account_info .signup_prompt {
	justify-self: start;
	margin: 0px;
	padding: 0px;
}

.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
}


/* Reports Page */
 .planner_panels, .discovery_panels {
	 display: none;
 }
 
#reports {
	display: grid;
	align-content: start;
	padding-top: 0px;
 }
 
/* 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);
	height: fit-content;
	padding: 30px 30px;
}

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

#signin h2 {
	justify-self: center;
}

#signin .login_prompt {
	padding-top: 20px;
	width: 366px;
}

.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-style: normal;
	font-weight: 400;
	justify-self: center;
	margin-top: 0px;
	margin-bottom: 20px;
}

.reset_prompt {
	font-size: 16px;
	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: grid;
	font-size: 18px;
	color: #ED4924;
	justify-content: start;
	align-content: center;
	height: 60px;
	margin: 10px 0px;
}

#signin .error {
	justify-self: center;
}

.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;
}

#password_set .signup_prompt {
	width: 366px;
}


/* 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;
	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_header {
	display: grid;
	grid-area: results_header;
	grid-template-columns: fit-content(40%) 1fr;
	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;
	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_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;
	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 {

}

.first_opinion {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-area: first_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;
}

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

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

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

.first_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 2fr auto;
	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: center;
}

.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;
}

.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"
		"first_opinion first_opinion first_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 {
	grid-area: icon;
}

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

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

.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: 5.5fr 1fr 1fr 5.5fr 1fr;
	background: #FFFFFF;
	border-radius: 0 0 30px 30px;
	border: 0px solid white;
	padding: 0px;
	margin: 10px 0px;
	width: 100%;
}

.outcome_icon  {
	display: grid;
	grid-area: outcome_icon;
	height: 20px;
	justify-self: center;
	align-self: start;
	margin-bottom: 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;
	border-radius: 0 0 30px 30px;
	padding: 0px;
	margin: 10px 0px;
	background-color: white;
	width: 100%;
}

.planner_pane_single > .first_opinion, .planner_pane_dual > .first_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 > .first_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;
	align-content: center;
	border: 0px solid white;
	border-radius: 30px;
	width: 90%;
	max-width: 600px;
	height: fit-content;
	padding: 25px;
	background: white;
	opacity: 1;
	overflow: none;
}

.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 20px 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: center;
	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 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;
}

#meds_selector > #membership_inactive, #meds_selector > #insufficient_tokens {
	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(/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(/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(/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(/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;
}

/* 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: fixed;
	display: none;
    width:100%;
    height:100%;
    background-color: rgba(1, 17, 68, 0.7);
	z-index: 11;
}

.loader_dialog {
	display: grid;
	background: none;
	border: none;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	max-width: 95%;
	justify-self: center;
	align-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;
}

.grecaptcha-badge { 
	visibility: hidden !important;
}

@media print {	
	@page {
		margin: 1cm;
	}
	
	.results_header, .first_opinion, .planner_first_opinion, .all_drug_brands, .drug_usage, .drug_cautions, .synopsis, .drug_datacard, .drug_rank, .drug_pregnancy {
		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;
	}
	
	.first_opinion, .planner_first_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: 120%;
		font-size: 22px		
	}

	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;
	}
	
	footer {
		width: 100%;
	}
	
	 #signin .login_input, #password_set .login_input, #password_reset .login_input, #main_provider .login_input, #main_provider .profile_dropdown {
		width: 100%;
		margin: 5px 0px;
		max-width: 366px;
	}
	
	.footermenu {
		column-gap: 30px;
	}
	
	.footercol, .footercol3  {
		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 0px;
		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;
	}
		
	.profile_area .conditions_pane_reg {
		padding: 10px 0px;
	}
	 
		
	/* Sign-in Page */
	.page > #signin {
		width: 100%;
		max-width: 500px;
	}
	
	.reset_prompt {
		width: 100%;
	}
	
	
	#signin .login_prompt {
		font-size: 12px;
		margin-top: 10px;
		width: auto;
	}
	
	#signin .error {
		font-size: 14px;
		text-align: center;
	}
	
	.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: 24px;
		line-height: unset;
		padding: 15px;
	}
	
	.faq_graphic {
		height: 100px;
		background: url("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;
		font-size: 18px;
	}
		
	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_provider {
		width: 100%;
		grid-template-columns: auto;
		margin: 0px;
	}
	
	.profile_changes {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-row-gap: 10px;
		height: auto;
	}
	
	#main_provider > .medicine_row, #main_provider > .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_provider 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;
		max-width: 600px;
		justify-self: center;
	}
	
	.add_med {
		margin-right: 0px;
		font-size: 14px;
	}
	
	/* Discovery Guide */	
	.guide_mobile {
		display: unset;
	}
	
	.list_item {
		display: list-item;
	}
	
	.guide_desktop {
		display: none;
	}
	
	#guide {
		width: 80%;
		max-width: unset;
		padding: 0px 20px;
	}
	
	.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;
	}
	
	#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 h3 {
		text-align: center;
		font-size: 14px;
	}
	
	#meds_selector .error {
		font-size: 14px;
		padding: 0px;
		height: 55px;
		margin: 0px;
	}
	
	#main_provider .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 {
		grid-template-columns: repeat(3,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: 30px;
		font-size: 14px;
		justify-self: center;
	}
	
	.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;
	}
	
	.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;
	}
	
	.settings_status_message {
		padding: 0px;
		font-size: 14px;
		align-self: center;
		justify-self: center;
		height: 30px;
	}
	
	.profile_buttons {
		padding: 0px;
		align-self: center;
	}
	
	.feedback {
		padding: 20px;
		margin: 10px 0px;
	}
	
	.feedback.account_info {
		height: auto;
	}
	
	.feedback .status_message {
		font-size: 15px;
		height: 60px;
		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;
	}
	
	.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);
	
	}
		
}

@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;
	}	
}
	

@media screen and (max-width: 960px) {
	.intro_wrapper {
		width: 100%;
	}
	
	.drug_score {
		font-size: 18px;
	}

	.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%;
	}
}

@media screen and (max-width: 800px) {
	/* Reports */
	
	.results_view {
		width: 100%;
		min-width: unset;
		max-width: unset;
		padding: 50px 0px 0px 0px;
	}
	
	.planner_view .first_opinion, .results_view .first_opinion {
		grid-template-columns: min-content 1fr;
		font-size: 12px;
		padding: 0px 10px;
	}
	
	.results_view .first_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"
			"first_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;
	}
		
	.drug_names {
		padding: 10px;
		margin: 0px;
	}
	
	.drug_name {
		word-break: break-word;
		padding: 0px;
	}
	
	.result_details {
		grid-template-columns: auto;
		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 {
		height: 25px;
	}
	
	.drug_interactions {
		margin: 0px;
		align-self: end;
		justify-self: center;		
	}
	
	.drug_pane .drug_interactions {
		justify-self: start;
		
		margin: 0px;
	}
	
	.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;
	}			
	
	#guide {
		width: 100%;
	}
	
	.navigate_mobile {
		max-width: 90%;
	}
	
	.discovery_points, .planner_points {
		padding: 30px 20px;
		font-size: 18px;
	}
}

@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;
	}
	
	.navigate_mobile {
		max-width: 100%;
	}
	
	.footermenu {
		padding-top: 20px;
		grid-column-gap: 10px;
	}
	
	.footermenu a {
		font-size: 12px;
	}
	
	.footermenu h2 {
		font-size: 14px;
	}
	
	/* 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;
	}		
}

@media screen and (max-width: 375px) {
	header logo img, .results_menu .logo {
		height: 18px;
	}
	
	.planner_pane_dual .score_bars {
		grid-column-gap: 2px;
	}
	
	.planner_pane_dual .score_bars .icon {
		width: 26px;
	}

	.planner_pane_dual .score_bars .value {
		font-size: 8px;
	}
	
	.drug_arrow, .outcome_icon {
		width: 42px;
	}

	#profile .profile_area, #main_provider {
		padding: 0px 5px;
	}
	
	.loader_bar {
		width: 250px;
	}
}

#g1o {
	width: 100%;
}

.g1o_wrapper {
	display: grid;
	width: 100%;
	height: 100%;
	background: url(/header-graphic1.png), url(/header-graphic2.png), url(/footer-graphic1.png), url(/footer-graphic2.png);
    background-size: 30%, 30%;
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat, no-repeat;
	align-items: center;
    align-content: center;
	justify-self: center;
    align-self: center;
}

.g1o_heading {
	background: linear-gradient(145deg, #e6167d 10%, #132092 25%, #132092 40%, #2a9bd7);
    background-clip: text;
    color: transparent;
	font-size: 36px;
	text-align: center;
    padding: 20px 0px 30px 0px;
}

.g1o_content {
	display: grid;
	justify-self: center;
	justify-items: center;
	text-align: center;
	padding: 50px;
}

@media screen and (max-width: 550px) {
	.g1o_wrapper {
		background: url(/header-graphic1.png), url(/footer-graphic2.png);
		background-position: left top, right bottom;
		background-size: 50%, 50%;
		background-repeat: no-repeat, no-repeat;
	}
	
	.g1o_heading {
	font-size: 24px;
	}
}