.ngparatileaudio-stage {
    background: var(--ngparatileaudio-stage-background);
    overflow: hidden;
    border-radius: var(--ngparatileaudio-stage-radius);
    position: relative;
    padding: var(--ngparatileaudio-padding);
    box-shadow: var(--ngparatileaudio-shadow);
}

.ngparatileaudio-cover {
    display: block;
}

.ngparatileaudio-main {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: var(--ngparatileaudio-padding);
}

.ngparatileaudio-withcover .ngparatileaudio-stage {
    display: flex;
    align-items: stretch;
    gap: var(--ngparatileaudio-padding);
}

.ngparatileaudio-withcover .ngparatileaudio-stage-textleftpictureright .ngparatileaudio-cover,
.ngparatileaudio-withcover .ngparatileaudio-stage-picturelefttextright .ngparatileaudio-cover {
    width: var(--ngparatileaudio-picturewidth);
}

.ngparatileaudio-withcover .ngparatileaudio-stage-textleftpictureright .ngparatileaudio-main,
.ngparatileaudio-withcover .ngparatileaudio-stage-picturelefttextright .ngparatileaudio-main
{
    width: calc(100% - var(--ngparatileaudio-picturewidth));
}



.ngparatileaudio-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ngparatileaudio-cover-radius);
}

.ngparatileaudio-hover a img {
    transition: filter 0.5s ease;
}

.ngparatileaudio-hover a:hover img {
    filter: brightness(1.2);
}

.ngparatileaudio-text h3 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: var(--ngparatileaudio-header-weight);
    font-size: var(--ngparatileaudio-header-size);
    text-transform: var(--ngparatileaudio-header-texttransform);
    text-align: var(--ngparatileaudio-header-align);
    color: var(--ngparatileaudio-header-color);
    display: block;
}

.ngparatileaudio-text {
    flex-grow: 1;
}

.ngparatileaudio-text p {
    font-weight: var(--ngparatileaudio-text-weight);
    font-size: var(--ngparatileaudio-text-size);
    text-transform: var(--ngparatileaudio-text-texttransform);
    text-align: var(--ngparatileaudio-text-align);
    color: var(--ngparatileaudio-text-color);
}

.ngparatileaudio-text p a,
.ngparatileaudio-text p a:hover {
    color: var(--ngparatileaudio-text-color);
}

.ngparatileaudio-control {
    display: flex;
    align-items: center;
    justify-content: var(--ngparatileaudio-control-alignment);
    box-sizing: border-box;
    color: var(--ngparatileaudio-control-color);
    -webkit-user-select: none;
    user-select: none;
    gap: 5px;
}

.ngparatileaudio-control .ngparatileaudio-control-play,
.ngparatileaudio-control .ngparatileaudio-control-pause
{
    display: block;
    width: var(--ngparatileaudio-control-size);
    height: var(--ngparatileaudio-control-size);
    -webkit-tap-highlight-color: transparent;
}

.ngparatileaudio-control .ngparatileaudio-control-forward,
.ngparatileaudio-control .ngparatileaudio-control-rewind
{
    display: block;
    width: calc(var(--ngparatileaudio-control-size) * 0.75);
    height: calc(var(--ngparatileaudio-control-size) * 0.75);
    -webkit-tap-highlight-color: transparent;
}


.ngparatileaudio-control-rewind {
    opacity: 0.3;
}

.ngparatileaudio-control-forward {
    opacity: 0.3;
}

.ngparatileaudio-control .ngparatileaudio-control-pause {
    display: none;
    cursor: pointer;
}

.ngparatileaudio-control .ngparatileaudio-control-play {
    cursor: pointer;
}


.ngparatileaudio-playing .ngparatileaudio-control-rewind {
    opacity: 1;
    cursor: pointer;
}

.ngparatileaudio-playing .ngparatileaudio-control-forward {
    opacity: 1;
    cursor: pointer;
}

