@import "@angular/material/theming";
@import "./styles/variables.scss";
 ::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;
}

@media (min-width: 979px) {

    :host ::ng-deep .cast-profile-img {
        border-radius: 100%;
        width: 200px;
        max-height: 200px;
    object-fit: cover;
    }
}
@media (max-width: 978px) {

    :host ::ng-deep .cast-profile-img {
        border-radius: 100%;
        width: 100px;
        max-height: 100px;
    object-fit: cover;
    }
}