@media screen and (max-width: 1050px) {
#sidebar {
	display: none;
}

.note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
	display: none;
}

.container {
	display: grid;
	height: 100vh;
	width: 100vw;
	grid-template-columns: 1fr;
	grid-template-rows: 50px 50% 1fr;
	gap: 5px 0;
	grid-auto-flow: column;
	grid-template-areas: 
		"mobile-note-header"
		"notes"
		"ref-text";

	.ref-text {
		height: 100%;
		width: 98vw;
		margin-left: 1vw;

		& a {
			color: var(--primary);
		}
	}
}

.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
	display: none;
}

.mobile-note-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	h2 {
		margin: 0 10px;
	}

	button {
		margin: 0 10px;
	}
}

.notes {
	width: 98vw;
	margin-left: 1vw;

	display: flex;
	flex-direction: column;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 50px;
	gap: 2px 0;
	grid-template-areas: "note-text" "fields-container";

	grid-area: notes;

	.fields-container {
		justify-content: space-between;
		flex-wrap: wrap;
		width: 99.5%;
		
		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(--border);
			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: 1;
			min-width: 50px;
			max-width: 200px;
		}
	}

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

		textarea {
			height: 100%;
			width: 98%;
			border-radius: 10px;
			background-color: transparent;
			color: var(--text);
			font-family: 'Roboto Sans';
			padding: 0 5px;
		}
	}
}

#sidebar {
	position: fixed !important;
}

#refQuery {
	height: 150px !important;
}
}