css issue with overflow and opacity

sample.html

<!-- html on page looks something like this: -->

<div id="selectAdvancedFilters" class="panel bg_white boxShadow"> <!-- ELEMENT A -->
  <div class="insidePanel bg--light-gray pa-all--m">
    <div id="qSelection" class="dropDown left" style="width: 18%;">
      <label for="selectQ" class="mid_gray pa-bottom--t">Items</label>
      <select id="selectQ" class="dark-gray" style="width: 100%;">
        <option value="all">all</option>
        <option dpid="5b69eee0e3bad50c9233fa2e">q option 1</option>
        <option dpid="5b69f1fde3bad50c9233fa35">q option 2</option>
        <option dpid="5b69f2e2e3bad50c9233fa3e">q option 3</option>
        <option dpid="5b6aedd7f81c891b3ea9e813">q option 4</option></select>
      <div id="qSingle" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;" class="hide">
      </div>
    </div>
    <div class="clear"></div>
    <div class="qOptionsCustomMenu"><div data-view="drop-down-checkboxes-menu-view" class="dropDownMenuContainer"><form>
    <div class="multiselect">
        <dl class="selectBox">
            <dt>Selected (4)<span class="pa-left--h"><i class="fas fa-sort"></i></span></dt>
        </dl>
        <div id="checkboxes" style="overflow: hidden; display: block;"> <!-- ELEMENT B -->
            <label class="menuLabel">
                Selected (4)
            </label>
                <label for="5b69eee0e3bad50c9233fa2e">
                    <input type="checkbox" id="5b69eee0e3bad50c9233fa2e" checked="checked">q option 1
                </label>
            
                <label for="5b69f1fde3bad50c9233fa35">
                    <input type="checkbox" id="5b69f1fde3bad50c9233fa35" checked="checked">q option 2
                </label>
            
                <label for="5b69f2e2e3bad50c9233fa3e">
                    <input type="checkbox" id="5b69f2e2e3bad50c9233fa3e" checked="checked">q option 3
                </label>
            
                <label for="5b6aedd7f81c891b3ea9e813">
                    <input type="checkbox" id="5b6aedd7f81c891b3ea9e813" checked="checked">q option 4
                </label>
            
        </div>
    </div>
</form></div></div>
  </div>
</div>

<!--
The classes being applied are these:

.panel {
    height: auto;
    display: block;
    overflow: hidden;
    opacity: 0.95;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    transition: opacity 3s ease-in 0s;
}
.insidePanel {
    margin: 0;
    width: 100%;
    display: block;
    height: auto;
    overflow: hidden;
}

When I uncheck the following attributes from each class, the #checkboxes element above is visible like I want:

.panel {
    overflow: hidden;
    opacity: 0.95;
}
.insidePanel {
    overflow: hidden;
}

If I create more specific classes for these the two changes neeed above and use those instead, it does not work. 
-->