* {
	padding: 0;
	margin: 0;

	--bg-dark: #286777;
	--bg-white: #ffffff;

	--fc-dark: #302f2e;
	--fc-white: #ffffff;
	--fc-not-selected: #6d6d6d;

	--c-divider: #f4f4f4;
}

html {
	height: 100%;
}

body {
	min-height: 100%
}

/* MAIN GRID*/

/*grid container*/
.gridcontainer-page {
	height: 100vh;

	display: grid;
	grid-template: "header header"
	"sidebar content";
	grid-template-columns: minmax(200px, 1fr) 4fr;
	grid-template-rows: 50px minmax(500px, 1fr);
	grid-gap: 0px 1px;

	background: var(--c-divider);
	
}

/*grid elements*/
.page-header {
	grid-area: header;
	background: var(--bg-dark);
	color: var(--fc-white);
	/*padding: 50px;*/
}

.page-sidebar {
	grid-area: sidebar;
	background: var(--bg-white);
	color: var(--fc-dark);
	/*padding: 50px;*/
}

.page-content {
	grid-area: content;
	background: var(--bg-white);
	color: var(--fc-dark);
	
	padding: 50px;
}

/*
.page-footer {
	grid-area: footer;
	background: var(--bg-white);
	color: var(--fc-dark);

	font-size: 12px;
	padding: 20px;
}
*/


/*HEADER*/


/*header flex container*/
.flexcontainer-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	justify-content: space-around; /*Boxen mit Rand ausrichten*/
	align-items: center; /*Boxen vertikal mittig*/

}

/*DEBUG*/
.flexcontainer-header > div {
	border-left: 1px solid white;
	border-right: 1px solid white;
}

/*header flex items*/

.header-logo {
	order: 1;
	flex-grow: 0;
	flex-shrink: 0;

	padding: 15px;
}

.header-spacer {
	order: 2;
	flex-grow: 1;
	flex-shrink: 1;
}
/*
.header-search {
	order: 3;
	flex-grow: 0;
	flex-shrink: 0;

	padding: 15px;
}
*/

.header-upload {
	order: 3;
	flex-grow: 0;
	flex-shrink: 0;

	padding: 15px;
}

.header-labelling {
	order: 4;
	flex-grow: 0;
	flex-shrink: 0;

	padding: 15px;
}

.header-user-dropdown {
	order: 5;
	flex-grow: 0;
	flex-shrink: 0;

	padding: 15px;
}


/*SIDEBAR*/

/*sidebar flex container*/
.flexcontainer-sidebar {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	/*align-content: center;*/ /*Boxen mit Platz anordnen*/
	align-items: stretch; /*Von links nach rechts füllend*/
	justify-content: space-between;

	height: 100%; /*Volle vert. länge einnehmen*/
}

/*DEBUG*/
.flexcontainer-sidebar > div {
	border: 1px solid black;
}

/*sidebar flex items*/
.elem_sidebar {
	flex-grow: 0;
	flex-shrink: 0;
	
	font-size: 18px;
	padding: 20px;
	color: var(--fc-not-selected);

}

.sidebar-growing-spacer {
	flex-grow: 1;
	flex-shrink: 1;
	padding: 10px;
}

.sidebar-small-spacer {
	padding: 5px;
}



/*sidebar buttons*/
.sidebar-button {

	/*color: white;*/
	background-color: var(--bg-white);
	color: var(--fc-dark);
	font-size: 20px;

	text-decoration: none;
	padding: 15px;
	text-align: center;
}

.sidebar-button:hover {
	background-color: var(--bg-dark);
	color: var(--fc-white);
}