html, body {
	overflow: hidden;
}

html {
	zoom: 100% !important;
}


.menu_bar {
	display: table;
	table-layout: fixed; /* for equal width */
}

	.menu_bar ul {
		display: table-row;
		padding: 0;
		list-style-type: none;
		display: flex;
		align-items: center;
	}

		.menu_bar ul li {
			display: table-cell;
			text-align: center;
			width: 60px;
			font-size: larger;
		}

			.menu_bar ul li a {
				font-size: 15pt;
				font-weight: bold;
				text-decoration: none;
			}

	.menu_bar a:link {
		color: #00FFFF;
	}

	.menu_bar a:visited {
		color: #00FFFF;
	}

	.menu_bar a:hover, .menu_bar a:focus {
		/* background-color: #4b4b3f; */
		color: #efea0a;
		font-size: 19pt;
		font-weight: normal;
		padding: 5px 10px 5px 10px;
	}

	.menu_bar a:active, .menu_bar a.active {
		color: red;
		font-size: 19pt;
		padding: 5px;
		box-shadow: 0 0 0 .42px white;
		border-radius: 3px;
	}

@media only screen and (max-device-width: 973px) { /* screen Mini mode */
	.menu_bar ul li a {
		font-size: 12pt;
	}

	.menu_bar a:active, .menu_bar a.active {
		background-color: #2E2E2A;
		font-size: 15pt;
		padding: 5px;
		box-shadow: 0 0 0 .5px white;
		border-radius: 3px;
	}

	.menu_bar ul {
		width: 100%;
	}


	@media all and (orientation:portrait) {
		.menu_bar ul li {
			width: 10%;
			max-width: 60px;
		}
		.menu_bar ul {
			padding-left: 5% !important; /* half of the cell size */
			padding-right: 5% !important;
		}


		.li-portrait-hidable {
			display: none !important;
		}
	}

	@media all and (orientation:landscape) {
		.menu_bar ul li {
			width: 8%;
			max-width: 60px;
		}
		.menu_bar ul {
			padding-left: 4% !important; /* half of the cell size */
			padding-right: 4% !important;
		}
	}
}


@media only screen and (min-device-width: 973px) { /* screen Norm mode */
	body {
		background-color: #7f7f7f;
		width: 100%;
		height: 100%;
	}

	.bottom_bar {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80px !important;
	}

	#norm_screen {
		--corner-size: 80px;
		position: absolute;
		top: 25px;
		left: 25px;
		width: calc(100% - 50px);
		height: calc(100% - 50px);
		clip-path: polygon( 0 var(--corner-size), var(--corner-size) 0, calc(100% - var(--corner-size)) 0, 100% var(--corner-size), 100% calc(100% - var(--corner-size)), calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, 0% calc(100% - var(--corner-size)), 0% var(--corner-size) );
		background-color: black;
	}

	.show_container {
		position: relative;
		left: 0;
		top: 80px !important;
		width: 100%;
		height: calc(100% - 80px * 2);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 250ms, opacity 400ms;
	}

	.show_frame {
		width: 100%;
		height: 100%;
		border: 0px;
		position: absolute;
	}
}


@media only screen and (max-device-width: 973px) { /* screen Mini mode */
	html, body {
		overflow: hidden;
		max-height: 100%;
	}

	body {
		margin: 0;
		padding: 0;
		background-color: black;
	}

	.bottom_bar {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 50px !important;
		background-color: black;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}

	.show_screen {
		width: 100%;
		height: 100%;
		display: none;  /* to start with, avoid pre-hide blinking */
	}

	iframe {
		overflow: scroll;
	}

	.resp-container {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%;
	}

	.resp-iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.scaleable-wrapper {
		padding: 0px;
		resize: both;
		position: relative;
		height: 768px;
	}

	.very-specific-design { /* use higher 1024 * 768 resolution as scaling perspective to assure clip as much iFrame content, then scale up some at its container, so it will not be too small */
		width: 1024px;
		height: 768px;
		padding: 0px;
		text-align: center;
		position: relative;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		-webkit-transform-origin: center center;
		transform-origin: center center;
	}

	.ui-resizable-se {
		width: 10px;
		height: 10px;
		background: orange;
		position: absolute;
		bottom: 0;
		right: 0;
		visibility: hidden;
	}

	.bigred {
		color: red;
		font-size: 5rem;
	}
}