﻿
[ML_PageControl_Type=JOURNAL_Container_External] {
	background-color: var(--background-color-container-form);
	border: 1px solid var(--border-color-container);
	margin-bottom: 10px;
}




[ML_PageControl_Type=JOURNAL_Delta_ExternalContainer] {
	display: flex;
	column-gap: 10px;
}


[ML_PageControl_Type=JOURNAL_DeltaContainer] {
	border: 1px solid var(--border-color-container);
	margin: 10px;
	display: flex;
	flex-direction: column;
	height: fit-content;
}

	[ML_PageControl_Type=JOURNAL_DeltaContainer] [ML_PageControl_Key=Property_Title] {
		background-color: var(--background-color-container-active-header);
		border-bottom: solid 1px var(--border-color-container);
		width: 100%;
		padding: 5px 10px;
	}


	[ML_PageControl_Type=JOURNAL_DeltaContainer] span[ML_PageControl_Key=Property_Name] {
		font-weight: bold;
	}

	[ML_PageControl_Type=JOURNAL_DeltaContainer] div[ML_PageControl_Key=Property_State] {
		display: flex;
		align-items: center;
		border: 1px dotted transparent;
		border-radius: 6px;
		margin: 3px 7px;
		padding: 4px 7px;
		width: fit-content;
	}

		[ML_PageControl_Type=JOURNAL_DeltaContainer] div[ML_PageControl_Key=Property_State][ML_PageControl_SubKey=Removed] {
			background-color: rgb(223 19 19 / 34%);
		}

		[ML_PageControl_Type=JOURNAL_DeltaContainer] div[ML_PageControl_Key=Property_State][ML_PageControl_SubKey=Added] {
			background-color: rgb(10 187 17 / 34%);
		}

		[ML_PageControl_Type=JOURNAL_DeltaContainer] div[ML_PageControl_Key=Property_State]:hover {
			background-color: var(--background-color-container-generic);
			border-color: var(--label-color-submain);
		}



[ML_PageControl_Type=JOURNAL_Container_User_External] {
	background-color: var(--background-color-container-active-header);
	border-bottom: solid 1px var(--border-color-container);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

[ML_PageControl_Key=JOURNAL_Container_User_Info] {
	margin: 5px;
}

[ML_PageControl_Key=Avatar] {
	width: 84px;
	height: 84px;
}

	[ML_PageControl_Key=Avatar] > img[ML_PageControl_Key=AvatarImage] {
		width: 80px;
		height: 80px;
		object-fit: cover;
		border: 2px solid white;
		border-radius: 5px;
		margin-top: 1px;
		margin-left: 1px;
	}

span[ML_PageControl_Attributes*=Scrollable] {
	display: block;
	max-height: 53px;
	overflow-y: auto;
}
