.clickable {
    cursor: pointer;
}

/*Override default Chrome ugly blue style for checkboxes and radiobuttons*/
input[type="checkbox"] {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;

    /*Show the border to simulate the square*/
    border: 1px solid #555;

    /*Hide the native checkbox*/
    -webkit-appearance: none;

    height: 20px;
    width: 20px;

    cursor: pointer;
    background-color: white;
    outline: none;
}
input[type="checkbox"]:before {
    /*Fake checkbox to keep the size the same*/
    content: "✓";
    color: transparent;
}

input[type="checkbox"]:checked:before {
    /*Show actual checkmark*/
    content: "✓";
    /*Now the sign seems a bit shifted, so shift it to the center*/
    padding-left: 2px;
    color: #009900;
}

input[type="checkbox"]:hover {
    background-color: #ccc;
}


input[type="checkbox"][disabled] {
    background-color: initial;
    pointer-events: none;
    cursor: revert;
}




input[type="radio"] {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;

    /*Show the border to simulate the square*/
    border: 1px solid #555;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: white;

    /*Hide the native checkbox*/
    -webkit-appearance: none;

    width: 15px;
    height: 15px;

    cursor: pointer;
    outline: none;
}

input[type="radio"]:hover {
    background-color: #ccc;
}

input[type="radio"]:checked {
    border: 4px solid #009900;
    box-shadow: 0 0 0 1px #555;
}