/* /common/assets/css/features/problem/action.css */

.main-content-outer {
	padding: 24px 20px 40px;
	display: flex;
	justify-content: center;
}

.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;
	width: 100%;
	max-width: 700px;
}

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

#action_text {
	font-size: 150%;
	text-align: center;
}

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

.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;
}

.performing-action-progress.is-running {
	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;
}

.hidden-action-visual.is-visible {
	animation: fadeIn 1s forwards;
}

.hide-action-visual-element {
	display: none;
}

.outcome-text {
	font-weight: 500;
	text-align: center;
}

.problem-action-error {
	margin-top: 8px;
	font-size: 0.95rem;
	color: #b00020;
	text-align: center;
}

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

@media (max-width: 720px) {
	.grid-perform-action {
		grid-template-columns: minmax(260px, 1fr);
		grid-template-rows: 280px 50px 50px minmax(80px, auto);
	}

	#action_visual {
		height: 280px;
	}

	.performing-action-progress-bar {
		width: 260px;
	}
}