/* || Colors */
:root {
	/* ------------------------------------------------------------ */
	/* Variations of Streamline Health colors. */
	--gray-200: #cedbe6;
	--gray-500: #557ea1;
	--gray-800: #253746;
	--gray-900: #151f28;
	--blue-300: #6ee2ff;
	--blue-600: #00b5e2;
	--blue-900: #004657;
	--violet-400: #8625ff;
	--violet-700: #440099;
	--violet-900: #1b003c;
	--purple-100: #d3b0ff;
	--purple-300: #9678d3;
	--purple-400: #7855c8;
	/* ------------------------------------------------------------ */
	/* Streamline Health main, default colors */
	--violet-default: var(--violet-700); /* Primary color. */
	--blue-default: var(--blue-600); /* Secondary color. */
	--purple-default: var(--purple-300); /* Secondary color (Lavendar). */
	--gray-default: var(--gray-800); /* Secondary, neutral color.*/
	--violet-light: var(--violet-400);
	--blue-light: var(--blue-300);
	--purple-light: var(--purple-100);
	--gray-light: var(--gray-500);
	--violet-dark: var(--violet-900);
	--blue-dark: var(--blue-900);
	--purple-dark: var(--purple-400);
	--gray-dark: var(--gray-900);
}
/* || Fonts */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/Archivo-Medium.ttf');
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/Archivo-Bold.ttf');
}

body {
	margin: 0;
	font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar-fixed-top {
	background-color: white;
	box-shadow: 0 5px 3px 0 var(--gray-200);
	max-height: 50px;
	display: flex;
	align-items: center;
}

.app-brand-logo {
	padding: 10px 25px;
	max-height: 30px;
}

.app-logo {
	height: 30px;
	margin: 10px 0px 10px 20px;
}

.app-name {
	color: var(--violet-default);
	font-size: 32px;
	font-weight: bold;
	padding: 3px 0 0 20px;
}

.page-wrapper {
	max-width: 720px;
	margin: 30px auto 0;
}

h1 {
	border-bottom: 2px solid var(--blue-default);
	margin-top: 7px;
}

h2 {
	color: var(--violet-default);
}

h3 {
	color: var(--gray-default);
}

h2, h3 {
	margin-top: 25px;
}

	h2.headerLine,
	h3.headerLine {
		border-bottom: 2px solid var(--gray-200);
	}


.button {
	text-transform: uppercase;
	color: white;
	font-weight: bold;
	background-color: var(--violet-default);
	padding: 10px 15px;
	border-radius: 10px;
	display: inline-block;
	text-decoration: none !important;
}

	.button:hover {
		background-color: var(--violet-dark);
		color: white;
	}