A320-family/WebPanel/WebPanel2/css/mcdu.css

* {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-user-select: none;
	user-select: none;
}

html, body {
	overscroll-behavior-y: none;
	position: fixed;
	overflow: hidden;
}

body {
	width: calc(100vw - 2px);
	height: calc(100vh - 2px);
	margin-left: 1px;
	overflow: hidden;
	background-color: #000;
}

.mcdu {
	width: 100vw;
	height: calc(100vw / .6);
	max-height: 100vh;
	max-width: calc(100vh * .6);
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
}

.mcdu_case {
	display: block;
	width: 100%;
	height: auto;
}

.mcdu-glass {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}

.mcdu-glass--dust {
	display: none;
	position: absolute;
	top: 6%;
	left: 13%;
	width: 73.5%;
	opacity: 0.5;
	transform: scale(1, -1);
	filter: blur(0.1vh);
}

[data-used-universe="1"] .mcdu-glass--dust {
	display: inline-block;
}

.screen-img,
.screen-glow {
	position: absolute;
	top: 7.5%;
	left: 13.4%;
	width: 72.8%;
}

.screen-glow {
	display: none;
}

[data-used-universe="1"] .screen-glow {
	display: inline-block;
	filter: brightness(50) blur(0.2vh);
	opacity: 0.15;
}


.mcdu-fg {
	position: absolute;
	top: 0.3%;
	left: 0;
	width: 100%;
	height: 100%;
}

[data-button] {
	position: absolute;
}

[data-showbuttons="1"] [data-button] {
	background-color: red;
	opacity: 0.5;
}

.glassbutton {
	top: 6%;
	left: 13%;
	width: 73.5%;
	height: 40%
}

.skbutton {
	width: 7.7%;
	height: 3.3%;
	border-radius: 0.2vh;
}

.menubutton {
	width: 9.8%;
	height: 4%;
	border-radius: 0.2vh;
}

.numberbutton {
	width: 7.5%;
	padding-bottom: 7.5%;
	border-radius: 50%;
}

.alphabutton {
	width: 7.4%;
	padding-bottom: 7.4%;
	border-radius: 0.2vh;
}

.skbuttons-left .skbutton {
	left: 1.6%;
}

.skbuttons-right .skbutton {
	right: 2.1%;
}

.sk-1 {
	top: 12.3%;
}

.sk-2 {
	top: 17.34%;
}

.sk-3 {
	top: 22.4%;
}

.sk-4 {
	top: 27.4%;
}

.sk-5 {
	top: 32.5%;
}

.sk-6 {
	top: 37.6%;
}

.menu-row1 .menubutton {
	top: 48.2%;
}

.menu-row2 .menubutton {
	top: 53.04%;
}

.menu-row3 .menubutton {
	top: 57.9%;
}

.menu-row4 .menubutton {
	top: 62.8%;
}

.menu-row5 .menubutton {
	top: 67.6%;
}

.menu-col1 {
	left: 11.3%;
}

.menu-col2 {
	left: 23.2%;
}

.menu-col3 {
	left: 35.1%;
}

.menu-col4 {
	left: 47%;
}

.menu-col5 {
	left: 59%;
}

.menu-col6 {
	left: 70.95%;
}

.number-row1 .numberbutton {
	top: 73.9%;
}

.number-row2 .numberbutton {
	top: 79.6%;
}

.number-row3 .numberbutton {
	top: 85.3%;
}

.number-row4 .numberbutton {
	top: 91%;
}

.number-col1 {
	left: 11.5%;
}

.number-col2 {
	left: 21.1%;
}

.number-col3 {
	left: 30.6%;
}

.alphabutton-row1 .alphabutton {
	top: 59.5%;
}

.alphabutton-row2 .alphabutton {
	top: 65.8%;
}

.alphabutton-row3 .alphabutton {
	top: 72.1%;
}

.alphabutton-row4 .alphabutton {
	top: 78.4%;
}

.alphabutton-row5 .alphabutton {
	top: 84.8%;
}

.alphabutton-row6 .alphabutton {
	top: 91.1%;
}

.alphabutton-col1 {
	left: 40.6%;
}

.alphabutton-col2 {
	left: 50.7%;
}

.alphabutton-col3 {
	left: 60.7%;
}

.alphabutton-col4 {
	left: 70.7%;
}

.alphabutton-col5 {
	left: 80.7%;
}