/* Custom responsive Bootstrap alerts */
/* Benutzerdefinierte responsive Bootstrap Hinweise */
/* compatible with Joomla 5.3.0, Bootstrap v5.3.2, Joomlaplates Fago 2.3, Font Awesome v6.7.2 */

/* --- root - pseudo-classes --- */
:root {
	--bs-work-rgb: 204, 0, 0;
	--bs-done-rgb: 0, 128, 36;
	--bs-square-rgb: 192, 192, 192; /* silver */
	--bs-attachment-rgb: 77, 77, 77; 
	--bs-comment-rgb: 42, 127, 255;
	--bs-danger-rgb: 212, 0, 0 !important;
	--bs-download-rgb: 77, 77, 77; 
	--bs-info-rgb: 0, 68, 170 !important; 
	--bs-success-rgb: 0, 128, 0 !important;
	--bs-text-rgb: 55, 200, 113;
	--bs-tip-rgb: 255, 204, 0;
	--bs-video-rgb: 0, 128, 128;
	--bs-warning-rgb: 255, 153, 0 !important;
	--bs-alerts-font-size: 2rem; /* 2rem */
	--bs-alerts-font-size-small: 1.5rem; /* 1.5rem */
	--bs-alerts-border-left-width: 3rem; /* 4rem */
	--bs-alerts-border-left-width-small: 2rem; /* 2rem */
}

/* --- alert - xxx --- */
.alert[class*=custom-alert-] {
	border-radius: 0 !important; /*0.25rem*/
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	padding: 0.5rem 0.5rem 0.5rem 0.75rem !important;
	border-left-width: var(--bs-alerts-border-left-width-small) !important; /* 2rem */
}
@media (min-width: 640px) {
	/* .alert[class*=custom-alert-]  */
	.alert.custom-alert-attachment,
	.alert.custom-alert-comment,
	.alert.custom-alert-danger,
	.alert.custom-alert-download,
	.alert.custom-alert-info,
	.alert.custom-alert-square,
	.alert.custom-alert-success,
	.alert.custom-alert-text,
	.alert.custom-alert-tip,
	.alert.custom-alert-video,
	.alert.custom-alert-warning {
		padding: 0.75rem 0.75rem 0.75rem 1rem !important;
		border-left-width: var(--bs-alerts-border-left-width) !important; /* 4rem */
	}
}

/* --- alert:before - xxx --- */
[class*=custom-alert-]:before {
	position: absolute;
	top: min(50%, calc(var(--bs-alerts-border-left-width-small)/2));
	display: block;
	background-repeat: no-repeat;
	left: calc(-0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small))); /*-1.75rem*/
	margin-top: -0.5rem; /* -0.75rem */
	height: var(--bs-alerts-font-size-small); /* 1.5rem */
	width: var(--bs-alerts-font-size-small); /* 1.5rem */
	font-size: var(--bs-alerts-font-size-small); /* 1.5rem */
	font-weight: 900;
	content: "";
	font-family: "Font Awesome 7 Free"; /* "Font Awesome 6 Free" */
	color: rgba(255,255,255,0.9);
}
@media (min-width: 640px) {
	/* [class*=custom-alert-]:before */ 
	.custom-alert-attachment:before,
	.custom-alert-comment:before,
	.custom-alert-danger:before,
	.custom-alert-download:before,
	.custom-alert-info:before,
	.custom-alert-square:before,
	.custom-alert-success:before,
	.custom-alert-text:before,
	.custom-alert-tip:before,
	.custom-alert-video:before,
	.custom-alert-warning:before {
		top: min(calc(50% + 1 / 16 * 1rem), calc(var(--bs-alerts-border-left-width)/2));
		left: calc(-0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width))); /* -3rem */
		margin-top: -0.75rem; /* -1rem */
		height: var(--bs-alerts-font-size); /* 2rem */
		width: var(--bs-alerts-font-size); /* 2rem */
		font-size: var(--bs-alerts-font-size); /* 2rem */
		/* color: blue; */
	}
}

/* --- alert:before - content --- */
.custom-alert-work:before {
	content: "\f303";
}
.custom-alert-done:before {
	content: "\f164";
	font-weight: 400;
}
.custom-alert-square:before {
	content: "\f0c8";
}
.custom-alert-attachment:before {
	content: "\f0c6";
}
.custom-alert-comment:before {
	content: "\f075";
}
.custom-alert-danger:before {
	content: "\f071";
}
.custom-alert-download:before {
	content: "\f019";
}
.custom-alert-info:before {
	content: "\f05a";
}
.custom-alert-success:before {
	content: "\f058";
}
.custom-alert-text:before {
	content: "\f15c";
}
.custom-alert-tip:before {
	content: "\f0eb";
	font-weight: 400;
}
.custom-alert-video:before {
	content: "\f144";
}
.custom-alert-warning:before {
	content: "\f071";
}

