DCSOlympus/client/public/stylesheets/layout/layout.css

/* Page style */
#map-container {
	height: 100%;
	min-width: 820px;
	width: 100%;
}

#toolbar-container {
	align-items: center;
	display: flex;
	left: 10px;
	position: absolute;
	top: 10px;
	z-index: 9999;
	column-gap: 10px;
}

#primary-toolbar {
	align-items: center;
	display: flex;
}

#command-mode-toolbar {
	align-items: center;
	display: flex;
}

#app-icon>.ol-select-options {
	width: fit-content;
}

#toolbar-summary {
	background-image: url("/images/icon-round.png");
	background-position: 20px 22px;
	background-repeat: no-repeat;
	background-size: 45px 45px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	text-indent: 60px;
}

#toolbar-summary {
	white-space: nowrap;
}

#connection-status-panel {
	bottom: 20px;
	font-size: 12px;
	position: absolute;
	right: 10px;
	width: 180px;
	z-index: 9999;
}

#server-status-panel {
	bottom: 20px;
	font-size: 12px;
	position: absolute;
	right: 200px;
	width: 300px;
	z-index: 9999;
}

#mouse-info-panel {
	bottom: 60px;
	display: flex;
	flex-direction: column;
	height: fit-content;
	position: absolute;
	right: 10px;
	row-gap: 10px;
	width: 180px;
	z-index: 9999;
}

#unit-control-panel {
	height: fit-content;
	left: 10px;
	position: absolute;
	top: 80px;
	width: 320px;
	z-index: 9999;
}

#unit-info-panel {
	bottom: 20px;
	font-size: 12px;
	left: 10px;
	position: absolute;
	width: fit-content;
	z-index: 9999;
	padding: 24px 30px;
}

#info-popup {
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 100px;
    left: 50%;
    translate: -50% 0%;
    z-index: 9999;
	display: flex;
	align-items: center;
}

#log-panel {
	position: absolute;
	right: 0px;
	top: 220px;
	width: 310px;
	height: fit-content;
	z-index: 9990;
	overflow: hidden;
	padding: 10px;
}