body,
html {
	height: 100vh;
}

@keyframes jump {
	0% {
		transform: translate(-50%, -50%) scale(1.05, 0.95);
	}
	40% {
		transform: translate(-50%, -60%) scale(1, 1);
	}
	80% {
		transform: translate(-50%, -50%) scale(1.05, 0.95);
	}
	100% {
		transform: translate(-50%, -50%) scale(1.05, 0.95);
	}
}

@keyframes woof-one {
	0% {
		transform: scale(1.05, 0.95);
		opacity: 0;
	}
	20% {
		transform: scale(1, 1);
		opacity: 1;
	}
	40% {
		transform: scale(1.05, 0.95);
		opacity: 0;
	}
	100% {
		transform: scale(1.05, 0.95);
		opacity: 0;
	}
}

.box-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.clear-box {
	background: white;
	padding: 1rem;
	box-shadow: 0px 0px 11px #ccc;
	border-radius: 3px;
	border: none;
	width: 500px;
}

form.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 70px;
	height: 300px;
}

.field-wrapper .material-icons {
	position: absolute;
	margin-top: 1.1rem;
	font-size: 18px;
	color: var(--col-dark-2);
}

.field-wrapper {
	margin-bottom: 1rem;
	width: 50%;
}

.pug-container {
	width: 130px;
	height: 130px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	background: var(--col-primary);
	border-radius: 50%;
	margin-top: -80px;
	box-shadow: 0px 0px 11px #ccc;
	border: 2px solid var(--col-dark-2);
}

.pug-container img {
	width: 80%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: jump 0.6s ease-in-out infinite;
	animation-play-state: paused;
}

.pug-container:hover img.pug-pic,
.pug-container:hover p {
	animation-play-state: running;
}

img.pug-slogan {
	margin-top: -1.25rem;
	width: 160px;
}

/* p.woof-one,
p.woof-two {
	position: absolute;
	z-index: 10;
	opacity: 0.9;
}

p.woof-one {
	margin-left: 4.5rem;
	margin-top: 0rem;
	color: white;
	opacity: 0;
	transform: rotate(355deg);
	animation: woof-one 1.2s ease-in-out infinite 0.6s;
	animation-play-state: paused;
}

p.woof-two {
	margin-left: 4.5rem;
	margin-top: 9.8rem;
	color: white;
	opacity: 0;
	transform: rotate(6deg);
	animation: woof-one 1.2s ease-in-out infinite 1.6s;
	animation-play-state: paused;
} */

.edit_control_attention {
	color: var(--col-primary);
	font-weight: 500;
}

.edit_control_attention i {
	font-size: 18px;
}