/* V0.1 --- 2022-12-02 --- */
/* V0.2 --- 2022-12-06 --- */
/* V0.3 --- 2022-12-07 --- */
/* V0.4 --- 2022-12-08 --- */
/* V0.5 --- 2022-12-30 --- */

/* V0.4 --- article ID - pseudo-classes --- */
span.article-id {
	background-color: var(--bs-primary);
	color: var(--bs-secondary);
	font-size: 1.25rem;
	font-weight: bold;
	padding: 2px 5px 2px 5px;
	border-radius: 0.5rem;
	margin: 4px;
}

/* V0.5 --- sidebar left - xxx --- */
/* Deaktiviere Marker*/
ul.custom li::marker {content: none;}
/* Abstand links für Submenus*/
.custom ul {padding-left: 1rem;}
/* Erste Ebene Sidebar Menu*/
ul.custom li a {color: red;}
ul.custom li a:hover {color: black;}
ul.custom li.active a {color: green;}
ul.custom li.active a:hover {color: blue;}
/* Zweite Ebene Sidebar Menu*/
ul.custom li li a {color: blue;}
ul.custom li li a:hover {color: blue;}
ul.custom li li.active a {color: blue;}
ul.custom li li.active a:hover {color: blue;}
/* Dritte Ebene Sidebar Menu*/
ul.custom li li li a {color: blue;}
ul.custom li li li a:hover {color: blue;}
ul.custom li li li.active a {color: green;}
ul.custom li li li.active a:hover {color: blue;}

/* V0.3 --- root - pseudo-classes --- */
:root {
	--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 */
}

/* V0.3 --- alert - xxx --- */
.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;
}
@media (min-width: 640px) {
	.alert {
		padding: 0.75rem 0.75rem 0.75rem 1rem !important;
	}
}
.alert-square, .alert-attachment, .alert-comment, .alert-danger, .alert-download, .alert-info, .alert-success, .alert-text, .alert-tip, .alert-video, .alert-warning {
	border-left-width: var(--bs-alerts-border-left-width-small) !important; /* 2rem */
}
@media (min-width: 640px) {
	.alert-square, .alert-attachment, .alert-comment, .alert-danger, .alert-download, .alert-info, .alert-success, .alert-text, .alert-tip, .alert-video, .alert-warning {
		border-left-width: var(--bs-alerts-border-left-width) !important; /* 4rem */
	}
}

/* V0.3 --- alert:before - xxx --- */
.alert-square:before, .alert-attachment:before, .alert-comment:before, .alert-danger:before, .alert-download:before, .alert-info:before, .alert-success:before, .alert-text:before, .alert-tip:before, .alert-video:before, .alert-warning:before {
	position: absolute;
	top: min(50%, calc(var(--bs-alerts-border-left-width-small)/2)); /* 50%, 1.25rem */
	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 */
	content: "";
	font-family: FontAwesome;
	color: rgba(255,255,255,0.9);
}
@media (min-width: 640px) {
.alert-square:before,.alert-attachment:before, .alert-comment:before, .alert-danger:before, .alert-download:before, .alert-info:before, .alert-success:before, .alert-text:before, .alert-tip:before, .alert-video:before, .alert-warning:before {
		top: min(calc(50% + 1 / 16 * 1rem), calc(var(--bs-alerts-border-left-width)/2)); /* 50%, 2rem */
		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 */
	}
}

/* V0.3 --- alert:before - content --- */
.alert-square:before {
	content: "\f0c8";
}
.alert-attachment:before {
	content: "\f0c6";
}
.alert-comment:before {
	content: "\f075";
}
.alert-danger:before {
	content: "\f071";
}
.alert-download:before {
	content: "\f019";
}
.alert-info:before {
	content: "\f05a";
}
.alert-success:before {
	content: "\f058";
}
.alert-text:before {
	content: "\f15c";
}
.alert-tip:before {
	content: "\f0eb";
}
.alert-video:before {
	content: "\f144";
}
.alert-warning:before {
	content: "\f071";
}

/* V0.3 --- alert - center icons --- */
.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))); /* -1.75rem */
}
.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))); /* -1.75rem */
}
.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))); /* -1.75rem */
}
.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))); /* -1.75rem */
}
@media (min-width: 640px) {
	.alert-square:before {
		left: calc(2 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width))); /* -3rem */
	}
	.alert-comment:before {
		left: calc(1 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width))); /* -3rem */
	}
	.alert-text:before {
		left: calc(4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width))); /* -3rem */
	}
	.alert-tip:before {
		left: calc(4 / 16 * 1rem - 0.5 * (var(--bs-alerts-font-size) + var(--bs-alerts-border-left-width))); /* -3rem */
	}
}

/* V0.5 --- alert - color --- */
.alert-square {
	color: var(--body-color);
	background-color: rgba(var(--bs-square-rgb), 0.25);
	border-color: rgb(var(--bs-square-rgb)) !important;
}
.alert-attachment {
	color: var(--body-color);
	background-color: rgba(var(--bs-attachment-rgb), 0.25);
	border-color: rgb(var(--bs-attachment-rgb)) !important;
}
.alert-comment {
	color: var(--body-color);
	background-color: rgba(var(--bs-comment-rgb), 0.25);
	border-color: rgb(var(--bs-comment-rgb)) !important;
}
.alert-danger {
	color: var(--body-color-rgb) !important;
	background-color: rgba(var(--bs-danger-rgb), 0.25) !important;
	border-color: rgb(var(--bs-danger-rgb)) !important;
}
.alert-download {
	color: var(--body-color);
	background-color: rgba(var(--bs-download-rgb), 0.25);
	border-color: rgb(var(--bs-download-rgb)) !important;
}
.alert-info {
	color: var(--body-color-rgb) !important;
	background-color: rgba(var(--bs-info-rgb), 0.25) !important;
	border-color: rgb(var(--bs-info-rgb)) !important;
}
.alert-success {
	color: var(--body-color-rgb) !important;
	background-color: rgba(var(--bs-success-rgb), 0.25) !important;
	border-color: rgb(var(--bs-success-rgb)) !important;
}
.alert-text {
	color: var(--body-color);
	background-color: rgba(var(--bs-text-rgb), 0.25);
	border-color: rgb(var(--bs-text-rgb)) !important;
}
.alert-tip {
	color: var(--body-color);
	background-color: rgba(var(--bs-tip-rgb), 0.25);
	border-color: rgb(var(--bs-tip-rgb)) !important;
}
.alert-video {
	color: var(--body-color);
	background-color: rgba(var(--bs-video-rgb), 0.25);
	border-color: rgb(var(--bs-video-rgb)) !important;
}
.alert-warning {
	color: var(--body-color-rgb) !important;
	background-color: rgba(var(--bs-warning-rgb), 0.25) !important;
	border-color: rgb(var(--bs-warning-rgb)) !important;
}
.alert ul li::marker {
	color: var(--body-color);
}

/* V0.2 --- alert - nested elements --- */
.alert p:last-child {
	margin-bottom: 0rem;
}
.alert ol:last-child,
.alert ul:last-child {
	margin-bottom: 0rem;
}

/* V0.0 --- CSS old --- */
ul.list-normal {
	background: yellow;
}
h5 {
	background: green;
}