* ------------------- */
/* Checkbox styling & icons. Credit Minimal theme: https://minimal.guide/Block+types/Checklists#Checkbox+styling */
/* Support @kepano - https://www.buymeacoffee.com/kepano */
/* ------------------- */

/* 
* TRANSPARENT
*
* - special chars
* - abc
* - ABC
*/

input[data-task='*']:checked,
input[data-task='+']:checked,
input[data-task='-']:checked,
input[data-task='<']:checked,
input[data-task='>']:checked,
input[data-task='i']:checked,
input[data-task='b']:checked,
input[data-task='d']:checked,
input[data-task='k']:checked,
input[data-task='l']:checked,
input[data-task='n']:checked,
input[data-task='o']:checked,
input[data-task='p']:checked,
input[data-task='u']:checked,
input[data-task='w']:checked,
input[data-task='B']:checked,
input[data-task='M']:checked,
input[data-task='P']:checked,
li[data-task='*'] > input:checked,
li[data-task='*'] > p > input:checked,
li[data-task='+'] > input:checked,
li[data-task='+'] > p > input:checked,
li[data-task='-'] > input:checked,
li[data-task='-'] > p > input:checked,
li[data-task='<'] > input:checked,
li[data-task='<'] > p > input:checked,
li[data-task='>'] > input:checked,
li[data-task='>'] > p > input:checked,
li[data-task='b'] > input:checked,
li[data-task='b'] > p > input:checked,
li[data-task='d'] > input:checked,
li[data-task='d'] > p > input:checked,
li[data-task='i'] > input:checked,
li[data-task='i'] > p > input:checked,
li[data-task='k'] > input:checked,
li[data-task='k'] > p > input:checked,
li[data-task='l'] > input:checked,
li[data-task='l'] > p > input:checked,
li[data-task='n'] > input:checked,
li[data-task='n'] > p > input:checked,
li[data-task='o'] > input:checked,
li[data-task='o'] > p > input:checked,
li[data-task='p'] > input:checked,
li[data-task='p'] > p > input:checked,
li[data-task='u'] > input:checked,
li[data-task='u'] > p > input:checked,
li[data-task='w'] > input:checked,
li[data-task='w'] > p > input:checked,
li[data-task='B'] > input:checked,
li[data-task='B'] > p > input:checked,
li[data-task='M'] > input:checked,
li[data-task='M'] > p > input:checked,
li[data-task='P'] > input:checked,
li[data-task='P'] > p > input:checked {
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
}

input[data-task='*']:checked:after,
input[data-task='+']:checked:after,
input[data-task='-']:checked:after,
input[data-task='<']:checked:after,
input[data-task='>']:checked:after,
input[data-task='i']:checked:after,
input[data-task='b']:checked:after,
input[data-task='d']:checked:after,
input[data-task='k']:checked:after,
input[data-task='l']:checked:after,
input[data-task='n']:checked:after,
input[data-task='o']:checked:after,
input[data-task='p']:checked:after,
input[data-task='u']:checked:after,
input[data-task='w']:checked:after,
input[data-task='B']:checked:after,
input[data-task='M']:checked:after,
input[data-task='P']:checked:after,
li[data-task='*'] > input:checked:after,
li[data-task='*'] > p > input:checked:after,
li[data-task='+'] > input:checked:after,
li[data-task='+'] > p > input:checked:after,
li[data-task='-'] > input:checked:after,
li[data-task='-'] > p > input:checked:after,
li[data-task='<'] > input:checked:after,
li[data-task='<'] > p > input:checked:after,
li[data-task='>'] > input:checked:after,
li[data-task='>'] > p > input:checked:after,
li[data-task='b'] > input:checked:after,
li[data-task='b'] > p > input:checked:after,
li[data-task='d'] > input:checked:after,
li[data-task='d'] > p > input:checked:after,
li[data-task='i'] > input:checked:after,
li[data-task='i'] > p > input:checked:after,
li[data-task='k'] > input:checked:after,
li[data-task='k'] > p > input:checked:after,
li[data-task='l'] > input:checked:after,
li[data-task='l'] > p > input:checked:after,
li[data-task='n'] > input:checked:after,
li[data-task='n'] > p > input:checked:after,
li[data-task='o'] > input:checked:after,
li[data-task='o'] > p > input:checked:after,
li[data-task='p'] > input:checked:after,
li[data-task='p'] > p > input:checked:after,
li[data-task='u'] > input:checked:after,
li[data-task='u'] > p > input:checked:after,
li[data-task='w'] > input:checked:after,
li[data-task='w'] > p > input:checked:after,
li[data-task='B'] > input:checked:after,
li[data-task='B'] > p > input:checked:after,
li[data-task='M'] > input:checked:after,
li[data-task='M'] > p > input:checked:after,
li[data-task='P'] > input:checked:after,
li[data-task='P'] > p > input:checked:after {
  background-color: currentColor;
  -webkit-mask-image: none;
}

