.alert,
.error-message,
.info-message,
.success-message {
	position: relative;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2em;
	box-sizing: border-box;
	width: 100%;
	padding: 22px;
	margin: 0px auto;
	border: 1px solid var(--on-color-success-200);
	margin-bottom: 20px;
	min-height: 50px;
	padding-left: 90px;
	border-radius: 0 7px 7px 0; 
	background: var(--on-color-success-50)
}

.alert .close {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--on-color-error);
	border-radius: 50%;
	opacity: 1;
	color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(50%, -50%);
	width: 20px;
	height: 20px;
	font-weight: 400;
	font-size: 18px;
}

.alert::before,
.error-message::before,
.info-message::before,
.success-message::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 9px;
	height: 100%;
	background: var(--on-color-success)
}

.alert::after,
.error-message::after,
.info-message::after,
.success-message::after {
	content: '✓';
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 41px;
	width: 22px;
	height: 22px;
	font-size: 18px;
	color: var(--on-color-white);
	background: var(--on-color-success);
	border-radius: 5px;
	transform: translateY(-50%);
  top: 50%;
	padding-bottom: 3px;
}

.alert.alert-success a,
.error-message a,
.info-message a,
.success-message a {
	font-size: 14px;
	font-weight: bold;
	color: var(--on-color-success);			
}

.alert.alert-success a:hover,
.success-message a:hover {
	color: var(--on-color-success-hover);
}

.alert h2,
.error-message h2,
.info-message h2,
.success-message h2 {
	margin: 0px;
	padding: 0px;	 
	font-size: 14px !important;
	font-weight: bold;	 
	margin-bottom: 0px !important;
}

.alert p,
.error-message p,
.info-message p,
.success-message p {
	margin: 0px;
	padding: 0px;
	line-height: 16px;	
}

.alert ul,
.error-message ul,
.info-message ul,
.success-message ul {
	margin-bottom: 0px;
}


.alert.alert-info,
.info-message
{	
	border: 1px solid var(--on-color-info-200);	
	background: var(--on-color-info-50)
}
.alert.alert-info a:hover,
.info-message  a:hover {
	color: var(--on-color-info-hover);
}
.alert.alert-info::before,
.info-message::before {
	background: var(--on-color-info)
}
.alert.alert-info::after,
.info-message::after {
	content: 'ℹ';
	background: var(--on-color-info)
}

.alert.alert-danger,
.error-message {	
	border: 1px solid var(--on-color-error-200);	
	background: var(--on-color-error-50)
}
.alert.alert-danger a:hover,
.error-message  a:hover {
	color: var(--on-color-error-hover);
}
.alert.alert-danger::before,
.error-message::before {
	background: var(--on-color-error);
}
.alert.alert-danger::after,
.error-message::after {
	content: '⨂';
	font-size: 17px;
	background: var(--on-color-error);
}

.alert.alert-warning
{	
	border: 1px solid var(--on-color-warning-200);	
	background: var(--on-color-warning-50)
}
.alert.alert-warning a:hover
{
	color: var(--on-color-warning-hover);
}
.alert.alert-warning::before
{
	background: var(--on-color-warning);
}
.alert.alert-warning::after
{
	content: '⚠';
	align-items: flex-start;
	font-size: 17px;
	background: var(--on-color-warning);
}