@media screen and (min-width: 1501px) {
.mobile-note-header {
	display: none;
}

#note-list {
	display: none;
	overflow-y: scroll
}

#note-table_wrapper {
	width: 97%;
}

.container #sidebar-link.toggle {
    left: 25em;
}

.container {
	display: grid;
	height: 100vh;
	grid-template-columns: 25em 60px 35% 0.98fr;
	grid-template-rows: 60px 100vh;
	gap: 5px 5px;
	grid-auto-flow: row;
	grid-template-areas:
		"sidebar-header ref-btn-header ref-header note-header"
		"sidebar ref-btn ref-text notes";

	transition: grid-template-columns 0.5s ease-in-out;

	p {
		margin: 0 0 1em 0;
	}

	.fields-container {
		display: none;
	}

	&.sidebar-collapsed {
		grid-template-columns: 0px 60px 35% 0.98fr;

		#sidebar-link.toggle {
			left: 0;
		}
	}
}

.bottom-row { 
	height: calc(100vh - 75px);
}

.notes {
	display: flex;
	flex-direction: column;
	grid-template-columns: 100vh;
	grid-template-rows: 75px 100vh;
	gap: 2px 0px;
	grid-template-areas: "fields-container" "note-text";

	grid-area: notes;

	.fields-container {
		justify-content: space-evenly;
		flex-wrap: wrap;
		width: 99.5%;
		// height: 75px;

		input[type="text"], select {
			background-color: var(--background);
			color: var(--text);
			height: 1.5em;
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			appearance: none;
			border-radius: 0.375em;
			border: solid 1px var(--dark);
			outline: 0;
			padding: 0 1em;
			text-decoration: none;
			font-size: 14pt;
			font-weight: 400;
			line-height: 1.65;
			flex-basis: auto;
			flex-grow: 1;
			flex-shrink: 2;
			min-width: 50px;
			max-width: 200px;
		}
	}

	.note-text {
		height: 100%;
		width: 100%;

		textarea {
			height: stretch;
			width: stretch;
			border-radius: 10px;
			background-color: transparent;
			color: var(--text);
			font-family: 'Roboto Sans';
		}
	}
}

.note-header, .ref-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	h2 {
		margin: 0;
	}

	select {
		background-color: var(--background);
		color: var(--text);
		height: 1.5em;
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border-radius: 0.375em;
		border: solid 1px var(--dark);
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		font-size: 14pt;
		font-weight: 400;
		line-height: 1.65;
		flex-basis: auto;
		flex-grow: 1;
		flex-shrink: 2;
		min-width: 50px;
		max-width: 200px;
		margin-right: 3px;
	}
}
}
