/*-----------------------------
		 ATTACHMENT 
-----------------------------*/

.AttachmentTypes {
	display: flex;
	flex-direction: column;
}

	.AttachmentTypes .AttachmentTypes__AttachmentType {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 10px 0;
		padding: 20px;
		border-radius: 5px;
		border: 1px solid var(--bg-dark);
		border-left: 5px solid var(--bg-dark);
	}

		.AttachmentTypes .AttachmentTypes__AttachmentType > :first-child {
			display: flex;
			gap: 10px;
			align-items: center;
			font-size: larger;
			color: var(--primary);
			font-weight: bolder;
		}

		.AttachmentTypes .AttachmentTypes__AttachmentType .AttachmentTypes__AttachmentType__Attachments {
			column-width: 400px;
		}

.Attachment {
	break-inside: avoid;
	overflow: hidden;
}

	.Attachment.Attachment--Replaced {
		--attachment-status-bg: var(--fg-dark);
		--attachment-status-fg: var(--bg-light);
	}

	.Attachment.Attachment--Expiring {
		--attachment-status-bg: var(--warning-dark);
		--attachment-status-fg: var(--bg-light);
	}

	.Attachment.Attachment--Expired {
		--attachment-status-bg: var(--error-dark);
		--attachment-status-fg: var(--bg-light);
	}

	.Attachment .Attachment__Section {
		display: flex;
		flex-direction: column;
		padding: 20px 20px 35px;
		border-radius: calc(var(--border-radius) * 3);
		--contact-background-color: var(--bg-light);
		--contact-fg: var(--fg);
		background: var(--contact-background-color);
		border: 1px solid var(--bg-dark);
		color: var(--contact-fg);
	}

		.Attachment .Attachment__Section:not(:first-child) {
			margin-top: -20px;
		}

		.Attachment .Attachment__Section.Attachment__Section--Main {
			flex-direction: row;
			gap: 20px;
			--contact-background-color: var(--attachment-status-bg,var(--secondary-light));
			--contact-fg: var(--attachment-status-fg,var(--primary));
			align-items: center;
		}

			.Attachment .Attachment__Section.Attachment__Section--Main > div {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

				.Attachment .Attachment__Section.Attachment__Section--Main > div:first-child {
					font-size: xx-large;
				}

			.Attachment .Attachment__Section.Attachment__Section--Main [ml_pagecontrol_mappedentityfield] {
				font-weight: bold;
				font-size: 16px;
			}

		.Attachment .Attachment__Section.Attachment__Section--Footer {
			flex-direction: row-reverse;
			align-items: center;
			gap: 5px;
			padding: 20px;
			--secondary: var(--bg-dark);
		}

			.Attachment .Attachment__Section.Attachment__Section--Footer :last-child {
				margin-right: auto;
			}

		.Attachment .Attachment__Section .Attachment__Section__Title {
			font-size: 11px;
			text-transform: uppercase;
			color: var(--primary);
			font-weight: bold;
			width: 100%;
			margin: 2px 0;
		}







[ML_PageControl_Key=AttachmentTypeContainer] span {
	font-size: 20px !important;
	font-weight: bold;
}

	[ML_PageControl_Key=AttachmentTypeContainer] span[ML_PageControl_Type=Icon] {
		width: 30px !important;
	}

div[ML_PageControl_Type=ATTACHMENT_Container_External] {
	display: flex;
	padding: 2px;
	flex-direction: column;
}

	div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Info_Container] {
		background-color: lightgrey;
		padding: 2px 5px;
	}

		div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Info_Container] div[ML_PageControl_Key=FullName] span {
			font-size: 16px;
			font-weight: bold;
		}

	div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Container] {
		padding: 2px;
	}

		div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Container] div[ML_PageControl_Key=Avatar] img {
			width: 50px;
		}

	div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Command_Container] {
		padding-left: 2px;
		display: inline-flex;
	}

		div[ML_PageControl_Type=ATTACHMENT_Container_External] div[ML_PageControl_Type=ATTACHMENT_Command_Container] div:hover {
			display: inline-flex;
			background-color: lightgrey;
		}












div[ML_PageControl_Type=AttachmentTypesContainer] div[ML_PageControl_Key=AttachmentTypeContainer][ML_Status=Selected] {
	background-color: var(--main-color-contrast-high);
}

div[ML_PageControl_Type=AttachmentTypesContainer] div[ML_PageControl_Key=AttachmentTypeContainer] span {
	font-size: 11px !important;
}

div[ML_PageControl_Type=AttachmentTypesContainer][IdsAttachmentType*="1"] div[ML_PageControl_Key=AttachmentTypeContainer][IdAttachmentType="1"] {
	display: inline-block;
}

div[ML_PageControl_Type=AttachmentTypesContainer][IdsAttachmentType*="2"] div[ML_PageControl_Key=AttachmentTypeContainer][IdAttachmentType="2"] {
	display: inline-block;
}

div[ML_PageControl_Type=AttachmentTypesContainer][IdsAttachmentType*="3"] div[ML_PageControl_Key=AttachmentTypeContainer][IdAttachmentType="3"] {
	display: inline-block;
}

div[ML_PageControl_Type=AttachmentTypesContainer][IdsAttachmentType*="4"] div[ML_PageControl_Key=AttachmentTypeContainer][IdAttachmentType="4"] {
	display: inline-block;
}