/*Carousel specific css*/
.pause-btn, .play-btn,
.ssPause-btn, .ssPlay-btn {
    border: none;
    background: none;
    position: relative;
    z-index: 10;
    width: 100%;
    line-height: 0;
}

    .pause-btn svg, .play-btn svg,
    .ssPause-btn svg, .ssPlay-btn svg {
        width: 4em;
        height: 4em;
        fill: white;
        padding: 6px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

    .pause-btn .icon, .play-btn .icon {
        border: none;
        cursor: pointer;
        margin: 0;
        outline: none;
    }

    .pause-btn .icon,
    .play-btn .icon {
        background: #000;
    }

.playPause, .ssPlayPause {
    width: 100%;
    display: flex;
    padding: 2px;
    margin-top: 5px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    opacity: 0.1;
    transition: opacity 333ms;
    -webkit-transition: opacity 333ms;
    -o-transition: opacity 333ms;
    height: 5em;
}

    .playPause:hover {
	    background: rgb(0 0 0 / 15%);
        opacity: 0.75;
    }

/*Slideshow specific css*/

    .ssPlayPause:hover,
    .ssPlayPause:focus {
        opacity: 0.75;
    }

/*Common css*/

.isHidden {
    display: none;
}

.ssPause-btn.alignRight svg, .ssPlay-btn.alignRight svg,
.pause-btn.alignRight svg, .play-btn.alignRight svg {
    float: right;
}

.ssPause-btn.alignLeft svg, .ssPlay-btn.alignLeft svg,
.pause-btn.alignLeft svg, .play-btn.alignLeft svg {
    float: left;
}

.alignRight.ssPause-btn svg,
.alignRight.pause-btn svg {
    margin-right: 5px;
}

.alignLeft.ssPause-btn svg,
.alignLeft.pause-btn svg {
    margin-left: 5px;
}