.checkbox-container{--input-focus:var(--fairway-500,#2d8cf0);--input-out-of-focus:var(--gray-300,#ccc);--bg-color:var(--gray-0,#fff);--bg-color-alt:var(--gray-500,#666);--main-color:var(--gray-700,#323232);position:relative;cursor:pointer;display:inline-block}.checkbox-container input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.checkbox-checkmark{width:24px;height:24px;position:relative;top:0;left:0;border:2px solid var(--main-color);border-radius:5px;box-shadow:4px 4px var(--main-color);background-color:var(--input-out-of-focus);transition:all .3s;display:block;box-sizing:border-box}.checkbox-checkmark.small{width:16px;height:16px}.checkbox-checkmark.large{width:32px;height:32px}.checkbox-container input:checked~.checkbox-checkmark{background-color:var(--input-focus)}.checkbox-checkmark:after{content:"";width:7px;height:15px;position:absolute;top:2px;left:8px;display:none;border:solid var(--bg-color);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);box-sizing:border-box}.checkbox-checkmark.small:after{width:4px;height:8px;top:1px;left:4px;border-width:0 2.5px 2.5px 0}.checkbox-checkmark.large:after{width:10px;height:20px;left:9px;top:0;border-width:0 4px 4px 0}.checkbox-container input:checked~.checkbox-checkmark:after{display:block}