/* =========================== */
/* ========== TOAST ========== */
/* =========================== */

#simToast-container {
	position: fixed;
	top: 30px;
	right: 20px;
	z-index:30;
}
.simToast {
	position: relative;
	background: #fff;
	width: 300px;
	height: 63px;
	z-index:40;
	padding: 10px;
	margin-top: 10px;
	overflow: hidden;
	border-radius: 4px;
}
.simToast-content {
	display: grid;
	grid-template-columns: 30px 1fr;
	grid-template-rows: minmax(14px, auto) minmax(14px, auto);
	grid-gap: 5px;
	grid-template-areas:
		"st-icon st-acti"
		"st-icon st-name"
}
.st-icon {
	grid-area: st-icon;
	text-align: center;
	margin: auto;
	color: #3498DB;
}
.st-acti {
	grid-area: st-acti;
	font-size: 80%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 700;
}
.st-name {
	grid-area: st-name;
	font-size: 80%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}	
.simToast::before {
	position: absolute;
	content: "";
	height: 3px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	animation: progress 5s linear forwards;
	background: #3498DB;
}
@keyframes progress {
	100% {
		width: 0%;
	}
}

/* ================================= */
/* ========== PAGE ACTION ========== */
/* ================================= */

.performing-action-progress-bar {
	width: 300px;
	height: 20px;
	border-radius: 10px;
	background-color: #ddd;
	overflow: hidden;
}

.performing-action-progress {
	width: 0%;
	height: 100%;
	background: linear-gradient(to left, #4a90e2, #0d68b8);
	border-radius: 10px;
	animation: performingActionProgressAnimation 6s linear forwards;
}

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

.hidden-action-visual {
	opacity: 0;
	animation: fadeIn 1s forwards;
	animation-delay: 6s;
}

.responsive-action-visual-image {
	max-height: 100%;
	max-width: 100%;
}

.grid-perform-action {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: minmax(400px, 600px);
	grid-template-rows: 400px 50px 50px minmax(80px, auto);
	justify-items: center;
	align-items: center;
}

#action_visual {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400px;
}

.hide-action-visual-element {
	display: none;
}
.outcome-text {
	font-weight: 500;
	text-align: center;
}

#delayProceedButton, #delayContentOne, #delayContentTwo, #delayContentThree { display: none; }

/* ================================== */
/* ========== PAGE TIMESUP ========== */
/* ================================== */

.grid-timesup {
	display: grid;
	grid-gap: 4em;
	grid-template-columns: minmax(400px, 600px);
	grid-template-rows: 300px minmax(60px, auto);
	justify-items: center;
	align-items: center;
}
.grid-timesup > div:nth-child(2) { text-align: center; }

.timesup-box-style {
	padding: 2em;
	background: var(--main-background-box);
	border-radius: var(--main-border-radius-canvas-box);
}

.timesup-progress-bar {
	width: 300px;
	height: 20px;
	border-radius: 10px;
	background-color: #ddd;
	overflow: hidden;
}

.timesup-progress {
	width: 0%;
	height: 100%;
	background: linear-gradient(to left, #4a90e2, #0d68b8);
	border-radius: 10px;
	animation: timesupProgressAnimation 5s linear forwards;
}

@keyframes timesupProgressAnimation {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}