.cekstatus {
	user-select: none;
	position: relative;
	width: 200px;
	padding-top: 8px;
	padding-bottom: 12px;
}

.cekstatus.qrc * {
	cursor: wait !important;
}

.cekstatus input {
	margin-top: 4px;
	font-size: smaller;
	letter-spacing: 2px;
	height: 28px;
}

.cekstatus > input {
	width: 100%;
	font-size: medium;
	padding-left: 30px;
	letter-spacing: 3px;
	height: 36px;
}

.cekstatus div:has(.error) {
	min-height: 24px;
	transform: translateY(-4px);
	width: 100%;
	text-align: center;
}

.cekstatus .error {
	color: darkred;
	font-size: small;
}

.cekstatus div:has(.saos) {
	position: relative;
}

.cekstatus .fr {
	position: relative;
	width: 110px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid grey;
	transition: opacity 0.4s;
	background: white;
}

.cekstatus .fr div {
	position: absolute;
	top: -55px;
	left: -20px;
	width: 150px;
	height: 150px;
}

.cekstatus .bg + div {
	padding: 0 16px;
	top: 0;
	left: 0;
}

.cekstatus .bg {
	opacity: 0.65;
}

.cekstatus .fg {
	opacity: 0.25;
	cursor: pointer;
}

.cekstatus .asin {
	width: 110px;
	text-align: center;
}

.cekstatus button {
	position: absolute;
	right: 0;
	width: 78px;
	height: 72px;
	transform: translateY(-100%);
}

.cekstatus button .fa:before {
	font-size: larger;
}

.cekstatus + div {
	margin-bottom: 6px;
}

.cekstatus + div .top tr > *{
	padding: 0 6px;
}

.cekstatus .bg-0 {
	background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #f3e5f7 26px ), repeating-linear-gradient( #8485a055, #8485a0 );
}

