.checklist{
	position: relative;
	display: block;
	margin: 5px 10px 15px;
	font-size: 14px;
	line-height: 30px;
	background-color: #eee;
	border-radius: 5px;
	padding:0 20px 0 60px;
	min-width: 280px;
	border-radius: 20px;
	transition: 0.3s;
	opacity: 0.9;
}
[data-pwa] .checklist{
	font-size: 12px;
	margin-right: 0;
	margin-left: 0;
	padding:0 5px 0 45px;
}
.checklist::before{
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all .2s ease-in-out;
	background-color: #eee;
}
.checklist::after{
	content: "";
	position: absolute;
	top: -2px;
	left: 3px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	margin:0 auto;
	border-radius: 50%;
	transition: all .15s ease-in-out;
	background-color: #fff;
	will-change: transform;
}

.checklist:hover{
	opacity: 0.8;
}
.checklist:focus{
	opacity: 1;
}
.checklist:active{
	opacity: 0.7;
}
.checklist:hover::after{
	transform: scale(0.9);
}
.checklist:focus::after{
	transform: scale(0.8);
}
.checklist:active::after{
	transform: scale(1);
}

[dir="rtl"] .checklist{
	padding:0 60px 0 20px;
}
[dir="rtl"][data-pwa] .checklist{
	padding:0 45px 0 5px;
}
[dir="rtl"] .checklist::before{
	left: initial;
	right: 0;
}
[dir="rtl"] .checklist::after{
	left: initial;
	right: 3px;
}

.checklist[data-okay]{
	background-color: #d4edda;
}
.checklist[data-okay]::before{
	background-color: #d4edda;
}
.checklist[data-okay]::after{
	content: "\6b";
	font-family: "siftal" !important;
	font-size: 20px;
	color: #20b040;
}

.checklist[data-info]{
	background-color: #d9edf7;
}
.checklist[data-info]::before{
	background-color: #d9edf7;
}
.checklist[data-info]::after{
	content: "\e03a";
	font-family: "siftal" !important;
	font-size: 20px;
	color: #3a87ad;
}

.checklist[data-warn]{
	background-color: #ffecb3;
}
.checklist[data-warn]::before{
	background-color: #ffecb3;
}
.checklist[data-warn]::after{
	content: "\e16c";
	font-family: "siftal" !important;
	font-size: 20px;
	color: #fbc02d;
}

.checklist[data-fail]{
	background-color: #f8d7da;
}
.checklist[data-fail]::before{
	background-color: #f8d7da;
}
.checklist[data-fail]::after{
	content: "\e041";
	font-family: "siftal" !important;
	font-size: 20px;
	color: #e02020;
}