Label not showing with select

mdb-main-label with a select which has the following classes:(mdb-select md-form colorful-select dropdown-primary) should show a label over the select initially, when user clicks the label, the label should slide up and select options show.

I literally just copied and pasted the exact code as is on your demo page. The label does not show at all. The select works but label does not show.

Here are a few things I tried to fix it. After inspecting the html/css on the page, I noticed the label was consuming the space it was supposed to and in the right area. I also noticed it has a z-index of -1 which was set from the css class (.select-wrapper + label) defined in mdb.css line 11766. I added inline style to change the z-index to 0 and that sort-of fixed the issue. Now the label does show correctly as it should. However by modifying the z-index when you initially load the page and there is no selected option in the select, when you click the label which is positioned over the select the label is receiving the click event and thus the select does not open the options. If you click just off the label and still over the select, it works as expected. So then I changed the z-index back to -1 and then tried setting the elements which was over top of the label background-color to transparent. That does not seem to fix the issue either. Last thing I tried was I removed all the classes from the select except for mdb-select and that does not fix it either.

<!--Blue select-->
<select class="mdb-select md-form colorful-select dropdown-primary">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
<label class="mdb-main-label">Blue select</label>
<!--/Blue select-->`