body {
        font-family: 'Nunito' !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-display: swap !important;
    }

    .row {
        max-height: 100vh;
        max-width: 100vw;
    }

    .player-hide {
        opacity: 0;
        visibility: hidden;
    }

    .player-show {
        opacity: 1;
        visibility: visible;
    }

    .player-container * {
        cursor: none;
        color: rgb(249, 250, 253) !important;
    }
    .detik{
        font-size: 3vw;
    }

    .player-wrapper {
        position: fixed;
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        transition: opacity 0.3s linear 2s;
    }

    .player-wrapper__img {
        height: 100%;
        width: 100%;
    }

    .player-wrapper__img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        object-position: center;
    }

    .player-wrapper__content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 3vw;
        background-color: rgba(6, 6, 15, .75);
    }

    .player-wrapper__timer {
        font-size: 7vw;
    }

    .player-header {
        font-size: 1.5vw;
        line-height: 1.15;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
	    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .8), rgba(0, 0, 0, .6));
        padding: 5px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .player-header__profile {
        max-width: 600px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
    }

    .player-header__profile-logo img {
        max-width: 100px;
        max-height: 100px;
    }

    .player-header__profile-info__name {
        font-size: 2vw;
    }

    .player_header__time {
        font-size: 3vw;
    }

    .player-header__profile-info__address {
        font-size: 1rem;
    }

    .player-slider {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .player-swiper__item {
        height: 100%;
        width: 100%;
    }

    .player-swiper__item img {
        height: 100%;
        width: 100%;
        object-position: center center;
        object-fit: fill;
    }

    .player-prayer {
        position: fixed;
        bottom: 4.6vw;
        left: 0;
        width: 100%;
        z-index: 3;
        gap: 20px;
        padding: 20px;
        padding-bottom: 0;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        font-size: 1vw;
        text-transform: capitalize;
    }

    .player-prayer .prayer-time {
        font-size: 4.5vw;
        line-height: 1;
    }
    
    .prayer-name {
        font-size: 3vw;
    }


    .player-marquee {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        font-size: 2.5vw;
        background: black;
        padding-top: 1.3vw;
    }

    .powered {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3px;
    }

    .system-logo img {
        width: 1.9vw;
        height: 1.9vw;
    }

    .player-prayer_box {
        border-radius: .5vw;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    }

    .bg-grad-1 {
        background-image: linear-gradient(to right top, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }

    .bg-grad-2 {
        background-image: linear-gradient(to right top, #0093E9 0%, #80D0C7 100%);
    }

    .bg-grad-3 {
        background-image: linear-gradient(to right top, #F4D03F 0%, #16A085 100%);
    }

    .bg-grad-4 {
        background-image: linear-gradient(to right top, #30cfd0 0%, #330867 100%);
    }

    .bg-grad-5 {
        background-image: linear-gradient(to right top, #00DBDE 0%, #FC00FF 100%);
    }

    .bg-grad-6 {
        background-image: linear-gradient(to right top, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    }

    .bg-grad-7 {
        background-image: linear-gradient(to right top, #FEE140 0%, #FA709A 100%);
    }