* {
	box-sizing: border-box;
}

#modal {
	--backdrop-display: block;
	--backdrop-color: rgba(0, 0, 0, 0.3);
	--backdrop-position: absolute;
	--animation-delay: 300ms;
}

.wrapper {
	display: block;
	text-align: center;
	margin: 0 auto;
	background-color: #eee;
	padding: 5px;
	width: 90%;
	max-width: 600px;
	border-radius: 10px;
	transition: transform linear 300ms;
	transform: translate3d(0, -150%, 0);
}

.wrapper.active {
	transform: translate3d(0, 45%, 0);
}

.wrapper.hide {
	transform: translate3d(0, -150%, 0);
}

.title {
	padding: 10px 0;
}

.form {
	display: inline-block;
	text-align: right;
	margin: 10px 0;
}

.form div {
	margin: 10px 0;
}

.button-container {
	margin: 10px 0;
}

.complete {
	margin-right: 30px;
}