:root {
	--sidebar-width: 280px;
	--sidebar-collapsed-width: 56px;
	--sidebar-item-height: 48px;
	--nav-color: #7ac3ff;
	--text-color: black;

	--blue-main: #39a6ff;
	--blue-light: #5AE8ED;
	--blue-dark: #2D2DB3;

	--purple-main: #7B2FF7;

	--yellow-a: rgb(255 200 0);
	--yellow-b: rgb(255 129 0);
}

html,
body {
	min-height: 100%;
}


body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sidebar-width);
	box-sizing: border-box;
	text-align: left;
	padding-top: 20px;

	display: grid;
	grid-template-columns: var(--sidebar-collapsed-width) calc(var(--sidebar-width) - var(--sidebar-collapsed-width));
	grid-auto-flow: row;

	background-color: var(--nav-color);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	overflow-x: hidden;
	transition: width 0.5s ease;

	a {
		text-decoration: none;
		color: var(--text-color);
		font-weight: bold;
		overflow: hidden;
		width: 100%;
	}

	h1 {
		text-wrap: nowrap;
		overflow: hidden;
		font-size: 25px;
		text-align: left;
		margin: 0;
	}

	img {
		width: calc(var(--sidebar-collapsed-width) * 0.5);
	}

	#nav-toggle {
		display: block;
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		margin: 0;
	}

	.icons {
		width: var(--sidebar-collapsed-width);
		display: grid;
		grid-template-rows: 70px;
		grid-auto-rows: var(--sidebar-item-height);
		align-items: center;
		text-align: center;
	}
	
	.main-nav {
		position: relative;
		width: calc(var(--sidebar-width) - var(--sidebar-collapsed-width));
		display: grid;
		grid-template-rows: 70px;
		grid-auto-rows: var(--sidebar-item-height);
		text-align: left;
		align-items: center;
	}

	nav {
		background-color: var(--nav-color);
	}

	form {
		width: 100%;
		padding: 10px 8px;
		box-sizing: border-box;
		display: contents;

		input {
			height: 32px;
			padding: 4px 8px;
			box-sizing: border-box;
			border: 1px solid black;
			border-radius: 4px;
			background-color: #ffffff77;
			margin: 10px;
		}
		button {
			height: 32px;
			background: none;
			color: var(--text-color);
			border: 1px solid black;
			padding: 8px;
			cursor: pointer;
			border-radius: 4px;
			margin: 10px;
		}
		button:hover {
			background-color: #ffffff77;
		}
	}


}

body.sidebar-collapsed header {
	width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed main {
	margin-left: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed footer {
	margin-left: var(--sidebar-collapsed-width);
}


main {
	flex: 1 0 auto;
	margin: var(--sidebar-collapsed-width);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;

	.scroll-container {
		width: fit-content;
		overflow-y: auto;
		margin: 10px;
		text-wrap: nowrap;
		max-width: calc(100% - 20px);
	}

	.NOT {
		display: none;
	}

	button {
		background-color: #4CAF50;
		width: 100%;
		padding: 10px;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		margin-top: 15px;
	}

	input {
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	textarea {
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.button-basic {
		background-color: white;
		color: black;
		border: 1px solid #ccc;
		padding: 10px 20px;
		cursor: pointer;
		border-radius: 4px;
		text-decoration: none;
		display: inline-block;
	}

	.button-basic:hover {
		background-color: #f1f1f1;
	}
}

footer {
	padding: 20px 0;
	text-align: center;
	margin: var(--sidebar-collapsed-width);
}

@media (max-width: 900px) {
	header {
		left: 0;
		right: 0;
		bottom: auto;
		width: 100% !important;
		height: auto;
		max-height: 100dvh;
		overflow-x: auto;
		padding-top: 0;
		transition: max-height 0.5s ease;
	}

	body.sidebar-collapsed header {
		max-height: 60px;
		overflow-y: hidden;
	}

	.icons {
		grid-template-rows: 56px !important;
		grid-auto-rows: 40px !important;
	}

	.main-nav {
		grid-template-rows: 56px !important;
		grid-auto-rows: 40px !important;
	}

	main {
		max-width: none;
		margin-top: 80px;
	}

	footer {
		margin: 0 !important;
	}

	.small-screen-hide {
		display: none;
	}
}