/* container */
.bond-toggles {
    font-family: Verdana;
    font-size: 10px;
    color: #c2c7cf;
}

/* label */
.bond-toggles label {
    color: #c2c7cf;
    cursor: pointer;
    margin-right: 14px;
    display: inline-flex;
    align-items: center;
}

/* checkbox base */
.bond-toggles input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    accent-color: #8a9099;   /* overrides purple */

    width: 11px;
    height: 11px;

    border: 1px solid #3a4253;
    border-radius: 2px;
    background: transparent;

    margin-right: 6px;

    outline: none;
    box-shadow: none;
}

/* hover */
.bond-toggles input[type="checkbox"]:hover {
    border-color: #6b7280;
}

/* checked */
.bond-toggles input[type="checkbox"]:checked {
    background-color: #8a9099;
    border-color: #8a9099;
}

/* remove ALL focus rings */
.bond-toggles input[type="checkbox"]:focus,
.bond-toggles input[type="checkbox"]:focus-visible,
.bond-toggles input[type="checkbox"]:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: #6b7280;
}