.cekstatus .bg-1 {
	background-image: linear-gradient(30deg, #8485a0 12%, transparent 12.5%, transparent 87%, #8485a0 87.5%, #8485a0), linear-gradient(150deg, #8485a0 12%, transparent 12.5%, transparent 87%, #8485a0 87.5%, #8485a0), linear-gradient(30deg, #8485a0 12%, transparent 12.5%, transparent 87%, #8485a0 87.5%, #8485a0), linear-gradient(150deg, #8485a0 12%, transparent 12.5%, transparent 87%, #8485a0 87.5%, #8485a0), linear-gradient(60deg, #8485a077 25%, transparent 25.5%, transparent 75%, #8485a077 75%, #8485a077), linear-gradient(60deg, #8485a077 25%, transparent 25.5%, transparent 75%, #8485a077 75%, #8485a077);
	background-size: 20px 35px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.cekstatus .bg-2 {
	background-image:  linear-gradient(135deg, #8485a0 25%, transparent 25%), linear-gradient(225deg, #8485a0 25%, transparent 25%), linear-gradient(45deg, #8485a0 25%, transparent 25%), linear-gradient(315deg, #8485a0 25%, #e5e5f7 25%);
	background-position:  10px 0, 10px 0, 0 0, 0 0;
	background-size: 10px 10px;
	background-repeat: repeat;
}

.cekstatus .bg-3 {
	background-image: radial-gradient(#8485a0 3px, #e5e5f7 3px);
	background-size: 12px 8px;
}

.cekstatus .bg-4 {
	background: linear-gradient(135deg, #8485a055 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(225deg, #8485a0 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(315deg, #8485a055 25%, transparent 25%) 0px 0/ 20px 20px, linear-gradient(45deg, #8485a0 25%, #e5e5f7 25%) 0px 0/ 20px 20px;
}

.cekstatus .bg-5 {
	background-image: radial-gradient( ellipse farthest-corner at 10px 10px , #8485a0, #8485a0 50%, #e5e5f7 50%);
	background-size: 10px 10px;
}

.cekstatus .bg-6 {
	background-image: radial-gradient(#8485a0 3px, #e5e5f7 3px);
	background-size: 8px 12px;
}

.cekstatus .bg-7 {
	background-image:  repeating-linear-gradient(45deg, #8485a0 25%, transparent 25%, transparent 75%, #8485a0 75%, #8485a0), repeating-linear-gradient(45deg, #8485a0 25%, #e5e5f7 25%, #e5e5f7 75%, #8485a0 75%, #8485a0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}

.cekstatus .bg-8 {
	background-image: linear-gradient(45deg, #8485a0 50%, #e5e5f7 50%);
	background-size: 10px 10px;	
}

.cekstatus .bg-9 {
	background-image:  linear-gradient(135deg, #8485a0 25%, transparent 25%), linear-gradient(225deg, #8485a0 25%, transparent 25%), linear-gradient(45deg, #8485a0 25%, transparent 25%), linear-gradient(315deg, #8485a0 25%, #e5e5f7 25%);
	background-position:  10px 0, 10px 0, 0 0, 0 0;
	background-size: 20px 20px;
	background-repeat: repeat;
}

.cekstatus .bg-10 {	
	background: radial-gradient(#8381a4 20%, transparent 21% ,transparent 79%, #8381a4 80%);
	background-size: 20px 20px;
}

.cekstatus .bg-11 {	
	background: radial-gradient(transparent 29%, #8381a4 30%, #8381a4 50%, transparent 51%, transparent 74%, #8381a4 75%, #8381a4 95%, transparent 96%);
	background-size: 20px 20px;
}

.cekstatus .bg-12 {	
	background: radial-gradient(circle at 60% 40%, #8381a4 25%, transparent 26%),radial-gradient(circle at 40% 60%, #8381a480 25%, transparent 26%) ;
	background-size: 20px 20px;
}

.cekstatus .bg-13 {	
	background: radial-gradient(circle at top left, transparent 14%,#8381a4 15%,#8381a4 20% , transparent 21%),radial-gradient(circle at top right, transparent 14%,#8381a4 15%,#8381a4 20% , transparent 21%),radial-gradient(circle at bottom left, transparent 14%,#8381a4 15%,#8381a4 20% , transparent 21%),radial-gradient(circle at bottom right, transparent 14%,#8381a4 15%,#8381a4 20% , transparent 21%),radial-gradient(circle at top,#8381a4 20% , transparent 21%), radial-gradient(circle at bottom,#8381a4 20% , transparent 21%), radial-gradient(circle at right,#8381a4 20% , transparent 21%), radial-gradient(circle at left,#8381a4 20% , transparent 21%), radial-gradient(circle,#8381a4 20% , transparent 21%);
	background-size: 20px 20px;
}

.cekstatus .bg-14 {	
	background: radial-gradient(circle at bottom left ,#8381a4 35%, transparent 36%), radial-gradient(circle at top right ,#8381a4 35%, transparent 36%);
	background-size: 20px 20px;
}

.cekstatus .bg-15 {	
	background: linear-gradient(135deg, #8381a480 50%, transparent 0),linear-gradient(-135deg, #8381a480 50%, transparent 0);
	background-size: 20px 20px;
}

.cekstatus .bg-16 {	
	background: linear-gradient(90deg, transparent 50%, #8381a4 50%),linear-gradient(to bottom, transparent 50%, #8381a480 50%);
	background-size: 12px 16px;
}

.cekstatus .bg-17 {	
	background: linear-gradient(45deg, #8381a480 25%, transparent 21%) , linear-gradient(315deg, #8381a480 25%, transparent 21%), linear-gradient(45deg, #8381a4 10%, transparent 11%), linear-gradient(315deg, #8381a4 10%, transparent 11%),linear-gradient(135deg, #8381a480 25%, transparent 21%) , linear-gradient(225deg, #8381a480 25%, transparent 21%), linear-gradient(135deg, #8381a4 10%, transparent 11%), linear-gradient(225deg, #8381a4 10%, transparent 11%), radial-gradient(#8381a4 20%, transparent 21%);
	background-size: 20px 20px;
}

.cekstatus .bg-18 {	
	background: linear-gradient(-45deg, #8381a499 20%, transparent 20% 80%, #8381a499 80% 100%), linear-gradient(45deg, #8381a499 20%, transparent 20% 80%, #8381a499 80% 100%), linear-gradient(-45deg, #ffffff 33%, transparent 33% 66%, #ffffff 66%), linear-gradient(45deg, transparent 33%, #8381a4 33% 66%, transparent 66%);
	background-size: 20px 20px;
}

.cekstatus .bg-19 {	
	background: linear-gradient(45deg,#8381a4 20%, transparent 20%), linear-gradient(135deg, transparent 80%, #8381a4 80%), radial-gradient(#8381a4 20% , transparent 21%);
	background-size: 20px 20px;
}

.cekstatus .bg-28,
.cekstatus .bg-20 {	
	background: radial-gradient(circle at top,transparent 14%, #8381a4 15% ,#8381a4 19% , transparent 20%) , radial-gradient(circle at bottom,transparent 14%, #8381a4 15% ,#8381a4 19% , transparent 20%), radial-gradient(circle at right,transparent 14%, #8381a4 15% ,#8381a4 19% , transparent 20%) , radial-gradient(circle at left,transparent 14%, #8381a4 15% ,#8381a4 19% , transparent 20%), radial-gradient(circle at center,#8381a4 25% , transparent 26%), radial-gradient(circle at bottom left, #8381a4 12%, transparent 13%),radial-gradient(circle at bottom right, #8381a4 12%, transparent 13%),radial-gradient(circle at top left, #8381a4 12%, transparent 13%),radial-gradient(circle at top right, #8381a4 12%, transparent 13%);
	background-size: 20px 20px;
}

.cekstatus .bg-29,
.cekstatus .bg-21 {	
	background: radial-gradient(circle at bottom left ,#8381a4 35%, transparent 36%), radial-gradient(circle at top right ,#8381a4 35%, transparent 36%), radial-gradient(circle at center ,#8381a4 15%, transparent 16%);
	background-size: 20px 20px;
}

.cekstatus .bg-30,
.cekstatus .bg-22 {	
	background: linear-gradient(45deg , #8381a4 10%,transparent 11%, transparent 89% , #8381a4 90%),linear-gradient(135deg , #8381a4 10%,transparent 11%, transparent 89% , #8381a4 90%),radial-gradient(circle, transparent 25%, #ffffff  26%),linear-gradient(0deg, transparent 44%, #8381a4 45%, #8381a4 55%, transparent 56%), linear-gradient(90deg, transparent 44%, #8381a4 45%, #8381a4 55%, transparent 56%);
	background-size: 20px 20px;
}

.cekstatus .bg-31,
.cekstatus .bg-23 {	
	background: linear-gradient(45deg, #8381a480 20%, transparent 21%, transparent 79%, #8381a480 80%) , linear-gradient(315deg, #8381a480 20%, transparent 21%), linear-gradient(45deg, #8381a4 20%, transparent 21%), linear-gradient(315deg, #8381a4 20%, transparent 21%, transparent 79%, #8381a480 80%);
	background-size: 20px 20px;
}

.cekstatus .bg-24,
.cekstatus .bg-25 {	
	background: linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, #8485a0 75%, #8485a0) 0 0, linear-gradient(-45deg, #8485a0 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em, linear-gradient(45deg, #8485a0 17%, transparent 17%, transparent 25%, #8485a0 25%, #8485a0 36%, transparent 36%, transparent 64%, #8485a0 64%, #8485a0 75%, transparent 75%, transparent 83%, #8485a0 83%) 1em 1em;
	background-size: 20px 20px;
}

.cekstatus .bg-26,
.cekstatus .bg-27 {
	filter: grayscale(1);
	background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
	background-size: 12px 18px;
}