@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');

:root {
	--red-1: #E34848;
	--red-2: #c72626;
	--red-3: #f49494;
}

* {
	font-family: 'Noto Sans', sans-serif;
	box-sizing: border-box;
}

body {
	color: #333;
	background-color: #f5f5f5;
}

hr {
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.navbar {
	width: 100%;
	background-image: linear-gradient(#5186c3, #2d5f99);
	color: white;
	box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .3);
	padding: .5rem 3rem;
}

.nav-items {
	align-items: center;
	gap: 1rem;
	flex-grow: 1;
	justify-content: flex-end;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: white;
	font-size: 1rem;
	text-decoration: none;
}

.nav-item:hover {
	text-decoration: none;
	color: #e5e5e5;
}

.nav-icon {
	color: white;
	margin: 0;
}

input, [input] {
	padding: .5rem .7rem;
	border: 1px solid #CCC;
	border-radius: var(--border-radius);
}

button {
	padding: .5rem 1rem;
}

div.wrapper {
	padding: 0 3rem;
}

form {
	margin: none;
}

a {
	text-decoration: none;
}

form {
	padding: 1rem 0;
}

label {
	font-size: 1rem;
	display: block;
}

#patient-info p {
	display: block;
	height: 1rem;
}

table {
	background-color: white;
	margin: 1rem 0;
}

table,
th,
td {
	border: 1px solid white;
	border-collapse: collapse;
}

table tr:nth-child(2n+1) {
	background-color: var(--light-color);
}

div.table-controls>a {
	height: 35px;
	width: 50px;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 1300px) {
	div.wrapper {
		padding: 0 1rem;
	}

	.navbar {
		padding: .5rem 1rem;
	}
}