body p-checkbox > .p-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0;

    .p-checkbox-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #c1c1cc;
        border-radius: 3px;
        transition:
            background-color 200ms ease-out,
            border-color 200ms ease-out;
    }

    &.p-disabled {
        opacity: 0.5;
    }

    &-checked .p-checkbox-box {
        background-color: #428bca !important;
        border: 1px solid #888b99;
        color: #fff;
    }

    &-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
        background: #063951;
        border-color: #063951;
    }

    &:not(.p-disabled):has(.p-checkbox-input:active) .p-checkbox-box {
        border-color: #063951;
    }
}

body p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
    border-color: #888b99 !important;
}

body p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus) .p-checkbox-box {
    border-color: #428bca;
}