Change ngx-pagination CSS

Question

How can I change ngx-pagination CSS? I tried with:

:host /deep/ .ngx-pagination {
  padding-left: 0px;
}

:host /deep/.ngx-pagination .current,
.btn-info {
  background: #17a2b8 !important;
  border: transparent;
  border-radius: 20px;
}

:host /deep/.ngx-pagination .current:hover {
  background: #17a2b8 !important;
  border-radius: 20px;
  border: transparent;
}

inside component .css, but nothing changed, and I get this warning

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

How can I solve this? Thank you for your time!

EDIT:

.html

  <div class="clearfix">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>

.css

.clearfix {
  position: relative;
  right: 35%;
  left: 35%;
  font-size: 14px;
}

EDIT 2: (html after render)

<div class="clearfix">
    <pagination-controls nextlabel="Next" previouslabel="Previous" ng-reflect-previous-label="Previous"
      ng-reflect-next-label="Next">
      <pagination-template ng-reflect-max-size="7">
        <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
        <ul class="ngx-pagination ng-star-inserted" role="navigation" aria-label="Pagination">
          <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
          <li class="pagination-previous disabled ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><span class="ng-star-inserted"> Previous <span class="show-for-sr">page</span></span></li>
          <li class="small-screen"> 1 / 93 </li>
          <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
          <li class="current ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
            <!----><span class="show-for-sr ng-star-inserted">You're on page </span><span class="ng-star-inserted">1</span></li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>2</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>3</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>4</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>5</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ellipsis ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>...</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>93</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
          <li class="pagination-next ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" aria-label="Next page" class="ng-star-inserted">
              Next <span class="show-for-sr">page</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
        </ul>
      </pagination-template>
    </pagination-controls>
  </div>

Answer 1

make the following changes by setting all style to !important

component.css

.ngx-pagination {
  padding-left: 0px !important;
}

.ngx-pagination .current,
.btn-info {
  background: #17a2b8 !important;
  border: transparent !important;
  border-radius: 20px !important;
}

.ngx-pagination .current:hover {
  background: #17a2b8 !important;
  border-radius: 20px !important; 
  border: transparent !important;
}