css credits to iCare

src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html

@@ -3,8 +3,8 @@
     <mat-card-content>
         <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
             <ng-template let-item pTemplate="item">
-          <div class="row justify-content-md-center mat-card mat-card-flat">
-            <div class="col-12">
+                <div class="row justify-content-md-center mat-card mat-card-flat col-12 carousel-item">
+                    <div class="col-12 bottom-space">
                         <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
                             <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
                         </a>

src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss

@@ -1,7 +1,64 @@
 @import "~@angular/material/theming";
 @import "~styles/variables.scss";
-.actor-background {
-  .dark & {  
-    background: $backgroundTint-dark;
+ ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
+body .ui-carousel .ui-carousel-content .ui-carousel-next {
+    background-color: #ffffff;
+    border: solid 1px rgba(178, 193, 205, 0.64);
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    margin: 0.2em;
+    color: #333333;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
 }
+
+::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev:not(.ui-state-disabled):hover,
+body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled):hover {
+    background-color: #ffffff;
+    color: #000;
+    border-color: solid 1px rgba(178, 193, 205, 0.64);
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item>.ui-button {
+    border-color: transparent;
+    background-color: transparent;
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon {
+    width: 20px;
+    height: 6px;
+    background-color: rgba(255, 255, 255, 0.44);
+    margin: 0 0.2em;
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon::before {
+    content: " ";
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon {
+    background-color: #FFF;
+}
+
+.carousel-item {
+    text-align: center;
+}
+
+::ng-deep .ui-carousel-next {
+    background-color: #ffffff;
+    border: solid 1px rgba(178, 193, 205, 0.64);
+    border-radius: 50%;
+    margin: 0.2em;
+    color: #333333;
+    transition: color 0.2s;
+}
+
+::ng-deep .ui-carousel-content button:focus {
+    outline: none;
+}
+
+.bottom-space {
+    padding-bottom: 10px;
 }