:root {
	/* Top panel variables */
	--top-panel-height: 64px;
	--top-panel-padding: 8px;
	--top-panel-bg-color: #fff;
}

/* Top panel styling */
.top-panel {
	grid-area: top-panel;
	box-sizing: border-box; 
	min-height: var(--top-panel-height);
	padding: 0 var(--top-panel-padding);
	background-color: var(--top-panel-bg-color);
	display: inline-grid;
	grid-template-columns: auto 1fr auto;
	grid-gap: var(--grid-gap);
	align-items: center;
	justify-items: end;
	width: 100%;
}

.main-logo {
	display: inline-grid;
	grid-auto-flow: column;
	height: 72px;
	align-items: center;
}

	.main-logo i.icon-mervis {
		background-image: url(../media/MervisM_BlueTransparent-42OWVB3G.svg);
		height: calc(2 * var(--line-height));
		width: calc(2 * var(--line-height));
		background-size: calc(2 * var(--line-height));
		background-repeat: no-repeat;
		background-position: center;
	}

    .main-logo h1 {
        margin: 0;
        line-height: 1.2;
        color: var(--primary-color);
        font-size: larger;
        font-weight: 500;
        font-family: var(--bs-body-font-family);
    }

.top-panel-buttons {
	display: flex;
	gap: 10px;
}

	.top-panel-buttons a.button {
		text-decoration: none !important;
		color: inherit;
	}