.pf-player-container {
    width: 100%;
    height: 100%;
    user-select: none;
    display: inherit;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    font-family: "Arial";
    overflow: hidden;

    &:focus {
        border: none;
        outline-width: 0;
    }

    .pf-default-wrapper {
        background-color: black;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .pf-player, .pf-player video, .pf-player audio {
        width: 100%;
        height: 100%;
        display: inherit;
    }

    .pf-player {
        .pf-audio-image {
            height: 100%;
            margin:0 auto;
            text-align: center;
            display: block;
        }
    }

    .pf-ads {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .pf-controls {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
    }

}

.mstr-hide-controls {
    animation: hide-bars-animation 0.4s forwards;
}

.pf-ui-element-hidden {
    visibility: hidden !important;
    width: 0px !important;
}

.mstr-container,
.mstr-container * {
    box-sizing: border-box;
}
.mstr-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mstr-bottombar {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    background-image: linear-gradient(
        to top,
        hsl(0, 0%, 0%) 0%,
        hsla(0, 0%, 0%, 0.738) 19%,
        hsla(0, 0%, 0%, 0.541) 34%,
        hsla(0, 0%, 0%, 0.382) 47%,
        hsla(0, 0%, 0%, 0.278) 56.5%,
        hsla(0, 0%, 0%, 0.194) 65%,
        hsla(0, 0%, 0%, 0.126) 73%,
        hsla(0, 0%, 0%, 0.075) 80.2%,
        hsla(0, 0%, 0%, 0.042) 86.1%,
        hsla(0, 0%, 0%, 0.021) 91%,
        hsla(0, 0%, 0%, 0.008) 95.2%,
        hsla(0, 0%, 0%, 0.002) 98.2%,
        hsla(0, 0%, 0%, 0) 100%
    );
}

.mstr-centerbar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
}

.mstr-items {
    display: table;
    position: relative;
}
.mstr-item {
    color: white;
    display: table-cell;
    width: auto;
    vertical-align: middle;

    >div {
        padding: 0 10px;
        &.mstr-standard-uiElementHidden {
            padding: 0;
        }
    }
}

.mstr-item--fill {
    width: 100%;
}


@keyframes show-bars-animation {
    0% {
        width: 0;
        opacity: 0;
    }

    1% {
        width: 100%;
        opacity: 0.01;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes hide-bars-animation {
    0% {
        width: 100%;
        opacity: 1;
    }

    99% {
        width: 100%;
        opacity: 0.01;
    }

    100% {
        width: 0;
        opacity: 0;
    }
}