* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root {
	--background-color: #fefcfb;
	--background-secondary-color: #fbf5f373;
	--base-text-size: 18px;
	--static-white: #fefcfb;
	--static-dark: #511f3a;
	--translucent-white: rgba(255, 255, 255, 0.8);
	--translucent-dark: rgba(0, 0, 0, 0.1);
	--hover-background: rgba(64, 72, 248, 0.05);
	--burgundy: #581b3b;
	--burgundy-10: rgba(88, 27, 59, 0.1);
	--burgundy-5: rgba(88, 27, 59, 0.05);
	--transparent-burgundy: rgba(88, 27, 59, 0.01);
	--yellow: #fdf8e5;
	--orange: #feaf52;
	--pink: #f8577a;
	--purple: #8250df;
	--secondary-color: #28d3a5;
	--green: #2ddbaf;
	--green-10: rgba(50, 224, 181, 0.1);
	--green-60: rgba(50, 224, 181, 0.6);
	--gray: #e7e0e093;
	--gray-dark: rgb(227, 222, 225);
	--white: white;
	--static-white: #fefcfb;
	--primary-color: rgba(64, 72, 248, 1);
	--primary-color-light: rgba(63, 0, 242, 1);
	--primary-color-dark: rgb(52, 60, 211);
	--primary-color-2: rgba(64, 72, 248, 0.02);
	--primary-color-5: rgba(64, 72, 248, 0.05);
	--primary-color-10: rgba(64, 72, 248, 0.1);
	--main-gradient: linear-gradient(10deg, #2ddbaf 12.59%, #16cea9 100%);
	--card-shadow: 0px 4px 8px -6px rgba(100, 0, 0, 0.2);
	--card-shadow-hover: 0px 8px 15px -10px rgba(100, 0, 0, 0.5);
	--card-border: 1px solid rgba(0, 0, 0, 0.1);
	--card-border-hover: 1px solid color-mix(in srgb, var(--primary-color), white 65%);
}

body {
	font-family:
		'System',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
}

a {
	color: #666;
}
a:hover {
	color: #333;
}

button {
	border: 0;
	background: transparent;
	padding: 0;
	height: auto;
	font-family:
		'System',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	cursor: pointer;
	font-size: 1em;
	line-height: 1.5em;
	color: #4048f8;
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
	font-weight: 600;
	padding: 0.5rem;
	padding-left: 0;
	border-radius: 0.5rem;
	transition: padding 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
	line-height: 1em;
}
button.simple,
button.simple:hover {
	padding: 0.5rem;
}

button:hover {
	background: var(--primary-color-2);
	padding-left: 0.5rem;
}
a.large,
button.large {
	text-decoration: none;
	padding: 0.6rem 1rem;
	font-size: 14px;
	background: var(--primary-color);
	color: white;
	font-weight: 700;
	border-radius: 0.25rem;
	transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
}
a.large:hover,
button.large:hover {
	background: var(--primary-color-light);
	box-shadow: 0 10px 20px -10px rgba(63, 0, 242, 0.5);
}

button.large.secondary {
	background: white;
	border: 1px solid var(--burgundy-10);
	color: var(--burgundy);
	border-radius: 0.5rem;
}

button.large.secondary:hover {
	box-shadow: unset;
	background: var(--background-secondary-color);
}

button.outline {
	cursor: pointer;
	color: #fff;
	color: var(--burgundy);
	border: 1px solid color-mix(in srgb, var(--burgundy), white 70%);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	border-radius: 0.5rem;
	padding: 0.3rem 0.8rem;
}

button.outline:hover {
	background: color-mix(in srgb, var(--burgundy), white 90%);
}
input {
	font-size: 1em;
}

input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='search'],
select {
	font-family:
		'System',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	height: 2rem;
	font-size: 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0 0.5rem;
	outline: none;
}

select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 2rem 0 0.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right;
	width: 100%;
}

textarea {
	font-family:
		'System',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	font-size: 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.5rem;
}

ul {
	list-style: none;
}

table,
th,
td {
	border: 1px solid #ddd;
}
th,
td {
	padding: 0.5rem;
}

sup {
	vertical-align: top;
	font-size: 0.6em;
	position: relative;
	top: -0.5em;
}

strong {
	font-weight: 600;
}

.medicalListHeader {
	display: flex;
	width: 100%;
	column-gap: 0.5rem;
}

.card {
	cursor: pointer;
	background: #fff;
	border-radius: 1rem;
	box-shadow: var(--card-shadow);
	padding: 1rem;
	display: flex;
	column-gap: 1rem;
	align-items: center;
	border: var(--card-border);
	transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card:hover {
	z-index: 1;
	background: white;
	padding: 1rem;
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-0.05rem);
	border: var(--card-border-hover);
}

.topBar {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--burgundy);
}
.topBar h1 {
	font-size: 15px;
	font-weight: 600;
}

.consultation-box-add-button {
	display: flex;
	padding: 0.5rem;
	align-items: center;
	line-height: 1.5em;
	color: var(--primary-color);
	width: 100%;
	border-radius: 0.5rem;
	line-height: 0.8125rem;
	font-weight: 600;
	padding-left: 0rem;
	transition: padding 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
	gap: 0.5rem;
}
.consultation-box-add-button:hover {
	background: var(--primary-color-2);
	padding-left: 0.5rem;
}

.add-button {
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	/* font-size: 0.8125rem; */
	line-height: 1em;
	color: var(--primary-color);
	font-weight: 600;
}

.timeline-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.test ul {
	margin-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
}

.test li {
	line-height: 1.5em;
}

.tooltip {
	padding: 0.5rem !important;
}

.tippy-box {
	padding: 0.25rem 0.5rem;
	color: white;
	background-color: black;
	transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
	border-radius: 0.25rem;
}

.arrowIcon {
	color: var(--burgundy);
	text-decoration: none;
	transition:
		color 0.5s cubic-bezier(0.19, 1, 0.22, 1),
		background-position 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	background-image: url('/icons/arrow-to-right.svg');
	background-size: 1rem;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right 0.25rem top 50%;
	padding-right: 1.5rem !important;
}

.arrowIcon:hover {
	color: var(--primary-color);
	background-image: url('/icons/arrow-to-right-purple.svg');
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: right 0.1rem top 50%;
	padding-right: 1.5rem !important;
}

.panel-footer {
	padding: 1rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	position: sticky;
	bottom: 0;
	background: color-mix(in srgb, var(--burgundy), var(--white) 96%);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.darker:hover {
	background-color: var(--primary-color-10);
}