bootstrap-vue меняет положение ‹b-modal›

По умолчанию <b-modal> отображается вверху страницы. Когда к тегу добавлен атрибут centered. Он по центру.

Однако я хотел бы показать модальное окно с некоторым промежутком под верхней частью страницы.
Модальное окно отображается при открытии домашней страницы.

AppModal.vue

<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
    //...
</b-modal>
</template>
<script>
export default {
  data () {
    return {
      mymodal: ['mymodal']
    }
  },
  methods: {
    hideModal () {
      this.$refs.thisModalRef.hide()
    },
    showModal () {
      this.$refs.thisModalRef.show()
    }
  }
}
</script>

<style scoped>
  .mymodal > div {
    position: absolute;
    top: 300px;
    right: 100px;
    background-color: yellow;
  }
</style>

AppHome.vue

<template>
  <div>
    // omitted
    <AppModal ref="modalRef"></AppModal>
  </div>
</template>

<script>
import AppModal from './AppModal'

export default {
  components: {
    AppModal
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    showModal: function () {
      this.$refs.modalRef.showModal()
    }
  },
  mounted () {
    this.showModal()
  }
}
</script>

<style scoped>
// ommitted
</style>

источник HTML, связанный с модальным окном

<div id="__BVID__16___BV_modal_outer_">
   <div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
      <div class="modal-dialog modal-lg">
         <div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
            <!---->
            <div id="__BVID__16___BV_modal_body_" class="modal-body">
               // ommitted
            </div>
            <!---->
         </div>
      </div>
   </div>
   <div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>

Как видите, класс mymodal применен правильно. Но div .modal-dialog не имеет свойств css, которые я ему даю.

реальные свойства css, найденные в инструментах разработчика

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

Я попытался добавить собственный класс в <b-modal> и стилизовать его. Ничего не получилось. Пожалуйста помоги.