.checkbox-component{position:relative;display:inline-flex;cursor:pointer}.checkbox-component__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkbox-component__box{position:relative;width:100%;transition:all .2s ease}.checkbox__check{width:16px;height:16px;color:var(--white-color);opacity:0;transition:opacity .2s ease}.checkbox-component__input:checked+.checkbox-component__box .checkbox__check{opacity:1}.checkbox__label{margin-left:8px;font-size:18px;color:#333}.checkbox-component__input:checked+.checkbox-component__box .checkbox__label{color:var(--white-color)}.checkbox__icon{display:flex;align-items:center;justify-content:center;background-color:var(--white-color);height:40px;width:40px;padding:8px;border:1px solid var(--primary-color);border-radius:6px;color:var(--primary-color);font-weight:500;font-size:16px;line-height:150%}.checkbox-group{display:flex;flex-direction:column;gap:16px}.checkbox-group__label{color:#000;font-size:20px;font-style:normal;line-height:150%}.checkbox-group__options{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;.checkbox-component{width:24%}}.checkbox-group__options--vertical{flex-direction:column;gap:16px}@media (max-width:768px){.checkbox-group__options{flex-direction:column;.checkbox-component{width:100%}}}.checkbox-group--error{border:1px solid var(--error-color);border-radius:8px;padding:16px}.checkbox{& .checkbox__label{display:flex;align-items:center;gap:8px}& .checkbox__indicator{display:flex;align-items:center;gap:.6rem;cursor:pointer;position:relative}& .checkbox__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}& .checkbox__custom{top:0;left:0;height:1.125rem;width:1.125rem;border:.0625rem solid var(--primary-color);border-radius:4px;&:after{content:"";position:absolute;display:none;left:40%;top:15%;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}}& .checkbox__input:checked~.checkbox__custom{background-color:var(--primary-color);border-color:var(--primary-color)}& .checkbox__text{color:var(--primary-color)}& .checkbox__input:checked~.checkbox__custom:after{display:block}&.checkbox--error{border:1px solid var(--error-color);border-radius:8px;padding:16px}}