﻿.Card[ml_pagecontrol_wrapperkey=INTEGRATED] .IntegratedCardHeader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-block: 10px;
}

.Button[ml_pagecontrol_key=Btn_StartIntegration],
.Button[ml_pagecontrol_key=Btn_StopInstallation],
.Button[ml_pagecontrol_key=Btn_InterruptIntegration] {
	transform: scale(1.25);
}

.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] .Card_Body {
	padding-top: 0;
	overflow: hidden;
}

	.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] .Card_Body .PreIntegrationContent {
		height: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 65px;
	}

		.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] .Card_Body .PreIntegrationContent .BodyContent {
			font-size: 13px;
			overflow: auto;
		}

		.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] .Card_Body .PreIntegrationContent .CommandContent {
			position: sticky;
			bottom: 0px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--content-color);
			height: 45px;
			margin-top: 10px;
		}

.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] [ml_pagecontrol_key=EntityField_Container] {
	border: 0;
	outline: 0;
	padding: 0;
	min-height: 0;
}

	.Card[ml_pagecontrol_wrapperkey=INFO_SERVICES] [ml_pagecontrol_key=EntityField_Container] ul {
		border: 0;
		outline: 0;
		padding: 0;
		min-height: 0;
	}

.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] .Card_Body {
	padding-top: 0;
	overflow: hidden;
}

	.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] .Card_Body .PreIntegrationContent {
		height: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 65px;
	}

		.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] .Card_Body .PreIntegrationContent .BodyContent {
			font-size: 13px;
			overflow: auto;
		}

		.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] .Card_Body .PreIntegrationContent[ML_PageControl_Key=WaitingForStats] .BodyContent {
			text-align: center;
			display: flex;
			flex-direction: column;
			gap: 5px;
			align-items: center;
			margin-inline: 20px;
		}

		.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] .Card_Body .PreIntegrationContent .CommandContent {
			position: sticky;
			bottom: 0px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--content-color);
			height: 45px;
			margin-top: 10px;
		}

.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] [ml_pagecontrol_key=EntityField_Container] {
	border: 0;
	outline: 0;
	padding: 0;
	min-height: 0;
}

	.Card[ml_pagecontrol_wrapperkey=PRE_INTEGRATION] [ml_pagecontrol_key=EntityField_Container] ul {
		border: 0;
		outline: 0;
		padding: 0;
		min-height: 0;
	}

.Card:is([ML_PageControl_WrapperKey*=INSTALLATION_IN_PROGRESS_],[ML_PageControl_WrapperKey*=AUTO_TUNING_]) .Card_Header::before {
	content: "\e62a";
	font-family: 'Font Awesome 6 Pro';
	position: absolute;
	right: 9px;
	font-size: 24px;
	font-weight: var(--fa-style, 900);
	top: 13px;
	color: inherit;
	-webkit-animation-name: fa-spin;
	animation-name: fa-spin;
	-webkit-animation-direction: var(--fa-animation-direction, normal);
	animation-direction: var(--fa-animation-direction, normal);
	-webkit-animation-duration: var(--fa-animation-duration, 1s);
	animation-duration: var(--fa-animation-duration, 1s);
	-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
	animation-timing-function: var(--fa-animation-timing, steps(8));
}


.ProgressBar {
	display: flex;
	width: 100%;
	height: 35px;
	align-content: center;
	align-items: center;
	border: 2px solid var(--border-color);
	border-radius: 65px;
	padding: 6px;
	--progress: 4%;
}

	.ProgressBar .Progress {
		background-color: var(--success);
		height: 100%;
		width: var(--progress);
		border-radius: inherit;
		transition: all 1s ease;
		transition-delay: 0.5s;
	}

.Card [ML_PageControl_Key=Btn_ResetInstallationCard] {
	position: absolute;
	top: 9px;
	right: 37px;
}

.Card_Container.Integration_Main_Card_Container {
	grid-template-columns: 1fr 280px;
	grid-template-rows: 430px 300px;
}


	.Card_Container.Integration_Main_Card_Container:has([ml_pagecontrol_wrapperkey=ACTIONS]) {
		grid-template-columns: 1fr;
	}

@media (max-width: 1250px) {
	.Card_Container.Integration_Main_Card_Container:has([ml_pagecontrol_wrapperkey=ACTIONS]) {
		grid-template-rows: auto;
	}
}


.Card_Container.Integration_Dash_Card_Container {
	--card-row: minmax(min(300px, 100%), 1fr);
}

[ml_pagecontrol_wrapperkey=GUIDE_GTM_Details] .IntegrationWarning {
	border-radius: 8px;
	background: rgba(255, 152, 0, .25);
	padding: 10px 20px;
	display: grid;
	grid-template-columns: 25px 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	width: 100%;
	word-wrap: break-word;
	max-width: 1150px;
}

[ml_pagecontrol_wrapperkey*=GUIDE_] .WizardContainer [ml_pagecontrol_key=FORMTABLE_Container] {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	[ml_pagecontrol_wrapperkey*=GUIDE_] .WizardContainer [ml_pagecontrol_key=FORMTABLE_Container] > span,
	[ml_pagecontrol_wrapperkey*=GUIDE_] .WizardContainer [ml_pagecontrol_key=FORMTABLE_Container] [ml_pagecontrol_key=ShowExtraSteps] > span {
		align-self: flex-start;
	}

[ml_pagecontrol_wrapperkey*=GUIDE_] .WizardContainer .GifGtmIntegration {
	/* width: 100%; */
	display: block;
	border: 2px solid var(--primary);
	border-radius: 8px;
	overflow: hidden;
	max-height: 300px;
	margin-block: 10px;
}

[ml_pagecontrol_wrapperkey*=GUIDE_] .WizardContainer .WizardSteps .WizardStep {
	cursor: pointer;
}
