:root {
    --app-header-offset: 50px /* 50px header (+ 24px status bar ??) */
}
html.dev{
	--app-header-offset: 50px
}
html.emulate-statusbar body{
	border-top: 24px solid #000;
	--app-header-offset: 74px
}

header .toggle-panel{
	margin: 0;
}

header .dropdown ul.floor-list{
	top: 50px;
	width: 140px;
	max-height: calc(100vh - var(--app-header-offset));
	overflow: auto;
}

.map-controls button{
	line-height: 54px;
}

.sidepanel{
	width: 338px;
	left: -338px;
}
.sidepanel.active{
	left: 0;
}

.sidepanel button.toggle-panel,
.sidepanel-tabs{
	right: -45px;
}

@media (min-width: 1024px){
	.sidepanel button.toggle-panel{
		top: 50px !important;
	}
	.sidepanel-tabs{
		top: 90px !important;
	}
}

@media (max-width: 1023px){
	header div.logo{
		padding-left: 12px;
	}
	header div.logo .user{
		margin-left: 4px;
	}
	header .buttons button, header .buttons .dropdown{
		padding:0 10px;
	}
	header .buttons button.btn-tweak{
		width: 90px !important;
	}
	header .buttons button i, header .buttons .dropdown i{
		right: 0;
	}
	
	header .buttons button.btn-sync, header .buttons .dropdown.btn-sync{
		width: 130px !important;
	}
	
	.sidepanel-tabs{
		top: 34px;
	}
	.sidepanel button.toggle-panel{
		height: 32px;
		top: 2px !important;
	}
	.sidepanel-tabs button{
		height: 30px;
	}
	.sidepanel{
		height: calc(100vh - var(--app-header-offset));
	}
	button[disabled]{
		opacity: 0.45 !important;
	}
}