#levelslist_scene {
	z-index: 3;
	position: absolute;
	display: none;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.7); */
}
#levelslist_dialog {
	width: 90%;
	height: 95%;
	/* margin-bottom: 5%; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* border: 2px solid blue; */
}
#levelslist_access_text {
	font-size: calc( var( --min-axis-size ) * 0.05 );
}
#levelslist_level_buttons {
	/* width: calc( var( --min-axis-size ) * 0.85 ); */
	width: 100%;
	height: 100%;
	display: flex;
	/* display: none; */
	flex-direction: row;
	flex-wrap: wrap;

	justify-content: center;
	/* border: 2px solid red; */
	user-select: none;
	touch-action: pan-y;
	overflow-y: scroll;
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
}
#levelslist_level_buttons::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}
.levelslist_card {
	/* width: 100%;
	height: 100%; */
	display: flex;
	flex-direction: column;

	background-image: linear-gradient(to bottom, #226e99, #014966);
/* 	background-image: url( "../assets/ui/button_bg.png" );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated; */
	/* image-rendering: crisp-edges; */

	border-radius: 8%;
	width: calc( var( --min-axis-size ) * 0.25 );
	height: calc( var( --min-axis-size ) * 0.3 );
	margin-top: calc( var( --min-axis-size ) * 0.01 );
	margin-bottom: calc( var( --min-axis-size ) * 0.01 );
	margin-right: calc( var( --min-axis-size ) * 0.01 );
	margin-left: calc( var( --min-axis-size ) * 0.01 );
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgba(181, 225, 255, 0.623);
	cursor: pointer;
	box-sizing: border-box;
}
.levelslist_card_locked {
	background-image: linear-gradient(to bottom, #11496b, #0a3646) !important;
	border: calc( var( --min-axis-size ) * 0.005 ) solid rgba(82, 130, 161, 0.623) !important;
}
.levelslist_card_number {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: calc( var( --min-axis-size ) * 0.08 );
	margin-top: calc( var( --min-axis-size ) * 0.05 );
	color: white;
	/* background-image: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktc3Rhci1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPiA8cGF0aCBkPSJNMy42MTIgMTUuNDQzYy0uMzg2LjE5OC0uODI0LS4xNDktLjc0Ni0uNTkybC44My00LjczTC4xNzMgNi43NjVjLS4zMjktLjMxNC0uMTU4LS44ODguMjgzLS45NWw0Ljg5OC0uNjk2TDcuNTM4Ljc5MmMuMTk3LS4zOS43My0uMzkuOTI3IDBsMi4xODQgNC4zMjcgNC44OTguNjk2Yy40NDEuMDYyLjYxMi42MzYuMjgyLjk1bC0zLjUyMiAzLjM1Ni44MyA0LjczYy4wNzguNDQzLS4zNi43OS0uNzQ2LjU5Mkw4IDEzLjE4N2wtNC4zODkgMi4yNTZ6Ii8+IDwvc3ZnPgo=" ); */
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(255,255,255,0.15)" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>' );
	/* background-image: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktc3Rhci1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPiA8cGF0aCBkPSJNMy42MTIgMTUuNDQzYy0uMzg2LjE5OC0uODI0LS4xNDktLjc0Ni0uNTkybC44My00LjczTC4xNzMgNi43NjVjLS4zMjktLjMxNC0uMTU4LS44ODguMjgzLS45NWw0Ljg5OC0uNjk2TDcuNTM4Ljc5MmMuMTk3LS4zOS43My0uMzkuOTI3IDBsMi4xODQgNC4zMjcgNC44OTguNjk2Yy40NDEuMDYyLjYxMi42MzYuMjgyLjk1bC0zLjUyMiAzLjM1Ni44MyA0LjczYy4wNzguNDQzLS4zNi43OS0uNzQ2LjU5Mkw4IDEzLjE4N2wtNC4zODkgMi4yNTZ6Ii8+IDwvc3ZnPg==" ); */
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.levelslist_card_besttime {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc( var( --min-axis-size ) * 0.04 );
	height: calc( var( --min-axis-size ) * 0.15 );
	margin-bottom: calc( var( --min-axis-size ) * 0.02 );
	/* border: 2px solid green; */
	border-top: calc( var( --min-axis-size ) * 0.002 ) solid green;
	border-bottom: calc( var( --min-axis-size ) * 0.002 ) solid green;
	color: yellow;
	background-color: rgba(0, 0, 0, 0.22);
}
.levelslist_card_besttime_locked {
	border-top: calc( var( --min-axis-size ) * 0.002 ) solid #075972 !important;
	border-bottom: calc( var( --min-axis-size ) * 0.002 ) solid #075972 !important;
}
.levelslist_card_lockicon {
	background-image: url( 'data:image/svg+xml;utf8,<svg fill="gray" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path> </svg>'  );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: calc( var( --min-axis-size ) * 0.07 );
	height: calc( var( --min-axis-size ) * 0.05 );
}
.levelslist_closedcard {
	color: rgb(26, 77, 90);
	opacity: 0.9;
	cursor: not-allowed;
	/* border: calc( var( --min-axis-size ) * 0.005 ) solid rgba(27, 47, 61, 0.623) !important; */
}
#levelslist_back_button {
	width: calc( var( --min-axis-size ) * 0.3 ) !important;
	height: calc( var( --min-axis-size ) * 0.1 ) !important;
	/* border: 2px solid lime; */
}