Pure JavaScript – Hide Div on Clicking outside

I want when i click outside the My DIV with the ID Container_ID , all the Container gets hidden through display: none;. The code that i present in JavaScript works to a certain point, because when i click inside any part of the Container_ID it returns the same behavior, the My DIV hides. And it wasn’t supposed when i’m interacting with elements Controls_CLASS + ul,li + Checkbox_CLASS inside the Container_ID itself. They should be excluded from hiding the entire Container_ID when i click on them, because they are inside.

How can I improve this?

JavaScript (font: https://codepen.io/marizawi/pen/YgaaMp)

window.addEventListener('mouseup',function(event){
    var cont = document.getElementById('Container_ID');
    if(event.target != cont && event.target.parentNode != cont){ cont.style.display = 'none';}
});

My DIV

<div class="Container_CLASS" id="Container_ID">
    <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
    <ul>
        <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
        <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
        <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
    </ul>
</div>

My DIV – CSS

div.Container_CLASS
{
    width: 50%;
    height: 350px;
    margin-top: 4px;
    margin-left: 4px;
    display: none;
    position: absolute;
    overflow-y: scroll;
}