/* ==========================================================================
   Remove Dialog Styles
   ========================================================================== */

.RemoveDialogContent {
	text-align: 			center;
	padding: 				0 20px;
}

.RemoveDialogTitle {
	font-family: 			var(--FontHeader);
	font-size: 				28px;
	font-weight: 			700;

	color: 					var(--ColorDarkGray);

	display: 				block;
	margin-bottom: 			15px;
}

.RemoveDialogMessage {
	font-family: 			var(--FontBody);
	font-size: 				18px;

	color: 					var(--ColorGray);

	line-height: 			1.4;

	margin: 				0 0 10px 0;
}

.RemoveDialogItemName {
	font-family: 			var(--FontHeader);
	font-size: 				20px;
	font-weight: 			600;

	color: 					var(--ColorPurple);

	margin: 				0;
}

.RemoveDialogDivider {
	height: 				8px;

	border: 				none;
	border-top: 			2px #D8D8D8 solid;
	border-bottom: 			2px #D8D8D8 solid;

	margin: 				25px 0;
}

.RemoveDialogButtons {
	justify-content: 		center;
	gap: 					15px;

	display: 				flex;
}

.RemoveDialogCancel {
	flex: 					1;
}

.RemoveDialogConfirm {
	flex: 					1;

	border: 				2px solid var(--ColorPurple);
}

.RemoveDialogConfirm:hover {
	border-color: 			var(--ColorPurpleDark);
}

.RemoveDialogConfirm:active {
	border-color: 			transparent;
}

@media (max-width: 600px) {

	.RemoveDialogButtons {
		flex-direction: 	column;
	}

	.RemoveDialogCancel,
	.RemoveDialogConfirm {
		width: 				100%;
	}

}