.ngparatileaudio-playing .ngparatileaudio-hover .ngparatileaudio-control-rewind,
.ngparatileaudio-playing .ngparatileaudio-hover .ngparatileaudio-control-forward,
.ngparatileaudio-hover .ngparatileaudio-control-pause,
.ngparatileaudio-hover .ngparatileaudio-control-play {
    transition: transform 0.2s ease;
}

.ngparatileaudio-playing .ngparatileaudio-hover .ngparatileaudio-control-rewind:hover,
.ngparatileaudio-playing .ngparatileaudio-hover .ngparatileaudio-control-forward:hover,
.ngparatileaudio-hover .ngparatileaudio-control-pause:hover,
.ngparatileaudio-hover .ngparatileaudio-control-play:hover {
    transform: scale(1.2,1.2);
}


.ngparatileaudio-playing .ngparatileaudio-control .ngparatileaudio-control-pause {
    display: block;
}

.ngparatileaudio-playing .ngparatileaudio-control .ngparatileaudio-control-play {
    display: none;
}


.ngparatileaudio-scrubber {
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.ngparatileaudio-scrubber-current {
    min-width: 4em;
    color: var(--ngparatileaudio-control-color);
}

.ngparatileaudio-scrubber-total {
    min-width: 4em;
    text-align: right;
    color: var(--ngparatileaudio-control-color);
}

.ngparatileaudio-scrubber input {
    display: block;
    width: calc(100% - 8em);
    position: relative;
    -webkit-appearance: none;
    padding: 0;
    height: 20px;
    outline: none;
    background: var(--ngparatileaudio-control-background);
    border-radius: 10px;
}

.ngparatileaudio-scrubber input:focus-visible {
    outline: revert;
}

.ngparatileaudio-scrubber input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--ngparatileaudio-control-color);
    cursor: pointer;
}

.ngparatileaudio-hover .ngparatileaudio-scrubber input::-webkit-slider-thumb {
    transition: transform 0.2s ease;
}

.ngparatileaudio-hover .ngparatileaudio-scrubber input::-webkit-slider-thumb:hover {
    transform: scale(1.2,1.2);
}

.ngparatileaudio-scrubber input::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--ngparatileaudio-control-color);
    cursor: pointer;
    border: none;
}

.ngparatileaudio-hover .ngparatileaudio-scrubber input::-moz-range-thumb {
    transition: transform 0.2s;
}

.ngparatileaudio-hover .ngparatileaudio-scrubber input::-moz-range-thumb:hover {
    transform: scale(1.2,1.2);
}

.ngparatileaudio-scrubber input::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    cursor: pointer;
}

.ngparatileaudio-scrubber input::-moz-range-track {
    width: 100%;
    height: 20px;
    cursor: pointer;
}

.ngparatileaudio-stage-textleftpictureright .ngparatileaudio-cover,
.ngparatileaudio-stage-texttoppicturebottom .ngparatileaudio-cover {
    order: 2;
}
.ngparatileaudio-stage-textleftpictureright .ngparatileaudio-main,
.ngparatileaudio-stage-texttoppicturebottom .ngparatileaudio-main {
    order: 1;
}

.ngparatileaudio-stage-texttoppicturebottom,
.ngparatileaudio-stage-picturetoptextbottom
{
    flex-flow: column;
}



@media (max-width: 1023px) {
    .ngparatileaudio-withcover .ngparatileaudio-stage {
        flex-flow: column;
    }

    .ngparatileaudio-withcover .ngparatileaudio-stage-textleftpictureright .ngparatileaudio-cover,
    .ngparatileaudio-withcover .ngparatileaudio-stage-picturelefttextright .ngparatileaudio-cover {
        width: 100%;
    }

    .ngparatileaudio-withcover .ngparatileaudio-stage-textleftpictureright .ngparatileaudio-main,
    .ngparatileaudio-withcover .ngparatileaudio-stage-picturelefttextright .ngparatileaudio-main
    {
        width: 100%;
    }
}

