:root { 
  --def-background:white;
  --def-background-checked:#409759;
  --def-border:#dcdcdc;
  --def-border-hover:#98c8a8;
  --def-border-focus:rgba(0,0,0,.1);
  --def-tick:white;

  --rad-def-background:white;
  --rad-def-checked-background:#409759;
  --rad-def-border:#dcdcdc;
  --rad-def-border-hover:#98c8a8;
  --rad-def-tick:white;
/*  
  --chk-background:white;
  --chk-background-checked:#409759;
  --chk-border:#dcdcdc;
  --chk-border-hover:#98c8a8;
  --chk-border-focus:rgba(0,0,0,.1);
  --chk-tick:white;

  --rad-background:white;
  --rad-checked-background:#409759;
  --rad-border:#dcdcdc;
  --rad-border-hover:#98c8a8;
*/
}

.ui.form.dark,
.ui.modal.dark {
  --def-background:#222222;
  --def-background-checked:#4573e2;
  --def-border:#505154;
  --def-border-hover:#36518e;
  --def-border-focus:rgba(255,255,255,.1);
  --def-tick:white;
  --def-label:rgb(255,255,255,.9);

  --rad-def-background:#222222;
  --rad-def-checked-background:#4573e2;
  --rad-def-border:#505154;
  --rad-def-border-hover:#36518e;
  --rad-def-label:rgb(255,255,255,.9);
  --rad-def-tick:white;

/*
  --chk-background:#222222;
  --chk-border:#505154;
  --chk-border-hover:#36518e;
  --chk-border-focus:rgba(255,255,255,.1);
  --chk-background-checked:#4573e2;
  --chk-tick:white;
  --chk-label:rgb(255,255,255,.9);

  --rad-background:#222222;
  --rad-checked-background:#4573e2;
  --rad-border:#505154;
  --rad-border-hover:#36518e;
  --rad-label:rgb(255,255,255,.9);
  --rad-tick:white;
*/
}

label.checkbox {
  margin-top: 25px !important;
  cursor: pointer;
  position: relative;
}

.dark .nomar label.checkbox { margin-top: 0px !important; }
.dark .minmar label.checkbox { margin-top: 10px !important; }

label.checkbox {
  --c-background: var(--chk-background, var(--def-background));
  --c-border-focused: var(--chk-border-focus, var(--def-border-focus));
  --c-border: var(--chk-border,var(--def-border));
  --c-border-hover: var(--chk-border-hover,var(--def-border-hover));
  --c-background-active: var(--chk-background-checked, var(--def-background-checked));
  --c-tick: var(--chk-tick, var(--def-tick));
}

label.checkbox .chklabel {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  text-transform: none;
  min-height: 21px;
  line-height: 21px;
  user-select: none;
  display: inline-block;
  white-space: nowrap;
}
.dark label.checkbox .chklabel { color: var(--chk-label, var(--def-label)); }

label.checkbox input,
label.checkbox svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}
label.checkbox input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: absolute !important;
  left: 0;
  outline: none !important;
  background: var(--c-background) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: box-shadow 0.3s !important;
  box-shadow: inset 0 0 0 var(--s, 2px) var(--b, var(--c-border)) !important;
}
label.checkbox input:focus, 
label.checkbox input:hover {
  --s: 2px;
  --b: var(--c-border-hover) !important;
}
label.checkbox input:checked {
  --b: var(--c-background-active) !important;
}
label.checkbox input:focus:checked + svg {
  box-shadow: 0 0 0 3px var(--c-border-focused) !important;
  border-radius: 5px;
}

label.checkbox svg {
  pointer-events: none;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--stroke, var(--c-background-active));
  position: absolute;
  top: 0;
  left: 0;
  width: 21px;
  height: 21px;
  transform: scale(var(--scale, 1)) translateZ(0);
}
label.checkbox.path input:checked {
  --s: 2px;
  transition-delay: 0.4s;
}
.checkbox.path input:checked + svg {
  --a: 16.1 86.12;
  --o: 102.22;
}
.checkbox.path svg {
  stroke-dasharray: var(--a, 86.12);
  stroke-dashoffset: var(--o, 86.12);
  transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}
.checkbox.bounce {
  --stroke: var(--c-tick);
}
.checkbox.bounce input:checked {
  --s: 11px;
}
.checkbox.bounce input:checked + svg {
  -webkit-animation: bounce 0.4s linear forwards 0.2s;
          animation: bounce 0.4s linear forwards 0.2s;
}
.checkbox.bounce svg {
  --scale: 0;
}

@-webkit-keyframes bounce {
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/*****************/
/*     Radio     */
/*****************/

.ui.radio.checkbox label { cursor: pointer; }
.dark .ui.radio.checkbox label, 
.dark .ui.radio.checkbox input:is(:focus,:active) ~ label { color:var(--rad-label, var(--rad-def-label)); }

.ui.radio.checkbox label:before {
    background-color: var(--rad-background, var(--rad-def-background));
    border: 2px solid var(--rad-border, var(--rad-def-border));
}

.ui.radio.checkbox input:checked ~ label::before {
  background-color: var(--rad-checked-background, var(--rad-def-checked-background));
  border-color: var(--rad-checked-background, var(--rad-def-checked-background));
}

.ui.radio.checkbox:hover label::before {
  border: 2px solid var(--rad-border-hover, var(--rad-def-border-hover));
}

.ui.radio.checkbox input:checked ~ label::after { background-color: var(--rad-tick, var(--rad-def-tick)); }