How to change the position, size and color of controls in BootstrapVue's Carousel component?

[tesicg]

The code looks as following:

<template lang="pug">
b-carousel.d-none.d-sm-block(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
  img-width='250px'
  img-height='250px'
)
  b-carousel-slide
    template(v-slot:img)
      b-card-group(deck)
        b-card(
          img-src='https://licota.ru/system/product_category_images/attachments/55b9/ea79/7372/7609/da00/0000/home/a87c8365-bf1f-11df-a726-0015175303fd.png?1438247544' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category1
        b-card(img-src='https://licota.ru/system/product_category_images/attachments/55b6/8675/7372/7679/ac00/0000/home/a87c8368-bf1f-11df-a726-0015175303fd.png?1438025333' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category2
        b-card(img-src='https://licota.ru/system/product_category_images/attachments/55b6/7bf6/7372/762b/cb00/0000/home/49143ab4-7b92-11e4-80f3-002590d99cf6.png?1438022646' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category3
  b-carousel-slide
    template(v-slot:img)
      b-card-group(deck)
        b-card(img-src='https://licota.ru/system/product_category_images/attachments/55b6/7c0a/7372/762b/cb00/002a/home/a87c8369-bf1f-11df-a726-0015175303fd.jpeg?1438022665' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category4
        b-card(img-src='https://licota.ru/system/product_category_images/attachments/55b7/1400/7372/7664/3700/0087/home/a87c836b-bf1f-11df-a726-0015175303fd.png?1438061568' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category5
        b-card(img-src='https://licota.ru/system/product_category_images/attachments/5965/58cc/7372/7659/a100/0007/home/b9c41268-6642-11e7-8118-002590d99cf6.jpeg?1499814091' img-alt='Image' img-top tag='article')
          b-card-text.centerText
            h5
              a(href="#") Category6
</template>

<script lang="ts">
import testData from '../data/testData.json'
import { RouletteData } from '../types/roulette'
import { Category } from '../types'
import Vue from 'vue'

export default Vue.extend({
  data: (): RouletteData => ({
    slide: 0,
    sliding: false,
    catalog: [],
  }),
  mounted(): void {
    this.catalog = testData.catalog
  },
  methods: {
    onSlideStart() : void {
      this.sliding = true
    },
    onSlideEnd() : void {
      this.sliding = false
    },
  },
})
</script>

<style lang="sass">
#categoryRoulette
  margin-bottom: 40px
  margin-top: 40px
  .carousel-control-prev-icon
    margin-left: -300px
  .carousel-control-next-icon
    margin-right: -300px
  .carousel-control-next-icon::after
    color: rgb(0, 70, 140)
    content: '>'
    font-size: 55px
  .carousel-control-prev-icon::after
    color: rgb(0, 70, 140)
    content: '<'
    font-size: 55px
.centerText
  align-items: center
  display: flex
  justify-content: center
</style>

The screenshots of what I get look as following:

As you can see, there are still the original small white arrows (controls) and my bigger ones. But, my arrows are not in center, they are moved below original ones.

How to remove the original arrows (controls), center new ones and color them. I did something, but I'm not sure if it's right way.