/* --- alert - center icons --- */
.custom-alert-work:before {
	left: calc(3/4 * 2 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 0 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-done:before {
	left: calc(3/4 * 2 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 0 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-square:before {
	left: calc(3/4 * 2 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 0 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-attachment:before {
	left: calc(-0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 1 / 16 * 1rem); /*-1.75rem*/
}
.custom-alert-comment:before {
	left: calc(3/4 * 1 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) - 0.5 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-danger:before {
	left: calc(-0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) - 0.5 / 16 * 1rem); /*-1.75rem*/
}
.custom-alert-text:before {
	left: calc(3/4 * 4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 0 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-tip:before {
	left: calc(3/4 * 4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) + 0 / 16 * 1rem); /* -1.75rem */
}
.custom-alert-warning:before {
	left: calc(-0.5 * (var(--bs-alerts-font-size-small) + var(--bs-alerts-border-left-width-small)) - 0.5 / 16 * 1rem); /*-1.75rem*/
}

@media (min-width: 640px) {
	.custom-alert-square:before {
		left: calc(2 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) + 0 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-attachment:before {
		left: calc(-0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) + 2 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-comment:before {
		left: calc(1 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) - 0 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-danger:before {
		left: calc(-0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) - 0 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-text:before {
		left: calc(4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) + 0 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-tip:before {
		left: calc(4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) + 0 / 16 * 1rem); /* -3rem */
	}
	.custom-alert-warning:before {
		left: calc(-0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width)) - 0 / 16 * 1rem); /* -3rem */
	}
}

/* --- alert - color --- */
.custom-alert-work {
	color: var(--body-color);
	background-color: rgba(var(--bs-work-rgb), 0.1); /* rgba(var(--bs-work-rgb), 0.25) */
	/* border-color: rgb(var(--bs-work-rgb)) !important; */
}
.custom-alert-work:before {
	color: rgba(var(--bs-work-rgb), 1);
}
.custom-alert-done {
	color: var(--body-color);
	background-color: rgba(var(--bs-done-rgb), 0.15); /* rgba(var(--bs-done-rgb), 0.25) */
	/* border-color: rgb(var(--bs-done-rgb)) !important; */
}
.custom-alert-done:before {
	color: rgba(var(--bs-done-rgb), 1);
}
.custom-alert-square {
	color: var(--body-color);
	background-color: rgba(var(--bs-square-rgb), 0.25);
	border-color: rgb(var(--bs-square-rgb)) !important;
}
.custom-alert-attachment {
	color: var(--body-color);
	background-color: rgba(var(--bs-attachment-rgb), 0.25);
	border-color: rgb(var(--bs-attachment-rgb)) !important;
}
.custom-alert-comment {
	color: var(--body-color);
	background-color: rgba(var(--bs-comment-rgb), 0.25);
	border-color: rgb(var(--bs-comment-rgb)) !important;
}
.custom-alert-danger {
	color: var(--body-color) !important;
	background-color: rgba(var(--bs-danger-rgb), 0.25) !important;
	border-color: rgb(var(--bs-danger-rgb)) !important;
}
.custom-alert-download {
	color: var(--body-color);
	background-color: rgba(var(--bs-download-rgb), 0.25);
	border-color: rgb(var(--bs-download-rgb)) !important;
}
.custom-alert-info {
	color: var(--body-color) !important;
	background-color: rgba(var(--bs-info-rgb), 0.25) !important;
	border-color: rgb(var(--bs-info-rgb)) !important;
}
.custom-alert-success {
	color: var(--body-color) !important;
	background-color: rgba(var(--bs-success-rgb), 0.25) !important;
	border-color: rgb(var(--bs-success-rgb)) !important;
}
.custom-alert-text {
	color: var(--body-color);
	background-color: rgba(var(--bs-text-rgb), 0.25);
	border-color: rgb(var(--bs-text-rgb)) !important;
}
.custom-alert-tip {
	color: var(--body-color);
	background-color: rgba(var(--bs-tip-rgb), 0.25);
	border-color: rgb(var(--bs-tip-rgb)) !important;
}
.custom-alert-video {
	color: var(--body-color);
	background-color: rgba(var(--bs-video-rgb), 0.25);
	border-color: rgb(var(--bs-video-rgb)) !important;
}
.custom-alert-warning {
	color: var(--body-color) !important;
	background-color: rgba(var(--bs-warning-rgb), 0.25) !important;
	border-color: rgb(var(--bs-warning-rgb)) !important;
}
.alert[class*=custom-alert-] ul li::marker {
	color: var(--body-color);
}

/* --- alert - nested elements --- */
.alert[class*=custom-alert-] p:last-child {
	margin-bottom: 0rem;
}
.alert[class*=custom-alert-] ol:last-child,
.alert[class*=custom-alert-] ul:last-child {
	margin-bottom: 0rem;
}

/* --- alert - ul, ol --- */
.alert[class*=custom-alert-] ol,
.alert[class*=custom-alert-] ul {
	padding-left: 1.25rem;
}