Dojo Design Elements in Modal Windows in XPages - css

Question

I have created a modal and then put some design elements in it. Every components work great except Dojos. They are working but when i click on it to chose date the windows stays behind of modal. so I can not control it. I tried z-index or similar thinks but I could not succeeded. I could not get it front. This problem happens only in Modal. Otherwise All of Dojo elements works 100%. So I do now know Where to start digging :(
<!-- This codes below is the whole modal dialog codes.. -->
<xp:link escape="true" id="addUnvan" styleClass="text-primary list-icons-item"
rendered="#{javascript:document1.isEditable()}">
<xp:this.attrs>
<xp:attr name="type" value="button"></xp:attr>
<xp:attr name="data-target" value="#modal_theme_custom"></xp:attr>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-popup" value="popover"></xp:attr>
<xp:attr name="data-trigger" value="hover"></xp:attr>
<xp:attr name="data-content"
value="Çalışanın görevi değiştiyse onun eski görevini yeni görevinden bir gün önce bitecek şekilde kapatır. Yeni unvan eklerim.."></xp:attr>
<xp:attr name="data-original-title" value="Ne Mi Yaparım?"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
<i class="icon-stack-plus"></i>
</xp:link>
<!-- This codes below is the whole modal dialog codes.. -->
<div id="modal_theme_custom" class="modal fade" tabindex="-1"
style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<xp:div id="divUnvanContent" styleClass="card">
<div class="card-header header-elements-inline">
<h5 class="card-title">
<xp:text escape="true" id="computedField5" value="#{unvanDoc.AdSoyad}"
rendered="false">
</xp:text>
</h5>
<div class="header-elements">
<div class="list-icons">
</div>
</div>
</div>
<div class="card-body">
<div class="modal-body">
<xp:div styleClass="bootstrap-duallistbox-container row moveonselect">
<xp:div styleClass="col-lg-12 col-md-12">
<xp:div id="divGTarih" styleClass="form-group row">
<xp:label value="Geçerlilik Tarihi:" id="label2"
styleClass="col-form-label col-lg-3 col-md-3"></xp:label>
<xp:div styleClass="col-lg-9 col-md-9">
<xe:djDateTextBox styleClass="form-control pickadate picker__input"
id="BasTarih" value="#{document1.BasTarih}">
<xe:this.converter>
<xp:convertDateTime type="date"
dateStyle="short">
</xp:convertDateTime>
</xe:this.converter>
</xe:djDateTextBox>
<xe:djDateTextBox id="BitTarih" value="#{document1.BitTarih}"
styleClass="ml-6">
<xe:this.converter>
<xp:convertDateTime type="date"
dateStyle="short">
</xp:convertDateTime>
</xe:this.converter>
</xe:djDateTextBox>
</xp:div>
</xp:div>
</xp:div>
</xp:div>
</div>
</div>
</xp:div>
</div>
</div>
</div>
UPDATE
I could not find the correct z-index property of DojoComponent I mean correct class. Please find the picture of code. When click on it I see lots of classes. I have tried so many classes but I am tired of trying :((( is there any clue that i can follow..
Thanks in advance...