@font-face {
	font-family: "MayoClinicSansRegular";
	src: url("../font/MayoClinicSans-Regular.woff2") format("woff");
}
@font-face {
	font-family: "MayoClinicSansBold";
	src: url("../font/MayoClinicSans-Bold.woff2") format("woff");
}
:root {
	--font-family-regular: "MayoClinicSansRegular", "Helvetica", "Arial";
	--font-family-bold: "MayoClinicSansBold", "Helvetica", "Arial";
	--main-bg-clr: #f7f9fa;
	--border-line-clr: #f2f3f5;
	--nav-link-bg: #f0f3f5;
	--link-clr: rgb(62, 76, 89);

	--offcanvas-bg-clr: #f3f4f6;

	--form-control-text-clr: #778495;
	--form-control-bg-clr: #f8f9fd;

	--size: 2rem;
	--icon-clr: #adadad;

	--dark-variant: 0, 0, 0;
	--dark: rgba(var(--dark-variant), 1);

	--white-variant: 255, 255, 255;
	--white: rgba(var(--white-variant), 1);

	--primary-clr-variant: 230, 0, 0;
	--primary-clr: rgba(var(--primary-clr-variant), 1);

	/* themes */
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	letter-spacing: 0.2px;
	outline: none;
	font-family: var(--font-family);
	image-rendering: optimizequality;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span:not(:has(img, .img-fluid)) {
	image-rendering: pixelated;
	text-rendering: geometricPrecision;
}
ul,
li,
p {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a {
	will-change: background-color, color;
	transition: 300ms ease-in-out;
	transition-property: background-color;
	text-decoration: none;
}
button {
	background-color: transparent;
	border: none;
}
:is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}
*:not(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-family-regular);
}
*:not(*:not(h1, h2, h3, h4, h5, h6, b, strong)) {
	font-family: var(--font-family-bold);
}
svg {
	--size: 1.4rem;
	aspect-ratio: 1/1;
	width: var(--size);
	height: var(--size);
	user-select: none;
	pointer-events: none;
}
html::-webkit-scrollbar {
	width: 5px;
}
::selection {
	background-color: rgba(var(--primary-clr-variant), 0.2);
}
:is(.modal, .offcanvas) .btn-close {
	box-shadow: 0 0 0 0.25rem transparent;
}
:is(.modal, .offcanvas) .btn-close:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-clr-variant), 0.25);
}
::-webkit-scrollbar-track {
	background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
	background: var(--primary-clr);
	border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
	background: #555;
}
.form-control:focus {
	box-shadow: none;
}
[class*="col-"] {
	transition: width 300ms ease-in-out;
	will-change: width;
}
.form-check-input[type="radio"],
.form-check-input[type="checkbox"] {
	transition: 300ms ease-in-out;
}
.form-check-input[type="radio"]:focus,
.form-check-input[type="checkbox"]:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-clr-variant), 0.25);
}
.form-check-input:checked[type="radio"]:checked,
.form-check-input:checked[type="checkbox"]:checked {
	background-color: var(--primary-clr);
	border-color: var(--primary-clr);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-calendar-picker-indicator {
	display: none;
}
figure {
	margin: 0;
}
.v-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}