@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);

:root {
    --marquee-gap: 60px;
    --marquee-gradient: var(--player-background);

    --player-icon-height: 30px;
    --player-icon-width: 30px;

    --player-cover-width: 56px;
    --player-cover-height: 56px;

    --player-content-space: var(--player-height);
}

.rf-player .rf-player-wrapper .rf-socials-container {
    min-width: 0;
}

.rf-player .rf-width-control,
.rf-player .rf-player-wrapper .rf-socials-container .apps-store-content {
    max-width: 100%;
}

.rf-player .rf-player-wrapper .rf-playing-now marquee,
.rf-player .rf-player-wrapper .rf-playing-now .marquee {
    display: block;
    position: relative;
}

.rf-player.player-version-4 .rf-player-wrapper .rf-playing-now {
    position: relative;
}

.rf-player .rf-player-container .rf-player-volume-meter::after {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    content: '';
    display: block;
    position: absolute;
    background: var(--player-volume-slider-color);
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    border: 1px solid var(--player-volume-slider-color);
}

.rf-player .rf-player-wrapper .rf-playing-now .marquee {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    font-weight: 500;
}

.rf-player.player-version-4:not(.player-online) .rf-player-wrapper .rf-player-container .rf-player-container-block,
.rf-player.player-version-4:not(.player-online) .rf-player-wrapper .rf-player-container .rf-player-volume-wrapper {
    display: none;
}

.rf-player .rf-player-wrapper .rf-playing-now marquee::before,
.rf-player .rf-player-wrapper .rf-playing-now .marquee::before {
    content: '';
    width: 10%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg,var(--marquee-gradient) 20.31%,hsla(0,0%,100%,0));
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
}

.rf-player .rf-player-wrapper .rf-playing-now .marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
    white-space: nowrap;
    max-width: unset;
    min-width: 100%;
    flex-shrink: 0;
}
.rf-player.player-version-4 .rf-player-wrapper .rf-playing-now .marquee-content {
    animation: marquee 7s linear infinite;
}

.rf-player .rf-player-wrapper .rf-playing-now marquee::after,
.rf-player .rf-player-wrapper .rf-playing-now .marquee::after {
    content: '';
    width: 10%;
    height: 100%;
    display: block;
    background: linear-gradient(270deg,var(--marquee-gradient) 20.31%,hsla(0,0%,100%,0));
    right: 0;
    top: 0;
    position: absolute;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - var(--marquee-gap)));
    }
}

.rf-player .rf-player-wrapper .rf-contact-options-menu-button,
.rf-player .rf-player-socials .rf-social-icon,
.rf-player .rf-player-container .rf-player-play-pause,
.rf-player .app-list .app-store-link,
.rf-contact-option + .rf-contact-option,
.rf-whatsapp-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-player:not(.player-with-apps) .rf-player-wrapper .mobile-apps-store,
.rf-player:not(.player-online) .rf-player-wrapper .rf-player-container .rf-player-controls {
    display: none;
}

.rf-player {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: initial;
    padding: 0 10px;
}

.rf-player.player-version-3,
.rf-player.player-version-4 {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    left: 0;
}

.rf-player.player-position-top {
    top: 0;
}

.rf-player.player-position-bottom {
    bottom: 0;
}

.rf-player.player-version-3 .rf-player-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.rf-player.player-version-4 .rf-player-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
}

.rf-player.player-version-4 .rf-player-background {
    height: 100%;
    display: block;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: var(--player-cover-width);
    height: var(--player-cover-height);
    border-radius: 4px;
}

.rf-player.options-menu-open .rf-player-wrapper {
    justify-content: unset;
}

.rf-player .rf-player-cast {
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: 20px;
}

.rf-player.player-online.player-castable .rf-player-cast:hover {
    opacity: 0.9;
}

.rf-player .rf-player-cast {
    display: none;
}

.rf-player.player-online.player-castable .rf-player-cast {
    display: flex;
}

.offline-container {
    padding: 6px 12px;
    background: #cc5542;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    text-transform: uppercase;
}

.rf-player .rf-player-socials .rf-social-icon {
    border-radius: 100%;
    text-decoration: none;
}

.rf-player .rf-playing-now {
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 8px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    overflow: hidden;
    flex: 1;
}

.rf-player.player-version-4 .rf-playing-now {
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    max-width: 190px;
}

.rf-player.player-version-4 .rf-playing-now .rf-playing-info-item {
    flex-direction: column;
    align-items: flex-start;
}

