﻿
.TwoColumns_Container .SideContainer.RightContainer .Content:has(>[ml_pagecontrol_key=SETTINGS_Details] > *) {
	min-width: unset;
	width: min(35vw,1150px);
}

/*rendo il twin largo se ho i setting per far più spazio alla preview...ma solo se la preview è visibile */
.TwoColumns_Container .SideContainer .ContentTwin:has(>[ml_pagecontrol_wrapperkey=PREVIEW_SETTINGS_Details]:not([style*=none])) {
	width: min(65vw, calc(100vw - 10px));
}

[ml_pagecontrol_key=SETTINGS_Container] .Card_Container {
	/*fix necessario per il cambio dell'overflow y*/
	padding-top: 12px;
}

[ML_PageControl_Key=SETTINGS_Container] .Card .LawsInfo {
	top: -19px;
}

.LawsInfo {
	display: flex;
	flex-direction: row !important;
	gap: 0px !important;
	padding: 7px 0px;
	position: absolute;
	top: -13px;
	right: 6px;
	justify-content: flex-end;
	width: 100%;
	max-width: 301px;
	color: var(--text);
	container-type: inline-size;
	container-name: lawsinfo;
}

/*Per quelle dentro gli entityfield le sposto sotto per evitare il contrasto con la label in schermi piccoli/zommati*/
[ml_pagecontrol_key=EntityField_Container] > .LawsInfo {
	position: unset;
	justify-content: center;
	max-width: unset;
}

.LawsInfo .LawsInfo_Wrapper {
	display: flex;
	flex-direction: row !important;
	gap: 0px !important;
	position: relative;
}

.LawsInfo .LawInfo:not(:first-of-type) {
	margin-left: 5px;
}

.LawsInfo .LawInfo .LawInfo_Badge {
	display: flex;
	gap: 5px;
	align-items: center;
	padding-inline: 3px;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--content-color);
	height: 23px;
}

	.LawsInfo .LawInfo .LawInfo_Badge span {
		pointer-events: none;
	}

	.LawsInfo .LawInfo .LawInfo_Badge:has(.fa-shield-halved) {
		padding-inline: 5px;
	}

	.LawsInfo .LawInfo .LawInfo_Badge [ML_PageControl_Type=Icon] {
		right: unset;
		bottom: unset;
		font-size: 12px;
	}

.LawsInfo .LawInfo[ML_Status="02Warning"] .LawInfo_Badge [ML_PageControl_Type=Icon] {
	--fa-primary-color: var(--warning);
	--fa-secondary-color: var(--warning);
}

.LawsInfo .LawInfo[ML_Status="03Error"] .LawInfo_Badge [ML_PageControl_Type=Icon] {
	--fa-primary-color: var(--error);
	--fa-secondary-color: var(--error);
}

.LawsInfo .LawInfo:hover .LawInfo_Badge [ML_PageControl_Type=Icon] {
	transform: translateX(-14px) scale(13);
	transition: all 480ms;
}


.LawsInfo .LawsInfo_Tooltip {
	width: 0px;
	height: 0px;
}

	.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip {
		transform: translateX(-50%);
		position: absolute;
		top: 35px;
		left: 0px;
		background-color: var(--background-800);
		color: var(--text-50);
		padding: 6px 10px;
		border-radius: 8px;
		opacity: 0;
		visibility: hidden;
		transition: all 0.8s ease;
		width: fit-content;
		max-width: 100%;
		height: fit-content;
		z-index: 1;
	}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip:not(.TooltipBase) {
			max-width: 287px;
			width: 100%;
		}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip[ML_Status=Active] {
			opacity: 1;
			visibility: visible;
			transform: translateX(14px);
		}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip.TooltipBase[ML_Status=Active]:nth-child(2) {
			transform: translateX(81px);
		}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip.TooltipBase[ML_Status=Active]:nth-child(3) {
			transform: translateX(110px);
		}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip.TooltipBase[ML_Status=Active]:nth-last-child(2) {
			transform: translateX(160px);
		}

		.LawsInfo .LawsInfo_Tooltip .LawInfo_Tooltip.TooltipBase[ML_Status=Active]:last-child {
			transform: translateX(106px);
		}

@container lawsinfo (max-width: 300px) {
	.LawsInfo .LawInfo .LawInfo_Badge span:not([ML_PageControl_Type=Icon]) {
		display: none;
	}
}

.Card .LogoResourceContainer {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	height: 100%;
	min-height: 100px;
	justify-content: center;
	align-items: center;
}

.Card[ML_PageControl_WrapperKey=IconStyleSettings] .LogoResourceContainer svg,
.Card[ML_PageControl_WrapperKey=IconStyleSettings] .LogoResourceContainer img {
	height: 100px;
	width: 100px
}

.Card[ML_PageControl_WrapperKey=LocalizationsSettings] div:has(> img) {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: center;
}

