/*
*   Start of styles - Autosave.js Saving Notification
*/
.notification-container {
	--complete-RGB: 120, 169, 106;
	--complete-color: rgba(var(--complete-RGB), 1);

	position: fixed;
	background: white;
	padding: 2px 5px 2px;
	box-shadow: var(--twp-box-shadow);
	text-align: center;
	border-radius: 2px 2px 0 0;
	border-color: var(--twp-darkest-purple);
	min-width: 90px;
	bottom: 0;
	right: 10px;
	transform: translatey(100%);
	transition: 0.2s ease-in-out;
	transition-delay: 1s;
	z-index: 99999;
	will-change: transform;
}

.notification-container.saving_active,
.notification-container.saved_active {
	transform: translatey(0);
}

.saving,
.saved {
	position: relative;
	font-size: 17px;
	font-weight: bold;
	will-change: opacity;
}

.saved svg {
	height: 1em;
	width: 1em;
}

.saving {
	color: black;
	display: inline-block;
	position: absolute;
	opacity: 0;
	will-change: opacity;
}

.saved {
	color: var(--complete-color);
	display: inline-block;
	opacity: 1;
}

/*Currently Saving*/

.saving_active .saving {
	opacity: 1;
}

.saving_active .saved {
	opacity: 0;
}

/*
*   End of styles - Autosave.js Saving Notification
*/