/* ------------------- special chars transparent */

input[data-task='*']:checked,
li[data-task='*'] > input:checked,
li[data-task='*'] > p > input:checked {
  color: gold;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' /%3E%3C/svg%3E");
}

input[data-task='*']:checked:after,
li[data-task='*'] > input:checked:after,
li[data-task='*'] > p > input:checked:after { 
  background-color: currentColor;
  -webkit-mask-image: none;
}

input[data-task='+']:checked,
li[data-task='+'] > input:checked,
li[data-task='+'] > p > input:checked {
  color: rgb(162, 162, 162);
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M15 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V5H8.5a.5.5 0 0 0 0 1H10v1.5a.5.5 0 0 0 1 0V6h1.5a.5.5 0 0 0 0-1H11V3.5Zm-.5 7.5c1.33 0 2.55-.472 3.5-1.257V12.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5v-7A2.5 2.5 0 0 1 4.5 3h1.1a5.463 5.463 0 0 0-.393 1H4.5A1.5 1.5 0 0 0 3 5.5V9h2.5a.5.5 0 0 1 .5.5c0 .052.008.162.032.308c.041.247.115.494.228.718c.308.618.843.974 1.74.974c.692 0 1.168-.212 1.492-.592c.326.06.663.092 1.008.092Z"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='-']:checked,
li[data-task='-'] > input:checked,
li[data-task='-'] > p > input:checked {
  color: var(--color-red);
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m2.397 2.554l.073-.084a.75.75 0 0 1 .976-.073l.084.073L8 6.939l4.47-4.47a.75.75 0 1 1 1.06 1.061L9.061 8l4.47 4.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L8 9.061l-4.47 4.47a.75.75 0 0 1-1.06-1.061L6.939 8l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084l-.073.084Z"/></svg>');
}
body:not(.tasks)
  .markdown-preview-view
  ul
  li[data-task='-'].task-list-item.is-checked,
body:not(.tasks)
  .markdown-source-view.mod-cm6
  .HyperMD-task-line[data-task]:is([data-task='-']),
body:not(.tasks) li[data-task='-'].task-list-item.is-checked {
  color: var(--text-faint);
  text-decoration: line-through solid var(--text-faint) 1px;
}

input[data-task='<']:checked,
li[data-task='<'] > input:checked,
li[data-task='<'] > p > input:checked {
  color: var(--text-faint);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

input[data-task='>']:checked,
li[data-task='>'] > input:checked,
li[data-task='>'] > p > input:checked {
  color: var(--text-faint);
  transform: rotate(90deg);
  -webkit-mask-position: 50% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z' /%3E%3C/svg%3E");
}

/* ------------------- abc transparent */

input[data-task='b']:checked,
li[data-task='b'] > input:checked,
li[data-task='b'] > p > input:checked {
  color: var(--color-orange);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z' /%3E%3C/svg%3E");
}

input[data-task='d']:checked,
li[data-task='d'] > input:checked,
li[data-task='d'] > p > input:checked {
  color: var(--color-red);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

input[data-task='i']:checked,
li[data-task='i'] > input:checked,
li[data-task='i'] > p > input:checked {
  color: gold;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z' /%3E%3C/svg%3E");
}

input[data-task='k']:checked,
li[data-task='k'] > input:checked,
li[data-task='k'] > p > input:checked {
  color: var(--color-blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

input[data-task='l']:checked,
li[data-task='l'] > input:checked,
li[data-task='l'] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

input[data-task='n']:checked,
li[data-task='n'] > input:checked,
li[data-task='n'] > p > input:checked {
  color: var(--color-red);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /%3E%3C/svg%3E");
}

input[data-task='o']:checked,
li[data-task='o'] > input:checked,
li[data-task='o'] > p > input:checked {
  color: var(--color-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /%3E%3C/svg%3E");
}

input[data-task='p']:checked,
li[data-task='p'] > input:checked,
li[data-task='p'] > p > input:checked {
  color: var(--color-purple);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z'%3E%3C/path%3E%3C/svg%3E");
}

input[data-task='u']:checked,
li[data-task='u'] > input:checked,
li[data-task='u'] > p > input:checked {
  color: var(--color-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

input[data-task='w']:checked,
li[data-task='w'] > input:checked,
li[data-task='w'] > p > input:checked {
  color: gold;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5 4C5 2.34315 6.34315 1 8 1H15.9999C17.6568 1 19 2.34314 19 4H20C21.6569 4 23 5.34315 23 7V7.64593C23 8.87265 22.2531 9.97577 21.1142 10.4314L18.031 11.6646C17.5965 12.464 16.958 13.2715 16.0234 13.8946C15.211 14.4361 14.2124 14.8132 13 14.9467V17H15C16.6569 17 18 18.3431 18 20V21C18 22.1046 17.1046 23 16 23H8C6.89543 23 6 22.1046 6 21V20C6 18.3431 7.34315 17 9 17H11V14.9467C9.78757 14.8133 8.7889 14.4361 7.97651 13.8945C7.04188 13.2715 6.40335 12.464 5.9689 11.6646L2.88583 10.4314C1.74685 9.97577 1 8.87265 1 7.64593V7C1 5.34315 2.34315 4 4 4H5ZM5 6H4C3.44772 6 3 6.44772 3 7V7.64593C3 8.05484 3.24895 8.42255 3.62861 8.57441L5.11907 9.1706C5.05194 8.78628 5.00063 8.39214 5 8.00104L5 6ZM19 8V6H20C20.5523 6 21 6.44772 21 7V7.64593C21 8.05484 20.751 8.42255 20.3714 8.57441L18.8809 9.17062C18.9469 8.78361 19 8.39286 19 8ZM8 3C7.44772 3 7 3.44772 7 4V7.99707L7 7.99832C7 7.99996 7 8.00078 7 7.99832C7.00508 8.25761 7.03756 8.51764 7.08014 8.77311C7.16297 9.27012 7.32677 9.91751 7.6444 10.5528C7.96008 11.1842 8.4179 11.7851 9.08591 12.2305C9.74766 12.6716 10.6749 13 12 13C13.325 13 14.2522 12.6716 14.914 12.2304C15.582 11.7851 16.0398 11.1842 16.3555 10.5528C16.6732 9.9175 16.837 9.27011 16.9198 8.7731C16.9624 8.51735 16.993 8.25848 17 7.99909V4C17 3.44772 16.5522 3 15.9999 3H8ZM9 19C8.44772 19 8 19.4477 8 20V21H16V20C16 19.4477 15.5523 19 15 19H9Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* ------------------- ABC transparent */

input[data-task='I']:checked,
li[data-task='I'] > input:checked,
li[data-task='I'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  background-position: 50%;
  background-size: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="white" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E');
}
.theme-dark input[data-task='I']:checked,
.theme-dark li[data-task='I'] > input:checked,
.theme-dark li[data-task='I'] > p > input:checked {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="black" fill-opacity="0.8" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='S']:checked,
li[data-task='S'] > input:checked,
li[data-task='S'] > p > input:checked {
  --checkbox-marker-color: transparent;
  border-color: var(--color-green);
  background-color: var(--color-green);
  background-size: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill="white" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E');
}
.theme-dark input[data-task='S']:checked,
.theme-dark li[data-task='S'] > input:checked,
.theme-dark li[data-task='S'] > p > input:checked {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill-opacity="0.8" fill="black" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='B']:checked,
li[data-task='B'] > input:checked,
li[data-task='B'] > p > input:checked {
  color: var(--color-purple);
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 20 20"%3E%3Cpath fill="currentColor" d="M6.13 2.793A3.91 3.91 0 0 1 8.5 2c.24 0 .431.125.542.211c.124.098.24.223.344.348a.5.5 0 0 1 .114.318V6.5H8.415a1.5 1.5 0 1 0 0 1H9.5v9.415a.5.5 0 0 1-.183.387C8.855 17.68 8.237 18 7.5 18c-1.186 0-2.069-.598-2.64-1.313a4.057 4.057 0 0 1-.819-1.752a2.68 2.68 0 0 1-1.054-.555C2.435 13.907 2 13.14 2 12c0-.557.037-1.06.12-1.5h3.13c.636 0 1.16.475 1.24 1.089a1.5 1.5 0 1 0 1.004-.006A2.25 2.25 0 0 0 5.25 9.5H2.441c.153-.298.358-.55.625-.729a1.58 1.58 0 0 1 .212-.118c-.284-.832-.21-1.806.064-2.571c.175-.492.453-.957.835-1.267c.252-.205.552-.34.88-.366c.144-.683.549-1.248 1.074-1.656ZM10.5 14.5h.75a2.25 2.25 0 0 0 2.25-2.25v-1.835a1.5 1.5 0 1 0-1 0v1.835c0 .69-.56 1.25-1.25 1.25h-.75V2.877a.5.5 0 0 1 .114-.318c.103-.125.22-.25.344-.348c.11-.086.301-.211.542-.211a3.91 3.91 0 0 1 2.37.793c.525.408.93.973 1.073 1.656c.328.025.628.161.88.366c.382.31.66.775.835 1.267c.274.765.348 1.74.064 2.57c.072.034.143.074.212.12c.275.183.484.445.638.754c.303.605.428 1.449.428 2.474c0 1.141-.435 1.907-.987 2.38a2.68 2.68 0 0 1-1.054.555c-.1.558-.38 1.204-.819 1.752c-.57.715-1.454 1.313-2.64 1.313c-.736 0-1.355-.32-1.816-.698a.5.5 0 0 1-.184-.387V14.5ZM7 6.5a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1Zm0 6a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1Zm6-3a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1Z"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='M']:checked,
li[data-task='M'] > input:checked,
li[data-task='M'] > p > input:checked {
  color: var(--color-purple);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z'%3E%3C/path%3E%3C/svg%3E");
}

/* 
* FILLED BACKGROUND
*
* - special chars
* - abc
* - ABC
*/

/* ------------------- special chars transparent */

input[data-task='?']:checked,
li[data-task='?'] > input:checked,
li[data-task='?'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  background-position: 50% 50%;
  background-size: 200% 90%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="white" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E');
}
.theme-dark input[data-task='?']:checked,
.theme-dark li[data-task='?'] > input:checked,
.theme-dark li[data-task='?'] > p > input:checked {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="black" fill-opacity="0.8" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='/']:checked,
li[data-task='/'] > input:checked,
li[data-task='/'] > p > input:checked {
  border-color: lightgreen;
  background-image: none;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
input[data-task='/']:checked:after,
li[data-task='/'] > input:checked:after,
li[data-task='/'] > p > input:checked:after {
  top: 0;
  left: 0;
  content: ' ';
  display: block;
  position: absolute;
  background-color: lightgreen;
  width: calc(50% - 0.5px);
  height: 100%;
  -webkit-mask-image: none;
}

input[data-task='Q']:checked,
input[data-task='"']:checked,
input[data-task='“']:checked,
li[data-task='Q'] > input:checked,
li[data-task='Q'] > p > input:checked,
li[data-task='"'] > input:checked,
li[data-task='"'] > p > input:checked,
li[data-task='“'] > input:checked,
li[data-task='“'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-position: 50% 50%;
  background-color: var(--color-cyan);
  border-color: var(--color-cyan);
  background-size: 75%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E');
}
.theme-dark input[data-task='Q']:checked,
.theme-dark input[data-task='"']:checked,
.theme-dark input[data-task='“']:checked,
.theme-dark li[data-task='Q'] > input:checked,
.theme-dark li[data-task='Q'] > p > input:checked,
.theme-dark li[data-task='"'] > input:checked,
.theme-dark li[data-task='"'] > p > input:checked,
.theme-dark li[data-task='“'] > input:checked,
.theme-dark li[data-task='“'] > p > input:checked {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="black" fill-opacity="0.7" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E');
}

input[data-task='!']:checked,
li[data-task='!'] > input:checked,
li[data-task='!'] > p > input:checked {
  --checkbox-marker-color: transparent;
  border-color: darkorange;
  background-color: darkorange;
  background-size: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M5.96 4.457a2.075 2.075 0 1 1 4.08 0l-.856 4.56a1.205 1.205 0 0 1-2.368 0l-.855-4.56ZM9.5 12.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0Z"%2F%3E%3C%2Fsvg%3E');
  border: 1px solid darkorange;
    box-shadow: 0 0 5px darkorange, 0 0 10px darkorange, 0 0 15px darkorange;
}

/* ------------------- abc filled */

input[data-task='f']:checked,
li[data-task='f'] > input:checked,
li[data-task='f'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-size: 100%;
  background-color: rgb(214, 57, 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z' clip-rule='evenodd' /%3E%3C/svg%3E");
  border-color: rgb(214, 57, 0);
	border: 1px solid rgb(214, 57, 0);
    box-shadow: 0 0 5px rgb(214, 57, 0), 0 0 10px rgb(214, 57, 0), 0 0 15px rgb(214, 57, 0);
}

input[data-task='x']:checked,
li[data-task='x'] > input:checked,
li[data-task='x'] > p > input:checked {
  background-color: var(--color-green);
  background-size: 100%;
  border: 1px solid green;
    box-shadow: 0 0 5px green, 0 0 10px green, 0 0 15px green;
  border-color: var(--color-green);
}

/* ------------------- ABC filled*/

input[data-task='D']:checked,
li[data-task='D'] > input:checked,
li[data-task='D'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-size: 100%;
  background-color: var(--color-purple);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 24 24" %3E%3Cpath fill="currentColor" d="M24,24H0v-8h2v6h20v-6h2V24z M12,18.4l-7.7-7.7l1.4-1.4l5.3,5.3V0h2v14.6l5.3-5.3l1.4,1.4L12,18.4z"%2F%3E%3C%2Fsvg%3E');
  border-color: var(--color-purple);
}

input[data-task='N']:checked,
li[data-task='N'] > input:checked,
li[data-task='N'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-size: 100%;
  background-color: var(--color-yellow);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h3.672a2.5 2.5 0 0 0 1.767-.732l3.329-3.329A2.5 2.5 0 0 0 14 8.172V4.5A2.5 2.5 0 0 0 11.5 2h-7ZM3 4.5A1.5 1.5 0 0 1 4.5 3h7A1.5 1.5 0 0 1 13 4.5V8h-2.5A2.5 2.5 0 0 0 8 10.5V13H4.5A1.5 1.5 0 0 1 3 11.5v-7Zm6 8.25V10.5A1.5 1.5 0 0 1 10.5 9h2.25c-.055.083-.118.16-.19.232l-3.328 3.329a1.564 1.564 0 0 1-.232.19Z"%2F%3E%3C%2Fsvg%3E');
  border-color: var(--color-yellow);
}

input[data-task='R']:checked,
li[data-task='R'] > input:checked,
li[data-task='R'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-size: 100%;
  background-color: var(--color-cyan);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M2.984 8.625v.003a.5.5 0 0 1-.612.355c-.431-.114-.355-.611-.355-.611l.018-.062s.026-.084.047-.145a6.7 6.7 0 0 1 1.117-1.982C4.096 5.089 5.605 4 8 4s3.904 1.089 4.802 2.183a6.7 6.7 0 0 1 1.117 1.982a4.077 4.077 0 0 1 .06.187l.003.013v.004l.001.002a.5.5 0 0 1-.966.258l-.001-.004l-.008-.025a4.872 4.872 0 0 0-.2-.52a5.696 5.696 0 0 0-.78-1.263C11.286 5.912 10.044 5 8 5c-2.044 0-3.285.912-4.028 1.817a5.7 5.7 0 0 0-.945 1.674a3.018 3.018 0 0 0-.035.109l-.008.025ZM8 7a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5ZM6.5 9.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0Z"%2F%3E%3C%2Fsvg%3E');
  border-color: var(--color-cyan);
	border: 1px solid var(--color-cyan);
    box-shadow: 0 0 5px var(--color-cyan), 0 0 10px var(--color-cyan), 0 0 15px var(--color-cyan);
}
