.resultbox {
	--pad: 10px;
	padding: var(--pad);
        display: flex;
        width: 100%;
        background-color: #d2d2d2;
	border-style: solid;
	border-width: 1px;
}
.resultbox > div:first-child {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: 25px;
        color: #4a4a4a;
	display: flex;
	justify-content: center;
	align-items: center;
}
.resultbox.warn {
        background-color: #ffe9d9;
	border-color: #fbc09d;
}
.resultbox.error {
        background-color: #fce8e6;
	border-color: #f6aea9;
}
.resultbox.info {
        background-color: #cee8ff;
	border-color: #9fd1ff;
}
.resultbox.success {
        background-color: #d8ffd8;
	border-color: #9fff9f;
}
.resultbox.warn > div:first-child {
        color: #d9630d;
}
.resultbox.error > div:first-child {
        color: #ea4335; 
}
.resultbox.info > div:first-child {
        color: #1771c4;
}
.resultbox.success > div:first-child {
        color: #14b514;
}
.resultbox > div:last-child {
        flex-shrink: 1;
        line-height: 20px;
	color: var(--gray-dark-45);
}
.resultbox > div:first-child::before {
        content: "\f05a";
}
.resultbox.warn > div:first-child::before {
        content: "\f071";
}
.resultbox.error > div:first-child::before {
        content: "\f06a";
}
.resultbox.info > div:first-child::before {
        content: "\f05a";
}
.resultbox.success > div:first-child::before {
        content: "\f058";
}