[Solved] Angular ngx slick slider: Dots style is not working

Hi,

I am trying to change the style of the dots but it is not working.

Might have something wrong with classes in my html page.

please advise.

HTML:

<h1>Photo Section</h1>
<div class="row slick">
  <div class="slick-slider">
    <ngx-slick-carousel class="slick-slider"
                  #slickModal="slick-carousel"
                  [config]="slideConfig">
        <div class="slick-slider" ngxSlickItem *ngFor="let slide1 of slides1">
          <img style="cursor: pointer; width: 850px; height: 470px;" src="{{ slide1.img }}" (click)="clicked(slide1.img)"/>
        </div>
    </ngx-slick-carousel>
  </div>
</div>

My style css file:

.slider {
    width: 55rem;
  }
   
  .slide {
     
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
   
  .slick-dots {
    display: flex;
    justify-content: center;
     
    margin: 0;
    padding: 1rem 0;
     
    list-style-type: none;
     
      li {
        margin: 0 0.25rem;
      }
     
      button {
        display: flex;
        width: 1rem;
        height: 1rem;
        padding: 0;
         
        border: none;
        border-radius: 100%;
        background-color: blue;
         
        text-indent: -9999px;
      }
     
      li.slick-active button {
        background-color: red;
      }
  }
}