label.check {display: block;font-weight: 400;position: relative;}
label.check input {display: none}
label.check .box{width: 100%;height: 100%;line-height: 26px;color: #000;transition: all 1.1s cubic-bezier(0.19,1,0.22,1);position: relative;overflow: hidden;cursor: pointer;font-size: 14px;padding: 4px 12px;padding-left: 30px;border: 1px solid #3333331a;margin-bottom: 8px;border-radius: 6px;background: #fff;}
label.check input:checked + .box {color:var(--black-color);}
label.check input:disabled + .box {background-color: var(--main-color);}
label.check input + .box::before {content: '';-webkit-appearance:none;background-color: transparent;border: 1px solid #999;box-shadow: 0 1px 2px rgba(0,0,0,0.05),inset 0 -15px 10px -12px rgba(0,0,0,0.05);padding: 8px;display: inline-block;position: absolute;left: 6px;z-index: 1;cursor: pointer;top: 8px;border-radius:3px;}
label.check input:checked + .box::after { content: ''; display: block; position: absolute; top: 8px; left: 12px; width: 6px; height: 14px; border: solid var(--main-color); border-width: 0 2px 2px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
label.check input:checked + .box::before {border-color:var(--main-color);}