/*More info and how to panel*/
.panelContainer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255,0.5);
	z-index: 10;
}

#howToPanelContainer {
	display: block;
}

#loadingPanelContainer {
	display: block;
	display: flex;
	justify-content: center;
}


#loadingPanelContainer img {
    position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.infoPanel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 10px);
	max-height: calc(100% - 10px);
	max-width: 500px;
	background-color: #ffffff;
	border-color: var(--main-key-color);
	border: solid 1px;
	border-radius: 4px;
	overflow-y: auto;
}

.infoPanelTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--secondary-key-color);
	margin-bottom: 5px;
	padding: 5px;
	padding-right: 0px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}


.infoPanelContent {
	padding-left: 10px;
	padding-right: 10px;
}

.infoPanelClose {
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}