.rf-player.player-version-4 .rf-playing-now .rf-playing-info-item.item-sequence-1,
.rf-player.player-version-4 .rf-playing-now .rf-playing-info-item.item-sequence-2 {
    position: absolute;
}

.rf-player .rf-player-container .rf-player-play-pause-container {
    display: flex;
    justify-content: center;
}

.rf-player .rf-playing-info-item {
    display: flex;
    align-items: center;
}

.rf-player .rf-player-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-player .rf-player-container {
    display: flex;
}

.rf-player.player-version-4 .rf-player-container {
    align-items: center;
    height: 100%;
}

.rf-player .rf-player-container .rf-player-play-pause,
.rf-player .app-list .app-store-link {
    cursor: pointer;
}

.rf-player .app-list .app-store-link {
    text-decoration: none;
}

.rf-player.player-online .offline-container,
.rf-player.player-online .player-offline {
    display: none;
}

.rf-player .rf-player-container .rf-player-play-pause-container .rf-player-play:not(.active),
.rf-player .rf-player-container .rf-player-play-pause-container .rf-player-pause:not(.active) {
    display: none;
}

.rf-player .rf-player-container .rf-player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rf-player .app-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-player:not(.player-with-socials-whatsapp) .rf-player-wrapper .rf-whatsapp,
.rf-player:not(.player-with-socials-list) .network-list {
    display: none;
}

.rf-player:not(.player-with-socials-list) .rf-socials-container .rf-contact-option.mobile-apps-store,
.rf-player:not(.player-with-apps) .rf-socials-container .rf-contact-option.rf-whatsapp {
    border: none;
}

.rf-player.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp {
    display: flex;
}

.rf-whatsapp-link {
    background: #2db442;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: inherit;
    color: #fff;
    font-size: 12px;
    gap: 6px;
    text-decoration: none;
}

.rf-whatsapp-link:hover {
    color: #fff;
}

.rf-player:not(.player-with-apps):not(.player-with-socials-whatsapp):not(.player-with-socials-list) .rf-player-wrapper .rf-contact-options-menu {
    display: none;
}

.rf-player:not(.player-castable) .rf-player-wrapper .rf-contact-options-menu {
    margin-left: unset;
}

.rf-player.player-castable .rf-player-wrapper .rf-contact-options-menu {
    margin-left: 8px;
}

.rf-player .rf-player-wrapper .rf-contact-options-menu-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    color: var(--player-icon-color);
    flex-shrink: 0;
}

.rf-player .rf-player-wrapper .rf-contact-options-menu-button:hover {
    opacity: 0.9;
}

.rf-player .rf-player-wrapper .rf-socials-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.rf-player.player-version-4 .rf-player-wrapper .rf-socials-container {
    margin-left: auto;
}

.rf-player:not(.options-menu-open) .rf-player-wrapper .rf-contact-options-menu {
    order: 1;
}

