how to move the ngbCarousel arrows away from the images

I am working on bootstrap ngbCarousel and want to know how to move the arrows in it away or outside the images. I tried to do it through css but I am unable to so do. Also, I want to change the color of the arrows as my images have white background. I tried to do so, in the inspect it is working, but when I copy the css in my component.css file , it does not affect.

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 16px;
    height: 21px;
    background: no-repeat 50% / 100% 100%;
    background-color: black;
    margin-left: -102px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
    background-color: black;
}


.carousel-controls {display: -ms-flexbox;display: flex;-ms-flex-pack: justify;justify-content: space-between;position: absolute;width: 100%;top: 43%;}

.carousel-controls a {

background-color: rgba(255, 255, 255, 0.6);

color: #000;

padding: 10px 14px;

font-size: 30px;

}

.carousel-controls a:hover {

background-color: rgba(255, 255, 255, 0.9);

}

component.html

<div class = "row">
  <div class = "col-md-2">

  </div>
  <div class = "  col-md-8">
  <ngb-carousel  [showNavigationIndicators]="showNavigationIndicators"  >
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/images/ECollections.png" width="300px" height = "300px" class="img-responsive" style="float:left;margin-left: 10px">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/images/iSurePay.jpg"  width="300px" height = "300px" class="img-responsive" style="float:left; margin-left:50px">
       </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/isurePay/isurePay-seqdiagram-1.jpg" width="400px" height = "400px" class="img-responsive" style="float:left">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/E-collection/Ecollection-Seqdiagrams-1.jpg"  width="400px" height = "400px" class="img-responsive" style="float:left; margin-left:30px">
       </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/E-collection/Ecollection-Seqdiagrams-3.jpg" width="400px" height = "400px" class="img-responsive" style="float:left">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/isurePay/isurePay-seqdiagram-3.jpg"  width="400px" height = "400px" class="img-responsive" style="float:left; margin-left:30px">
       </div>
    </ng-template>
  </ngb-carousel>

</div>
</div>