/*
Success animation:
https://codepen.io/sat4/pen/qKGJve
 */
.success-container {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 50px auto;
}

.success-message {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aae367;
	font-weight: 200;
	margin-left: 50px;
	font-size: 40pt;
}

.success-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #aae367;
	position: relative;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	animation: fadeIn 1.5s linear;
}

.success-checkmark::after {
	content: '';
	border-right: 2px solid #aae367;
	border-top: 2px solid #aae367;
	height: 100px;
	width: 30px;
	transform: scaleX(-1) rotate(135deg);
	animation: checkmark 1s ease;
	position: absolute;
	top: 115px;
	left: 55px;
	margin-top: -3px;
	transform-origin: left top;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	50% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	60% {
		height: 0;
		width: 30px;
		opacity: 1;
	}
	70% {
		height: 50px;
		width: 30px;
		opacity: 1;
	}
	80% {
		height: 100px;
		width: 30px;
		opacity: 1;
	}
	100% {
		height: 100px;
		width: 30px;
		opacity: 1;
	}
}