input[type="checkbox"].checkbix { position: absolute;  z-index: -1; }
input[type="checkbox"].checkbix + label { position: relative; display: inline-flex; -webkit-box-align: center; align-items: center; color: inherit; transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1) 0s; margin-bottom: 0.15rem; }
input[type="checkbox"].checkbix + label > span { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; margin-right: 0.5em; width: 16px; height: 16px; background: 0px 0px; border: 0.1rem solid rgb(51, 51, 51); border-radius: 1px; cursor: pointer; transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1) 0s; position: relative; }
input[type="checkbox"].checkbix:focus + label > span { outline: 0px; border-color: rgb(0, 20, 20); box-shadow: rgba(0, 20, 20, 0.5) 0px 0px 0px 1px; }
input[type="checkbox"].checkbix:checked + label > span { background: rgb(94, 205, 98); border: 0.1rem solid transparent; animation: 0.2s cubic-bezier(0.4, 0, 0.5, 1) reveal; }
input[type="checkbox"].checkbix:checked + label > span::before { content: ""; position: absolute; top: 0px; left: 22%; margin-left: auto; margin-right: auto; border-right-width: 2px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent; transform: rotate(45deg); transform-origin: 0px 100%; animation: 125ms cubic-bezier(0.1, 0, 0.1, 1) 50ms forwards checkboxcheck; }
@keyframes reveal { 
  0%,100% { transform: scale(1); }
  33% { transform: scale(0.5); }
}
@keyframes reveal { 
  0%,100% { transform: scale(1); }
  33% { transform: scale(0.5); }
}
@keyframes checkboxcheck { 
  0% { width: 0px; height: 0px; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
  33% { width: 0.2em; height: 0.3em; transform: rotate(45deg); }
  100% { width: 0.2em; height: 0.4em; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
}
@keyframes checkboxcheck { 
  0% { width: 0px; height: 0px; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
  33% { width: 0.2em; height: 0.3em; transform: rotate(45deg); }
  100% { width: 0.2em; height: 0.4em; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
}
input[type="checkbox"].checkbix[data-size="large"] + label > span { width: 24px; height: 24px; }
input[type="checkbox"].checkbix[data-size="large"] + label > span::before { animation: 125ms cubic-bezier(0.1, 0, 0.1, 1) 50ms forwards checkboxchecklarge; border-right-width: 3px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: transparent; }
@keyframes checkboxchecklarge { 
  0% { width: 0px; height: 0px; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
  33% { width: 0.3em; height: 0.6em; transform: rotate(45deg); }
  100% { width: 0.3em; height: 0.6em; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
}
@keyframes checkboxchecklarge { 
  0% { width: 0px; height: 0px; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
  33% { width: 0.3em; height: 0.6em; transform: rotate(45deg); }
  100% { width: 0.3em; height: 0.6em; border-color: rgb(255, 255, 255); transform: rotate(45deg); }
}
input[type="checkbox"].checkbix[data-shape="circled"] + label > span { border-radius: 100%; }
input[type="checkbox"].checkbix[data-color="black"]:checked + label > span { background: rgb(17, 17, 17); }
input[type="checkbox"].checkbix[data-color="blue"]:checked + label > span { background: rgb(0, 116, 217); }
input[type="checkbox"].checkbix[data-color="red"]:checked + label > span { background: rgb(255, 65, 54); }
input[type="checkbox"].checkbix[data-color="gray"]:checked + label > span { background: rgb(170, 170, 170); }
input[type="checkbox"].checkbix[data-color="orange"]:checked + label > span { background: rgb(255, 133, 27); }

input[type=checkbox].checkbix{position:absolute;opacity:0;z-index:-1}input[type=checkbox].checkbix+label{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);margin-bottom:.15rem}input[type=checkbox].checkbix+label>span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5em;width:16px;height:16px;background:0 0;border:.1rem solid #333;border-radius:1px;cursor:pointer;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);position:relative}input[type=checkbox].checkbix:focus+label>span{outline:0;border-color:#001414;box-shadow:0 0 0 1px rgba(0,20,20,.5)}input[type=checkbox].checkbix:checked+label>span{background:#5ECD62;border:.1rem solid transparent;-webkit-animation:reveal .2s cubic-bezier(.4,0,.5,1);animation:reveal .2s cubic-bezier(.4,0,.5,1)}input[type=checkbox].checkbix:checked+label>span:before{content:"";position:absolute;top:0;left:22%;margin-left:auto;margin-right:auto;border-right:2px solid transparent;border-bottom:2px solid transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards}@-webkit-keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@-webkit-keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-size=large]+label>span{width:24px;height:24px}input[type=checkbox].checkbix[data-size=large]+label>span:before{-webkit-animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;border-right:3px solid transparent;border-bottom:3px solid transparent}@-webkit-keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-shape=circled]+label>span{border-radius:100%}input[type=checkbox].checkbix[data-color=black]:checked+label>span{background:#111}input[type=checkbox].checkbix[data-color=blue]:checked+label>span{background:#0074D9}input[type=checkbox].checkbix[data-color=red]:checked+label>span{background:#FF4136}input[type=checkbox].checkbix[data-color=gray]:checked+label>span{background:#AAA}input[type=checkbox].checkbix[data-color=orange]:checked+label>span{background:#FF851B}