/* Shared consumer checkbox appearance for desktop and mobile. */
:root {
    --hm-checkbox-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M1.5%206L4.5%209L10.5%203'%20fill='none'%20stroke='%23111'%20stroke-width='1.5'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E");
}

input[type="checkbox"]:not(.selec_chk):not([role="switch"]) {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    box-sizing: border-box !important;
    color: #111 !important;
    vertical-align: middle;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
}

input[type="checkbox"]:not(.selec_chk):not([role="switch"]):checked {
    background-color: #fff !important;
    background-image: var(--hm-checkbox-check) !important;
    background-repeat: no-repeat !important;
    background-position: calc(50% - 1px) calc(50% - 1px) !important;
    background-size: 12px 12px !important;
}

.chk_box input[type="checkbox"].selec_chk,
.fregister_agree input[type="checkbox"].selec_chk,
.member_cert_refresh_agree input[type="checkbox"].selec_chk,
.hm-write-secret input[type="checkbox"].selec_chk {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.chk_box input[type="checkbox"] + label span,
.fregister_agree input[type="checkbox"] + label span,
.member_cert_refresh_agree input[type="checkbox"] + label span,
.hm-write-secret input[type="checkbox"] + label > span {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    box-sizing: border-box !important;
    vertical-align: middle;
}

.chk_box input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span,
.hm-write-secret input[type="checkbox"]:checked + label > span {
    border-color: #111 !important;
    background-color: #fff !important;
    background-image: var(--hm-checkbox-check) !important;
    background-repeat: no-repeat !important;
    background-position: calc(50% - 1px) calc(50% - 1px) !important;
    background-size: 12px 12px !important;
}

.chk_box input[type="checkbox"]:checked + label span:after,
.fregister_agree input[type="checkbox"]:checked + label span:after,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span:after,
.hm-write-secret input[type="checkbox"]:checked + label > span:after {
    display: none !important;
    content: none !important;
}

input[type="checkbox"]:not(.selec_chk):not([role="switch"]):focus-visible,
input[type="checkbox"].selec_chk:focus-visible + label span {
    outline: 2px solid #4b86e8 !important;
    outline-offset: 2px !important;
}

input[type="checkbox"]:not(.selec_chk):not([role="switch"]):disabled,
input[type="checkbox"].selec_chk:disabled + label span {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

@media (max-width: 1024px) {
    input[type="checkbox"]:not(.selec_chk):not([role="switch"]) {
        flex-basis: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .chk_box input[type="checkbox"] + label span,
    .fregister_agree input[type="checkbox"] + label span,
    .member_cert_refresh_agree input[type="checkbox"] + label span,
    .hm-write-secret input[type="checkbox"] + label > span {
        width: 16px !important;
        height: 16px !important;
    }
}