/* ------------------------------- HEADER BAR ------------------------------- */
.header-bar {
	display: grid;
	grid-template-columns: auto auto;
}
/* -------------------------------------------------------------------------- */

/* -------------------------- HEADER BAR LEFT SIDE -------------------------- */
.header-bar-left {
}

/* Sidebar collapse button */
.menu {
	display: grid;
	place-content: center;

	position: absolute;
	left: -10px;
	top: 16px;

	background-color: var(--panel-color);
	border: solid 0.5px var(--border-color);
	border-radius: 50%;
	cursor: pointer;

	width: 20px;
	height: 20px;
}
.menu i {
	color: var(--tc-primary);
	font-size: 14px;
}

/* Tablet size */
@media screen and (max-width: 768px) {
	div.header-bar-left {
		display: none;
	}
}

/* Large phone size */
@media screen and (max-width: 425px) {
	#main div.header-bar {
		height: 112px;
	}
}
/* -------------------------------------------------------------------------- */

/* -------------------------- HEADER BAR RIGHT SIDE ------------------------- */
.header-bar-right {
	flex-wrap: wrap;
}
/* -------------------------------------------------------------------------- */