Замена checkbox на флаг

.custom-checkbox .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem;
}
.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-control-label::after {
    position: absolute;
    display: block;
    content: "";
    background: 50% / 50% 50% no-repeat;
    top: calc(0.203125rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #ffffff;
    border-color: #3867d6;
    background-color: #3867d6;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-color: #ffffff;
    transform: translateX(0.75rem);
}
.custom-control {
    padding-left: 2.3rem;
}