.button_back {
	display: flex;
	height: 2em;
	width: 100px;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee4b;
	border-radius: 3px;
	letter-spacing: 1px;
	transition: all 0.2s linear;
	cursor: pointer;
	border: none;
	background: #ced4da;
	color: #000 !important;
}

.button_back > i {
	margin-right: 5px;
	margin-left: 5px;
	font-size: 20px;
	transition: all 0.4s ease-in;
}

.button_back:hover > i {
	color: #fff !important;
	font-size: 1.2em;
	transform: translateX(-5px);
}

.button_back:hover {
	box-shadow: 4px 4px 8px #0a94d2;
	transform: translateY(-2px);
	background: #0a94d2;
	color: #fff !important;
}

/* Button Add --------------------------------------------------------------------------- */

.button_add {
	display: flex;
	height: 2em;
	width: 130px;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee4b;
	border-radius: 3px;
	letter-spacing: 1px;
	transition: all 0.2s linear;
	cursor: pointer;
	border: none;
	background: #ced4da;
	color: #000 !important;
}

.button_add > i {
	margin-right: 5px;
	margin-left: 5px;
	font-size: 20px;
	transition: all 0.4s ease-in;
}

.button_add:hover > i {
	color: #fff !important;
	font-size: 1.2em;
	transform: translateX(5px);
}

.button_add:hover {
	box-shadow: -4px 4px 8px #0a94d2;
	transform: translateY(-2px);
	background: #0a94d2;
	color: #fff !important;
}

/* Button Edit --------------------------------------------------------------------------- */

.background-button {
	background: repeating-linear-gradient(
		45deg,
		#3c2209 0 20px,
		#0a94d2 20px 40px
	);
	width: 5em;
	height: 5em;
	position: relative;
	display: inline-block;
	outline: 2px solid black;
}

.background-button::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;
	background: #a0b8c4;
	border: 2px solid #3c2209;
}

.button {
	background: #43bbed;
	width: 65%;
	height: 56%;
	border-radius: 50%;
	position: absolute;
	top: 7.5%;
	left: 18.25%;
	color: white;
	font-size: 0.6em;
	font-weight: 900;
	font-family: "Courier New", Courier, monospace;
	-webkit-box-shadow: 0 15px 0 0 #0a3252;
	box-shadow: 0 15px 0 0 #0a3252;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 2px solid black;
}

.button:active {
	-webkit-box-shadow: 0 1px 1px 1px #0a3252;
	box-shadow: 0 1px 1px 1px #0a3252;
	top: 15%;
}

.background-button:has(.button:active) + .emergency {
	display: block;
	-webkit-transform: rotate(0deg) scaleY(1);
	-ms-transform: rotate(0deg) scaleY(1);
	transform: rotate(0deg) scaleY(1);
	-webkit-animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
	animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@-webkit-keyframes anims {
	0% {
		-webkit-transform: rotate(-30deg) scaleY(0.25);
		transform: rotate(-30deg) scaleY(0.25);
	}

	100% {
		-webkit-transform: rotate(0deg) scaleY(1);
		transform: rotate(0deg) scaleY(1);
	}
}

@keyframes anims {
	0% {
		-webkit-transform: rotate(-30deg) scaleY(0.25);
		transform: rotate(-30deg) scaleY(0.25);
	}

	100% {
		-webkit-transform: rotate(0deg) scaleY(1);
		transform: rotate(0deg) scaleY(1);
	}
}

.emergency {
	position: absolute;
	display: none;
}

/* hvr-underline-from-center ----------------------------------------*/

.hvr-underline-from-center {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}
.hvr-underline-from-center:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 51%;
	right: 51%;
	bottom: 0;
	background: #0a94d2;
	height: 2px;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before {
	left: 0;
	right: 0;
}