.Card[ML_PageControl_WrapperKey=LocalizationsSettings] img {
	height: 45px;
	border-radius: 50%;
}

	.Card[ML_PageControl_WrapperKey=LocalizationsSettings] img[ML_Status=Disabled],
	[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_key=Flag].Disabled {
		filter: blur(2px) grayscale(0.8);
		opacity: 0.4;
	}

	.Card[ML_PageControl_WrapperKey=LocalizationsSettings] img[ML_Status=Default] {
		border: 3px solid var(--primary);
		border-radius: 8px;
	}


[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] {
	position: relative;
	overflow: hidden;
	padding: 10px !important;
}

	[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] [ml_pagecontrol_key=FORMTABLE_Container] img {
		position: absolute;
		top: 0;
		width: var(--flag-width);
		height: 100%;
		right: calc(100% - var(--flag-width) - 10px);
	}

	[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] [ml_pagecontrol_key=FORMTABLE_Container] {
		--flag-width: 60px;
		margin-left: calc(var(--flag-width) + 10px);
	}

		[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] [ml_pagecontrol_key=FORMTABLE_Container] > div:first-of-type {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: 20px;
			width: 100%;
			padding-left: 5px;
			margin-bottom: 5px
		}

		[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] [ml_pagecontrol_key=FORMTABLE_Container] > div .Language {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 5px;
		}

		[ML_PageControl_WrapperKey=LOCALIZATIONS_SETTINGS_Details] [ml_pagecontrol_type=CONTENT_CONTAINER] [ml_pagecontrol_key=FORMTABLE_Container] > div .Actions {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 7px;
			padding-inline: 7px;
		}

[ML_PageControl_WrapperKey=MAIN_SETTINGS_Details] div:has(> [ML_PageContainer_Type=EntityFields_ContainerGroup] [ML_PageControl_Type^=SEARCH]) {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 5px;
}

[ML_PageControl_WrapperKey=MAIN_SETTINGS_Details] [ML_PageContainer_Type=EntityFields_ContainerGroup] [ML_PageControl_Type^=SEARCH] {
	max-height: 360px;
	overflow: auto;
}
/*	Preview Sections */
[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] {
	--preview-aside-margin-bottom: 8px;
	--preview-aside-height: 36px;
	--preview-header-height: 59px;
	box-shadow: none;
	border-radius: 0;
	border-right-color: var(--text-300);
	border-right-width: 1px;
}

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] [ml_pagecontrol_type=HEADER] {
		height: var(--preview-header-height);
		border-bottom: 1px solid var(--border-color);
	}

		[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] [ml_pagecontrol_type=HEADER] .RightHeaderContainer {
			gap: 5px;
		}

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] [ml_pagecontrol_type=CONTENT] {
		position: relative;
		background-color: var(--background);
	}

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .AsideCommandContainer {
		display: flex;
		gap: 10px;
		justify-content: center;
		margin-bottom: var(--preview-aside-margin-bottom);
		max-height: var(--preview-aside-height);
	}

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .previewBackground {
		display: flex;
		justify-content: center;
		height: calc(100svh - var(--preview-header-height) - var(--preview-aside-height) - var(--preview-aside-margin-bottom));
		padding: 10px;
	}

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview {
		background-color: var(--background-200);
		width: 100%;
		border-radius: 5px;
		transition: width .5s ease;
		filter: drop-shadow(0px 0px 5px var(--background-400));
		overflow: hidden;
		--cookieman-modal-body-max-h: min(60svh, calc(100svh - var(--preview-header-height) - var(--preview-aside-height) - var(--preview-aside-margin-bottom) - 200px)) !important;
	}

		[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url("../../../Resources/Images/Settings/Mockup/Laptop_BG.svg");
			filter: saturate(0);
			background-size: cover;
			background-position: top;
		}

		[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview.cookiemanPreviewTablet {
			width: 768px;
		}

			[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview.cookiemanPreviewTablet::before {
				background-image: url("../../../Resources/Images/Settings/Mockup/Tablet_BG.svg");
			}

		[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview.cookiemanPreviewMobile {
			width: 375px;
		}

			[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] .cookiemanContainerPreview.cookiemanPreviewMobile::before {
				background-image: url("../../../Resources/Images/Settings/Mockup/Mobile_BG.svg");
			}

/* Da 900 in giù*/
@media only screen and (max-width: 900px) {

	[ML_PageControl_WrapperKey=PREVIEW_SETTINGS_Details] [ml_pagecontrol_type=HEADER] .RightHeaderContainer div[ML_PageControl_Type*=COMMAND] {
		padding: 16px 8px;
	}
}

[ML_PageControl_WrapperKey=MAIN_SETTINGS_Details] [ml_pagecontrol_key=FilteredVendors] > div {
	margin-block: 10px;
}
