/*
This file was copied from google fonts cdn and then modified to host on our domain and add woff fallback:
from https://fonts.googleapis.com/css?family=Poppins:300,400,600
 */

/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url(/src/fonts/poppins-v15-latin-ext-300.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-300.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url(/src/fonts/poppins-v15-latin-300.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-300.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url(/src/fonts/poppins-v15-latin-ext-regular.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-regular.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url(/src/fonts/poppins-v15-latin-regular.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-regular.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(/src/fonts/poppins-v15-latin-ext-600.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-ext-600.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(/src/fonts/poppins-v15-latin-600.woff2) format('woff2'), url(/src/fonts/poppins-v15-latin-600.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
	--font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	--guava-logo-green: #79CC7A;
	--guava-green: #079270;
	--guava-green-text: #197e62;
	--guava-green-shadow: #07927040;
	--guava-green-light: #0792702b;
	--guava-green-bg: #07927014;
	--guava-green-bg-light: #0792700d;
	--guava-green-hover: #008565; /* 8% darker than --guava-green */
	--guava-green-hover-over-white: var(--guava-green-bg);
	--guava-pink: #f9b;
	--dark-green-text: #1e4620;
	--chart-blue: #5af;
	--chart-blue-dark: #0062AD;
	--bold-blue: #1c3e7a;
	--bold-blue-hover: #122a56;
	--chart-shading-green: #e5fae5;
	--chart-shading-green-yellow: #f1fae5;
	--chart-shading-yellow: #fafae5;
	--chart-shading-orange: #faefe5;
	--chart-shading-red: #fae5e5;
	--metric-green: #79CC7A;
	--metric-green-text: #62b464;
	--metric-green-light: rgba(121, 204, 122, 0.30);
	--red-metric: #f16969;
	--orange-metric: #f19b69;
	--orange-warn: #e60;
	--blue-info: #1976d2;
	--text: #222;
	--text-muted: rgba(0, 0, 0, 0.6); /* material design recommends 60% for medium emphasis text for accessibility */
	--text-muted-hover: rgba(0, 0, 0, 0.8);
	--text-highlight-bg: #ff9633;
	--btn-red: #E53C34; /* hct(25, 84, 52) */
	--btn-red-hover: #D7312B; /* hct(25, 84, 48) */
	--btn-red-text: #E32F2A; /* hct(25, 90, 50) */
	--red-error: var(--btn-red-text);
	--logo-text: #4d4d4d;
	--icon-info-gray: #aaa;
	--icon-gray: #757575;
	--input-bg: #fff;
	--input-disabled: #666;
	--input-disabled-bg: #f4f4f4;
	--input-placeholder: #aaa;
	--input-focus-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	/* In light mode, all surfaces are white, but dark mode uses different shades for different elevations */
	--html-bg: #fff;
	--surface-bg: #fff;
	--surface-bg-8dp: #fff;
	--surface-bg-12dp: #fff;
	--surface-bg-24dp: #fff;
	--surface-bg-muted: rgba(0, 0, 0, 0.07);
	--surface-border-color: rgba(0, 0, 0, 0.13);
	--border-color: rgba(0, 0, 0, 0.13); /* e.g. for inputs, dividers..etc) */
	--btn-border-color: rgba(0, 0, 0, 0.24);
	--card-separator: 1px solid var(--border-color);
	--surface-border: 1px solid var(--surface-border-color);
	--hover-gray: rgba(0,0,0,0.07);
	--overlay-card-shadow: 0 4px 15px 2px rgba(0,0,0, 0.35);
	--btn-color: #ddd;
	--btn-color-hover: #ccc;
	--chip-bg: rgba(0, 0, 0, 0.05);
	--chip-bg-hover: rgba(0, 0, 0, 0.1);

	--gold-color: #e3b602;

	--upgrade-color-primary: #6f4db0; /* hct(303, 54, 41) */
	--upgrade-color-btn: #6f4db0; /* hct(303, 54, 41) */
	--upgrade-color-btn-hover: #6543A6; /* hct(303, 54, 37) */
	--upgrade-color-text: #5B3D8F; /* hct(303, 49, 33) */
	--upgrade-color-shadow: #9272ca40;
	--upgrade-color-light: #9272ca2b;
	--upgrade-color-bg: #F6F2F7;
	--upgrade-color-tint: #9272ca0d;
	--upgrade-color-text-darkmode: #d4bbfc; /* hct(303, 36, 80) */

	--color-help-color: #1976d2;
	--color-help-text: #1976d2;
	--color-help-color-hover: #1365b6;
	--color-help-color-hover-over-white: #1365b60d;
	--color-insights: #3F72AA;

	--color-meds: #427DCD;
	--color-vitals: #C5577F;
	--color-pdf: #ea4335;
	--color-csv: #409d52;
	--color-img: #1976d2;
	--color-report: #607d8b;
	--color-imaging: #4d4d4d;

	--profile-card-border-radius: 12px;
	--card-border-radius: 12px;

	--entry-queue-bar-z-index: 96;
	--sync-bar-z-index: 97;
	--visit-prep-status-bar-z-index: 98;
	--page-header-z-index: 100;
	--assistant-btn-z-index: 100; /* below the header menu */
	--menu-overlay-z-index: 101; /* the container capturing click-outside */
	--menu-z-index: 102; /* the actual menu */
	--search-suggest-z-index: 102;
	--bottom-nav-add-z-index: 104; /* Needs to be higher than Global Add Modal's z-index but below other modals */

	/*
	 * Modal z-index starts at 111, and is increased by one for each successive modal on top of modal.
	 * If adding a new z-index here, please reserve enough z-index range over 111 to account for multiple modals.
	 */
	--toast-z-index: 200;
	--tooltip-z-index: 1000;
	--confetti-z-index: 2000;

	--input-padding: calc(0.4em - 1px) 0.6em;
	--input-border-radius: 4px;
	--input-font-size: 16px; /* need to be minimum 16px otherwise ios will zoom in */

	/* Default Theme. Keep in sync with .theme-guava */
	--theme-color-primary: var(--guava-green);
	--theme-color-btn: var(--guava-green);
	--theme-color-btn-hover: var(--guava-green-hover);
	--theme-color-text: var(--guava-green-text);
	--theme-color-shadow: var(--guava-green-shadow);
	--theme-color-light: var(--guava-green-light);
	--theme-color-bg: var(--guava-green-bg);
	--theme-color-tint: var(--guava-green-bg-light);
	--theme-color-chart: var(--guava-green-text);

	--input-focus-border: var(--guava-green);
	--input-focus-shadow: var(--guava-green-shadow);
	--input-primary-text: var(--guava-green-text);
}

.darkmode:root {
	--guava-green: #1d9b78;
	--guava-green-text: #42b692;
	--guava-green-light: #4D92722b;
	--guava-green-shadow: #4D927240;
	--guava-green-hover-over-white: var(--guava-green-light); /* higher opacity when hovering over a dark background */
	--html-bg: #121212;
	--input-bg: #121212;
	--input-disabled: rgba(255, 255, 255, 0.38); /* according to material design */
	--input-disabled-bg: rgba(255, 255, 255, 0.07);
	--input-placeholder: rgba(255, 255, 255, 0.6);
	/* using transparency for text because it needs to work well on all surface elevations */
	--text: rgba(255, 255, 255, 0.87);  /* material design recommends 87% opacity */
	--text-muted: rgba(255, 255, 255, 0.6); /* material design recommends 60% for medium emphasis text for accessibility */
	--text-muted-hover: rgba(255, 255, 255, 0.8);
	/* surface bg color for different elevations https://material.io/design/color/dark-theme.html */
	--surface-bg: #212121; /* 2dp base surface */
	--surface-bg-8dp: #2e2e2e;
	--surface-bg-12dp: #333; /* top/bottom navs, sync bar overlay */
	--surface-bg-24dp: #383838; /* highest level of elevation, e.g. overflow menus, alerts */
	--surface-bg-muted: rgba(255, 255, 255, 0.12); /* alternating color */
	--surface-border-color: rgba(255, 255, 255, 0.07);
	--border-color: rgba(255, 255, 255, 0.14);
	--btn-border-color: rgba(255, 255, 255, 0.3);
	--logo-text: #bbb;
	--icon-gray: rgba(255, 255, 255, 0.54);
	--hover-gray: rgba(255,255,255,0.07);
	--btn-color: #555;
	--btn-color-hover: #444;
	--chip-bg: rgba(255, 255, 255, 0.08);
	--chip-bg-hover: rgba(255, 255, 255, 0.16);

	/* same hue as light color but different saturation and brightness */
	--chart-shading-green: #425c42;
	--chart-shading-green-yellow: #50603e;
	--chart-shading-yellow: #646440;
	--chart-shading-orange: #665042;
	--chart-shading-red: #664242;

	--upgrade-color-primary: #9B7AD4; /* hct(303, 49, 57) */
	--upgrade-color-btn: #7357A6; /* hct(303, 46, 43) */
	--upgrade-color-btn-hover: #7D61B1; /* hct(303, 46, 47) */
	--upgrade-color-text: var(--upgrade-color-text-darkmode);
	--upgrade-color-light: #986CE32b; /* hct(303, 61, 55), hct(303, 16, 20) on surface-bg */
	--upgrade-color-shadow: #986CE340;

	--orange-warn: #ef8c52;
	--btn-red: #D23831; /* hct(25, 80, 47) */
	--btn-red-hover: #E14239; /* hct(25, 80, 52) */
	--btn-red-text: #F96659; /* hct(25, 68, 62) */
	--color-help-color: #438ce9;
	--color-help-text: #6ca6ff;

	/* Default Theme. Keep in sync with .darkmode .theme */
	--theme-color-bg: var(--chip-bg);
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	background: var(--html-bg);
}

body {
	font: 16px var(--font-stack);
	color: var(--text);
	margin: 0;
}

form {
	margin: 0; /* override browser defaults */
}

button {
	/* remove default browser styles */
	font: inherit;
	color: inherit;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}
button:disabled {
	cursor: default;
}
button:focus {
	outline: none;
}
button:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}

a {
	color: var(--guava-green-text);
	text-decoration: none;
	cursor: pointer;
}
a.primary:not(.btn) {
	color: var(--input-primary-text);
}
a:focus {
	outline: none;
}
a:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.inline-link {
	white-space: nowrap;
	word-wrap: break-word;
}
.inline-link:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: 400;
}
/* using chrome's default header sizes */
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}

/*** Page Structure ***/
.header-guava {
	display: flex;
	align-items: center;
	padding: 6px 20px 6px 0;
}
.header-guava a {
	display: flex;
	align-items: center;
}
.header-guava-logo {
	width: 36px;
	margin-right: 10px;
}
.header-guava-name {
	color: var(--logo-text);
	font-size: 32px;
}
.header-signin {
	flex-shrink: 0;
	margin-left: auto;
}
.header-signin .header-login {
	margin-right: 15px;
	font-size: 15px;
	color: var(--text);
}
.page {
	width: 840px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 10px 20px;
}
.page-footer {
	margin: 80px 0; /* bottom margin must be higher than SyncBar height */
	text-align: center;
	color: var(--text);
	font-size: 0.8em;
}
.page-footer-name {
	opacity: 0.4;
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px 10px 20px;
}
.page-footer a {
	margin: 3px 6px;
	color: var(--text);
	opacity: 0.4;
}

.logo-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0;
}
.logo-header-logo {
	width: 80px;
	height: 80px;
	margin-right: 12px;
}
.small .logo-header-logo {
	width: 30px;
	height: 30px;
	margin-right: 6px;
}
.logo-header-text {
	color: var(--logo-text);
	font-weight: 600;
	font-size: 51px;
}
.small .logo-header-text {
	font-size: 19px;
}

/*** Global Helpers ***/
.display-none {
	display: none !important;
}
.visibility-hidden {
	visibility: hidden;
	pointer-events: none;
}
.text-center {
	text-align: center;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-muted {
	color: var(--text-muted);
}
.text-subtitle {
	font-size: 0.8em;
	color: var(--text-muted);
	font-weight: normal;
}
.text-subtitle-14 {
	font-size: clamp(14px, 0.8em, 0.8em);
	color: var(--text-muted);
	font-weight: normal;
}
.text-instructions {
	font-size: 15px;
	margin-bottom: 15px;
}
.raw-json {
	width: 100%;
	overflow-x: auto;
	background: var(--surface-bg-muted);
	font-size: 0.8em;
}
.raw-json-header {
	background: var(--guava-green-light);
	text-align: center;
	padding: 10px 15px;
}
.raw-json pre {
	margin: 0;
}

/*** Button ***/
.btn {
	--btn-text: var(--text);
	--btn-text-over-white: var(--text-muted);
	--btn-color-hover-over-white: var(--hover-gray);
	--btn-outline: var(--input-focus-shadow);
	--btn-border-width: 1px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	column-gap: 0.4em; /* spacing between icon and text */
	font-size: 15px;
	cursor: pointer;
	line-height: 1.4;
	border-radius: 3px;
	padding: 0.4em 0.8em;
	background: var(--btn-color);
	color: var(--btn-text);
	user-select: none;
	-webkit-user-select: none;
	border: none; /* override <button> defaults */
	outline: none; /* override <button> defaults */
}
.btn:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--btn-outline);
	z-index: 1; /* ensure the focused button outline stays above any elements directly next to it */
}
.btn.primary {
	--btn-color: var(--theme-color-btn);
	--btn-color-hover: var(--theme-color-btn-hover);
	--btn-text: #fff;
	--btn-border-color: var(--theme-color-btn);
	--btn-border-width: 2px;
	--btn-text-over-white: var(--input-primary-text);
	--btn-color-hover-over-white: var(--theme-color-tint);
}
.btn.green {
	--btn-color: var(--metric-green);
	--btn-color-hover: var(--metric-green-text);
	--btn-text: #fff;
	--btn-border-color: var(--metric-green);
	--btn-border-width: 2px;
	--btn-text-over-white: var(--metric-green-text);
	--btn-color-hover-over-white: var(--metric-green-light);
}
.btn.red {
	--btn-color: var(--btn-red);
	--btn-color-hover: var(--btn-red-hover);
	--btn-border-color: var(--btn-red);
	--btn-border-width: 2px;
	--btn-text: #fff;
	--btn-text-over-white: var(--btn-red-text);
}
.btn.white {
	--btn-color: #fff;
	--btn-color-hover: rgba(255, 255, 255, 0.85);
	--btn-border-color: #fff;
	--btn-border-width: 2px;
	--btn-text: #fff;
	--btn-text-over-white: #fff;
	--btn-color-hover-over-white: var(--hover-gray);
}
.darkmode .btn.red {
	/* saturated red does not look good as a border in dark mode */
	--btn-border-color: var(--btn-red-text);
}
.btn.outline {
	--btn-text: var(--btn-text-over-white);
	background: none;
	border: var(--btn-border-width) solid var(--btn-border-color);
	padding: calc(0.4em - var(--btn-border-width)) calc(0.8em - var(--btn-border-width));
}
.btn.outline.sml {
	--btn-border-width: 1px;
}
.btn.text-btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
	--btn-text: var(--btn-text-over-white);
	padding: 0;
}
.btn.round-btn {
	border-radius: 3em; /* just need to set a sufficiently high value to get "pill" shape */
	padding: 0.4em 1em;
}
.btn.round-btn.outline {
	padding: calc(0.4em - var(--btn-border-width)) calc(1em - var(--btn-border-width));
}
.btn .spinner {
	display: none;
	width: 24px;
	height: 24px;
	position: absolute;
	--spinner-color: var(--btn-text);
}
.btn-with-dot {
	position: relative;
}
.btn-dot {
	width: 10px;
	height: 10px;
	border: 1px solid var(--html-bg);
	border-radius: 50%;
	background: var(--theme-color-primary);
	position: absolute;
	top: -2px;
	right: 0;
}
.icon-btn .btn-dot {
	top: 6px;
	right: 5px;
}
.btn.loading .spinner {
	display: block;
}
.toggle-btns {
	display: flex;
}
.toggle-btns .btn {
	border-radius: 0;
}
.toggle-btns .btn:hover {
	z-index: 1; /* ensure the button's borders are visible when hovered over */
	position: relative;
}
.toggle-btns .btn:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.toggle-btns .btn:not(:last-child) {
	margin-right: -2px;
}
.toggle-btns .btn:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.btn.dismiss-btn {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	padding: 5px;
	border: 2px solid var(--surface-bg);
}
a.btn,
a.btn:hover {
	text-decoration: none;
}
.btn.lrg {
	font-size: 24px;
}
.btn.medium {
	font-size: 18px;
}
.btn.sml {
	font-size: 0.8em;
}
.btn.loading,
.btn.disabled {
	position: relative; /* for position absolute .spinner */
	opacity: 0.5;
	pointer-events: none;
}
.btn.disabled .tooltip-wrap {
	pointer-events: auto; /* Used when we want to tell people why a button is disabled */
}
.btn-svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}
svg.btn-svg {
	fill: var(--btn-text, currentColor);
	stroke: none;
}
.btn svg {
	flex-shrink: 0;
}
.left-svg {
	margin: 0 0 0 -0.5em;
}
.icon-btn .left-svg {
	margin: 0;
}
.drop-down-svg,
.right-svg {
	margin: 0 -0.5em 0 0;
}
.btn .right-svg {
	margin-left: -0.2em; /* arrow is thinner than other icons, so decrease gap between text and icon */
}
.icon-btn .right-svg {
	margin: 0;
}
.cross-svg {
	margin: 0 -0.4em; /* undo the uneven .btn padding to make button square because there's no text */
	width: 1.4em;
	height: 1.4em; /* ensure same height as textual buttons */
}

.up-stem-svg path,
.down-stem-svg path,
.minus-svg path,
.cross-svg path,
.plus-svg path,
.forward-svg path,
.back-svg path,
.left-svg path,
.right-svg path,
.up-svg path,
.down-svg path,
.menu-svg path,
.warn-svg path,
.check-svg path {
	fill: none;
	stroke: var(--btn-text, currentColor);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 12;
}

.menu-svg path,
.check-svg path,
.minus-svg path {
	stroke-width: 2px;
}
.up-stem-svg path,
.down-stem-svg path {
	stroke-width: 10px;
}
.forward-svg path,
.back-svg path {
	fill: none !important;
	stroke: currentColor;
	stroke-width: 8px;
}
.warn-svg path {
	stroke-width: 8;
	stroke-linecap: butt;
}
.card-svg.btn-svg {
	stroke-width: 2;
	margin: -0.2em 0.4em -0.2em 0;
	width: 1.8em;
	height: 1.8em;
}
.icon-arrow {
	flex-shrink: 0;
	fill: none;
	width: 32px;
	height: 32px;
	stroke: var(--text-muted);
	stroke-width: 7px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.icon-check {
	--icon-color: var(--guava-green);
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 3px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	border: 2px solid var(--icon-color);
	border-radius: 50%;
	stroke: var(--icon-color);
	stroke-width: 2;
}
.icon-btn {
	width: 40px;
	height: 40px;
	padding: 8px;
	--btn-text: var(--text-muted);
	--btn-color-hover: var(--hover-gray);
	fill: currentColor;
	border-radius: 50%;
	background: none;
	flex-shrink: 0;
}
.dismiss-btn svg,
.icon-btn svg {
	width: 100%;
	height: 100%;
	flex-shrink: 0; /* icons should never be shrunk */
}
.icon-btn.dark-bg {
	--btn-text: #fff;
}

@media (hover: hover) {
	.btn:hover {
		background: var(--btn-color-hover);
	}
	.btn.outline:hover {
		background: var(--btn-color-hover-over-white);
	}
	.icon-btn:hover {
		--btn-text: var(--text-muted-hover);
		color: var(--text-muted-hover);
	}
	.icon-btn.dark-bg:hover {
		color: #fff;
		--btn-text: #fff;
		background: rgba(255, 255, 255, 0.15);
	}
	.text-btn:hover {
		text-decoration: underline;
	}
}

/*** Forms ***/
.form .text-input {
	width: 100%;
}
.form-label {
	display: block; /* override if used with <label> instead of <div> */
	margin: 20px 0 5px;
}
.form-label.optional {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.form-label-inline-wrapper {
	margin-top: 20px; /* need wrapper to put line break before label and input */
}
.form-label-inline {
	/*
	 * need inline block so entire space to right of label doesn't become clickable label
	 * currently only works when the input following it has display block
	 */
	display: inline-block;
	margin-bottom: 5px;
}
.form-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin: 3px 0;
}
.form-description {
	font-size: 0.8em;
	color: var(--text-muted);
	margin: 15px 0;
}
.form-show-password-btn {
	float: right;
	margin-top: 2px;
}
.form-checkbox {
	margin: 20px 0 20px 3px; /* inlay checkbox same amount as border radius of inputs */
}
.form-checkbox + .form-checkbox {
	margin-top: -5px;
}
.form-error {
	margin: 20px 0;
	color: var(--red-error);
}
.form-error:empty {
	display: none;
}
.form-error:last-child {
	margin-bottom: 0;
}
.form-blocks {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 5px -15px 5px 0;
}
.form-block {
	margin: 15px 15px 0 0;
}
.form-block.grow {
	flex-grow: 1;
}
.form-block > .form-label {
	margin-top: 0;
}
.form-btns {
	margin: 25px 0 0;
}
.form-btns.flex-row {
	display: flex;
	align-items: center;
	gap: 15px;
}
.card-header.space-between,
.form-btns.space-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.form-btns.align-right {
	display: flex;
	justify-content: flex-end;
}
.form-btns.align-center {
	display: flex;
	justify-content: center;
}
/* increase minimum click area, but don't affect .text-btn */
.form-btns .round-btn {
	min-width: 100px;
}
.form-btns .round-btn.medium {
	min-width: 200px;
}
.form-btns.full-width .btn {
	width: 100%;
}
/* should align with width where card-modal becomes fullscreen */
@media (max-width: 500px) {
	.form-btns.fixed {
		height: 3em; /* reserve roughly enough height for height+padding since button is fixed and won't affect layout */
	}
	.form-btns.fixed .btn {
		position: fixed;
		bottom: 10px;
		left: 15%;
		width: 70%;
		font-size: 1.3em;
		box-shadow: 0 0 10px 3px var(--surface-bg);
	}
}
/*** Text Input ***/
.text-input,
.time-input,
.number-input {
	display: inline-block;
	padding: var(--input-padding);
	width: 200px;
	font-family: var(--font-stack);
	font-size: var(--input-font-size);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);
	-webkit-appearance: none; /* prevent ios safari from forcing inset shadow and border-radius */
}
.time-input {
	display: inline-flex; /* On Safari, inline-block makes time-input is not vertically aligned */
}
.text-input:focus,
.time-input:focus,
.number-input:focus,
.textarea-input:focus {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.text-input::placeholder,
.time-input::placeholder,
.number-input::placeholder,
.textarea-input::placeholder {
	color: var(--input-placeholder);
}
.text-input:disabled,
.time-input:disabled,
.number-input:disabled,
.textarea-input:disabled {
	background: var(--input-disabled-bg);
	color: var(--input-disabled);
}
.text-input.lrg,
.time-input.lrg,
.number-input.lrg {
	border-radius: 5px;
	font-size: 1.2em;
	padding: calc(0.675em - 1px) 0.6em; /* to achieve equivalent height as if font-size 1.5em were used */
}
.time-input {
	width: 130px;
	min-height: 35px; /* bug in iOS chrome and safari where height is shrunken if time inputs are empty */
}
.number-input {
	width: 100px; /* numbers are almost never 200px long, save some space */
}
.number-input.lrg {
	width: 120px;
}
.number-input-unit-suffix {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-left: 10px;
}

/*** Text Area ***/
.textarea-input {
	resize: none;
	width: 100%;
	height: 10em;
	font-size: var(--input-font-size);
	padding: var(--input-padding);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);
	font-family: var(--font-stack);
	-webkit-appearance: none; /* prevent ios safari from adding inset shadow */
	vertical-align: top; /* remove random extra below input when used as inline-block */
}
.textarea-input.lrg {
	font-size: 18px;
}
.textarea-input.short {
	height: 5em;
}
.textarea-input.two-line {
	height: 3.6em;
}
.textarea-input.single-line {
	height: 2.2em;
}
.textarea-input.expandable {
	resize: vertical;
}
.textarea-input.error {
	border-color: var(--red-error);
}


/*** Select Dropdowns ***/
.select {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
}
/* triangle icon */
.select:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	top: 50%;
	margin-top: -2px; /* 1 pixel below vertically centered because it looks cleaner */
	right: 9px;
	border: solid transparent;
	border-width: 6px 5px;
	border-top-color: var(--icon-gray);
	pointer-events: none;
}
.select select {
	width: 100%; /* to prevent a long label from pushing the select off screen */
	/* Similar style as text-input */
	padding: var(--input-padding);
	font-size: var(--input-font-size);
	line-height: 1.4;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	transition: var(--input-focus-transition);

	padding-right: 24px; /* account for the triangle icon */
	text-align: left;
	cursor: pointer;
	-moz-appearance: none; /* hiding the default arrow */
	-webkit-appearance: none;
	margin: 0; /* otherwise safari adds top and bottom margin... */
}
.select.lrg select {
	border-radius: 5px;
	font-size: 1.5em;
}
.select.round:after {
	right: 12px;
}
.select.round select {
	padding-left: 0.8em;
	padding-right: 27px;
	border-radius: 50px;
}
.select.center select {
	text-align: center;
}
.select select:focus {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.select.loading,
.select.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.select .spinner {
	position: absolute;
	width: 25px;
	height: 25px;
	--spinner-color: currentColor;
}

/*** Radio Buttons ***/
.radio-group-label {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.radio-input {
	margin: 10px;
}

/*** Spinner ***/
.spinner {
	--spinner-color: var(--guava-green);
	--spinner-stroke: 5px;

	flex-shrink: 0;
	position: relative;
	width: 30px;
	height: 30px;
	display: inline-block;
}
.spinner.thin {
	--spinner-stroke: 3px;
}
.spinner.primary {
	--spinner-color: var(--theme-color-primary);
}
.spinner:before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	margin-top: -50%;
	margin-left: -50%;
	border-radius: 50%;
	border-top: var(--spinner-stroke) solid var(--spinner-color);
	border-right: var(--spinner-stroke) solid transparent;
	animation: spinner 0.7s linear infinite;
}
.spinner-wrap {
	text-align: center;
	padding: 20px;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

.spinner.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	z-index: 1;
}
.spinner.small {
	width: 30px;
	height: 30px;
}

.container-loading {
	opacity: 0.5;
	pointer-events: none;
}

/*** Card ***/
.card {
	position: relative;
	background: var(--surface-bg);
	border-radius: var(--card-border-radius);
	margin-bottom: 10px; /* TODO shouldn't be here? */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	/*overflow: hidden; !* overflow hidden will clip popup menu *!*/
}

.card-header {
	padding: 15px;
	font-size: 20px;
	border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

/* Card Title + action button */
.card-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.card-header-subtitle {
	font-size: 14px;
	color: #888;
}

/* Header with dark bg */
.card-header-dark {
	background: #3962ad;
	color: #fff;
	border: none;
}

.card-header-dark .card-header-subtitle {
	color: rgba(255,255,255,0.8);
}

.card-header-dark .card-header-action-btn {
	background: rgba(0,0,0,0.25);
	color: #fff;
}
.card-header-dark .card-header-action-btn:hover {
	background: rgba(0,0,0,0.4);
}

/* Header with theme primary color bg */
.card-header-primary {
	background: var(--theme-color-primary);
	color: #fff;
	border: none;
}
.card-header-primary .card-header-subtitle {
	color: rgba(255,255,255,0.8);
}

.card-header-primary .btn.outline {
	--btn-text: #fff;
	--btn-color: #fff;
}

.card-header-primary .btn.outline:hover {
	background: #ffffff20;
}

.card-section {
	position: relative;
	padding: 15px;
}

.card-section:not(:first-child) {
	border-top: var(--card-separator);
}

.card-section > p:first-child,
.card-section > .form-label:first-child {
	margin-top: 0;
}
.card-section-header {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.card-section-header .btn-svg {
	--btn-text: var(--theme-color-primary);
}
.card-section-header.themed {
	color: var(--theme-color-text);
}

/* Card Forms */
.modal .card-section-form.card-section, /* need to define this to win specificity against ".modal .card-section" */
.card-section-form.card-section {
	padding-top: 0; /* need to remove padding due to margin-top in form labels */
}

.card-sec-title {
	font-size: 20px;
}

.card-footer {
	padding: 5px 15px;
	border-top: var(--card-separator);
}

.card-error {
	display: flex;
	padding: 15px;
	justify-content: space-between;
	align-items: center;
	color: var(--red-error);
}
.card.info-card {
	padding: 60px;
}
@media (max-width: 550px) {
	.card.info-card {
		padding: 20px;
	}
}
.detail-modal-section-card {
	padding: 20px;
	margin: 15px 10px;
	background: var(--portal-surface-bg);
	border-radius: var(--card-border-radius);
}
@media (max-width: 360px) {
	.detail-modal-section-card {
		margin-left: 5px;
		margin-right: 5px;
	}
}

.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: var(--menu-overlay-z-index);
}

.has-tooltip {
	border-bottom: 1px dashed var(--border-color);
}

.help-btn {
	font-size: 14px;
	color: var(--text-muted);
}

.notice {
	padding: 15px;
	border: 1px solid var(--notice-primary);
	border-radius: var(--card-border-radius);
	background: var(--notice-bg);
	color: var(--notice-text);
}
.notice.with-icon {
	display: flex;
	align-items: center;
}
.notice.success {
	--notice-primary: #4caf50;
	--notice-text: var(--dark-green-text);
	--notice-bg: #edf7ed;
}
.darkmode .notice.success {
	--notice-primary: #31AB5A;
	--notice-bg: #252b24;
}
.notice.info {
	--notice-bg: #e8f4fd;
	--notice-text: #0d3c61;
	--notice-primary: #2196f3;
}
.darkmode .notice.info {
	--notice-bg: #212a32;
}
.notice.warning {
	--notice-bg: #fef4e5;
	--notice-text: #663c00;
	--notice-primary: #ff9800;
}
.darkmode .notice.warning {
	--notice-bg: #332928;
	--notice-primary: #EC8C00;
}
.notice.error {
	--notice-bg: #fdecea;
	--notice-text: #611a15;
	--notice-primary: #f44336;
}
.darkmode .notice.error {
	--notice-bg: #332928;
	--notice-primary: #FF6151;
}
.notice.primary {
	border: none;
	--notice-bg: var(--theme-color-light);
	--notice-text: var(--text);
	--notice-primary: var(--theme-color-primary);
}
.darkmode .notice {
	--notice-text: var(--text);
}
.notice .toast-icon {
	stroke: var(--notice-primary);
}
.notice .spinner {
	--spinner-color: var(--notice-primary);
}
.notice .spinner:last-child {
	margin-left: 10px;
}
.site-banner {
	padding: 10px;
	color: #fff;
	text-align: center;
}
.site-banner.error {
	background: #8b0000;
}

.tag-labels {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 5px 0;
	flex-wrap: wrap;
}
.tag-label {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	border-radius: 20px;
	font-size: 14px;
	border: var(--card-separator);
	background: var(--input-disabled-bg);
	color: var(--text);
	white-space: nowrap;
}
.tag-label.red {
	color: var(--btn-red-text);
	border-color: var(--btn-red);
	background: none;
}
.darkmode .tag-label.red {
	/* saturated red does not look good as a border in dark mode */
	border-color: var(--btn-red-text);
}

.beta-label {
	text-transform: uppercase;
	font-size: 0.7em;
	font-weight: 600;
	margin-left: 5px;
	opacity: 0.65;
}
.tag-label.new-label {
	font-weight: 600;
	font-size: 10px;
	height: 2em;
	padding: 3px 9px;
	border: none;
}
.tag-label-text-wrap {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.tag-label.new-label.primary {
	background: var(--theme-color-light);
	color: var(--theme-color-text);
}
.tag-label.premium-label {
	font-weight: 400;
	font-size: 10px;
	height: 2em;
	letter-spacing: 1px;
	padding: 3px 9px 3px 10px; /* to account for letter spacing */
	background: var(--upgrade-color-btn);
	color: #fff;
	border: none;
}

/*
Themes

Keep in sync with EmailSummary.php for backend colors
Use HCT color mode to ensure colors have similar colorfulness and contrast https://material-foundation.github.io/material-theme-builder/
Some dark mode text should have less chroma to avoid the "neon" look for colorful light text on dark background (e.g. red, yellow, green)

--theme-color-primary: used for icons against surface, or large surfaces in light mode like card header
--theme-color-btn: button background, or anything that needs to contrast against white on it
    Preferred tone ~50 for 5:1 contrast with white text on both light and dark mode
--theme-color-btn-hover: 8% darker / lighter than btn
--theme-color-text: text on surface.
    Tone is 40 for light and 70 for dark for 6:1 contrast
--theme-color-chart: chart background. Default to text if not given
--theme-color-bg: very faint colored background. Use as a surface (e.g. a card background)
    Set the primary color with 8% opacity, then copy the copy into HCT picker and make the tone 96%. Adjust the chroma and hue until it looks nice.
    The chroma should not be above 6, and in some cases may have to be drastically lowered (e.g. reds). Compare on insights modal to make sure visual coherence with other themes
--theme-color-light: light background for buttons, notice, banners
    Opacity 2b (16%) for light mode. For dark mode, first find the color that looks good on surface-bg, then find the color with opacity 16% to handle surface elevations
*/
.theme {
	--theme-color-primary: var(--theme-color-primary-lightmode);
	--theme-color-btn: var(--theme-color-btn-lightmode);
	--theme-color-btn-hover: var(--theme-color-btn-hover-lightmode);
	--theme-color-text: var(--theme-color-text-lightmode);
	--theme-color-chart: var(--theme-color-chart-lightmode);
	--theme-color-shadow: var(--theme-color-shadow-lightmode);
	--theme-color-light: var(--theme-color-light-lightmode);
	--theme-color-bg: var(--theme-color-bg-lightmode);
	--theme-color-tint: var(--theme-color-tint-lightmode);
	--input-focus-border: var(--theme-color-primary);
	--input-focus-shadow: var(--theme-color-shadow);
	--input-primary-text: var(--theme-color-text);
	/* default fallback themes */
	--theme-color-chart-lightmode: var(--theme-color-text);
	--theme-color-chart-darkmode: var(--theme-color-text);
}
.theme.theme-genetics,
.theme.theme-guava {
	/* Keep in sync with default theme. Defined here so we can override a differently-themed parent */
	--theme-color-primary-lightmode: var(--guava-green);
	--theme-color-btn-lightmode: var(--guava-green);
	--theme-color-btn-hover-lightmode: var(--guava-green-hover);
	--theme-color-text-lightmode: var(--guava-green-text);
	--theme-color-shadow-lightmode: var(--guava-green-shadow);
	--theme-color-light-lightmode: var(--guava-green-light);
	--theme-color-bg-lightmode: var(--guava-green-bg);
	--theme-color-tint-lightmode: var(--guava-green-bg-light);
	--theme-color-primary-darkmode: var(--guava-green);
	--theme-color-btn-darkmode: var(--guava-green);
	--theme-color-btn-hover-darkmode: var(--guava-green-hover);
	--theme-color-text-darkmode: var(--guava-green-text);
	--theme-color-light-darkmode: var(--guava-green-light);
	--theme-color-shadow-darkmode: var(--guava-green-shadow);
}
.theme.theme-insights {
	--theme-color-primary-lightmode: var(--color-insights); /* hct(255, 41, 47) */
	--theme-color-btn-lightmode: var(--color-insights); /* hct(255, 41, 47) */
	--theme-color-btn-hover-lightmode: #34689F; /* hct(255, 41, 43) */
	--theme-color-text-lightmode: #1A558B; /* hct(255, 41, 35) */
	--theme-color-shadow-lightmode: #366aa140;
	--theme-color-light-lightmode: #366aa12b;
	--theme-color-bg-lightmode: #F0F4F9;
	--theme-color-tint-lightmode: #366aa10d;
	--theme-color-primary-darkmode: #5B8CC5; /* hct(255, 41, 57) */
	--theme-color-btn-darkmode: #3F72AA; /* hct(255, 41, 47) */
	--theme-color-btn-hover-darkmode: #4A7CB5; /* hct(255, 41, 51) */
	--theme-color-text-darkmode: #A1C9FF; /* hct(255, 41, 80) */
	--theme-color-light-darkmode: #4085E92b; /* hct(263, 59, 56), hct(255, 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #4085E940;
}
.theme.theme-sleep {
	--theme-color-primary-lightmode: #7175C6; /* hct(284, 46, 52) */
	--theme-color-btn-lightmode: #7175C6; /* hct(284, 46, 52) */
	--theme-color-btn-hover-lightmode: #676ABA; /* hct(284, 46, 48) */
	--theme-color-text-lightmode: #4C4F9C; /* hct(284, 46, 37) */
	--theme-color-shadow-lightmode: #3641a140;
	--theme-color-light-lightmode: #3641a12b;
	--theme-color-bg-lightmode: #F2F3F9;
	--theme-color-tint-lightmode: #3641a10d;
	--theme-color-primary-darkmode: #8181D1; /* hct(284, 46, 57) */
	--theme-color-btn-darkmode: #7174C5; /* hct(284, 46, 52) */
	--theme-color-btn-hover-darkmode: #7B7FD1; /* hct(284, 46, 56) */
	--theme-color-text-darkmode: #C0C1FF; /* hct(284, 40, 80) */
	--theme-color-light-darkmode: #7278EF2b; /* hct(84, 61, 55), hct(284, 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #7278EF40;
}
.theme.theme-pee,
.theme.theme-vaccination,
.theme.theme-sauna,
.theme.theme-activity {
	--theme-color-primary-lightmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-lightmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-hover-lightmode: #BA900F; /* hct(88, 48, 62) */
	--theme-color-text-lightmode: #99771D; /* hct(88, 40, 52) */
	--theme-color-chart-lightmode: #C0951C; /* hct(88, 48, 64) */
	--theme-color-shadow-lightmode: #e2ad3840;
	--theme-color-light-lightmode: #e2ad382b;
	--theme-color-bg-lightmode: #FCF8EE;
	--theme-color-tint-lightmode: #e2ad380d;
	--theme-color-primary-darkmode: #D2A528; /* hct(88, 49, 70) */
	--theme-color-btn-darkmode: #BA900F; /* hct(88, 48, 62) */
	--theme-color-btn-hover-darkmode: #AB8300; /* hct(88, 48, 57) */
	--theme-color-text-darkmode: #E2C37C; /* hct(88, 30, 80) */
	--theme-color-light-darkmode: #917F592b; /* hct(88, 19, 54), hct(88, 4, 20) on surface-bg */
	--theme-color-shadow-darkmode: #917F5940;
}
.theme.theme-water {
	--theme-color-primary-lightmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-lightmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-hover-lightmode: #2286BD; /* hct(242, 46, 53) */
	--theme-color-text-lightmode: #0076AC; /* hct(242, 46, 47) */
	--theme-color-shadow-lightmode: #3592ca40;
	--theme-color-light-lightmode: #3592ca2b;
	--theme-color-bg-lightmode: #EFF4F7;
	--theme-color-tint-lightmode: #3592ca0d;
	--theme-color-primary-darkmode: #3592ca; /* hct(242, 46, 57) */
	--theme-color-btn-darkmode: #1D83BA; /* hct(242, 46, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #8DCDFF; /* hct(242, 46, 80) */
	--theme-color-chart-darkmode: #4EA3DB; /* hct(242, 46, 64) */
	--theme-color-light-darkmode: #3A8BD02b; /* hct(251, 50, 56), hct(242, 14, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3A8BD040;
}
.theme.theme-caffeine {
	--theme-color-primary-lightmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-lightmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-hover-lightmode: #8A6B60; /* hct(38, 14, 48) */
	--theme-color-text-lightmode: #75584E; /* hct(38, 14, 40) */
	--theme-color-shadow-lightmode: #8d6e6340;
	--theme-color-light-lightmode: #8d6e632b;
	--theme-color-bg-lightmode: #F7F3F2;
	--theme-color-tint-lightmode: #8d6e630d;
	--theme-color-primary-darkmode: #AA8A7E; /* hct(38, 14, 60) */
	--theme-color-btn-darkmode: #98786d; /* hct(38, 14, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #E3BFB3; /* hct(38, 14, 70) */
	--theme-color-light-darkmode: #987F772b; /* hct(38, 11, 55), hct(38, 2, 20) on surface-bg */
	--theme-color-shadow-darkmode: #987F7740;
}
.theme.theme-encounter,
.theme.theme-alcohol {
	--theme-color-primary-lightmode: #8B6CC2; /* hct(303, 49, 52) */
	--theme-color-btn-lightmode: #8B6CC2; /* hct(303, 49, 52) */
	--theme-color-btn-hover-lightmode: #8162B7; /* hct(303, 49, 48) */
	--theme-color-text-lightmode: #6D4EA3; /* hct(303, 49, 40) */
	--theme-color-shadow-lightmode: #9272ca40;
	--theme-color-light-lightmode: #9272ca2b;
	--theme-color-bg-lightmode: #f6f4fa;
	--theme-color-tint-lightmode: #9272ca0d;
	--theme-color-primary-darkmode: #997BCD; /* hct(303, 46, 57) */
	--theme-color-btn-darkmode: #8568B9; /* hct(303, 46, 50) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #d4bbfc; /* hct(303, 36, 80) */
	--theme-color-light-darkmode: #9272CA2b; /* hct(303, 49, 54), hct(303, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #9272CA40;
}
.theme.theme-mood {
	--theme-color-primary-lightmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-lightmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-hover-lightmode: #9D61A8; /* hct(325, 46, 50) */
	--theme-color-text-lightmode: #864D92; /* hct(325, 46, 42) */
	--theme-color-shadow-lightmode: #aa68b640;
	--theme-color-light-lightmode: #aa68b62b;
	--theme-color-bg-lightmode: #F8F2F5;
	--theme-color-tint-lightmode: #aa68b60d;
	--theme-color-primary-darkmode: #B57DBE; /* hct(325, 42, 60) */
	--theme-color-btn-darkmode: #a76ab2; /* hct(325, 46, 54) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #F2AFFD; /* hct(325, 46, 80) */
	--theme-color-light-darkmode: #B16CB72b; /* hct(325, 49, 56), hct(325, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B16CB740;
}
.theme.theme-energy {
	--theme-color-primary-lightmode: #3BA08F; /* hct(181, 40, 60) */
	--theme-color-btn-lightmode: #319887; /* hct(181, 40, 57) */
	--theme-color-btn-hover-lightmode: #1E8B7A; /* hct(181, 40, 52) */
	--theme-color-text-lightmode: #007E6E; /* hct(181, 40, 47) */
	--theme-color-shadow-lightmode: #32c4ae40;
	--theme-color-light-lightmode: #32c4ae2b;
	--theme-color-bg-lightmode: #EFF5F2;
	--theme-color-tint-lightmode: #32c4ae0d;
	--theme-color-primary-darkmode: #42A693; /* hct(181, 40, 62) */
	--theme-color-btn-darkmode: #329887; /* hct(181, 40, 57) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #89D5C4; /* hct(181, 34, 80) */
	--theme-color-light-darkmode: #538B7F2b; /* hct(181, 28, 53), hct(181, 8, 20) on surface-bg */
	--theme-color-shadow-darkmode: #538B7F40;
}
.theme.theme-respiratory-rate,
.theme.theme-glucose,
.theme.theme-blood-oxygen,
.theme.theme-body-temp,
.theme.theme-peak-flow,
.theme.theme-heart {
	--theme-color-primary-lightmode: var(--color-vitals); /* hct(0.4, 55, 52) */
	--theme-color-btn-lightmode: var(--color-vitals); /* hct(0.4, 55, 52) */
	--theme-color-btn-hover-lightmode: #B84D75; /* hct(0.4, 55, 48) */
	--theme-color-text-lightmode: #A03A60; /* hct(0.4, 55, 40) */
	--theme-color-shadow-lightmode: #ca537f40;
	--theme-color-light-lightmode: #ca537f2b;
	--theme-color-bg-lightmode: #F8F2F2;
	--theme-color-tint-lightmode: #ca537f0d;
	--theme-color-primary-darkmode: #D1658C; /* hct(0.4, 53, 57) */
	--theme-color-btn-darkmode: #B54B72; /* hct(0.4, 55, 47) */
	--theme-color-btn-hover-darkmode: #C4577E; /* hct(0.4, 55, 52) */
	--theme-color-text-darkmode: #FFB1C7; /* hct(0.4, 40, 80) */
	--theme-color-chart-darkmode: #E47A9E; /* hct(0.4, 50, 64) */
	--theme-color-light-darkmode: #BB6C862b; /* hct(0.4, 39, 55), hct(0.4, 8, 20) */
	--theme-color-shadow-darkmode: #BB6C8640;
}
.theme.theme-meds {
	--theme-color-primary-lightmode: var(--color-meds); /* hct(261, 50, 52) */
	--theme-color-btn-lightmode: var(--color-meds); /* hct(261, 50, 52) */
	--theme-color-btn-hover-lightmode: #3572C2; /* hct(261, 50, 48) */
	--theme-color-text-lightmode: #1D5EAA; /* hct(261, 50, 40) */
	--theme-color-shadow-lightmode: #4a84d440;
	--theme-color-light-lightmode: #4a84d42b;
	--theme-color-bg-lightmode: #EFF4FA;
	--theme-color-tint-lightmode: #4a84d40d;
	--theme-color-primary-darkmode: #5892E3; /* hct(261, 51, 60) */
	--theme-color-btn-darkmode: #3C78C7; /* hct(261, 50, 50) */
	--theme-color-btn-hover-darkmode: #4882D2; /* hct(261, 50, 54) */
	--theme-color-text-darkmode: #A7C8FF; /* hct(261, 50, 80) */
	--theme-color-light-darkmode: #3A87E72b; /* hct(261, 58, 56), hct(261 16, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3A87E740;
}
.theme.theme-doctor,
.theme.theme-weather,
.theme.theme-weight,
.theme.theme-height {
	--theme-color-primary-lightmode: #2697a6; /* hct(209, 41, 57) */
	--theme-color-btn-lightmode: #038998; /* hct(209, 41, 52) */
	--theme-color-btn-hover-lightmode: #007E8C; /* hct(209, 41, 48) */
	--theme-color-text-lightmode: #006973; /* hct(209 41, 40) */
	--theme-color-shadow-lightmode: #2697a640;
	--theme-color-light-lightmode: #2697a62b;
	--theme-color-bg-lightmode: #f0f7f8;
	--theme-color-tint-lightmode: #2697a60d;
	--theme-color-primary-darkmode: #3C96A3; /* hct(209, 37, 57) */
	--theme-color-btn-darkmode: #008998; /* hct(209, 41, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #93D0DB; /* hct(209, 30, 80) */
	--theme-color-light-darkmode: #2B93A02b; /* hct(209, 39, 56), hct(209, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #2B93A040;
}
.theme.theme-food {
	--theme-color-primary-lightmode: #44995B; /* hct(152, 48, 57) */
	--theme-color-btn-lightmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-btn-hover-lightmode: #2A8246; /* hct(152, 48, 48) */
	--theme-color-text-lightmode: #1F6C38; /* hct(152, 48, 40) */
	--theme-color-chart-lightmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-shadow-lightmode: #4a9f6040;
	--theme-color-light-lightmode: #4a9f602b;
	--theme-color-bg-lightmode: #F0F5EE;
	--theme-color-tint-lightmode: #4a9f600d;
	--theme-color-primary-darkmode: #46995B; /* hct(152, 48, 57) */
	--theme-color-btn-darkmode: #368C4F; /* hct(152, 48, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #93D69C; /* hct(152, 40, 80) */
	--theme-color-chart-darkmode: #69A974; /* hct(152, 40, 64) */
	--theme-color-light-darkmode: #608B602b; /* hct(148, 32, 54), hct(152, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #608B6040;
}
.theme.theme-head-circumference {
	--theme-color-primary-lightmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-lightmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-hover-lightmode: #B2786A; /* hct(31, 26, 56) */
	--theme-color-text-lightmode: #996155; /* hct(31, 26, 47) */
	--theme-color-shadow-lightmode: #ce918340;
	--theme-color-light-lightmode: #ce91832b;
	--theme-color-bg-lightmode: #F7F2F1;
	--theme-color-tint-lightmode: #ce91830d;
	--theme-color-primary-darkmode: #C38779; /* hct(31, 26, 62) */
	--theme-color-btn-darkmode: #BD8274; /* hct(31, 26, 60) */
	--theme-color-btn-hover-darkmode: #CF9283; /* hct(31, 26, 66) */
	--theme-color-text-darkmode: #E5BEB4; /* hct(31, 15, 80) */
	--theme-color-light-darkmode: #9378732b; /* hct(31, 12, 53), hct(31, 2, 20) on surface-bg */
	--theme-color-shadow-darkmode: #93787340;
}
.theme.theme-symptoms {
	--theme-color-primary-lightmode: #649470; /* hct(155, 31, 57) */
	--theme-color-btn-lightmode: #578763; /* hct(155, 31, 52) */
	--theme-color-btn-hover-lightmode: #4D7C59; /* hct(155, 31, 48) */
	--theme-color-text-lightmode: #467552; /* hct(155, 31, 45) */
	--theme-color-shadow-lightmode: #64947040;
	--theme-color-light-lightmode: #6494702b;
	--theme-color-bg-lightmode: #F1F5EF;
	--theme-color-tint-lightmode: #6494700d;
	--theme-color-primary-darkmode: #649470; /* hct(155, 31, 57) */
	--theme-color-btn-darkmode: #578763; /* hct(155, 31, 52) */
	--theme-color-btn-hover-darkmode: #649470;
	--theme-color-text-darkmode: #9FD3AA; /* hct(155, 31, 80) */
	--theme-color-light-darkmode: #558B642b; /* hct(155, 34, 53), hct(155, 8, 20) on surface-bg */
	--theme-color-shadow-darkmode: #558B6440;
}
.theme.theme-basic-info,
.theme.theme-charcoal {
	--theme-color-primary-lightmode: #757575;
	--theme-color-btn-lightmode: #757575;
	--theme-color-btn-hover-lightmode: #686868;
	--theme-color-text-lightmode: #4B4B4B;
	--theme-color-shadow-lightmode: #75757540;
	--theme-color-light-lightmode: #7575752b;
	--theme-color-bg-lightmode: #F4F4F4;
	--theme-color-tint-lightmode: #7575750d;
	--theme-color-primary-darkmode: #757575;
	--theme-color-btn-darkmode: #757575;
	--theme-color-btn-hover-darkmode: #848484;
	--theme-color-text-darkmode: #C6C6C6;
	--theme-color-light-darkmode: #7575752b;
	--theme-color-shadow-darkmode: #75757540;
}
.theme.theme-labs {
	--theme-color-primary-lightmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-lightmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-hover-lightmode: #008073; /* hct(185, 44, 48) */
	--theme-color-text-lightmode: #006A60; /* hct(185, 44, 40) */
	--theme-color-shadow-lightmode: #00968840;
	--theme-color-light-lightmode: #0096882b;
	--theme-color-bg-lightmode: #eef7f6;
	--theme-color-tint-lightmode: #0096880d;
	--theme-color-primary-darkmode: #089A8B; /* hct(185, 44, 57) */
	--theme-color-btn-darkmode: #008C7E; /* hct(185, 44, 52) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #82D5C8; /* hct(185, 36, 80) */
	--theme-color-light-darkmode: #3F92862b; /* hct(185, 35, 55), hct(185, 10, 20) on surface-bg */
	--theme-color-shadow-darkmode: #3F928640;
}
/* Same as alcohol / encounter theme with slight tweaks (darker to give a more premium vibe) */
.theme.theme-upgrade {
	--theme-color-primary-lightmode: var(--upgrade-color-primary);
	--theme-color-btn-lightmode: var(--upgrade-color-btn);
	--theme-color-btn-hover-lightmode: var(--upgrade-color-btn-hover);
	--theme-color-text-lightmode: var(--upgrade-color-text);
	--theme-color-shadow-lightmode: var(--upgrade-color-shadow);
	--theme-color-light-lightmode: var(--upgrade-color-light);
	--theme-color-bg-lightmode: var(--upgrade-color-bg);
	--theme-color-tint-lightmode: var(--upgrade-color-tint);
	--theme-color-primary-darkmode: var(--upgrade-color-primary);
	--theme-color-btn-darkmode: var(--upgrade-color-btn);
	--theme-color-btn-hover-darkmode: var(--upgrade-color-btn-hover);
	--theme-color-text-darkmode: var(--upgrade-color-text);
	--theme-color-light-darkmode: var(--upgrade-color-light);
	--theme-color-shadow-darkmode: var(--upgrade-color-shadow);
}
.theme.theme-cycle {
	--theme-color-primary-lightmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-lightmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-hover-lightmode: #B26480; /* hct(359, 40, 52) */
	--theme-color-text-lightmode: #904762; /* hct(259, 40, 40) */
	--theme-color-shadow-lightmode: #cc799640;
	--theme-color-light-lightmode: #cc79962b;
	--theme-color-bg-lightmode: #F8F2F4;
	--theme-color-tint-lightmode: #cc79960d;
	--theme-color-primary-darkmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-darkmode: #C1708D; /* hct(359, 40, 57) */
	--theme-color-btn-hover-darkmode: #CD7A98; /* hct(359, 40, 61) */
	--theme-color-text-darkmode: #FFB0CA; /* hct(359, 40, 80) */
	--theme-color-light-darkmode: #D4608D2b; /* hct(359. 57, 56), hct(259, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #D4608D40;
}
.theme.theme-covid,
.theme.theme-insurance {
	--theme-color-primary-lightmode: #CF8533; /* hct(64, 45, 62) */
	--theme-color-btn-lightmode: #C9802E; /* hct(64, 45, 60) */
	--theme-color-btn-hover-lightmode: #BD7624; /* hct(64, 45, 56) */
	--theme-color-text-lightmode: #8B5000; /* hct(64, 45, 40) */
	--theme-color-shadow-lightmode: #e6994540;
	--theme-color-light-lightmode: #e699452b;
	--theme-color-bg-lightmode: #F9F3EE;
	--theme-color-tint-lightmode: #e699450d;
	--theme-color-primary-darkmode: #C07825; /* hct(64, 45, 57) */
	--theme-color-btn-darkmode: #C07825; /* hct(64, 45, 57) */
	--theme-color-btn-hover-darkmode: #CC8331; /* hct(64, 45, 61) */
	--theme-color-text-darkmode: #E39C53; /* hct(64, 40, 80) */
	--theme-color-light-darkmode: #A575452b; /* hct(64, 29, 53), hct(84, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #A5754540;
}
.theme.theme-condition {
	--theme-color-primary-lightmode: #AA8C5C; /* hct(80, 24, 60) */
	--theme-color-btn-lightmode: #AA8C5C; /* hct(80, 24, 60) */
	--theme-color-btn-hover-lightmode: #9F8253; /* hct(80, 24, 56) */
	--theme-color-text-lightmode: #866B3E; /* hct(80, 24, 47) */
	--theme-color-shadow-lightmode: #b6976540;
	--theme-color-light-lightmode: #b697652b;
	--theme-color-bg-lightmode: #F6F3F0;
	--theme-color-tint-lightmode: #b697650d;
	--theme-color-primary-darkmode: #AC987D; /* hct(80, 14, 64) */
	--theme-color-btn-darkmode: #8B7A60; /* hct(80, 14, 52) */
	--theme-color-btn-hover-darkmode: #9F8253; /* hct(80, 14, 56) */
	--theme-color-text-darkmode: #D9C3A6; /* hct(80, 14, 80) */
	--theme-color-light-darkmode: #987F592b; /* hct(80, 20 55), hct(80, 4, 20) on surface-bg */
	--theme-color-shadow-darkmode: #987F5940;
}
.theme.theme-kcp,
.theme.theme-allergy {
	--theme-color-primary-lightmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-btn-lightmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-btn-hover-lightmode: #B9514E; /* hct(22, 51, 48) */
	--theme-color-text-lightmode: #A03E3C; /* hct(2, 51, 40) */
	--theme-color-shadow-lightmode: #d4666240;
	--theme-color-light-lightmode: #d466622b;
	--theme-color-bg-lightmode: #F9F2F2;
	--theme-color-tint-lightmode: #d466620d;
	--theme-color-primary-darkmode: #D56863; /* hct(22, 51, 57) */
	--theme-color-btn-darkmode: #B64F4C; /* hct(22, 51, 47) */
	--theme-color-btn-hover-darkmode: #C65B57; /* hct(22, 51, 52) */
	--theme-color-text-darkmode: #FFB3AF; /* hct(22, 40, 80) */
	--theme-color-light-darkmode: #B1726E2b; /* hct(22, 29, 55), hct(22, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B1726E40;
}
.theme.theme-procedure {
	--theme-color-primary-lightmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-btn-lightmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-btn-hover-lightmode: #A75B3B; /* hct(40, 40, 47) */
	--theme-color-text-lightmode: #924A2C; /* hct(40, 40, 40) */
	--theme-color-shadow-lightmode: #be605e40;
	--theme-color-light-lightmode: #be605e2b;
	--theme-color-bg-lightmode: #F9F2F0;
	--theme-color-tint-lightmode: #be605e0d;
	--theme-color-primary-darkmode: #C67352; /* hct(40, 40, 57) */
	--theme-color-btn-darkmode: #A75B3B; /* hct(40, 40, 47) */
	--theme-color-btn-hover-darkmode: #B66746; /* hct(40, 40, 52) */
	--theme-color-text-darkmode: #FEB599; /* hct(40, 30, 80) */
	--theme-color-light-darkmode: #B172592b; /* hct(40, 30, 54), hct(40, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B1725940;
}
.theme.theme-custom,
.theme.theme-event,
.theme.theme-lifestyle {
	--theme-color-primary-lightmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-lightmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-hover-lightmode: #6779BA; /* hct(274, 40, 52) */
	--theme-color-text-lightmode: #495B99; /* hct(274, 40, 40) */
	--theme-color-chart-lightmode: #6274B4; /* hct(274, 40, 50) */
	--theme-color-shadow-lightmode: #798bcc40;
	--theme-color-light-lightmode: #798bcc2b;
	--theme-color-bg-lightmode: #F1F4F9;
	--theme-color-tint-lightmode: #798bcc0d;
	--theme-color-primary-darkmode: #7F8EC8; /* hct(274, 35, 60) */
	--theme-color-btn-darkmode: #7486C8; /* hct(274, 40, 57) */
	--theme-color-btn-hover-darkmode: var(--theme-color-primary-darkmode);
	--theme-color-text-darkmode: #B5C4FF; /* hct(274, 35, 80) */
	--theme-color-chart-darkmode: #8698DB; /* hct(274, 40, 64) */
	--theme-color-light-darkmode: #6980D02b; /* hct(274, 47, 55), hct(274, 12, 20) on surface-bg */
	--theme-color-shadow-darkmode: #6980D040;
}
.theme.theme-poop {
	--theme-color-primary-lightmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-lightmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-hover-lightmode: #936058; /* hct(27, 25, 46) */
	--theme-color-text-lightmode: #83524A; /* hct(27, 25, 40) */
	--theme-color-shadow-lightmode: #9e696140;
	--theme-color-light-lightmode: #9e69612b;
	--theme-color-bg-lightmode: #F7F3F2;
	--theme-color-tint-lightmode: #9e69610d;
	--theme-color-primary-darkmode: #B37B72; /* hct(27, 25, 57) */
	--theme-color-btn-darkmode: #9e6961; /* hct(27, 25, 50) */
	--theme-color-btn-hover-darkmode: #AA736B; /* hct(27, 25, 54) */
	--theme-color-text-darkmode: #EFBAB4; /* hct(27, 20, 80) */
	--theme-color-light-darkmode: #B772662b; /* hct(28, 32, 55), hct(38, 6, 20) on surface-bg */
	--theme-color-shadow-darkmode: #B7726640;
}
.darkmode .theme {
	--theme-color-primary: var(--theme-color-primary-darkmode);
	--theme-color-btn: var(--theme-color-btn-darkmode);
	--theme-color-btn-hover: var(--theme-color-btn-hover-darkmode);
	--theme-color-text: var(--theme-color-text-darkmode);
	--theme-color-chart: var(--theme-color-chart-darkmode);
	--theme-color-shadow: var(--theme-color-shadow-darkmode);
	--theme-color-light: var(--theme-color-light-darkmode);
	--theme-color-bg: var(--chip-bg);
}
:root {
	--page-max-width: 1024px;
	--section-padding: 64px;
}
.page-header {
	display: flex;
	align-items: center;
}
.page-header.dark .header-guava-name {
	color: #fff;
}
.page-header.dark .header-guava-logo circle {
	stroke: #fff;
}
.page-header.dark .header-guava-logo path {
	fill: #fff;
}
.section {
	padding-top: var(--section-padding);
	padding-bottom: var(--section-padding);
}
.container {
	--container-padding: 25px;
	position: relative;
	max-width: var(--page-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}
.layout-row {
	display: flex;
	align-items: center;
}
.layout-row.gap-lrg {
	column-gap: 64px;
	row-gap: 24px; /* For mobile flex wrap */
}
.layout-col-2 {
	width: calc(2/12 * 100%);
}
.layout-col-3 {
	width: calc(3/12 * 100%);
}
.layout-col-4 {
	width: calc(4/12 * 100%);
}
.layout-col-6 {
	width: calc(6/12 * 100%);
}
.layout-col-8 {
	width: calc(8/12 * 100%);
}
.layout-col-10 {
	width: calc(10/12 * 100%);
}
.section-title-wrap {
	margin-bottom: 80px;
}
.section-title {
	font-weight: 600;
	font-size: 40px;
	margin-bottom: 20px;
}
h3.section-title {
	font-size: 32px;
	margin-bottom: 15px;
}
h4.section-title {
	font-size: 22px;
	margin-bottom: 15px;
}
.section-subtitle {
	font-size: 20px;
	margin-bottom: 25px;
}
h3.section-subtitle {
	font-size: 24px;
}
.margin-bottom {
	margin-bottom: 15px !important;
}
.margin-bottom-lrg {
	margin-bottom: 45px !important;
}
.paragraph-header {
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 5px;
}
.paragraph-header.lrg {
	font-size: 20px;
	padding-bottom: 15px;
}
.font-medium {
	font-size: 18px;
}
.img-center {
	display: flex;
	justify-content: center;
}
.img-center img {
	max-width: 100%;
}
.logo-banner {
	--logo-banner-shadow: 0 42px 30px -20px rgba(1, 67, 6, 0.25), 0 30px 20px -20px rgba(1, 67, 6, 0.4);
	position: relative;
	overflow: hidden;
	background: #5cbb5f;
	padding: 60px;
	text-align: center;
	border-radius: 16px;
	color: #fff;
	margin: 60px 0 100px;
	box-shadow: var(--logo-banner-shadow);
}
.logo-banner h3 {
	position: relative;
	font-weight: 600;
	margin-bottom: 40px;
}
.logo-banner .btn {
	position: relative;
	--btn-color: #215822;
	--btn-color-hover: #174418;
}
.logo-banner-logo {
	position: absolute;
	width: 300px;
	left: -109px;
	bottom: -178px;
	opacity: 0.1;
}

.info-page {
	padding-bottom: var(--section-padding);
}
.info-header {
	padding-bottom: 0.25em;
	margin: 1em 0;
	border-bottom: 1px solid var(--border-color);
}
.info-paragraph {
	margin: 10px 0 20px;
}

.info-section-card {
	border-radius: 32px;
	--container-padding: 55px;
	margin-top: 60px;
	margin-bottom: 60px;
	padding-top: 40px;
	padding-bottom: 40px;
	width: calc(100% - 40px);
	overflow: hidden;
}
@media (max-width: 600px) {
	.info-section-card {
		--container-padding: 25px;
		width: calc(100% - 20px);
	}
}

.info-section-figure-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}
.info-section-figure {
	max-width: 340px;
	width: 100%;
	height: auto;
}

/* Quotes */
.quotes-wrap {
	align-items: flex-start;
}
.quote-card {
	padding: 40px;
	margin: 0 8px 16px;
	border-radius: 16px;
	background: #f9fafa;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.quote-text {
	padding: 15px 0;
	color: var(--text);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.8em;
}
.quote-author {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 20px;
	font-weight: 600;
	color: var(--text);
}
.quote-author-subtitle {
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.7;
}
.quote-author-photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
}
.quote-author-photo img {
	width: 100%;
}
.quotes-more-toggle.btn {
	display: flex;
	--btn-text: rgba(255, 255, 255, 0.8);
}
.quotes-more-toggle .quotes-less {
	display: none;
}
.quotes-more-toggle.expanded .quotes-less {
	display: block;
}
.quotes-more-toggle.expanded .quotes-more {
	display: none;
}
.quote-card-more {
	display: none;
}
.quotes-wrap.expanded .quote-card-more {
	display: block;
}
@media (max-width: 600px) {
	.quote-card {
		padding: 25px;
	}
	.quote-text {
		font-size: 15px;
	}
}

/* Video */
.video-wrap {
	--video-play-btn-color: var(--guava-green);
	--video-play-btn-hover: var(--guava-green-hover);

	display: flex;
	justify-content: center;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
}
.video-wrap:hover .video-play-btn {
	background: var(--video-play-btn-hover);
}
.video-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	cursor: pointer;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 4px 15px 2px rgba(0,0,0, 0.28);
}
.video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
.video-play-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	margin-top: -36px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--video-play-btn-color);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	z-index: 1;
	cursor: pointer;
}
.video-play-btn.sml {
	margin-top: -24px;
	width: 48px;
	height: 48px;
}
.video-play-btn.sml:after {
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 17px solid #fff;
	margin-left: 5px;
}
.video-play-btn:after {
	content: '';
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid #fff;
	margin-left: 6px;
}

@media (max-width: 720px) {
	:root {
		--section-padding: 42px;
	}
	.section-title-wrap {
		margin-bottom: 40px;
	}
	.section-title {
		font-size: 32px;
	}
	h3.section-title {
		font-size: 28px;
	}
	h4.section-title {
		font-size: 20px;
	}
	.section-subtitle {
		font-size: 18px;
		font-weight: 400;
	}
	h3.section-subtitle {
		font-size: 20px;
	}
	.layout-row {
		flex-wrap: wrap;
	}
	.layout-col-2,
	.layout-col-3,
	.layout-col-4,
	.layout-col-6,
	.layout-col-8,
	.layout-col-10 {
		width: 100%;
	}
	.info-section-figure-wrap {
		order: -1;
		max-width: 360px;
		margin: auto;
	}
	.logo-banner {
		padding: 40px;
		border-radius: 0;
		box-shadow: none;
		margin: 20px calc(-1 * var(--container-padding)) 60px;
	}
}
@media (max-width: 460px) {
	.container {
		--container-padding: 15px;
	}
}

/* Menu */
.header-links {
	margin-left: 15px;
}
.header-link {
	margin-right: 30px;
	flex-shrink: 0;
	color: var(--text);
}
.header-link:hover {
	color: var(--guava-green-text);
}
.header-menu-btn.btn {
	display: none;
	margin-left: 10px;
	margin-right: -10px;
	--btn-text: var(--logo-text);
}
.header-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	background: var(--surface-bg-24dp);
	flex-direction: column;
}
.header-menu-close.btn {
	margin-right: -10px;
	margin-left: auto;
	--btn-text: var(--logo-text);
}
.header-menu-items {
	border-top: var(--card-separator);
	padding: 25px;
	flex-grow: 1;
}
.header-menu-item {
	display: block;
	width: 100%;
	padding: 15px 0;
	color: var(--text);
	border-bottom: var(--card-separator);
}
.header-menu-signin-btns {
	display: flex;
	gap: 15px;
	padding: 15px;
}
.header-menu-signin-btns .btn {
	flex-basis: 100%;
}
@media (max-width: 951px) {
	.header-links {
		display: none;
	}
	.header-menu-btn.btn {
		display: block;
	}
	.header-menu.active {
		display: flex;
	}
}
@media (max-width: 380px) {
	.header-login {
		display: none;
	}
}

/** Footer **/
.home-footer-wrap {
	background: var(--surface-bg-muted);
	padding: 20px 0;
}
.home-footer-wrap .header-guava {
	margin-left: -4px;
}
.home-footer-links {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	margin: 20px 0 30px;
}
.home-footer-links-col {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.home-footer-link {
	color: var(--text);
	font-size: 15px;
}
.home-footer-link:hover {
	text-decoration: underline;
}
.home-footer-links-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	--btn-text: var(--chart-blue-dark);
}
.home-footer-social {
	display: flex;
	align-items: center;
	gap: 8px;
}
.home-footer-social-icon {
	display: block;
	width: 28px;
	height: 28px;
	fill: var(--guava-green);
}
.home-footer-social-icon:hover {
	fill: var(--guava-green-hover);
}
.home-footer-email {
	margin-left: 8px;
}

/** Scroll Indicator **/
.home-scroll-btn-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	padding-bottom: 15px;
	transition: opacity 500ms ease-in-out;
}
.home-scroll-btn {
	--btn-color: rgba(0,0,0,0.8);
	--btn-color-hover: rgba(0,0,0,0.9);
	--btn-text: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.home-scroll-btn-wrap.hidden {
	opacity: 0;
	pointer-events: none;
}
@media(min-width: 500px) {
	.home-scroll-btn-wrap {
		display: none;
	}
}

/* Privacy Card */
.info-privacy-card-btn.btn {
	--btn-text: #4466b9;
	--btn-color: rgba(68, 102, 185, 0.15);
	--btn-color-hover: rgba(68, 102, 185, 0.2);
}
@media (max-width: 720px) {
	.info-privacy-card-text {
		order: 2;
	}
	.info-privacy-card-text .section-title {
		font-size: 24px;
	}
	.info-privacy-card-text .section-subtitle {
		text-align: left;
	}
	.info-privacy-card-lock-icon {
		text-align: center;
	}
	.info-privacy-card-lock-icon svg {
		max-width: 160px;
	}
}
:root {
	--html-bg: #EDF2F1;
	--portal-surface-bg: #FDFEFD;
	--portal-surface-shadow: 0 0 3px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.08);
	--page-padding: 10px;
}
.darkmode:root {
	--html-bg: #0F1515;
	--portal-surface-bg: #2B2F2F; /* same lightness as surface-bg-8dp */
	--portal-surface-shadow: none;
}
#insights-hub-page {
	max-width: var(--page-max-width);
	margin: auto;
	padding: 0 var(--page-padding) 60px;
	min-height: 800px;
}
.insights-hub-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.insights-hub-page-back {
	font-size: 16px;
	margin: 15px 5px;
	--btn-text-over-white: var(--text);
}
.insights-hub-beta {
	position: absolute;
}
.insights-hub-title {
	position: relative;
	text-align: center;
	padding-top: 40px;
}
.insights-hub-title-subtitle {
	font-size: 18px;
}
.insights-hub-title-filtered {
	text-align: center;
	padding-top: 20px;
}
.insights-hub-title-filtered-subtitle {
	font-size: 16px;
	margin-top: 10px;
}
.insights-hub-title-filtered-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 24px;
}
.insights-hub-title-filtered-icon,
.insights-hub-title-filtered-label .daily-log-type-icon {
	width: 28px;
	height: 28px;
	--btn-text: var(--theme-color-primary);
}
.insights-hub-title-stats {
	font-size: 14px;
	margin-top: 10px;
	color: var(--text-muted);
}
.insights-hub-title-join {
	margin-top: 12px;
}
.insights-hub-page-feedback {
	text-align: center;
	margin-bottom: 25px;
}

.insights-hub-content {
	max-width: 800px; /* max width for 2 correlation cards side by side */
	margin: auto;
}
.insights-hub-search {
	margin: 35px auto 20px;
	max-width: 600px;
}
.insights-hub-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 calc(-1 * var(--page-padding)) 15px;
	padding: 0 15px;
	min-height: 35px;
	overflow-x: auto;
}
.insights-hub-filters::-webkit-scrollbar {
	display: none;
}
.insights-hub-filter-crumb,
.text-btn.insights-hub-filter-crumb {
	min-width: 32px;
	font-size: 16px;
	flex-shrink: 0;
}
.insights-hub-filter {
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
	border: var(--surface-border);
	flex-shrink: 0;
}
.insights-hub-filter-separator {
	border-right: var(--card-separator);
	height: 20px;
	margin: 0 5px 0 4px;
}
.insights-hub-filter-suggest {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	gap: 8px;
	border-radius: 6px;
	flex-shrink: 0;
}
.insights-hub-filter-suggest .daily-log-type-icon {
	width: 17px;
	height: 17px;
}
.insights-hub-footer-description {
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: 0 calc(var(--page-padding) + 5px) 60px;
	font-size: 15px;
}
.insights-hub-footer-condition-description {
	border-bottom: var(--card-separator);
	padding-bottom: 25px;
	margin-bottom: 25px;
}
.insights-hub-footer-label {
	margin-bottom: 10px;
	font-weight: 600;
}
.insights-hub-footer-resources {
	margin: 0;
}
.insights-hub-footer-resources li {
	margin-top: 10px;
}

/* Home */
.insights-hub-see-all-btn-wrap {
	margin-top: -10px;
	text-align: center;
}
.insights-hub-see-all-btn {
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
	border: var(--surface-border);
}
.insights-hub-section-header {
	font-weight: 600;
	margin: 40px 5px 15px;
}
.insights-hub-home-conditions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
	gap: 12px;
}
.insights-hub-home-condition {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
	padding: 10px;
	border-radius: var(--card-border-radius);
	min-height: 60px;
}
.insights-hub-home-condition-icon {
	width: 24px;
	height: 24px;
	--btn-text: var(--theme-color-primary);
}
.insights-hub-home-condition-label {
	font-weight: 600;
	font-size: 15px;
	text-align: left;
	flex-grow: 1;
	overflow: hidden;
}
.insights-hub-home-condition-subtitle {
	font-weight: 400;
	font-size: 13px;
	color: var(--text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.insights-hub-home-condition.more-btn {
	gap: 0.4em;
	font-weight: 600;
	--btn-text: var(--logo-text);
}

.insights-hub-home-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
	gap: 12px;
}
.insights-hub-home-category {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border-radius: var(--card-border-radius);
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
	padding: 12px 15px;
	min-height: 60px;
}
.insights-hub-home-category .daily-log-type-icon {
	width: 70px;
	height: 70px;
	padding: 20px;
	background: var(--theme-color-bg);
	border-radius: 50%;
	flex-shrink: 0;
}
.insights-hub-home-category-label {
	font-weight: 600;
	font-size: 15px;
}
.insights-hub-home-category.more-btn {
	flex-direction: row;
	gap: 0.4em;
	font-weight: 600;
	--btn-text: var(--logo-text);
}

/* Filters */
.insights-hub-filter-modal-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.insights-hub-filter-modal-subtitle {
	font-size: 14px;
	padding: 20px;
}
.insights-hub-filter-modal-row {
	display: flex;
	align-items: center;
	gap: 10px;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	width: 100%;
	padding: 10px 20px 10px 15px;
	min-height: 48px;
}
.insights-hub-filter-modal.conditions .insights-hub-filter-modal-row {
	min-height: 60px;
}
.insights-hub-filter-modal-row + .insights-hub-filter-modal-row {
	border-top: var(--card-separator);
}
.insights-hub-filter-modal-row-label {
	flex-grow: 1;
	text-align: left;
	overflow: hidden;
}
.insights-hub-filter-modal-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.insights-hub-filter-modal-row .daily-log-type-icon,
.insights-hub-filter-modal-row-icon {
	width: 20px;
	height: 20px;
	--btn-text: var(--theme-color-primary);
}
.insights-hub-filter-modal-row-check {
	--btn-text: var(--guava-green-text);
}

/* Sort */
.insights-hub-sort-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 30px 5px 15px;
}
.insights-hub-sort-header-btn .overflow-menu-btn {
	--btn-text: var(--text);
	font-size: 16px;
}
.insights-hub-sort-header-btn .overflow-menu-item-with-icon {
	--btn-text: var(--guava-green-text);
}
.insights-hub-sort-menu-disabled {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	color: var(--text-muted);
}
.insights-hub-sort-menu-disabled .lock-svg {
	font-size: 13px;
	--btn-text: var(--icon-gray);
}

/* Factor List */
.insights-hub-top-factors-card {
	border-radius: var(--card-border-radius);
	background: var(--portal-surface-bg);
	padding-bottom: 5px;
}
.insights-hub-top-factors-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 15px 15px 10px;
	color: var(--theme-color-text);
	font-weight: 600;
}
.insights-hub-top-factors-header .daily-log-type-icon {
	width: 24px;
	height: 24px;
}
.insights-hub-top-factors-header-blank {
	display: inline-block;
	width: 20px;
	height: 1.1em;
	border-bottom: 1px solid currentColor;
}
.insights-hub-top-factors-row {
	padding: 10px 17px 10px 15px; /* offset negative margin on right arrow */
	width: 100%;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	text-align: left;
}
.insights-hub-top-factors-row + .insights-hub-top-factors-row {
	border-top: var(--card-separator);
}
.insights-hub-top-factors-row-label {
	flex-grow: 1;
}
.insights-hub-top-factors-row-count {
	color: var(--text-muted);
	flex-shrink: 0;
	margin-right: 4px;
}
.btn.insights-hub-top-factors-more {
	width: 100%;
	font-size: 14px;
	padding-bottom: 5px;
}

/* Results */
.insights-hub-correlations {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	gap: 15px;
	margin: 15px auto 40px;
}
.insights-hub-correlations .insights-hub-correlation {
	box-shadow: var(--portal-surface-shadow);
	transition: box-shadow, transform 0.3s ease;
}
@media (hover: hover) {
	.insights-hub-correlations .insights-hub-correlation:hover {
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
		transform: translateY(-8px);
	}
}

/* List */
.insights-hub-correlation-list-profile {
	padding: 10px 10px 0;
	font-weight: 600;
}
.insights-hub-correlation-list-profile:not(:first-child) {
	margin-top: 15px;
}
.insights-hub-correlation-list-grid {
	background: var(--html-bg);
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	gap: 15px;
	padding: 15px;
	border-radius: var(--card-border-radius);
}
.insights-hub-correlation-list-empty {
	font-size: 16px;
	color: var(--text-muted);
	text-align: center;
	margin: 20px;
}
.insights-hub-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 100px 0 40px;
	gap: 30px;
	font-size: 16px;
	color: var(--text-muted);
}
.insights-hub-no-results-icon {
	color: var(--icon-info-gray);
	width: 60px;
	height: 60px;
}
@media (max-width: 720px) {
	.insights-hub-correlations {
		grid-template-columns: 1fr;
		max-width: 400px;
		gap: 10px;
	}
	.insights-hub-title {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.insights-hub-search {
		max-width: 400px;
	}
}
@media (max-width: 360px) {
	:root {
		--page-padding: 5px;
	}
}
@media (hover: hover) {
	.insights-hub-page-back:hover {
		--btn-text-over-white: var(--guava-green-text);
		text-decoration: none;
	}
}
.admin-header {
	display: flex;
	flex-wrap: wrap;
	background: var(--guava-green);
}
.admin-header svg {
	width: 25px;
	height: 25px;
	vertical-align: top;
}
.admin-header a {
	padding: 3px 8px;
	color: #fff;
	font-weight: bold;
}
.admin-header a:hover {
	opacity: 0.8;
}
.admin-header a.active {
	border-bottom: 1px solid #fff;
}
.modal > .card.alert-modal {
	width: 360px;
	background: var(--surface-bg-24dp);
}
.alert-modal .toast {
	box-shadow: none;
	border-radius: var(--card-border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	display: flex;
	max-width: none;
}
.alert-modal .form-btns {
	align-items: stretch;
}
.alert-modal .btn {
	width: 100%;
}
.modal {
 	position: fixed;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
	background: rgba(0,0,0,0.7);
	overflow-y: auto;
	padding-top: 56px; /* for the header */
}
.darkmode .modal {
	background: rgba(0,0,0,0.65);
}
.modal.modal-no-overlay,
.darkmode .modal.modal-no-overlay {
	background: none;
}
.modal-header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 56px;
	padding: 0 8px;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	color: #fff;
	z-index: 1;
}
.darkmode .modal-header {
	background: var(--surface-bg-8dp);
}
.modal-title {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 10px;
	flex-grow: 1;
}
.modal-icons {
	display: flex;
}
.modal > .card {
	width: 500px;
	max-width: calc(100% - 10px); /* need to utilize as much phone width as we can, they can be pretty skinny */
	margin: 20px auto;
	background: var(--surface-bg-12dp);
	box-shadow: var(--overlay-card-shadow);
}
.modal .card-header {
	padding: 15px 20px;
}
.modal .card-section {
	padding: 20px;
}
.toast-wrap {
	position: fixed;
	z-index: var(--toast-z-index);
	width: 100%;
	top: 20px;
	left: 0;
	pointer-events: none;
	text-align: center;
	transform: translateY(-30px);
	opacity: 0;
	transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.toast-wrap.show {
	opacity: 1;
	transform: translateY(0);
}
.toast-wrap.hide {
	opacity: 0;
	transform: translateY(-30px);
}
.toast {
	display: inline-flex;
	align-items: center;
	max-width: 90%;
	padding: 8px 15px;
	border-radius: 8px;
	font-size: 20px;
	text-align: left;
	background: var(--toast-bg);
	color: var(--toast-text);
	stroke: var(--toast-icon-color);
	box-shadow: 0 0 6px var(--toast-icon-color);
}
.darkmode .toast {
	background: var(--surface-bg-24dp);
	color: var(--text);
	border: 1px solid var(--toast-icon-color);
	box-shadow: none;
}
.toast-icon {
	width: 30px;
	margin-right: 10px;
	fill: none;
	stroke-width: 10px;
	flex-shrink: 0;
}
.toast-success {
	--toast-bg: #edf7ed;
	--toast-text: var(--dark-green-text);
	--toast-icon-color: #4caf50;
}
.toast-error {
	--toast-bg: #fdecea;
	--toast-text: #611a15;
	--toast-icon-color: #f44336;
}
.toast-info {
	--toast-bg: #e8f4fd;
	--toast-text: #0d3c61;
	--toast-icon-color: #2196f3;
}
.toast-warning {
	--toast-bg: #fef4e5;
	--toast-text: #663c00;
	--toast-icon-color: #ff9800;
}
@media (max-width: 600px) {
	.toast {
		font-size: 16px;
	}
}
.insights-hub-correlation {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--portal-surface-bg);
}
.insights-hub-correlation-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 25px;
	text-align: left;
	font-size: 16px;
	padding: 15px;
	width: 100%;
	height: 100%;
}
.insights-hub-correlation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.insights-hub-correlation-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--theme-color-text);
	font-size: 17px;
	font-weight: 600;
}
.insights-hub-correlation-input {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-size: 14px;
	margin-top: 4px;
}
.insights-hub-correlation-input .daily-log-type-icon {
	width: 16px;
	height: 16px;
	margin-top: -2px;
	--icon-fill: var(--theme-color-text);
}
.insights-hub-correlation-input-bold {
	font-weight: 600;
	color: var(--theme-color-text);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.insights-hub-correlation-note {
	color: var(--text-muted);
	font-style: italic;
	font-size: 14px;
	margin-bottom: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.insights-hub-correlation-property {
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	font-size: 14px;
}
.insights-hub-correlation-heart {
	position: absolute;
	right: 7px;
	bottom: 7px;
	display: flex;
	align-items: center;
}
.insights-hub-correlation-heart-count {
	font-size: 14px;
	color: var(--text-muted);
}
.insights-hub-correlation-heart-count.used {
	color: var(--color-vitals);
}
.insights-hub-correlation .icon-btn.heart-btn {
	width: 36px;
	height: 36px;
}
.insights-hub-correlation-heart-popup-text {
	position: absolute;
	bottom: 10px;
	right: 10px;
	opacity: 0;
	white-space: nowrap;
	pointer-events: none;
	color: var(--color-vitals);
	font-size: 13px;
	animation: slide-up-fade 1.5s ease-out forwards;
}
@keyframes slide-up-fade {
	30% {
		opacity: 1;
		transform: translateY(-20px); /* Slide up */
	}
	70% {
		opacity: 1;
		transform: translateY(-20px); /* Stay in place */
	}
	100% {
		opacity: 0; /* Fade out */
		transform: translateY(-20px); /* Stay in place */
	}
}

.insights-hub-detail-property {
	color: var(--text-muted);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.insights-hub-detail-property .btn-svg {
	margin-top: 0.15em;
}
.insights-hub-detail-conditions-wrap {
	overflow: hidden;
}
.insights-hub-detail-conditions {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}
.insights-hub-detail-condition {
	display: inline;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	border: 1px solid;
	padding: 1px 8px;
	border-radius: 3em;
	font-size: 15px;
}
.insights-hub-detail-conditions-toggle {
	margin-top: 15px;
}
.insights-hub-detail-property:not(:last-child) {
	margin-bottom: 15px;
}
.insights-hub-detail-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin-bottom: 10px;
}
.insights-hub-detail-subtitle {
	display: flex;
	align-items: center;
	gap: 10px;
}
.insights-hub-detail-diff {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin-left: -3px; /* to offset the fact that the arrows have a bit of spacing from tge edge of the svg */
}
.insights-hub-detail-input {
	color: var(--theme-color-text);
	font-weight: 600;
}
.insights-hub-detail-note {
	color: var(--text-muted);
	font-style: italic;
	margin: 15px 0;
}
.insights-hub-detail-metadata {
	margin-top: 30px;
}
.insights-hub-detail-reaction {
	margin-top: 25px;
	margin-left: -10px;
	display: flex;
	align-items: center;
}
.insights-hub-detail-reaction .heart-btn:not(.selected) {
	--btn-text: var(--text);
}
.insights-hub-detail-reaction-text {
	font-size: 16px;
	cursor: pointer;
}
.insights-hub-detail-reaction-text.used {
	color: var(--color-vitals);
}
.data-entry-form .number-input + .select,
.data-entry-form .number-input-wrap + .select {
	margin-left: 10px;
}
.data-entry-form-number-wrap {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 6px;
}
.data-entry-form textarea {
	height: 4em;
}
.data-entry-form-generated {
	color: var(--text-muted);
	margin-top: 15px;
}
.data-entry-form-unhide-input {
	margin-top: 20px;
}
.data-entry-add-btn.btn {
	font-size: 1.2em;
	padding: 0.6em 1em;
	margin: 0 auto;
	min-width: 140px;
}

.data-entry-form-linked-records {
	padding: 8px 12px;
	margin: 15px -8px;
	background: var(--theme-color-light);
	border-radius: 8px;
}
.data-entry-form-linked-records-label {
	font-size: 14px;
	margin-bottom: 5px;
}
.data-entry-form-linked-records-subtext {
	font-size: 12px;
}
.data-entry-form-active-status {
	padding: 6px 8px;
	margin: 15px -8px 30px;
	border: 1px solid var(--theme-color-primary, var(--border-color));
	border-radius: 8px;
}
.data-entry-form-status-active-status-confirm {
	font-size: 14px;
	font-weight: 600;
	color: var(--theme-color-text);
	padding: 5px 8px;
}
.data-entry-form-active-status-radio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.data-entry-form-active-status-more {
	font-size: 14px;
}
.data-entry-form .journal-text {
	height: 8em;
	border-radius: 15px;
	padding: 0.8em 1.2em;
	margin: 0 -8px; /* align with DateTimeForm */
	width: calc(100% + 16px);
}
.insurance-parsing {
	position: relative;
}
.insurance-parsing .ai-loading {
	position: absolute;
	top: -20px;
	right: 0;
	pointer-events: none;
}
.multiselect-suggest-entry {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.multiselect-suggest-entry.added {
	opacity: 0.5;
}
.multiselect-suggest-label {
	padding: 5px 10px 5px 0;
}
.multiselect-subtitle {
	font-size: 0.8em;
	color: var(--text-muted);
}
.multiselect-icon-space {
	color: var(--icon-info-gray);
	flex: 0 0 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.multiselect-icon-space .icon-check {
	border: none;
}
.multiselect-suggest-entry.new-item {
	font-size: 14px;
	color: var(--text-muted);
	font-weight: 600;
}
.multiselect-search-bar .search-bar {
	--search-input-height: 40px;
	--search-input-icon-margin: 10px;
}
.multiselect-search-bar .search-input {
	font-size: 16px;
}
.multiselect-search-bar .search-input {
	border-radius: 4px;
}
.multiselect-search-error-text {
	position: absolute;
	background: var(--btn-red);
	border: 1px solid var(--btn-red);
	border-radius: 8px;
	padding: 2px 8px;
	font-size: 12px;
	margin-top: 6px;
	color: #fff;
	z-index: 1;
}
.multiselect-search-error-text:before {
	content: '';
	position: absolute;
	margin-top: -7px;
	top: 0;
	left: 10%;
	border-bottom: solid 6px var(--btn-red);
	border-left: solid 4px transparent;
	border-right: solid 4px transparent;
}
.multiselect-search-bar .search-suggests {
	border-radius: 0 0 4px 4px;
	margin-top: -1px;
}
.multiselect-list {
	margin-top: 10px;
}
.multiselect-item {
	padding: 5px;
	font-size: 15px;
	display: flex;
	align-items: center;
	column-gap: 5px;
	margin-bottom: 5px;
}
.multiselect-item-left {
	flex-grow: 1;
	font-size: 14px;
}
.multiselect-item-remove {
	flex: 0 0 30px;
	margin-left: auto;
	display: flex;
	justify-content: end;
}
.multiselect-del-btn {
	width: 30px;
	height: 30px;
	padding: 5px;
	margin-right: -5px;
}

.search-bar {
	--search-input-height: 50px;
	--search-input-border-radius: calc(var(--search-input-height) / 2);
	--search-input-icon-size: 24px;
	--search-input-icon-margin: 15px;
	--search-input-padding-left: calc(var(--search-input-icon-size) + var(--search-input-icon-margin) * 2);
	--search-input-unfocused-bg: var(--chip-bg);
	--search-input-unfocused-border: none;
	--search-input-unfocused-placeholder: var(--text-muted);
	display: flex;
	align-items: center;
	position: relative;
}
.search-input {
	width: 100%;
	height: var(--search-input-height);
	border-radius: var(--search-input-border-radius);
	font-size: 18px;
	padding-left: var(--search-input-padding-left);
	transition-property: box-shadow;
	-webkit-appearance: none; /* prevent ios safari from forcing inset shadow and border-radius */
}
.search-bar:not(.has-suggestions) .search-input:not(:focus) {
	background: var(--search-input-unfocused-bg);
	border: var(--search-input-unfocused-border);
	--input-placeholder: var(--search-input-unfocused-placeholder);
}
.search-icon {
	position: absolute;
	margin-left: var(--search-input-icon-margin);
	--btn-text: var(--text-muted);
	margin-top: 1px; /* To align with the input text better */
	width: var(--search-input-icon-size);
	height: var(--search-input-icon-size);
}
.search-input.num-btns-1 {
	padding-right: calc((var(--search-input-icon-size) + 8px) + var(--search-input-icon-margin) - 2px + 4px);
}
.search-input.num-btns-2 {
	padding-right: calc((var(--search-input-icon-size) + 8px) * 2 + var(--search-input-icon-margin) - 2px + 4px);
}
.search-bar-icon-btns {
	position: absolute;
	right: calc(var(--search-input-icon-margin) - 2px);
	display: flex;
	align-items: center;
}
.search-bar-icon-btn {
	width: calc(var(--search-input-icon-size) + 8px);
	height: calc(var(--search-input-icon-size) + 8px);
	padding: 7px;
}
.search-bar.has-suggestions .search-input {
	border-color: var(--input-focus-border);
	border-bottom-color: transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	outline: none;
	box-shadow: 0 1px 6px var(--input-focus-shadow);
}
.search-bar.has-suggestions {
	z-index: var(--search-suggest-z-index);
}
.search-suggests {
	position: absolute;
	top: 100%;
	width: 100%;
	margin-top: -1px;
	background: var(--input-bg);
	border: 1px solid var(--input-focus-border);
	border-top: 0;
	border-radius: 0 0 var(--search-input-border-radius) var(--search-input-border-radius);
	padding: 5px 0 10px ;
	box-shadow: 0 4px 6px var(--input-focus-shadow);
	overflow: hidden;
	z-index: var(--search-suggest-z-index);
}
.darkmode .search-bar.has-suggestions .search-input,
.darkmode .search-suggests {
	background: var(--surface-bg-12dp);
	box-shadow: none;
}
.search-suggests::before {
	content: '';
	border-top: 1px solid var(--border-color);
	display: inline-block;
	position: absolute;
	left: 15px;
	right: 15px;
	top: 0;
}
.search-suggest {
	width: 100%;
	text-align: left;
	position: relative;
}
.search-suggest.selected {
	background: var(--hover-gray);
}
.search-suggest-overlay {
	position: fixed;
	width: 100vh;
	height: 100vh;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--search-suggest-z-index);
}

@media (max-width: 900px) {
	.search-bar {
		--search-input-padding-left: calc(var(--search-input-icon-size) + var(--search-input-icon-margin) * 1.7);
	}
	.search-input {
		font-size: 16px;
	}
}
.date-input {
	--date-input-width: 185px; /* just enough to perfectly fit all placeholder text plus time input and fit on 375px phone */
	display: inline-flex;
	width: var(--date-input-width);
	font-size: 15px;
	line-height: 1.4;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	color: var(--input-placeholder);
	background: var(--input-bg);
	transition: var(--input-focus-transition);
	position: relative;
	flex-shrink: 0;
}
.date-input.no-picker {
	width: calc(var(--date-input-width) - 35px);
}
.date-input.lrg {
	--date-input-width: 265px;
	font-size: 1.5em;
}
.date-input.lrg .date-input-input {
	font-size: 1em;
}
.date-input.active {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
	color: var(--input-primary-text);
}
.date-input.disabled {
	pointer-events: none;
	background: var(--input-disabled-bg);
}

.date-input-input {
	padding: 0.4em 0.3em;
	border: none;
	width: 0;
	flex-grow: 1;
	font-size: var(--input-font-size);
	font-family: var(--font-stack);
	line-height: 1.4;
	color: var(--text);
	background: transparent;
	border-radius: 4px; /* otherwise it overlaps slightly outside of .date-input at the corners */
}
.date-input-input:disabled {
	color: var(--input-disabled);
}
input + .date-input-input {
	padding-left: 0.6em;
}
.date-input-input.year-input {
	flex-grow: 1.7;
	padding-right: 0;
}
.date-input-input:focus {
	outline: none;
}
.date-input-input::placeholder {
	color: var(--input-placeholder);
}
.date-input-separator {
	user-select: none;
	-webkit-user-select: none;
}
.date-input-picker-btn.btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
}
.date-input .date-picker {
	margin-left: -1px; /* account for border */
}
.date-input .date-picker.align-right {
	margin-right: -1px; /* account for border */
}
.date-picker {
	--day-width: 40px;
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	margin-top: 5px;
	background: var(--surface-bg-24dp);
	border: var(--card-separator);
	border-radius: 5px;
	padding: 10px;
	width: 302px; /* 7 * 40px + 20px padding + 2px border */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	font-size: initial; /* avoid bigger text within lrg date-input */
}
.date-picker.align-right {
	left: auto;
	right: 0;
}
.date-picker-nav {
	display: flex;
}
.date-picker-year-btn.btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
	position: relative;
}
.date-picker-year-btn .select {
	position: absolute;
	opacity: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.date-picker-prev-btn {
	margin-left: auto;
}
.date-picker-day-labels,
.date-picker-days {
	display: flex;
	flex-wrap: wrap;
}
.date-picker-day-label,
.date-picker-day {
	width: var(--day-width);
	height: var(--day-width);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	--btn-color: transparent;
}
.date-picker-day-label {
	color: var(--text-muted);
}
.date-picker-day.today {
	border: 1px solid var(--input-focus-border);
}
.datetime-input-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}
.datetime-input-time-ago {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 5px;
	font-size: 0.8em;
	color: var(--text-muted);
}

.datetime-tz-display {
	margin-top: 5px;
	font-size: 12px;
	color: var(--text-muted);
}
.checkbox {
	--checkbox-fill: var(--icon-gray);
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	justify-content: center; /* for centered spinner */
	text-align: left;
	line-height: 1.6;
}
.darkmode .checkbox.checked:not(.primary) {
	--checkbox-fill: var(--btn-color);
}
.checkbox.primary {
	--checkbox-fill: var(--theme-color-primary);
}
.checkbox svg {
	flex-shrink: 0;
	width: 1.3em;
	height: 1.3em;
	margin: 0.15em 8px auto 0;
	border: 2px solid var(--checkbox-fill);
	background: var(--input-bg);
	border-radius: 6px;
	transition: var(--input-focus-transition);
	padding: 1px;
}
.checkbox:focus-visible {
	box-shadow: none; /* override button */
}
.checkbox:focus-visible svg {
	box-shadow: 0 0 0 0.2rem var(--guava-green-shadow);
}
.checkbox path {
	fill: none;
	stroke: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 2;
}
.checkbox.checked svg {
	background: var(--checkbox-fill);
	border-width: 0;
	padding: 3px;
}
.checkbox.checked path {
	stroke: #fff;
}
.checkbox.loading,
.checkbox.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.checkbox.right {
	flex-direction: row-reverse;
}
.checkbox .spinner {
	width: 24px;
	height: 24px;
	position: absolute;
	--spinner-color: currentColor;
}
.radio {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.radio:focus {
	outline: none;
}
.radio:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.radio .spinner {
	position: absolute;
	width: 25px;
	height: 25px;
	left: 50%;
	top: 50%;
	margin-left: -12.5px;
	margin-top: -12.5px;
	--spinner-color: currentColor;
}
.radio .btn {
	min-width: 34px; /* width of the widest single character with our font, so 1-character buttons are consistent */
}
.radio.full-width .btn {
	width: 100%;
	justify-content: start;
}
.radio.toggle {
	background: var(--chip-bg);
	padding: 3px;
	border-radius: 32px;
	gap: 0;
}
.radio.toggle .btn {
	border-radius: 32px;
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
	--btn-text: var(--text-muted);
}
.radio.toggle .btn.primary {
	--btn-text: var(--theme-color-text);
	--btn-color: var(--surface-bg);
	--btn-color-hover: var(--surface-bg);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.darkmode .radio.toggle {
	background: rgba(0, 0, 0, 0.4);
}
.darkmode .radio.toggle .btn.primary {
	--btn-color: var(--chip-bg-hover);
	--btn-color-hover: var(--chip-bg-hover);
	box-shadow: none;
}
.radio-icon-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding: 4px 0;
}
.radio-icon-btn-icon {
	width: 60px;
	height: 60px;
	padding: 6px;
	fill: var(--theme-color-primary);
	border-radius: 50%;
	background: var(--theme-color-bg, var(--btn-color));
	border:	3px solid transparent;
}
.radio-icon-btn.selected .radio-icon-btn-icon {
	border-color: var(--theme-color-primary, var(--icon-gray));
}
.radio-icon-btn.unselected {
	opacity: 0.6;
}
.radio-icon-btn-label {
	font-size: 13px;
}
@media (hover: hover) {
	.radio-icon-btn:hover .radio-icon-btn-icon {
		background: var(--theme-color-light, var(--btn-color-hover));
	}
	.darkmode .radio-icon-btn:hover .radio-icon-btn-icon {
		background: var(--chip-bg-hover, var(--btn-color-hover));
	}
}
.number-input-wrap {
	display: inline-flex;
}
.number-input-wrap .radio .btn {
	min-width: 40px;
}
.number-input-wrap .radio + .number-input {
	margin-left: 6px;
}
.number-input-other-btn {
	display: none;
	margin-left: 6px;
}
.number-input-box-hide .number-input-other-btn {
	display: inline-flex;
}
.number-input-box-hide .number-input:not(:focus) {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.number-input:focus + .number-input-other-btn {
	display: none;
}
.autocomplete-option {
	display: flex;
	align-items: center;
	font-size: 15px;
	padding: 2px 0;
}
.autocomplete-option:not(.has-icon) {
	margin-left: 45px;
}
.autocomplete-option-label {
	padding: 5px 10px 5px 0;
}
.autocomplete-icon {
	color: var(--icon-info-gray);
	flex: 0 0 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.autocomplete-input-disabled {
	font-weight: 600;
}

/* Modifying default SearchBar style to make it look like a text input */
.autocomplete-input.std-input .search-bar {
	--search-input-height: 40px;
	--search-input-unfocused-bg: var(--input-bg);
	--search-input-unfocused-border: 1px solid var(--border-color);
	--search-input-unfocused-placeholder: var(--input-placeholder);
	--search-input-icon-margin: 4px; /* to position the clear icon */
}
.autocomplete-input.std-input .search-input {
	/* To make it look as much like our standard text input as possible */
	font-size: var(--input-font-size);
	--search-input-border-radius: var(--input-border-radius);
	padding: var(--input-padding);
	height: unset;
}
.autocomplete-input.std-input .search-icon {
	display: none;
}
.autocomplete-input.std-input .search-suggests {
	border-radius: 0 0 4px 4px;
}
.mood-selector {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 6px;
}
.mood-selector-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100px;
	padding: 8px 4px 4px;
	border-radius: 8px;
	cursor: pointer;
	border:	3px solid transparent;
}
.mood-selector-option.selected {
	box-shadow: 0 0 0 2px var(--mood-color);
}
.mood-selector-option.unselected {
	opacity: 0.6;
}
.mood-selector-icon {
	width: 100%;
	flex-grow: 1;
}
.mood-selector-option.selected .mood-selector-icon {
	animation: mood-selector-icon 0.5s linear 1;
}
@keyframes mood-selector-icon {
	from, to {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}
.mood-selector-number {
	font-size: 16px;
	color: var(--mood-color-dark);
	line-height: 1em;
}
.darkmode .mood-selector-number {
	color: var(--mood-color);
}
@media(hover: hover) {
	.mood-selector-option:hover {
		opacity: 1;
		box-shadow: 0 0 0 2px var(--mood-color);
	}
}
.cycle-entry-form {
	margin-top: 25px;
}
.cycle-entry-form-period-btns {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 5px;
	column-gap: 10px;
	margin-bottom: 15px;
}
.cycle-entry-form-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cycle-entry-form-btns .btn {
	font-size: 14px;
}
.cycle-entry-form-section {
	margin-bottom: 20px;
}
.cycle-entry-form-discharge-btns .radio-icon-btn-icon {
	padding: 0;
}
.cycle-entry-form-other-symptoms-btn {
	margin-top: 15px;
}
.cycle-entry-form-symptom-mood {
	margin: 15px 0;
}
.data-entry-list-header {
	margin-bottom: 15px;
}
.data-entry-row {
	display: flex;
	color: var(--text);
	width: calc(100% + 16px);
	padding: 8px 10px;
	font-size: 14px;
	text-align: left;
	border-radius: 6px;
	margin: 0 -8px;
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.data-entry-row:not(:first-child) {
	margin-top: 8px;
}
.data-entry-row .right-svg {
	opacity: 0.75;
}
.data-entry-row.queued {
	--btn-color: var(--theme-color-light);
	--btn-color-hover: var(--theme-color-shadow);
}
.data-entry-row.queued .clock-svg {
	--btn-text: var(--theme-color-text);
}
.data-entry-name {
	padding-right: 15px;
	flex-grow: 1;
	word-break: break-word;
}
.data-entry-time {
	color: var(--text-muted);
	flex-shrink: 0;
	text-align: right;
}
.data-entry-subtitle {
	color: var(--text-muted);
	font-size: 0.9em;
}
.data-entry-date-separator {
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
}
.data-entry-date-separator:not(:first-child) {
	margin-top: 15px;
}
.data-entry-show-more {
	margin-top: 15px;
}
.data-entry-list-empty {
	font-size: 18px;
	color: var(--text-muted);
	text-align: center;
	margin: 20px 0;
}
.data-entry-list-search {
	margin-bottom: 35px;
}
.data-entry-list-error {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	padding-bottom: 15px;
}
.cycle-entry-modal.card {
	width: 700px;
}
.cycle-entry-modal-calendar-view-btn {
	text-align: center;
	margin: 15px 0;
}
.cycle-entry-modal-form {
	margin: 15px;
}
.cycle-entry-modal-add-btn {
	margin: 20px 0;
}
.cycle-entry-modal-done-btn {
	margin: 25px 15px;
}
.cycle-entry-modal-rows {
	padding: 0 15px;
}
.cycle-entry-modal-row {
	padding: 20px 0;
}
.cycle-entry-modal-row + .cycle-entry-modal-row {
	border-top: var(--card-separator);
}
.cycle-entry-modal-row-queued {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 6px;
	padding: 6px 8px;
	margin: 4px 0;
	font-size: 15px;
	background: var(--theme-color-light);
	--btn-text: var(--theme-color-text);
}
.cycle-entry-modal-row-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.cycle-entry-modal-row-title {
	font-weight: 600;
}
.cycle-entry-modal-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.cycle-entry-modal-day-num {
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin: 15px;
	text-align: center;
}
.cycle-entry-modal-prediction {
	margin: 15px 0 20px;
}
.cycle-entry-modal-prediction-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
}
.cycle-entry-modal-prediction-subtitle {
	text-align: center;
	font-size: 14px;
	margin-top: 5px;
}
.cycle-entry-modal-predicted-period {
	width: 28px;
	height: 28px;
	--btn-text: var(--red-metric);
}
.cycle-entry-modal-predicted-ovulation {
	width: 28px;
	height: 28px;
	--btn-text: var(--chart-blue);
}
.cycle-entry-modal-reminders {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
}
.cycle-entry-modal-reminder {
	display: flex;
	align-items: center;
	border-radius: 8px;
	padding: 10px;
	gap: 10px;
	background: var(--theme-color-tint);
	color: var(--theme-color-text);
	border: 1px solid var(--theme-color-text);
}
.cycle-entry-modal-reminder .notification-svg,
.cycle-entry-modal-reminder .notification-complete-svg {
	width: 30px;
	height: 30px;
}
.cycle-entry-modal-reminder-text {
	flex-grow: 1;
}
.cycle-entry-modal-reminder-btn.btn {
	width: 30px;
	height: 30px;
	margin-right: 5px;
}
.cycle-calendar {
	max-width: 700px;
	margin: auto;
}
.cycle-calendar .calendar-week-day,
.cycle-calendar .calendar-month-day {
	height: 90px;
}
.cycle-calendar-day {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-top: 6px;
}
.cycle-calendar-day.pregnant {
	background: var(--guava-green-shadow); /* TODO: change */
}
.cycle-calendar-icon-flow {
	position: relative;
	height:35px;
	width: 35px;
	border-radius: 50%;
	border: 3px solid var(--red-metric);
}
.cycle-calendar-icon-flow.predicted {
	opacity: 0.3;
}
.cycle-calendar-icon-flow.heavy {
	background-color: var(--red-metric);
}
.cycle-calendar-icon-flow.medium {
	background: linear-gradient(0deg, var(--red-metric), var(--red-metric) 60%, transparent 61%);
}
.cycle-calendar-icon-flow.light {
	background: linear-gradient(0deg, var(--red-metric), var(--red-metric) 33%, transparent 34%);
}
.cycle-calendar-icon-flow.spotting {
	height: 16px;
	width: 16px;
	margin: 9px;
	background-color: var(--red-metric);
}
.cycle-calendar-icon-flow.unknown {
	background-color: rgba(241, 105, 105, 0.1);
}
.cycle-calendar-icon-flow.fertile {
	border-color: var(--chart-blue);
	opacity: 0.5;
}
.cycle-calendar-icon-flow.ovulation {
	border-color: var(--chart-blue-dark);
}
.cycle-calendar-icon-sexual-activity {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 24px;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
	color: var(--theme-color-primary);
}
.cycle-calendar-icon-sexual-activity path {
	stroke: var(--surface-bg);
	stroke-width: 2px;
}

@media (max-width: 700px) {
	.cycle-calendar .calendar-week-day,
	.cycle-calendar .calendar-month-day {
		height: 80px;
	}
}

@media (max-width: 370px) {
	.cycle-calendar-icon-flow {
		height: 30px;
		width: 30px;
	}
	.cycle-calendar-icon-sexual-activity {
		width: 18px;
		height: 18px;
		top: 22px;
		margin-top: -9px;
		margin-left: -9px;
	}
}
.calendar-title-nav {
	margin: 10px 15px;
}

/* Month View */
.calendar-month-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.calendar-day-of-week {
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
}
.calendar-month {
	border: var(--card-separator);
	border-radius: 12px;
	margin: 0 10px 10px;
	overflow: hidden;
}
.calendar-month-week:not(:first-child) {
	border-top: 1px solid var(--border-color);
}
.calendar-month-day:not(:first-child) {
	border-left: 1px solid var(--border-color);
}
.calendar-month-day {
	position: relative;
	height: 100px;
	cursor: pointer;
}
/* Use ::after to put border on top of other content */
.calendar-week-day.selected::after,
.calendar-month-day.selected::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 0 3px var(--theme-color-primary);
}
.calendar-week-day.selected::after {
	border-radius: 12px;
	box-shadow: inset 0 0 0 2px var(--theme-color-primary);
}
.calendar-week-day.selected {
	border: none;
	padding: 1px;
}

/* Week View */
.calendar-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin: 0 10px 10px;
	gap: 10px;
	user-select: none;
	-webkit-user-select: none;
}
.calendar-week-day {
	position: relative;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	height: 100px;
	width: 100%;
	cursor: pointer;
}
.calendar-month-week:first-child .calendar-month-day:first-child {
	border-top-left-radius: 11px;
}
.calendar-month-week:first-child .calendar-month-day:last-child {
	border-top-right-radius: 11px;
}
.calendar-month-week:last-child .calendar-month-day:first-child {
	border-bottom-left-radius: 11px;
}
.calendar-month-week:last-child .calendar-month-day:last-child {
	border-bottom-right-radius: 11px;
}

/* Day Cell */
.calendar-week-day,
.calendar-month-day {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.calendar-day-label {
	flex-shrink: 0;
	text-align: center;
	font-size: 14px;
	padding: 3px 0 0;
}
.calendar-day-label.today {
	color: var(--theme-color-text);
	font-weight: 600;
	background: var(--theme-color-light);
}
.calendar-day-label.out {
	opacity: 0.5;
}
@media (hover: hover) {
	.calendar-month-day:hover,
	.calendar-week-day:hover {
		background: var(--hover-gray);
	}
}
.calendar-day-content {
	width: 100%;
	height: 100%;
}
.calendar-month-day .calendar-day-content {
	padding: 3px; /* for the border */
}

@media (max-width: 700px) {
	.calendar-title-nav {
		margin: 5px 0;
	}
	.calendar-month {
		margin-left: 5px;
		margin-right: 5px;
	}
	.calendar-week {
		gap: 3px;
		margin-left: 5px;
		margin-right: 5px;
	}
	.calendar-week-day-title {
		font-size: 13px;
	}
	.calendar-day-label {
		font-size: 12px;
	}
}
.calendar-extra-info-icon {
	position: absolute;
	right: 0;
	bottom: -8px;
	height: 25px;
	width: 25px;
	opacity: 0.7;
}
.calendar-week .calendar-extra-info-icon {
	margin: 5px;
}
.date-navigator {
	position: relative;
	display: flex;
	justify-content: center; /* To center DatePicker */
	gap: 15px;
	align-items: center;
}
.date-navigator-title-wrap {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}
.date-navigator-title {
	text-transform: uppercase;
	font-weight: 600;
	color: var(--text-muted);
	max-width: 260px;
	flex-grow: 1;
	text-align: center;
}
.date-navigator .date-picker {
	left: auto;
}
.card-modal.modal {
	display: flex;
	align-items: flex-start;
	padding: 0;
}
.modal > .card.card-modal-card {
	--card-modal-margin-top: 80px;
	margin: var(--card-modal-margin-top) auto;
	display: flex;
	flex-direction: column;
}
.card.card-modal-card.full-screen {
	background: var(--surface-bg);
}
.card-modal-card.full-screen .card-header:not(.card-header-primary),
.darkmode .card-modal-card.full-screen .card-header-primary {
	background: var(--surface-bg-8dp);
}
.card.card-modal-card .card-header {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 5px;
	border-bottom: var(--surface-border);
}
.darkmode .card-header.card-header-primary {
	background: var(--surface-bg-24dp);
}
.card-modal-back {
	align-self: flex-start;
}
.card-modal-back .btn-svg.cross-svg {
	height: 1.4em;
	width: 1.4em;
	--btn-text: currentColor;
}
.darkmode .card-modal-back {
	color: #fff;
}
.darkmode .card-header.card-header-primary {
	color: var(--theme-color-text);
}
.darkmode .card-header.card-header-primary .card-modal-back {
	color: var(--theme-color-text);
}
.darkmode .card-header.card-header-primary .overflow-menu-btn,
.darkmode .card-header.card-header-primary .card-modal-header-btns .btn {
	--btn-text: var(--theme-color-text);
}
.card-header-primary .card-modal-header-btns .text-btn {
	--btn-text: #fff;
}
.darkmode .card-header-primary .card-modal-header-btns .text-btn {
	--btn-text: var(--theme-color-text);
}
.darkmode .card-header-primary .card-header-subtitle {
	color: var(--text-muted);
}
.card-modal-body {
	border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}
.card-modal-body.html-bg {
	background: var(--html-bg);
}

.card-modal-title {
	flex-grow: 1;
	overflow: hidden; /* so text-overflow works */
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
}
.card-modal-back + .card-modal-title {
	padding-left: 0;
}
.card-modal-header-with-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.card-modal-header-title {
	flex-grow: 1;
	overflow: hidden; /* so text-overflow works */
	text-align: left;
}
.card-modal-header-btns {
	flex-shrink: 0;
	margin-right: -15px;
}
.card-modal-header-btns .text-btn {
	margin-right: 10px;
}
.card-modal-header-truncate {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.card-header .overflow-menu-wrap {
	margin-left: -5px; /* remove the gap from card-header */
}
@media (max-height: 700px) {
	.modal > .card-modal-card.card {
		--card-modal-margin-top: 40px;
	}
}
@media (max-width: 500px) {
	.card.card-modal-card.full-screen {
		--card-modal-margin-top: 0;
		height: 100vh;
		max-width: 100vw;
		border-radius: 0;
	}
	.card.card-modal-card.full-screen > .card-header {
		border-radius: 0;
	}
	/* Only add overflow-y when full-screen otherwise datepicker could be cutoff */
	.card.card-modal-card.full-screen > .card-modal-body {
		overflow-y: auto;
		flex-grow: 1;
		border-radius: 0;
	}
}
.overflow-menu-wrap {
	position: relative;
}
.overflow-menu-btn {
	display: flex; /* otherwise there's extra margin when used inline, such as in card header */
}
.overflow-menu-btn .overflow-menu-svg {
	width: 30px;
	height: 30px;
}
.overflow-menu {
	position: absolute;
	background: var(--surface-bg-24dp);
	border: var(--surface-border);
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	z-index: var(--menu-z-index);
	width: max-content;
	max-width: calc(min(500px, 100vw - 40px));
}
.overflow-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 15px 20px;
	font-size: 16px;
	color: var(--text); /* override Link.jsx color */
	cursor: pointer;
}
.overflow-menu-item:hover {
	background: var(--hover-gray);
}
.overflow-menu-item-red {
	color: var(--red-error);
}
.overflow-menu-item-with-icon {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: -4px;
	--btn-text: var(--icon-gray);
	color: var(--text); /* override Link.jsx color */
}
.overflow-menu-wrap.primary .overflow-menu-btn,
.overflow-menu-wrap.primary .overflow-menu-item-with-icon {
	--btn-text: var(--theme-color-primary);
}
.darkmode .overflow-menu-wrap.primary .overflow-menu-btn {
	--btn-text: var(--theme-color-text);
}
@media (hover: hover) {
	.overflow-menu-wrap.primary .overflow-menu-btn:hover {
		--btn-text: var(--theme-color-primary);
		background: var(--theme-color-light);
	}
}
.cycle-setting {
	display: block;
	margin-bottom: 25px;
}
.cycle-setting-title {
	font-size: 15px;
	margin-bottom: 10px;
}
.cycle-setting-input {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cycle-setting-prediction-header {
	font-size: 15px;
	font-weight: 600;
}
.cycle-setting-prediction-description {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	margin-bottom: 35px;
}
.cycle-setting-prediction-description-icon {
	margin-top: 2px;
	font-size: 16px;
	--btn-text: var(--theme-color-text);
}
.cycle-setting-prediction-disclaimer {
	font-size: 14px;
	color: var(--text-muted);
	margin: 30px 0;
}
.cycle-units {
	font-size: 13px;
}
.cycle-setting-section {
	border-radius: 8px;
	padding: 10px;
	background: var(--theme-color-tint);
	border: 1px solid var(--theme-color-text);
}
.cycle-setting-section-icon {
	width: 1.6em;
	height: 1.6em;
}
.cycle-setting-pregnancy-plan-icon {
	--btn-text: #fff;
	background: var(--theme-color-text);
	border-radius: 50%;
	padding: 4px;
	width: 30px;
	height: 30px;
}
.darkmode .cycle-setting-pregnancy-plan-icon {
	background: transparent;
	--btn-text: var(--theme-color-text);
}
.cycle-setting-section-heading {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
	align-items: center;
	font-size: 15px;
	color: var(--theme-color-text);
}
.cycle-setting-enabled-reminders-text {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}
.cycle-setting-preg-cp-opt-in {
	font-size: 14px;
}
.pregnancy-mode-settings-form {
	padding: 8px 20px 20px;
}
.pregnancy-mode-settings-row {
	margin-left: -8px;
	margin-right: -8px;
	width: calc(100% + 16px);
}
.cycle-reminder-config-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cycle-reminder-config-section-toggle {
	flex-shrink: 0;
}
.cycle-reminder-config-fields {
	display: flex;
	flex-direction: column;
	margin: 15px -15px -10px;
}
.number-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.number-toggle-button.btn {
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
}
.number-toggle-value {
	background: var(--input-bg);
	width: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--border-color);
	padding: 4px;
	border-radius: 6px;
	user-select: none;
	-webkit-user-select: none;
}
.number-toggle-value.clickable {
	cursor: pointer;
}
.number-toggle.primary .number-toggle-value {
	border-color: var(--theme-color-text);
}
.switch-input {
	position: relative;
	flex-shrink: 0;
	display: block;
	height: 28px;
	width: 56px;
	background: #aaa;
	border-radius: 100px;
	cursor: pointer;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.darkmode .switch-input {
	background: var(--border-color);
}
.switch-input.checked {
	background: var(--theme-color-primary);
}
.switch-input.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.switch-input::after {
	position: absolute;
	left: 5px;
	top: 4px;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
	content: '';
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.darkmode .switch-input::after {
	background: #aaa;
}
.switch-input.checked::after {
	left: 31px;
	background: #fff;
}
.switch-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.modal > .card.setting-edit-modal {
	margin-top: 150px;
	text-align: center;
}
.setting-edit-modal-header {
	margin-bottom: 15px;
}
.setting-edit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 15px;
	text-align: left;
	width: 100%;
	min-height: 64px; /* so 2 line and 1 line rows are same height */
	--btn-text: var(--theme-color-text);
	cursor: pointer;
}
.setting-edit-value-left {
	overflow: hidden; /* for text-overflow on subtitle */
}
.setting-edit-value {
	color: var(--btn-text);
	font-size: 15px;
}
.setting-edit-value-subtitle {
	color: var(--text-muted);
	font-size: 14px;
}
.setting-edit-value-subtitle.truncate {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.setting-edit-row-right {
	display: flex;
	align-items: center;
	gap: 5px;
	text-align: right;
}
@media (hover: hover) {
	.setting-edit-row:hover {
		background: var(--hover-gray);
	}
}
.animated-placeholders {
	height: 60px;
	margin-bottom: -60px;
	padding: 0.8em 1.2em;
	color: var(--input-placeholder);
	line-height: 1.4; /* copy .textarea-input so height matches perfectly */
	z-index: 1;
	pointer-events: none;
}
.baby-img-form-select .radio-icon-btn-icon {
	width: 80px;
	height: 80px;
	padding: 0;
}
.baby-img-form-select .preg-img-nav-baby {
	width: 100%;
	height: 100%;
	border: none;
}
.baby-img-form-select .preg-img-nav-baby-img {
	padding: 12px;
}
.baby-img-form-subtitle {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 15px;
}
.food-track-settings {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.food-track-settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.nutrient-input-summary {
	padding: 12px 15px;
	text-align: left;
	border-radius: var(--card-border-radius);
	background: var(--chip-bg);
	margin: 20px -8px 0;
}
.nutrient-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: -5px;
	margin-bottom: 10px;
}
.nutrient-input-row-name {
	flex-grow: 1;
	font-size: 16px;
	font-weight: 600;
}
.nutrient-input-row-name.empty {
	font-weight: normal;
	color: var(--text-muted);
	font-size: 15px;
}
.nutrient-input-row:focus-within .nutrient-input-row-name {
	font-weight: 600;
	color: var(--theme-color-text);
	font-size: 16px;
}
.nutrient-input-row-value {
	flex: 140px 0 0;
}
@media (max-width: 500px) {
	.nutrient-input-row-value {
		flex: 110px 0 0;
	}
	.nutrient-input-row input.number-input {
		width: 75px;
	}
}
.nutrient-input-summary-heading {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}
.nutrient-input-summary-row {
	font-size: 15px;
	display: flex;
	align-items: center;
	margin-top: 5px;
}
.nutrient-input-summary-name {
	flex-grow: 1;
}
.nutrient-input-summary-unit {
	font-size: 13px;
	margin-left: 3px;
}
.nutrient-input-summary-subtitle {
	font-size: 14px;
	color: var(--theme-color-text);
}
.nutrient-input-refresh-btn-wrap {
	text-align: center;
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.nutrient-input-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.nutrient-input-estimate-msg {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.nutrient-input-upgrade-msg {
	background: var(--theme-color-bg);
	padding: 15px;
	margin: -5px -5px 15px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border-radius: var(--card-border-radius);
}
.upgrade-form.card-modal-card .card-header {
	border-color: transparent;
}
.upgrade-form.card {
	text-align: left;
}
.card.card-modal-card.upgrade-form.benefits-only {
	background: var(--theme-color-text);
	overflow: hidden;
}
.darkmode .card.card-modal-card.upgrade-form.benefits-only {
	background: var(--surface-bg-24dp);
}
.upgrade-form-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to top, var(--theme-color-text), var(--theme-color-primary));
	color: #fff;
	padding-bottom: 20px;
}
.darkmode .upgrade-form-card {
	background: linear-gradient(to top, var(--surface-bg-24dp), var(--surface-bg-8dp));
}
.upgrade-form-header-logo {
	position: absolute;
	width: 280px;
	top: 0;
	left: -120px;
	opacity: 0.15;
}
.upgrade-form-header {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-right: -140px;
	padding: 20px;
}
.upgrade-form-header-name {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 4px;
}
.upgrade-form-header-premium {
	background: #fff;
	color: var(--theme-color-btn);
	padding: 0 16px 0 20px; /* -4px on the right to account for letter-spacing */
	border-radius: 3em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	letter-spacing: 4px;
	font-size: 20px;
}
.upgrade-form-highlight {
	position: relative; /* to display above the logo */
	padding: 20px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--theme-color-text);
	margin: 20px 0 30px;
	font-size: 18px;
}
.darkmode .upgrade-form-highlight {
	color: var(--text);
	background: rgba(40, 40, 40, 0.85);
}
.upgrade-form-features-header {
	text-align: center;
	font-weight: 600;
	margin-bottom: -10px;
}
.upgrade-form-features {
	position: relative; /* position in front of logo */
	padding: 25px 15px 0;
}
.upgrade-form-feature {
	width: 100%;
	background: var(--theme-color-text);
	border-radius: var(--card-border-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.upgrade-form-feature-inner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	--btn-text: #fff;
}
.upgrade-form-feature-arrow {
	height: 24px;
}
.upgrade-form-feature:not(:last-child) {
	margin-bottom: 15px;
}
.darkmode .upgrade-form-feature {
	background: var(--surface-bg);
	border-color: var(--theme-color-text);
}
.upgrade-form-feature-text {
	flex-grow: 1;
	margin-left: 4px;
}
.upgrade-form-feature-description {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 15px;
	padding: 8px 20px 20px 48px;
}
.btn.upgrade-form-feature-learn-btn {
	--btn-text: #fff;
}
.upgrade-form-feature-icon-bg {
	background: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	margin: -2px;
	--btn-text: var(--theme-color-text);
}
.upgrade-form-feature-icon {
	width: 100%;
	height: 100%;
	padding: 4px;
}
.darkmode .upgrade-form-feature-icon-bg {
	background: var(--theme-color-text);
	--btn-text: var(--surface-bg);
}
.btn.upgrade-form-feature-more {
	--btn-border-color: rgba(255, 255, 255, 0.5);
	--btn-border-width: 1px;
}
.upgrade-form-plan-toggle {
	padding: 25px 15px 0;
	text-align: center;
}
.upgrade-form-family {
	margin: 25px 20px;
	text-align: center;
}
.upgrade-form-family-option {
	position: relative;
	background: var(--theme-color-bg);
	border-radius: var(--card-border-radius);
	padding-top: 15px;
	overflow: hidden;
	border: 3px solid var(--theme-color-primary);
	margin-top: 15px;
}
.darkmode .upgrade-form-family-option {
	background: var(--theme-color-tint);
}
.upgrade-form-family-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	color: var(--theme-color-text);
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}
.upgrade-form-family-price-per {
	font-size: 16px;
	font-weight: 400;
	opacity: 0.85;
}
.upgrade-form-family-icon {
	position: absolute;
	right: -15px;
	bottom: 9px;
	width: 96px;
	height: 96px;
	--btn-text: var(--theme-color-primary);
	opacity: 0.4;
}
.upgrade-form-family-discount {
	background: var(--theme-color-primary);
	color: #fff;
	margin-top: 15px;
}
.darkmode .upgrade-form-family-discount {
	background: none;
	color: var(--theme-color-text);
}
.upgrade-form-billing-options {
	display: flex;
	align-items: stretch;
	gap: 15px;
	padding: 25px 15px;
	max-width: 400px;
	margin: auto;
}
.upgrade-form-billing-option {
	--billing-option-color: var(--text);
	--billing-option-text: var(--text);
	flex-basis: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	border-radius: var(--card-border-radius);
	border: 3px solid var(--billing-option-color);
	overflow: hidden;
	color: var(--billing-option-text);
	opacity: 0.4;
}
.upgrade-form-billing-option-label {
	padding: 2px 0;
	font-size: 18px;
	font-weight: 600;
}
.upgrade-form-billing-option.active {
	opacity: 1;
	--billing-option-color: var(--theme-color-primary);
	--billing-option-text: var(--theme-color-text);
	background: var(--theme-color-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.darkmode .upgrade-form-billing-option.active {
	background: var(--theme-color-tint);
}
.upgrade-form-billing-option-price {
	font-size: 32px;
	font-weight: 600;
	padding: 15px 0;
}
.upgrade-form-billing-option-price-cross {
	color: var(--text-muted);
	text-decoration: line-through;
	font-size: 18px;
	margin-top: -15px;
	margin-bottom: 15px;
}
.upgrade-form-billing-option-discount {
	background: var(--billing-option-color);
	color: #fff;
	width: 100%;
	text-align: center;
}
.darkmode .upgrade-form-billing-option-discount {
	color: var(--billing-option-text);
	background: none;
}
.upgrade-form-billing-provider-discount {
	font-size: 15px;
	font-weight: 600;
	color: var(--theme-color-text);
	text-align: center;
	padding: 0 15px 20px;
}
.form-btns.upgrade-form-upgrade-btn {
	margin: 0 15px 25px;
}
.upgrade-form-upgrade-btn .btn {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.upgrade-form-add-to-family-plan-title {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 600;
}
.upgrade-form-add-to-family-plan-subtitle {
	font-size: 15px;
	color: var(--text-muted);
	margin-top: 4px;
}
.upgrade-form-disable-notice {
	margin: 0 15px 20px;
}
/* should align with width where card-modal because fullscreen */
@media (max-width: 500px) {
	.form-btns.upgrade-form-upgrade-btn {
		position: sticky;
		bottom: 25px;
	}
	.upgrade-form-upgrade-btn .btn {
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	}
}
@media (hover: hover) {
	.upgrade-form-feature-inner:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	.upgrade-form-billing-option:not(.active):hover {
		background: var(--hover-gray);
	}
}
.plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}
.plan {
	--plan-color: var(--text-muted);
	--plan-text-color: var(--text);
	--plan-bg-color: none;
	--plan-shadow: 0 1px 3px rgba(63, 63, 63, 0.12), 0 1px 2px rgba(63, 63, 63, 0.24);

	flex: 1 0 340px;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	border: 2px solid var(--plan-color);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--plan-shadow);
}
.plan.premium {
	--plan-color: var(--upgrade-color-primary);
	--plan-text-color: var(--upgrade-color-text);
	--plan-color-btn-hover: var(--upgrade-color-btn-hover);
	--plan-bg-color: var(--upgrade-color-bg);
	--plan-shadow: 0 1px 3px var(--upgrade-color-light), 0 1px 2px var(--upgrade-color-shadow);
}
.plan-header {
	padding: 15px 20px;
	background: var(--plan-bg-color);
	color: var(--plan-text-color);
	border-bottom: var(--card-separator);
}
.plan-title {
	display: flex;
	justify-content: space-between;
	font-size: 1.6em;
	font-weight: 600;
}
.plan-price-per {
	font-size: 16px;
	font-weight: 400;
}
.plan-summary {
	margin-top: 15px;
	min-height: 3em; /* 2 lines */
}
.plan .icon-check {
	--icon-color: var(--plan-color);
}
.plan-features {
	flex-grow: 1;
	margin: 0;
	padding: 25px;
}
.plan-features li {
	list-style: none;
	display: flex;
	gap: 15px;
}
.plan-features li:not(:last-child) {
	margin-bottom: 15px;
}
.plan-submit-btn {
	display: flex;
	width: 320px;
	max-width: 100%;
	margin: 25px auto;
	font-size: 20px;
}
.plan-feature-subset {
	color: var(--plan-text-color);
}
.plan-features-expand-btn {
	align-self: center;
}
.plan-yearly-toggle {
	margin: 20px 0;
	font-size: 18px;
	text-align: center;
}
.plan-yearly-toggle-switch {
	display: inline-flex;
	gap: 15px;
	align-items: center;
	justify-content: center;
}
.plan-discount {
	color: var(--guava-green-text);
}
.food-track-onboard-card {
	position: relative;
	overflow: hidden;
}
.food-track-onboard-close-btn {
	position: absolute;
	right: 15px;
	top: 15px;
}
.food-track-onboard-icon-wrap {
	margin: 10px 0;
}
.food-track-onboard-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 12px;
	background: var(--theme-color-primary);
	color: #fff;
}
.food-track-onboard-title {
	margin: 20px 0;
	font-weight: 600;
	font-size: 18px;
}
.food-track-onboard-bullet {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin: 25px 0;
}
.food-track-onboard-bullet-subtext {
	font-size: 15px;
}
.food-track-onboard-bullet-icon {
	width: 28px;
	height: 28px;
	--btn-text: var(--theme-color-primary);
}
.food-track-onboard-nutrient-checkbox {
	margin-top: 10px;
	font-size: 15px;
}
.form-btns.food-track-onboard-form-btns {
	margin-top: 40px;
}
.card.card-modal-card.food-track-onboard-popup-modal {
	--card-modal-margin-top: 150px;
	position: relative;
}
.food-track-onboard-nutrient-disclaimer {
	margin: 20px 0;
}
.download-options-type-select {
	width: 100%;
	text-align: left;
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	--btn-color: var(--surface-bg-8dp);
	--btn-color-hover: var(--hover-gray);
	justify-content: space-between;
	padding: 12px 15px;
	overflow: hidden;
}
.download-options-type-select-body {
	overflow: hidden; /* for ellipsis */
}
.download-options-type-select-name {
	font-size: 16px;
}
.download-options-type-select-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.download-options-metric-chart {
	position: fixed;
	left: 100%;
	top: 0;
	width: 800px;
}
.download-options-body-map {
	position: fixed;
	left: 100%;
	top: 0;
	width: 500px;
}
.download-options-body-map .body-map-overview-controls {
	display: none;
}
.download-options-body-map .body-map-img {
	fill: #ccc !important; /* not sure why removing darkmode in html2canvas onclone doesn't work.. */
}
.checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
}
.checkbox-list-all-toggle {
	margin-bottom: 5px;
}
.checkbox-list-all-toggle.primary {
	color: var(--theme-color-text);
}
.body-map-overview-views {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 30px;
}
.body-map-overview-view {
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.body-map-overview-chart-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--card-border-radius);
}
.body-map-overview-chart {
	padding: 8px;
}
.body-map-overview-chart .body-map-gallery-body {
	width: 100%;
	height: 100%;
}
.body-map-overview-chart-canvas {
	position: absolute;
	width: 125%; /* 10% padding = 100/0.8 */
	height: 125%;
	top: -12.5%; /* 10% of width, matches padding in BodyMapHeatMap.jsx */
}
.body-map-overview-sides {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text-muted);
	padding: 4px 8px 0;
}
.body-map-overview-label {
	font-weight: 600;
	text-align: center;
}
.body-map-overview-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -20px 0 40px;
}
.body-map-overview-slider-wrap {
	flex-grow: 1;
}
.body-map-overview-slider .slider-input {
	width: 100%;
}
.body-map-overview-slider.disabled {
	opacity: 0.5;
}
.body-map-overview-slider-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-muted);
	margin: -10px 0 0;
}
.body-map-overview-slider-date {
	width: 100%;
	text-align: center;
	font-size: 14px;
	margin: -10px 0 -4px; /* to make the same height as slider-labels */
}
.slider-input {
	margin: 20px 15px;
	width: 260px;
	max-width: calc(100% - 30px);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.slider-input-track {
	position: relative;
	width: 100%;
	height: 6px;
	background: var(--theme-color-shadow);
	border-radius: 2em;
}
.slider-input-thumb {
	position: absolute;
	background: var(--theme-color-text);
	width: 18px;
	height: 18px;
	margin-left: -9px;
	top: -6px;
	border-radius: 50%;
}
.slider-input:focus {
	outline: none;
}
.slider-input:focus .slider-input-thumb.active {
	box-shadow: 0 0 0 0.7em var(--theme-color-shadow);
}
.slider-input-progress {
	position: absolute;
	left: 0;
	height: 100%;
	background: var(--theme-color-primary);
	border-radius: 2em;
}
.body-map-gallery-empty {
	margin: 40px 0;
	text-align: center;
	color: var(--text-muted);
}
.body-map-gallery-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 15px -8px;
}
.body-map-gallery-row-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--chip-bg);
	padding: 15px 20px;
	border-top-left-radius: var(--card-border-radius);
	border-bottom-left-radius: var(--card-border-radius);
	overflow: hidden; /* for ellipsis */
}
.body-map-gallery-row-date {
	font-weight: 600;
	margin-bottom: 2px;
}
.body-map-gallery-row-severity {
	font-size: 14px;
}
.body-map-gallery-row-notes {
	font-size: 14px;
	opacity: 0.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.body-map-gallery-row-edit {
	margin-top: auto;
	margin-left: -8px;
	margin-bottom: -6px;
	align-self: flex-start;
}
.body-map-gallery-body-wrap {
	flex-shrink: 0;
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	padding: 8px;
	border-top-right-radius: var(--card-border-radius);
	border-bottom-right-radius: var(--card-border-radius);
	overflow: hidden;
}
.body-map-gallery-body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	--body-map-spot-width: 8px;
}
.body-map-gallery-spot {
	position: absolute;
	width: var(--body-map-spot-width);
	height: var(--body-map-spot-width);
	margin-left: calc(var(--body-map-spot-width) / -2);
	margin-top: calc(var(--body-map-spot-width) / -2);
	border-radius: 50%;
	background: var(--theme-color-primary);
}
.body-map {
	position: relative;
	padding-top: 15px;
	overflow: hidden;
}
.body-map-img-wrap-wrap {
	position: relative;
	cursor: pointer;
	width: 100%;
	padding-bottom: 100%; /* 1:1 aspect ratio */
}
.body-map-img-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
}
.body-map-img {
	width: 100%;
	height: 100%;
	vertical-align: top;
	fill: #ccc;
}
.darkmode .body-map-img {
	fill: #4d4d4d;
}
.back .body-map-img-wrap {
	transform: rotateY(180deg);
}
.head .body-map-img-wrap {
	transform: translateY(140%) scale(3.5);
}
.back.head .body-map-img-wrap {
	transform: translateY(140%) scale(3.5) rotateY(180deg);
}
.body-map-belly-button {
	position: absolute;
	top: 43%;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	margin-top: -2px;
	border-radius: 50%;
	background-color: var(--surface-bg);
	opacity: 0.2;
	box-shadow: 0 0 3px 2px var(--surface-bg);
	transition: opacity 0.5s;
}
.back .body-map-belly-button {
	opacity: 0;
}
.body-map-back-label {
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 2.5em;
	font-weight: bold;
	opacity: 0.15;
}
.body-map-left-label {
	position: absolute;
	top: 50%;
	left: 83%;
	margin-left: -50px;
	width: 100px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	opacity: 0.15;
	transition: left 0.5s;
}
.body-map-right-label {
	position: absolute;
	top: 50%;
	left: 17%;
	margin-left: -50px;
	width: 100px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	opacity: 0.15;
	transition: left 0.5s;
}
.back .body-map-left-label {
	left: 17%;
}
.back .body-map-right-label {
	left: 83%;
}
.body-map-spot {
	position: absolute;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	margin-top: -3px;
	border-radius: 50%;
	background-color: var(--theme-color-text);
	box-shadow: 0 0 5px 5px var(--theme-color-text);
	opacity: 1;
}
.animate .body-map-spot {
	transition: 0.5s;
}
.body-map-spot.back {
	opacity: 0.2;
}
.back .body-map-spot {
	opacity: 0.2;
}
.back .body-map-spot.back {
	opacity: 1;
}
.head .body-map-spot {
	transform: scale(0.6);
}
.body-map-undo-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 8px;
	font-size: 19px;
	--btn-text: var(--logo-text);
	box-shadow: 0 1px 3px var(--surface-bg);
	border-radius: 6px;
}
.body-map-zoom-btns {
	position: absolute;
	right: 15px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.body-map-zoom-btn:first-child {
	border-radius: 6px 6px 0 0;
}
.body-map-zoom-btn:last-child {
	border-radius: 0 0 6px 6px;
}
.body-map-zoom-btn {
	--btn-text: var(--logo-text);
	padding: 6px;
	font-size: 22px;
	box-shadow: 0 1px 3px var(--surface-bg);
}
.body-map-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
}
.body-map-btns .btn {
	min-width: 140px;
}
.data-entry-type-section {
	background: var(--chip-bg);
	border-radius: var(--card-border-radius);
	padding: 8px 12px;
	margin: 0 -8px;
}
.data-entry-type-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.data-entry-type-section-header-name {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-color-text);
	padding: 4px 0;
}
.data-entry-type-section-header .daily-log-type-icon {
	width: 28px;
	height: 28px;
	padding: 1px;
}
.data-entry-type-section-add {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 18px;
}
.data-entry-type-section-list {
	margin: 15px 0 4px;
	padding: 0 8px; /* balances the negative margin on .data-entry-row */
}
.data-entry-type-section.compact .data-entry-type-section-header-name {
	font-size: 16px;
	padding: 0;
}
.data-entry-type-section.compact .data-entry-type-section-add {
	width: 28px;
	height: 28px;
	font-size: 16px;
	--btn-color: var(--theme-color-light);
	--btn-color-hover: var(--theme-color-shadow);
	--btn-text: var(--theme-color-text);
}
.darkmode .data-entry-type-section.compact .data-entry-type-section-add {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.data-entry-type-section-inline-prompt {
	margin: 15px 5px;
}
.symptom-edit-card {
	background: var(--chip-bg);
	border-radius: var(--card-border-radius);
	padding: 12px;
	margin: 0 -8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	--symptom-color: var(--theme-color-primary);
	--symptom-color-light: var(--theme-color-light);
	--symptom-color-hover: var(--theme-color-shadow);
}
.symptom-edit-card + .symptom-edit-card {
	margin-top: 12px;
}
.symptom-edit-card-header {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.symptom-edit-card-name-btn {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	--btn-color: transparent;
	--btn-color-hover: transparent;
	padding: 0;
	text-align: left;
	width: 0;
	min-height: 30px;
	flex-grow: 1;
	font-size: 15px;
}
.symptom-edit-card-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--symptom-color);
	flex-shrink: 0;
	margin-top: 9px;
}
.symptom-edit-card-name {
	font-weight: 600;
	margin-top: 5px;
	word-break: break-word;
	overflow: hidden;
}
.darkmode .symptom-edit-card-name {
	font-weight: 400;
}
.symptom-edit-card-already-logged {
	font-size: 13px;
}
.symptom-edit-card-subtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 0;
}
.symptom-edit-card-sev-label {
	font-size: 14px;
	color: var(--theme-color-text);
}
.symptom-edit-card-last-entry {
	color: var(--text-muted);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.symptom-edit-card-last-entry-icon {
	width: 16px;
	height: 16px;
}
.symptom-edit-card-last-entry-dot {
	margin: 0 4px;
}
.symptom-edit-card-last-entry-unit {
	font-size: 11px;
}
.symptom-edit-card-info-btn {
	width: 30px;
	height: 30px;
	position: relative;
	--btn-text: var(--text-muted);
	--btn-color: transparent;
	--btn-color-hover: var(--chip-bg-hover);
	font-size: 18px;
}
.symptom-edit-card-info-btn.has-content:after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background: var(--theme-color-text);
	border-radius: 50%;
	top: 2px;
	right: 2px;
}
.symptom-edit-card-del {
	margin-right: -6px;
	font-size: 12px;
}
/* slider override */
.symptom-edit-card-severity .slider-select-btns {
	border-radius: 8px;
	background: var(--surface-bg);
}
.symptom-edit-card-severity .btn.slider-select-btn {
	border-radius: 8px;
}
.symptom-edit-card-severity.has-zero .slider-select-btn-wrap:first-child {
	margin-right: 12px; /* 4px * 2 + 4px */
}
.symptom-edit-card-severity.has-zero .slider-select-btn-wrap:first-child .slider-select-btn {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}
.symptom-edit-card-severity.has-zero .slider-select-btn-wrap:nth-child(2) .slider-select-btn {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
.symptom-edit-card-severity.has-zero .slider-select-btn-wrap:first-child::after {
	content: '';
	width: 4px;
	height: 100%;
	background: var(--chip-bg);
	position: absolute;
	flex-shrink: 0;
	right: -8px;
}
.symptom-edit-card-severity .slider-select-btn.selected {
	--btn-color: var(--symptom-color-light);
	--btn-color-hover: var(--symptom-color-hover);
	--btn-text: var(--text);
}

/* Yes/No */
.symptom-edit-card.compact {
	padding: 10px 12px;
}
.symptom-edit-card.compact .symptom-edit-card-header {
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.symptom-edit-card.compact .symptom-edit-card-subtitle {
	margin-top: 10px;
}
.symptom-edit-card-compact-btns {
	display: flex;
	gap: 12px;
}
.symptom-edit-card-yes-no {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.symptom-edit-card-yes-no .btn {
	width: 40px;
	height: 40px;
}
.symptom-edit-card-yes-no .btn:not(.primary) {
	--btn-color: var(--surface-bg);
	--btn-color-hover: var(--chip-bg-hover);
	--btn-text: var(--logo-text);
}
.darkmode .symptom-edit-card-yes-no .btn:not(.primary) {
	--btn-color-hover: var(--surface-bg-8dp);
}
.symptom-edit-card-yes-no .cross-svg {
	padding: 3px;
}
.symptom-edit-card-yes-no .cross-svg path {
	stroke-width: 16;
}
.symptom-edit-card-yes-no .check-svg path {
	stroke-width: 1.4;
}
.slider-select-btns {
	display: flex;
	justify-content: space-between;
	border-radius: 50px;
	background: var(--hover-gray);
	padding: 0 4px;
}
.slider-select-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-muted);
	margin: 3px 5px 0;
}
.slider-select-btn-wrap {
	position: relative;
	flex-grow: 1;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn.slider-select-btn {
	position: absolute;
	width: calc(100% + 8px);
	height: 100%;
	border-radius: 50px;
	font-size: 13px;
	text-decoration: none;
}
.slider-select-btn.selected {
	font-weight: 600;
}
@media (hover: hover) {
	.btn.slider-select-btn:hover:not(.selected) {
		background: var(--hover-gray);
	}
	.darkmode .slider-select-btn:hover:not(.selected) {
		background: var(--chip-bg-hover);
	}
}
.symptom-editor-name-display {
	display: flex;
	align-items: center;
	gap: 15px;
}
.color-selector {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 10px;
}
.color-selector-option {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	border:	2px solid var(--surface-bg);
}
.color-selector-option.selected {
	box-shadow: 0 0 0 3px var(--text-muted);
}
@media(hover: hover) {
	.color-selector-option:hover {
		box-shadow: 0 0 0 3px var(--text-muted);
		opacity: 0.8;
	}
}
.symptom-select-option-left {
	display: flex;
	align-items: center;
	gap: 15px;
}
.search-select-option-icon.list-add-svg {
	width: 28px;
	height: 28px;
	margin: -2px -4px -2px 0;
}
.symptom-select-color-blob {
	border-radius: 4px;
	border: var(--card-separator);
}
.symptom-select-option-subtitle {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--text-muted);
	font-size: 12px;
	--symptom-dot-color: var(--theme-color-primary);
}
.symptom-select-option-history-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--symptom-dot-color);
	flex-shrink: 0;
}
.symptom-select-option-history-dot.sev-0 {
	background: none;
	border: 2px solid var(--symptom-dot-color);
}
.symptom-groups-instructions {
	margin: 20px 0 25px;
	color: var(--text-muted);
}
.symptom-groups-symptoms {
	margin: 25px -20px 35px;
}
.symptom-groups-symptom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.btn.symptom-groups-symptom-del-btn {
	width: 25px;
	height: 25px;
	padding: 4px;
	margin-left: -8px;
	margin-right: -4px;
}
.symptom-groups-add-btn-wrap {
	text-align: center;
	margin: 25px 0;
	position: relative;
}
.overflow-menu-wrap.symptom-groups-sort-icon {
	position: absolute;
	right: -5px;
	top: -5px;
}
.symptom-groups-symptoms-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}
.symptom-groups-symptoms-header-label {
	font-size: 20px;
}
.symptom-groups-symptoms-header-btn {
	position: absolute;
	right: -8px;
}
.symptom-groups-rows {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 40px -5px 20px;
}
.symptom-groups-rows-draggable-list {
	margin: 0 -20px;
}
.symptom-groups-row {
	width: 100%;
	text-align: left;
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	--btn-color: var(--surface-bg-8dp);
	--btn-color-hover: var(--hover-gray);
	justify-content: space-between;
	padding: 12px 15px;
	overflow: hidden;
}
.symptom-groups-row-body {
	overflow: hidden; /* for ellipsis */
}
.symptom-groups-row-name {
	font-size: 16px;
}
.symptom-groups-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.symptom-groups-empty {
	margin-top: 10px;
}
.suggested-symptom-groups-header {
	font-size: 15px;
	margin-bottom: 10px;
}
.suggested-symptom-group-row {
	width: 100%;
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	padding: 10px;
	text-align: left;
}
.suggested-symptom-group-row:not(:first-child) {
	margin-top: 10px;
}
.suggested-symptom-group-row-list {
	margin: 10px 0;
}
.suggested-symptom-group-row-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

@media(hover: hover) {
	button.suggested-symptom-group-row:hover {
		background: var(--hover-gray);
	}
}
.draggable-list {
	position: relative;
	overflow-x: hidden;
}
.draggable-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	user-select: none;
	-webkit-user-select: none;
	width: 100%;
	padding: 12px 15px;
	background: var(--surface-bg);
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.draggable-list-row-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	--btn-text: var(--icon-gray);
	cursor: grab;
}
.draggable-list-row.dragging {
	position: absolute;
	transform: scale(1.01);
	transform-origin: 50% 50%;
	left: 0;
	background: #fafafa;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	overflow: hidden;
}
.draggable-list-row.dragging .draggable-list-row-icon {
	cursor: grabbing;
}
.darkmode .draggable-list-row.dragging {
	background: #383838;
}
.new-feature-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.new-feature-popup {
	position: absolute;
	background: var(--theme-color-btn);
	padding: 15px;
	font-size: 15px;
	width: 100%;
	color: #fff;
	margin-top: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	z-index: var(--tooltip-z-index);
}
.new-feature-popup:before {
	content: '';
	position: absolute;
	margin-top: -9px;
	top: 0;
	left: 80px;
	border-bottom: solid 12px var(--theme-color-btn);
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
}
.new-feature-popup-header {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.btn.new-feature-popup-hide-btn {
	width: 25px;
	height: 25px;
	padding: 4px;
	margin-right: -4px;
}
.new-feature-popup-body {
	font-size: 14px;
}
:root {
	--search-select-submit-wrap-height: 80px;
}
.search-select-modal.card-modal-card .card-header {
	border-bottom: none;
}
.search-select-search-bar {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24);
}
.search-select-search-bar.colored {
	background: var(--theme-color-primary);
}
.darkmode .search-select-search-bar.colored {
	background: var(--surface-bg-8dp);
}
.search-select-modal-body {
	display: flex;
	flex-direction: column;
	height: calc(min(100vh - var(--card-modal-margin-top) * 2 - 60px, 720px)); /* 60px for the header */
}

.text-input.search-select-text-input {
	width: 100%;
}
.search-select-search-bar.colored > .text-input.search-select-text-input {
	color: #fff;
	--input-focus-border: var(--theme-color-text);
	--input-focus-shadow: #eeeeee22;
	--input-placeholder: #ffffffaa;
	--input-primary-text: #fff;
	--input-bg: var(--surface-bg-muted);
}
.darkmode .search-select-search-bar.colored > .search-select-text-input {
	--input-focus-shadow: var(--theme-color-shadow);
}
.search-select-search-clear {
	width: 25px;
	height: 25px;
	--btn-text: #ccc;
	padding: 5px;
	border-radius: 50%;
	border: 1px solid;
}
.search-select-options {
	flex-grow: 1;
	overflow-y: scroll;
}
.search-select-option {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 15px;
	min-height: 65px;
	font-size: 15px;
	text-align: left;
}
.search-select-option.highlighted {
	background: var(--hover-gray);
}
.search-select-option.quick-option,
.search-select-option:not(:last-child) {
	border-bottom: var(--card-separator);
}
.search-select-option.quick-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	color: var(--text-muted);
}
.search-select-option-icon {
	width: 24px;
	height: 24px;
}
.search-select-plus-icon {
	--btn-text: var(--text-muted);
	border-radius: 4px;
	border: 2px solid var(--text-muted);
	padding: 1px;
}
.search-select-option-check {
	width: 26px;
	height: 26px;
	border: 2px solid var(--btn-color);
	--btn-text: transparent;
	border-radius: 50%;
	padding: 3px;
}
.search-select-option-check.selected {
	--btn-text: #fff;
	border: 2px solid var(--theme-color-btn);
	background: var(--theme-color-btn);
}
.search-select-empty-msg {
	padding: 35px 20px;
	text-align: center;
	color: var(--text-muted);
}

.search-select-submit-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 100%;
	height: var(--search-select-submit-wrap-height);
	border-top: var(--card-separator);
	border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
	background: var(--surface-bg-24dp);
}
.btn.search-select-submit-btn {
	min-width: 70%;
	max-width: 360px;
	font-size: 1.3em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.search-select-submit-count {
	font-size: 0.8em;
	opacity: 0.8;
	margin-left: 4px;
}
.search-select-submit-header {
	display: none;
}
.search-select-other-options-header {
	padding: 10px 15px;
	font-size: 14px;
	color: var(--text);
	text-transform: uppercase;
	font-weight: 600;
	background: var(--hover-gray);
	border-bottom: var(--card-separator);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	--btn-text: var(--text);
}
.search-select-hidden-options-arrow {
	width: 26px;
	height: 20px;
}
.search-select-filter-bar {
	position: relative;
}
.search-select-filter-bar .filter-bar {
	padding: 10px;
}
@media (max-width: 500px) {
	.search-select-modal-body.full-screen {
		height: 100%;
	}
	.search-select-modal-body.full-screen.has-submit-btn {
		padding-bottom: var(--search-select-submit-wrap-height);
	}
	.search-select-modal-body.full-screen > .search-select-submit-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 0;
	}
}
/* When keyboard is shown on mobile */
@media (max-height: 420px) {
	.search-select-submit-wrap {
		display: none;
	}
	.search-select-modal-body.full-screen.has-submit-btn {
		padding-bottom: 0;
	}
	.search-select-submit-header {
		display: flex;
	}
	.btn.search-select-settings-btn.has-values {
		display: none;
	}
}
@media (hover: hover) {
	.search-select-option:hover {
		background: var(--hover-gray);
	}
	.btn.search-select-search-clear:hover {
		color: #eee;
		--btn-text: #eee;
		background: #eeeeee20;
	}
}
.search-select-async-loading-container {
	padding: 20px;
	display: flex;
	justify-content: center;
}
.spinner.search-select-async-loading {
	height: 20px;
	width: 20px;
	--spinner-color: var(--theme-color-primary);
}
.filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	overflow-x: scroll;
}
.btn.filter-bar-btn {
	flex-shrink: 0;
}
.filter-bar::-webkit-scrollbar {
	display: none;
}
.btn.filter-bar-btn:not(.primary) {
	--btn-color: var(--theme-color-light);
	--btn-color-hover: var(--theme-color-shadow);
}
.btn.outline.filter-bar-add-btn {
	border-style: dashed;
	flex-shrink: 0;
}
.photo-picker-btn {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	border-radius: var(--card-border-radius);
	height: 60px;
	padding: 0 16px;
}
.photo-picker-btn .camera-svg {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	fill: var(--icon-gray);
}
.photo-bulk-btn {
	float: right;
	margin-left: 10px;
}
.photo-picker-file-input {
	display: none;
}
.photo-picker-add-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	height: 200px;
	cursor: pointer;
	width: 100%;
	justify-content: center;
	gap: 15px;
	margin-bottom: 15px;
	padding: 15px;
}
.photo-picker-add-area.dragging {
	border: 2px solid var(--guava-green);
	background: var(--guava-green-shadow);
}
.btn-svg.photo-picker-add-icon {
	width: 40px;
	height: 40px;
	--btn-text: var(--text-muted);
	border-radius: 10px;
	stroke-width: 8px;
	border: 2px solid var(--border-color);
	padding: 4px;
}
.photo-picker-add-area-text {
	font-size: 14px;
	color: var(--text-muted);
}
.photo-picker-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 10px;
}
.photo-picker-preview-item {
	border-radius: 8px;
	padding-bottom: 100%; /** trick to have square items with width minmax(70px, 1fr) */
	position: relative;
}
.photo-picker-preview-item.pending {
	border: var(--card-separator);
	padding-bottom: calc(100% - 2px);
}
.photo-picker-preview-item .ai-loading.sml {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
.photo-picker-preview-item .ai-loading-msg {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%);
	color: var(--theme-color-text);
	font-size: 0.6em;
	opacity: 0.5;
	white-space: nowrap;
}
.photo-picker-preview-item-btn {
	width: 100%;
	height: 100%;
	border-radius: 7px;
	overflow: hidden;
	position: absolute;
	top: 0;
}
.photo-picker-preview-item-btn.btn {
	--btn-color: transparent;
	--btn-color-hover: transparent;
	--btn-text: var(--icon-gray);
	border: 2px dashed var(--border-color);
}
.photo-picker-preview-item-img {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.photo-picker-loader {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	stroke-width: 1;
	fill: none;
}
.photo-picker-loader path {
	stroke: var(--theme-color-primary);
	stroke-linecap: round;
}
.photo-picker-loader circle {
	stroke: var(--border-color);
}
.photo-picker-image-viewer {
	padding: 20px 0;
	margin: auto;
	width: 800px;
	max-width: 100%;
}
.photo-picker-image-viewer .file-viewer-page {
	display: flex; /** eliminate tiny grey bar at the bottom of image */
}
.data-entry-photo-btn {
	--photo-input-image-size: 60px;
	display: flex;
	height: var(--photo-input-image-size);
	padding: 0 10px 0 0; /* cant use padding right, need to override other padding */
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	border-radius: var(--card-border-radius);
	overflow: hidden;
}
.data-entry-photo-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--photo-input-image-size);
	width: var(--photo-input-image-size);
	object-fit: cover;
	border-radius: var(--card-border-radius);
}
.data-entry-photo-img.data-entry-photo-svg-wrap {
	width: auto;
	padding: 0 4px 0 16px;
}
.data-entry-photo-label {
	padding: 0 8px 0 4px;
	text-align: left;
}
.data-entry-photo-label.has-photo {
	padding-left: 10px;
}
.data-entry-photo-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.data-entry-photo-count {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: 28px;
	border-radius: 50%;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.8);
	color: var(--theme-color-text-lightmode);
	box-shadow: #000000 0 0 2px 0px;
}
.data-entry-photo-subtitle {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 14px;
	color: var(--theme-color-text);
	margin-top: 2px;
}

.data-entry-photo-plus-svg {
	width: 20px;
	height: 20px;
	--btn-text: var(--theme-color-text);
	border-radius: 50%;
	padding: 2px;
	margin: -2px -2px 0 -3px;
}
.data-entry-photo-img .camera-svg {
	height: 30px;
	width: 30px;
	fill: var(--text-muted);
}

.dicom-viewer-img-wrap {
	position: relative;
}
.dicom-viewer-series-info {
	background: var(--surface-bg);
	padding: 15px;
}
.dicom-viewer-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--text-muted);
}
.dicom-viewer-page-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}
.file-viewer-page-list {
	padding: 20px 0;
	margin: auto;
	width: 800px;
	max-width: 100%;
}
.file-viewer-page {
	position: relative;
	background: #4d4d4d;
	box-shadow: var(--overlay-card-shadow);
}
.file-viewer-page .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px; /* half of spinner height */
	margin-left: -15px;
}
.file-viewer-page:not(:first-child) {
	margin-top: 15px;
}
.file-viewer-page-empty {
	height: 200px;
	background: var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.file-viewer-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	vertical-align: top; /* get rid of tiny bottom gap */
}
.file-viewer-page.auto-height {
	min-height: 100px;
}
.file-viewer-page.auto-height .file-viewer-img {
	position: relative; /* for files without a specified height (e.g. binaries) */
}
.file-viewer-video {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 75vh;
}
.file-viewer-text {
	background: var(--surface-bg);
	padding: 30px 20px;
	font-size: 0.85em;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.file-viewer-text-end {
	margin: 20px 0 0;
	text-align: center;
}
.file-viewer-decoration-svg {
	position: absolute;
}
.file-viewer-decoration-path {
	stroke: var(--chart-blue);
	stroke-width: 8; /* since we mask inside the rectangle, only half the width is shown */
	stroke-linejoin: round;
	fill: none;
}
.file-viewer-decoration-path.has-label {
	fill: #ffffff88;
	stroke-width: 2;
}
.file-viewer-decoration-label {
	font-weight: 600;
}
.file-viewer-error {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: #fff;
}
.file-viewer-pdf-error {
	text-align: center;
	max-width: 400px;
	margin: auto;
}
.ai-loading {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 40px auto;
	width: 80px;
}
.ai-loading.sml {
	margin: 20px auto;
	width: 50px;
}
.ai-loading-dot {
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: var(--theme-color-primary);
}
.ai-loading.sml .ai-loading-dot {
	width: 5px;
	height: 5px;
}
.ai-loading-dot.dot-1 {
	animation: ai-loading 1.5s linear infinite;
	animation-delay: 0.1s;
}

.ai-loading-dot.dot-2 {
	animation: ai-loading 1.5s linear infinite;
	animation-delay: 0.2s;
}

.ai-loading-dot.dot-3 {
	animation: ai-loading 1.5s linear infinite;
	animation-delay: 0.3s;
}

.ai-loading-dot.dot-4 {
	animation: ai-loading 1.5s linear infinite;
	animation-delay: 0.4s;
}

.ai-loading-dot.dot-5 {
	animation: ai-loading 1.5s linear infinite;
	animation-delay: 0.5s;
}

@keyframes ai-loading {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(0);
	}
	35% {
		transform: translateY(180%);
	}
	45% {
		transform: translateY(0);
	}
	60% {
		transform: translateY(-180%);
	}
	75% {
		background-color: var(--theme-color-shadow);
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
.tag-select {
	display: inline-flex;
	flex-wrap: wrap;
	column-gap: 4px;
	row-gap: 6px;
	position: relative;
}
.theme .tag-select-btn {
	/* apply transparent border on all btns so browsers with imperfect subpixel rendering don't twitch when selected */
	border: 1px solid transparent;
	padding: calc(0.4em - 1px) calc(1em - 1px);
}
.theme .tag-select-btn:not(.primary) {
	--btn-color: var(--theme-color-light);
	--btn-color-hover: var(--theme-color-shadow);
}
.darkmode .theme .tag-select-btn:not(.primary) {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	border: var(--surface-border);
}
.btn.outline.tag-select-add-btn {
	border-style: dashed;
	--btn-text: var(--logo-text);
}
.card.tag-select-add-modal {
	margin-top: 100px;
}
.tag-select-add-modal-btn {
	min-width: 100px;
}
.tag-select-manage {
	display: flex;
	margin-left: auto;
	margin-bottom: -20px;
}
.data-entry-tag-settings-label {
	padding: 15px 15px 5px;
	text-align: right;
	font-size: 15px;
}
.data-entry-tag-settings-rows {
	padding-bottom: 20px;
}
.data-entry-tag-settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 5px 15px;
	font-size: 15px;
}
.data-entry-tag-settings-row + .data-entry-tag-settings-row {
	border-top: var(--card-separator);
}
.data-entry-tag-settings-row-edit {
	margin: -8px;
}
.data-entry-tag-settings-row-name {
	flex-grow: 1;
}
.data-entry-tag-settings-edit-modal-header {
	display: flex;
	align-items: center;
	gap: 15px;
}
.data-entry-tag-settings-edit-input {
	margin-bottom: 5px;
}

.poop-info-types-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}
.poop-info-types-row-icon {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}
.lab-entry-form-row {
	border-top: var(--card-separator);
	margin-top: 20px;
	padding-top: 15px;
}
.lab-entry-form-row.single-test {
	margin: 0;
	border: none;
}
.lab-entry-form-row-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.lab-entry-form-row-edit {
	flex-shrink: 0;
}
.lab-entry-form-row-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.lab-entry-form-search-modal {
	padding: 0 15px 15px;
}
.lab-entry-form-search {
	margin: 20px -8px 0;
}
.lab-entry-form-search-header {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	margin: 20px 0 -18px;
}
.lab-entry-form-search-suggest {
	padding: 5px 15px;
}
.lab-entry-form-add-first {
	display: flex;
	margin: 25px auto 0;
}
.lab-entry-form-add-more {
	display: flex;
	margin: 25px auto 20px;
	font-size: 14px;
}
.lab-entry-form-value-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 6px;
}
.lab-entry-form-unit-select {
	margin-left: 10px;
}
.lab-entry-form-comparator {
	margin-right: 4px;
}
.lab-entry-form-comparator select {
	width: 2.2em;
	height: 2.2em;
	text-align: center;
	text-align-last: center; /* for safari */
	padding: 0;
}
.select.lab-entry-form-comparator::after {
	display: none; /* hide the triangle */
}
.lab-entry-form-range-add {
	margin-top: 15px;
}
.lab-entry-form-range-wrap {
	margin-top: 8px;
	color: var(--text-muted);
	font-size: 14px;
}
.lab-entry-form-range-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.lab-entry-form-range-remove {
	padding: 12px;
	margin-left: -8px;
}
.metric-color-good {
	--reference-range-color: var(--metric-green);
	--reference-range-text: var(--metric-green-text);
	--reference-range-chart-shading: var(--chart-shading-green);
}
.metric-color-slight-warn {
	--reference-range-color: #94c869;
	--reference-range-text: #6c9f43;
	--reference-range-chart-shading: var(--chart-shading-yellow);
}
.metric-color-warn {
	--reference-range-color: var(--orange-metric);
	--reference-range-text: var(--orange-metric);
	--reference-range-chart-shading: var(--chart-shading-orange);
}
.metric-color-bad {
	--reference-range-color: var(--red-metric);
	--reference-range-text: var(--red-metric);
	--reference-range-chart-shading: var(--chart-shading-red);
}
.metric-color-very-bad {
	--reference-range-color: #d74853;
	--reference-range-text: var(--red-metric);
	--reference-range-chart-shading: var(--chart-shading-red);
}

.reference-range-wrap {
	width: 200px;
	max-width: 100%;
	flex-shrink: 0;

	--rr-color: #ccc;
	--rr-dot-color: var(--chart-blue);
	--rr-height: 6px;
}
.darkmode .reference-range-wrap {
	--rr-color: #666;
}

.reference-range-outer {
	position: relative;
	height: var(--rr-height);
}
.reference-range-inner {
	position: relative;
	width: 100%;
	height: 100%;
}
.reference-range-bar {
	position: absolute;
	height: 100%;
	background: var(--reference-range-color, var(--rr-color));
}
.reference-range-bar.metric-color-in-range {
	--reference-range-color: var(--chart-blue);
}
.reference-range-value-dot {
	position: absolute;
	width: calc(var(--rr-height) + 8px);
	height: calc(var(--rr-height) + 8px);
	top: -4px;
	border-radius: 50%;
	transform: translate(-50%, 0);
	background: var(--surface-bg-8dp);
	border: 2px solid var(--reference-range-color, var(--rr-dot-color));
}
.reference-range-subtitle {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.reference-range-subtitle + .reference-range-outer {
	margin-top: 4px;
}
.reference-range-outer + .reference-range-subtitle {
	margin: 6px 0 0;
}
.reference-range-interpretation {
	font-size: 13px;
	white-space: nowrap;
	color: var(--reference-range-text, var(--text-muted));
}
.reference-range-interpretation.metric-color-in-range {
	--reference-range-text: var(--chart-blue);
}
.reference-range-date {
	font-size: 11px;
	color: var(--text-muted);
}
.reference-range-ticks {
	position: relative;
	height: 1.4em;
}
.reference-range-tick {
	position: absolute;
	transform: translate(-50%, 0);
	font-size: 12px;
	font-weight: 400;
	color: #888;
}
.reference-range-labels {
	position: relative;
	height: 1em;
	margin-top: 0.4em;
}
.reference-range-labels.staggered {
	height: 2.8em;
}
.reference-range-label {
	position: absolute;
	transform: translate(-50%, 0);
	font-size: 12px;
	font-weight: 400;
	color: var(--reference-range-text, var(--text-muted));
	white-space: nowrap;
}

.reference-range-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 2px;
}

.reference-range-unit {
	font-size: 12px;
	margin-left: 5px;
}

.energy-selector.radio {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 6px;
}
.energy-selector .radio-icon-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	padding: 4px 2px;
	border-radius: 8px;
	cursor: pointer;
	border:	3px solid transparent;
}
.energy-selector-icon {
	max-width: 100%;
	height: 100%;
}
.energy-selector .radio-icon-btn.selected .energy-selector-icon {
	animation: energy-selector-icon 0.5s ease-in-out 1;
	transform-origin: 50% 100%;
}
@keyframes energy-selector-icon {
	from, to {
		transform: translate(0, 0) scale(1, 1);
	}
	10% {
		transform: translate(0, 0) scale(1.05, 0.9);
	}
	30% {
		transform: translate(0, 0) scale(0.95, 1.05);
	}
	50% {
		transform: translate(0, -10%) scale(1.05, 0.95);
	}
	70% {
		transform: translate(0, 0) scale(1.1, 0.9);
	}
}
.linked-record-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.linked-record-menu {
	margin: -6px -12px 0 0;
}
.water-selector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.water-selector .radio-icon-btn-icon {
	width: 100%;
	height: 100px;
	border-radius: 8px;
	padding: 8px;
}
.water-selector-icon {
	max-width: 100%;
	height: 100%;
}
.water-selector-subtitle {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.2em;
}
.water-selector-custom-input-wrap {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.caffeine-selector.radio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	margin-top: -4px; /* removes the 4px padding on radio-icon-btn */
	margin-bottom: 15px;
}
.caffeine-selector-servings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 5px;
}
.radio.caffeine-selector-radio {
	width: 100%;
	flex-wrap: nowrap;
}
.caffeine-selector-radio .btn {
	flex-basis: 150px;
	border-radius: 30px;
}
.caffeine-selector-amount-label {
	display: flex;
	align-items: center;
	column-gap: 5px;
	font-size: 14px;
	color: var(--text-muted);
	--btn-text: var(--text-muted);
}
.date-time-form {
	display: flex;
	flex-wrap: wrap;
	column-gap: 15px;
	row-gap: 8px;
	margin: 8px -8px;
}
.date-time-form-btn {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.btn.date-time-form-multi-day-btn {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	border-radius: 8px;
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	text-align: left;
	padding: 8px 12px;
}
.date-time-form-multi-day-btn .calendar-svg {
	margin-top: 4px;
}
.date-time-form-multi-day-btn-label {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.date-time-form-btn-wrap {
	display: flex;
	align-items: center;
}
.btn.date-time-form-btn-remove {
	width: 32px;
	height: 32px;
	margin-left: 4px;
}
.date-time-form-btn-remove .cross-svg path {
	stroke-width: 16;
}
.date-time-form-tz-display {
	margin-top: 5px;
	font-size: 12px;
	color: var(--text-muted);
}
.date-range-picker.card-modal-card {
	width: 360px;
}
@media (max-width: 500px) {
	.date-range-picker.card-modal-card {
		margin: auto;
	}
}
.date-range-picker-inputs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 12px;
}
.date-range-picker-duration-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}
.date-range-picker-duration {
	font-size: 14px;
	color: var(--text-muted);
}

/* Override styles for date picker */
.date-range-picker .date-picker {
	position: relative;
	box-shadow: none;
	border: none;
	margin: 15px auto -15px;
	background: var(--chip-bg);
}
.date-range-picker .date-picker-day.start,
.date-range-picker .date-picker-day.end {
	position: relative;
	background: var(--theme-color-btn);
	color: #fff;
}
.date-range-picker .date-picker-day.start:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: var(--theme-color-light);
	z-index: -1;
}
.date-range-picker .date-picker-day.end:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: var(--theme-color-light);
	z-index: -1;
}
.date-range-picker .date-picker-day.in-range {
	background: var(--theme-color-light);
	border-radius: 0;
}
.date-range-picker .date-picker-day.today.start,
.date-range-picker .date-picker-day.today.end,
.date-range-picker .date-picker-day.today.in-range {
	border: none;
}
.time-range-picker.card-modal-card {
	width: 390px;
}
@media (max-width: 500px) {
	.time-range-picker.card-modal-card {
		margin: auto;
	}
}
.time-range-picker-inputs {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 30px -12px 40px;
}
.time-range-picker-add-end {
	position: absolute;
	margin-left: 220px;
}
.time-range-picker-input-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}
.time-range-picker-time-label {
	position: absolute;
	top: -25px;
	font-size: 14px;
}
.time-range-picker-time-btn {
	min-width: 140px; /* prevents input from changing size */
	min-height: 40px;
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	border: var(--card-separator);
}
.time-range-picker-input {
	font-size: 16px;
	width: 140px;
	height: 40px;
}
.time-range-picker-dash {
	font-size: 32px;
	line-height: 16px;
}
.time-range-picker-options-header {
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
}
.time-range-picker-options {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 10px -12px 35px;
}
.time-range-picker-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: var(--card-separator);
	border-radius: 8px;
	padding: 3px;
	--btn-text: var(--text-muted);
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	font-size: 13px;
	width: 62px;
	height: 62px;
}
.time-range-picker-option-icon {
	width: 24px;
	height: 24px;
	flex-grow: 1;
}

.med-edit-list-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 12px 8px;
	margin: 12px -8px;
	border-radius: 8px;
	background: var(--theme-color-light);
}
.darkmode .med-edit-list-item {
	background: var(--chip-bg);
}
.med-edit-list-remove {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 5px;
	margin-left: -5px;
	margin-right: -3px;
}
.med-edit-list-qty-picker {
	margin-left: auto;
	flex: 0 0 100px;
}
.med-edit-list-item-title {
	font-size: 15px;
	font-weight: 600;
}
.med-edit-list-item-subtitle {
	display: flex;
	align-items: center;
	gap: 3px;
	color: var(--text-muted);
	font-size: 12px;
	margin-top: 2px;
}
.med-edit-list-item-subtitle-icon {
	width: 16px;
	height: 16px;
}
.med-edit-list-add-more {
	margin-top: 20px;
}
.reminder-form-config-meds-list .med-edit-list-add-more-btn {
	width: calc(100% + 16px);
	--btn-text: var(--text-muted);
	background: none;
	border: 1px dashed var(--text-muted);
	font-weight: 600;
	border-radius: 8px;
	padding: 12px;
	margin: 0 -8px;
}
.reminder-form-config-meds-list .med-edit-list-add-more {
	margin-top: 12px;
}
.med-select-option {
	overflow: hidden; /* for text-overflow */
}
.med-select-option-subtitle {
	color: var(--text-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.med-select-last-entry {
	display: flex;
	align-items: center;
	gap: 3px;
}
.med-select-last-entry-icon {
	width: 16px;
	height: 16px;
	--btn-text: var(--text-muted);
}
.med-select-new-label {
	margin-left: 8px;
}
.med-select-empty {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
	margin: auto;
	padding: 20px 0;
}
.med-select-empty-icon {
	height: 72px;
	width: 72px;
	padding: 8px;
}
.med-select-empty-header {
	font-size: 18px;
	margin-bottom: 20px;
}
.med-list-search-icon {
	position: absolute;
	right: -10px;
	--btn-text: var(--theme-color-text);
	background: var(--theme-color-bg);
}
.med-list-search-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: -10px;
	margin-bottom: 20px;
}
.med-list-search-wrap .search-bar {
	flex-grow: 1;
}
.med-list-empty {
	text-align: center;
	color: var(--text-muted);
	margin: 30px 0 10px;
}
.med-list-sort-icon.overflow-menu-wrap {
	position: absolute;
	left: -10px;
}
.med-list-groups-filter-bar {
	margin-bottom: 15px;
}
@media (hover: hover) {
	.med-list-search-icon:hover {
		--btn-text: var(--theme-color-primary);
		background: var(--theme-color-light);
	}
}
.med-list-row-subheader-item {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.med-list-row-subheader-item .tag-label {
	font-size: 12px;
}
.med-list-row-subheader-icon {
	width: 15px;
	height: 15px;
}
.med-list-download-usage-modal-header {
	margin: 25px 0 12px;
	font-size: 16px;
	font-weight: 600;
}
.em-info-preview-disclaimer {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 600;
}
.em-info-critical-note {
	font-weight: 600;
	margin: 15px 0;
}
.em-section {
	padding: 15px 12px;
	margin: 15px 0;
	border: 3px solid var(--theme-color-primary);
	border-radius: var(--card-border-radius);
}
.em-section-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 22px;
	border-bottom: 2px solid var(--theme-color-primary);
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.em-section-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	--btn-text: #fff;
	background: var(--theme-color-btn);
	padding: 8px;
	flex-shrink: 0;
	margin-right: 12px;
	overflow: visible;
}
.em-section-count {
	font-size: 15px;
	margin-left: auto;
}
.em-section-notes {
	white-space: pre-wrap;
}
.em-row-title {
	font-size: 18px;
	font-weight: 600;
}
.em-row {
	margin: 1em 0;
}
.em-row-user-note {
	color: var(--text-muted);
	font-size: 15px;
}
.em-no-data {
	font-size: 18px;
	color: var(--text-muted);
	margin: 10px 0;
}
.em-inactive-header {
	font-weight: 600;
	border-bottom: var(--card-separator);
	margin-top: 30px;
	margin-bottom: 10px;
	color: var(--text-muted);
}
.em-show-inactive-btn {
	margin-top: 20px;
}
.em-info-accuracy-note {
	margin: 10px 0 5px;
	font-size: 14px;
}
.em-info-name {
	font-size: 26px;
	font-weight: 600;
}
.em-row-subtitle {
	font-size: 15px;
}
@media (max-width: 600px) {
	.em-section {
		margin-left: -8px;
		margin-right: -8px;
	}
}
.med-detail-modal-name-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
}
.med-detail-modal-name-wrap .btn {
	flex-shrink: 0;
}
.med-detail-modal-name {
	flex-grow: 1;
	font-weight: 600;
}
.med-detail-info-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 5px;
}
.med-detail-info-subtitle.active {
	color: var(--metric-green-text);
	font-weight: 600;
}
.med-detail-info-subtitle.inactive {
	color: var(--btn-red-text);
	font-weight: 600;
}
.med-detail-modal-calendar {
	border-top: var(--card-separator);
	padding-top: 10px;
}
.med-detail-modal-chart-header-wrap {
	margin-bottom: 15px;
}
.med-detail-modal-chart-header {
	font-size: 16px;
	font-weight: 600;
}
.med-detail-linked-record-btn {
	margin-top: 10px;
}
.med-detail-modal-supply-reminder-text {
	font-size: 14px;
}
.med-detail-modal-supply-reminder-text.warn {
	color: var(--btn-red-text);
}
.med-detail-supply-card-btns {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.btn.round-btn.med-detail-supply-settings-btn {
	padding: 0.5em;
}
.med-detail-reminder-btn {
	justify-content: space-between;
	width: calc(100% + 40px);
	padding: 10px 20px;
	text-align: left;
	margin: 0 -20px;
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
}
.med-detail-reminder-btn-content {
	overflow: hidden;
}
.med-detail-reminder-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fhir-notes textarea {
	height: 4em;
}
.fhir-notes-item-display {
	margin: 1em 0;
}
.med-calendar-wrap {
	padding-bottom: 40px;
}
.med-calendar-wrap .calendar-month-day {
	height: 70px;
}
.med-calendar-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-bottom: 10px;
}
.med-calendar-day-dose {
	display: flex;
	align-items: center;
}
.med-calendar-day-dose-num {
	color: var(--theme-color-text);
	font-size: 14px;
	font-weight: 600;
	margin-right: 2px;
}
.med-calendar-day-dose-icon {
	--btn-text: var(--theme-color-primary);
	width: 18px;
	height: 18px;
}
@media (max-width: 700px) {
	.med-calendar-day .calendar-month-day {
		height: 60px;
	}
}
.med-calendar-entries {
	padding: 8px 15px;
}
.med-calendar-entries-header {
	text-align: center;
	font-weight: 600;
	margin-bottom: 10px;
}
.med-calendar-entries-empty {
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 30px;
}
.med-calendar-entry-name {
	word-break: break-word;
	margin-bottom: 2px;
}
.med-calendar-entry-dose {
	margin-left: 10px;
	color: var(--theme-color-text);
	font-weight: 600;
}
.activity-list-row.data-entry-row {
	display: block;
}
.activity-list-row-title {
	display: flex;
	align-items: flex-start;
	padding-bottom: 5px;
}
.activity-list-row-name {
	flex-grow: 1;
}
.activity-list-row-time {
	flex: 0 0 150px;
	text-align: right;
}
.activity-list-row-time,
.activity-list-row-source {
	font-size: 0.9em;
	color: var(--text-muted);
	margin-top: 8px;
}
.activity-list-row-details {
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.activity-list-detail {
	display: flex;
	align-items: center;
	gap: 5px;
}
.activity-list-detail-value {
	text-align: left;
	color: var(--theme-color-text);
}
.activity-list-detail-icon {
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	fill: var(--theme-color-text);
}
.activity-detail-header {
	font-size: 18px;
}
.activity-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
}
.activity-detail-label {
	font-size: 13px;
	color: var(--theme-color-text);
	font-weight: 600;
	margin-bottom: 2px;
}
.activity-detail-value {
	font-weight: 600;
	font-size: 18px;
}
.food-list-row.data-entry-row {
	display: block;
}
.food-list-time-source {
	color: var(--text-muted);
	font-size: 12px;
	margin-bottom: 2px;
}
.food-list-row-nutrients {
	margin-top: 2px;
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.food-list-nutrient {
	text-align: left;
	color: var(--theme-color-text);
}
.food-list-nutrient-unit {
	font-size: 0.8em;
	margin-left: 3px;
}
.food-list-loading {
	display: flex;
	align-items: center;
	gap: 15px;
}
.food-list-error {
	font-size: 14px;
	color: var(--red-error);
}
.food-list-row-notes {
	margin-top: 4px;
	font-size: 13px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.food-detail-name {
	font-size: 18px;
}
.food-detail-nutrient-grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.food-detail-nutrient-name {
	font-size: 13px;
	color: var(--theme-color-text);
	font-weight: 600;
	margin-bottom: 2px;
}
.food-detail-nutrient-unit {
	color: var(--text-muted);
	font-size: 12px;
	margin-left: 3px;
}
.sleep-list-row.data-entry-row {
	display: block;
}
.sleep-list-time-source {
	color: var(--text-muted);
	font-size: 12px;
	margin-bottom: 2px;
}
.btn.sleep-detail-sources-btn {
	display: flex;
	margin: 8px 0 15px;
}
.sleep-detail-time {
	font-size: 18px;
	margin-top: 4px;
}
.sleep-detail-duration {
	font-size: 32px;
	margin-top: 12px;
}
.sleep-detail-stage-chart {
	padding: 2px 0 20px;
}
.sleep-detail-stages-chart-axis {
	display: flex;
	justify-content: space-between;
	color: var(--text-muted);
	font-size: 13px;
	margin-top: 20px;
}
.sleep-detail-stage-bar-label {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	margin-top: 18px;
}
.sleep-detail-stage-bar {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 6px;
	border-radius: 6px;
	margin: 5px 0;
	background: var(--hover-gray);
}
.sleep-detail-stage-bar-fill {
	position: absolute;
	height: 10px;
	min-width: 3px;
	border-radius: 3px;
}
.sleep-detail-stage-info-bar.stage-wake,
.sleep-detail-stage-bar-fill.stage-wake {
	background: var(--red-metric);
}
.sleep-detail-stage-info-bar.stage-rem,
.sleep-detail-stage-bar-fill.stage-rem {
	background: #98a1e4;
}
.sleep-detail-stage-info-bar.stage-light,
.sleep-detail-stage-bar-fill.stage-light {
	background: var(--theme-color-primary);
}
.sleep-detail-stage-info-bar.stage-deep,
.sleep-detail-stage-bar-fill.stage-deep {
	background: var(--theme-color-text);
}
.sleep-detail-stage-info {
	padding: 0 0 15px;
}
.sleep-detail-stage-info-bar {
	height: 8px;
	border-radius: 4px;
}
.sleep-detail-stage-info-label {
	margin: 15px 0 4px;
	font-size: 15px;
}
.metric-chart-info {
	margin-bottom: 15px;
	height: 50px; /* fixed height so the chart below doesn't keep moving */
}
.metric-chart-info-agg-label {
	font-size: 0.8em;
	margin-right: 5px;
}
.metric-chart-info-value {
	display: flex;
	align-items: baseline;
	font-size: 24px;
	line-height: 24px;
}
.metric-chart-info-unit {
	font-size: 14px;
	color: var(--text-muted);
	margin-left: 8px;
}
.metric-chart-info-value-extra {
	font-size: 14px;
	color: var(--text-muted);
	margin-left: 16px;
}
.metric-chart-info-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 5px;
}
.metric-chart-info-dot {
	padding: 0 8px;
}
.metric-chart-info-more-btn {
	margin-left: auto;
	font-size: 14px;
}

.percentile-shade-5 {
	fill: var(--text-muted);
	opacity: 1;
}
.percentile-shade-10,
.percentile-shade-95 {
	fill: var(--text-muted);
	opacity: 0.5;
}
.percentile-shade-25,
.percentile-shade-90 {
	fill: var(--text-muted);
	opacity: 0.25;
}
.percentile-shade-50,
.percentile-shade-75 {
	fill: none;
}
.percentile-path {
	fill: none;
	stroke: none;
	stroke-dasharray: 2 4;
}
#percentile-path-50 {
	stroke: var(--text-muted);
}
.chart {
	--chart-color-highlight: #58c7ff;
	--chart-color: var(--chart-blue-dark);
}
.darkmode .chart {
	--chart-color: var(--chart-blue);
}
.theme:not(.theme-labs) .chart,
.chart-themed {
	--chart-color-highlight: var(--theme-color-shadow);
	--chart-color: var(--theme-color-chart);
}
.chart .color-green {
	--chart-color-highlight: var(--metric-green-light);
	--chart-color: var(--metric-green);
}
.chart .color-orange {
	--chart-color-highlight: #f19b6933;
	--chart-color: var(--orange-metric);
}
.chart .color-red {
	--chart-color-highlight: #f1696933;
	--chart-color: var(--red-metric);
}
.chart-btns {
	display: flex;
	border-radius: 32px;
	background: var(--surface-bg-muted);
	margin-top: 35px;
}
.chart-btn {
	flex-grow: 1;
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
}
.chart-btn.selected {
	opacity: 1;
	--btn-color: var(--theme-color-btn);
	--btn-color-hover: var(--theme-color-btn);
	--btn-text: #fff;
}
.chart-agg-btn {
	flex-grow: 1;
	max-width: 96px;
	margin-left: 5px;
}
.chart-agg-btn select {
	border-radius: 32px;
	text-align: center;
	text-align-last: center; /* hack for safari */
	border: 1px solid #888;
	padding-top: 2px;
	padding-bottom: 2px;
	background: var(--surface-bg);
}
.chart-axes {
	position: relative;
	border: dashed var(--border-color);
	border-width: 0 0 1px 1px;
	border-radius: 0 0 0 3px;
	margin: 0 0 30px 0;
}
.chart-axes.has-right-y-axis {
	border-width: 0 1px 1px 1px;
	border-radius: 0 0 3px 3px;
}
.chart-axes.loading {
	pointer-events: none;
	opacity: 0.5;
}
.chart-axes .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;
	--spinner-color: var(--theme-color-primary);
}
.chart-x-min,
.chart-x-max,
.chart-y-min,
.chart-y-max,
.chart-shading-label {
	position: absolute;
	padding: 0 5px 0 3px;
	font-size: 0.8em;
	white-space: nowrap;
	z-index: 1;
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, 0.9);
	pointer-events: none;
	min-width: 16px;
	text-align: center;
}
.chart-y-min.right,
.chart-y-max.right,
.chart-shading-label.right {
	right: 0;
	border-radius: 10px 0 0 10px;
	padding: 0 3px 0 5px;
}
.chart-y-min.left,
.chart-y-max.left,
.chart-shading-label.left {
	left: 0;
}
.chart-shading-label {
	margin-top: -0.7em;
}
.darkmode .chart-y-min,
.darkmode .chart-y-max,
.darkmode .chart-shading-label {
	background: rgba(48, 48, 48, 0.9);
}
.chart-x-min {
	padding: 4px 0 0 0;
	background: none;
	left: 0;
	top: 100%;
}
.chart-x-max {
	padding: 4px 0 0 0;
	background: none;
	right: 0;
	top: 100%;
}
.chart-y-min {
	bottom: 0;
}
.chart-y-max {
	top: 0;
}
.chart-shading {
	fill: var(--reference-range-chart-shading);
}
.chart-shading.gray {
	--reference-range-chart-shading: var(--hover-gray);
}
.chart-shading.green {
	--reference-range-chart-shading: var(--chart-shading-green);
}
.chart-shading.green-yellow {
	--reference-range-chart-shading: var(--chart-shading-green-yellow);
}
.chart-shading.yellow {
	--reference-range-chart-shading: var(--chart-shading-yellow);
}
.chart-shading.orange {
	--reference-range-chart-shading: var(--chart-shading-orange);
}
.chart-shading.red {
	--reference-range-chart-shading: var(--chart-shading-red);
}
.chart-points {
	width: 100%;
	height: auto; /* maintain aspect ratio when scaling with browser window */
	position: relative;
	display: block; /* remove inline-block space below svg */
}
.chart-data-point {
	stroke: var(--chart-color);
	stroke-width: 1;
	fill: var(--surface-bg);
	cursor: pointer;
}
.chart-data-point.focused {
	fill: var(--chart-color);
}
.chart-data-point.incomplete {
	stroke-dasharray: 3 2;
}
.chart-data-point.no-interact {
	cursor: default;
}
.chart-data-point-latest {
	fill: var(--chart-color);
	animation: bgColorTransition 2s infinite;
}
@keyframes bgColorTransition {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}
.chart-data-line {
	stroke: var(--chart-color);
	stroke-width: 1.5;
	stroke-linejoin: round;
	fill: none;
}
.chart-data-line.dashed {
	stroke-dasharray: 5 2;
}
.chart-data-line.dotted {
	stroke-dasharray: 2 1;
}
.chart-data-line.faded {
	opacity: 0.2;
}
.chart-data-bar {
	fill: var(--chart-color);
	cursor: pointer;
}
.chart-data-bar.no-interact {
	cursor: default;
}
.chart-data-bar.incomplete {
	stroke-dasharray: 3 2;
	stroke: var(--chart-color);
	stroke-width: 1;
	fill: none;
}
.chart-point-connector.focused,
.chart-point-range.focused,
.chart-data-bar.focused {
	opacity: 0.6;
}
.chart-point-connector.faded,
.chart-point-range.faded,
.chart-data-bar.faded {
	opacity: 0.2;
}
.chart-data-bar.incomplete.focused {
	fill: var(--chart-color-highlight);
	opacity: 1;
}
.chart-hover-line {
	stroke: var(--chart-color);
	stroke-width: 1;
	fill: none;
	opacity: 0.5;
}
.chart-hover-line.gray {
	stroke: var(--icon-gray);
	opacity: 0.3;
}
.chart-point-range {
	fill: var(--chart-color);
}
.chart-point-connector {
	stroke-width: 1;
	stroke: var(--chart-color);
}

line.chart-annotation-line {
	stroke: var(--logo-text);
	stroke-dasharray: 2 4;
	stroke-width: 1;
	stroke-linecap: round;
	opacity: 0.3;
}
circle.chart-annotation-point {
	stroke: none;
	fill: var(--logo-text);
	opacity: 0.3;
}
.chart-annotation-line.focused,
.chart-annotation-point.focused {
	opacity: 1;
}
.chart-annotation-icon-bg {
	fill: #fff;
	stroke: var(--theme-color-btn);
}
.chart-annotation-icon.focused,
.chart-annotation-icon-bg.focused {
	opacity: 0.3;
}
.chart-annotation-label {
	position: absolute;
	top: 0;
	color: #fff;
	background: rgba(97, 97, 97, 0.9);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 12px;
	pointer-events: none;
	z-index: 1;
}
.chart-point-info {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 15px;
	margin: 0;
	pointer-events: none;
	opacity: 0.9;
	z-index: 1;
	max-width: 45%;
}
.chart-point-info.right {
	left: auto;
	right: 10px;
}
.chart-point-info-value-row {
	display: flex;
	align-items: center;
	gap: 5px;
}
.chart-point-info-dataset-label {
	color: var(--chart-color);
	font-size: 14px;
	font-weight: 600;
}
.chart-point-date {
	color: var(--text-muted);
}
.chart-context-info {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-top: 20px;
}
.chart-context-info-warning {
	color: var(--orange-warn);
}
.chart-percentile-text {
	fill: gray;
}
.metric-data-modal-row {
	background: var(--btn-color);
}
.metric-data-modal-row-body {
	flex-grow: 1;
}
.metric-data-modal-row-body .lab-record-row {
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
}
.metric-data-modal-row-source {
	display: flex;
	align-items: center;
	gap: 5px;
	--btn-text: var(--icon-gray);
	font-size: 0.9em;
	color: var(--text-muted);
	margin-top: 6px;
}
.parsed-results-viewer {
	display: flex;
	align-items: flex-start;
	gap: 25px;
	justify-content: center;
	margin:  0 15px;
	pointer-events: none; /* don't steal the modal onClickOutside */
}
.parsed-results-viewer .file-viewer-page-list {
	margin: 0;
	pointer-events: auto;
}
.parsed-results-viewer-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: var(--surface-bg-24dp);
	margin-top: 15px;
	min-width: 400px;
	max-width: 450px;
	pointer-events: auto;
}
.parsed-results-viewer-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 8px 0;
}
.parsed-results-viewer-add-btn {
	position: absolute;
	right: 10px;
	padding: 5px;
}
.parsed-results-viewer-add-btn .plus-svg {
	border: 1px solid var(--btn-text);
	border-radius: 50%;
	padding: 4px;
}
.parsed-results-viewer-nav-title {
	flex-grow: 1;
	max-width: 80px;
	text-align: center;
	user-select: none;
}
.parsed-results-viewer-body {
	flex-grow: 1;
	padding: 0 15px 20px;
	overflow-y: auto;
}
.parsed-results-viewer-row-type {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--theme-color-text);
	margin-bottom: 10px;
}
.parsed-results-viewer-row-type .daily-log-type-icon {
	width: 18px;
	height: 18px;
}
.parsed-results-viewer-row-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.parsed-results-viewer-row-name-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	word-break: break-word;
}
.parsed-results-viewer-row-value {
	display: flex;
	align-items: baseline;
	margin-top: 2px;
}
.parsed-results-viewer-row-unit {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-left: 6px;
}
.parsed-results-viewer-row-range,
.parsed-results-viewer-row-subtitle {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-top: 4px;
}
.parsed-results-viewer-row-wrong {
	color: var(--btn-red-text);
}
.parsed-results-viewer-row-edited {
	color: var(--color-help-text);
	font-size: 0.8em;
}
.parsed-results-viewer-row-body.wrong .parsed-results-viewer-row-name-wrap,
.parsed-results-viewer-row-body.wrong .parsed-results-viewer-row-value,
.parsed-results-viewer-row-body.wrong .parsed-results-viewer-row-range {
	opacity: 0.5;
}
.parsed-results-viewer-row-body.wrong .parsed-results-viewer-row-name {
	text-decoration: line-through;
}
@media (max-width: 960px) {
	.parsed-results-viewer {
		margin: 0;
	}
	.parsed-results-viewer .file-viewer-page-list {
		margin-bottom: 250px; /* make space for the viewer card */
	}
	.parsed-results-viewer-card {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		width: 100%;
		min-width: auto;
		max-width: 600px;
		min-height: 230px; /* prevents height from changing when navigating results */
		max-height: calc(max(40vh, 260px));
		border-radius: 8px 8px 0 0;
		box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 12px rgba(0, 0, 0, 0.23);
		z-index: 1; /* above the modal header, so child modals can display above */
	}
	.parsed-results-viewer-card.edit {
		max-height: none;
	}
}
.parsed-result-edit-form {
	padding: 15px;
}
.parsed-result-edit-form-note-wrap {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 5px;
	cursor: pointer;
}
.parsed-result-edit-form-note {
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icon-btn.parsed-result-edit-form-note-edit {
	width: 32px;
	height: 32px;
	padding: 6px;
}
.parsed-result-edit-form-note-add {
	margin-top: 15px;
}
.card-section.lab-record-rows {
	padding: 10px 20px;
}
.lab-record-row {
	width: calc(100% + 40px);
	text-align: left;
	padding: 10px 20px;
	margin-left: -20px;
	margin-right: -20px;
}
.lab-record-row.has-info:hover {
	background: var(--hover-gray);
}
.lab-record-title {
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 2px;
}
.lab-record-value-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lab-record-value {
	font-size: 18px;
}
.lab-record-unit {
	font-size: 0.8em;
	color: var(--text-muted);
}
.lab-record-grouped-values {
	color: var(--text-muted);
	font-size: 12px;
}
.lab-record-narrative {
	white-space: pre-wrap;
	width: 100%;
	font-size: 0.85em;
}
.record-term-header {
	display: flex;
	padding: 15px 15px 0;
}
.record-term-header-title {
	font-size: 16px;
}
.record-term-subtitle {
	font-size: 14px;
	opacity: 0.75;
}

.record-term-section {
	padding: 15px;
}
.record-term-section + .record-term-section {
	border-top: var(--card-separator);
}
.record-term-section h3 {
	margin-bottom: 10px;
}
.record-term-section.record-term-section-range {
	padding: 0;
}
.record-term-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.record-term-section-title {
	font-size: 16px;
	font-weight: 600;
}
.record-term-range-select {
	text-align: center;
	padding: 0 15px 15px;
	margin-top: -15px;
}
.btn.outline.record-term-range-select-btn {
	--btn-text: var(--text);
	max-width: 100%;
}
.record-term-range-select-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.record-term-reference-range-sources {
	padding: 15px;
	font-size: 0.6em;
	color: var(--text-muted);
}
.record-term-range-text {
	font-size: 0.8em;
	text-align: center;
	padding: 0 15px 15px;
	margin-top: -15px;
}

/* Term Info */
.record-term-alias {
	font-size: 14px;
	margin-bottom: 15px;
}
.record-term-source-prefix {
	margin-bottom: 10px;
}
.record-term-read-more {
	margin-top: 15px;
}
.record-term-source-footnote {
	font-size: 14px;
	color: var(--text-muted);
}

/* Grouped Values */
.record-term-grouped-value {
	display: flex;
	justify-content: space-between;
}
.record-term-grouped-value-date {
	color: var(--text-muted);
}
.metric-data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	row-gap: 5px;
	column-gap: 5px;
	padding: 5px;
}
.metric-wrap {
	display: flex;
	flex-direction: column; /* So headers have the same height */
	text-align: left;
	padding: 10px;
	border-radius: 2px;
	cursor: default;
}
.metric-wrap.has-info {
	cursor: pointer;
}
@media (hover: hover) {
	.metric-wrap.has-info:hover {
		background: var(--hover-gray);
	}
}

/* So headers have the same height */
.metric-header {
	flex: 1;
}
.metric-content {
	min-height: 80px;
	max-width: 100%; /* chrome-only css bug, width not constrained within a <button> if flex-direction:column and grid css are used */
}

.metric-title {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	display: flex;
	align-items: center;
}
.metric-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.5;
}
.metric-value {
	font-size: 2.0em;
	color: var(--reference-range-text, var(--metric-green-text));
	position: relative;
}
.metric-unit {
	display: inline;
	font-size: 0.33em;
	color: var(--text-muted);
	margin-left: 5px;
}
.metric-note {
	font-size: 0.8em;
	color: var(--text-muted);
}
.metric-no-value {
	padding: 20px 0;
	color: #ccc;
}
.metric-interpretation {
	color: var(--reference-range-text, var(--text-muted));
	font-size: 20px;
}

.metric-detail {
	align-items: center;
	padding: 15px;
	overflow: hidden; /* prevent reference range labels from increasing the width */
}
.metric-source {
	color: var(--text-muted);
}
.metric-date {
	font-size: 14px;
	color: var(--text-muted);
}
.metric-detail .metric-no-value {
	font-size: 20px;
}
.metric-detail .reference-range-wrap {
	width: 400px;
	max-width: 100%;
	--rr-height: 12px;
	padding: 10px 0 20px;
}
.metric-detail .reference-range-value-dot {
	border-width: 3px;
}

@media (max-width: 450px) {
	.metric-data-grid {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* must fit two columns on 360px devices */
	}
}
#tooltip-root {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: var(--tooltip-z-index);
	width: 100%;
}
.tooltip-wrap {
	display: inline-flex; /* align svg icon, remove excess inline space */
	align-items: center;
}
.tooltip-wrap.has-tooltip {
	margin-bottom: -1px; /* remove extra 1px block height added by has-tooltip border-bottom */
}
.tooltip {
	position: absolute;
	color: #fff;
	background: #616161;
	border-radius: 2px;
	white-space: normal;
	padding: 5px 8px;
	min-width: 56px;
	max-width: min(80vw, 350px);
	text-align: center;
	font-size: 12px;
	pointer-events: none;
}
.tooltip-wrap .help-svg,
.tooltip-info-svg {
	width: 16px;
	height: 16px;
	margin-left: 5px;
	flex-shrink: 0;
	border-radius: 50%;
	cursor: pointer;
}
.tooltip-info-svg {
	background: #bbb;
	stroke: var(--surface-bg);
	stroke-width: 3px;
}
.darkmode .tooltip-info-svg {
	background: rgba(255, 255, 255, 0.4);
}
@media (hover: hover) {
	.tooltip-info-svg:hover {
		background: #999;
	}
	.darkmode .tooltip-info-svg:hover {
		background: rgba(255, 255, 255, 0.54);
	}
}
.select-modal-row {
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	width: 100%;
	text-align: left;
	justify-content: space-between;
	padding: 20px;
}
.select-modal-check {
	--btn-text: var(--theme-color-primary);
}
.select-modal-row + .select-modal-row {
	border-top: var(--card-separator);
}
.cbc-record-section {
	padding: 5px;
	border-top: var(--card-separator);
}
.record-card-overflow-btn {
	margin: -10px -15px -10px 0;
}
.allergy-row {
	--allergy-low: var(--metric-green);
	--allergy-moderate: #fb0;
	--allergy-high: #f60;
	--allergy-very-high: #f00;
	display: flex;
	align-items: center;
	width: 100%;
}
.allergy-row + .allergy-row,
.allergy-row + .btn {
	margin-top: 15px;
}
.allergy-name {
	margin-right: 15px;
}
.allergy-source {
	font-size: 0.8em;
	color: var(--text-muted);
}
.allergy-value {
	margin-left: auto;
	width: 150px;
	min-width: 150px;
}
.allergy-value-text {
	text-align: right;
	font-size: 0.9em;
	margin: 0 2px 2px;
}
.allergy-text-life-threatening {
	font-weight: 600;
}
.allergy-value-number {
	float: left;
}
.allergy-bars {
	display: flex;
}
.allergy-bar-wrap {
	position: relative;
	width: calc(25% - 4px);
	margin: 0 2px;
	height: 10px;
}
.allergy-bar {
	width: 100%;
	height: 10px;
	border-radius: 2px;
}
.allergy-bar-1 {
	background: var(--allergy-low);
}
.allergy-bar-2 {
	background: var(--allergy-moderate);
}
.allergy-bar-3 {
	background: var(--allergy-high);
}
.allergy-bar-4 {
	background: var(--allergy-very-high);
}
.allergy-bar-overlay {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	background: var(--surface-bg-8dp);
	opacity: 0.9;
}
.allergy-bar-overlay-striped {
	opacity: 0.25;
}
.allergy-bar-overlay-striped::after {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 8px, transparent 8px, transparent 16px);
}
.darkmode .allergy-bar-overlay-striped::after {
	background: repeating-linear-gradient(45deg, rgba(47, 47, 47, 0.3) 0, rgba(47, 47, 47, 0.3) 8px, transparent 8px, transparent 16px);
}
.vaccination-record-name {
	font-size: 18px;
	padding-bottom: 5px;
}
.vaccination-record-dose,
.vaccination-record-subtitle {
	color: var(--text-muted);
}
.vaccination-record-diseases-wrap {
	padding-bottom: 10px;
}
.vaccination-record-diseases {
	margin: 0;
}
.vaccination-record-dose {
	display: flex;
	align-items: baseline;
}
.vaccination-record-unit {
	font-size: 0.7em;
	padding-left: 5px;
}
.vaccination-record-row {
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
	font-size: 16px;
	width: 100%;
	text-align: left;
	justify-content: space-between;
}
.clinical-note {
	padding: 15px 20px;
	border-top: var(--card-separator);
}
.clinical-note-header {
	font-weight: 600;
}
.clinical-note-header.can-hide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% + 40px);
	padding: 15px 20px;
	margin: -15px -20px;
	border-radius: 0;
	--btn-text: currentColor;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
}
.clinical-note-header.can-hide:not(:last-child) {
	margin-bottom: -5px;
}
.clinical-note-body {
	margin: 10px 0;
	font-size: 0.85em;
	white-space: pre-line;
}
.clinical-note-highlighted-text {
	background: var(--text-highlight-bg);
}
.clinical-note-abbreviation {
	display: inline-block;
	background: var(--hover-gray);
	padding: 0 3px;
	margin-bottom: -1px;
	border-bottom: 1px solid var(--chart-blue);
	border-radius: 3px;
}

.clinical-note-summarize-btn-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
}
.clinical-note-summarize-help-btn {
	width: 36px;
	height: 36px;
	margin-right: -36px;
	--btn-text: var(--theme-color-primary);
}
.clinical-note-summary {
	background: var(--theme-color-bg);
	padding: 15px 12px;
	margin: 15px -8px 25px;
	border-radius: var(--card-border-radius);
}
.clinical-note-summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: -12px -12px 12px 0;
}
.clinical-note-summary-title {
	color: var(--theme-color-text);
	font-weight: 600;
	font-size: 14px;
	flex-grow: 1;
}
.clinical-note-summary-btns .icon-btn {
	--btn-text: var(--theme-color-primary);
}
.clinical-note-summary-preview {
	color: var(--text-muted);
	white-space: pre-wrap;
}
@media (min-width: 600px) {
	.clinical-note-header-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
	}
	.clinical-note-header-wrap .clinical-note-summarize-btn-wrap {
		margin-top: 0;
	}
	.clinical-note-header-wrap .clinical-note-summarize-help-btn {
		margin-right: -12px;
	}
}
.feedback-form {
	text-align: left;
}
.feedback-form-length-counter {
	color: var(--text-muted);
	text-align: right;
	font-size: 0.85em;
	margin-top: 3px;
}
.feedback-email-msg {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 15px;
}
.feedback-btn.btn {
	--btn-text: var(--color-help-text);
	--btn-color: var(--color-help-color);
	--btn-color-hover-over-white: var(--color-help-color-hover-over-white);
}
.feedback-form .notice.primary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: -1px;
	z-index: 2;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	--btn-text: var(--theme-color-primary);
	padding: 7px 15px;
}
.feedback-form .notice .btn,
.feedback-form .notice .tooltip-wrap {
	margin-left: auto;
}
.feedback-form .notice .tooltip-info-svg {
	background: var(--theme-color-primary);
}
.feedback-form .textarea-input {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.feedback-guide-btn {
	font-size: 1em;
}
.guides-modal-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0 10px 10px;
}
.video-modal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	pointer-events: none;
}
.video-modal-wrap {
	pointer-events: auto;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16/9;
}
.video-modal-video {
	width: 100%;
	height: 100%;
}
.feature-info-modal .card-section {
	font-size: 15px;
}
.feature-info-modal-premium {
	background: var(--theme-color-light);
}
.feature-info-modal-icon-row {
	display: flex;
	align-items: center;
}
.feature-info-modal-icon {
	--btn-text: var(--theme-color-primary);
	margin-right: 15px;
	width: 2em;
	height: 2em;
}
.feature-info-modal-premium-btns {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 12px;
}
.feature-info-modal-icon-row + .feature-info-modal-premium-btns {
	margin-top: 15px;
}
.feature-info-modal-more {
	background: var(--chip-bg);
	border-radius: var(--card-border-radius);
	padding: 1px 15px;
	margin: 0 -8px;
}
.feature-info-modal-feedback {
	text-align: center;
	margin-top: 40px;
}
.lab-test-section-title {
	font-weight: 600;
	padding-top: 10px;
	padding-left: 15px;
}
.cbc-wbc-table {
	padding: 10px 15px 15px;
}
.cbc-wbc-head {
	display: flex;
	border-bottom: var(--card-separator);
	color: var(--text-muted);
	font-weight: 600;
	font-size: 14px;
	padding-bottom: 3px;
}
.cbc-wbc-row {
	display: flex;
	align-items: center;
	min-height: 50px;
}
.cbc-wbc-row.has-info:hover {
	cursor: pointer;
	background: var(--hover-gray);
}
.cbc-wbc-row + .cbc-wbc-total {
	border-top: var(--card-separator);
}
.cbc-wbc-name {
	flex-grow: 1;
}
.cbc-wbc-percent {
	flex: 0 0 150px;
}
.cbc-wbc-count {
	flex: 0 0 150px;
}
.cbc-wbc-count .metric-unit {
	font-size: 12px;
}
.cbc-wbc-range {
	flex: 0 0 200px;
}
.cbc-wbc-row .cbc-wbc-range {
	padding-top: 20px;
}
@media (max-width: 800px) {
	.cbc-wbc-row {
		flex-wrap: wrap;
		padding-top: 15px;
	}
	.cbc-wbc-name {
		flex-basis: calc(100% - 80px);
		font-weight: 600;
	}
	.cbc-wbc-percent {
		flex: 0 0 80px;
		text-align: right;
	}
	.cbc-wbc-count {
		flex: 1 0 100px;
	}
	.cbc-wbc-head .cbc-wbc-percent,
	.cbc-wbc-head .cbc-wbc-count,
	.cbc-wbc-head .cbc-wbc-range {
		display: none;
	}
}

.insurance-record-item {
	border-top: var(--card-separator);
	padding: 15px 0;
	margin-top: 25px;
}
.insurance-record-item-header {
	font-size: 18px;
	font-weight: 600;
}
.insurance-record-prop-subheader {
	font-size: 14px;
	font-weight: 600;
	margin: 20px -8px 5px;
	padding: 2px 8px;
	background: var(--surface-bg-muted);
	border-radius: 4px;
}
.insurance-record-prop {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
}
.insurance-record-prop-value {
	text-align: right;
}
.insurance-record-adjudication-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 5px 0;
}
.insurance-record-adjudication-row + .insurance-record-adjudication-row {
	border-top: var(--card-separator);
}
.insurance-record-adjudication-row .tooltip-info-svg {
	width: 14px;
	height: 14px;
	margin-left: 6px;
}
.insurance-record-adjudication-row-title {
	display: flex;
	align-items: center;
}
.insurance-record-currency {
	font-size: 0.8em;
	color: var(--text-muted);
	margin-left: 5px;
}

.med-record {
	padding: 15px 20px;
}
.condition-record {
	padding: 15px 20px;
}
/* Type Modal */
.reminder-config-form-type-btns {
	display: flex;
	align-items: flex-start;
	margin: 25px 0;
}
.reminder-config-form-type-btn {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 14px;
}
.reminder-config-form-type-btn-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 12px;
	--btn-text: #fff;
	background: var(--theme-color-btn);
	margin-bottom: 10px;
}
.reminder-config-form-btns {
	padding: 15px;
	margin-top: 0;
}
.reminder-form-notice {
	font-size: 14px;
	padding: 12px 20px;
}
.reminder-form-notice-subtitle {
	color: var(--text-muted);
}

.reminder-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	gap: 15px;
}
.reminder-input-row .form-label {
	margin: 0;
	flex-grow: 1;
}
.reminder-input-subtitle {
	display: block;
	text-align: right;
	font-size: 14px;
	color: var(--text-muted);
}
.reminder-time-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.reminder-remove-time-btn {
	height: 36px;
	width: 36px;
}
.reminder-add-time {
	display: flex;
	margin: 15px 0 8px auto;
}
.reminder-form .days-of-week-select {
	margin-bottom: 20px;
}
.reminder-form-radio {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.reminder-form-radio:not(:last-child) {
	margin-bottom: 20px;
}
.reminder-form .number-input-wrap {
	flex-shrink: 0;
}
.reminder-form .number-input {
	width: 60px;
}
.reminder-form-sec-card.card {
	margin-top: 80px;
}
.reminder-form-sec-title {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 20px;
}
.reminder-form-sec-subtitle {
	text-align: center;
	margin-bottom: 10px;
}
.reminder-form-time-interval-repeat-num {
	margin-right: 5px;
}
.reminder-form-interval-preview {
	background: var(--surface-bg-muted);
	border-radius: 4px;
	padding: 10px 0 5px;
	text-align: center;
}
.reminder-form-interval-preview-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.reminder-form-interval-preview-row {
	padding: 5px 0;
	font-size: 18px;
	font-family: monospace;
}
.reminder-form-interval-preview-error {
	padding: 5px;
	color: var(--red-error);
	font-size: 14px;
}
.reminder-config-form-simple-timing-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.reminder-form-config-fields {
	padding: 8px 0;
}
.reminder-form-advance-modal .reminder-form-config-fields,
.reminder-form-advance-modal .reminder-form-config-once {
	margin-left: -20px;
	margin-right: -20px;
}
.reminder-form-config-field {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	padding: 12px 20px;
	text-align: left;
}
.reminder-form-config-field-subtitle {
	font-size: 12px;
	color: var(--theme-color-text);
}
.reminder-form-config-value {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	color: var(--theme-color-text);
	--btn-text: var(--theme-color-text);
}
.reminder-form-config-once {
	padding: 0 20px 15px;
}
.reminder-form-config-once-options {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4px;
	row-gap: 6px;
	margin-top: 10px;
}

.reminder-form-config-meds-list-header {
	font-weight: 600;
	margin-bottom: 10px;
}
.reminder-form-config-meds-list {
	margin-bottom: 20px;
	border-bottom: var(--card-separator);
}
.reminder-time-next-day {
	text-align: right;
	margin-top: -10px;
}
.days-of-week-select {
	display: flex;
	justify-content: space-between;
	margin: auto;
	max-width: 342px; /* 36px * 7 days + 15px * 6 gaps */
}
.days-of-week-btn.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 15px;
	flex-shrink: 0;
}
.reminder-config-form-entry-types-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 10px;
}
.reminder-config-form-log-add-note {
	margin-top: 20px;
}
.log-reminder-types-edit {
	padding: 10px 0;
}
.log-reminder-types-edit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.log-reminder-types-edit + .log-reminder-types-edit {
	border-top: var(--card-separator);
}
.log-reminder-types-edit-name {
	display: flex;
	align-items: center;
	gap: 10px;
}
.log-reminder-types-edit-name.disabled {
	color: var(--text-muted);
}
.log-reminder-types-edit-name.disabled .daily-log-type-icon {
	--icon-fill: var(--icon-info-gray);
}
.log-reminder-types-edit .daily-log-type-icon {
	width: 24px;
	height: 24px;
}
.log-reminder-types-edit-options {
	padding-top: 20px;
}
.log-reminder-types-edit-options-subtitle {
	font-size: 15px;
	color: var(--text-muted);
	margin-bottom: 12px;
}
.log-reminder-types-edit-more {
	text-align: center;
	margin: 25px 0 10px;
}
.reminder-symptoms-picker-bubbles {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.reminder-symptoms-picker-bubble {
	display: flex;
	max-width: 250px;
	overflow: hidden;
	padding: 4px 6px 4px 12px;
	border-radius: 8px;
	align-items: center;
	gap: 4px;
	background: var(--theme-color-bg);
	border: 1px solid var(--theme-color-bg);
	font-size: 15px;
	cursor: pointer;
}
.reminder-symptoms-picker-bubble.add-btn {
	background: none;
	border: 1px dashed var(--text-muted);
	--btn-text: var(--text-muted);
	padding: 4px 12px;
}
.reminder-symptoms-picker-bubble.selected {
	background: var(--theme-color-shadow);
	border: 1px solid var(--theme-color-primary);
}
.reminder-symptoms-picker-bubble .btn.icon-btn {
	height: 24px;
	width: 24px;
	padding: 4px;
}
.reminder-symptoms-picker-bubble.symptom-bubble:not(.selected):hover {
	background: var(--theme-color-light);
	border: 1px solid var(--theme-color-light);
}
.reminder-symptoms-picker-bubble.add-btn:hover {
	background: var(--chip-bg);
}
.reminder-symptoms-picker-symptom-name {
	display: inline;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.metric-select-option {
	display: flex;
	align-items: center;
	gap: 15px;
}
.metric-select-option .daily-log-type-icon {
	width: 28px;
	height: 28px;
}
.log-reminder-types-row {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 3px 0;
}
.daily-log-type-icon.log-reminder-types-row-icon {
	width: 22px;
	height: 22px;
}
.log-reminder-types-row-subtitle {
	font-size: 15px;
	color: var(--text-muted);
	margin-top: 2px;
}
.event-reminder-offset-row,
.event-reminder-offset-edit-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
}
.event-reminder-offset-remove-btn {
	width: 30px;
	height: 30px;
	padding: 6px;
}
.event-reminder-offset-add-btn {
	margin-top: 20px;
}
.event-reminder-offset-label {
	font-size: 14px;
}
.event-reminder-offset-error {
	font-size: 14px;
	margin-top: 10px;
	color: var(--red-error);
}
.appt-detail-card {
	padding: 15px;
	border-radius: var(--card-border-radius);
	background: var(--theme-color-bg);
	position: relative;
	overflow: hidden;
}
.appt-detail-card-name {
	color: var(--theme-color-text);
	font-weight: 600;
	margin-bottom: 10px;
}
.appt-detail-card-values {
	font-size: 15px;
	margin-bottom: 15px;
}
.appt-detail-card-value {
	display: flex;
	align-items: center;
	gap: 5px;
}
.appt-detail-card-value-icon {
	--btn-text: var(--theme-color-text);
}
.appt-detail-card-bg-icon {
	position: absolute;
	right: -25px;
	bottom: -25px;
	width: 120px;
	height: 120px;
	--btn-text: var(--theme-color-primary);
	opacity: 0.2;
}
.daily-log-card {
	position: relative;
	margin: var(--today-page-card-margin);
}
.daily-log-reminders-btn {
	position: absolute;
	top: 6px;
	right: 0;
	--btn-color: var(--portal-surface-bg);
	border: var(--surface-border);
}
.daily-log-type-dialog {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: 1fr;
}
.card-section.daily-log-type-dialog {
	padding: 10px;
}
.daily-log-type-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 30px 0 15px;
	padding-left: 5px;
	padding-bottom: 5px;
	border-bottom: var(--card-separator);
}
.daily-log-types-more-btn {
	margin: 20px 0 10px;
}
.daily-log-types-more-btn .btn {
	min-width: 140px;
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	padding-right: 0.6em; /* offset down-svg and up-svg */
}
.daily-log-type-btn {
	padding: 8px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
	box-shadow: inset 0 0 0 1px var(--theme-color-primary); /* using border leaves a gap on mobile devices due to pixel density */
	background: var(--surface-bg-8dp);
	overflow: hidden; /* for hiding extra rows */
	user-select: none;
	-webkit-user-select: none;
}
.daily-log-add-custom-btn.full-width {
	width: 100%;
	margin-top: 10px;
}
.daily-log-type-btn.daily-log-add-custom-btn {
	border: 1px dashed var(--text);
	color: var(--text);
	background: none;
	box-shadow: none;
}
.daily-log-type-btn.daily-log-more-btn {
	grid-row: 1;
	grid-column: 1;
}
.daily-log-btn-text {
	font-size: 14px;
	text-align: left;
	line-height: 1.25;

	/* max 2 lines before truncating */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0.14em 0; /* prevents font descent being cutoff */
}
.daily-log-type-icon {
	--icon-fill: var(--theme-color-primary);
	--icon-bg: none;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	flex-shrink: 0;
	overflow: visible; /* prevents the padding from clipping the svg */
	fill: var(--icon-fill);
	background: var(--icon-bg);
	--btn-text: var(--icon-fill);
}
.daily-log-type-icon.daily-log-more-icon {
	background: none;
	fill: none;
	stroke: var(--text);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 12;
}
.daily-log-type-btn .daily-log-type-icon,
.daily-log-type-icon.color-bg {
	--icon-fill: #fff;
	--icon-bg: var(--theme-color-btn);
	padding: 6px;
}
@media (max-width: 360px) {
	.daily-log-type-dialog {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		margin: 0 -12px;
	}
}

/* Modal */
.card-modal-card.daily-log-types-modal .card-header {
	border: none;
	margin-bottom: -10px;
}
.daily-log-types-modal-nfc {
	margin-top: 30px;
	color: var(--text-muted);
	font-size: 0.8em;
	text-align: center;
}
.daily-log-types-modal-nfc .btn {
	font-size: 1em;
}

/* Quick Add Btns */
.daily-log-instant-btns {
	margin: 10px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 8px;
}
.daily-log-instant-btns .daily-log-type-btn {
	border-radius: 50px;
	gap: 10px;
	background: var(--portal-surface-bg);
	box-shadow: var(--portal-surface-shadow);
}
.daily-log-instant-btns .daily-log-type-icon {
	width: 36px;
	height: 36px;
	padding: 4px;
	--icon-fill: var(--theme-color-primary);
	--icon-bg: none;
}
.daily-log-plus-wrap {
	margin-left: auto;
	margin-right: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--theme-color-text);
	--btn-text: currentColor;
}
.daily-log-quick-add-btns {
	--daily-log-quick-add-margin: 4px;
	margin: calc(-1 * var(--daily-log-quick-add-margin));
	padding-top: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	grid-template-rows: auto; /* show 1 row */
	grid-auto-rows: 0; /* hide the rest of the rows */
	overflow: hidden; /* hide the rest of the rows */
}
.daily-log-quick-add-btns .daily-log-type-btn {
	padding: 1px 0;
	border-radius: 6px;
	margin: var(--daily-log-quick-add-margin);
	background: var(--portal-surface-bg);
	box-shadow: var(--portal-surface-shadow);
	gap: 0;
}
.daily-log-quick-add-btns .daily-log-type-icon {
	width: 32px;
	height: 100%;
	min-height: 36px;
	padding: 4px;
	margin-left: 2px;
	margin-right: -2px;
	--icon-fill: var(--theme-color-primary);
	--icon-bg: none;
	border-radius: 0;
}
.daily-log-quick-add-btns .daily-log-more-icon {
	padding: 6px;
	margin-left: 3px;
	margin-right: -3px;
}
.daily-log-quick-add-btns .daily-log-btn-text {
	margin: 0 6px;
	font-size: 13px;
	line-height: 1.1em;
}
/* for custom types without icons */
.daily-log-quick-add-btns .daily-log-btn-text:first-child {
	margin-left: 8px;
	margin-right: 8px;
}
@media (max-width: 680px) {
	.daily-log-quick-add-btns {
		--daily-log-quick-add-margin: 3px;
		grid-template-columns: repeat(auto-fill, minmax(114px, 1fr));
	}
	.daily-log-quick-add-btns .daily-log-btn-text {
		font-size: 12px;
		margin: 0 5px;
	}
}
@media (max-width: 580px) {
	.daily-log-quick-add-btns {
		grid-template-rows: auto auto; /* show 2 rows */
	}
}

.daily-log-type-icon.icon-custom-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--icon-fill);
	font-weight: 600;
	font-size: 1.4em;
	padding: 2px;
}
.daily-log-chart-section .chart {
	margin-top: 15px;
}
@media(hover: hover) {
	/* Only apply hover styles on devices that can hover, so the hover style doesn't "stick" */
	.daily-log-type-btn:hover {
		background: var(--theme-color-light);
	}

	.daily-log-add-custom-btn:hover,
	.daily-log-more-btn:hover {
		background: var(--hover-gray);
	}
}

/* Tag Stats */
.daily-log-tag-row {
	padding: 10px 5px;
}
.daily-log-tag-name {
	margin-bottom: 10px
}
.daily-log-stats {
	display: flex;
	justify-content: space-around;
}
.daily-log-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.daily-log-stat-value {
	font-size: 26px;
}
.daily-log-stat-name {
	font-size: 12px;
}
.daily-list-empty-text {
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
	padding-bottom: 10px;
}
.daily-list {
	width: 100%;
	overflow: hidden;
}
.daily-timeline + .daily-list {
	padding-top: 10px;
}
.daily-list-row {
	display: flex;
	align-items: flex-start;
	padding: 5px;
	margin: 0 -5px;
	text-align: left;
	font-size: 13px;
	gap: 5px;
	--btn-color: transparent;
	cursor: pointer;
}
.daily-list-row-arrow {
	--btn-text: var(--text-muted);
	width: 19px;
	height: 19px;
	margin-top: 1px;
	margin-right: -5px;
}
.daily-list-title {
	padding: 2px 15px 2px 0;
	flex-grow: 1;
	word-break: break-word;
}
.daily-list-time {
	color: var(--text-muted);
	flex-shrink: 0;
	text-align: right;
	padding: 2px 0;
}
.daily-list-row .daily-log-type-icon {
	width: 19px;
	height: 19px;
	margin-top: 1px;
}
.daily-list-show-all {
	display: flex;
	justify-content: center;
	padding: 10px 0 5px;
}
.daily-list-show-all > .btn {
	text-decoration: none;
}
@media (hover: hover) {
	.daily-list-row:hover {
		background: var(--hover-gray);
	}
}
.daily-timeline {
	--icon-width: 22px;
	--bar-height: 10px;
	--bar-margin: 5px;
	padding: 15px 15px 5px;
	overflow: hidden;
	cursor: pointer;
}
.daily-timeline-items {
	position: relative;
	margin-bottom: var(--bar-margin);
	height: var(--icon-width);
}
.daily-timeline-item {
	position: absolute;
	bottom: 0;
	display: flex;
}
.daily-timeline-item.new {
	animation: daily-timeline-icon-appear 0.6s 0.2s cubic-bezier(0.8, 1.52, 0.64, 1) 1;
	transform-origin: left;
}
@keyframes daily-timeline-icon-appear {
	0% {transform: scale(2); z-index: 1;}
	100% {transform: scale(1); z-index: auto;}
}
.daily-timeline-item .daily-log-type-icon {
	display: flex;
	width: var(--icon-width);
	height: var(--icon-width);
	--icon-bg: var(--theme-color-btn);
	--icon-fill: #fff;
	border-radius: 50%;
	padding: 3px;
	margin-left: calc(var(--icon-width) / -2);
	border: 1px solid var(--html-bg);
}
.daily-timeline-sleep {
	position: relative;
	height: var(--bar-height);
	border-radius: 10px;
	background: #BED7F6; /* hct(250, 24, 85) */
	margin-bottom: 15px;
}
.darkmode .daily-timeline-sleep {
	background: #4A586F; /* hct(260, 20, 37) */
}
.daily-timeline-sleep-bar {
	position: absolute;
	top: 0;
	height: 100%;
	background: #7A8BE4; /* hct(278, 50, 60) */
}
.daily-timeline-sleep-bar.fake {
	/* hct(270, 34, 62) */
	background: linear-gradient(to right, transparent 0%, #8194CA 20%, #8194CA 80%, transparent 100%);
}
.darkmode .daily-timeline-sleep-bar.fake {
	/* hct(270, 40 45) */
	background: linear-gradient(to right, transparent 0%, #5169A6 20%, #5169A6 80%, transparent 100%);
}
.daily-timeline-sleep-stage {
	position: absolute;
	top: 0;
	height: 100%;
	pointer-events: none;
}
.daily-timeline-sleep-stage.stage-rem {
	background: #A8B4FF; /* hct(278, 50, 75) */
}
.daily-timeline-sleep-stage.stage-deep {
	background: #3B4BA1; /* hct(278, 50, 35) */
}
.daily-timeline-sleep-stage.stage-wake {
	background: var(--red-metric);
}
.daily-timeline-bedtime {
	position: absolute;
	top: 50%;
	display: flex;
	pointer-events: none;
}
.daily-timeline-bedtime .daily-log-type-icon {
	width: 12px;
	height: 12px;
	margin-top: -6px;
	margin-left: 4px;
	--icon-fill: #fff;
	opacity: 0.9;
}
.daily-timeline-bedtime.fake .daily-log-type-icon {
	margin-left: 15px;
}
.daily-timeline-time-label {
	position: absolute;
	top: 100%;
	margin-top: 3px;
	font-size: 0.75em;
	color: var(--text-muted);
	width: 60px;
	margin-left: -30px;
	text-align: center;
}
.reminder-row-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 15px;
	--reminder-color: var(--text-muted);
	background: var(--theme-color-tint);
	border: 1px solid var(--theme-color-primary);
	border-radius: var(--card-border-radius);
	width: 100%;
	overflow: hidden;
}
.darkmode .reminder-row-card {
	background: var(--theme-color-light);
	border: var(--surface-border);
}
.reminder-row-card.past {
	--reminder-color: #cd4543;
}
.darkmode .reminder-row-card.past {
	--reminder-color: #f66f6a;
}
.reminder-row-card.current {
	--reminder-color: var(--color-meds);
}
.darkmode .reminder-row-card.current {
	--reminder-color: var(--chart-blue);
}
.reminder-row-card.upcoming {
	--reminder-color: var(--text-muted);
}
.reminder-schedule .reminder-row-card.upcoming {
	background: var(--surface-bg-12dp);
	border-color: var(--surface-border-color);
}
.reminder-row {
	position: relative;
	text-align: left;
	width: 100%;
}
.reminder-row-bg-icon {
	position: absolute;
	right: -10px;
	top: 25px;
	opacity: 0.3;
}
.reminder-row-bg-icon .daily-log-type-icon {
	width: 80px;
	height: 80px;
}
.reminder-row-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	word-break: break-word;
}
.reminder-row-time {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	color: var(--reminder-color);
}
.reminder-row-bell {
	width: 18px;
	height: 18px;
	--btn-text: var(--reminder-color);
	margin-top: -2px;
}
.reminder-row-description {
	font-size: 13px;
}
.reminder-row-med {
	display: flex;
	align-items: center;
	font-size: 13px;
}
.reminder-row-med-icon {
	width: 18px;
	height: 18px;
	color: var(--theme-color-primary);
	margin-right: 6px;
}
.reminder-row-log-icons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
}
.reminder-row-log-icon {
	display: flex;
	padding: 4px;
	border-radius: 50%;
	background: var(--theme-color-btn);
}
.reminder-row-log-icon svg.daily-log-type-icon {
	--icon-fill: #fff;
	width: 16px;
	height: 16px;
}
.reminder-row-notes {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.reminder-row-action-btns {
	position: relative;
	display: flex;
	justify-content: space-around;
}
.reminder-row-action-btns .btn {
	min-width: 100px;
	font-size: 14px;
}
.reminder-row-action-btns .cross-svg {
	width: 1em;
	height: 1em;
	margin: 0;
}
@media (min-width: 600px) {
	.profile-reminders .reminder-row-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.profile-reminders .reminder-row {
		width: 0;
		flex-grow: 1; /* required to properly truncate long notes */
	}
	.profile-reminders .reminder-row-header {
		justify-content: flex-start;
	}
	.profile-reminders .reminder-row-action-btns {
		justify-content: flex-start;
		gap: 15px;
	}
	.profile-reminders .reminder-row-bg-icon {
		display: none;
	}
}
.reminder-modal-header {
	padding: 15px 12px 15px 20px;
	background: var(--surface-bg);
}
.reminder-modal-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reminder-modal-header-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 2px;
}
.reminder-modal-log-sections {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
}
.reminder-modal-log-sections .daily-timeline {
	margin: -15px -15px 5px;
	pointer-events: none;
}
.reminder-modal-log-sections .daily-timeline-item .daily-log-type-icon {
	border-color: var(--surface-bg);
}
.log-reminder-modal-multi > .card-modal-body {
	background: var(--html-bg);
}
.darkmode .log-reminder-modal-multi > .card-modal-body {
	background: transparent;
}
.reminder-modal-log-sections .data-entry-type-section {
	background: var(--portal-surface-bg);
}
.darkmode .reminder-modal-log-sections .data-entry-type-section {
	background: var(--chip-bg);
}
.reminder-modal-notes {
	margin-top: 10px;
	font-size: 15px;
	color: var(--text-muted);
}
.reminder-modal-med-time {
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.reminder-modal-med-form .form-empty-card {
	margin-top: 20px;
}
.reminder-modal-med-form .med-edit-list-add-more {
	text-align: left;
}
.reminder-modal-med-form .med-edit-list-item-subtitle {
	display: none;
}
.reminder-modal-add-notes {
	margin-top: 20px;
}
.reminder-modal-med-submit-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.btn.round-btn.reminder-modal-med-submit-btn {
	width: 100%;
	height: 3.5em;
	display: flex;
	flex-direction: column;
	font-size: 16px;
}
.reminder-modal-submit-btn-subtitle {
	font-size: 0.85em;
	opacity: 0.8;
}
.modal > .card.reminder-modal-set-time-modal {
	margin-top: 150px;
	text-align: center;
}
.reminder-modal-set-time-header {
	font-size: 18px;
}
.reminder-modal-datetime-input-wrap {
	margin: 35px -10px; /* negative margin so datetime input doesn't wrap on galaxy s8+ */
}
.reminder-modal-set-time-modal .reminder-modal-med-submit-btn {
	max-width: 300px;
}

.reminder-modal-log-sections .symptom-edit-card {
	margin-left: -3px;
	margin-right: -3px;
}
/* matches card modal */
@media (max-width: 500px) {
	.reminder-modal-log-sections .data-entry-type-section {
		margin: 0 -10px;
	}
}
@media (max-width: 360px) {
	.reminder-modal-log-sections .data-entry-type-section {
		margin: 0 -15px;
	}
}
.viocare-log-modal-date-nav {
	padding: 8px 4px;
}
.viocare-log-modal-prompt {
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	padding: 15px;
}
.viocare-log-modal-row {
	margin: 0 15px 15px;
	border-radius: var(--card-border-radius);
	border: var(--card-separator);
	overflow: hidden;
}
.viocare-log-modal-row-body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	cursor: pointer;
}
.viocare-log-modal-row-name {
	flex-grow: 1;
}
.viocare-log-modal-row-add {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 18px;
}
.viocare-log-modal-entries {
	padding: 0 15px 10px;
}
.viocare-log-modal-entries-header {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 2px;
}
.viocare-log-modal-submit {
	margin: 25px 0;
	text-align: center;
}

.appt-modal-notify-time {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
}
.appt-modal-notify-time:not(:last-child) {
	margin-bottom: 8px;
}
.appt-modal-add-cal-link {
	margin-top: 15px;
}
.appt-modal-placeholder-text {
	font-size: 15px;
	text-align: center;
}
.appt-modal-vp-started-msg {
	margin-top: 25px;
	font-size: 15px;
	color: var(--theme-color-text);
}
.appt-modal-instructions {
	font-size: 15px;
	margin-bottom: 15px;
}
.appt-modal-vp-link-list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 15px;
}
.vp-list-item.card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	width: 100%;
	background: var(--portal-surface-bg);
	box-shadow: var(--portal-surface-shadow);
}
.vp-list-item.archived .vp-list-item-title {
	font-size: 14px;
}
.vp-list-item-left {
	flex-grow: 1;
	padding: 15px 20px;
	border-top-left-radius: var(--card-border-radius);
	border-bottom-left-radius: var(--card-border-radius);
	color: var(--text);
	cursor: pointer;
	text-align: left;
}
.vp-list-item-left.no-menu {
	border-radius: var(--card-border-radius);
}
.vp-list-item.archived .vp-list-item-left {
	color: var(--text-muted);
}
.vp-list-item-icon-title {
	display: flex;
	align-items: center;
	gap: 15px;
}
.vp-list-item-icon {
	--btn-text: var(--theme-color-primary);
	width: 1.8em;
	height: 1.8em;
}
.vp-list-item.archived .vp-list-item-icon {
	--btn-text: var(--text-muted);
	width: 1.5em;
	height: 1.5em;
}
.vp-list-item-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}
.vp-list-item-sharing-subtitle {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: var(--color-help-text);
}
.vp-list-item-auto-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--theme-color-btn);
	border-radius: 3em;
	padding: 0 6px;
	color: #fff;
	font-size: 12px;
}
@media (max-width: 480px) {
	.vp-list-item-left {
		padding: 10px 15px;
	}
	.vp-list-item-title {
		font-size: 15px;
	}
}
@media (hover: hover) {
	.vp-list-item-left:hover {
		background: var(--hover-gray);
	}
}
#records-page {
	display: flex;
	width: 100%;
}
#records-content {
	flex-grow: 1;
	max-width: 100%;
	margin-right: 10px;
}
.records-filters-panel {
	flex: 0 0 250px;
	margin: 0 15px;
}

/* Filters */
.records-filters {
	user-select: none;
	-webkit-user-select: none;
}
.records-filter:not(:last-child) {
	padding-bottom: 20px;
}
.records-filter-name {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 5px;
}
.records-filter-option {
	display: flex;
	align-items: baseline;
	padding: 5px 0 5px 10px;
	margin-left: -10px;
	border-radius: 4px;
	cursor: pointer;
	gap: 5px;
}
.records-filter-option-name {
	display: flex;
	align-items: flex-start;
	font-size: 15px;
}
.records-filter-option-name .records-icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.upload-svg.records-icon,
.profile-circle-svg.records-icon {
	color: var(--guava-green);
}
.profile-circle-svg.records-icon {
	margin-top: 1px; /* Otherwise alignment looks off */
}
.records-mobile-filter-bar {
	display: none;
	font-size: 13px;
	padding: 10px 15px 5px;
	margin: 0 -10px; /* remove page padding */
	width: calc(100% + 20px);
	text-align: left;
}

/* Search / Tools */
.records-search-tools {
	display: flex;
	align-items: center;
	column-gap: 15px;
	row-gap: 15px;
	margin-bottom: 20px;
}
.records-search-wrap {
	width: 100%;
	max-width: 600px;
}
.records-search-tools .search-bar {
	width: 100%;
}
.records-search-tools-btns {
	display: flex;
	flex-shrink: 0;
}
.search-bar-icon-btn.records-search-bar-filter-btn {
	padding: 4px;
}
.records-visit-prep-btn {
	font-size: 18px;
	flex-shrink: 0;
}
.records-visit-prep-btn-mobile.btn {
	display: none;
	width: 100%;
	font-size: 18px;
	border-radius: var(--card-border-radius);
	padding: 15px 15px;
	text-align: left;
	gap: 15px;
	background: var(--portal-surface-bg);
	box-shadow: var(--portal-surface-shadow);
	--btn-text: var(--theme-color-text);
}
@media (hover: hover) {
	.records-visit-prep-btn-mobile.btn:hover {
		background: var(--theme-color-shadow);
	}
}
.records-visit-prep-btn-mobile .doctor-svg {
	width: 40px;
	height: 40px;
	--btn-text: var(--theme-color-primary);
}
.right-svg.records-visit-prep-btn-arrow {
	margin-left: auto;
	width: 30px;
	height: 30px;
	--btn-text: var(--text-muted);
}
.records-new-tag-filter {
	--btn-color: var(--theme-color-light);
	--btn-color-hover: var(--theme-color-shadow);
	margin-bottom: 15px;
}
@media (max-width: 600px) {
	.records-visit-prep-btn-mobile.btn {
		display: flex;
	}
	.records-visit-prep-btn {
		display: none;
	}
}

/* Search Suggest */
.records-search-suggest-date {
	color: var(--text-muted);
	font-size: 14px;
	flex-shrink: 0;
}
.records-search-suggest-content {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 5px;
}
.records-search-data-label {
	font-size: 12px;
	color: var(--text-muted);
}
.records-search-data-unit {
	color: var(--text-muted);
	font-size: 0.8em;
	margin-left: 5px;
}
.records-search-suggest {
	display: flex;
	align-items: center;
	padding: 5px 15px 5px var(--search-input-padding-left);
}
.records-search-suggest.has-icon {
	padding-left: var(--search-input-icon-margin);
}
.records-search-suggest .records-icon {
	width: 20px;
	height: 20px;
	margin-right: calc(var(--search-input-padding-left) - 20px - var(--search-input-icon-margin)); /* subtract records-icon width */
}
.records-search-suggest .records-icon.pdf,
.records-search-suggest .records-icon.csv {
	font-size: 10px;
	font-weight: 400;
}
@media (max-width: 600px) {
	.records-suggest-type-record {
		flex-wrap: wrap;
	}
	.records-suggest-type-record .records-search-suggest-date {
		font-size: 12px;
	}
	.records-search-suggest-title {
		order: 2;
		flex-basis: 100%;
		font-size: 14px;
	}
}

/* Record Rows */
.records-rows {
	background: var(--portal-surface-bg);
	border-radius: var(--card-border-radius);
	padding: 8px 12px;
}
.records-row {
	display: flex;
	width: 100%;
	text-align: left;
	align-items: center;
	padding: 12px 15px;
}
.records-row:not(:first-child) {
	border-top: var(--card-separator);
}
.records-row.has-records + .records-row,
.records-year-row + .records-row {
	border-top: none;
}
.records-row.records-row-indent-1 {
	padding-left: 40px;
}
.records-row.records-row-indent-2 {
	padding-left: 80px;
}
.records-row-encounter .records-row-icon {
	align-self: flex-start;
}
.records-row.has-records {
	padding-bottom: 5px;
}
.records-year-row {
	margin-top: 15px;
	padding-left: 10px;
	color: var(--text-muted);
	font-weight: 600;
	font-size: 3em;
}
.records-row-content {
	display: flex;
	flex-grow: 1;
	overflow: hidden; /* to constrain long word overflow in records-col-title */
	word-wrap: break-word;
	position: relative;
	flex-direction: column;
}
.records-row-add-note-btn.btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 26.39px;
	height: 26.39px;
	padding: 0;
}
.records-row-add-note-btn svg {
	width: 19px;
	height: 19px;
}
.records-col-title {
	flex: 0 0 100%;
	max-width: 100%;
}
.records-row-encounter .records-row-content.no-entry {
	padding-right: 30px;
}
.flexible-match-title {
	font-size: 14px;
}
.flexible-match-title .records-row-subtitle {
	margin-left: 5px;
}
.records-col-date-source {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	font-size: 13px;
	color: var(--text-muted);
}
.records-col-date-source .records-col-new {
	margin-left: auto;
}
.records-col-title .records-col-new {
	float: right;
	margin-left: 5px;
}
.records-col-date {
	flex-shrink: 0;
}
.records-col-date:not(:empty) + .records-col-source:not(:empty)::before {
	content: '\2022';
	margin: 0 10px;
	color: var(--text-muted);
}
.records-col-source {
	max-width: 425px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.records-row-icon {
	margin-right: 15px;
}

.records-rows-search-error,
.records-rows-error {
	margin: 20px 0;
	text-align: center;
	font-size: 18px;
}
.records-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.records-page-empty-wrap {
	padding: 15px 20px;
	text-align: center;
}
.records-page-empty-title {
	font-size: 1.2em;
	color: var(--text-muted);
	margin: 15px 0;
}
.records-page-empty-icon {
	fill: var(--text-muted);
	width: 128px;
	height: 128px;
	opacity: 0.5;
}
.records-page-empty-connect-msg {
	text-align: center;
	margin: 25px 0;
}
.records-page-empty-connect-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 15px;
}
.records-page-empty-connect-btns .btn {
	min-width: 225px;
	font-size: 18px;
}

/** Record Icons **/
.records-icon {
	display: flex;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	color: var(--icon-gray);
}
.records-icon.theme {
	padding: 3px;
	--btn-text: #fff;
	fill: #fff; /* for vitals */
	background: var(--theme-color-btn);
}
.records-icon.encounter {
	border-radius: 20px;
	padding: 8px;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	margin-left: -5px;
}
.records-icon.flexible-match {
	fill: var(--guava-green);
	width: 20px;
	height: 20px;
	padding: 0;
}
.records-icon.pdf,
.records-icon.csv {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}
.records-icon.pdf {
	background: var(--color-pdf);
}
.records-icon.csv {
	background: var(--color-csv);
}
.records-icon.img,
.records-icon.video {
	background: var(--color-img);
	fill: #fff;
}
.records-icon.txt {
	background: var(--color-report);
	fill: #fff;
	padding: 3px;
}
.records-icon.imaging {
	stroke: #fff;
	stroke-width: 2px;
	background: var(--color-imaging);
	fill: none;
	padding: 4px;
}
.records-icon.report {
	fill: #fff;
	--btn-text: #fff; /* for edit-svg icon for encounter patient notes */
	background: var(--color-report);
	padding: 3px;
}

@media (max-width: 960px) {
	#records-page {
		flex-direction: column;
	}
	#records-content {
		margin: 0;
	}
	.records-filters-panel,
	.records-filters {
		display: none;
	}
	.records-filter-modal .records-filters,
	.records-mobile-filter-bar {
		display: block;
	}
	.records-search-tools {
		align-items: flex-start;
		flex-direction: column;
	}
	.records-rows {
		padding: 10px 0;
		/* remove page padding */
		margin-left: -10px;
		margin-right: -10px;
	}
	.records-row {
		padding: 10px;
	}
	.records-row.records-row-indent-1 {
		padding-left: 35px;
	}
	.records-row.records-row-indent-2 {
		padding-left: 50px;
	}
}

@media (max-width: 600px) {
	.records-col-date-source {
		font-size: 12px;
	}
	.records-search-tools-btns {
		width: 100%;
		justify-content: center;
	}
	.records-rows-error {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 16px;
	}
	.records-rows-error .btn {
		font-weight: 600;
	}
}

@media(hover: hover) {
	/* Only apply hover styles on devices that can hover, so the hover style doesn't "stick" */
	.records-filter-option:hover {
		background: var(--hover-gray);
	}
	.records-row:not(.no-document):hover {
		background: var(--hover-gray);
		cursor: pointer;
	}
}

@media print {
	/*
		Generally, using !important is a bad practice and anti-pattern. Using here because:
		1. It's used only to remove elements for printing, so there shouldn't be a specificity race going on
		2. It's not affecting any end-user-defined accessibility styling with the actual app (because it's only for printing)
		3. It means we don't have to keep testing the printing view when we make changes, in case a rule is defined elsewhere with additional specificity
	*/
	.records-filters-panel, .records-search-tools {
		display: none !important;
	}
}
.document-download-card {
	color: var(--text);
}
.document-download-btns {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.document-download-btns .btn {
	flex-grow: 1;
}

.ios-install-step-list {
	padding-inline-start: inherit;
}
.ios-install-step {
	margin-bottom: 20px;
}
.ios-install-step-img {
	top: 10px;
	margin-bottom: 60px;
	display: block;
	padding: 8px;
	background: #f6f9fc;
	box-shadow: 0 10px 20px #00000033;
	border-radius: 25px;
	max-width: 100%;
}
.ios-install-trouble {
	font-size: 14px;
}
.pwa-install-btn.btn {
	display: none;
}
.install-event-fired .pwa-install-btn.btn {
	display: flex;
}
.profile-page-banner.app-install-banner {
	display: none;
}
.install-event-fired .app-install-banner,
.app-install-banner.always-show {
	display: block;
}
.global-add-btn-icon {
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px;
	--btn-text: #fff;
	background: var(--guava-green);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: transform 200ms ease-in-out, background 200ms ease-in-out;
}
.global-add-btn-icon.modal-open {
	transform: rotate(45deg);
	background: #757575; /* can't use --icon-gray because it's opaque */
}

/* Modal */
.global-add-modal {
	display: flex;
	justify-content: center;
	padding: 0;
}
.global-add-modal-card.card {
	position: absolute;
	bottom: var(--bottom-nav-height);
	margin: 0 0 -26px;
	padding: 0 20px 26px;
	max-height: calc(100vh - var(--bottom-nav-height));
	overflow-y: auto;
	animation: global-add-modal-anim 250ms cubic-bezier(0, 0, 0, 1) 1;
}
.global-add-modal.close {
	background: transparent;
	transition: background 100ms cubic-bezier(0.3, 0, 1, 1);
}
.global-add-modal.close .global-add-modal-card {
	transition: opacity 50ms cubic-bezier(0.3, 0, 1, 1);
	opacity: 0;
}
@keyframes global-add-modal-anim {
	0% {
		opacity: 0.8;
		transform: translate(0, 5%);
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: translate(0, 0);
	}
}
.global-add-modal-title {
	text-align: center;
	padding: 15px 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--logo-text);
}
.global-add-modal-records-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
}
.global-add-modal-records-grid + .global-add-modal-records-grid {
	margin-top: 10px;
}
.global-add-modal-record {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	--btn-color: var(--theme-color-bg);
	--btn-color-hover: var(--theme-color-light);
	border-radius: 8px;
	padding: 4px 6px
}
.global-add-modal-record-icon {
	--btn-text: var(--theme-color-primary);
	width: 32px;
	height: 32px;
	padding: 1px;
}
.global-add-modal .global-add-modal-record .daily-log-type-icon { /* specificity needed to override styles */
	width: 32px;
	height: 32px;
	padding: 1px;
}
.global-add-modal-record.more-btn {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.global-add-modal-record-more-icon {
	--btn-text: var(--icon-gray);
	width: 34px;
	height: 34px;
	margin: 2px;
	padding: 4px;
	border-radius: 50%;
}
.global-add-modal-log-types {
	margin-top: 25px;
}
.global-add-assistant-btns {
	display: flex;
	gap: 4px;
	margin: 25px 0 10px;
}
.global-add-assistant-btns .btn {
	flex-grow: 1;
	flex-basis: 50%;
	height: 54px;
}
.global-add-assistant-btns .btn:first-child {
	border-radius: 10px 2px 2px 10px;
}
.global-add-assistant-btns .btn:last-child {
	border-radius: 2px 10px 10px 2px;
}
.global-add-assistant-btns .btn:only-child {
	border-radius: 10px;
}

.data-entry-record-list-title {
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 15px;
}

@media (max-width: 400px) {
	.global-add-modal-records-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}
}
.custom-entry-type-list-empty {
	color: var(--text-muted);
	text-align: center;
	margin: 20px 0;
}
.custom-entry-type-list-subtitle {
	margin-top: 15px;
}
.custom-entry-type-list-row {
	display: flex;
	padding: 15px 0;
	align-items: center;
	width: 100%;
}
.custom-entry-type-list-row + .custom-entry-type-list-row {
	border-top: var(--card-separator);
}
.custom-entry-type-list-row-name {
	flex-grow: 1;
}
.custom-entry-type-list-row-edit {
	flex-shrink: 0;
}
.custom-entry-type-form-subsection {
	margin-left: 12px;
}
.custom-entry-type-form-label {
	display: flex;
}
.text-input.custom-entry-type-form-unit {
	max-width: 120px;
}
.log-types-picker-section {
	margin-top: 15px;
}
.log-types-picker-category-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text); /* so "Other Types" button is not gray */
}
.log-types-picker-types {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 5px;
	--log-type-icon-size: 18px;
}
.log-types-picker-types .log-types-picker-type .daily-log-type-icon {
	width: var(--log-type-icon-size);
	height: var(--log-type-icon-size);
	--icon-fill: #fff;
}
.log-types-picker-type.btn.outline {
	--btn-text: var(--text);
	--btn-color: #fff;
	border: 1px solid var(--theme-color-primary);
	padding: calc(0.4em - 1px) calc(1em - 1px);
}
.log-types-picker-type.outline .daily-log-type-icon {
	--icon-fill: var(--theme-color-primary);
}
.log-types-picker-modal-instructions {
	font-size: 13px;
}
@media (max-width: 600px) {
	.log-types-picker-type {
		font-size: 0.8em;
		--log-type-icon-size: 16px;
	}
}
.med-schedule-calendar .calendar-week-day,
.med-schedule-calendar .calendar-month-day {
	height: 64px;
}
.med-schedule-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.med-schedule-calendar .reminder-schedule-calendar-day {
	--check-icon-color: var(--theme-color-btn);
}
.med-schedule-calendar-view-btn {
	text-align: center;
	margin-top: 10px;
}
.med-schedule-rows {
	padding: 10px;
}
.med-schedule-row {
	display: block;
	background: none;
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	padding: 10px 15px;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
}
.med-schedule-row.reminder {
	border: 1px solid var(--theme-color-primary);
	background: var(--theme-color-bg);
	padding: 15px;
}
@media (hover: hover) {
	.med-schedule-row.reminder:hover {
		background: var(--theme-color-light);
	}
}
.med-schedule-row.dismissing {
	opacity: 0.7;
	pointer-events: none;
}
.med-schedule-time {
	font-size: 20px;
	font-weight: 600;
	margin: 20px 10px 5px;
}
.med-schedule-time:first-child {
	margin-top: 0;
}
.med-schedule-row-status-taken {
	font-size: 15px;
	color: var(--theme-color-text);
}
.med-schedule-row-status-skipped {
	font-size: 15px;
	color: var(--text);
	font-weight: 600;
}
.med-schedule-row-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}
.med-schedule-row-queued {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 15px;
	color: var(--text-muted);
	--btn-text: var(--text-muted);
}
.med-schedule-row-med {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 3px;
}
.med-schedule-row-med-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.med-schedule-row.skipped .med-schedule-row-med-name {
	color: var(--text-muted);
}
.med-schedule-row-check {
	width: 20px;
	height: 20px;
	padding: 4px;
	background: var(--theme-color-btn);
	--btn-text: #fff;
	border-radius: 50%;
	flex-shrink: 0;
}
.med-schedule-row-skipped {
	width: 20px;
	height: 20px;
	padding: 5px;
	background: var(--icon-info-gray);
	border-radius: 50%;
	stroke: var(--surface-bg);
	stroke-width: 3;
	stroke-linecap: round;
	flex-shrink: 0;
}
.med-schedule-reminder-name {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}
.med-schedule-row.taken .med-schedule-reminder-name,
.med-schedule-row.skipped .med-schedule-reminder-name {
	font-weight: 400;
	color: var(--text-muted);
}
.med-schedule-reminder-bell {
	width: 18px;
	height: 18px;
	--btn-text: var(--theme-color-primary);
	margin-top: -1px;
	margin-left: -4px;
	margin-right: 8px;
	flex-shrink: 0;
}
.med-schedule-reminder-body {
	text-align: left;
	width: 100%;
}
.med-schedule-reminder-notes {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.med-schedule-reminder-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	margin-bottom: -5px;
}
.med-schedule-now-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 25px -10px;
}
.med-schedule-now-wrap::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	border-bottom: 3px solid var(--theme-color-primary);
}
.med-schedule-now {
	position: relative; /* to be above line */
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	border-radius: 32px;
	padding: 3px 10px;
	border: 2px solid var(--theme-color-primary);
	box-shadow: 0 0 0 8px var(--surface-bg);
	background: var(--surface-bg);
}
.med-schedule-reminder-banner {
	border-radius: var(--card-border-radius);
	background: var(--theme-color-bg);
	padding: 15px;
	margin: 20px 10px 20px;
	font-size: 15px;
}
.med-schedule-reminder-banner-btns {
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 35px;
	padding-right: 10px;
}
.med-schedule-empty-text {
	text-align: center;
	padding: 20px;
}
.med-schedule-log-btn {
	margin-bottom: 20px;
}
.med-schedule-log-btn .btn {
	width: 70%;
	font-size: 1.3em;
}
.med-schedule-mark-all-btn {
	text-align: right;
	margin: 5px 10px -10px;
}
.med-schedule-mark-all-btn .double-check-svg {
	width: 20px;
	height: 20px;
}
.med-schedule-mark-all-modal-item {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	overflow: hidden;
}
.med-schedule-mark-all-modal-name-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.med-schedule-mark-all-modal-time {
	flex-shrink: 0;
}
/* should align with width where card-modal becomes fullscreen */
@media (min-width: 500px) and (min-height: 500px) {
	.med-schedule-modal .card-modal-body {
		max-height: calc(100vh - var(--card-modal-margin-top) * 2 - 60px); /* 60px for the header */
		overflow-y: auto;
	}
	.med-schedule-log-btn {
		position: sticky;
		bottom: 10px;
	}
	.med-schedule-log-btn .btn {
		box-shadow: 0 0 10px 3px var(--surface-bg);
	}
}
.med-schedule-edit-onboarding-card {
	margin: 20px 0;
	box-shadow: none;
}
.med-schedule-edit-onboarding-row {
	display: flex;
	gap: 8px;
	margin-top: 15px;
	font-size: 15px;
}
.med-schedule-edit-onboarding-icon {
	--btn-text: var(--theme-color-primary);
	margin-top: 3px;
}
.med-schedule-edit-heading {
	margin-bottom: 20px;
}
.med-schedule-edit-onboarding-heading {
	font-size: 20px;
	margin-bottom: 15px;
	text-align: center;
}
.med-schedule-edit-onboarding-subtitle {
	margin-bottom: 20px;
	text-align: center;
}
.med-schedule-edit-onboarding-card-btn {
	text-align: center;
	margin-top: 50px;
}
.med-schedule-edit-reminders {
	margin-top: 30px;
}
.med-schedule-edit-more-btn {
	margin-bottom: 15px;
	text-align: center;
}
.med-schedule-edit-onboarding-new-btn {
	margin-top: 30px;
	text-align: center;
}
.med-schedule-edit-onboarding-done-btn {
	margin-top: 25px;
	text-align: center;
}
.med-schedule-edit-new-btn {
	margin-bottom: 25px;
	text-align: center;
}
.reminder-config-row {
	width: calc(100% + 20px);
	padding: 10px 15px;
	margin: 0 -10px 15px;
	text-align: left;
	border: var(--card-separator);
	box-shadow: none;
}
.reminder-config-row.deleting {
	opacity: 0.5;
	pointer-events: none;
}
@media (hover: hover) {
	.reminder-config-row:hover {
		background: var(--hover-gray);
	}
}
.reminder-config-row-title {
	font-size: 16px;
	margin-bottom: 5px;
}
.reminder-config-row-meds {
	font-size: 14px;
	margin-bottom: 5px;
}
.reminder-config-row-med {
	display: flex;
}
.reminder-config-row-log-types {
	font-size: 14px;
}
.reminder-config-row-timing {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reminder-config-row-frequency {
	font-size: 14px;
	color: var(--text-muted);
}
.reminders-tz {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 25px;
	font-size: 14px;
	padding-top: 10px;
}
.reminders-tz-value {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	row-gap: 2px;
	column-gap: 6px;
}
.reminder-schedule {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.reminder-schedule .calendar-layout {
	padding: 0 5px;
}
.reminder-schedule .calendar-week-day {
	height: 64px;
}
.reminder-schedule-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	--check-icon-color: var(--metric-green);
}
.reminder-schedule-calendar-check {
	--btn-text: #fff;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 50%;
	background: var(--check-icon-color);
}
.reminder-schedule-calendar-incomplete {
	--btn-text: var(--surface-bg-8dp);
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 50%;
	background: var(--border-color);
}
.reminder-schedule-calendar-upcoming {
	--btn-text: var(--text-muted);
	width: 20px;
	height: 20px;
	opacity: 0.4;
}
.reminder-schedule-calendar-dismissed {
	width: 18px;
	height: 18px;
	--btn-text: var(--border-color);
}
.reminder-schedule-calendar-day-pie {
	width: 30px;
	height: 30px;
}
.reminder-schedule-calendar-day-pie path {
	stroke-width: 2;
	stroke: var(--check-icon-color);
	fill: none;
}
.reminder-schedule-calendar-day-pie circle {
	stroke-width: 2;
	stroke: var(--border-color);
	fill: none;
}
.reminder-schedule-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	padding: 10px 10px 40px;
}
.reminder-schedule-empty {
	padding: 15px;
	text-align: center;
	color: var(--text-muted);
	font-size: 18px;
}
.reminder-schedule-error {
	color: var(--red-error);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 15px;
}
.reminder-schedule-upcoming-header {
	margin: 0 8px;
	color: var(--text-muted);
}
.reminder-schedule-upcoming-header:not(:first-child) {
	margin-top: 15px;
}


.reminder-schedule-row {
	display: flex;
	gap: 5px;
	--reminder-color: var(--text-muted);
	padding: 10px;
	background: var(--surface-bg-8dp);
	border: var(--surface-border);
	border-radius: var(--card-border-radius);
	text-align: left;
	width: 100%;
	cursor: pointer;
}
.reminder-schedule-row.completed {
	background: none;
	border: none;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.reminder-schedule-row-icon {
	flex: 0 0 60px;
	display: flex;
	justify-content: center;
}
.reminder-schedule-row-check-icon {
	width: 30px;
	height: 30px;
	--btn-text: #fff;
	background: var(--metric-green);
	border-radius: 50%;
	padding: 6px;
}
.reminder-schedule-row-skipped-icon {
	width: 30px;
	height: 30px;
	background: var(--border-color);
	border-radius: 50%;
	padding: 6px;
	stroke: var(--surface-bg);
	stroke-width: 2;
	stroke-linecap: round;
}
.reminder-schedule-row-content {
	flex-grow: 1;
}
.reminder-schedule-row-header {
	color: var(--text-muted);
	font-size: 14px;
}
.reminder-schedule-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.reminder-schedule-row-arrow {
	--btn-text: var(--text-muted);
	width: 28px;
	height: 28px;
	opacity: 0.5;
}
.reminder-settings-add-btn {
	display: flex;
	margin: 0 auto 25px;
	font-size: 18px;
}
.reminder-settings-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 25px;
	font-size: 14px;
	padding-top: 10px;
}
.reminder-settings-tz {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	row-gap: 2px;
	column-gap: 6px;
}
.reminder-settings-empty-text {
	padding: 15px 15px 30px;
	text-align: center;
	color: var(--text-muted);
	font-size: 18px;
}
.reminder-settings-type-header {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	margin: 30px 0 8px;
	gap: 6px;
	--btn-text: var(--theme-color-primary);
}
.reminder-settings-more-btn {
	margin-bottom: 15px;
	text-align: center;
}
.assistant-card-section {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 20px 20px;
}
.assistant-avatar-wrap {
	text-align: center;
	margin: 25px auto 0;
}
.assistant-avatar {
	width: 72px;
	height: 72px;
}
.assistant-intro {
	text-align: center;
	margin: 25px 20px 40px;
	font-size: 1.5em;
}
.assistant-intro .text-subtitle {
	margin-top: 5px;
	font-size: 0.66em;
}
.assistant-free-intro {
	margin-bottom: 10px;
	text-align: center;
}
.assistant-messages {
	margin: 0 0 10px;
	padding: 10px 15px 0;
	flex-grow: 1;
	overflow-y: auto;
}
.assistant-messages.empty {
	flex-grow: 0;
	padding-top: 0;
}
.assistant-message {
	background: var(--theme-color-bg);
	margin: 15px -12px;
	padding: 12px;
	border-radius: var(--card-border-radius);
	white-space: pre-wrap;
	position: relative;
}
.assistant-message-anchor {
	position: absolute;
	top: -5px;
	width: 100%;
}
.assistant-message-user {
	color: var(--theme-color-text);
	font-weight: 600;
}
.assistant-message-data-types {
	display: flex;
	margin-top: 15px;
	flex-wrap: wrap;
	gap: 5px;
}
.assistant-message-data-types-label {
	width: 100%;
	font-size: 0.7em;
	color: var(--text-muted);
}
.assistant-data-type {
	display: flex;
}
.assistant-data-type svg {
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 50%;
	border: 1px solid var(--theme-color-primary);
	--btn-text: var(--theme-color-primary);
}
.assistant-message-assistant {
	margin-top: 15px;
}
.assistant-message-links {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.assistant-message-links a {
	width: 100%;
}
.assistant-message-log-success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--theme-color-text);
}
.assistant-entries-pending-message {
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
	margin-top: 20px;
}
.assistant-entries-to-log {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px -12px 15px;
}
.assistant-entries-add-all {
	margin: 20px 0 30px;
	text-align: center;
}
.assistant-pending-entry {
	display: flex;
	align-items: center;
}
.assistant-pending-entry.skipped .assistant-pending-entry-text {
	text-decoration: line-through;
	color: var(--text-muted);
}
.assistant-pending-entry-subtext {
	font-size: 14px;
	color: var(--text-muted);
}
.assistant-pending-entry-review {
	font-size: 14px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.btn.assistant-pending-entry-btn {
	flex-grow: 1;
	justify-content: flex-start;
	border-radius: 12px;
	background: var(--theme-color-bg);
	padding: 15px;
	gap: 15px;
	text-align: left;
}
.assistant-pending-entry.skipped .btn.assistant-pending-entry-btn {
	background: none;
}
.assistant-pending-entry-icon {
	width: 24px;
	height: 24px;
}
.assistant-pending-entry.skipped .assistant-pending-entry-icon {
	fill: var(--text-muted);
}
.assistant-pending-entry-skip {
	flex: 0 0 50px;
	text-align: right;
}
.assistant-pending-entry-skip .btn.icon-btn {
	background: var(--chip-bg);
	width: 32px;
	height: 32px;
}
.assistant-message-enable {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 15px;
	padding: 40px 12px;
	text-align: center;
}
.assistant-message-upgrade {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 15px;
	padding: 20px 12px;
	background: var(--surface-bg-muted);
	text-align: center;
}
.assistant-input {
	height: 5.5em;
	border-radius: 15px;
	padding: 0.8em 1.2em;
	flex-shrink: 0;
}
.assistant-card-section .assistant-loading {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}
.assistant-input + .assistant-loading {
	margin-top: 20px;
}
.loading-voice .assistant-loading {
	margin: 54px auto;
}
.assistant-submit-btns {
	margin-top: 20px;
	text-align: center;
}
.assistant-voice-btn {
	width: 62px;
	height: 62px;
	margin: -5px 0;
}
.assistant-ask-btn {
	height: 52px;
	width: 100%;
}
.assistant-voice-area {
	position: relative;
	height: 160px;
	border-radius: 15px;
	background: var(--theme-color-bg);
	cursor: pointer;
	flex-shrink: 0;
}
.assistant-voice-label {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--text-muted);
	font-size: 0.8em;
}
.assistant-voice-area .microphone-svg {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	fill: var(--surface-bg);
}
.assistant-voice-area canvas {
	position: absolute;
	width: 300px;
	height: 60px;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.75;
}
@media (max-width: 500px) {
	.assistant-messages {
		margin-left: -10px;
		margin-right: -10px;
	}
	.assistant-benefits {
		margin-left: -10px;
		margin-right: -10px;
	}
}
.assistant-benefits {
	background: var(--theme-color-bg);
	border-radius: 12px;
	padding: 30px 20px 20px;
}
.assistant-benefit {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 25px;
}
.btn-svg.assistant-benefit-check {
	background: var(--theme-color-primary);
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	padding: 5px;
}
.alpaca-assistant-svg {
	border-radius: 50%;
	background: var(--theme-color-btn);
	vertical-align: middle;
}
.alpaca-customize-avatar-wrap {
	margin: 25px 0;
	text-align: center;
}
.alpaca-customize-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--theme-color-primary);
	box-shadow: 0 1px 3px var(--theme-color-shadow), 0 1px 2px var(--theme-color-shadow);
}
.alpaca-customize-radio {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	font-size: 1.5em;
	color: #000;
}
.alpaca-customize-avatar-wrap + .alpaca-customize-radio {
	margin-top: 0;
}
.alpaca-customize-radio .radio-icon-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.darkmode .alpaca-customize-radio .radio-icon-btn-icon {
	background: #fff;
}
.alpaca-customize-item {
	width: 100%;
	height: 100%;
}
.alpaca-customize-item-none {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	width: 35px;
	border-radius: 50%;
	border: 3px solid var(--theme-color-primary);
}
.alpaca-customize-item-none::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	height: 3px;
	width: calc(100% + 1px);
	transform: rotate(-45deg);
	background: var(--theme-color-primary);
}
.assistant-history-new-btn {
	text-align: center;
	margin-bottom: 25px;
}
.assistant-history-subtitle {
	font-size: 15px;
	text-align: center;
	margin-bottom: 25px;
}
.assistant-history-row {
	display: block;
	width: calc(100% + 16px);
	text-align: left;
	padding: 15px;
	margin: 15px -8px 0;
	font-size: 15px;
	border-radius: var(--card-border-radius);
	background: var(--chip-bg);
}
.assistant-history-row-date {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
}
.assistant-history-row-question {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.assistant-history-row-answer {
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.assistant-history-row-num-q {
	margin-top: 2px;
	font-size: 14px;
}
.assistant-history-load-more {
	text-align: center;
	margin-top: 15px;
}
@media (hover: hover) {
	.assistant-history-row:hover {
		background: var(--chip-bg-hover);
	}
}
.assistant-loading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 0 auto;
	width: 70px;
	height: 70px;
	animation: slowspin 4.8s linear infinite;
}
@keyframes slowspin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.assistant-loading-dot {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -2px;
	margin-top: -2px;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: var(--theme-color-primary);
	opacity: 0;
}
/* todo maybe try ending motion at the center so it's like a vortex */
/* AUTO-GENERATED: see generate_assistant_loading_css() in scripts.php */
.assistant-loading-dot.dot-1 {
	animation: assistant-dot-1 3.6s linear infinite;
	animation-delay: -0s;
}
@keyframes assistant-dot-1 {
	0% {
		transform: translate(433%, 459%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-433%, -459%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-2 {
	animation: assistant-dot-2 3.6s linear infinite;
	animation-delay: -0.68s;
}
@keyframes assistant-dot-2 {
	0% {
		transform: translate(-698%, 227%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(698%, -227%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-3 {
	animation: assistant-dot-3 3.6s linear infinite;
	animation-delay: -1.35s;
}
@keyframes assistant-dot-3 {
	0% {
		transform: translate(488%, -187%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-488%, 187%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-4 {
	animation: assistant-dot-4 3.6s linear infinite;
	animation-delay: -2.03s;
}
@keyframes assistant-dot-4 {
	0% {
		transform: translate(-568%, 526%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(568%, -526%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-5 {
	animation: assistant-dot-5 3.6s linear infinite;
	animation-delay: -2.7s;
}
@keyframes assistant-dot-5 {
	0% {
		transform: translate(-601%, -390%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(601%, 390%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-6 {
	animation: assistant-dot-6 3.6s linear infinite;
	animation-delay: -3.38s;
}
@keyframes assistant-dot-6 {
	0% {
		transform: translate(508%, 139%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-508%, -139%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-7 {
	animation: assistant-dot-7 3.6s linear infinite;
	animation-delay: -4.05s;
}
@keyframes assistant-dot-7 {
	0% {
		transform: translate(631%, -483%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-631%, 483%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-8 {
	animation: assistant-dot-8 3.6s linear infinite;
	animation-delay: -4.73s;
}
@keyframes assistant-dot-8 {
	0% {
		transform: translate(-333%, -603%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(333%, 603%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-9 {
	animation: assistant-dot-9 3.6s linear infinite;
	animation-delay: -5.4s;
}
@keyframes assistant-dot-9 {
	0% {
		transform: translate(-331%, -688%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(331%, 688%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-10 {
	animation: assistant-dot-10 3.6s linear infinite;
	animation-delay: -6.08s;
}
@keyframes assistant-dot-10 {
	0% {
		transform: translate(604%, 146%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-604%, -146%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-11 {
	animation: assistant-dot-11 3.6s linear infinite;
	animation-delay: -6.75s;
}
@keyframes assistant-dot-11 {
	0% {
		transform: translate(-53%, 698%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(53%, -698%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-12 {
	animation: assistant-dot-12 3.6s linear infinite;
	animation-delay: -7.43s;
}
@keyframes assistant-dot-12 {
	0% {
		transform: translate(-712%, 37%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(712%, -37%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-13 {
	animation: assistant-dot-13 3.6s linear infinite;
	animation-delay: -8.1s;
}
@keyframes assistant-dot-13 {
	0% {
		transform: translate(-351%, 701%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(351%, -701%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-14 {
	animation: assistant-dot-14 3.6s linear infinite;
	animation-delay: -8.78s;
}
@keyframes assistant-dot-14 {
	0% {
		transform: translate(260%, -497%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-260%, 497%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-15 {
	animation: assistant-dot-15 3.6s linear infinite;
	animation-delay: -9.45s;
}
@keyframes assistant-dot-15 {
	0% {
		transform: translate(-716%, 116%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(716%, -116%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.assistant-loading-dot.dot-16 {
	animation: assistant-dot-16 3.6s linear infinite;
	animation-delay: -10.13s;
}
@keyframes assistant-dot-16 {
	0% {
		transform: translate(337%, -456%) scale(1.5);
		opacity: 0;
	}
	16% {
		transform: translate(0%, 0%) scale(2.5);
		opacity: 1;
	}
	33% {
		transform: translate(-337%, 456%) scale(1.5);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.nfc-log-page {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: background-color .2s ease-in;
}
.nfc-log-page.logged {
	background: var(--theme-color-primary);
}
.darkmode .nfc-log-page {
	background: var(--surface-bg);
}
.nfc-log-page-body {
	position: relative; /* to position over ripple */
	padding: 15px;
	text-align: center;
}
.nfc-log-ripple {
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: 75px;
	margin-left: -50px;
	z-index: 0;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	transform-origin: 50% 50%;
	opacity: 0;
	animation: nfc-log-ripple-anim 1.2s ease-out .4s;
}
.darkmode .nfc-log-ripple {
	background: var(--theme-color-text);
}
@keyframes nfc-log-ripple-anim {
	from {
		transform: scale(1);
		opacity: 0.4;
	}
	to {
		transform: scale(20);
		opacity: 0;
	}
}
.nfc-log-entry {
	margin: 25px 0 40px;
	padding: 15px;
	border-radius: var(--card-border-radius);
	background: var(--surface-bg-24dp);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	cursor: pointer;
	opacity: 0;
	animation: nfc-log-entry-anim .6s cubic-bezier(0.22, 1, 0.36, 1) .8s forwards;
}
@keyframes nfc-log-entry-anim {
	from {
		transform: translateY(10px);
		opacity: 0.6;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.nfc-log-entry-title {
	font-size: 24px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.nfc-log-entry-subtitle {
	font-size: 16px;
	margin-top: 6px;
	color: var(--theme-color-text);
	font-weight: 600;
}
.nfc-log-entry-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}
.nfc-log-entry-tag {
	border-radius: 3em;
	padding: 0.2em 0.8em;
	background: var(--theme-color-light);
	font-size: 14px;
}
.darkmode .nfc-log-entry-tag {
	background: var(--theme-color-shadow);
}
.nfc-log-entry-icon {
	display: inline-block;
	width: 38px;
	height: 38px;
	margin-bottom: 8px;
	border-radius: 50%;
	overflow: hidden;
}
.nfc-log-entry-info-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 12px;
}
.nfc-log-entry-info {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--logo-text);
	--btn-text: var(--theme-color-text);
}

.nfc-scan-icon-wrap {
	position: relative;
	width: 190px;
	height: 190px;
	margin: 20px auto 40px;
}
.nfc-scan-spinner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.nfc-scan-spinner-circle {
	fill: none;
	stroke-width: 6;
	stroke-dasharray: 314;
	stroke: var(--theme-color-primary);
	transform-origin: 50% 50%;
	animation: nfc-scan-spinner-anim 3s linear infinite;
}
@keyframes nfc-scan-spinner-anim {
	0% {
		transform: rotate(-90deg);
		stroke-dashoffset: 314;
	}
	50% {
		transform: rotate(450deg);
		stroke-dashoffset: 60;
	}
	100% {
		transform: rotate(990deg);
		stroke-dashoffset: 314;
	}
}
.nfc-scan-success {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 20px; /* extra div with padding to prevent box shadow from clipping in safari */
	opacity: 0;
	transform-origin: 50% 50%;
	animation: nfc-scan-success-anim .4s cubic-bezier(0.34, 1.56, 0.64, 1) .3s forwards;
}
@keyframes nfc-scan-success-anim {
	0% {
		transform: scale(0.2);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.nfc-scan-success-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px 4px rgba(0, 0, 0, 0.2);
}
.darkmode .nfc-scan-success-icon {
	background: var(--theme-color-primary);
}
.nfc-scan-success-check {
	fill: none;
	opacity: 0;
	stroke: var(--theme-color-primary);
	stroke-width: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: nfc-scan-success-check-anim .6s ease-out .5s forwards;
}
.darkmode .nfc-scan-success-check {
	stroke: #fff;
}
@keyframes nfc-scan-success-check-anim {
	to {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.nfc-settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 7px;
}
.nfc-settings-edit-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 15px;
	text-align: left;
	width: 100%;
	border-top: var(--card-separator);
}
.nfc-settings-edit-row .daily-log-type-icon {
	border-radius: 50%;
}
.nfc-settings-edit-row-content {
	display: flex;
	align-items: center;
	flex-grow: 1;
	gap: 15px;
}
.nfc-settings-edit-row-value {
	font-size: 15px;
}
.nfc-settings-footer {
	padding: 25px;
	display: flex;
	justify-content: center;
	gap: 15px;
}
.nfc-settings-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.nfc-settings-detail-info {
	margin-bottom: 15px;
}
.nfc-settings-detail-med {
	margin-bottom: 8px;
}
.nfc-settings-help-header {
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin-bottom: 5px;
}
.nfc-settings-help-item:not(:first-child) {
	margin-top: 4px;
}
.nfc-settings-help-block:not(:first-child) {
	margin-top: 25px;
}
.nfc-settings-history-btn {
	margin-top: 20px;
}
.nfc-settings-empty-wrap {
	text-align: center;
	padding: 20px;
}
.nfc-settings-empty-img {
	width: 260px;
	height: 260px;
	margin: -5px auto -15px;
}
.nfc-settings-empty-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}
.nfc-settings-empty-btn {
	min-width: 200px;
}
.nfc-settings-free-shipping {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	margin-top: 25px;
	--btn-text: var(--theme-color-primary);
}

@media (hover: hover) {
	.nfc-settings-edit-row:hover {
		background: var(--hover-gray);
	}
}
.nfc-setup-form-label {
	font-size: 14px;
}
.nfc-setup-step-header {
	font-weight: 600;
	margin-bottom: 15px;
}

.nfc-setup-selected-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-align: left;
	width: calc(100% + 16px);
	padding: 8px 12px;
	margin: 0 -8px 35px;
	background: var(--theme-color-bg);
	border-radius: var(--card-border-radius);
}
.nfc-setup-selected-type .daily-log-type-icon {
	width: 26px;
	height: 26px;
}
.nfc-setup-selected-type-label {
	font-size: 12px;
	color: var(--theme-color-text);
}
.nfc-setup-selected-type-change {
	margin-left: auto;
	font-size: 0.8em;
	color: var(--theme-color-text);
}
.nfc-setup-types {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.nfc-setup-type-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	width: 105px;
	max-width: 150px;
	flex-grow: 1;
	padding: 10px;
	color: var(--theme-color-text);
	border-radius: var(--card-border-radius);
}
.nfc-setup-type-btn .daily-log-type-icon {
	--icon-fill: #fff;
	--icon-bg: var(--theme-color-btn);
	border-radius: 50%;
	width: 64px;
	height: 64px;
	padding: 12px;
}
.nfc-setup-types-more {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: 1fr;
	margin-top: 25px;
}
.nfc-setup-auto-log-options {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.nfc-setup-auto-log-option {
	flex-basis: 0;
	flex-grow: 1;
	padding: 12px;
	background: var(--surface-bg-24dp);
	border-radius: var(--card-border-radius);
	border: 2px solid var(--hover-gray); /* so that the border doesn't change width when selected */
}
.nfc-setup-auto-log-option-subtitle {
	font-size: 13px;
}
.nfc-setup-auto-log-option.selected {
	border-color: var(--theme-color-primary);
	--btn-text: var(--theme-color-primary);
	color: var(--theme-color-text);
}
.nfc-setup-auto-log-option.disabled {
	pointer-events: none;
	opacity: 0.3;
}
.nfc-setup-auto-log-option svg.btn-svg {
	width: 32px;
	height: 32px;
}
.nfc-setup-submit-btn-wrap {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}
.nfc-setup-submit-btn {
	font-size: 1.2em;
	padding: 0.6em 1em;
	margin: 0 auto;
	min-width: 140px;
}
.nfc-setup-search-select-value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 15px 12px;
	margin: 0 -8px 10px;
	background: var(--chip-bg);
	border-radius: var(--card-border-radius);
	cursor: pointer;
}
.nfc-setup-search-select-value.truncate {
	overflow: hidden;
}
.nfc-setup-search-select-value-name {
	display: flex;
	align-items: center;
	gap: 8px;
}
.nfc-setup-search-select-value-name-truncate {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.btn.nfc-setup-search-select-value-edit {
	--btn-text: var(--text);
	flex-shrink: 0;
}
.food-select-last-consumed {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 5px;
}
.activity-type-select-option {
	display: flex;
	align-items: center;
	gap: 8px;
}
.activity-type-select-option-icon {
	width: 24px;
	height: 24px;
	--btn-text: var(--theme-color-primary);
}
.activity-type-select-value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 15px 12px;
	margin: 0 -8px 10px;
	background: var(--theme-color-bg);
	border-radius: var(--card-border-radius);
	cursor: pointer;
}
.activity-type-select-value-name {
	display: flex;
	align-items: center;
	gap: 6px;
}
.btn.activity-type-select-value-edit {
	--btn-text: var(--text);
	flex-shrink: 0;
}

/* Edit List Modal */
.activity-type-list-row {
	display: flex;
	align-items: center;
	padding: 15px 0;
	width: 100%;
}
.activity-type-list-row + .activity-type-list-row {
	border-top: var(--card-separator);
}
.activity-type-list-row-name {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	--btn-text: var(--theme-color-text);
}
.activity-type-list-row-edit {
	flex-shrink: 0;
}
.activity-type-edit-form-subtitle {
	font-size: 15px;
}
.activity-type-edit-form-icon-wrap {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 25px;
}
.btn.activity-type-edit-form-icon {
	width: 40px;
	height: 40px;
	font-size: 20px;
	--btn-text: var(--theme-color-primary);
	border: 1px solid var(--theme-color-primary);
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
}
.activity-type-icon-select .radio-icon-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	--btn-text: var(--theme-color-primary);
	background: var(--theme-color-bg);
	width: 48px;
	height: 48px;
}
.pee-color-selector .radio-icon-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.pee-color-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: var(--card-separator);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.new-insights-banner {
	position: fixed;
	top: 0;
	width: 100%;
	background: var(--theme-color-btn);
	color: #fff;
	font-size: 1.1em;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: calc(var(--page-header-z-index) + 1);
}
.new-insights-banner .btn {
	--btn-text: #fff;
}
.new-insights-banner .btn.outline {
	margin-left: auto;
	margin-right: 5px;
}
.metrics-correlation {
	display: flex;
	flex-direction: column;
}
.metrics-correlation.no-result {
	justify-content: center;
}
.metrics-correlation.no-result .metrics-correlation-config {
	min-height: 180px;
}
.metrics-correlation.no-result .metrics-correlation-config-sentence {
	justify-content: center;
	font-size: 18px;
}
.metrics-correlation.no-result .metrics-correlation-config-date-label {
	font-size: 16px;
}
.metrics-correlation-auto-prompt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 20px;
}
.metrics-correlation-auto-prompt-label {
	color: var(--text-muted);
	font-size: 14px;
}
.metrics-correlation-auto-prompt-btn {
	flex-shrink: 0;
	opacity: 0.9;
}

.metrics-correlation-icon {
	fill: var(--theme-color-text);
	width: 28px;
	height: 28px;
}
.metrics-correlation-config {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	font-size: 15px;
	padding: 20px;
}
.metrics-correlation-block {
	margin-bottom: 10px;
}
.metrics-correlation-config-header {
	padding: 20px 0 15px;
	text-align: center;
	font-size: 16px;
	color: var(--logo-text);
}
.metrics-correlation-config-sentence {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.metrics-correlation-config-date {
	margin-top: 15px;
}
.metrics-correlation-config-date-label {
	font-size: 14px;
}
.metrics-correlation-inline-picker {
	display: inline-flex;
	max-width: 220px;
}
.metrics-correlation-date-inputs {
	display: flex;
	gap: 20px;
	margin-left: 33px;
	flex-wrap: wrap;
	row-gap: 5px;
}
.metrics-correlation-config-more-options {
	display: flex;
	margin: 0 auto -10px;
	font-size: 14px;
}
.metrics-correlation-loading-wrap {
	margin: 70px 0 40px;
	text-align: center;
}
.metrics-correlation-error-wrap {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.metrics-correlation-error-icon {
	stroke: var(--red-error);
}

.metrics-correlation-summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.metrics-correlation-summary-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--theme-color-text);
	font-size: 16px;
	font-weight: 600;
}
.metrics-correlation-summary-diff {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--theme-color-text);
	font-weight: 600;
	font-size: 16px;
	background: var(--theme-color-bg);
	border-radius: 3em;
	padding: 0.1em 0.6em;
}
.metrics-correlation-summary-diff .up-stem-svg path,
.metrics-correlation-summary-diff .down-stem-svg path {
	stroke-width: 13px;
}
.metrics-correlation-summary-input {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-size: 14px;
	margin-top: 4px;
}
.metrics-correlation-summary-input .daily-log-type-icon {
	width: 16px;
	height: 16px;
	margin-top: -2px;
	--icon-fill: var(--theme-color-text);
}
.metrics-correlation-summary-input-bold {
	font-weight: 600;
	color: var(--theme-color-text);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.metrics-correlation-result-stat-sig {
	display: flex;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
}
.metrics-correlation-result-stat-sig-value {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.metrics-correlation-result-stat-sig .metrics-correlation-icon {
	width: 1.2em;
	height: 1.2em;
}
.metrics-correlation-result-btns {
	display: flex;
	justify-content: space-around;
	gap: 15px;
	margin-top: 25px;
}
.metrics-correlation-result-btn {
	min-width: 120px;
}
.metrics-correlation-stat-sig-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: 12px;
	padding: 7px 15px;
	color: var(--theme-color-text);
	font-size: 16px;
	border: 2px solid;
	margin: 15px 0;
	font-weight: 600;
	text-align: left;
	min-width: 125px;
}
.metrics-correlation-chart-point-info {
	display: flex;
	align-items: center;
	color: var(--theme-color-text);
	gap: 5px;
	font-weight: bold;
}
.metrics-correlation-chart-point-info .metrics-correlation-icon {
	width: 20px;
	height: 20px;
}
.metrics-correlation-insignificant-msg {
	font-size: 14px;
	margin: 25px -5px;
	font-weight: 600;
	background: var(--theme-color-light);
	padding: 15px;
	border-radius: var(--card-border-radius);
}
.metrics-correlation-compare-table {
	border-radius: 4px;
	border: var(--card-separator);
	font-size: 14px;
	margin: 10px 0;
}
.metrics-correlation-data-point-notes {
	font-size: 14px;
	color: var(--text-muted);
	margin: 15px;
}
.metrics-correlation-data-point-table {
	border-top: var(--card-separator);
	border-bottom: var(--card-separator);
	font-size: 14px;
}
.metrics-correlation-table-row {
	display: flex;
	align-items: stretch;
}
.metrics-correlation-table-row:not(:last-child) {
	border-bottom: var(--card-separator);
}
.metrics-correlation-table-cell {
	flex: 1 1 100px;
}
.metrics-correlation-compare-table .metrics-correlation-table-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.metrics-correlation-table-header .metrics-correlation-table-cell {
	font-size: 12px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.metrics-correlation-table.insignificant .metrics-correlation-table-cell {
	color: var(--text-muted);
}
.metrics-correlation-table-cell:last-child {
	border-left: var(--card-separator);
}
.metrics-correlation-rating-label {
	margin-top: 20px;
	font-size: 0.8em;
}
.metrics-correlation-rating-btns {
	margin-bottom: -10px;
}
.metrics-correlation-rating-btns .btn.selected {
	--btn-text: var(--theme-color-primary);
}
.metrics-correlation-rating-form {
	text-align: left;
}
.metrics-correlation-stat-value {
	font-size: 1.1em;
	display: flex;
	gap: 5px;
	align-items: baseline;
	justify-content: center;
}
.metrics-correlation-stat-unit {
	font-size: 0.7em;
}
.metrics-correlation-data-point-table .metrics-correlation-table-cell {
	padding: 3px 10px;
	font-size: 12px;
}
.metrics-correlation-data-point {
	display: flex;
	justify-content: space-between;
	color: var(--text-muted);
}
.metrics-correlation-data-point-time {
	flex: 0 0 60px;
	text-align: right;
}
.metrics-correlation-offset-options {
	border-radius: 4px;
	border: var(--card-separator);
}
.metrics-correlation-offset-option {
	width: 100%;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.metrics-correlation-offset-option.selected {
	font-weight: 600;
}
.metrics-correlation-offset-option .check-svg {
	--btn-text: var(--theme-color-primary);
}
.metrics-correlation-offset-option:not(:last-child) {
	border-bottom: var(--card-separator);
}
.metrics-correlation-chart {
	padding: 10px 0;
	margin: auto;
}
.metrics-correlation-chart-title {
	font-size: 0.8em;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.metrics-correlation-chart-title .tooltip-wrap {
	margin-left: 5px;
	color: var(--text-muted);
}
.metrics-correlation-threshold {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
}
.metrics-correlation-threshold-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.metrics-correlation-threshold-label {
	margin-bottom: -5px;
	color: var(--theme-color-text);
}
.correlation-modal-card.metrics-correlation-upgrade {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 14px;
	background: var(--notice-bg);
}
.metrics-correlation-stat-sig-info {
	font-size: 15px;
}
.metrics-correlation-stat-sig-warning {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 15px;
}
.metrics-correlation-result-tracking {
	margin-top: 15px;
	text-align: center;
}
.metrics-correlation-premium-label {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 400;
	color: var(--theme-color-text);
	--btn-text: var(--theme-color-primary);
}
@media (hover: hover) {
	.metrics-correlation-offset-option:hover {
		background: var(--hover-gray);
	}
}
/* Hack to override CorrelationModal's var(--html-bg) on desktop */
/* Remove after refactor to MetricCorrelation renders the Modal so we can control the class setting the background */
.metrics-correlation.no-result {
	background: var(--surface-bg);
	border-bottom-left-radius: var(--card-border-radius);
	border-bottom-right-radius: var(--card-border-radius);
}
@media (max-width: 500px) {
	.metrics-correlation.no-result {
		height: 100%;
		background: none;
		border-radius: 0;
	}
	.metrics-correlation.no-result .metrics-correlation-config {
		background: var(--surface-bg-12dp);
		border-bottom: var(--card-separator);
		border-top: var(--card-separator);
		box-shadow: 0 0 5px #00000020;
	}
	.metrics-correlation.no-result .metrics-correlation-config-sentence {
		justify-content: flex-start;
		font-size: 16px;
	}
	.metrics-correlation.no-result .metrics-correlation-config-date-label {
		font-size: 14px;
	}
	.metrics-correlation-auto-prompt {
		padding: 15px;
	}
	.metrics-correlation-config-header {
		margin-top: -60px;
	}
}
.metrics-correlation-data-trimmed-notice {
	margin-top: 20px;
	text-align: center;
	font-size: 16px;
}
.metrics-correlation-suggestions-prompt {
	font-size: 14px;
	color: var(--text-muted);
}
.metrics-correlation-suggestions-list {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin: 8px -20px 4px -5px;
	padding-right: 15px; /* for when you hit the end of the horizontal scroll */
}
.metrics-correlation-suggestions-list::-webkit-scrollbar {
	display: none;
}
.metrics-correlation-suggestions {
	margin: 15px 0 -10px;
}
.metrics-correlation-no-data-header {
	font-weight: 600;
	font-size: 15px;
	text-align: left;
	margin-bottom: 20px;
}
.metrics-correlation-no-data-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
.metrics-correlation-no-data-options-prompt {
	font-size: 14px;
	margin-bottom: 10px;
	text-align: left;
}
.metrics-correlation-no-data-options-manual-option {
	text-align: left;
	font-size: 14px;
	margin-top: 15px;
}
.metrics-correlation-no-data-refresh-wrap {
	padding: 35px 0 5px;
	text-align: center;
}
/* Specific to Scatter Plot */
.scatter-plot {
	position: relative;
	margin: 30px 0 35px 0;
}
.scatter-plot-axes {
	border: solid var(--border-color);
	border-width: 0 0 1px 1px;
}
.scatter-plot-axis-label {
	position: absolute;
	font-size: 12px;
	color: var(--text-muted);
}
.scatter-plot-axis-label.y-min,
.scatter-plot-axis-label.y-max {
	background: rgba(255, 255, 255, 0.9);
	padding: 0 5px 0 3px;
	border-radius: 0 10px 10px 0;
}
.darkmode .scatter-plot-axis-label.y-min,
.darkmode .scatter-plot-axis-label.y-max {
	background: rgba(48, 48, 48, 0.9);
}
.scatter-plot-axis-label.y-min {
	bottom: 2px;
}
.scatter-plot-axis-label.y-max {
	top: -11px;
}
.scatter-plot-axis-label.x-min,
.scatter-plot-axis-label.x-max {
	bottom: -18px;
}
.scatter-plot-axis-label.x-min {
	left: 0;
}
.scatter-plot-axis-label.x-title,
.scatter-plot-axis-label.x-max {
	right: 0;
}
.scatter-plot-axis-label.y-title {
	top: -25px;
}
.scatter-plot-axis-label.x-title {
	bottom: -32px;
}
.scatter-plot-annotation-date {
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 600;
}

/* Shared ScatterPointArea Component */
.scatter-annotation {
	position: absolute;
	padding: 2px 5px;
	font-size: 11px;
	background: var(--surface-bg-12dp);
	border: var(--card-separator);
	border-radius: 4px;
}
.scatter-points {
	margin: 5px 10px;
	position: relative;
}
.scatter-points-svg {
	overflow: visible; /* to show axis min/max points */
}
.scatter-point {
	--scatter-point-color: var(--chart-blue-dark);
	fill: var(--scatter-point-color);
	cursor: pointer;
	opacity: 0.5;
}
.darkmode .scatter-point {
	--scatter-point-color: var(--chart-blue);
}
.scatter-point.outline {
	fill: none;
	stroke-width: 1;
	stroke: var(--scatter-point-color);
}
.scatter-point.selected {
	fill: #e3cb1d;
	opacity: 1;
}

@media (hover: hover) {
	.scatter-point:hover {
		opacity: 0.8;
	}
	.scatter-point.selected:hover {
		fill: #c2ad00;
	}
}

.strip-plot {
	position: relative;
	margin-bottom: 35px;
}
.strip-plot-axes {
	border-bottom: 1px solid var(--border-color);
	border-left: 1px dashed var(--border-color);
	border-right: 1px dashed var(--border-color);
}
.strip-plot-interval-block,
.strip-plot-interval-label,
.strip-plot-axis-title {
	position: absolute;
	color: var(--text-muted);
}
.strip-plot-interval-label {
	bottom: -18px;
	font-size: 11px;
}
.strip-plot-interval-block {
	height: 100%;
	border-left: 1px dashed var(--border-color);
}
.strip-plot-interval-block:last-child {
	border-right: 1px dashed var(--border-color);
}
.strip-plot-axis-title {
	font-size: 12px;
	bottom: -35px;
	right: 0;
}
.strip-plot-bucket-label {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 600;
	text-align: center;
}
.strip-plot-bucket-label-text {
	position: relative;
	padding: 2px 5px;
}
.strip-plot-annotation-date {
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 600;
}
.strip-plot .scatter-points {
	margin: 0;
	z-index: 1; /* so that any annotations render above the bucket titles */
}
.quadrant-plot .scatter-point {
	opacity: 1;
}
.quadrant-plot-legend-left,
.quadrant-plot-legend-right {
	position: absolute;
	left: 0;
	width: 50%;
	top: 100%;
	font-size: 0.8em;
	padding: 2px 5px 0 0;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
.quadrant-plot-legend-right {
	left: 50%;
	padding: 2px 0 0 5px;
}
.quadrant-plot-legend-point {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 5px;
	flex-shrink: 0;
	background: var(--theme-color-primary);
}
.quadrant-plot-legend-point.outline {
	background: none;
	border: 1px solid var(--theme-color-primary);
}
.quadrant-plot .scatter-point {
	--scatter-point-color: var(--theme-color-primary);
}
.correlation-metric-picker {
	font-size: 16px;
}
.correlation-metric-picker-section + .correlation-metric-picker-section {
	margin-top: 15px;
	border-top: var(--card-separator);
}
.correlation-metric-picker-selected-type-wrap {
	display: flex;
	align-items: center;
}
.correlation-metric-picker-selected-type {
	font-size: 20px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin-right: 10px;
}

.correlation-metric-picker-type-group:not(:first-child) {
	margin-top: 25px;
}
.correlation-metric-picker-type-header {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}
.correlation-metric-picker-type-group .log-types-picker-types {
	margin: 0 -8px;
}
.correlation-metric-picker-note {
	margin: 10px 0 20px;
	font-size: 0.8em;
	color: var(--text-muted);
}

.correlation-metric-picker-section-title {
	font-weight: 600;
	margin: 15px 0;
}
.correlation-metric-picker-optional-filters-title {
	margin: 15px 0;
	font-size: 14px;
}
.correlation-metric-picker-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.correlation-metric-picker-filter-option {
	display: grid;
	grid-template-columns: 3fr 4fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
	justify-items: center;
}
.correlation-metric-picker-filter .std-input {
	width: 100%;
	max-width: 400px;
}
.correlation-metric-picker-filter .autocomplete-option {
	margin-left: 0.6em;
}
.correlation-metric-picker-filter-label {
	display: flex;
	align-items: center;
	width: 100%;
}
.radio-group-label.correlation-metric-picker-value-field {
	align-items: baseline;
	margin-bottom: 5px;
	min-height: 40px; /*ensures row doesn't jump if a select input conditionally renders*/
}
.correlation-metric-picker-value-field-label {
	display: flex;
	align-items: center;
	gap: 10px;
}
.correlation-metric-picker-value-field-filter {
	margin-left: 25px;
	margin-bottom: 15px;
}
.metrics-correlation-fallback-section {
	margin-top: 15px;
}
.metrics-correlation-fallback-input {
	margin-left: 10px
}
.metrics-correlation-config-btn {
	font-size: 0.9em;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-break: break-all;
	max-width: 220px;
}
.correlation-metric-picker-location.setting-edit-row {
	margin: 10px -15px;
	width: calc(100% + 20px);
}
.correlation-metric-picker-location.empty.setting-edit-row .setting-edit-value-label {
	font-weight: 600;
	margin-bottom: 5px;
}
.biomarker-list-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	gap: 6px;
}
.biomarker-list-filter-options-icon {
	--btn-text: var(--theme-color-text);
	background: var(--theme-color-bg);
}
.biomarker-list-search-icon {
	--btn-text: var(--theme-color-text);
	background: var(--theme-color-bg);
}
.biomarker-list-controls .search-bar {
	width: 100%;
}
.biomarker-list-group {
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	background: var(--surface-bg-8dp);
	margin: 5px 15px 25px;
}
.biomarker-filter-options-group {
	padding: 0 15px 15px 15px;
}
.darkmode .biomarker-list-group {
	border: none;
}
.biomarker-list-group-header {
	padding: 8px 15px;
}
.biomarker-list-group-name {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 20px;
	font-weight: 600;
}
.biomarker-list-group-name .profile-biomarkers-icon {
	margin-left: -8px;
}
.biomarker-list-info-icon {
	margin-left: auto;
	margin-right: -8px;
	--btn-text: var(--icon-info-gray);
}
.biomarker-list-group-rows {
	margin-top: 10px;
}
.biomarker-list-row {
	display: flex;
	align-items: center;
	gap: 25px;
	width: 100%;
	text-align: left;
	min-height: 45px;
	padding: 6px 12px;
	cursor: pointer;
}
.biomarker-list-row:not(:first-child) {
	border-top: var(--card-separator);
}
.biomarker-list-row:last-child {
	border-bottom-left-radius: var(--card-border-radius);
	border-bottom-right-radius: var(--card-border-radius);
}
.biomarker-list-row.disabled {
	pointer-events: none;
}

.biomarker-list-row-name {
	flex: 1 0 160px;
	word-break: break-word;
}
.biomarker-list-row-subtitle {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-muted);
}
.biomarker-list-row-value-range {
	display: flex;
	align-items: center;
	gap: 25px;
	flex: 1 0 315px; /* 90 + 200 + 25 */
	max-width: 375px; /* 150 + 200 + 25 */
}
.biomarker-list-row-value {
	/*flex-grow: 1;*/
	flex: 1 0 90px;
	/*max-width: 150px;*/
}
.biomarker-list-row-value.text {
	/* max 2 rows before truncating */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0.14em 0;
}
.biomarker-list-row-value.empty {
	font-size: 14px;
	opacity: 0.5;
}
.biomarker-list-row-unit {
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 5px;
}
.biomarker-list-row-range {
	flex: 0 0 200px;
}
.biomarker-list-row-range .reference-range-outer {
	margin-bottom: 8px;
}
.biomarker-list-row-date {
	flex: 0 0 150px;
	text-align: center;
	color: var(--text-muted);
}

.biomarker-list-more-row {
	gap: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.biomarker-list-more-btn {
	flex-shrink: 0;
	color: var(--text-muted);
	font-size: 14px;
}
.biomarker-list-more-row-dots {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.biomarker-list-empty {
	padding: 15px 15px 25px;
	text-align: center;
	font-size: 18px;
	color: var(--text-muted);
}


.biomarker-list-filter-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 15px 15px;
	overflow-x: auto;
}
.biomarker-list-filter-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--theme-color-bg);
	overflow: hidden;
	flex-shrink: 0;
}
.biomarker-list-filter-icon.all {
	color: var(--theme-color-text);
	font-weight: 600;
}
.biomarker-list-filter-icon.all.selected,
.biomarker-list-filter-icon.selected .profile-biomarkers-icon {
	color: #fff;
	fill: #fff;
	background: var(--theme-color-btn);
}
.biomarker-list-filter-icon.selected .profile-biomarkers-icon.reproduction path {
	fill: #fff;
}
.biomarker-list-filter-icon .profile-biomarkers-icon {
	width: 100%;
	height: 100%;
	padding: 16px;
}


.biomarker-panel-info.card {
	width: 800px;
}
.biomarker-panel-info-header {
	display: flex;
	align-items: center;
}

@media (hover: hover) {
	.biomarker-list-row:hover {
		background: var(--hover-gray);
	}
	.biomarker-list-search-icon:hover {
		--btn-text: var(--theme-color-text);
		background: var(--theme-color-light);
	}
}
@media (max-width: 960px) {
	.biomarker-list-row-date {
		display: none;
	}
}
@media (max-width: 800px) {
	.biomarker-list-group {
		margin-left: 10px;
		margin-right: 10px;
	}
	.biomarker-list-row {
		gap: 12px;
		padding: 6px 12px;
	}
	.biomarker-list-row-name {
		font-size: 14px;
		font-weight: 600;
	}
}
@media (max-width: 600px) {
	.biomarker-list-row-subtitle {
		font-size: 12px;
	}
	.biomarker-list-row-value-range {
		gap: 12px;
		flex: 1 0 192px; /* 50 + 130 + 12 */
	}
	.biomarker-list-row-value {
		flex: 1 0 50px;
		text-align: center;
	}
	.biomarker-list-row-value.text,
	.biomarker-list-row-value.empty {
		text-align: right;
		padding-right: 5px;
	}
	.biomarker-list-row-unit {
		display: none;
	}
	.biomarker-list-row-range {
		flex: 0 0 130px;
	}
	.biomarker-list-row-range .reference-range-wrap {
		width: 100%;
	}
}
@media (max-width: 400px) {
	.biomarker-list-row {
		padding: 6px 8px;
		gap: 4px;
	}
	.biomarker-list-row-name {
		flex: 1 0 100px;
	}
	.biomarker-list-row-value-range {
		flex: 1 0 154px; /* 50 + 100 + 4 */
	}
	.biomarker-list-row-value {
		font-size: 14px;
	}
	.biomarker-list-row-range {
		flex: 1 0 100px;
	}
}
.profile-biomarkers-action-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
}
.profile-biomarkers-add-modal-sync {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 25px;
}


/* Grid */
.profile-biomarkers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1px;
	border-top: var(--surface-border);
	overflow: hidden; /* hide extra border to the right */
	padding-bottom: 1px; /* to make the last bottom border visible */
}
.profile-biomarkers-grid-item {
	padding: 4px 4px 8px;
	text-align: left;
	background-color: var(--surface-bg-8dp);
	background-clip: padding-box;
	border-right: var(--surface-border);
	border-bottom: var(--surface-border);
	margin-right: -1px;
	margin-bottom: -1px;
	cursor: pointer;
}
.profile-biomarkers-grid-item-header {
	display: flex;
	align-items: center;
}
.biomarker-dots {
	display: flex;
	flex-wrap: wrap;
	margin-left: 5px;
}
.biomarker-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin: 4px;
	border-radius: 50%;
	background: var(--reference-range-color, var(--metric-green));
}
.biomarker-dot.empty {
	background: var(--border-color);
}
.profile-biomarkers-grid-item-all {
	position: relative;
	overflow: hidden;
	min-height: 48px;
}
.profile-biomarkers-grid-item-all-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--theme-color-text);
	--btn-text: var(--theme-color-text);
	font-weight: 600;
}
.profile-biomarkers-grid-item-all-icon {
	position: absolute;
	bottom: -8px;
	right: -12px;
	width: 72px;
	height: 72px;
	--btn-text: var(--theme-color-primary);
	opacity: 0.2;
	transform: rotate(-22deg);
}

/* Icons */
.profile-biomarkers-icon {
	--biomarker-icon-color: var(--biomarker-icon-color-lightmode);
	width: 40px;
	height: 40px;
	padding: 8px;
	stroke: none;
	fill: var(--biomarker-icon-color);
	--btn-text: var(--biomarker-icon-color);
	flex-shrink: 0;
}
.darkmode .profile-biomarkers-icon {
	--biomarker-icon-color: var(--biomarker-icon-color-darkmode);
}
.profile-biomarkers-icon.labs {
	--biomarker-icon-color-lightmode: var(--theme-color-primary);
	--biomarker-icon-color-darkmode: var(--theme-color-primary);
}
.profile-biomarkers-icon.heart {
	--biomarker-icon-color-lightmode: #bb4572;
	--biomarker-icon-color-darkmode: #d9608b;
}
.profile-biomarkers-icon.kidney {
	--biomarker-icon-color-lightmode: #ac7900;
	--biomarker-icon-color-darkmode: #cd9200;
}
.profile-biomarkers-icon.liver {
	--biomarker-icon-color-lightmode: #b54987;
	--biomarker-icon-color-darkmode: #d364a1;
}
.profile-biomarkers-icon.bones {
	--biomarker-icon-color-lightmode: #757575;
	--biomarker-icon-color-darkmode: #8b8b8b;
}
.profile-biomarkers-icon.oxygen {
	--biomarker-icon-color-lightmode: #be605e;
	--biomarker-icon-color-darkmode: #cd6d6a;
}
.profile-biomarkers-icon.thyroid {
	--biomarker-icon-color-lightmode: #b55856;
	--biomarker-icon-color-darkmode: #cc6d6a;
}
.profile-biomarkers-icon.blood-sugar {
	--biomarker-icon-color-lightmode: #be605e;
	--biomarker-icon-color-darkmode: #cd6d6a;
}
.profile-biomarkers-icon.reproduction {
	--biomarker-icon-color-lightmode: #cc7996;
	--biomarker-icon-color-darkmode: #cc7996;
}

/* Summary Card */
.profile-biomarkers-summary-wrap {
	width: 100%;
}
.profile-biomarkers-summary-header {
	display: flex;
	align-items: center;
	gap: 15px;
}
.profile-biomarkers-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 12px;
}
.profile-biomarkers-summary-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
}
.profile-biomarkers-summary .profile-biomarkers-icon {
	width: 20px;
	height: 20px;
	padding: 0;
}

.profile-biomarkers-modal.card-modal-card {
	width: 960px;
}

@media (hover: hover) {
	.profile-biomarkers-grid-item:hover {
		background-color: var(--hover-gray);
	}
}
@media (max-width: 840px) {
	.profile-biomarkers-grid {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}
#profile-page {
	width: 1260px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	--today-page-card-margin: 0 0 15px;
}
.profile-content {
	width: 925px; /* 1260 (page width) - 300 (nav) - 15 (nav margin) - 10 * 2 (page padding) */
	max-width: 100%;
}
.profile-nav {
	position: sticky;
	top: var(--page-margin-top);
	width: 300px;
	margin-right: 15px;
	padding: 10px 0;
	background: var(--portal-surface-bg);
	border-radius: var(--profile-card-border-radius);
	flex-shrink: 0;
}
.profile-nav-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 15px;
	cursor: pointer;
}
@media (hover: hover) {
	.profile-nav-row:hover {
		background: var(--hover-gray);
	}
}
.profile-card {
	background: var(--portal-surface-bg);
	margin: var(--today-page-card-margin);
	border-radius: var(--profile-card-border-radius);
}
.darkmode .profile-nav,
.darkmode .profile-card {
	border-color: transparent;
}

/* Clone of profile-header for now until we switch all sections over */
.profile-card-header {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px;
	border-top-left-radius: var(--profile-card-border-radius);
	border-top-right-radius: var(--profile-card-border-radius);
	background: var(--theme-color-light);
}
.darkmode .profile-card-header {
	background: none;
}
.profile-card-mobile {
	display: none;
	align-items: center;
	gap: 15px;
	padding: 12px 10px;
	border-radius: var(--profile-card-border-radius);
	background: var(--portal-surface-bg);
	width: 100%;
	min-height: 68px;
	text-align: left;
}
.profile-card-right-arrow {
	--btn-text: var(--text);
	background: var(--theme-color-light);
	border-radius: 32px;
	width: 48px;
	height: 26px;
	margin-left: auto;
	margin-right: 0;
	padding: 2px;
}
.profile-card-plus-btn {
	--btn-text: var(--text);
	background: var(--theme-color-light);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 7px;
	margin-left: auto;
	margin-right: 6px;
}
.profile-header {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 8px 10px;
	border-top-left-radius: var(--profile-card-border-radius);
	border-top-right-radius: var(--profile-card-border-radius);
	background: var(--theme-color-light);
}
.darkmode .profile-header {
	background: var(--surface-bg-muted);
}
.profile-section {
	padding: 15px;
}
.profile-section:not(:last-child) {
	border-bottom: var(--card-separator);
}
.profile-subsection {
	padding: 10px 15px;
}
.profile-section-icon {
	width: 32px;
	height: 32px;
	fill: var(--theme-color-primary);
	--btn-text: var(--theme-color-primary);
	flex-shrink: 0;
}
.profile-section-btns {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 15px;
}
/* Needs to be after the other profile-section-icon styles to override the padding */
.profile-section-icon.profile-nav-row-icon {
	width: 24px;
	height: 24px;
	fill: var(--theme-color-primary);
	--btn-text: var(--theme-color-primary);
	background: none;
	padding: 0;
}
.profile-header-title-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 15px;
	flex-grow: 1;
}
.profile-header-has-subtitle {
	line-height: 1;
}
.profile-header-subtitle {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-muted);
}
.profile-header-title-flex .text-btn {
	padding-right: 7px;
}
.profile-header-heading {
	font-size: 18px;
}
.btn.icon-btn.profile-header-icon-btn {
	--btn-text: var(--theme-color-primary);
	--btn-color-hover: var(--theme-color-light);
}

/* Same as profile-page max-width */
@media (max-width: 1260px) {
	.profile-nav {
		width: auto;
	}
	.profile-nav-row {
		margin-bottom: 5px;
	}
	.profile-nav-label {
		display: none;
	}
	.profile-section-icon.profile-nav-row-icon {
		width: 28px;
		height: 28px;
	}
}
/* Same as profile-content max-width */
@media (max-width: 925px) {
	#profile-page {
		padding-left: 0;
		padding-right: 0;
		--today-page-card-margin: 0 10px 12px 0;
	}
	.profile-nav {
		background: none;
		border: none;
		padding-top: 0;
		margin-right: 0;
	}
	.profile-card.mobile-full-width {
		--profile-card-border-radius: 0;
		border-left: 0;
		border-right: 0;
		margin-left: 0;
		margin-right: 0;
	}
}
@media (max-width: 550px) {
	#profile-page {
		--today-page-card-margin: 0 10px 12px;
	}
	.profile-card-body,
	.profile-card-header {
		display: none;
	}
	.profile-card-mobile {
		display: flex;
	}
	.profile-nav {
		display: none;
	}
}
@media (max-width: 360px) {
	#profile-page {
		--today-page-card-margin: 0 5px 12px;
	}
}

.distribution {
	margin: 20px 40px 0;
}
.distribution + .chart {
	margin-top: 20px;
}
.distribution.with-value-labels {
	margin-top: calc(2em + 20px);
}
.distribution-bars {
	height: 120px;
	position: relative;
}
.distribution-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #ccc;
	border-radius: 5px;
	border: 1px solid transparent;
}
.distribution-bar.highlight {
	background: var(--guava-green);
}
.distribution-labels {
	position: relative;
	height: 2em;
}
.distribution-label {
	position: absolute;
	text-align: center;
}
.distribution-value-label {
	position: absolute;
	text-align: center;
	margin-top: -2em;
}
.distribution-single-label {
	position: relative;
	width: 100px;
	margin: 10px 0 10px -50px;
	text-align: center;
	white-space: nowrap;
}
.distribution-slider {
	position: relative;
	height: 6px;
	background: #ccc;
	border-radius: 3px;
	margin: 10px 0;
}
.distribution-slider-min {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-radius: 10px 0 0 10px;
	background: var(--chart-blue);
}
.distribution-slider-max {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	border-radius: 0 10px 10px 0;
	background: var(--chart-blue);
}
.distribution-slider-dot {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	background: #ccc;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ccc;
	border-radius: 7px;
	z-index: 2; /* stay above min and max bars on the ends */
}
.distribution-slider-min-label {
	float: left;
	font-size: 0.8em;
	color: var(--chart-blue);
	margin-left: -50px;
	width: 100px;
	text-align: center;
}
.distribution-slider-max-label {
	font-size: 0.8em;
	color: var(--chart-blue);
	margin-right: -35px;
	margin-left: auto;
	width: 70px;
	text-align: center;
}
.health-info-toggle {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.health-info-footnote {
	margin-top: 10px;
	font-size: 12px;
	color: var(--text-muted);
}
@media (max-width: 500px) {
	/* distribution with a slider needs to keep its margins */
	.distribution {
		margin-left: 15px;
		margin-right: 15px;
	}
	.distribution.with-value-labels {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Generic rows */
.profile-data-row {
	display: flex;
	padding: 5px 0;
}
.profile-data-row.header {
	font-weight: 600;
	border-bottom: var(--card-separator);
}
.profile-data-row-name {
	flex-grow: 1;
}
.profile-data-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.profile-data-row-date {
	flex: 0 0 150px;
	text-align: right;
}
.profile-data-row-edit {
	flex: 0 0 80px;
	text-align: right;
}
.profile-genetics-instructions {
	font-size: 14px;
	color: var(--text-muted);
}

/* Rows with edit buttons, like medications and conditions */
.profile-data-edit-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	margin: 0 -15px; /* to negate card-section padding */
	width: calc(100% + 30px);
	text-align: left;
}
.profile-data-edit-row + .profile-data-edit-row {
	border-top: var(--card-separator);
}
.profile-data-edit-rows-inactive {
	margin-top: 15px;
}
.profile-data-edit-row-title {
	display: flex;
	align-items: center;
	padding-bottom: 5px;
}
.profile-data-edit-row-name {
	margin-bottom: 2px;
}
.profile-data-edit-row-tag.tag-label {
	margin-left: 5px;
	font-size: 12px;
	vertical-align: top;
}
.profile-data-edit-row .daily-log-type-icon {
	margin-right: 8px;
	width: 24px;
	height: 24px;
}

.profile-list-row-arrow {
	margin-left: 6px;
	--btn-text: var(--icon-gray);
}

.profile-data-edit-row-content {
	flex-grow: 1;
}

@media (hover: hover) {
	.profile-data-edit-row.hover-bg:hover {
		background: var(--hover-gray);
	}
}

.profile-genetics-report-list {
	margin: -10px -15px 0;
}

.profile-card-radio-toggle-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

/* Symptom Tracking */
.profile-color-blob {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: 0.5em;
	border-radius: 50%;
	flex-shrink: 0;
}

.profile-section-toggle-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.profile-section-toggle-subtitle {
	font-size: 12px;
}
.profile-card-more-wrap {
	text-align: center;
	margin: 10px 0;
}
.profile-card-more-btn.btn {
	--btn-text: var(--theme-color-text);
	--btn-color: transparent;
	--btn-color-hover: var(--theme-color-bg);
	padding: 5px 15px;
	border-radius: 32px;
}
.profile-section-add-modal-options {
	display: flex;
	align-items: flex-start;
	margin: 25px 0;
}
.profile-section-add-modal-options-btn {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 14px;
}
.profile-section-add-modal-options-wrap {
	height: 64px;
	width: 64px;
	background: var(--theme-color-btn);
	border-radius: 50%;
	margin-bottom: 10px;
}
.profile-section-add-modal-options-icon {
	width: 100%;
	height: 100%;
	padding: 12px;
	--btn-text: #fff;
}
.profile-section-add-modal-option-label {
	--btn-text: var(--theme-color-primary);
	display: flex;
	align-items: center;
	gap: 5px;
}
.profile-section-modal-footer-btns {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 25px -8px 0;
}
.subtype-menu-modal.card-modal-card.card {
    margin-top: 200px;
}
.subtype-menu-option {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	text-decoration: none;
	text-align: left;
	width: 100%;
	color: var(--text);
}
.subtype-menu-option + .subtype-menu-option {
	border-top: var(--card-separator);
}
@media (hover: hover) {
	.subtype-menu-option:hover {
		background: var(--hover-gray);
	}
}
@media print {
	/*
		Generally, using !important is a bad practice and anti-pattern. Using here because:
		1. It's used only to remove elements for printing, so there shouldn't be a specificity race going on
		2. It's not affecting any end-user-defined accessibility styling with the actual app (because it's only for printing)
		3. It means we don't have to keep testing the printing view when we make changes, in case a rule is defined elsewhere with additional specificity
	*/
	.assistant-btn-desktop,
	.profile-nav {
		display: none !important;
	}
}
.profile-header.profile-basic-info-header {
	background: none;
}
.profile-basic-info-name {
	padding-left: 5px;
	font-weight: 600;
	font-size: 22px;
	flex-grow: 1;
	white-space: break-spaces;
	word-break: break-word;
}
.profile-basic-info-tags {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0 10px 12px;
}
.profile-basic-info-subtitle {
	color: var(--text-muted);
	font-size: 14px;
	padding: 0 5px;
}
.profile-basic-info-dot {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0 -5px;
}
.profile-basic-info-tag.btn {
	--btn-color: var(--surface-bg);
	--btn-color-hover: var(--hover-gray);
	border: var(--card-separator);
	padding: 0.2em 0.7em;
}
.profile-metric-chart-icon {
	fill: var(--chart-blue);
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-left: 8px;
}
.profile-birthday {
	display: flex;
	align-items: center;
}
.profile-birthday-icon {
	width: 24px;
	height: 24px;
	fill: #00bfa5;
	background: none;
	padding: 0;
	margin-right: 5px;
	margin-top: -4px;
}
.profile-basic-info-header-btns {
	flex-shrink: 0;
	display: flex;
	align-self: flex-start;
}
.profile-basic-info-emergency-icon {
	--btn-text: var(--guava-green);
}
@media (hover: hover) {
	.profile-basic-info-emergency-icon:hover {
		--btn-text: var(--guava-green);
		background: var(--guava-green-bg);
	}
}
.basic-info-form-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.basic-info-form-hide-check {
	font-size: 14px;
	color: var(--text-muted);
}
.basic-info-form-unhide-input {
	margin-top: 20px;
}
.blood-type-info-header {
	font-size: 20px;
	text-align: center;
	padding-bottom: 15px;
}
.blood-type-info-p {
	text-align: center;
}
.blood-type-info-header .highlight,
.blood-type-info-p .highlight{
	color: var(--guava-green-text);
}

/* Blood Type Compatibility Chart */
.blood-type-compat-chart {
	display: grid;
	grid-template-columns: 1.5em repeat(9, 1fr);
	grid-template-rows: repeat(10, 1fr);
	padding: 20px 0;
}
.blood-type-compat-row-label {
	grid-row: 1;
	grid-column: 3 / 11;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
}
.blood-type-compat-col-label {
	grid-row: 3 / 11;
	grid-column: 1;
	width: 1.5em;
	margin: auto;
}
.blood-type-compat-col-label-text {
	display: flex;
	justify-content: center;
	transform: rotate(-90deg);
	font-weight: 600;
}
.blood-type-compat-table {
	grid-row: 2 / 11;
	grid-column: 2 / 11;
}
.blood-type-compat-row {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	justify-content: center;
	align-items: center;
}
.blood-type-compat-row + .blood-type-compat-row {
	border-top: var(--card-separator);
}
.blood-type-compat-cell {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 5px;
	width: 100%;
	height: 100%;
}
.blood-type-compat-cell + .blood-type-compat-cell {
	border-left: var(--card-separator);
}
.blood-type-compat-cell.highlight {
	background: var(--guava-green-bg);
}
.blood-type-compat-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--guava-green);
}
@media (max-width: 500px) {
	.blood-type-compat-chart {
		font-size: 12px;
	}
}
.profile-metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	margin: var(--today-page-card-margin);
}
.profile-metric {
	display: flex;
	flex-direction: column;
	align-items: normal;
	text-align: left;
	padding: 6px 11px 5px;
	background: var(--portal-surface-bg);
	border-radius: var(--card-border-radius);
}
.darkmode .profile-metric {
	border-color: transparent;
}
@media(hover: hover) {
	.profile-metric:hover {
		background: var(--hover-gray);
	}
}
.profile-metric-title {
	font-size: 13px;
	margin-bottom: 5px;
	word-wrap: break-word;
}
.profile-metric-value-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.profile-metric-value {
	font-size: 20px;
	color: var(--logo-text);
	flex-shrink: 0; /* for percentile-chart */
	line-height: 28px;
}
.darkmode .profile-metric-value {
	color: var(--text);
}
.profile-metric-unit {
	display: inline;
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 5px;
}
.profile-metric-note {
	display: flex;
	align-items: flex-end; /* when percentile is showing */
	flex-grow: 1;
	flex-wrap: wrap;
	margin-top: 3px;
}
.profile-metric-date {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 12px;
	color: var(--text-muted);
}
.profile-metric-pct-change {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--text-muted);
	margin-right: -2px;
}
.profile-metric-pct-change .up-stem-svg path,
.profile-metric-pct-change .down-stem-svg path {
	stroke-width: 8px;
}
.profile-metric-pct-change .up-stem-svg,
.profile-metric-pct-change .down-stem-svg {
	width: 14px;
	height: 14px;
	margin-right: 1px;
}
.profile-metric-pct-change .up-stem-svg {
	margin-top: -2px;
}
.profile-metric-goal {
	display: flex;
	align-items: center;
	gap: 1px;
	font-size: 12px;
	color: var(--text-muted);
}
.profile-metric-goal.goal-reached {
	gap: 3px;
	--btn-text: var(--theme-color-primary);
	color: var(--theme-color-text);
}
.profile-metric-data-entry-value {
	font-size: 15px;
	color: var(--text-muted);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.profile-metric-grid .daily-log-type-icon {
	width: 28px;
	height: 28px;
	margin-right: -2px;
	margin-top: -3px;
}

/* Percentile */
.percentile-chart {
	max-width: 150px;
	flex-basis: 100%;
}
.profile-metric-value-row .percentile-chart {
	margin-left: 15px;
	max-width: 120px;
}
.percentile-label {
	font-size: 12px;
	color: var(--text-muted);
}
.percentile-line {
	height: 4px;
	border-radius: 3px;
	background: var(--icon-info-gray);
	position: relative;
	margin: 3px 0 10px;
}
.percentile-dot {
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	background: var(--icon-info-gray);
	border: 2px solid var(--surface-bg);
	box-shadow: 0 0 0 1px var(--icon-info-gray);
	border-radius: 5px;
}
@media (max-width: 360px) {
	.profile-metric-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

.profile-metric-grid-header {
	position: relative;
}
.profile-metric-grid-customize-wrap {
	position: absolute;
	top: 0;
	right: 70px;
}
.profile-metric-grid-customize {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 15px;
	margin-left: auto;
	background: var(--theme-color-btn);
	padding: 4px 15px;
	font-size: 14px;
	color: #fff;
	--btn-text: #fff;
	border-radius: 12px;
	margin-top: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	cursor: pointer;
}
.profile-metric-grid-customize-close {
	width: 14px;
	height: 14px;
}
.profile-metric-grid-customize:before {
	content: '';
	position: absolute;
	margin-right: -9px;
	right: 0;
	border-left: solid 15px var(--theme-color-btn);
	border-top: solid 12px transparent;
	border-bottom: solid 12px transparent;
}
.profile-metric-modal-radio {
	margin-bottom: 15px;
	flex-wrap: nowrap;
	max-width: 100%;
}
.profile-metric-modal-radio .btn {
	font-size: 0.78em;
}
.percentile-note + .metric-chart-wrap,
.distribution + .metric-chart-wrap {
	margin-top: 35px;
}
.card-section.profile-metric-modal-empty {
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
	padding: 40px 0;
}
.metric-daily-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 -8px;
}
.metric-daily-rows:not(:first-child) {
	margin-top: 25px;
}
.metric-daily-row-header {
	font-size: 14px;
	font-weight: 600;
	padding: 0 4px;
	color: var(--text-muted);
}
.metric-daily-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	background: var(--chip-bg);
	border-radius: 8px;
	width: 100%;
	min-height: 40px;
	--btn-text: var(--icon-gray);
	cursor: pointer;
}
@media (hover: hover) {
	.metric-daily-row:hover {
		background: var(--chip-bg-hover);
	}
}
.metric-daily-row-date {
	margin-right: auto;
}
.metric-daily-row-unit {
	font-size: 14px;
	color: var(--text-muted);
	margin-left: 5px;
}
.metric-daily-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	text-align: right;
}
.metric-daily-row-empty {
	display: flex;
	justify-content: space-between;
	padding: 2px 12px;
	font-size: 13px;
	color: var(--text-muted);
}
.metric-daily-date-nav {
	margin: 0 -15px 25px;
}
.metric-daily-list {
	margin-top: 20px;
}
.metric-daily-list-header {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	border-bottom: var(--card-separator);
}
.metric-daily-list .daily-list {
	margin: 5px -5px;
	width: calc(100% + 10px);
}
.metric-daily-list .daily-list-empty-text {
	margin: 20px 0;
}
.metric-daily-list .daily-list-row {
	margin: 0;
	border-radius: 0;
}

.metric-stats-section-header {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}
.metric-stats-section-title {
	flex-grow: 1;
}

/* Calendar */
.metric-stats-calendar {
	position: relative;
	min-height: 200px;
}
.metric-stats-calendar-legend {
	margin: 15px 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 12px;
}
.metric-stats-calendar-legend-bar {
	position: relative;
	background: var(--theme-color-primary);
	border-radius: 4px;
	height: 10px;
	width: 100%;
	max-width: 120px;
}
.metric-stats-calendar-legend-bar-overlay {
	background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 90%);
	border: 1px solid var(--theme-color-primary);
	border-radius: 4px;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.darkmode .metric-stats-calendar-legend-bar-overlay {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 90%);
}
.metric-stats-calendar-legend-buckets {
	gap: 25px;
}
.metric-stats-calendar-legend-bucket {
	display: flex;
	align-items: center;
}
.metric-stats-calendar-legend-box {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	margin-right: 5px;
}

/* Stat Rows */
.metric-stats-rows {
	margin-top: 20px;
}
.metric-stats-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 5px 0;
	font-size: 14px;
}
.metric-stats-row-label {
	font-weight: 600;
	text-transform: uppercase;
}
.metric-stats-row-value {
	display: flex;
	align-items: baseline;
}
.metric-stats-row-unit {
	margin-left: 4px;
	font-size: 0.7em;
}
.metric-stats-row-date {
	font-size: 12px;
	color: var(--text-muted);
	margin-left: auto;
}

/* Goal */
.metric-stats-goal {
	margin-bottom: 20px;
}
.metric-stats-goal-header {
	display: flex;
	gap: 10px;
	align-items: center;
}
.metric-stats-goal-no-value {
	color: var(--text-muted);
}
.metric-stats-goal-icon {
	border-radius: 4px;
	background: var(--theme-color-btn);
	padding: 3px;
	--btn-text: #fff;
}
.metric-stats-goal-icon.upper-bound {
	border: 1px solid var(--theme-color-primary);
	background: none;
	--btn-text: var(--theme-color-primary);
}


/* Daily Stats */
.metric-stats-day-stat-btns {
	display: flex;
	gap: 5px;
}
.metric-stats-days-of-week {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* fit all 7 days of week on desktop modal */
	gap: 5px;
}
.metric-stats-day-of-week {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.metric-stats-day-of-week.empty .metric-stats-day-label {
	color: var(--text-muted);
}
.metric-stats-day-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--theme-color-text);
	text-transform: uppercase;
}
.metric-stats-day-value {
	display: flex;
	gap: 5px;
	align-items: baseline;
	font-size: 13px;
	text-align: center;
}
.metric-stats-day-unit {
	font-size: 0.7em;
}
.metric-stats-years-section.card-section {
	padding-top: 0;
	border-top: none;
}


/* Hourly Stats */
.metric-stats-hourly-wrap {
	display: flex;
	gap: 2px;
	max-width: 500px;
	justify-content: space-between;
	margin-bottom: 15px;
}
.metric-stats-hour-wrap {
	position: relative;
}
.metric-stats-hour {
	width: 14px;
	height: 14px;
	border-radius: 12px;
	background: var(--theme-color-primary);
}
.metric-stats-hour.empty {
	background: transparent;
	border: var(--card-separator);
}
.metric-stats-hour-label {
	font-size: 11px;
	color: var(--text-muted);
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	margin-top: 4px;
	text-align: center;
	line-height: 1;
}
.metric-stats-hour-label-ampm {
	font-size: 0.7em;
}
@media (max-width: 500px) {
	.metric-stats-hour {
		width: 11px;
		height: 11px;
	}
}
.compact-cal-wrap {
	display: flex;
}
.compact-cal-scroll-wrap {
	overflow-x: auto;
	position: relative;
}
.compact-cal-day-names,
.compact-cal-content {
	padding-top: 25px;
}

.compact-cal-content {
	display: flex;
	flex-direction: row;
	width: max-content;
	margin-bottom: 10px; /* so scroll bar doesn't overlap with boxes */
}
.compact-cal-week {
	display: flex;
	flex-direction: column;
}
.compact-cal-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}
.compact-cal-fill {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--theme-color-primary);
}
.compact-cal-fill.empty {
	background: none;
	border: var(--card-separator);
}
.darkmode .compact-cal-fill.empty {
	border-color: #666;
}
.compact-cal-day-header,
.compact-cal-month-header {
	color: var(--text-muted);
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
}

.compact-cal-month-header {
	position: absolute;
	margin-top: -15px;
}
.compact-cal-year-label {
	position: absolute;
	margin-top: -12px;
	font-weight: 600;
}
.compact-cal-star {
	position: absolute;
	width: 10px;
	height: 10px;
	z-index: 1; /* to rise above compact-cal-fill */
}
.btn-svg.star-svg.compact-cal-star path {
	fill: #fff;
}
.btn-svg.star-svg.compact-cal-star.inverted path {
	fill: var(--theme-color-primary);
}
.correlations-modal-wrap .card-modal-card.card {
	width: 600px;
}
.correlation-modal-card {
	background: var(--portal-surface-bg);
	border-radius: var(--card-border-radius);
	padding: 20px;
	margin: 15px 10px;
}
.correlation-modal-card + .correlation-modal-card {
	margin-top: 15px;
}

/* Info Modal */
.correlation-info-modal .card-section {
	font-size: 15px;
}
.correlation-info-modal-auto-section {
	background: var(--theme-color-light);
}
.correlation-info-modal-auto-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	--btn-text: var(--theme-color-primary);
}
.correlation-info-modal-auto-section .form-btns {
	margin-top: 15px;
}
.correlation-info-modal-disclaimer {
	font-size: 14px;
	color: var(--theme-color-text);
}
.correlation-info-video-section {
	margin: 0 -8px 20px;
}
.correlation-info-video-section .video-resource {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.correlation-modal-share-type-icon {
	background: var(--theme-color-btn);
	width: 38px;
	height: 38px;
	border-radius: 5px;
	padding: 6px;
	color: #fff;
}
.correlation-share-preview-title {
	font-weight: 400;
	margin-bottom: 15px;
	text-align: center;
}
.correlation-share {
	display: none;
	position: relative;
	width: 512px;
	height: 512px;
	background: #e0ecee;
	overflow: hidden;
}
.correlation-share-title {
	font-weight: 600;
	text-align: center;
	color: #fff;
	font-size: 40px;
	padding: 32px 0 96px;
	background: var(--guava-green);
}
.correlation-share-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 340px;
	margin-top: -80px;
}
.correlation-share-wave {
	position: absolute;
	top: 79px; /* 1 px overlap to prevent weird gap on some mobile devices */
	left: -400px;
}
.correlation-share-content .correlation-share-card {
	transform: scale(1.8);
	overflow: visible !important; /* required to prevent clipping with scale */
}
.correlation-share-brand {
	margin-top: 10px;
	color: var(--logo-text);
	text-align: center;
	font-size: 24px;
}
.correlation-share-guava-logo {
	position: absolute;
	bottom: 0;
	right: 4px;
}
.correlation-share-card {
	position: relative;
	flex: 0 0 164px;
	min-height: 164px; /* min-height in case android users scale up their font */
	width: 164px;
	border-radius: 8px;
	font-size: 16px;
	text-align: left;
	background: var(--theme-color-text-lightmode);
	color: #fff;
	overflow: hidden;
}
.correlation-share-card-icon {
	position: absolute;
	bottom: -10px;
	right: -10px;
}
.correlation-share-card-icon .daily-log-type-icon {
	--icon-fill: #ffffff15;
	width: 100px;
	height: 100px;
	padding: 6px;
}
.correlation-share-card-summary {
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	min-height: inherit;
	justify-content: flex-start;
	border-radius: 8px;
}
.correlation-share-card-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
}
.correlation-share-card-value-wrap {
	display: flex;
	gap: 5px;
	align-items: baseline;
	justify-content: space-between;
	font-size: 16px;
}
.correlation-share-card-value {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	overflow: hidden;
}
.correlation-share-card-subtitle,
.correlation-share-card-unit {
	font-size: 11px;
}
.correlation-share-card-input-banner {
	background: var(--theme-color-primary-lightmode);
	padding: 7px 10px;
	margin: 6px -10px 7px;
}
.correlation-share-card-bucket-label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 11px;
}
.correlation-share-card-diff {
	display: flex;
	align-items: center;
	font-size: 12px;
	border-radius: 3em;
	align-self: center;
	line-height: 1.4em;
	margin-top: -5px;
	background: #00000059;
	padding: 1px 5px;
	margin-right: -3px;
}
.correlation-share-card-diff .btn-svg {
	fill: #fff;
}
.correlation-factors-card {
	overflow: hidden;
	border-radius: var(--card-border-radius);
	margin: 0 10px;
	box-shadow: none;
	background: var(--portal-surface-bg);
}
.correlation-factors-card:not(:first-child) {
	margin-top: 25px;
}
.correlation-factors-card-header {
	font-size: 16px;
	padding: 12px 15px;
	display: flex;
	align-items: center;
	color: var(--theme-color-text);
	font-weight: 600;
}
.correlation-factors-card-header:not(:first-child) {
	border-top: 5px solid var(--html-bg);
}
.correlation-factors-card-header .tooltip-wrap .tooltip-info-svg {
	stroke: var(--surface-bg);
	background: var(--theme-color-text);
}
.correlation-factors-card-row {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 12px;
	gap: 6px;
	cursor: pointer;
}
.correlation-factors-card-row + .correlation-factors-card-row {
	border-top: var(--surface-border);
}
@media (hover: hover) {
	.correlation-factors-card-row:hover {
		background: var(--hover-gray);
	}
}
.correlation-factors-card-row-saved {
	position: absolute;
	top: -3px;
	right: 0;
	width: 16px;
	height: 16px;
	--btn-text: var(--theme-color-text);
	opacity: 0.8;
}
.correlation-factors-card-row-diff {
	flex: 0 0 70px;
	display: flex;
	align-items: center;
	color: var(--theme-color-text);
	font-size: 15px;
	gap: 8px;
}
.correlation-factors-card-row-diff .up-stem-svg {
	color: var(--surface-bg-8dp);
	border-radius: 50%;
	border: 1px solid var(--theme-color-primary);
	background: var(--theme-color-primary);
	padding: 1px;
}
.darkmode .correlation-factors-card-row-diff .up-stem-svg {
	border-color: var(--theme-color-text);
	background: var(--theme-color-text);
}
.correlation-factors-card-row-diff .down-stem-svg {
	color: var(--theme-color-text);
	border-radius: 50%;
	border: 1px solid var(--theme-color-text);
	background: var(--surface-bg);
	padding: 1px;
}
/* Light stroke on dark appears thicker visually, so make it thinner to compensate */
.correlation-factors-card-row-diff .up-stem-svg path,
.darkmode .correlation-factors-card-row-diff .down-stem-svg path {
	stroke-width: 13px;
}
.correlation-factors-card-row-diff .down-stem-svg path,
.darkmode .correlation-factors-card-row-diff .up-stem-svg path {
	stroke-width: 14px;
}
.correlation-factors-card-row-diff.sig-none {
	color: var(--text-muted);
	padding: 0 5px;
	font-size: 18px;
}
.correlation-factors-card-row-diff.sig-med {
	opacity: 0.5;
}
.correlation-factors-card-row-content {
	flex-grow: 1;
	overflow: hidden; /* for the input text-overflow to work */
	font-size: 14px;
}
.correlation-factors-card-row-input-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
}
.correlation-factors-card-row-input-prefix {
	flex-shrink: 0;
	font-size: 12px;
}
.correlation-factors-card-row-input {
	color: var(--theme-color-text);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* ellipsis needs to be here if we want it to be the theme-color-text */
}
.darkmode .correlation-factors-card-row-input {
	font-weight: 400;
}
.correlation-factors-card-row-subtitle {
	font-size: 12px;
	color: var(--text-muted);
}
.correlation-factors-card-show-past-btn.btn {
	width: 100%;
	--btn-color: rgba(0, 0, 0, 0.03);
	--btn-color-hover: var(--theme-color-light);
	--btn-text: var(--text-muted);
	border-radius: 0;
	padding: 6px 4px;
	font-size: 14px;
}
.darkmode .correlation-factors-card-show-past-btn.btn {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
.correlation-factors-card-upgrade-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--theme-color-text);
}
.darkmode .correlation-factors-card-upgrade-label {
	color: var(--text);
}
.correlation-onboard-welcome-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	background: #e5f1f5;
	overflow: hidden;
	border-top-left-radius: var(--card-border-radius);
	border-top-right-radius: var(--card-border-radius);
}
.darkmode .correlation-onboard-welcome-img-wrap {
	background: var(--surface-bg);
}
.correlation-onboard-welcome-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-section.correlation-onboard-welcome-text {
	border-top: none;
	max-width: 500px;
}
.correlation-onboard-welcome-title {
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 18px;
}
.correlation-onboard-welcome-subtext {
	font-size: 15px;
}
.correlation-onboard-start {
	width: 100%;
	max-width: 250px;
}
.insights-hub-share-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: var(--html-bg);
	padding: 20px 15px;
}
.insights-hub-share-preview .insights-hub-correlation {
	width: 100%;
	max-width: 400px;
}
.insights-hub-share-note {
	margin: 20px 0;
	color: var(--text-muted);
	font-style: italic;
	font-size: 14px;
}
.insights-hub-share-note-input {
	margin-bottom: 20px;
}
.insights-hub-share-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
	min-height: 55px;
}
.insights-hub-share-location-label {
	text-align: left;
}
.insights-hub-location-edit-icon {
	margin: 0 3px -3px 0;
}
.insights-hub-share-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
}
.insights-hub-share-conditions-empty {
	color: var(--text-muted);
}
.insights-hub-share-conditions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 35px;
}
.insights-hub-share-condition {
	display: inline;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.insights-hub-share-notifications {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	font-size: 14px;
	color: var(--text-muted);
}

.location-autocomplete-input {
	margin-bottom: 10px;
}
.location-autocomplete-value {
	display: flex;
	align-items: center;
	padding: 15px;
	background: var(--chip-bg);
	border-radius: 12px;
	width: 100%;
	justify-content: space-between;
}
.location-autocomplete-value-content {
	display: flex;
	text-align: left;
	align-items: center;
	gap: 10px;
	margin-left: -5px;
}
.location-autocomplete-value-icon {
	width: 28px;
	height: 28px;
	color: var(--theme-color-primary);
}
.location-autocomplete-error {
	color: var(--btn-red);
	font-size: 14px;
	margin-top: 5px;
}
 .merge-modal-content {
	display: flex;
	flex-direction: column;
	height: calc(min(100vh - var(--card-modal-margin-top) * 2 - 60px, 720px)); /* 60px for the header */
}
.merge-modal-instructions {
	font-size: 15px;
	margin-bottom: 20px;
}
.merge-modal-instructions-subtext {
	color: var(--text-muted);
	font-size: 13px;
	margin-top: 15px;
}
.merge-modal-options {
	margin: 0 -20px;
	flex-grow: 1;
	overflow-y: scroll;
}
.merge-modal-option {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 20px;
	min-height: 65px;
	text-align: left;
}
.merge-modal-option-title {
	font-size: 15px;
}
.merge-modal-option.is-primary {
	background: var(--theme-color-btn);
	color: #fff;
}
.merge-modal-option.is-primary .merge-modal-option-check.selected {
	border: 2px solid #fff;
}
.merge-modal-option:not(:last-child) {
	border-bottom: var(--card-separator);
}
.merge-modal-option-check {
	width: 26px;
	height: 26px;
	border: 2px solid var(--btn-color);
	--btn-text: transparent;
	border-radius: 50%;
	padding: 3px;
}
.merge-modal-option-check.selected {
	--btn-text: #fff;
	border: 2px solid var(--theme-color-btn);
	background: var(--theme-color-btn);
}
.merge-modal-search-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: -10px;
	margin-bottom: 20px;
}
.merge-modal-search-wrap .search-bar {
	flex-grow: 1;
}
.merge-modal-details {
	font-size: 13px;
	margin: 5px 0;
}
@media (max-width: 500px) {
	.merge-modal-content {
		height: 100%;
	}
}
@media (hover: hover) {
	.merge-modal-option:not(.is-primary):hover {
		background: var(--hover-gray);
	}
}
.condition-detail-name-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 25px;
	justify-content: space-between;
}
.condition-detail-name {
	font-size: 18px;
	flex-grow: 1;
	font-weight: 600;
}
.condition-detail-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.condition-detail-heading {
	font-size: 14px;
	color: var(--theme-color-text);
	font-weight: 600;
	margin-top: 25px;
}
.condition-detail-notes {
	white-space: pre-wrap;
}
.metric-list-customize-header {
	margin-bottom: 5px;
}
.metric-list {
	padding: 15px 10px;
}
.metric-list-rows-header {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	margin: 25px 15px -10px;
}
.metric-list-rows {
	margin: 15px 0;
	border-radius: var(--card-border-radius);
	overflow: hidden;
}
.metric-list-row {
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	padding: 10px 8px;
	flex-grow: 1;
	background: var(--portal-surface-bg);
	border-radius: 2px;
}
.metric-list-row + .metric-list-row {
	margin-top: 2px;
}
@media (hover: hover) {
	button.metric-list-row:hover {
		background: var(--hover-gray);
	}
}
.metric-list-row .daily-log-type-icon {
	padding: 4px;
}
.metric-list-row .profile-metric-pct-change {
	margin: -2px 0 0;
	justify-content: flex-end;
	word-wrap: break-word;
}
.metric-list-row-title {
	padding: 0 10px;
	font-size: 15px;
	line-height: 1.1em;
}
.metric-list-row-value-wrap {
	margin-left: auto;
	margin-right: 6px;
	text-align: right;
}
.profile-metrics-row-value {
	font-size: 18px;
	color: var(--text);
}
.metric-list-row-date {
	font-size: 12px;
	margin-top: 3px;
	color: var(--text-muted);
}
.metric-list-row-toggle {
	flex-shrink: 0;
	margin-left: auto;
}

.data-entry-metric-modal-entries-header {
	font-weight: 600;
	margin-bottom: 15px;
	text-align: center;
}
.card-section .data-entry-metric-modal-empty {
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
	padding: 40px 0;
}
.data-entry-metric-modal-filters {
	margin-bottom: 15px;
}
.data-entry-metric-modal-filter-grid {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: 1fr;
}
.profile-vaccine-modal-wide.card-modal-card {
	width: 900px;
}
.profile-vaccine-list {
	margin: 10px 0;
}
.profile-vaccine-header {
	padding: 10px 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}
.profile-vaccine-header-left {
	flex-grow: 1;
}
.profile-vaccine-name {
	font-size: 14px;
}
.profile-vaccine-subheader {
	font-size: 12px;
	color: var(--text-muted);
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.profile-vaccine-subheader-item {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.profile-vaccine-subheader-icon {
	width: 15px;
	height: 15px;
	fill: var(--theme-color-text);
}
.profile-vaccine-subheader-icon + .profile-vaccine-subheader-icon {
	margin-left: -8px;
}
.profile-vaccine-row-toggle {
	--btn-text: var(--icon-gray);
}
.profile-vaccine-body {
	padding: 10px 15px 15px;
}
.profile-vaccine-dose {
	display: flex;
	align-items: baseline;
	padding: 5px 0;
	gap: 15px;
	font-size: 14px;
}
.profile-vaccine-row {
	border-bottom: var(--card-separator);
}
.profile-vaccine-row-footer {
	margin-top: 10px;
}
.profile-vaccine-row-footer .info-svg {
	fill: var(--icon-info-gray);
}
.profile-vaccine-full-name {
	flex-grow: 1;
	color: var(--text-muted);
}
.profile-vaccine-user-note {
	font-size: 12px;
}
.profile-vaccine-date {
	flex: 0 0 150px;
	text-align: right;
}
.profile-vaccine-dose-more {
	margin-top: 5px;
	font-weight: 600;
}
.profile-vaccine-dose-left {
	display: flex;
	align-items: baseline;
	flex-grow: 1;
}
@media (max-width: 800px) {
	.profile-vaccine-dose-left {
		flex-direction: column;
	}
	.profile-vaccine-dose {
		align-items: flex-start;
	}
	.profile-vaccine-full-name {
		font-size: 12px;
		font-weight: 600;
	}
	.profile-vaccine-date {
		text-align: left;
		flex-basis: 0;
	}
}
@media (hover: hover) {
	.profile-vaccine-header:hover {
		background: var(--hover-gray);
	}
}

.vaccine-info p:first-child {
    margin-top: 0;
}
.vaccine-info p:last-child {
    margin-bottom: 0;
}
.vaccine-info-warn {
    color: var(--orange-warn);
}
.vaccine-schedule-wrap {
	padding: 0 15px;
	margin-top: 10px;

	--cell-height: 36px;
	--cell-width: 75px;
}
.vaccine-schedule {
	display: flex;
	margin: 0 0 10px;
}
.vaccine-schedule-table-fixed-col {
	padding-top: 20px; /* for age marker */
}
.vaccine-schedule-table {
	overflow-x: auto;
	padding-top: 20px; /* for age marker */
}
.vaccine-schedule-name {
	display: flex;
	width: 100px;
	height: var(--cell-height);
	padding: 8px;
	align-items: center;
	border-right: var(--card-separator);
}
.vaccine-schedule-name:not(:last-child) {
	border-bottom: var(--card-separator);
}
.vaccine-schedule-name .has-tooltip {
	cursor: pointer;
}
.vaccine-schedule-name.header,
.vaccine-schedule-row.header .vaccine-schedule-cell {
	display: flex;
	align-items: flex-end;
	font-weight: 600;
	font-size: 14px;
	height: 60px;
}
.vaccine-schedule-row.header .vaccine-schedule-cell {
	text-align: center;
	justify-content: center;
}
.vaccine-schedule-row {
	position: relative;
	display: flex;
	align-items: center;
}
.vaccine-schedule-row:not(:last-child) .vaccine-schedule-cell {
	border-bottom: var(--card-separator);
}
.vaccine-schedule-cell {
	flex: 0 0 var(--cell-width);
	padding: 8px;
	height: var(--cell-height);
}
.vaccine-schedule-cell:not(:last-child) {
	border-right: var(--card-separator);
}
.vaccine-schedule-dose {
	position: absolute;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 20px;
	background: var(--hover-gray);
}
.vaccine-schedule-dose.completed {
	background: var(--metric-green-light);
}
.vaccine-schedule-age-marker {
	position: absolute;
	top: -20px;
	left: 0;
	width: 28px;
	height: 28px;
	margin-left: -16px;
	border-radius: 16px;
	background: var(--guava-green);
	--btn-text: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.vaccine-schedule-age-marker::after {
	content: '';
	position: absolute;
	bottom: -4px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--guava-green);
}
.vaccine-schedule-source {
	margin-bottom: 15px;
}
@media (max-width: 925px) {
	.vaccine-schedule {
		margin-left: -15px;
		margin-right: -15px;
	}
}
.document-col-name {
	flex-grow: 1;
}
.document-col-date,
.document-col-uploaded {
	flex: 0 0 150px;
}
.document-col-uploaded {
	color: var(--text-muted);
}

.document-row-head {
	display: flex;
	color: var(--text-muted);
	padding: 5px 15px;
}
.document-row {
	display: flex;
	padding: 5px 15px;
	align-items: center;
	color: var(--text);
	border-top: var(--card-separator);
	width: 100%;
	text-align: left;
}
.list-only .document-row:first-child {
	border-top: none;
}
.list-only .document-col-date {
	text-align: right;
}
.document-row-editable {
	cursor: pointer;
}
.document-row-editable:hover {
	background: var(--hover-gray);
}
.document-row-name-wrap {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding-right: 15px;
	word-break: break-word;
}
.document-row-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-grow: 1;
}
.document-row-file-icon {
	margin: 10px 10px 10px 0;
}
.document-row-parse-status.tag-label {
	gap: 6px;
	color: var(--theme-color-text);
	background: var(--theme-color-light);
	padding: 2px 8px;
	border: none;
}
.document-row-parse-status .spinner {
	--spinner-color: var(--theme-color-text);
	--spinner-stroke: 2px;
	width: 14px;
	height: 14px;
}
@media (max-width: 900px) {
	.document-col-date {
		flex: 0 0 120px;
	}
	.document-col-uploaded {
		display: none;
	}
}
@media (max-width: 650px) {
	.document-row-head,
	.document-col-date {
		display: none;
	}
	.document-row-name-wrap {
		padding: 0;
	}
	.document-row-name {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.document-row-parse-status.tag-label {
		background: none;
		padding: 0;
	}
}
.profile-events-row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: 20px;
	padding: 10px 15px;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	width: 100%;
	text-align: left;
	border-radius: 0;
}
.profile-events-row + .profile-events-row {
	border-top: var(--card-separator);
}
.profile-events-date {
	flex: 0 0 106px;
	color: var(--theme-color-text);
}
.profile-events-subtitle {
	font-size: 14px;
	font-weight: 400;
	margin-top: 2px;
	color: var(--text-muted);
}
.profile-events-appt-time {
	font-size: 14px;
	font-weight: 600;
}
.profile-events-appt-list-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 25px;
	border: 1px dashed var(--border-color);
	border-radius: 8px;
	color: var(--text-muted);
}
.profile-events-appt-list-empty .btn-svg.calendar-svg {
	width: 36px;
	height: 36px;
}
.profile-events-fhir-appts-msg {
	color: var(--text);
	text-align: left;
	font-size: 14px;
}
@media (max-width: 500px) {
	.profile-events-date {
		flex: 0 0 96px;
		font-size: 14px;
	}
	.profile-events-subtitle {
		font-size: 12px;
	}
	.profile-events-content {
		font-size: 14px;
	}
}
.profile-events-modal-subheader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	font-size: 18px;
}
.profile-events-appts-list {
	width: calc(100% + 30px);
	margin: 0 -15px;
}
.profile-events-year-section {
	width: calc(100% + 30px);
	margin: 0 -15px;
}
.profile-events-year-section:not(:last-child) {
	border-bottom: var(--card-separator);
}
.profile-events-year-section.expanded {
	border: none;
}
.profile-events-year-section.expanded:not(:last-child) {
	margin-bottom: 25px;
}
.profile-events-content {
	overflow: hidden; /* to truncate title */
}
.profile-events-title-truncate {
	/* max 2 rows before truncating */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0.14em 0;
}
.profile-events-subtitle-truncate {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.profile-events-year-header {
	width: 100%;
	justify-content: space-between;
	padding: 10px 15px;
	text-align: left;
	--btn-text: var(--icon-gray);
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
}
.profile-events-year-header-label {
	font-size: 24px;
	color: var(--text-muted);
	font-weight: 600;
}
.profile-events-year-hide-btn {
	margin: 10px 0;
}
.profile-events-all-appts-btn-wrap {
	text-align: center;
	margin-top: 15px;
}
.provider-detail-name-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 25px;
	justify-content: space-between;
}
.provider-detail-name {
	font-size: 18px;
	flex-grow: 1;
	font-weight: 600;
}
.provider-detail-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.provider-detail-heading {
	font-size: 14px;
	color: var(--theme-color-text);
	font-weight: 600;
	margin-top: 25px;
}
.provider-detail-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}
.provider-detail-section-heading-text {
	font-weight: 600;
	color: var(--theme-color-text);
}
.provider-detail-vp-link + .provider-detail-vp-link {
	margin-top: 10px;
}
.provider-detail-events {
	margin: 0 -15px;
}
.profile-insurance-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 15px;
	width: 100%;
	background: none;
	text-align: left;
	border-bottom-left-radius: var(--profile-card-border-radius);
	border-bottom-right-radius: var(--profile-card-border-radius);
}
.profile-insurance-right-arrow {
	margin-right: -3px;
	--btn-text: var(--text-muted);
}
.profile-insurance-header {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
}
.profile-insurance-rows {
	display: flex;
	align-items: center;
	column-gap: 15px;
	flex-wrap: wrap;
}
.profile-insurance-row {
	font-size: 14px;
}
.profile-insurance-row-type {
	margin-left: 5px;
	font-size: 12px;
	color: var(--text-muted);
}
@media (hover: hover) {
	.profile-insurance-card:hover {
		background: var(--hover-gray);
	}
}
.profile-insurance-empty {
	padding: 10px 15px;
	display: flex;
	align-items: center;
	gap: 15px;
}
.profile-insurance-empty-add-btn.btn {
	--btn-color: var(--surface-bg);
	--btn-color-hover: var(--hover-gray);
	border: var(--card-separator);
	padding: 0.2em 0.7em;
}

/* List View */
.profile-insurance-list-header {
	margin-top: 40px;
	margin-bottom: 10px;
}
.profile-insurance-list-row + .profile-insurance-list-row {
	border-top: var(--card-separator);
	margin-top: 15px;
	padding-top: 15px;
}
.profile-insurance-list-row-title-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}
.profile-insurance-list-row-title {
	font-weight: 600;
}
.profile-insurance-list-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.profile-insurance-list-empty {
	text-align: center;
	color: var(--text-muted);
	margin: 20px 0;
}
.photo-preview-grid {
	--photo-gallery-image-height: 60px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--photo-gallery-image-height), 1fr));
	gap: 10px;
	height: var(--photo-gallery-image-height);
}
.photo-preview-grid-item {
	height: var(--photo-gallery-image-height);
	width: var(--photo-gallery-image-height);
	border-radius: 8px;
}
.photo-preview-grid-item-img {
	width: 100%;
	height: 100%;
	background-color: var(--surface-bg-muted);
	box-shadow: #8b8b8b 0 0 2px 0px;
	object-fit: cover;
	border-radius: 8px;
}
.photo-preview-grid-item-btn {
	column-gap: 0; /* override default btn column gap to bring text and svg closer */
}
.img-gallery {
	padding-top: 20px;
}
.img-gallery-date-block {
	margin-bottom: 20px;
}
.img-gallery-date-header {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 6px;
	padding-left: 10px;
}
.img-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 3px;
	padding: 0 3px;
}
.img-gallery-grid-item {
	border-radius: 2px;
	padding-bottom: 100%; /* trick to have square items */
	position: relative;
	overflow: hidden;
	background: var(--surface-bg-muted);
}
.img-gallery-grid-item-img {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* fill the square-shaped grid item */
}
.img-gallery-viewer .file-viewer-page {
	display: flex; /* eliminate tiny grey bar at the bottom of image */
}
/* Banner */
.profile-setup-banner {
	padding: 10px 15px;
	width: 100%;
	cursor: pointer;
	border: 2px solid var(--guava-green);
}
.profile-setup-banner-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-muted);
}
.profile-setup-banner-step {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	width: 100%;
	text-align: left;
}
.profile-setup-banner-step-title {
	flex-grow: 1;
	font-size: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.profile-setup-banner-step-icon {
	width: 20px;
	height: 20px;
	--btn-text: var(--icon-gray);
	--btn-color: var(--surface-bg-12dp);
}
.profile-setup-banner-btns {
	display: flex;
}
.profile-setup-banner-btns .btn {
	min-width: 75px;
}
.profile-setup-banner-btns .primary {
	margin-left: auto; /* covers case when there is no skip button on the left */
}
.profile-setup-progress-complete {
	font-weight: 600;
	color: var(--guava-green-text);
	margin-top: 15px;
}
.profile-setup-banner-complete {
	display: flex;
	align-items: center;
	gap: 12px;
}
.profile-setup-banner-complete-body {
	flex-grow: 1;
	text-align: left;
}
.profile-setup-banner-complete-icon {
	--btn-text: #fff;
	background: var(--guava-green);
	padding: 7px;
	border-radius: 50%;
	height: 32px;
	width: 32px;
}
/* Same as profile-content max-width */
@media (max-width: 925px) {
	.profile-setup-banner {
		width: calc(100% - 20px);
		margin: 0 10px 10px;
	}
}

/* Step specific banner */
.profile-setup-step-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 500px;
	padding: 10px 15px;
	margin: 0 auto 15px;
	border-radius: 8px;
	background: var(--guava-green-bg);
}
.profile-setup-step-banner-body {
	flex-grow: 1;
}
.profile-setup-step-banner-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
}
.profile-setup-step-banner-completed {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--guava-green-text);
}
.profile-setup-step-banner-completed-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 2;
	stroke: var(--guava-green-text);
}

/* Modal */
.profile-setup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.profile-setup-org-label {
	font-size: 0.9em;
	color: var(--text-muted);
	margin: 20px 0 5px;
}
.profile-setup-org-msg {
	background: var(--guava-green-bg);
	border-left: 7px solid var(--guava-green);
	padding: 5px 10px;
	margin-bottom: 20px;
	border-radius: 3px;
}
.profile-setup-steps {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 20px 0 0;
}
.profile-setup-step {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 5px 10px;
	margin-left: -10px;
	margin-right: -10px;
	border-radius: 8px;
	background: transparent;
	--btn-color-hover: var(--guava-green-bg);
	text-align: left;
}
.profile-setup-step-body {
	flex-grow: 1;
}
.profile-setup-step-check {
	width: 28px;
	height: 28px;
	padding: 5px;
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 2;
	stroke: var(--surface-bg-12dp);
	background: var(--border-color);
	border-radius: 50%;
	margin-right: 10px;
}
.profile-setup-step-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	color: var(--text);
}
.profile-setup-step-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 2px;
}
.profile-setup-step-icon {
	width: 20px;
	height: 20px;
	--btn-text: var(--icon-info-gray);
	--btn-color: var(--surface-bg-12dp);
}
.profile-setup-step-arrow {
	width: 36px;
	height: 36px;
	--btn-text: var(--guava-green);
}
.profile-setup-modal-dismiss {
	margin-top: 10px;
}
.profile-setup-step.done .profile-setup-step-check {
	background: var(--guava-green);
}
.profile-setup-step.done .profile-setup-step-title {
	color: var(--icon-info-gray);
	font-size: 16px;
}
.profile-setup-step.no-click {
	pointer-events: none;
}
@media (max-width: 375px) {
	.profile-setup-step-title {
		font-size: 16px;
	}
}
.profile-setup-guide-header {
	margin-bottom: 2px;
}
.profile-setup-guide-header.completed {
	font-weight: 600;
}
#setup-page {
	width: 650px;
}
.setup-page-card.card {
	position: relative;
	padding: 60px;
	background: var(--portal-surface-bg);
}
.setup-page-back {
	position: absolute;
	top: 15px;
	left: 15px;
}
.setup-page-prompt {
	font-size: 36px;
	text-align: center;
	margin-bottom: 10px;
}
.setup-page-waiting {
	font-size: 32px;
	text-align: center;
}
.setup-page-no-permission {
	font-size: 24px;
}
.setup-page-help {
	display: flex;
	align-items: center;
	margin-top: 40px;
	font-size: 14px;
	color: #666;
}
.setup-page-help-btns {
	display: flex;
	margin-top: 3px;
	gap: 25px;
}
.setup-page-help-btn {
	--btn-text-over-white: var(--color-help-color);
	font-size: 13px;
	text-decoration: underline;
}
.setup-page-help-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-right: 10px;
	--btn-text: var(--color-help-color);
}

@media (max-width: 650px) {
	#setup-page {
		padding: var(--page-margin-top) 0 0;
	}
	.setup-page-card.card {
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 0;
	}
	.setup-page-prompt {
		font-size: 32px;
		margin-bottom: 7px;
	}
}
@media (max-width: 360px) {
	.setup-page-card.card {
		padding-left: 10px;
		padding-right: 10px;
	}
	.setup-page-prompt {
		font-size: 28px;
		margin-bottom: 5px;
	}
}
.setup-card-page {
	width: 650px;
}
.setup-card-page .info-card {
	background: var(--portal-surface-bg);
}
.setup-card-success-title {
	display: flex;
	font-size: 1.7em;
}
.setup-card-success-title .toast-icon {
	width: 1.7em;
	margin-right: 15px;
	stroke: var(--guava-green);
}
.setup-card-success-msg {
	margin: 25px 0;
}
.setup-card-page-title {
	margin-bottom: 15px;
}
.setup-card-page-subtitle {
	font-size: 18px;
}
.setup-card-edit-btn-wrap {
	margin: -25px 0 10px;
}
.setup-card-status {
	margin-bottom: 10px;
}
.setup-card-action-btns {
	flex-wrap: wrap;
	justify-content: center;
}
.setup-card-action-btns .btn {
	font-size: 18px;
}
.setup-card-order-more-input {
	display: inline-flex; /* to make the button the same height as input */
}
.setup-card-order-more input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: 10px;
	width: 62px;
}
.setup-card-order-more .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	width: 62px;
}
.setup-card-page-free-shipping {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	margin-top: 25px;
	--btn-text: var(--theme-color-primary);
}
.setup-card-btn {
	width: 100%;
	margin: 15px 0;
}
.card.setup-card-preview-modal {
	width: 720px;
}

.order-card-form-header {
	margin-top: 40px;
	border-bottom: 1px solid var(--border-color);
}
.order-card-preview {
	margin: 25px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.order-card-preview-front,
.order-card-preview-back {
	position: relative;
	display: block;
	width: 60%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,0.15);
	z-index: 1;
	margin: -5% 0 0 0;
}
.order-card-preview-back {
	margin: 5% 0 0 -20%;
	z-index: 0;
	height: auto;
}
.order-card-page .textarea-input {
	height: auto;
}
.state-input,
.zip-input {
	width: 115px;
}
.urgent-note-input {
	width: 100%;
}
.order-card-mail-preview {
	display: block;
	margin: 20px auto;
	width: 90%;
	max-width: 360px;
	box-shadow: 0 0 5px rgba(0,0,0,0.15);
	border-radius: 3px;
}
.quick-access-history-header {
	margin-top: 60px;
	border-bottom: var(--card-separator);
	margin-bottom: 15px;
}
.quick-access-history-row {
	display: flex;
	justify-content: space-between;
	column-gap: 15px;
	padding-bottom: 15px;
}
.quick-access-history-date {
	flex-shrink: 0;
	font-weight: 600;
}
@media (max-width: 630px) {
	.quick-access-history-row {
		flex-wrap: wrap;
	}
}
.discrete-progress-bars {
	display: flex;
	gap: 6px;
	margin: 6px 0;
	width: 100%;
}
.discrete-progress-bar {
	flex-grow: 1;
	background: var(--border-color);
	border-radius: 4px;
	height: 7px;
	max-width: 91px; /* so that all phones up to 450px have 100% width progress bars */
	overflow: hidden;
}
.discrete-progress-bar.theme-bg {
	background: var(--theme-color-light);
}
.discrete-progress-bar-fill {
	height: 100%;
	background: var(--theme-color-primary);
	border-radius: 4px;
}
.score-summary {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 10px 10px;
	cursor: pointer;
}
.score-summary-description {
	white-space: pre-wrap;
}
.score-summary:not(:last-child) {
	border-bottom: 2px solid var(--html-bg);
}
.score-summary-ring-wrap {
	margin: 0 5px 0 -5px;
	flex-shrink: 0;
}
.score-summary-categories {
	flex-grow: 1;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.score-summary .score-category-title {
	font-size: 15px;
}
.btn.score-summary-detail-btn {
	width: 24px;
	height: 24px;
	padding: 0;
	margin-left: 3px;
	margin-right: -10px;
}
.score-summary-info-checks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 10px;
}
.score-summary-info-checks .check-svg {
	background: var(--theme-color-primary);
	padding: 6px;
	--btn-text: var(--surface-bg);
	border-radius: 50%;
	width: 28px;
	height: 28px;
}
.score-summary-org-config-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--chip-bg);
	border-radius: 8px;
	padding: 10px 15px;
	margin-bottom: 20px;
	width: 100%;
	text-align: left;
}
@media (hover: hover) {
	.score-summary:hover .score-summary-detail-btn {
		background: var(--hover-gray);
	}
	.score-summary-org-config-btn:hover {
		background: var(--chip-bg-hover);
	}
}
@media (max-width: 500px) {
	.modal .card-section.score-summary-expanded {
		padding: 15px 12px;
	}
}
.score-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 15px;
}
.score-title {
	font-size: 20px;
	word-break: break-word;
}
.score-header .score-ring {
	flex-shrink: 0;
}
.score-header-other-btn {
	font-size: 14px;
	margin-top: 8px;
}
.score-categories-expanded .score-category:not(:first-child) {
	margin-top: 20px;
}
.score-factors {
	margin-top: 10px;
}
.score-factor {
	width: 100%;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--border-color);
	text-align: left;
}
@media (hover: hover) {
	.score-factor:hover {
		background: var(--hover-gray);
	}
}
.score-factor + .score-factor {
	border-top: none;
}
.score-factor:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.score-factor:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.score-factor-name {
	margin-right: 10px;
}
.score-factor .score-factor-value {
	color: var(--text-muted);
}
.score-factor-value {
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin-left: auto;
}
.score-factor-value .btn {
	margin-left: 8px;
}
.score-factor-value svg {
	padding: 4px;
	--btn-text: var(--surface-bg);
	vertical-align: top;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin: 0 0 0 8px;
	stroke-width: 20;
}
.score-factor-value .check-svg {
	background: var(--theme-color-primary);
}
.score-factor-value .cross-svg {
	background: var(--border-color);
}
svg.score-factor-pie {
	padding: 0;
}
.score-factor-pie path {
	stroke-width: 2;
	stroke: var(--theme-color-primary);
	fill: none;
}
.score-factor-pie circle {
	stroke-width: 2;
	stroke: var(--surface-bg-muted);
	fill: none;
}
.score-factor .right-svg {
	margin-left: 5px;
	width: 1.8em;
	height: 1.8em;
	--btn-text: var(--text-muted);
}
.score-description {
	font-size: 0.8em;
	margin-top: 15px;
}
.score-description p {
	margin: 5px 0;
	display: flex;
}
.score-description .info-svg {
	color: var(--icon-info-gray);
	margin: 0 3px 0 0;
	width: 1.4em;
	height: 1.4em;
}
.score-factor-detail .form-btns {
	flex-wrap: wrap;
}
.score-factor-detail-header {
	display: flex;
	font-weight: bold;
	margin-bottom: 15px;
}
.score-factor-detail-header:empty {
	display: none;
}
.score-factor-detail-header .score-factor-value {
	flex-direction: row-reverse;
	margin-left: 0;
}
.score-factor-detail .score-factor-value svg {
	width: 24px;
	height: 24px;
	margin-left: 0;
	margin-right: 10px;
}
.score-factor-detail ul {
	margin: 0 0 20px;
	padding: 0;
}
.score-factor-detail li {
	list-style: none;
	display: flex;
	margin-bottom: 10px;
}
.score-bullet {
	width: 12px;
	height: 12px;
	margin: 6px 10px 0 0;
	border-radius: 50%;
	border: 3px solid var(--theme-color-primary);
	flex-shrink: 0;
}
@media (max-width: 500px) {
	.score-header {
		gap: 15px;
	}
}
.score-description-text {
	white-space: pre-wrap;
}
.score-factor-sources {
	font-size: 15px;
	margin: 20px 0;
}
.score-factor-detail-btn-instructions {
	margin: 20px 0;
}
.score-ring {
	position: relative;
	width: 100px;
}
.score-ring svg {
	vertical-align: top;
}
.score-ring-value {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.8em;
	font-weight: 300;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.score-ring path {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke: var(--theme-color-primary)
}
.score-ring path.gray {
	stroke: var(--surface-bg-muted);
}
.score-category-header {
	display: flex;
	align-items: center;
	gap: 10px;
}
.score-category-title {
	font-size: 16px;
	flex: 0 0 90px;
}
.score-category-bars-wrap {
	display: flex;
	flex-grow: 1;
	position: relative;
}
.discrete-progress-bars.score-category-bars {
	gap: 5px;
	margin: 3px 0;
}
.discrete-progress-bars.score-category-bars .discrete-progress-bar {
	height: 4px;
}
.score-category-subtitle {
	position: absolute;
	top: 100%;
	left: 0;
	font-size: 0.7em;
	color: var(--text-muted);
}
@media (max-width: 500px) {
	.discrete-progress-bars.score-category-bars {
		gap: 3px;
	}
	.score-category-title {
		font-size: 15px;
	}
}
.org-profile-score-set-btns {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 15px;
}
.org-profile-score-link {
	margin-top: 20px;
}
.org-profile-score-factors {
	margin-top: 25px;
}
.org-setting-level-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--theme-color-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 25px;
	font-size: 15px;
}
.org-setting-level-notice .btn-svg.profile-svg {
	width: 24px;
	height: 24px;
}
.org-profile-score-customize-category:not(:first-child) {
	margin-top: 20px;
}
.org-profile-score-customize-category-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--theme-color-text);
	margin-bottom: 10px;
}
.org-profile-score-customize-factor-name.disabled {
	text-decoration: line-through;
}
.org-profile-score-customize-factor-name.custom {
	color: var(--color-help-text);
}
.org-score-target-form-number-input {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.org-score-target-form-number-input.no-label {
	margin-top: 10px;
}
.org-score-target-form-period-num.number-input {
	width: 60px;
}
.loading-wrap {
	text-align: center;
	padding: 100px 25px;
}
.loading-wrap-error {
	color: var(--text-muted);
	margin-bottom: 25px;
}
.modal .card-section.add-app-modal-card-section,
.add-app-page {
	padding: 15px;
}
.add-app-note {
	font-size: 0.8em;
	color: var(--text-muted);
	margin: 20px 0 10px;
}
.add-app-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 15px;
}
.add-app-btn {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	border-radius: 12px;
	border: 1px solid var(--surface-bg-muted);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}
.darkmode .add-app-btn {
	border-color: var(--border-color);
}
.add-app-btn:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.add-app-btn-inner {
	padding: 8px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.add-app-btn.connected {
	box-shadow: none;
	cursor: default;
}
.add-app-btn.connected:hover {
	box-shadow: none;
}
.add-app-btn.connected .add-app-btn-text,
.add-app-btn.connected img {
	opacity: 0.3;
}
.add-app-btn img {
	max-width: 100%;
	width: 55px;
	border-radius: 10px;
}
.add-app-btn-text {
	margin-top: 8px;
	white-space: nowrap;
}
.add-app-btn-text.apple-health {
	font-size: 14px;
}
.add-app-btn-text.health-connect,
.add-app-btn-text.libre {
	font-size: 13px;
}
.add-app-btn-added {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1em;
	font-size: 14px;
	background: var(--guava-green);
	color: #fff;
	border-radius: 0 0 11px 11px;
	padding: 5px 10px;
}

.add-app-suggest {
	margin: 45px 0 25px;
}

.add-app-connect-wrap {
	margin-top: 40px;
	text-align: center;
}
.add-app-connect-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}
.add-app-connect-wrap .spinner {
	display: block;
	margin: 0 auto 10px;
}
.add-app-connect-msg {
	padding: 5px 0;
}
.add-app-devices-article {
	display: flex;
	align-items: center;
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	padding: 5px;
	margin-bottom: 25px;
}
.add-app-devices-article-img-wrap {
	position: relative;
	width: 96px;
	height: 64px;
	margin-right: 15px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}
.add-app-devices-article-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}
.add-app-devices-article-title {
	font-size: 15px;
	color: var(--text);
}

.add-app-other-support {
	margin: 45px 0 20px;
}
.add-app-other-support-subtitle {
	font-size: 14px;
	margin-top: 5px;
}

@media (hover: hover) {
	.add-app-devices-article:hover {
		background: var(--hover-gray);
	}
}
@media (max-width: 400px) {
	.add-app-list {
		margin-left: -10px;
		margin-right: -10px;
		gap: 10px;
	}
}
.source-row {
	padding: 15px 20px;
	margin-left: -15px;
	margin-right: -15px;
}
.source-row:not(:last-child) {
	border-bottom: var(--card-separator);
}
.source-row.new {
	background: var(--guava-green-hover-over-white);
}
.source-new-notice {
	display: inline-block;
	background: var(--guava-green);
	color: #fff;
	font-size: 12px;
	padding: 0 5px;
	margin-left: 5px;
	border-radius: 0.75em;
}
.source-name {
	margin-bottom: 8px;
	display: flex;
}
.source-name > img,
.source-name > svg {
	width: 28px;
	height: 28px;
	margin-right: 10px;
	border-radius: 5px;
	color: var(--icon-gray);
}
.source-name-heading {
	font-size: 18px;
}
.source-overflow-btn {
	margin: -10px -15px -10px auto;
}
.source-info-connect-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.source-controls {
	display: flex;
	justify-content: right;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
	margin-right: -6px;
}
.source-detail {
	font-size: 14px;
	color: var(--text-muted);
}
.source-info-connect-wrap .source-detail {
	margin-top: 4px; /* to align with sync button */
}
.source-detail .text-btn {
	font-size: 1em; /* match same size as other text in source-detail */
}
.source-sync-status {
	display: flex;
	align-items: center;
	margin-top: 8px;
}
.source-sync-status,
.source-sync-status .btn {
	font-size: 14px;
	color: var(--metric-green-text);
	text-align: left;
}
.source-sync-status.error,
.source-sync-status.error .btn {
	color: var(--red-error);
}
.source-sync-status.warning,
.source-sync-status.warning .btn {
	color: var(--orange-warn);
}
.source-sync-status .icon-btn {
	width: 35px;
	height: 35px;
	margin: -8px -5px -8px -8px;
}
.source-sync-status.info {
	color: var(--blue-info);
}
.source-update-btn {
	--btn-color: var(--blue-info);
	--btn-color-hover: #1365b6;
	--btn-text: #fff;
}
.source-record-count {
	margin: 10px 0 10px 20px;
	font-size: 14px;
}
.source-row-directory-links {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 14px;
}
.sub-source-row + .sub-source-row {
	margin-top: 10px;
}
.sub-source-types {
	margin-left: 20px;
	color: var(--text-muted);
	font-size: 0.9em;
}
.sub-source-type {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 5px;
}
@media (max-width: 420px) {
	.source-controls {
		flex-direction: column;
	}
}
.record-request-wrap {
	margin-top: 25px;
}
.record-request-label {
	color: var(--text-muted);
	display: flex;
}
.complete .record-request-label {
	color: var(--guava-green-text);
}
.record-request-label svg {
	margin-right: 10px;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 10px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.timeline-toggle-btn {
	margin-left: 34px;
}
.record-request-timeline {
	margin: 10px 0;
}
.record-request-step-msg {
	font-size: 14px;
	margin-top: 15px;
}
.record-request-steps {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 560px;
	padding: 65px 30px 65px;
}
.record-request-steps.not-started {
	padding-bottom: 10px;
}
.record-request-step {
	position: relative;
	display: flex;
	justify-content: center;
}
.record-request-step-check {
	width: 14px;
	height: 14px;
	stroke: var(--surface-bg);
	stroke-width: 2px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.record-request-step-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0; /* keep the same height as active */
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--border-color);
}
.record-request-step-num {
	color: var(--surface-bg);
	font-size: 14px;
	margin-top: 1px; /* to align the number */
}
.record-request-step-line {
	flex: 1 1 0;
	border-bottom: 2px solid var(--border-color);
}
.record-request-step.active .record-request-step-circle {
	margin: 0;
	width: 32px;
	height: 32px;
	background: var(--guava-green);
}
.record-request-step.completed .record-request-step-circle {
	background: var(--guava-green);
	opacity: 0.4;
}
.record-request-step-line.completed {
	border-bottom: 2px solid var(--guava-green);
	opacity: 0.4;
}
.record-request-step.incomplete .record-request-step-circle {
	background: #cc797d;
}
.record-request-step-label {
	position: absolute;
	top: -48px;
	font-size: 12px;
	color: var(--text-muted);
	width: 90px;
	text-align: center;
}
.record-request-step.active .record-request-step-label {
	color: var(--guava-green-text);
}
.record-request-step-date {
	position: absolute;
	bottom: -56px;
	color: var(--text-muted);
	text-transform: uppercase;
	font-size: 12px;
	text-align: center;
}
.record-request-step-day {
	font-size: 16px;
}

.record-request-date {
	font-size: 14px;
	color: var(--text-muted);
}
.record-request-docs {
	margin-top: 5px;
}
.record-request-doc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--text);
	padding: 5px 0;
}
.record-request-doc:hover .record-request-doc-name {
	text-decoration: underline;
}
.record-request-doc-icon {
	width: 24px;
	height: 24px;
}
.record-request-doc-icon.pdf {
	font-size: 10px;
	font-weight: 400;
}
@media (max-width: 450px) {
	.record-request-steps {
		padding-left: 15px;
		padding-right: 15px;
	}
}
.connect-provider-page {
	padding: 20px 15px;
}
.connect-provider-header {
	text-align: center;
	margin-bottom: 20px;
	font-size: 24px;
}
.connect-provider-name {
	font-size: 24px;
	font-weight: 600;
}
.connect-provider-name img {
	width: 32px;
	height: 32px;
	margin-bottom: -6px;
	margin-right: 10px;
	border-radius: 5px;
}
.connect-provider-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.connect-provider-content {
	text-align: center;
	margin: 25px 0;
}
.connect-provider-btn {
	min-width: 300px;
}
.connect-provider-coming-soon {
	font-weight: 600;
	color: var(--guava-green-text);
}
.connect-provider-error {
	color: var(--red-error);
}
.connect-provider-skip {
	font-size: 14px;
	margin-top: 10px;
	text-decoration: underline;
}
.connect-provider-msg {
	font-size: 15px;
}
.connect-provider-privacy-wrap {
	display: flex;
	flex-direction: column;
	gap: 15px;
	border-radius: var(--card-border-radius);
	background: var(--theme-color-bg);
	padding: 15px;
	max-width: 350px;
	margin: 0 auto;
}
.connect-provider-privacy {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 15px;
}
.connect-provider-privacy-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	--btn-text: var(--guava-green);
	fill: var(--guava-green);
}

.connect-provider-login-form {
	max-width: 430px;
	margin: 0 auto;
}
.connect-provider-login-form .form-btns .primary {
	width: 100%;
}

.connect-provider-unconnectable-request {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: var(--card-separator);
}
.connect-provider-unconnectable-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	margin: 15px auto;
	width: 100%;
	max-width: 400px;
	padding: 15px;
	font-size: 16px;
	text-align: left;
	background: var(--chip-bg);
	border-radius: var(--card-border-radius);
}
.connect-provider-unconnectable-option-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	--btn-text: var(--theme-color-text);
}
.connect-provider-unconnectable-option .right-svg {
	margin-left: auto;
}
.connect-provider-unconnectable-option .info-svg {
	--btn-text: var(--icon-info-gray);
	margin-left: 3px;
	margin-bottom: -3px;
}
.connect-provider-unconnectable-log {
	font-size: 15px;
	margin-top: 25px;
	text-align: center;
}
.connect-provider-unconnectable-guide {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 40px 0;
	padding-top: 20px;
	border-top: var(--card-separator);
	font-size: 15px;
}
.connect-provider-portal-input-wrap {
	max-width: 450px;
	width: 100%;
	display: flex;
	gap: 10px;
}
.connect-provider-portal-input {
	flex-grow: 1;
}
.connect-provider-portal-input-label {
	margin-top: 25px;
}

.card.request-record-instructions {
	width: 800px;
}
.request-record-steps {
	padding-left: 20px;
}
.request-record-p {
	margin: 5px 0;
}
.request-record-p + .request-record-p {
	margin-top: 25px;
}
.request-record-step {
	margin-bottom: 25px;
}
.request-record-sub-steps {
	margin-bottom: 15px;
}
.request-record-sub-step {
	margin: 10px 0;
}
.connect-provider-email-template {
	background: var(--surface-bg-muted);
	border-radius: var(--card-border-radius);
	padding: 15px;
	margin: 0 -5px;
	font-size: 15px;
}
.upload-info-modal-header {
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	margin: 25px 0 15px;
}
.upload-info-modal-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 360px;
	margin: 20px auto 45px;
}
.upload-info-modal-list {
	padding-left: 20px;
	margin-bottom: 40px;
}
.upload-info-modal-list li {
	margin-bottom: 5px;
}
.source-faq {
	font-size: 15px;
}
.source-faq:not(:first-child) {
	margin-top: 25px;
}
.source-faq-question {
	font-weight: 600;
	margin-bottom: 5px;
}
.libre-connect-step {
	margin: 15px 0 25px;
}
.libre-connect-email-input {
	width: 100%;
	margin-top: 20px;
}
.libre-connect-help {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 40px 0 15px;
}
.libre-connect-help-text {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 10px;
}
.add-app-support-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0 0;
}
.add-app-support-btn {
	display: flex;
	align-items: center;
	border-radius: 8px;
	padding: 2px;
	border: var(--card-separator);
}
.add-app-support-btn-img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
}
.add-app-support-btn-label {
	font-size: 14px;
	padding-left: 8px;
	padding-right: 10px;
}
.add-app-support-modal-header {
	display: flex;
	align-items: center;
	gap: 15px;
}
.add-app-support-modal-img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
}
.add-app-support-list-items {
	padding-left: 20px;
}
.add-app-support-list-item {
	margin-bottom: 10px;
}
.add-app-support-contact-btn {
	text-align: center;
	margin-top: 35px;
}
@media (hover: hover) {
	.add-app-support-btn:hover {
		background: var(--hover-gray);
	}
}
.add-app-support-connect-btn {
	width: 120px;
	margin: auto;
}
.location-history-heading {
	font-weight: 600;
	margin: 10px 0 5px;
	font-size: 18px;
	text-align: center;
}
.location-history-subheading {
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
}
.location-history-add-btn {
	margin-bottom: 25px;
}
.location-history-loading {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-direction: column;
	margin-top: 25px;
}
.location-history-empty {
	text-align: center;
	color: var(--text-muted);
	margin-top: 25px;
}
.location-history-timeline {
	padding: 20px 0;
	position: relative;
}
.location-history-timeline:before {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--theme-color-primary);
	width: 2px;
	left: 9px;
}
.location-history-timeline-item {
	display: flex;
	gap: 15px;
	margin: 15px 0 50px;
}
.location-history-timeline-item:last-child {
	margin-bottom: 10px;
}
.location-history-timeline-dot {
	width: 20px;
	height: 20px;
	flex: 20px 0 0;
	border-radius: 50%;
	border: 4px solid var(--surface-bg);
	background: var(--theme-color-primary);
	text-align: center;
	position: relative;
	margin-top: 12px;
}
.location-history-timeline-item-content {
	position: relative;
	text-align: left;
	flex-grow: 1;
	border: var(--card-separator);
	padding: 10px;
	border-radius: 8px;
}
.location-history-timeline-item-date {
	position: absolute;
	top: -24px;
	font-size: 14px;
	color: var(--theme-color-text);
}
.location-history-timeline-item-title {
	font-size: 15px;
}
.location-history-timeline-item-subtitle {
	font-size: 13px;
	color: var(--text-muted);
}
@media (hover: hover) {
	.location-history-timeline-item-content:hover {
		background: var(--hover-gray);
	}
}
.data-settings-incomplete-ranges {
	margin-top: 10px;
}
.data-settings-incomplete-range {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -20px;
	width: calc(100% + 40px);
	border-top: var(--card-separator);
	text-align: left;
	border-left: 3px solid var(--theme-color-primary);
	padding: 15px 20px 15px 17px;
}
.data-settings-incomplete-range:last-child {
	border-bottom: var(--card-separator);
}
.data-settings-incomplete-range-dates {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
	font-size: 14px;
	color: var(--theme-color-text);
}
.data-settings-incomplete-range-dates .text-subtitle {
	font-size: 13px; /** Otherwise the 0.8em makes it tiny */
}
.data-settings-incomplete-range-notes {
	font-size: 15px
}
@media (hover: hover) {
	.data-settings-incomplete-range:hover {
		background: var(--hover-gray);
	}
}
.data-settings-incomplete-range-arrow {
	margin-left: auto;
	--btn-text: var(--icon-gray);
}

.correlation-suggestion {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
	display: flex;
	align-items: center;
	border-radius: 8px;
	padding: 6px 10px;
	flex: 150px 0 0;
	overflow: hidden;
	gap: 4px;
}
.correlation-suggestion-text {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
	text-align: left;
}
.correlation-suggestion-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--theme-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.correlation-suggestion-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.correlation-suggestion-icon {
	display: flex;
	margin-right: -5px;
}
.correlation-suggestion-icon svg.daily-log-type-icon {
	width: 25px;
	height: 25px;
}
.modal .card-section.import-modal,
.import-page {
	padding: 15px;
}
.import-page-subtitle {
	font-size: 18px;
	text-align: center;
	margin-top: 25px;
}
.import-pages-types-title {
	font-weight: 600;
	margin-top: 25px;
	margin-bottom: 10px;
}
.import-page-types {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 15px;
}
.import-page-type {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	padding: 4px 0;
	--btn-text-over-white: var(--text);
}
.import-page-type .daily-log-type-icon {
	width: 24px;
	height: 24px;
	--btn-text: var(--theme-color-primary);
}
.import-page-app-instructions.add-app-support-btns {
	margin: 5px 0 25px;
}
.import-page-types-modal-row {
	justify-content: space-between;
	width: 100%;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	border-radius: 0;
	border-bottom: var(--card-separator);
	padding: 15px 20px;
}
.import-page-section-help {
	font-size: 15px;
}
.import-page-section-help li {
	margin-bottom: 5px;
}
.import-page-type-request {
	text-align: center;
	font-size: 15px;
	margin-top: 35px;
}
.import-page-file-input-wrap {
	margin: 40px 0;
	text-align: center;
}
.import-page-file-input {
	display: none;
}
.import-page-selected-type {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 25px;
	font-size: 15px;
}
.import-page-selected-type-app-icon {
	width: 28px;
	height: 28px;
	border-radius: 4px;
}
.import-page-upload-subtitle {
	font-size: 15px;
}
.import-accepted-columns li {
	margin-bottom: 5px;
}
.import-example-wrap {
	padding-bottom: 25px;
	font-size: 15px;
}
.import-example-table {
	margin-top: 10px;
	border-collapse: collapse;
}
.import-preview-table th,
.import-preview-table td,
.import-example-table th,
.import-example-table td {
	padding: 5px 10px;
	text-align: left;
	border: 1px solid var(--border-color);
}
.import-preview-table-wrap {
	font-size: 15px;
	overflow-x: scroll;
}
.import-preview-table {
	width: max-content;
	border-collapse: collapse;
}
.import-preview-table th,
.import-preview-table td {
	max-width: 200px;
}
.import-preview-table-title {
	padding: 10px 5px;
}
.import-preview-table-note {
	font-size: 15px;
	color: var(--text-muted);
	margin: 10px 5px 0;
}
.import-preview-more {
	margin: 15px 0;
}
.import-preview-modal {
	padding: 5px 10px 20px;
}
.import-preview-type-wrap + .import-preview-type-wrap {
	margin-top: 40px;
}
.import-columns-form-title {
	font-weight: 600;
	text-align: center;
	margin-bottom: 15px;
}
.import-page-divider {
	border-top: var(--card-separator);
	margin: 35px 0;
}
.import-columns-form {
	margin-bottom: 25px;
}
.import-columns-form-row {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	padding: 6px 0;
	min-height: 48px;
}
.import-form-date-format {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 25px;
}
.import-success-tips {
	margin-top: 30px;
}
.import-success-tips li {
	font-size: 15px;
	margin-bottom: 8px;
}
.import-list-title {
	margin-top: 20px;
	font-size: 1.5em;
}
.import-list-row {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.import-file-name {
	flex-grow: 1;
}
@media (max-width: 550px) {
	.import-page {
		padding-top: 10px;
	}
}
.dual-metric-chart-info {
	margin-bottom: 15px;
	height: 75px; /* fixed height so the chart below doesn't keep moving */
}
.dual-metric-chart-values {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	column-gap: 15px;
}
.dual-metric-chart-value {
	height: 30px;
}
.dual-metric-chart .metric-chart-info-subtitle {
	margin-top: 0;
}
.dual-metric-chart-series-name {
	font-size: 14px;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.dual-metric-chart-color-indicator {
	width: 20px;
	height: 15px;
}
.dual-metric-chart-info-right .dual-metric-chart-series-name,
.dual-metric-chart-info-right .metric-chart-info-value {
	justify-content: right;
}
@media (max-width: 400px) {
	.dual-metric-chart-color-indicator {
		width: 13px;
		height: 10px;
	}
	.dual-metric-chart-series-name {
		font-size: 13px;
		gap: 6px;
	}
}
.correlation-summary-chart {
	width: 260px;
	margin: 25px auto;
}
.correlation-summary-chart-axes {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	width: 100%;
	height: 120px;
	border: solid var(--border-color);
	border-width: 0 0 1px 1px;
	border-radius: 0 0 0 3px;
	padding: 0 15px;
}
.correlation-summary-chart-bar {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
}
.correlation-summary-chart-bar-fill {
	width: 50px;
	min-height: 4px; /* minimum height so the bar is visible */
	background: var(--theme-color-primary);
	border-radius: 4px 4px 2px 2px;
	transform: scaleY(0);
	transform-origin: bottom;
	animation: correlation-summary-bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes correlation-summary-bar-grow {
	to {
		transform: scaleY(1);
	}
}
.correlation-summary-chart-bar-output {
	position: relative;
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 2px;
}
.correlation-summary-chart-bar-input {
	position: absolute;
	bottom: -26px;
	display: flex;
	align-items: center;
	font-size: 14px;
}
.correlation-summary-chart-output {
	margin-bottom: 10px;
	color: var(--theme-color-text);
	font-weight: 600;
	text-align: center;
}
.correlation-summary-chart-input {
	font-size: 14px;
	text-align: center;
	margin-top: 30px;
}
.correlation-summary-chart-input-unit {
	position: absolute;
	font-size: 12px;
	font-weight: 400;
	color: var(--text-muted);
	left: 100%;
	margin-left: 8px;
	white-space: nowrap;
}
.correlation-summary-chart-output-source {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-muted);
}
.assistant-btn {
	border-radius: 50%;
	padding: 1px;
	background: var(--theme-color-btn);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.assistant-btn-svg {
	width: 100%;
	height: 100%;
}
@media (hover: hover) {
	.assistant-btn:hover {
		background: var(--theme-color-btn-hover);
	}
}

.add-profile-card {
	padding: 35px 40px; /* keep in sync with welcome-page card */
}
.add-profile-subtitle {
	margin-top: 25px;
	color: var(--text-muted);
}
.add-profile-form .form-label {
	font-size: 18px;
}
.add-profile-form .text-input {
	width: 100%;
}
.add-profile-relationship-type-btns {
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr 1fr;
	margin: 15px 0;
}
.add-profile-relationship-type-btns .btn {
	font-size: 16px;
	padding: 0.8em;
}
.add-profile-fp-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 25px 0;
}
@media (max-width: 450px) {
	.add-profile-card {
		padding: 20px; /* keep in sync with welcome-page card */
	}
}
@media (max-width: 380px) {
	.add-profile-relationship-type-btns {
		gap: 10px;
	}
}
.fp-modal-name-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.fp-modal-name-section .text-subtitle {
	font-size: 14px;
}
.fp-modal-quota-wrap {
	text-align: center;
	margin-bottom: 25px;
}
.fp-modal-quota {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fp-modal-quota-icon {
	height: 25px;
	width: 25px;
}
.fp-modal-quota-icon-svg {
	width: 100%;
	height: 100%;
}
.fp-modal-quota-icon-svg.check-svg {
	background: var(--guava-green);
	color: #fff;
	padding: 4px;
	border-radius: 50%;
}
.fp-modal-quota-icon-svg.profile-circle-svg {
	border-radius: 50%;
	fill: var(--surface-bg);
	background: var(--icon-info-gray);
}
.fp-modal-instructions {
	font-size: 15px;
	margin-bottom: 10px;
}
.fp-modal-invite-link {
	margin: 10px 0;
	font-size: 13px;
	background: var(--hover-gray);
	padding: 10px;
	border-radius: 8px;
	font-family: monospace;
	word-break: break-all;
}
.fp-modal-members {
	margin: 15px 0 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.fp-modal-member {
	display: flex;
	align-items: center;
	gap: 10px;
}
svg.btn-svg.fp-modal-member-avatar {
	width: 30px;
	height: 30px;
	fill: var(--guava-green);
}
.fp-modal-managed-profiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.fp-modal-managed-profile {
	border: var(--card-separator);
	border-radius: 8px;
	min-height: 50px;
	padding: 5px 8px;
	text-align: left;
	--subtitle-text-color: var(--theme-color-text);
	--subtitle-icon-color: var(--theme-color-primary);
}
.fp-modal-managed-profile.added {
	opacity: 0.5;
	pointer-events: none;
	--subtitle-text-color: var(--guava-green);
	--subtitle-icon-color: var(--guava-green);
}
.fp-modal-managed-profile-name {
	font-size: 14px;
	font-weight: 600;
}
.fp-modal-managed-profile-subtitle {
	display: flex;
	align-items: center;
	font-size: 13px;
	gap: 5px;
	color: var(--subtitle-text-color);
	margin-top: 3px;
}
.fp-modal-managed-profile-icon {
	background: var(--subtitle-icon-color);
	color: #fff;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	padding: 2px;
}
.fp-modal-managed-profile-icon.check-svg {
	padding: 3px;
}
.fp-modal-header {
	font-weight: 600;
	margin: 25px 0 10px;
}
.fp-modal-configure-later-notice {
	margin-top: 25px;
}

.refer-modal .card-modal-body {
	border-radius: var(--card-border-radius);
	overflow: hidden;
}
.refer-modal-top {
	position: relative;
	background: var(--theme-color-primary);
	padding: 20px 20px 30px;
}
.refer-modal-bottom {
	position: relative;
	padding: 65px 20px 20px;
}
.refer-modal-wave {
	position: absolute;
	top: -1px; /* 1 px overlap to prevent weird gap on some mobile devices */
	left: -400px;
}
.refer-modal-close {
	position: absolute;
	right: 5px;
	top: 10px;
}
.refer-modal-title {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 8px;
	text-align: center;
	font-weight: 600;
	margin: 5px 25px 0;
	color: #fff;
}
.refer-modal-checks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin: 40px 0 20px;
}
.refer-modal-check {
	height: 48px;
	width: 48px;
}
.refer-modal-check.check-svg {
	background: #fff;
	color: var(--theme-color-primary);
	padding: 8px;
	border-radius: 50%;
}
.refer-modal-check.profile-circle-svg {
	border-radius: 50%;
	fill: var(--theme-color-primary);
	background: #fff;
	opacity: 0.8;
}
.refer-modal-num-referred {
	color: #fff;
	font-weight: 600;
	text-align: center;
}
.refer-modal-claim-wrap {
	text-align: center;
	margin-top: 15px;
}
.refer-modal-claim-btn {
	--btn-color: #fff;
	--btn-color-hover: rgba(255, 255, 255, 0.8);
	--btn-text: var(--theme-color-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.darkmode .refer-modal-claim-btn {
	--btn-color: none;
	--btn-color-hover: var(--hover-gray);
	--btn-text: #fff;
	border: 2px solid #fff;
	box-shadow: none;
}
.refer-modal-benefit {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	--btn-text: var(--theme-color-primary);
	margin: 15px 0;
}
.refer-modal-benefit-icon {
	width: 24px;
	height: 24px;
}
.refer-modal-benefit-subtitle {
	font-size: 15px;
}
.refer-modal-emcard {
	display: contents;
	font-size: 16px;
}
.refer-modal-emcard-value {
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap;
}
.refer-modal-share-wrap {
	text-align: center;
	margin-top: 35px;
}
.refer-modal-share-btn {
	min-width: 280px;
}
.refer-modal-or-copy {
	color: var(--text-muted);
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px;
	text-transform: uppercase;
}
.refer-modal-edit-link-btn {
	font-size: 14px;
}
.refer-modal-choose-profile {
	margin: 25px 0 30px;
}
@media (hover: hover) {
	.refer-modal-link-wrap:hover {
		background: var(--hover-gray);
	}
}

.btn.outline.profile-select-btn {
	--btn-text: var(--text);
	word-break: break-word;
}
.profile-select-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.profile-selector-row {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 15px;
	width: 100%;
	text-align: left;
	padding: 15px 20px;
}
.profile-selector-row + .profile-selector-row {
	border-top: var(--card-separator);
}
.profile-selector-row-icon {
	width: 28px;
	height: 28px;
	--btn-text: var(--theme-color-primary);
}
@media (hover: hover) {
	.profile-selector-row:hover {
		background: var(--hover-gray);
	}
}
.code-copy-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 360px;
	max-width: 100%;
	margin: 8px auto 15px;
	padding: 12px;
	border-radius: 8px;
	border: var(--card-separator);
	overflow: hidden;
}
.code-copy-input {
	flex-grow: 1;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.code-copy-input:not(.left-text) {
	direction: rtl;
}
.code-copy-input-copy {
	font-weight: 600;
	color: var(--theme-color-text);
	flex-shrink: 0;
}
.code-copy-input-no-btn {
	flex-grow: 1;
	font-size: 14px;
	border: none;
}
#insights-page {
	width: 800px;
	padding-bottom: 60px;
	--today-page-card-margin: 0 0 15px;
}
.insights-page-setting-btns {
	display: flex;
	gap: 8px;
	margin: var(--today-page-card-margin);
	margin-top: 2px;
}
.insights-page-setting-btn {
	--btn-color: var(--portal-surface-bg);
	border: var(--surface-border);
	--btn-text: var(--icon-gray);
	color: var(--text);
}

/* Test a factor prompt */
.insights-page-correlate-prompt {
	text-align: center;
	padding: 20px 15px;
}
.insights-page-correlate-prompt .btn {
	margin-top: 15px;
}

/* Upgrade banner */
.insights-page-auto-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 15px;
	cursor: pointer;
}
.insights-page-auto-banner-title {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	margin-top: 2px; /* offset the auto-banner-icon */
}
.insights-page-auto-banner-icon {
	margin-top: 2px;
	margin-left: -4px;
	--btn-text: var(--theme-color-text);
}
.insights-page-auto-banner-num-insights {
	display: flex;
	align-items: center;
	column-gap: 20px;
	row-gap: 5px;
	flex-wrap: wrap;
	padding: 0 26px;
}
.insights-page-auto-banner-text {
	font-size: 14px;
}
.insights-page-auto-banner-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.insights-page-auto-banner-icon {
	display: flex;
	align-items: center;
}
.insights-page-auto-banner-icon .daily-log-type-icon {
	width: 20px;
	height: 20px;
	--icon-bg: none;
	--icon-fill: var(--theme-color-primary);
}
.insights-page-auto-banner-btn {
	flex-shrink: 0;
}
@media (max-width: 800px) {
	.insights-page-auto-banner.preview {
		flex-direction: column;
	}
	.insights-page-auto-banner.preview .insights-page-auto-banner-body {
		text-align: center;
	}
	.insights-page-auto-banner-num-insights {
		flex-direction: column;
		margin-top: 10px;
	}
}

/* Weather and notification banner */
.insights-page-banner {
	padding: 15px;
}
.insights-page-banner-text {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
}
.insights-page-banner-icon {
	margin-top: 2px;
	margin-left: -4px;
	--btn-text: var(--theme-color-text);
}
.insights-page-banner-btns {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 35px;
	padding-right: 10px;
	margin-top: 10px;
}

/* Factor cards */
.insights-page-factors-section {
	padding: 20px 0 25px;
}
.insights-page-factors-header {
	position: relative;
	text-align: center;
	margin: 0 15px;
	padding: 0 35px; /* for spinner */
}
.insights-page-factors-spinner {
	position: absolute;
	right: 0;
	width: 24px;
	height: 24px;
}
.insights-page-factor-cards-free {
	margin-top: 20px;
}
.insights-page-no-factors-text {
	border: 1px dashed var(--theme-color-primary);
	margin: 15px 10px;
	padding: 20px;
	border-radius: var(--card-border-radius);
	font-size: 15px;
	color: var(--text-muted);
}
.insights-all-factors-btn-wrap {
	margin: var(--today-page-card-margin);
	margin-top: 20px;
	display: flex;
}
.insights-all-factors-btn {
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
	border-radius: var(--card-border-radius);
	padding: 15px 15px;
	flex-grow: 1;
}
.insights-all-factors-btn-count {
	font-size: 14px;
}
.insights-all-factors-icon {
	--btn-text: var(--theme-color-text);
}
.insights-page-factor-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
	margin: var(--today-page-card-margin);
}

/* Empty auto correlation box */
.insights-page-auto-empty-wrap {
	border: 1px dashed var(--theme-color-primary);
	margin: 15px 10px;
	text-align: center;
	padding: 15px;
	border-radius: 12px;
}
.insights-page-auto-empty-subtitle {
	padding-top: 5px;
	padding-bottom: 12px;
}

/* New Insights / Community */
.insights-page-new-card-wrap {
	margin: var(--today-page-card-margin);
}
.insights-page-new-card-wrap.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 15px;
}
.insights-page-new-card {
	justify-content: flex-start;
	gap: 15px;
	width: 100%;
	padding: 15px 20px;
	text-align: left;
	border-radius: var(--card-border-radius);
	--btn-color: var(--portal-surface-bg);
	--btn-color-hover: var(--hover-gray);
}
.insights-page-new-card .new-label {
	font-size: 14px;
	margin-right: -10px;
}
.insights-page-new-card-body {
	flex-grow: 1;
	overflow: hidden;
}
.insights-page-new-card .btn-svg {
	width: 1.5em;
	height: 1.5em;
	--btn-text: var(--theme-color-text);
}
.insights-page-new-card-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}
.insights-page-new-card-subtitle.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Onboarding */
#insights-page.insights-page-onboard {
	width: 960px;
}
.insights-page-onboard-wrap {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	margin: 40px 0;
}
#insights-page .correlation-onboard-welcome-img-wrap {
	background: none;
}
@media (max-width: 800px) {
	.insights-page-onboard-wrap {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 0;
	}
	#insights-page .correlation-onboard-welcome-img-wrap {
		max-width: 320px;
	}
}

@media (max-width: 925px) {
	#insights-page {
		padding-left: 0;
		padding-right: 0;
		--today-page-card-margin: 0 10px 12px;
	}
	.insights-page-factor-cards,
	.insights-page-new-card-wrap.grid {
		gap: 12px;
	}
}
@media (max-width: 360px) {
	#insights-page {
		--today-page-card-margin: 0 5px 12px;
	}
}
.correlation-settings-auto-status-wrap {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: -6px 0 10px;
	font-size: 14px;
}
.correlation-settings-auto-status {
	--btn-text: var(--theme-color-text);
	color: var(--theme-color-text);
}
.correlation-settings-row {
	margin-left: -15px;
	margin-right: -15px;
	width: calc(100% + 30px);
}

.correlation-settings-location-value {
	color: var(--theme-color-text);
	font-weight: 600;
	margin-bottom: 10px;
}

.correlation-settings-type-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 8px 0;
}
.correlation-settings-type-row + .correlation-settings-type-row {
	border-top: var(--card-separator);
}
.correlation-settings-type-row-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}
.correlation-settings-type-row .daily-log-type-icon {
	width: 20px;
	height: 20px;
}

.insights-factor-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--card-border-radius);
	background: var(--portal-surface-bg);
	padding: 12px 15px;
	cursor: pointer;
}
@media (hover: hover) {
	.insights-factor-group:hover {
		background: var(--hover-gray);
	}
}
.insights-factor-group-ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: 5px 0;
}
.insights-factor-group-ring-svg {
	width: 100%;
	height: 100%;
}
.insights-factor-group-ring-path {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke: var(--theme-color-primary);
}
.insights-factor-group-icon {
	position: absolute;
	width: 70px;
	height: 70px;
	padding: 21px;
	background: var(--theme-color-bg);
	border-radius: 50%;
	flex-shrink: 0;
}
.darkmode .insights-factor-group-icon {
	background: none;
}
.insights-factor-group-icon .daily-log-type-icon {
	width: 100%;
	height: 100%;
}
.insights-factor-group-factor-icons {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 5px 0 12px;
}
.insights-factor-group-factor-icon {
	display: flex;
	align-items: center;
}
.insights-factor-group-factor-icon .daily-log-type-icon {
	width: 22px;
	height: 22px;
	--icon-bg: none;
	--icon-fill: var(--theme-color-primary);
}
.insights-factor-group-count {
	color: var(--logo-text);
}

.insights-factor-modal-body {
	padding: 20px 0;
}
.insights-factor-modal-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin: 5px 12px 0;
}
.insights-factor-modal-group-filters {
	margin-left: auto;
}
.insights-factor-modal-spinner {
	display: block;
	margin: 8px;
	width: 24px;
	height: 24px;
	--spinner-color: #fff;
}
.insights-factor-modal-no-results {
	margin: 40px 0;
	padding: 15px;
	text-align: center;
	color: var(--text-muted);
}
.darkmode .insights-factor-modal-spinner {
	--spinner-color: var(--theme-color-text);
}
.new-insights-modal.card.card-modal-card {
	background: rgb(2,13,14); /* try to match the alpaca background color */
}
.new-insights-modal-back {
	margin: 10px 5px 0;
}
.new-insights-title {
	position: absolute;
	top: 0;
	width: 100%;
	font-size: 1.5em;
	color: var(--theme-color-text-darkmode);
	z-index: 4;
	text-align: center;
}
.insights-alpaca-img-wrap {
	position: relative;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 65%;
	margin: 10px auto -20px;
	overflow: hidden;
	border-radius: 10px;
}
.insights-alpaca-img {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
}
.insights-alpaca-img-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: repeating-radial-gradient(circle at center,transparent,rgba(255,255,255,0.5) 15%);
	mix-blend-mode: overlay;
	animation: gradient-animation 3s linear infinite;
	z-index: 3;
}
.insights-alpaca-guava-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 50px;
	margin-top: 70px;
	width: 40px;
	height: 40px;
	z-index: 2;
	opacity: 0.33;
	transform: rotateY(55deg) rotateX(-23deg);
}
.new-insights-spinner {
	display: block;
	margin: 40px auto 0;
	width: 50px;
	height: 50px;
	--spinner-color: var(--theme-color-primary);
}
.new-insights-list {
	position: relative;
	z-index: 4;
}
.new-insights-empty-msg {
	margin: 40px 15px 0;
	color: var(--theme-color-text-darkmode);
}
.new-insights-modal .form-btns {
	margin: 25px 15px 15px;
}
.new-insights-premium-label {
	margin: 60px 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: var(--upgrade-color-text-darkmode);
	opacity: 0.8;
}
.new-insights-premium-label svg {
	margin-top: -3px;
}

@keyframes gradient-animation {
	0% {
		transform: scale(1);
		opacity: 0;
	}
	12.5% {
		opacity: 0.25;
	}
	87.5% {
		opacity: 0.25;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
.community-insights-intro-icon-wrap {
	margin: 25px 0;
}
.community-insights-intro-icon {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	padding: 20px;
	background: var(--theme-color-primary);
	color: #fff;
}
.community-insights-intro-title {
	margin: 20px 0;
	font-weight: 600;
	font-size: 18px;
}
.community-insights-section-title {
	padding: 0 15px;
	font-size: 18px;
	font-weight: 600;
}
.community-insights-header-msg {
	padding: 5px 15px;
	font-size: 14px;
}
.community-insights-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px 10px;
}
.community-insights-hub-link {
	margin: 35px 0;
	text-align: center;
}
.community-insights-hub-link-text {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 10px;
}
.community-insights-stats-wrapper {
	margin-bottom: 15px;
}
.community-insights-social-stats {
	display: grid;
	align-items: center;
	grid-template-columns: 31% 31% 31% 6%;
	gap: 2px;
	border-radius: var(--card-border-radius);
	background: var(--theme-color-light);
	padding: 10px 5px;
	text-align: center;
	width: 100%;
	min-height: 70px;
}
.community-insights-social-stats.loading {
	display: flex;
	justify-content: center;
}
.community-insights-new-line {
	border-bottom: 1px solid var(--theme-color-text);
	margin: 20px 15px 5px;
	position: relative;
}
.community-insights-new-line-text {
	position: absolute;
	background: var(--html-bg);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 10px;
	color: var(--theme-color-text);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.community-insights-all-featured-btn-wrap {
	margin-bottom: 40px;
	text-align: center;
}
.community-insights-featured-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 40px 25px;
	gap: 25px;
	font-size: 15px;
	color: var(--text-muted);
	text-align: center;
}
.community-insights-featured-empty-icon {
	color: var(--icon-info-gray);
	width: 80px;
	height: 80px;
}
@media (hover: hover) {
	.community-insights-social-stats:hover {
		opacity: 0.8;
	}
}
.community-insights-correlation.has-self-result .insights-hub-correlation {
	border-radius: 8px 8px 0 0;
}
.community-insights-correlation.has-self-result > .community-insights-self-result {
	border-radius: 0 0 8px 8px;
	border-top: 2px solid var(--html-bg);
}
.community-insights-first-like-modal {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.community-insights-first-like-modal-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1; /* so it sits on top of the title element */
}
.community-insights-first-like-modal-correlation .insights-hub-correlation {
	border: 1px solid var(--border-color);
}
.community-insights-first-like-modal-header {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}
.community-insights-first-like-modal-subheader {
	text-align: center;
	font-size: 15px;
	margin-bottom: 10px;
}
.insights-hub-share-list-intro-msg {
	padding: 20px;
	font-size: 14px;
	color: var(--text-muted);
}
.insights-hub-share-list-content {
	padding-bottom: 10px;
}
.insights-hub-share-list-row {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 12px;
	gap: 6px;
	cursor: pointer;
}
.insights-hub-share-list-row .correlation-factors-card-row-diff {
	flex: 0 0 60px;
	font-size: 14px;
}
.insights-hub-share-list-row-content {
	flex-grow: 1;
	overflow: hidden;
}
.insights-hub-share-list-row-input-prefix {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--text-muted);
}
.insights-hub-share-list-row-input {
	color: var(--theme-color-text);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* ellipsis needs to be here if we want it to be the theme-color-text */
	font-size: 14px;
}
.darkmode .insights-hub-share-list-row-input {
	font-weight: 400;
}
.insights-hub-share-list-row + .insights-hub-share-list-row {
	border-top: var(--surface-border);
}
.insights-hub-share-list-row-share {
	display: flex;
	align-items: center;
	font-size: 13px;
	gap: 5px;
	padding: 3px 8px;
	color: var(--theme-color-text);
	border-radius: 3em;
	flex-shrink: 0;
	border: 1px solid var(--theme-color-text);
}
.insights-hub-share-list-row-share.shared {
	background: var(--theme-color-primary);
	border-color: var(--theme-color-primary);
	color: #fff;
}
.insights-hub-share-list-row-share.shared .check-svg {
	padding: 1px;
}
.shared-insights-modal-name-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.shared-insights-modal-name {
	font-size: 22px;
}
.shared-insights-modal-profile-icon {
	margin: 0 8px -4px 0;
	height: 25px;
	width: 25px;
	--btn-text: var(--icon-gray);
}
.shared-insights-modal-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	align-items: center;
	gap: 5px;
	font-size: 16px;
	color: var(--logo-text);
	margin: 15px 0 25px;
}
.shared-insights-modal-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.shared-insights-modal-stat-value {
	font-weight: 600;
	font-size: 20px;
}
.shared-insights-modal-stat-label {
	text-transform: uppercase;
	letter-spacing: 1px;
	text-overflow: ellipsis;
	overflow: hidden;
}
.shared-insights-modal-empty {
	font-size: 16px;
	color: var(--text-muted);
	text-align: center;
	margin: 20px;
}
.shared-insights-modal-profile-select-btn {
	height: 25px;
	width: 25px;
	padding: 3px;
	margin-left: 3px;
	--btn-text: var(--text-muted);
}
.shared-insights-modal-profile-select-btn-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px 15px;
	text-align: left;
}
.shared-insights-modal-profile-select-btn-row:not(:first-child) {
	border-top: 1px solid var(--border-color);
}
.community-insights-self-result {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--portal-surface-bg);
	padding: 12px 15px;
	overflow: hidden;
}
.community-insights-self-result-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--theme-color-btn);
	opacity: 0.2;
}
.darkmode .community-insights-self-result-bg {
	opacity: 0.25;
}
.community-insights-self-result-content {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 15px;
	flex-grow: 1;
}
.community-insights-self-result-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}
.community-insights-self-result-content .insight-diff {
	background: var(--theme-color-bg);
}
.darkmode .community-insights-self-result-content .insight-diff {
	background: rgba(0, 0, 0, 0.3);
}
.community-insights-self-result-share .btn {
	position: relative; /* to display over bg */
	display: flex; /* for center align */
}
.community-insights-self-result-run-button {
	margin: 25px 0;
	text-align: center;
}
.insight-diff {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--theme-color-text);
	font-weight: 600;
	font-size: 16px;
	background: var(--theme-color-bg);
	border-radius: 3em;
	padding: 0.1em 0.6em;
}
.insight-diff .up-stem-svg path,
.insight-diff .down-stem-svg path {
	stroke-width: 13px;
}
.confetti-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: var(--confetti-z-index);
	pointer-events: none;
}
.confetti {
	position: absolute;
	width: 5px;
	height: 10px;
	transform-origin: left top;
	transform: translateY(-30px);
}

@keyframes confetti-anim-cw {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: translateY(50vh) rotate(30deg);
		opacity: 0.7;
	}
	100% {
		transform: translateY(110vh) rotate(90deg);
		opacity: 0;
	}
}

@keyframes confetti-anim-ccw {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: translateY(50vh) rotate(-30deg);
		opacity: 0.7;
	}
	100% {
		transform: translateY(110vh) rotate(-90deg);
		opacity: 0;
	}
}
.card.vp-view-modal {
	width: 720px;
}
.vp-view-modal-content {
	padding: 10px;
}
:root {
	--visit-prep-status-bar-height: var(--sync-bar-height);
	--visit-prep-card-border-radius: 8px;
}
#visit-prep {
	width: 100%;
	background: var(--html-bg);
}
.visit-prep-list-space {
	min-height: 200px;
	margin-top: 10px;
}
.visit-prep-list-space.sml {
	min-height: 100px;
	margin-top: 10px;
}
.visit-prep-list-space.lrg {
	min-height: 450px;
	margin-top: 25px;
}
.visit-prep-list-space.visit-prep-empty {
	border-radius: var(--visit-prep-card-border-radius);
	border: 1px dashed var(--border-color);
}
.visit-prep-followup-existing-visit + .visit-prep-followup-existing-visit {
	margin-top: 10px;
}
.visit-prep-content {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: auto auto calc(var(--visit-prep-status-bar-height) + var(--bottom-nav-height));
}

.visit-prep-section {
	--visit-prep-card-padding: 15px;
	margin: 0 0 35px;
	background: var(--portal-surface-bg);
	box-shadow: none;
}
.visit-prep-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	--btn-text: var(--theme-color-primary);
	padding: 12px var(--visit-prep-card-padding);
	font-size: 18px;
	background: var(--theme-color-light);
	border-top-left-radius: var(--card-border-radius);
	border-top-right-radius: var(--card-border-radius);
}
.darkmode .visit-prep-section-header {
	background: none;
}
.visit-prep-section-subtitle {
	font-size: 14px;
	margin: 3px 0 0;
}
.visit-prep-section-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px var(--visit-prep-card-padding) 20px;
}
.vp-provider-view-section-header {
	font-size: 16px;
	margin: 20px 0 7px;
	color: var(--theme-color-text);
	font-weight: 600;
}
.visit-prep-provider-view {
	overflow: hidden;
	font-size: 14px;
}
.visit-prep-provider-view .vp-symptom-chart-wrap {
	border: none;
	padding: 0;
	margin: 0;
}
.vp-multi-line-text {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.visit-prep-item {
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
}
.visit-prep-item-content {
	flex-grow: 1;
}
.visit-prep-item-btns {
	flex-shrink: 0;
	text-align: right;
}
.textarea-input.visit-prep-text-list-textarea,
.visit-prep-item-content .autocomplete-input.std-input .search-input,
.visit-prep-category-select select {
	height: 3em;
}
.visit-prep-textarea {
	height: 6em;
}
.visit-prep-form-btns {
	margin-top: 15px;
}
.visit-prep-card {
	padding: 8px 10px;
	border: 2px solid var(--theme-color-primary);
	border-radius: var(--visit-prep-card-border-radius);
	margin: 15px 0;
	overflow: hidden;
}
.visit-prep-card:last-child {
	margin-bottom: 0;
}
.visit-prep-provider-note.visit-prep-card {
	font-size: 12px;
	border: 1px solid var(--text);
}
.visit-prep-provider-note .visit-prep-row-flex-header {
	font-size: 13px;
}
.visit-prep-guava-attribution {
	margin: 10px 0 0;
	font-size: 10px;
}
.visit-prep-status-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--surface-bg-12dp);
	border-top: var(--card-separator);
	display: flex;
	height: var(--visit-prep-status-bar-height);
	z-index: var(--visit-prep-status-bar-z-index);
}
.visit-prep-status-bar-inner {
	width: 800px;
	max-width: 100%;
	padding: 10px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.visit-prep-status-bar-text {
	color: var(--text-muted);
	font-size: 14px;
}
.visit-prep-status-bar-text.error {
	color: var(--red-error);
}
.visit-prep-status-bar-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.visit-prep-reason-btns {
	display: flex;
	flex-wrap: wrap;
	row-gap: 25px;
	column-gap: 20px;
	margin: 15px 0;
	justify-content: space-around;
}
.visit-prep-reason-btn {
	width: 105px;
}
.visit-prep-reason-btn.disabled {
	pointer-events: none;
	opacity: 0.5;
}
.visit-prep-reason-btn-icon {
	width: 100%;
	height: 100%;
	--btn-text: var(--theme-color-primary);
}
.visit-prep-reason-btn.auto-prep-btn .visit-prep-reason-btn-icon {
	padding: 4px;
}
.visit-prep-reason-btn.auto-prep-btn .radio-icon-btn-label {
	color: var(--theme-color-text);
	font-weight: 600;
}
.visit-prep-empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 15px;
	font-size: 14px;
	color: var(--text-muted);
}
.visit-prep-editor-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.visit-prep-editor-form .form-label {
	margin: 20px 0 0;
	font-weight: 600;
}
.visit-prep-editor-form .form-subtitle {
	margin: 10px 0 5px;
}
.visit-prep-editor-form .form-description {
	margin: 10px 0 0;
}
.visit-prep-editor-form .form-label + .form-subtitle {
	margin: 0 0 5px;
}
.visit-prep-row-flex-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}
.visit-prep-row-flex-header.sml {
	font-size: 13px;
}
.visit-prep-row-header-btns {
	display: flex;
	align-items: center;
	gap: 10px;
}
.visit-prep-row-header-btns .icon-btn {
	width: 25px;
	height: 25px;
	padding: 4px;
}
.visit-prep-card-grid-wrap {
	margin: 15px 0;
}
.visit-prep-card-grid-wrap .visit-prep-card,
.visit-prep-card-grid-wrap .visit-prep-list-space {
	margin: 0;
}
.visit-prep-card-grid-add-btn {
	margin-top: 15px;
}
.visit-prep-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 15px;
}
.visit-prep-selected-rfv {
	display: flex;
	align-items: center;
	color: var(--theme-color-text);
	justify-content: space-between;
}
.visit-prep-selected-rfv-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
}
.visit-prep-selected-rfv-icon.btn-svg {
	width: 1.6em;
	height: 1.6em;
}
.visit-prep-rfv-details {
	margin: 10px 0;
	font-size: 14px;
}
.visit-prep-row {
	padding: 8px;
	font-size: 12px;
}
.visit-prep-row:not(:last-child) {
	border-bottom: var(--card-separator);
}
.visit-prep-row-flex-name {
	flex-grow: 1;
}
.visit-prep-row-flex-right {
	flex: 0 0 200px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 5px;
}
.tag-label.visit-prep-med-as-needed {
	font-size: 10px; /* small size to look good on print */
	padding: 0 6px;
	margin-left: 5px;
}
.visit-prep-form-instructions {
	font-size: 13px;
	margin-bottom: 10px;
}
.visit-prep-symptom-editor-timeline .vp-symptom-chart-wrap {
	border: none;
}
.visit-prep-symptom-editor-timeline {
	display: flex;
	justify-content: center;
}
.visit-prep-symptom-editor-periods {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.visit-prep-background-section-btn {
	align-self: flex-start;
}
.visit-prep-symptom-editor-severity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 15px;
	column-gap: 30px;
	padding: 10px 5px 0;
}
.visit-prep-symptom-editor-severity-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-grow: 1;
	font-size: 14px;
}
.visit-prep-yes-no-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
}
.visit-prep-yes-no-question + .visit-prep-yes-no-question {
	margin-top: 15px;
}
.visit-prep-yes-no-question .radio {
	flex-shrink: 0;
}
.visit-prep-interacted-checkboxes {
	padding-left: 15px;
	font-size: 14px;
}
.visit-prep-interacted-checkboxes-header {
	margin-bottom: 5px;
}
.tag-select + .visit-prep-editor-form-textarea {
	margin-top: 5px;
}
.visit-prep-editor-form-textarea {
	height: 4em;
}
.visit-prep-symptom-adjectives {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-right: 5px;
}
.visit-prep-symptom-adjectives .tag-label {
	font-size: 12px;
}
.visit-prep-symptom-intro-edit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.visit-prep-symptom-intro-edit-header-right {
	font-size: 0.7em;
}
.vp-symptom-freq {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 5px 0;
	font-size: 14px;
}
.checkbox-list.visit-prep-suggested-qs-list,
.checkbox-list.visit-prep-goals-checkboxes {
	gap: 15px;
}
.checkbox.visit-prep-symptom-severity-na {
	margin-top: 15px;
	font-size: 14px;
}
.visit-prep-card-textarea-header {
	font-weight: 600;
	margin-bottom: 10px;
}
.visit-prep-provider-view-subsection {
	margin: 10px 0;
}
.visit-prep-demographics {
	font-size: 12px;
}
.visit-prep-edit-side-effects {
	margin-top: 10px;
	display: inline-flex;
	gap: 5px;
	flex-wrap: wrap;
}
.visit-prep-edit-side-effects .tag-label {
	padding: 4px 10px;
}
.visit-prep-row-data {
	padding-left: 10px;
	font-size: 12px;
}
.visit-prep-row-data.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.visit-prep-symptom-row-expand-btn {
	margin-bottom: 5px;
	font-size: 12px;
}
.visit-prep-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.visit-prep-header .header-guava {
	padding: 0;
}
.visit-prep-header-patient-info {
	flex-grow: 1;
}
.visit-prep-allergy-list-card {
	font-size: 13px;
	margin: 5px 10px;
}
.visit-prep-allergy-list-card .allergy-name {
	display: none;
}
.visit-prep-allergy-list-card .allergy-value {
	margin-left: 0;
}
.visit-prep-allergy-list-card .allergy-value-text {
	text-align: left;
	display: flex;
	justify-content: space-between;
}
.visit-prep-last-visit-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.card.card-modal-card.visit-prep-pdf-progress-modal {
	--card-modal-margin-top: 200px;
	padding: 40px 25px;
}
.visit-prep-pdf-progress-bar {
	margin-top: 5px;
	height: 5px;
	background: var(--theme-color-shadow);
	border-radius: 20px;
}
.visit-prep-pdf-progress-bar-fill {
	background: var(--theme-color-primary);
	border-radius: 20px;
	height: 100%;
}
.visit-prep-metric-edit-modal-name {
	display: flex;
	align-items: center;
	gap: 15px;
}
.visit-prep-staged-remaining-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.visit-prep-staged-remaining-msg {
	font-size: 14px;
	font-weight: 600;
}
.visit-prep-edit-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 10px;
}
.visit-prep-edit-list-sort-name {
	font-size: 15px;
}
.visit-prep-edit-list-sort .draggable-list-row {
	border-bottom: var(--card-separator);
}
.visit-prep-edit-list-sort {
	margin: 0 -15px;
}
.visit-prep-back-btn {
	margin-bottom: 16px;
}
.visit-prep-page-bg {
	padding: 24px;
	background: var(--surface-bg-24dp);
	border-radius: 8px;
	box-shadow: #ccc 0 0 8px;
}
.darkmode .visit-prep-page-bg {
	box-shadow: none;
}
.visit-prep-info-sheet-switch {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin: 35px 6px;
}
.visit-prep-info-sheet-switch-icon {
	color: var(--theme-color-primary);
	font-size: 1.2em;
	margin-bottom: -3px;
}
.visit-prep-info-sheet-switch-label {
	font-size: 20px;
	display: flex;
	gap: 6px;
}

@media print {
	.page#visit-prep {
		background: #fff;
		padding-top: 10px;
	}

	.visit-prep-back-btn,
	.visit-prep-status-bar {
		display: none;
	}

	.visit-prep-card {
		break-inside: avoid;
	}
}
@media (max-width: 480px) {
	:root {
		--visit-prep-status-bar-height: 50px;
	}
	.visit-prep-status-bar {
		bottom: var(--bottom-nav-height);
	}
	.visit-prep-status-bar button.btn.round-btn {
		font-size: 14px;
	}
	.visit-prep-header .header-guava {
		display: none; /* not enough space to show on phones, but will still show up in pdf */
	}
	.visit-prep-section {
		--visit-prep-card-padding: 10px;
		border-radius: 0;
		margin-left: -10px;
		margin-right: -10px;
	}
	.visit-prep-section-header {
		border-radius: 0;
	}
	.visit-prep-page-bg {
		border-radius: 0;
		padding: 10px;
		margin: 0 -10px;
	}
	.visit-prep-info-sheet-switch-label {
		font-size: 16px;
	}
}
@media (min-width: 480px) {
	.visit-prep-row.wide-flex {
		display: flex;
		gap: 10px;
	}
}
.vp-symptom-chart-wrap {
	position: relative;
	border: 2px solid var(--theme-color-primary);
	border-radius: 8px;
	padding: 0 10px 10px;
	margin: 15px 0;
	max-width: 100%;
}
.vp-symptom-chart-spinner {
	position: absolute;
	top: 5px;
	right: 5px;
}
.vp-symptom-chart-section.left {
	flex: 1 0 160px;
	overflow: hidden;
	font-size: 14px;
}
.vp-symptom-chart-section.right {
	overflow-x: auto;
	padding-left: 8px; /* so month label doesn't get cut off */
}
.vp-symptom-chart-section {
	padding-top: 20px;
	padding-bottom: 10px;
}
.vp-symptom-chart-table {
	display: flex;
	gap: 5px;
}
.vp-symptom-chart-row {
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vp-symptom-chart-name {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
}
.vp-symptom-chart-name-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.vp-symptom-chart-cells {
	display: flex;
	padding-right: 10px;
}
.vp-symptom-chart-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vp-symptom-chart-date {
	position: relative;
	font-size: 10px;
	color: var(--text-muted);
}
.vp-symptom-chart-month {
	position: absolute;
	top: 0;
	margin-top: -10px;
	text-transform: uppercase;
}
.vp-symptom-chart-fill {
	height: 25px;
	border-radius: 2px;
	background: var(--border-color);
	overflow: hidden;
	position: relative;
}
.vp-symptom-chart-fill.clickable {
	cursor: pointer;
}
.vp-symptom-chart-severity-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--theme-color-primary);
	border-radius: 2px;
}
.vp-symptom-chart-row.vp-symptom-chart-date-header {
	margin-bottom: -5px;
}
.vp-symptom-chart-date-header .vp-symptom-chart-name {
	margin-top: -15px;
	font-size: 14px;
}
.btn.vp-symptom-chart-row-del-btn {
	width: 20px;
	height: 20px;
	padding: 3px;
}
.visit-prep-timeline-form {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
}
.visit-prep-timeline-enddate {
	display: flex;
	gap: 10px;
}
.visit-prep-timeline-now-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.3em 0; /* to align with the datepicker */
}
.visit-prep-timeline-remove-btn {
	width: 32px;
	height: 32px;
}

@media (max-width: 480px) {
	.visit-prep-timeline-form {
		flex-direction: column; /* don't show as row even if there's space, will jump to next line once they add an end date */
	}
}
.compare-timeline-select-empty-msg {
	margin: 40px 0;
	text-align: center;
	color: var(--text-muted);
}
.compare-timeline-select-group.expanded + .compare-timeline-select-group {
	margin-top: 15px;
}
.compare-timeline-select-custom-type-header {
	margin-top: 25px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: var(--card-separator);
}
.compare-timeline-select-more-types-btn {
	text-align: center;
	margin-top: 15px;
}
.compare-timeline-select-option,
.compare-timeline-select-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: calc(100% + 20px);
	text-align: left;
	padding: 5px 10px;
	margin-left: -10px;
	margin-right: -10px;
	border-radius: 8px;
}
.compare-timeline-select-type {
	padding: 10px;
	min-height: 50px;
}
.compare-timeline-select-type.clickable,
.compare-timeline-select-option {
	cursor: pointer;
}
.compare-timeline-select-empty-option {
	font-size: 15px;
	color: var(--text-muted);
	margin-top: 5px;
}
.compare-timeline-select-type-arrow {
	width: 24px;
	height: 24px;
	padding: 3px;
	--btn-text: var(--icon-gray);
	background: var(--hover-gray);
	border-radius: 50%;
	transition: transform 300ms ease-in-out;
}
.compare-timeline-select-type-arrow.expanded {
	transform: rotate(180deg);
}
.compare-timeline-select-type-name {
	display: flex;
	align-items: center;
	flex-grow: 1;
	font-weight: 600;
}
.compare-timeline-select-type-name .profile-color-blob {
	background: var(--theme-color-primary);
}
.compare-timeline-select-type-count {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 2px;
}
.compare-timeline-select-option-name {
	flex-grow: 1;
}
.compare-timeline-select-checkbox svg {
	margin: 0;
}
.compare-timeline-select-search {
	margin-bottom: 15px;
}
@media(hover: hover) {
	.compare-timeline-select-type.clickable:hover,
	.compare-timeline-select-option:hover {
		background: var(--hover-gray);
	}
}
.vp-search-bar {
	flex-grow: 1;
}
.vp-search-bar-suggest-entry {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.vp-search-bar-suggest-entry.added {
	opacity: 0.5;
}
.vp-search-bar-suggest-entry.new-item {
	font-size: 14px;
	color: var(--theme-color-text);
	font-weight: 600;
}
.vp-search-bar-suggest-label {
	padding: 5px 10px 5px 0;
}
.vp-search-bar-subtitle {
	font-size: 0.8em;
	color: var(--text-muted);
}
.vp-search-bar-icon-space {
	color: var(--icon-info-gray);
	flex: 0 0 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.vp-search-bar-icon-space .icon-check {
	border: none;
}
.vp-search-bar .search-bar {
	--search-input-height: 40px;
	--search-input-icon-margin: 10px;
}
.vp-search-bar .search-input {
	font-size: 16px;
}
.vp-search-bar .search-input {
	border-radius: 4px;
}
.vp-search-bar .search-suggests {
	border-radius: 0 0 4px 4px;
	margin-top: -1px;
}
.vp-search-bar.contains-text .search-input:not(:focus) {
	border-color: var(--btn-red-hover);
}
.vp-search-bar-error-text {
	position: absolute;
	background: var(--btn-red);
	border: 1px solid var(--btn-red);
	border-radius: 8px;
	padding: 2px 8px;
	font-size: 12px;
	margin-top: 6px;
	color: #fff;
}
.vp-search-bar-error-text:before {
	content: '';
	position: absolute;
	margin-top: -6px;
	top: 0;
	left: 10%;
	border-bottom: solid 6px var(--btn-red);
	border-left: solid 4px transparent;
	border-right: solid 4px transparent;
}
.provider-select-value {
	display: flex;
	align-items: center;
	gap: 25px;
}
.provider-select-specialty {
	color: var(--text-muted);
	font-size: 14px;
}
.provider-select-instructions {
	font-size: 14px;
	margin-bottom: 15px;
}
.vp-metric-card .chart {
	margin-top: 10px;
}
.vp-metric-card .chart-context-info {
	display: none;
}
.vp-metric-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px;
	font-size: 12px;
}
.vp-metric-card-row-date {
	font-size: 11px;
}
.vp-metric-card-cols {
	display: flex;
	column-gap: 60px;
}
.vp-metric-card-col {
	flex: 50%;
}
.vp-metric-card-row-unit {
	font-size: 10px;
	color: var(--text-muted);
	margin-left: 5px;
}
.vp-metric-card-row:not(:last-child) {
	border-bottom: var(--card-separator);
}
.vp-metric-card-error {
	text-align: center;
	font-size: 14px;
	padding: 25px;
	color: var(--text-muted);
}
@media (max-width: 600px) {
	.vp-metric-card-cols {
		flex-direction: column;
	}

	.vp-metric-card-col:first-child .vp-metric-card-row:last-child {
		border-bottom: var(--card-separator);
	}
}
.vp-list-view-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 5px 10px 40px;
}
.vp-list-view-page-add-btn {
	font-size: 18px;
}
.vp-list-view-header {
	font-size: 20px;
}
.vp-list-view-show-hide-btn {
	margin: 30px 0 15px;
}
.vp-list-view-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vp-list-view-page-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 60px 20px;
	border-radius: var(--card-border-radius);
	border: 2px dashed var(--border-color);
	color: var(--text-muted);
}
@media (max-width: 480px) {
	.vp-list-view-page-header {
		flex-direction: column;
	}
}
.form-label.vp-auto-form-label {
	font-size: 15px;
	font-weight: 600;
	margin: 25px 0 10px;
}
.vp-auto-chat-intro-hint {
	margin: -8px 0 0;
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
}
.vp-auto-chat-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 15px 0;
}
.vp-auto-chat-current .vp-auto-chat-row {
	animation: chatFadeInAndSlideUp 150ms linear 1;
}
@keyframes chatFadeInAndSlideUp {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.vp-auto-chat-row.user {
	justify-content: flex-end;
}
.vp-auto-chat-content {
	font-size: 15px;
	padding: 10px 12px;
	border-radius: 18px;
}
.vp-auto-chat-row.assistant .vp-auto-chat-content {
	background: var(--theme-color-light);
	border-bottom-left-radius: 4px;
	margin-right: 36px;
}
.vp-auto-chat-row.user .vp-auto-chat-content {
	background: var(--surface-bg-muted);
	border-bottom-right-radius: 4px;
	margin-left: 36px;
}
.vp-auto-chat-assistant {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	transform: scaleX(-1);
	box-shadow: 0 1px 3px var(--theme-color-shadow), 0 1px 2px var(--theme-color-shadow);
}
.vp-auto-chat-action-btn {
	margin: 45px 0 25px;
	text-align: center;
}
.vp-auto-chat-input {
	border-radius: 18px;
	padding: 12px 15px;
}
@media (max-width: 500px) {
	.vp-auto-chat-wrap {
		margin: 0 -8px;
	}
}
.visit-prep-card.vp-staged-card {
	box-shadow: 0 5px 5px var(--theme-color-shadow), 0 0 10px var(--theme-color-primary);
	overflow: visible;
	position: relative;
	padding: 15px 10px;
}
.vp-staged-auto-prep-bubble {
	position: absolute;
	top: -11px;
	font-size: 10px;
	display: flex;
	align-items: center;
	background: var(--theme-color-btn);
	border-radius: 3em;
	padding: 2px 8px;
	font-weight: 600;
	gap: 3px;
	color: #fff;
}
.vp-staged-header {
	color: var(--theme-color-text);
}
.vp-staged-title {
	font-weight: 600;
	font-size: 15px;
}
.vp-staged-subtitle {
	font-size: 13px;
}
.vp-staged-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	width: 100%;
}
.vp-staged-row-text {
	font-size: 14px;
}
.vp-staged-row.selected .vp-staged-row-text {
	font-weight: 600;
}
.vp-staged-row:not(.selected) .vp-staged-row-text {
	color: var(--text-muted);
	text-decoration: line-through;
}
.vp-staged-row-check {
	width: 24px;
	height: 24px;
	border: 2px solid var(--btn-color);
	--btn-text: transparent;
	border-radius: 50%;
	padding: 3px;
}
.vp-staged-row.selected .vp-staged-row-check {
	--btn-text: #fff;
	border: 2px solid var(--theme-color-btn);
	background: var(--theme-color-btn);
}
.form-btns.vp-staged-btn-wrap {
	margin-top: 10px;
}
.card.visit-prep-auto-banner {
	padding: 15px;
	margin: 15px 0;
	position: relative;
	background: linear-gradient(-30deg, var(--theme-color-btn-hover), var(--theme-color-btn));
	color: #fff;
	border-radius: 6px;
	overflow: hidden;
	display: block;
	width: 100%;
}
.visit-prep-auto-banner-title {
	font-size: 15px;
	font-weight: 600;
}
.visit-prep-auto-banner-subtitle {
	font-size: 13px;
}
.visit-prep-auto-banner-icon {
	position: absolute;
	right: 0;
	bottom: -25px;
	width: 100px;
	height: 100px;
	--btn-text: #fff;
	opacity: 0.1;
}
.visit-prep-auto-banner::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	height: 200%;
	width: 50%;
	background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
	transform: rotate(15deg);
	pointer-events: none;
	animation: shineEffect 2s linear 1;
}
@keyframes shineEffect {
	0% {
		left: -150%;
	}
	50% {
		left: 100%;
	}
	100% {
		left: 250%;
	}
}
@media (max-width: 480px) {
	.visit-prep-auto-banner-title {
		font-size: 14px;
	}
	.visit-prep-auto-banner-subtitle {
		font-size: 12px;
	}
}
.vp-intro-modal.card {
	background: var(--theme-color-btn);
	color: #fff;
}
.darkmode .vp-intro-modal.card,
.darkmode .vp-intro-modal .card-header {
	background: var(--surface-bg-24dp);
}
.vp-intro-modal .card-header {
	border: none;
}
.vp-intro-graphics-wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}
.vp-intro-graphics {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding: 8px;
}
.vp-intro-text-wrap {
	padding: 15px 20px 0;
	min-height: 157px; /* min height to fit all text */
}
.vp-intro-title {
	font-size: 20px;
	font-weight: 600;
}
.vp-intro-subtitle {
	font-size: 16px;
	margin-top: 10px;
}
.vp-intro-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
}
.vp-intro-btns .btn {
	font-size: 20px;
}
.vp-intro-btns .btn.primary {
	--btn-color: #fff;
	--btn-color-hover: #eee;
	--btn-text: var(--theme-color-text);
}
.darkmode .vp-intro-btns .btn.primary {
	--btn-color: var(--theme-color-primary);
	--btn-color-hover: var(--theme-color-text);
	--btn-text: #fff;
}
.vp-intro-back.btn {
	/* to match round btn padding */
	padding-left: 5px;
	padding-right: 30px;
	--btn-text: #fff;
	opacity: 0.7;
}
.vp-intro-dots {
	display: flex;
	gap: 10px;
}
.vp-intro-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	opacity: 0.15;
	background: #fff;
}
.vp-intro-dot.active {
	opacity: 1;
}
.vp-intro-img {
	position: relative; /* to position above the animated lines */
	max-width: 100%;
	flex-grow: 1;
	height: 0;
	object-fit: contain;
}

/* Integrated slide */
.vp-intro-integrated-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.vp-intro-integrated-lines path {
	fill: none;
	stroke: #fff;
	stroke-dasharray: 8 6;
	stroke-linecap: round;
	stroke-width: 2;
	animation: vp-intro-integrated-dash 1s linear infinite;
}
@keyframes vp-intro-integrated-dash {
	100% {
		stroke-dashoffset: 14px;
	}
}

/* Benefits slide */
.vp-intro-benefits-wrap {
	position: absolute;;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.vp-intro-benefits-title {
	margin-top: 25px;
	text-align: center;
	font-weight: 600;
}
.vp-intro-benefits {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.vp-intro-benefit {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 18px;
	padding: 0 20px;
}
.vp-intro-benefit-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	fill: #fff;
}
.vp-intro-benefit-icon.printer-svg .accent {
	fill: #e9e29f;
}
.vp-intro-benefit-icon.clock-svg .accent {
	fill: #b8edaf;
}
.vp-intro-benefit-icon.qna-svg .accent {
	fill: #9ddeec;
}
.vp-intro-benefit-icon.superhero-svg .accent {
	fill: #e48585;
}


@media (max-width: 440px) {
	.vp-intro-text-wrap {
		padding-left: 15px;
		padding-right: 15px;
		min-height: 143px;
	}
	.vp-intro-title {
		font-size: 18px;
	}
	.vp-intro-subtitle {
		font-size: 14px;
	}
	.vp-intro-benefit {
		font-size: 16px;
	}
}
@media (max-width: 350px) {
	.vp-intro-btns .btn {
		font-size: 16px;
	}
	.vp-intro-back.btn {
		padding-right: 18px;
	}
}
.carousel-slides {
	position: relative;
	overflow: hidden;
}
.carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.carousel-slide.selected {
	position: relative;
}
.visit-prep-sharing-guide-title {
	font-size: 18px;
	font-weight: 600;
	margin: 15px 0;
}
.visit-prep-sharing-guide-subtitle {
	font-size: 15px;
	margin-bottom: 25px;
}
.visit-prep-sharing-guide-list-header {
	display: flex;
	align-items: center;
	gap: 10px;
}
.visit-prep-sharing-guide-list-icon {
	width: 24px;
	height: 24px;
	color: var(--theme-color-primary);
}
.visit-prep-sharing-guide-list {
	font-size: 15px;
	margin-bottom: 25px;
}
#vp-info-sheet {
	font-size: 16px;
}
.vp-info-sheet-flex {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.vp-info-sheet-heading {
	font-size: 2.1em;
	color: var(--theme-color-primary);
	margin-bottom: 1em;
}
.vp-info-sheet-subheader {
	font-size: .8em;
	margin-bottom: 2em;
}
.vp-info-sheet-hipaa {
	font-size: 1.1em;
	margin-bottom: 3em;
}
.vp-info-sheet-feature-card {
	margin-bottom: 4.5em;
}
.vp-info-sheet-card-header {
	font-size: 1.5em;
	font-weight: 600;
	margin: 8px 0 14px;
}
.vp-info-sheet-feature-row {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 1.2em 0.4em;
}
.vp-info-sheet-feature-icon {
	font-size: 1.5em;
	color: var(--theme-color-primary);
	margin-top: 3px;
}
.vp-info-sheet-feature-header {
	font-size: 1.1em;
	font-weight: 600;
}
.vp-info-sheet-feature-body  {
	margin-bottom: 6px;
}
.vp-info-sheet-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	margin-bottom: 2.8em;
}
.vp-info-sheet-footer-text {
	font-size: 1.3em;
	color: var(--theme-color-primary);
}

@media (max-width: 550px) {
	#vp-info-sheet {
		font-size: 12px; /* scale everything down for mobile */
	}
	.vp-info-sheet-logo {
		display: none;
	}
}

.vp-share-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}
.vp-share-public-link-row-wrap {
	margin: -20px -20px 0;
}
.vp-share-public-link-row-wrap .setting-edit-row {
	padding: 15px 20px;
}
.vp-share-link-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.vp-share-link-wrap {
	margin-top: 15px;
}
.vp-share-providers-empty {
	text-align: center;
	padding: 20px 0;
}
.vp-share-providers-edit-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
}
.vp-share-provider-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.vp-share-provider-row-name {
	display: flex;
	align-items: center;
	gap: 10px;
}
.vp-share-security-type-detail {
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
}
.add-permission-types {
	margin-top: 20px;
	font-size: 0.9em;
	color: var(--text-muted);
}
.add-permission-security-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
}
.add-permission-security-title {
	font-size: 18px;
	margin-bottom: 10px;
}
.add-permission-security-warn {
	font-size: 15px;
	margin-top: 15px;
	color: var(--orange-warn);
}
.add-permission-extra-btn {
	margin-top: 15px;
}
.cal-add-icon {
	width: 32px;
	height: 32px;
	--btn-text: var(--guava-green);
}
.log-onboarding-instructions {
	font-weight: 600;
	margin-bottom: 4px;
}
.log-onboarding-subtext {
	font-size: 14px;
	color: var(--text-muted);
}
.log-onboarding-nav-btns {
	padding: 10px 20px 20px;
	margin-top: 0;
}
.log-onboarding-reminder-form {
	font-size: 14px;
}
.log-onboarding-reminder-enable {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
	font-size: 14px;
	font-weight: 600;
}
.log-onboarding-toggle {
	text-align: center;
	margin: 15px 0;
}
.log-onboarding-basic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.btn.log-onboarding-basic-btn {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	padding: 15px;
	font-size: 14px;
	gap: 8px;
	min-height: 110px;
}
.btn.log-onboarding-basic-btn:not(.primary) {
	--btn-color: var(--chip-bg);
	--btn-color-hover: var(--chip-bg-hover);
}
svg.daily-log-type-icon.log-onboarding-basic-btn-icon {
	width: 30px;
	height: 30px;
}
.log-onboarding-basic-btn.primary .log-onboarding-basic-btn-icon {
	--icon-fill: #fff;
}
.log-onboarding-complete-title {
	font-size: 28px;
	font-weight: 600;
	color: var(--guava-green-text);
	margin: 40px 0 25px;
	text-align: center;
}
.log-onboarding-complete-bullet {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 25px 0;
}
.log-onboarding-complete-bullet-subtext {
	font-size: 14px;
}
.log-onboarding-complete-bullet-link {
	margin-top: 5px;
}
.log-onboarding-complete-bullet-icon {
	width: 28px;
	height: 28px;
	--btn-text: var(--guava-green-text);
}
.log-onboarding-complete-voice-logging-mobile {
	display: none;
}
/* Match PortalPage.css */
@media (max-width: 480px) {
	.log-onboarding-complete-voice-logging-mobile {
		display: inline;
	}
}
.log-onboarding-complete-screen-close-wrap {
	margin-top: 40px;
	text-align: center;
}
.daily-log-onboard-card {
	position: relative;
	padding-top: 40px;
	padding-bottom: 20px;
	overflow: hidden;
}
.daily-log-onboard-card-customize-body {
	padding: 0 20px;
	text-align: center;
}
.daily-log-onboard-icons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 20px 0;
}
.daily-log-onboard-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
}
.daily-log-onboard-icon .daily-log-type-icon {
	--icon-fill: var(--theme-color-primary);
	--icon-bg: var(--theme-color-light);
	padding: 6px;
	width: 100%;
	height: 100%;
}
.daily-log-onboard-card-customize-text {
	font-size: 15px
}
.daily-log-onboard-card-welcome {
	font-size: 24px;
	margin-bottom: 15px;
}
.accept-org-checkin-header {
	font-weight: 600;
	margin-bottom: 8px;
}
.accept-org-checkin-time {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 25px;
	margin-bottom: 15px;
	--btn-text: var(--theme-color-text);
}
.accept-org-checkin-add {
	font-weight: 600;
	font-size: 15px;
	margin-top: 25px;
	margin-bottom: 8px;
}
.accept-org-checkin-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.org-profile-reminder-config-header {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
}
.org-profile-reminder-config-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 15px;
}
.org-profile-reminder-config-changes {
	background: var(--chip-bg);
	padding: 10px;
	border-radius: var(--card-border-radius);
	margin-top: 15px;
}
.org-profile-reminder-config-changes-header {
	font-weight: 600;
	margin-bottom: 8px;
}
.org-profile-reminder-config-changes-header:not(:first-child) {
	margin-top: 15px;
}
.org-profile-reminder-config-edit-types {
	padding: 0 20px;
	border-top: var(--card-separator);
}
.org-home-heading-icon {
	display: block;
	margin: 0 auto 15px;
	border-radius: 3px;
}
.org-home-heading-name {
	font-size: 20px;
	text-align: center;
	margin: 0 auto 15px;
}

.med-onboard-modal-img-wrap {
	width: 100%;
	position: relative;
	padding-top: 100%;
	background: #e5f1f5;
	overflow: hidden;
	border-top-left-radius: var(--card-border-radius);
	border-top-right-radius: var(--card-border-radius);
}
.darkmode .med-onboard-modal-img-wrap {
	background: var(--surface-bg);
}
.med-onboard-modal-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}
.med-onboard-modal-close-btn {
	position: absolute;
	right: 15px;
	top: 15px;
}
.card-section.med-onboard-modal-text {
	border-top: none;
}
.med-onboard-modal-title {
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 18px;
}
.med-onboard-modal-subtext {
	font-size: 15px;
}
.med-onboard-modal-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 25px;
	gap: 20px;
	margin-bottom: 5px;
}
.med-supply-settings {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.med-supply-setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.med-supply-settings .setting-edit-row {
	margin-left: -15px;
	margin-right: -15px;
	width: calc(100% + 30px);
}
.modal > .card.med-refill-modal {
	margin-top: 150px;
}
.med-refill-modal-current {
	font-size: 18px;
	font-weight: 600;
	margin: 10px;
	color: var(--theme-color-text);
}
.med-refill-modal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.med-refill-modal-row + .med-refill-modal-row {
	margin-top: 20px;
}
.med-groups-instructions {
	margin: 20px 0 25px;
	color: var(--text-muted);
}
.med-groups-meds {
	margin: 20px -12px
}
.med-groups-med {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.btn.med-groups-med-del-btn {
	width: 25px;
	height: 25px;
	padding: 4px;
	margin-left: -8px;
	margin-right: -4px;
}
.med-groups-add-btn-wrap {
	text-align: center;
	margin: 25px 0;
	position: relative;
}
.overflow-menu-wrap.med-groups-sort-icon {
	position: absolute;
	right: -5px;
	top: -5px;
}
.med-groups-meds-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
}
.med-groups-rows {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 40px -5px 20px;
}
.med-groups-rows-draggable-list {
	margin: 0 -20px;
}
.med-groups-row {
	width: 100%;
	text-align: left;
	border: var(--card-separator);
	border-radius: var(--card-border-radius);
	--btn-color: var(--surface-bg-8dp);
	--btn-color-hover: var(--hover-gray);
	justify-content: space-between;
	padding: 12px 15px;
	overflow: hidden;
}
.med-groups-row-body {
	overflow: hidden; /* for ellipsis */
}
.med-groups-row-name {
	font-size: 16px;
}
.med-groups-row-subtitle {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.med-groups-empty {
	margin-top: 10px;
}
.med-groups-reminder-prompt {
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--theme-color-primary);
	background: var(--theme-color-tint);
}
.med-groups-reminder-prompt-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--theme-color-text);
}
.viocare-portion-entry-form-header {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 15px;
}
.viocare-portion-entry-form-options {
	display: flex;
	justify-content: center;
	column-gap: 12px;
	row-gap: 18px;
	flex-wrap: wrap;
}
.viocare-portion-entry-form-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.viocare-portion-entry-form-option.selected .viocare-portion-entry-form-option-img {
	outline: 3px solid var(--theme-color-primary);
}
.viocare-portion-entry-form-options.selected .viocare-portion-entry-form-option:not(.selected) {
	opacity: 0.5;
}
.viocare-portion-entry-form-option-img {
	width: 120px;
	height: 80px;
	object-fit: contain;
	border-radius: 4px;
}
.viocare-portion-entry-form-option-label {
	text-align: center;
	font-size: 14px;
	max-width: 140px;
}
:root {
	--bulk-photo-entry-padding: 5px;
}

.bulk-photo-modal .photo-picker .form-btns {
	display: none; /* hide the done button, probably shouldn't be part of the photo-picker component anyway */
}
.bulk-photo-modal.hide-upload .photo-picker-add-area {
	display: none;
}
.hide-photos .bulk-photo-picker .photo-picker-preview-grid {
	display: none;
}
.bulk-photo-notice {
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.bulk-photo-entry {
	margin: 0 -10px;
	padding: var(--bulk-photo-entry-padding);
}
.bulk-photo-entry + .bulk-photo-entry {
	margin-top: 20px;
}
.bulk-photo-entry.saved {
	pointer-events: none;
	opacity: 0.5;
}
.bulk-photo-entry-btn-row {
	display: flex;
	gap: 10px;
}
.bulk-photo-entry-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}
.bulk-photo-entry-photos img {
	border-radius: calc(var(--card-border-radius) - var(--bulk-photo-entry-padding));
	width: 90px;
	height: 90px;
	object-fit: cover;
}
.bulk-photo-entry-photos .btn-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	color: #fff;
}
.bulk-photo-entry-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.bulk-photo-entry-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bulk-photo-entry-info .btn {
	margin-top: auto;
}
.bulk-photo-entry .notice {
	margin-top: 10px;
	display: flex;
	gap: 5px;
	align-items: center;
}
.date-duration-input-radio-wrap {
	display: flex;
	align-items: stretch;
	column-gap: 8px;
	row-gap: 6px;
	flex-wrap: wrap;
	margin: 8px 0 15px;
}
.date-duration-input-radio,
.date-duration-input-radio .btn {
	flex-grow: 1;
}
.date-duration-input-radio-edit {
	flex-basis: 15%;
	min-height: 33px; /* matches height of radio buttons */
}
.date-duration-input-expanded {
	display: flex;
	align-items: center;
	gap: 15px;
}
.btn.heart-btn.selected {
	--btn-text: var(--color-vitals);
}
.heart-btn.animate.selected {
	position: relative;
	animation: heart-animation 0.5s;
	overflow: hidden;
}
.heart-btn.animate.selected::before {
	content: '';
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	background: var(--color-vitals);
	animation: ripple-animation 0.5s ease-out forwards;
}
@keyframes ripple-animation {
	from {
		transform: scale(0);
		opacity: 0.4;
	}
	to {
		transform: scale(3);
		opacity: 0;
	}
}
@keyframes heart-animation {
	0% {
		transform: scale(0.6);
	}
	100% {
		transform: scale(1);
	}
}
.insights-hub-header {
	position: relative;
	padding: 0 10px;
	max-width: 1024px;
	margin: 0 auto;
	min-height: 60px;
}
.insights-hub-header.app .header-guava {
	display: none;
}
.insights-hub-header-back {
	margin-left: -5px;
}
.insights-hub-header-menu {
	position: absolute;
	top: 100%;
	right: 15px;
	background: var(--surface-bg-8dp);
	border: var(--surface-border);
	border-radius: 18px;
	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.20);
	max-height: calc(100vh - 65px);
	width: 240px;
	max-width: calc(100vw - 30px);
	padding: 10px 0;
	overflow-y: auto;
	z-index: var(--menu-z-index);
}
.btn.insights-hub-header-menu-btn {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 22px;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	font-size: 15px;
	text-align: left;
	border-radius: 0;
	word-break: break-word;
	--btn-color: transparent;
	--btn-color-hover: var(--hover-gray);
	cursor: pointer;
}
.insights-hub-header-menu-btn .btn-svg {
	width: 20px;
	height: 20px;
	--btn-text: var(--icon-gray);
}
.insights-hub-header-menu-btn.logout {
	justify-content: center;
}

.insights-hub-header-profile-btn {
	padding: 2px 16px 2px 2px;
	margin-left: auto;
	font-size: 16px;
	border-radius: 32px;
	box-shadow: var(--portal-surface-shadow);
	--btn-color: var(--portal-surface-bg);
	--btn-text: var(--icon-gray);
	color: var(--logo-text);
	min-width: 100px;
	min-height: 36px;
	max-width: calc(min(160px, 30%));
	gap: 8px;
}
.darkmode .insights-hub-header-profile-btn {
	border-color: transparent;
}
.insights-hub-header-profile-icon {
	width: 34px;
	height: 34px;
	margin-right: -3px;
}
.insights-hub-header-profile-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	flex-grow: 1;
}
@media (max-width: 420px) {
	.insights-hub-header-profile-btn {
		padding: 0 12px 0 0;
		font-size: 12px;
		min-width: 80px;
		max-width: calc(min(115px, 30%));
		gap: 0.4em;
	}
}
.click-outside-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}