.rf-player.player-version-4 .rf-player-volume-wrapper {
    display: flex;
    align-items: center;
}
.rf-player.player-version-3 .rf-player-volume-area,
.rf-player.player-version-4 .rf-player-volume-area,
.rf-player.player-version-3 .rf-player-volume-indicator,
.rf-player.player-version-4 .rf-player-volume-indicator {
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.rf-player.player-version-4 .rf-playing-item-label {
    font-size: 12px;
}

.rf-contact-option + .rf-contact-option {
    padding-left: 12px;
    border-left: 1px solid;
    height: 100%;
    margin-left: 12px;
}

@media screen and (max-width: 720px) {
    .rf-player.player-version-3 .rf-player-wrapper .rf-player-container .rf-player-container-block .rf-player-controls .rf-player-volume,
    .rf-player.player-version-3:not(.options-menu-open) .rf-player-wrapper .rf-contact-option,
    .rf-player.player-version-3.options-menu-open .rf-player-wrapper .rf-contact-options-menu-button .rf-contact-options-open,
    .rf-player.player-version-3:not(.options-menu-open) .rf-player-wrapper .rf-contact-options-menu-button .rf-contact-options-close,
    .options-menu-open.rf-player.player-version-3 .rf-player-wrapper .rf-playing-now,
    .rf-player.player-version-3.player-online.player-castable.options-menu-open .rf-player-cast {
        display: none;
    }

    .rf-player.player-version-3:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-contact-options-menu {
        display: none;
    }

    .rf-player.player-version-3:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-socials-container {
        order: 1;
        padding: 0;
        margin-left: 8px;
    }

    .rf-player.player-version-3 .rf-contact-option + .rf-contact-option {
        border: none;
        margin: 0;
        padding: 0;
    }

    .rf-player.player-version-3.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp-link p {
        display: none;
    }

    .rf-player.player-version-3.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp-link {
        padding: 0;
        width: var(--player-icon-width);
        height: var(--player-icon-height);
        border-radius: 8px;
    }

    .rf-player.player-version-3 .rf-player-cast {
        order: 1;
        margin-left: unset;
    }

    .rf-player.player-version-3.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp {
        order: -1;
    }

    .rf-player.player-version-3:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp {
        display: flex;
    }

    .rf-player.player-version-3.options-menu-open .rf-player-wrapper .rf-contact-options-menu {
        margin-left: 16px;
    }

    .rf-player.player-version-3.player-castable.player-online .rf-playing-now {
        padding-right: 60px;
    }

    .rf-player.player-version-3 .rf-player-wrapper .rf-socials-container .mobile-apps-store {
        flex-shrink: 0;
        max-width: unset;
    }

    .rf-player.player-version-3 .rf-player-wrapper .rf-socials-container {
        gap: 8px;
        overflow: auto;
        padding-left: 1px;
        margin-left: 16px;
        direction: rtl;
    }

    .rf-player.player-version-3.options-menu-open .rf-player-wrapper .rf-socials-container {
        flex: 1;
    }
}

@media screen and (min-width: 720.97px) {
    .rf-player.player-version-3 .rf-player-wrapper .rf-contact-options-menu,
    .rf-player.player-version-3 .rf-player-wrapper .mobile-apps-store .app-store-label {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --player-cover-width: 54px;
        --player-cover-height: 54px;
    }

    .rf-player.player-version-4:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-contact-options-menu {
        display: none;
    }

    .rf-player.player-version-4:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp {
        display: flex;
    }

    .rf-player.player-version-4:not(.player-with-socials-list):not(.player-with-apps).player-with-socials-whatsapp .rf-player-wrapper .rf-socials-container {
        order: 1;
        padding: 0;
        margin-left: 8px;
    }

    .rf-player.player-version-4 .rf-contact-option + .rf-contact-option {
        border: none;
        margin: 0;
        padding: 0;
    }

    .rf-player.player-version-4 .rf-player-wrapper .rf-socials-container {
        gap: 8px;
        overflow: auto;
        padding-left: 1px;
        direction: rtl;
        margin-left: 16px;
    }

    .rf-player.player-version-4.options-menu-open .rf-player-wrapper .rf-socials-container {
        flex: 1;
    }

    .rf-player.player-version-4.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp {
        order: -1;
    }

    .rf-player.player-version-4.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp-link {
        padding: 0;
        width: var(--player-icon-width);
        height: var(--player-icon-height);
        border-radius: 8px;
    }

    .rf-player.player-version-4.player-with-socials-whatsapp .rf-player-wrapper .rf-whatsapp-link p {
        display: none;
    }

    .rf-player.player-version-4 .rf-player-wrapper .rf-socials-container .mobile-apps-store {
        flex-shrink: 0;
        max-width: unset;
    }

    .rf-player.player-version-4 .rf-player-wrapper .rf-player-container .rf-player-volume-wrapper,
    .rf-player.player-version-4:not(.options-menu-open) .rf-player-wrapper .rf-contact-option,
    .rf-player.player-version-4.options-menu-open .rf-player-wrapper .rf-contact-options-menu-button .rf-contact-options-open,
    .rf-player.player-version-4:not(.options-menu-open) .rf-player-wrapper .rf-contact-options-menu-button .rf-contact-options-close,
    .options-menu-open.rf-player.player-version-4 .rf-player-wrapper .rf-playing-now,
    .rf-player.player-version-4.player-online.player-castable.options-menu-open .rf-player-cast {
        display: none;
    }

    .rf-player.player-version-4 .rf-player-cast {
        order: 1;
        margin-left: unset;
    }

    .rf-player.player-version-4.options-menu-open .rf-player-wrapper .rf-contact-options-menu {
        margin-left: 16px;
    }
}

@media screen and (min-width: 768.97px) {
    .rf-player.player-version-4 .rf-player-wrapper .rf-contact-options-menu,
    .rf-player.player-version-4 .rf-player-wrapper .mobile-apps-store .app-store-label {
        display: none;
    }

    .rf-player.player-version-4 .rf-contact-option + .rf-contact-option {
        padding-left: 12px;
        border-left: 1px solid;
        height: 100%;
        margin-left: 12px;
    }
}