#panel-container {
	background: transparent;
	position: absolute;
	z-index: 5;
	margin: 0 auto;
	bottom: 0;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

#panel-body {
	width: auto;
	height: auto;
	box-sizing: border-box;
	padding: 5px;
	position: relative;
	background: var(--base-bg);
	display: inline-flex;
	border-radius: 12px;
	box-shadow:
				0 1px 1px rgba(0,0,0,0.08), 
				0 2px 2px rgba(0,0,0,0.12), 
				0 4px 4px rgba(0,0,0,0.16), 
				0 8px 8px rgba(0,0,0,0.20);
}

@media screen and (max-width: 550px) and (min-height: 505px) {
	#panel-container {
		display: inline-block;
		position: absolute;
		width: auto;
		height: auto;
		top: 50%;
		bottom: unset;
		left: 10px;
		transform: translateY(-50%);
	}

	#panel-body {
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
		bottom: unset;
		transform: scale(0.9);
		transition: transform var(--transition-speed);
	}
}

@media screen and (max-width: 550px) and (max-height: 504px) {
	#panel-container {
		display: inline-block;
		position: absolute;
		width: auto;
		height: auto;
		top: 50%;
		bottom: unset;
		left: 10px;
		transform: translateY(-50%);
	}

	#panel-body {
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
		bottom: unset;
		transform: scale(0.85);
		transition: transform var(--transition-speed);
	}
}

@media screen and (max-width: 550px) and (max-height: 475px) {
	#panel-container {
		display: inline-block;
		position: absolute;
		width: auto;
		height: auto;
		top: 50%;
		bottom: unset;
		left: 10px;
		transform: translateY(-50%);
	}

	#panel-body {
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
		bottom: unset;
		transform: scale(0.8);
		transition: transform var(--transition-speed);
	}
}

@media screen and (max-width: 550px) and (max-height: 450px) {
	#panel-container {
		display: inline-block;
		position: absolute;1
		width: auto;
		height: auto;
		top: 50%;
		bottom: unset;
		left: 10px;
		transform: translateY(-50%);
	}

	#panel-body {
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
		bottom: unset;
		transform: scale(0.75);
		transition: transform var(--transition-speed);
	}
}

@media screen and (max-height: 420px) {
	#panel-container {
		display: inline-block;
		position: absolute;1
		width: auto;
		height: auto;
		top: 50%;
		bottom: unset;
		left: 10px;
		transform: translateY(-50%);
	}

	#panel-body {
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
		bottom: unset;
		transform: scale(0);
		transition: transform var(--transition-speed);
	}
}
