/* Main infobox styles */
[class^="infobox-"],
[class*=" infobox-"] {

	--infobox-color-dark:  #4a4a4a;
	--infobox-color-base:  #808080;
	--infobox-color-light: #bababa;

	position: relative;

	margin: 0.25em 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 1em 0.5em 3em;


	border: 2px solid var(--infobox-color-base);
	background-color: var(--infobox-color-light);
	border-radius: 4px;

	color: var(--infobox-color-dark);
	text-align: left;

	box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2);

}
[class^="infobox-"]::before,
[class*=" infobox-"]::before {

	position: absolute;
	top:    0;
	left:   0;
	bottom: 0;

	content: '\ea0c'; /*icon-info*/
	font-family: icomoon !important;
	color: var(--infobox-color-dark);
    font-size: 1.5em;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 2em;

}
[class^="infobox-"] a,
[class*=" infobox-"] a {
	color: var(--infobox-color-base) !important;
	/* filter: drop-shadow(1px 1px 0 var(--infobox-color-dark)); */
	border-bottom: 1px dashed var(--infobox-color-base);
}
[class^="infobox-"] a:hover,
[class*=" infobox-"] a:hover {
	color: white !important;
	filter: drop-shadow(1px 1px 0 var(--infobox-color-base));
	border-bottom: 1px dashed white;
	text-decoration: none !important;
}

/* Dark mode colors */
.dark_mode [class^="infobox-"],
.dark_mode [class*=" infobox-"] {
	border-color: var(--infobox-color-base);
	background-color: var(--infobox-color-dark);
	color: var(--infobox-color-light);
}
.dark_mode [class^="infobox-"]::before,
.dark_mode [class*=" infobox-"]::before {
	color: var(--infobox-color-light);
}

/* Removes initial and final margins of elements inside infoboxes */
[class^="infobox-"] > *:first-child,
[class*=" infobox-"] > *:first-child {
	margin-top: 0;
}
[class^="infobox-"] > *:last-child,
[class*=" infobox-"] > *:last-child {
	margin-bottom: 0;
}

.infobox-warning {
	--infobox-color-dark:  hsl(48 95% 25%);
	--infobox-color-base:  hsl(48 95% 50%);
	--infobox-color-light: hsl(48 95% 75%);
}
.infobox-warning::before {
	content: '\e926'; /* icon-warning */
}

.infobox-info {
	--infobox-color-dark:  hsl(210 60% 25%);
	--infobox-color-base:  hsl(210 60% 50%);
	--infobox-color-light: hsl(210 60% 75%);
}
.infobox-info::before {
	content: '\ea0c'; /* icon-info */
}

.infobox-download {
	--infobox-color-dark:  hsl(25 80% 25%);
	--infobox-color-base:  hsl(25 80% 50%);
	--infobox-color-light: hsl(25 80% 75%);
}
.infobox-download::before {
	content: '\e906'; /* icon-download */
}

.infobox-download2 {
	--infobox-color-dark:  hsl(65 60% 25%);
	--infobox-color-base:  hsl(65 60% 50%);
	--infobox-color-light: hsl(65 60% 75%);
}
.infobox-download2::before {
	content: '\e906'; /* icon-download */
}

.infobox-important {
	--infobox-color-dark:  hsl(13 85% 25%);
	--infobox-color-base:  hsl(13 85% 50%);
	--infobox-color-light: hsl(13 85% 75%);
}
.infobox-important::before {
	content: '\e935'; /* icon-important */
}

.infobox-note {
	--infobox-color-dark:  hsl(38 30% 25%);
	--infobox-color-base:  hsl(38 30% 50%);
	--infobox-color-light: hsl(38 30% 75%);
}
.infobox-note::before {
	content: '\e936'; /* icon-asterisk */
}

.infobox-source {
	--infobox-color-dark:  hsl(64 18% 25%);
	--infobox-color-base:  hsl(64 18% 50%);
	--infobox-color-light: hsl(64 18% 75%);
}
.infobox-source::before {
	content: '\ea7d'; /* icon-external */
}

.infobox-new {
	--infobox-color-dark:  hsl(32 94% 25%);
	--infobox-color-base:  hsl(32 94% 50%);
	--infobox-color-light: hsl(32 94% 75%);
}
.infobox-new::before {
	content: '\e923'; /* icon-new */
}

.infobox-email {
	--infobox-color-dark:  hsl(303 50% 25%);
	--infobox-color-base:  hsl(303 50% 50%);
	--infobox-color-light: hsl(303 50% 75%);
}
.infobox-email::before {
	content: '\e901'; /* icon-email */
}

.infobox-test {
	--infobox-color-dark:  hsl(112 50% 25%);
	--infobox-color-base:  hsl(112 50% 50%);
	--infobox-color-light: hsl(112 50% 75%);
}
.infobox-test::before {
	content: '\e976'; /* icon-test */
}