.mtd-checkbox {    
    padding: 4px;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    white-space: nowrap;
    font-weight: 500;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.mtd-checkbox-icon-on {
    margin: 4px;
    width: 1.4em;
    height: 1.4em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: green" viewBox="0 0 576 512"><path xmlns="http://www.w3.org/2000/svg" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z" /></svg>') no-repeat;
    background-origin: content-box;
    background-position: center;
}

.mtd-checkbox-icon-off {
    margin: 4px;
    width: 1.4em;
    height: 1.4em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: black" viewBox="0 0 576 512"><path xmlns="http://www.w3.org/2000/svg" d="M384 64H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zM64 256c0-70.741 57.249-128 128-128 70.741 0 128 57.249 128 128 0 70.741-57.249 128-128 128-70.741 0-128-57.249-128-128zm320 128h-48.905c65.217-72.858 65.236-183.12 0-256H384c70.741 0 128 57.249 128 128 0 70.74-57.249 128-128 128z" /></svg>') no-repeat;
    background-origin: content-box;
    background-position: center;
}