input[type="checkbox"]
	{
    /*cannot use display none as this makes the checkbox not work with keyboard*/
    width:1px !important;
    height:1px !important;
    position:absolute;
    border-color:transparent;
	}
	
input[type="checkbox"]:focus
	{
	/*this is needed so that when the original checkbox is focused this doesn't really make any visual change*/	
	outline:none;
	}

.blk:has(input[type="checkbox"]) .lbl label
	{
	cursor: pointer;
	position:relative;
	margin-left: 5px;
	vertical-align: middle;
	}

.blk:has(input[type="checkbox"]) .lbl label:before
	{
	top: -3px;
	content:"";
	width: 18px;
	height: 18px;
	cursor: pointer;
	position: relative;
	border-radius: 3px;
	display:inline-block;
	vertical-align: middle;
	background-color:#f5f5f5;
	border:1px solid currentcolor;
	transition: background 0.1s ease;
	}
	
#extnlf .blk:has(input[type="checkbox"]) .lbl label:before
	{
	border:0 !important;
	background-color:#efede1 !important;
	}
	
.blk:has(input[type="checkbox"]) .lbl label:after
	{
	content:"";
	position: absolute;
	top: 11px;
	left: 6px;
	width: 5px;
	height: 9px;
	opacity: 0;
	transform: rotate(45deg) scale(0);
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transition: all 0.3s ease;
	transition-delay: 0.15s;
	}

.blk:has(input[type="checkbox"]:checked) .lbl label:before
	{
	animation: jelly 0.6s ease;
	}

.blk:has(input[type="checkbox"]:checked) .lbl label:after
	{
	opacity: 1;
	transform: rotate(45deg) scale(1);
	}

@keyframes jelly
{
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}