.lockbox .inner {
	position: relative;
}

.lockbox .door-closed {
	background-image: url("../assets/imgs/lockbox-door.png");
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	height: 100%;
	aspect-ratio: 1624/1206;
	position: absolute;

	opacity: 0;
	pointer-events: none;
}

.lockbox.locked .door-closed {
	opacity: 1;
	pointer-events: all;
}

.lockbox .wheel {
	background-image: url("../assets/imgs/lockbox-wheel.png");
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	aspect-ratio: 1;
	width: 25%;
	position: absolute;
	top: 30%;
    left: 20%;
}

.lockbox .indicators {
	position: absolute;
	display: flex;
	width: 16%;
    top: 28.2%;
    left: 54%;
}

.lockbox .indicators .indicator {
	width: 33%;
	aspect-ratio: 1;
	background-image: url("../assets/imgs/lockbox-light-on.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.lockbox .indicators .indicator.off {
	background-image: url("../assets/imgs/lockbox-light-off.svg");
}

.lockbox .indicators .indicator.wrong {
	background-image: url("../assets/imgs/lockbox-light-wrong.svg");
}

.keypad {
	display: flex;
	flex-flow: row wrap;
	width: 18%;
    position: absolute;
    right: 28.5%;
    top: 35%;
}

.keypad button {
	width: 33%;
	aspect-ratio: 1/1;
	padding-top: calc(33% - 4px); /* Doesn't seem to want to work on my phone without this */
	padding-right: 0;
	border: none;
	background: transparent;
	border: 2px solid #666666;
	-webkit-transition : border 500ms ease-out;
	-moz-transition : border 500ms ease-out;
	-o-transition : border 500ms ease-out;
	transition : border 500ms ease-out;
}

.keypad button.active {
	border: 2px solid greenyellow;
}

/* I couldn't get it to work just specifying the background so that's why each one specifies background size and repeat */

.keypad button[data-value="1"] { background-image: url("../assets/imgs/lockbox-1.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="2"] { background-image: url("../assets/imgs/lockbox-2.png"); background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="3"] { background-image: url("../assets/imgs/lockbox-3.png"); background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="4"] { background-image: url("../assets/imgs/lockbox-4.png"); background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="5"] { background-image: url("../assets/imgs/lockbox-5.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="6"] { background-image: url("../assets/imgs/lockbox-6.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="7"] { background-image: url("../assets/imgs/lockbox-7.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="8"] { background-image: url("../assets/imgs/lockbox-8.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="9"] { background-image: url("../assets/imgs/lockbox-9.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="#"] { background-image: url("../assets/imgs/lockbox-hash.png"); background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="0"] { background-image: url("../assets/imgs/lockbox-0.png");	background-size: 100%; background-repeat: no-repeat; }
.keypad button[data-value="*"] { background-image: url("../assets/imgs/lockbox-asterisk.png"); background-size: 100%; background-repeat: no-repeat; }

.lockbox .lockbox-contents {
	background-image: url("../assets/imgs/lockbox-inside.png");
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	height: 100%;
	aspect-ratio: 1624/1206;
	position: absolute;
}

.lockbox.locked .lockbox-contents {
	opacity: 0;
	pointer-events: none;
}

.lockbox .lockbox-contents .open-door {
	background-image: url("../assets/imgs/lockbox-inside-door.png");
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	aspect-ratio: 1274/887;
	width: 79%;
    position: absolute;
    top: 13%;
    right: -66%;
}

.lockbox .lockbox-contents .note {
	background: url("../assets/imgs/lockbox-note.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
	height: 100%;
	aspect-ratio: 225/323;
	position:absolute;
	left: -15%;
}

.lockbox .lockbox-contents .puzzle {
	position: absolute;
	width: 50%;
	background: url("../assets/imgs/lockbox-puzzle.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
	aspect-ratio: 211/321;
	left: 25%;
    padding: 5%;
}

.lockbox .lockbox-contents .puzzle .inputs {
	position: absolute;
    width: 82.5%;
    bottom: 14.5%;
    left: 7%;
    aspect-ratio: 200/37;
}

.lockbox .lockbox-contents .puzzle .inputs input {
	border: none;
	position:absolute;
	height: 50%;
	aspect-ratio: 1;
	top: 25%;
	padding: 0;
    margin: 0;
	border-radius: 0;
	font-size: 1rem;
    text-align: center;
	min-width: 0px;
}

.inputs-1 { left: 4%; }
.inputs-2 { left: 14%; }
.inputs-3 { left: 28%; }
.inputs-4 { left: 38%; }
.inputs-5 { left: 52%; }
.inputs-6 { left: 62%; }
.inputs-7 { left: 76%; }
.inputs-8 { left: 86%; }