@font-face {
    font-family: 'Yekan';
    src: url('../fonts/Yekan.eot') format('eot'), url('../fonts/Yekan.woff') format('woff'), url('../fonts/Yekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BYekan';
    src: url('../fonts/BYekan-webfont.eot') format('eot'), url('../fonts/BYekan-webfont.woff') format('woff'), url('../fonts/BYekan-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BYekan2';
    src: url('../fonts/BYekan-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'BYekan', serif;
    height: 100% !important;
}

:root {
    /*--tarna-color: #00b8d4;*/
    /*--tarna-color: RGBA(255,193,7,var(--bs-bg-opacity,1)) !important;*/
    --tarna-color: #029afb;
    --dark-color: #212121;
    --background-gradient-color: linear-gradient(180deg, var(--dark-color) 0%, #232323 21.98%, #3C3C3C 70.42%, #3E3E3E 100%);
}

::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

*, a:active {
    -webkit-tap-highlight-color: transparent;
}

a, img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}

input, input:after, input:before, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

    input:focus-visible {
        outline: none;
    }

p, ul {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.main, body, html {
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    height: 100%;
    max-width: 523px;
    margin: 0 auto;
    overflow: hidden;
}

html {
    background: var(--background-gradient-color);
    max-width: unset !important;
    width: 100%;
}

.main {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #fff;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    transition: all .5ms ease;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

    .main * {
        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .main .player-page {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: fixed;
        overflow: hidden;
        top: 0;
        right: 50%;
        left: 0;
        transform: translate(50%) scale(1.005);
        width: 101vw;
        max-width: 524px;
        height: 100vh;
        transition: transform .3s ease-in-out;
        z-index: 1000;
    }

        .main .player-page .player-container {
            position: relative;
            left: 0;
            width: 100vw;
            max-width: 523px;
            z-index: 11;
            transform: translateZ(400px);
            height: 100vh;
            background: #000;
            overflow: hidden;
        }

            .main .player-page .player-container .main-player {
                height: 100%;
                position: relative;
                overflow: scroll;
                width: calc(100% - 16px) !important;
                margin: 0 auto;
            }

                .main .player-page .player-container .main-player .main-player-body {
                    width: 100%;
                    height: calc(100vh - env(safe-area-inset-bottom));
                }

                    .main .player-page .player-container .main-player .main-player-body .main-back {
                        width: 100%;
                        top: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: calc(91vh - env(safe-area-inset-bottom));
                        overflow: hidden;
                        position: absolute;
                        border-radius: 0 0 50px 50px;
                        box-shadow: 0 0 20px rgba(0,0,0,.35000000000000003);
                        background: linear-gradient(180deg,rgba(33,33,33,.3) .5%,rgba(33,33,33,.3) 20%,rgba(33,33,33,.7) 30%,rgba(33,33,33,.9) 40%,#212121 49%);
                    }

                    .main .player-page .player-container .main-player .main-player-body .player-back {
                        background-color: rgb(160, 160, 160);
                        width: 100%;
                        height: 50vh;
                        position: absolute;
                        transform: scale(.998);
                        top: 0;
                        left: 0;
                        z-index: -1;
                    }

                    .main .player-page .player-container .main-player .main-player-body span {
                        position: relative;
                        top: 0;
                        left: 0;
                        z-index: 2;
                    }

                    .main .player-page .player-container .main-player .main-player-body .player-wrapper {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        height: calc(85vh - env(safe-area-inset-bottom));
                    }

                        .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container {
                            position: relative;
                            width: 100%;
                            top: 0;
                            left: 0;
                            z-index: 2;
                        }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .declame-cover {
                                position: relative;
                                /*max-width: 450px;*/
                                max-width: 470px;
                                margin: 0 auto 1em;
                                min-width: 260px;
                            }

                                .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .declame-cover img {
                                    max-height: 90vw;
                                    border-radius: 20px;
                                    aspect-ratio: 1/1;
                                    height: auto;
                                    min-width: 82.5%;
                                    max-width: 82.5%
                                }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .artist-info {
                                height: 70px;
                                position: relative;
                                z-index: 3;
                            }

                                .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .artist-info ul {
                                    width: calc(100% - 64px);
                                    margin: 0 auto;
                                    text-align: right;
                                }

                                    .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .artist-info ul li:first-child {
                                        font-size: 1.4em;
                                        font-weight: 500;
                                        color: var(--tarna-color);
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                    .main .player-page .player-container .main-player .main-player-body .player-wrapper .cover-container .artist-info ul li:nth-child(n>2) {
                                        font-size: 1.2em;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                        .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box {
                            display: flex;
                            width: 100%;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            margin-top: 0.5rem;
                            padding-bottom: 30px;
                        }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .up-items {
                                width: calc(100% - 64px);
                                display: inline-flex;
                                z-index: 1;
                                margin: 10px auto;
                            }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-range {
                                z-index: 1;
                                height: 25px;
                                overflow: hidden;
                                margin: 0 auto;
                                width: calc(100% - 64px) !important;
                            }

                                .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-range input {
                                    font-size: 1.5rem;
                                    width: 100%;
                                    color: var(--tarna-color);
                                    --thumb-height: .65em;
                                    --track-height: 0.1em;
                                    --track-color: hsla(0, 0%, 100%, 0.3);
                                    --brightness-hover: 180%;
                                    --brightness-down: 80%;
                                    --clip-edges: 0.1em;
                                    margin: 0 auto;
                                }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-time {
                                width: calc(100% - 64px);
                                display: inline-flex;
                                z-index: 1;
                                margin: 0 auto 5px;
                            }

                                .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-time span {
                                    display: inherit;
                                    font-size: .8em;
                                    font-weight: 600;
                                    width: 100%;
                                }

                                    .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-time span:first-child {
                                        justify-content: flex-start;
                                        color: #828282;
                                    }

                                    .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-time span:last-child {
                                        justify-content: flex-end;
                                    }

                            .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-control {
                                position: relative;
                                justify-content: space-evenly;
                                align-items: center;
                                height: auto;
                                display: flex;
                                width: calc(100% - 64px);
                                margin: 0 auto;
                            }

                                .main .player-page .player-container .main-player .main-player-body .player-wrapper .player-box .player-control svg {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    box-sizing: content-box;
                                }

                    .main .player-page .player-container .main-player .main-player-body .bottom-section {
                        position: relative;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        z-index: 10;
                        height: 8vh;
                        top: -3px;
                    }

                        .main .player-page .player-container .main-player .main-player-body .bottom-section .bottom-row {
                            bottom: 0;
                            justify-content: space-between;
                            height: 6vh;
                            position: relative;
                            display: flex;
                            align-items: center;
                            width: 100%;
                        }

                            .main .player-page .player-container .main-player .main-player-body .bottom-section .bottom-row div {
                                display: flex;
                                flex-direction: row;
                                width: 32%;
                                justify-content: space-around;
                            }

                                .main .player-page .player-container .main-player .main-player-body .bottom-section .bottom-row div span {
                                    max-width: 23px;
                                    max-width: 25px;
                                    height: 25px;
                                }

                                    .main .player-page .player-container .main-player .main-player-body .bottom-section .bottom-row div span i {
                                        font-size: 21px;
                                        color: #828282;
                                    }

                    .main .player-page .player-container .main-player .main-player-body .player-declame {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        position: relative;
                        top: -50px;
                        min-height: 300px;
                        overflow-y: hidden;
                    }

                        .main .player-page .player-container .main-player .main-player-body .player-declame .player-declame-header {
                            position: relative;
                            width: 100%;
                            top: 1px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                            .main .player-page .player-container .main-player .main-player-body .player-declame .player-declame-header span {
                                position: absolute;
                                font-size: 20px;
                                font-weight: 700;
                                top: 7px;
                                z-index: 10;
                                left: auto;
                            }

                        .main .player-page .player-container .main-player .main-player-body .player-declame .player-declame-body {
                            position: relative;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            border-radius: 20px;
                            overflow-x: hidden;
                            width: 100%;
                            overflow-y: hidden;
                            background-color: var(--tarna-color);
                            height: 250px;
                        }

                            .main .player-page .player-container .main-player .main-player-body .player-declame .player-declame-body div {
                                position: relative;
                                width: 100%;
                                max-height: 200px;
                                display: flex;
                                flex-direction: column;
                                justify-content: flex-start;
                                align-items: center;
                                overflow-y: scroll;
                                top: -1px;
                            }

#miniPlayer {
    height: 60px;
    width: 100%;
    max-width: 523px;
    position: absolute;
    z-index: 10;
    bottom: calc(env(safe-area-inset-bottom) + 5px);
    transition: all .3s;
}

    #miniPlayer > span {
        position: absolute;
        height: inherit;
        width: 100%;
        display: flex;
    }

    #miniPlayer span div {
        box-sizing: border-box;
        padding-top: 3px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(100% - 110px);
        height: calc(100% - 2.5px);
        float: left;
        margin: 0 auto;
        overflow: hidden;
    }

        #miniPlayer span div #miniPlayerTitle {
            font-size: 18px;
            font-weight: 300;
            width: auto;
            white-space: nowrap;
        }

        #miniPlayer span div #miniPlayerArtistName {
            width: auto;
        }

        #miniPlayer span div #miniPlayerArtistContainer {
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

            #miniPlayer span div #miniPlayerArtistContainer #miniPlayerArtist {
                width: auto;
                display: inline;
                white-space: nowrap;
                color: #bdbdbd;
            }

        #miniPlayer span div #miniPlayerArtist {
        }

    #miniPlayer span img {
        width: auto;
        height: inherit;
        max-width: 60px;
        max-height: 60px;
        float: left;
        position: relative;
    }

    #miniPlayer span svg {
        position: relative;
        top: 5px;
        height: 45px;
        z-index: 101;
    }

@media screen and (min-width: 450px) and (max-height: 850px) {
    .player-declame {
        top: -55px;
    }
}

@media screen and (min-width: 450px) and (max-height: 798px) {
    .artist-info {
        margin-top: -5px;
    }
}

@media screen and (min-width: 450px) and (max-height: 850px) {
    .artist-info {
        margin-top: -5px;
    }
}

@media screen and (max-height: 646px) {
    .artist-info ul li:first-child {
        font-size: 14px;
    }
}

@media (max-height: 768px) {
    .declame-cover img {
        max-width: 55% !important;
        min-width: 55% !important;
    }
}

@media (prefers-color-scheme:dark) {
    input[type=range] {
        color: var(--tarna-color);
        --track-color: hsla(0, 0%, 100%, 0.1)
    }
}


@media screen and (min-width: 450px) and (max-height: 798px) {
    .up-items {
        margin-top: 25px !important;
    }
}

@media screen and (min-width: 450px) and (max-height: 850px) {
    .up-items {
        margin-top: 25px !important;
    }
}

input[type=range] {
    position: relative;
    background: hsla(0, 0%, 100%, 0);
    overflow: visible
}

    input[type=range]:active {
        cursor: -webkit-grabbing;
        cursor: grabbing
    }

    input[type=range]::-moz-range-thumb,
    input[type=range]::-moz-range-track {
        -moz-appearance: none;
        -moz-transition: all ease .1s;
        transition: all .1s ease;
        height: var(--thumb-height);
        position: relative
    }

    input[type=range]::-moz-range-thumb {
        --thumb-radius: calc(var(--thumb-height)*0.5 - 1px);
        --clip-top: calc(var(--thumb-height)*0.5 - var(--track-height)*0.5 - 0.5px);
        --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
        --clip-further: calc(100% + 1px);
        --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
        width: var(--thumb-width, var(--thumb-height));
        background: linear-gradient(currentColor 0 0) scroll no-repeat 0/50% calc(var(--track-height) + 1px);
        background-color: currentColor;
        box-shadow: var(--box-fill);
        border-radius: var(--thumb-width, var(--thumb-height));
        border: none;
        filter: brightness(100%);
        clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further))
    }

    input[type=range]::-moz-range-track {
        background: linear-gradient(var(--track-color) 0 0) scroll no-repeat 50%/100% calc(var(--track-height) + 1px)
    }

    input[type=range],
    input[type=range]::-webkit-slider-runnable-track,
    input[type=range]::-webkit-slider-thumb {
        /* -webkit-appearance: none; */
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        height: var(--thumb-height);
        position: relative
    }

        input[type=range]::-webkit-slider-thumb {
            --thumb-radius: calc(var(--thumb-height)*0.5 - 1px);
            --clip-top: calc(var(--thumb-height)*0.5 - var(--track-height)*0.5 - 0.5px);
            --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
            --clip-further: calc(100% + 1px);
            --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
            width: var(--thumb-width, var(--thumb-height));
            background: linear-gradient(currentColor 0 0) scroll no-repeat 0/50% calc(var(--track-height) + 1px);
            background-color: currentColor;
            box-shadow: var(--box-fill);
            border-radius: var(--thumb-width, var(--thumb-height));
            border: none;
            filter: brightness(100%);
            -webkit-clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
            clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further))
        }

        input[type=range]::-webkit-slider-runnable-track {
            background: linear-gradient(var(--track-color) 0 0) scroll no-repeat 50%/100% calc(var(--track-height) + 1px)
        }

.mainMask {
    top: 0;
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 523px;
    background: var(--background-gradient-color);
    z-index: 0;
}

.navTop {
    position: fixed;
    width: 100%;
    max-width: 523px;
    z-index: 200;
    top: 0;
}

.navTopBar {
    position: fixed;
    height: 56px;
    width: 100%;
    max-width: 523px;
    background-color: var(--dark-color);
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    direction: rtl;
    box-shadow: 0px 4px 4px #1b1b1b;
    transition: none;
    opacity: 1;
}

    .navTopBar .navTopBarLeft, .navTopBar .navTopBarRight {
        display: inline-flex;
        align-items: center;
        height: 100%;
        width: 35px;
    }

    .navTopBar .navTopBarRight {
        display: flex;
        justify-content: flex-end;
    }

    .navTopBar .navTopBarCenter {
        overflow: hidden;
        flex-grow: 1;
    }

        .navTopBar .navTopBarCenter p {
            width: auto;
            bottom: -3px;
            position: relative;
            display: inline-block;
            white-space: nowrap;
        }

.termsOfUse {
    padding: 70px 20px 10px 20px;
    background-color: #282828 !important;
}

    .termsOfUse aside {
        text-align: right;
    }

    .termsOfUse p {
        margin-bottom: 40px;
        margin-top: 10px;
        line-height: 40px;
    }

.middle {
    position: relative;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    max-width: 523px;
    overflow: hidden;
}

    .middle .page-carousel {
        position: relative;
        box-sizing: border-box;
        height: 100%;
        padding: 0;
        width: 100%;
    }

    .middle .owl-stage, .middle .owl-stage .owl-item {
        height: 100%;
    }

        .middle .owl-stage .owl-item {
            overflow: scroll;
        }

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--tarna-color);
}

.subMiddle, .termsOfUse {
    background-color: var(--dark-color);
    height: 100%;
    width: 100%;
    position: relative;
    bottom: 0;
    z-index: 101;
    overflow: scroll;
}

.subMiddleHeader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*background: url(https://pwa.melodify.app/img/enter_phone_background.e9aa8c66.jpg) no-repeat top;*/
    background: #00b8d4;
    background-size: cover;
    height: 32vh;
}

    .subMiddleHeader:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(180deg,hsla(0,0%,9%,0),var(--dark-color) 90%);
    }

.subMiddleBody {
    position: relative;
    top: calc(15vh + 15px);
    width: calc(100% - 32px) !important;
    margin: 0 auto;
    text-align: right;
}

.subMiddleLogo {
    display: flex;
    justify-content: center;
    height: 90px;
}

    .subMiddleLogo img {
        /* width: 66px;
        height: 90px;*/
    }

.subMiddleTitle {
    font-size: 35px;
    font-weight: 500;
}

.subMiddleSubTitle {
    font-size: 18px;
}

.loginSection {
    border-radius: 25px;
    width: 100%;
    border: thin solid #bdbdbd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .loginSection input {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        height: 45px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        border: none;
        color: #fff;
        caret-color: #bdbdbd;
        font-size: 15px;
        opacity: 1;
    }

    .loginSection span {
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: thin solid #bdbdbd;
        font-size: 18px;
    }

.errorText {
    color: var(--bs-danger);
    font-size: 14px;
    text-align: center;
    margin: 15px auto;
}

.btnLogin {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--tarna-color);
    color: var(--dark-color);
    border: 1.5px solid var(--tarna-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 40px;
    font-weight: 600;
    margin: 15px auto;
}

    .btnLogin:hover {
        color: var(--dark-color);
    }

.termText {
    text-align: center;
    margin: 25px auto;
}

    .termText span {
        position: relative;
        display: inline-block;
        color: var(--tarna-color);
    }

.header-details {
    display: flex;
    width: calc(100% - 32px) !important;
    justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 7px;
}

    .header-details div {
        display: block;
        width: 100%;
        /*margin-top: 5px;*/
    }

        .header-details div div {
            width: 100%;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
        }

            .header-details div div h1 {
                font-size: 20px;
            }

            .header-details div div p {
            }

.search-section {
    display: flex;
    width: 100%;
    /*background-color: rgb(48, 48, 48);*/
    top: 0px;
    padding-top: 10px;
    justify-content: center;
    align-items: center;
    position: sticky;
    position: -webkit-sticky;
    z-index: 1000;
    top: 10px;
}

    .search-section section {
        margin: 0 auto;
        width: calc(100% - 16px) !important;
    }

        .search-section section .search-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #171717;
            height: 40px;
            border-radius: 100px;
            padding: 5px 10px 5px 5px;
        }

            .search-section section .search-container input {
                background: transparent;
                border: none;
                flex-grow: 1;
                border-radius: 100px;
                padding: 3px 10px 3px 0;
                font-size: 16px;
                color: #fff;
                width: calc(100% - 45px);
                text-decoration: none;
                height: 42px;
            }

            .search-section section .search-container .search-btn {
                height: 32px;
                background-color: var(--tarna-color);
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 600;
                justify-content: center;
                border-radius: 100px;
                color: #1d1d1d;
                padding: 0px 16px;
            }

.poet-image img, .declame-image img {
    width: 100px !important;
    height: 100px;
    object-fit: cover;
    padding: 0;
    background: transparent;
    border: none;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.poet-image img {
    border-radius: 50%;
}

.declame-image {
    position: relative;
}

    .declame-image img {
        border-radius: 10px;
    }

.poet-image h6 {
    font-size: .7em;
    font-weight: 400;
    letter-spacing: .4px;
    margin: 15px auto;
}

.declame-image h6 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;
    margin: 0 auto;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 700;
}

.declame-image p {
    margin: 0 auto;
    font-size: 12px;
    font-weight: 700;
    font-size: 10.5px;
    font-weight: 500;
    margin: 2px auto 0;
}

.declame-info {
    display: flex;
    align-items: center !important;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
}

.poet-declame-list {
    width: calc(100% - 30px);
    list-style: none;
}

    .poet-declame-list li {
        position: relative;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
        border-radius: 5px;
        background: linear-gradient(90deg,#151515 1.22%,#242424);
    }

        .poet-declame-list li .poet-declame-info {
            display: flex;
            justify-content: center;
            margin: 3.5px 0;
            border-radius: 5px;
            width: 57%;
            flex-grow: 1;
        }

            .poet-declame-list li .poet-declame-info .poet-declame-info-row {
                width: 100%;
                height: 70px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                z-index: 90;
                position: relative;
            }

                .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-details {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                }

                    .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-details p {
                        text-align: right;
                        margin: 0 5px;
                        font-size: .8em;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        width: 100%;
                    }

                        .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-details p:first-of-type {
                            font-size: .8em;
                            margin-bottom: 6px;
                        }

                        .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-details p:last-of-type {
                            font-size: 1em;
                            font-weight: 400;
                            color: #e0e0e0;
                        }

                .poet-declame-list li .poet-declame-info .poet-declame-info-row span {
                    font-size: .8em;
                    width: 29px;
                    text-align: center;
                    margin-right: 10px;
                }

                .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-img {
                    width: 58px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                }

                    .poet-declame-list li .poet-declame-info .poet-declame-info-row .poet-declame-info-img img {
                        right: 0;
                        position: absolute;
                        max-width: 50px;
                        border-radius: 5px;
                        min-width: 50px;
                        min-height: 50px;
                        max-height: 50px;
                    }

        .poet-declame-list li .poet-declame-managment div {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: auto;
            height: 100%;
            z-index: 100;
            direction: ltr;
            transition: all .2s ease;
            min-height: 25px;
            margin-left: 10px;
        }

.tinyText {
    font-size: 14px;
    font-weight: 200;
}

.pt-20 {
    padding-top: 20px;
}

.blur-1 {
    filter: blur(1px);
}

.blur-2 {
    filter: blur(2px);
}

.blur-3 {
    filter: blur(3px);
}

.lock {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100px;
    display: flex;
    justify-content: left;
    align-items: end;
    padding-left: 10px;
    padding-bottom: 10px;
}

.myProfile {
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    padding-bottom: 10px;
}

.suport-box {
    padding: 0 0 15px;
    background-color: #171717;
    border-radius: 30px;
}

    .suport-box div:first-child {
        display: inline-flex;
        direction: rtl;
        align-items: flex-end;
        text-align: right;
        width: 200px;
        margin-right: -10px;
        margin-top: 20px;
    }

    /* .suport-box div:nth-child(3) {
        position: relative;
        background: #212121;
        box-shadow: 0 0 20px rgba(0,0,0,.45);
        border: thin solid #303030;
        border-radius: 20px;
        height: 72px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        direction: rtl;
        width: calc(100% - 32px);
        margin: 16px auto 0;
    } */

        .suport-box div:nth-child(3) i:first-child {
            font-size: 30px;
            flex-grow: 1;
        }

        .suport-box div:nth-child(3) div {
            flex-grow: 10;
        }

            .suport-box div:nth-child(3) div p:first-child {
                color: rgb(224, 224, 224);
                font-size: 16px;
                text-align: right;
            }

            .suport-box div:nth-child(3) div p:last-child {
                color: rgb(130, 130, 130);
                font-size: 12px;
                text-align: right;
            }

        .suport-box div:nth-child(3) i:last-child {
            left: 15px;
            position: relative;
        }

.user-settings {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 101;
    /*background-color: #282828;*/
    overflow: scroll;
    padding-bottom: 10px;
}

.settingsList {
    width: calc(100% - 16px);
    list-style: none;
}

    .settingsList li {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        background-color: #171717;
        margin: 4px auto;
    }

        .settingsList li:first-child {
            margin-top: 0;
            border-radius: 20px 20px 0 0;
        }

        .settingsList li:last-child {
            margin-bottom: 0;
            border-radius: 0 0 20px 20px;
        }

.userInfo {
    display: flex;
    flex-direction: row;
    justify-content: right;
    text-align: right;
    align-items: center;
}

    .userInfo img {
        min-width: 40px;
        width: 20px !important;
        vertical-align: middle;
        margin-left: 15px;
        border-radius: 50%;
    }

    .userInfo span {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

.plan-page {
    position: absolute;
    background: #171717;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 100%;
    overflow: scroll;
}

    .plan-page .plan-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: 25px;
        width: calc(100% - 16px);
    }

        .plan-page .plan-row .plan {
            width: 48%;
            border-radius: 25px;
            margin: 4px 1%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

            .plan-page .plan-row .plan .plan-head {
                background-color: rgb(64, 64, 64);
                border-radius: 20px 20px 0 0;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 15px;
                margin: 0;
                direction: rtl;
            }

                .plan-page .plan-row .plan .plan-head .plan-headTitle {
                    color: rgb(255, 255, 255);
                    font-weight: 700;
                    font-size: 16px;
                    display: flex;
                    margin: 0 auto;
                    width: 100%;
                }

            .plan-page .plan-row .plan .plan-hr {
                margin: 0;
                -webkit-margin-after: 0;
                margin-block-end: 0;
                -webkit-margin-before: 0;
                margin-block-start: 0;
                border: none;
                border-top: thin solid #171717;
            }

            .plan-page .plan-row .plan .plan-body {
                border-radius: 0 0 20px 20px;
                flex-direction: column;
                height: 175px;
                justify-content: center;
                display: flex;
                align-items: center;
                padding: 15px;
                padding-top: 8px;
                margin: 0;
                background-color: rgb(64, 64, 64);
            }

                .plan-page .plan-row .plan .plan-body .plan-bodyDetails {
                    position: relative;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 175px;
                }

                    .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer {
                        width: 100%;
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

                        .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .plan-discountTitle {
                            background-color: rgb(33, 33, 33);
                            width: 100%;
                            border-radius: 8px;
                            margin-bottom: 8px;
                            justify-content: center;
                            align-items: center;
                        }

                            .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .plan-discountTitle span {
                                color: var(--tarna-color);
                                width: auto;
                                margin-bottom: 0;
                                font-weight: 700;
                                font-size: 14px;
                                line-height: 24px;
                                text-align: right;
                            }

                        .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container {
                            display: flex;
                            justify-content: center;
                        }

                            .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-cost {
                                color: rgb(130, 130, 130);
                                justify-content: center;
                                text-align: right;
                                font-size: 12px;
                                font-weight: 700;
                                display: flex;
                                align-items: center;
                                white-space: nowrap;
                                margin: 0;
                            }

                                .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-cost span:first-child {
                                    font-weight: 700;
                                    font-size: 16px;
                                    text-align: center;
                                    margin-left: 5px;
                                    width: auto;
                                    line-height: 24px;
                                    margin-bottom: 8px;
                                }

                                .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-cost span:nth-child(2) {
                                    font-size: 12px;
                                    font-weight: 600;
                                    line-height: 24px;
                                    text-align: right;
                                    width: 100%;
                                    margin-bottom: 8px;
                                }

                                .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-cost hr {
                                    border-bottom: 2px solid rgb(189, 189, 189);
                                    min-width: 76px;
                                    position: absolute;
                                    margin: 0 auto;
                                    margin-top: -5px;
                                    opacity: 1;
                                }

                            .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-discount {
                                color: rgb(255, 255, 255);
                                text-align: right;
                                font-size: 12px;
                                font-weight: 700;
                                display: flex;
                                align-items: center;
                                white-space: nowrap;
                                margin: 0;
                            }

                                .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-discount span:first-child {
                                    font-weight: 700;
                                    font-size: 18px;
                                    text-align: center;
                                    margin-left: 5px;
                                    width: auto;
                                    line-height: 24px;
                                    margin-bottom: 8px;
                                }

                                .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyDetailsContainer .price-container .plan-discount span:nth-child(2) {
                                    font-size: 14px;
                                    font-weight: 600;
                                    line-height: 24px;
                                    text-align: right;
                                    width: 100%;
                                    margin-bottom: 8px;
                                }


                    .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyBtnContainer {
                        width: 100%;
                        height: auto;
                    }

                        .plan-page .plan-row .plan .plan-body .plan-bodyDetails .plan-bodyBtnContainer div {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 40px;
                            border-radius: 40px;
                            font-weight: 600;
                            background-color: var(--tarna-color);
                            color: rgb(51, 51, 51);
                            width: 100%;
                        }

.footer-tabs {
    position: fixed;
    bottom: 0;
    height: 60px;
    max-width: 523px;
    width: 100%;
    margin: 0 auto;
    background-color: #212121;
    display: flex;
    justify-content: space-evenly;
    box-shadow: 0 0 20px rgba(0,0,0,.45);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

    .footer-tabs .tab {
        display: inline-flex;
        text-align: center;
        width: 60px;
        justify-content: center;
        padding: 5px 0;
    }

        .footer-tabs .tab a {
            text-decoration: none;
            color: #828282;
            width: 100%;
            transition: .3s;
        }

            .footer-tabs .tab a.active {
                color: var(--tarna-color);
                transition: .5s;
            }

            .footer-tabs .tab a span {
                font-size: 21px;
            }

            .footer-tabs .tab a p {
                font-size: 14px;
                margin-top: -3px;
            }

.toast2 {
    width: auto;
    max-width: 375px;
    position: fixed;
    border-radius: 100px;
    opacity: 0;
    z-index: 0;
    bottom: 40px;
    box-shadow: 0 0 3px rgba(0,0,0,.4);
    left: 50%;
    color: #171717;
    transition: all .2s ease-out;
    padding: 10px 15px;
    transform: translateX(-50%);
}

.toasted {
    opacity: .9;
    bottom: 50px;
    transition: all .2s ease-out;
    z-index: 10000000;
}

/* Radio Styles */

.imgbox {
    border-radius: 38px;
    width: 100%;
    height: 150px;
    background: url('https://tarna.ir/Media/Radio/88.jpeg') no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #2f3536;
}

#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#equalizer {
    position: relative;
    width: 90%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#horizontal {
    width: 100%;
    border: 1px solid rgba(239, 255, 116, 0.799);
}

#vertical-lines {
    position: absolute;
    width: 100%;
    height: 138px;
    display: flex;
    align-items: center;
}

.vertical {
    width: 5px;
    height: 100px;
    border-radius: 5px;
    background-color: rgba(239, 255, 116, 0.799);
    animation-direction: alternate-reverse;
    margin: 1px;
}

@keyframes equalizer {
    from {
        height: 80%;
    }

    to {
        height: 5px;
    }
}

.box2 {
    position: relative;
    z-index: 3;
    width: 100%;
    border-radius: 22px;
    background: linear-gradient(315deg, rgba(0, 0, 0, 1) 0%, rgba(31, 47, 65, 1) 30%, rgba(26, 75, 97, 1) 50%, rgba(22, 94, 119, 1) 64%, rgba(1, 207, 249, 1) 95%, rgba(0, 212, 255, 1) 100%);
}

.wifi {
    width: 56px;
    height: 40px;
}

.dot {
    width: 64px;
    height: 21px;
}

.clock {
    width: 29px !important;
    height: 28px;
    margin: 0 auto;
}

.box3 {
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(13, 17, 20, 1) 0%, rgba(20, 29, 36, 1) 19%, rgba(26, 75, 97, 1) 43%, rgba(44, 117, 143, 1) 64%, rgba(1, 207, 249, 1) 89%, rgba(0, 212, 255, 1) 100%);
    width: 100%;
    border-radius: 33px;
}

.radio1 {
    width: 100%;
    border-radius: 40px;
    height: 55px;
    border-color: #667e8f6e;
    border-width: 4px;
    color: white;
    font-size: 23px;
    margin-top: 20px;
    background-color: #124D75;
}

.slider {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slider .volume {
        display: inline-block;
        vertical-align: top;
        margin-right: 15px;
        color: rgb(82, 82, 82);
        width: 25px;
        height: auto;
    }

    .slider .level {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        background: rgb(82, 82, 82);
        overflow: hidden;
        border-radius: 10px;
        -webkit-transition: height .1s;
        -o-transition: height .1s;
        transition: height .1s;
        cursor: inherit;
    }

        .slider .level::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 0;
            height: 0;
            -webkit-box-shadow: -200px 0 0 200px var(--tarna-color);
            box-shadow: -200px 0 0 200px var(--tarna-color);
        }

.share {
    width: 100%;
    height: 52px;
    max-width: 52px;
    background-color: #0F5586;
    border-radius: 50px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.de {
    user-select: none;
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 100%;
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
    background-color: transparent;
}

    .de .den,
    .de .dene,
    .de .denem,
    .de .deneme,
    .de .light,
    .de .dot {
        position: absolute;
        left: 41%;
        top: 41%;
    }

.den {
    position: relative;
    width: 268px;
    margin: -110px 0 0 -110px;
    border-radius: 100%;
    background: #888888;
    background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));
    background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
    background: #2c3842b0;
}

.dene {
    z-index: 4;
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}

.denem {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
    width: 220px;
    height: 220px;
    margin: -88px 0 0 -87px;
    border-radius: 100%;
    box-shadow: inset 0 2px 3px rgb(59 53 53 / 60%), 0 23px 64px rgba(0, 0, 0, .9);
    background: #eef7f6;
    background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
    background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
    background: #2c2c34;
}

.containers img {
    /* position: absolute; */
    /* top: 135px; */
    left: 95px;
    width: 63%;
    height: 33%;
    /* object-fit: cover; */
    z-index: 1;
    margin-top: 316px;
}

.containerss img {
    /* position: absolute; */
    /* top: 135px; */
    left: 95px;
    width: 43%;
    height: 33%;
    /* object-fit: cover; */
    z-index: 1;
    margin-top: -346px;
}

.den .switch {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url();
}

    .den .switch label {
        position: absolute;
        top: 10%;
        left: 49%;
        width: 46%;
        height: 100px;
        margin-top: 50px;
        transform-origin: 0% 50%;
        -webkit-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
    }

        .den .switch label:after {
            content: "";
            position: absolute;
            top: 6px;
            left: 1px;
            width: 100%;
            height: 30px;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
        }

        .den .switch label:before {
            content: "";
            position: absolute;
            bottom: 6px;
            left: 1px;
            width: 100%;
            height: 30px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }

        .den .switch label span {
            z-index: 2;
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            font-weight: bold;
            font-size: 15px;
            line-height: 70px;
            text-align: center;
            color: #eee;
            text-shadow: 0 1px 0 #444;
        }

        .den .switch label:nth-child(1) {
            transform: rotate(-97deg);
            transform: rotate(-97deg);
            -o-transform: rotate(-97deg);
        }

            .den .switch label:nth-child(1) span {
                right: 2px;
                font-size: 13px;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                -o-transform: rotate(90deg);
            }

        .den .switch label:nth-child(2) {
            transform: rotate(8deg);
            -webkit-transform: rotate(8deg);
            -o-transform: rotate(8deg);
        }

            .den .switch label:nth-child(2) span {
                transform: rotate(8deg);
                -webkit-transform: rotate(8deg);
                -o-transform: rotate(8deg);
            }

        .den .switch label:nth-child(3) {
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }

            .den .switch label:nth-child(3) span {
                transform: rotate(-30deg);
                -webkit-transform: rotate(-30deg);
                -o-transform: rotate(-30deg);
            }

        .den .switch label:nth-child(4) {
            transform: rotate(104deg);
            -webkit-transform: rotate(104deg);
            -o-transform: rotate(104deg);
        }

            .den .switch label:nth-child(4) span {
                transform: rotate(107deg);
                -webkit-transform: rotate(107deg);
                -o-transform: rotate(107deg);
            }

        .den .switch label:nth-child(5) {
            transform: rotate(150deg);
            -webkit-transform: rotate(150deg);
            -o-transform: rotate(150deg);
        }

            .den .switch label:nth-child(5) span {
                transform: rotate(-150deg);
                -webkit-transform: rotate(-150deg);
                -o-transform: rotate(-150deg);
            }

        .den .switch label:nth-child(6) {
            transform: rotate(197deg);
            -webkit-transform: rotate(197deg);
            -o-transform: rotate(197deg);
        }

            .den .switch label:nth-child(6) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(7) {
            -webkit-transform: rotate(285deg);
            transform: rotate(285deg);
            -o-transform: rotate(285deg);
        }

            .den .switch label:nth-child(7) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(8) {
            -webkit-transform: rotate(344deg);
            transform: rotate(344deg);
            -o-transform: rotate(344deg);
        }

            .den .switch label:nth-child(8) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }


        .den .switch label:nth-child(9) {
            -webkit-transform: rotate(439 eg);
            transform: rotate(439deg);
            -o-transform: rotate(439deg);
        }

            .den .switch label:nth-child(9) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }


        .den .switch label:nth-child(10) {
            -webkit-transform: rotate(414 eg);
            transform: rotate(414deg);
            -o-transform: rotate(414deg);
        }

            .den .switch label:nth-child(10) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(11) {
            -webkit-transform: rotate(489 eg);
            transform: rotate(489deg);
            -o-transform: rotate(489deg);
        }

            .den .switch label:nth-child(11) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(12) {
            -webkit-transform: rotate(535 eg);
            transform: rotate(535deg);
            -o-transform: rotate(535deg);
        }

            .den .switch label:nth-child(12) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(13) {
            -webkit-transform: rotate(581 eg);
            transform: rotate(581deg);
            -o-transform: rotate(581deg);
        }

            .den .switch label:nth-child(13) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(14) {
            -webkit-transform: rotate(603deg);
            transform: rotate(603deg);
            -o-transform: rotate(603deg);
        }

            .den .switch label:nth-child(14) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(15) {
            -webkit-transform: rotate(665deg);
            transform: rotate(665deg);
            -o-transform: rotate(665deg);
        }

            .den .switch label:nth-child(15) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

        .den .switch label:nth-child(16) {
            -webkit-transform: rotate(684deg);
            transform: rotate(684deg);
            -o-transform: rotate(684deg);
        }

            .den .switch label:nth-child(16) span {
                transform: rotate(-210deg);
                -webkit-transform: rotate(-210deg);
                -o-transform: rotate(-210deg);
            }

    .den .switch input {
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }

/* SWITCH LIGHT */

.den .light {
    z-index: 1;
    width: 50%;
    height: 100px;
    margin-top: -50px;
    transform-origin: 0% 50%;
    -webkit-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transition: all .5s;
    transition: all .5s;
    -o-transition: all .5s;
}

    .den .light span {
        opacity: .4;
        position: absolute;
        top: 0;
        left: 15px;
        width: 100px;
        height: 100px;
        background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
    }

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .light {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.den #switch_1:checked ~ .light {
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
}

.den #switch_2:checked ~ .light {
    transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
}

.den #switch_3:checked ~ .light {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}

.den #switch_4:checked ~ .light {
    transform: rotate(104deg);
    -webkit-transform: rotate(104deg);
    -o-transform: rotate(104deg);
}

.den #switch_5:checked ~ .light {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -o-transform: rotate(150deg);
}

.den #switch_6:checked ~ .light {
    transform: rotate(197deg);
    -webkit-transform: rotate(197deg);
    -o-transform: rotate(197deg);
}

.den #switch_7:checked ~ .light {
    -webkit-transform: rotate(285deg);
    transform: rotate(285deg);
    -o-transform: rotate(285deg);
}

.den #switch_8:checked ~ .light {
    -webkit-transform: rotate(344deg);
    transform: rotate(344deg);
    -o-transform: rotate(344deg);
}

.den #switch_9:checked ~ .light {
    -webkit-transform: rotate(439 eg);
    transform: rotate(439deg);
    -o-transform: rotate(439deg);
}

.den #switch_10:checked ~ .light {
    -webkit-transform: rotate(414 eg);
    transform: rotate(414deg);
    -o-transform: rotate(414deg);
}

.den #switch_11:checked ~ .light {
    -webkit-transform: rotate(489 eg);
    transform: rotate(489deg);
    -o-transform: rotate(489deg);
}

.den #switch_12:checked ~ .light {
    -webkit-transform: rotate(535 eg);
    transform: rotate(535deg);
    -o-transform: rotate(535deg);
    ;
}

.den #switch_13:checked ~ .light {
    -webkit-transform: rotate(581 eg);
    transform: rotate(581deg);
    -o-transform: rotate(581deg);
}

.den #switch_14:checked ~ .light {
    -webkit-transform: rotate(603deg);
    transform: rotate(603deg);
    -o-transform: rotate(603deg);
}

.den #switch_15:checked ~ .light {
    -webkit-transform: rotate(665deg);
    transform: rotate(665deg);
    -o-transform: rotate(665deg);
}

.den #switch_16:checked ~ .light {
    -webkit-transform: rotate(684deg);
    transform: rotate(684deg);
    -o-transform: rotate(684deg);
}

.circles {
    width: 7px;
    height: 7px;
    background-color: #2D516B;
    border-radius: 50%;
    margin-right: 13px;
}

    .circles.active {
        background-color: #0093E9;
    }

/* SWITCH LIGHT */

.den .dot {
    z-index: 6;
    width: 50%;
    height: 12px;
    margin-top: -6px;
    transform-origin: 0% 50%;
    -webkit-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

    .den .dot span {
        position: absolute;
        top: 0;
        left: 30px;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background: #dae2e4;
        background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
        background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
        background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
    }

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .dot {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

    .den #switch_off:checked ~ .dot span {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }

.den #switch_1:checked ~ .dot {
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
}

    .den #switch_1:checked ~ .dot span {
        opacity: .9;
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        -o-transform: rotate(30deg);
    }

.den #switch_2:checked ~ .dot {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}

    .den #switch_2:checked ~ .dot span {
        opacity: .5;
        transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
    }

.den #switch_3:checked ~ .dot {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

    .den #switch_3:checked ~ .dot span {
        opacity: .4;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }

.den #switch_4:checked ~ .dot {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -o-transform: rotate(150deg);
}

    .den #switch_4:checked ~ .dot span {
        opacity: .5;
        transform: rotate(-150deg);
        -webkit-transform: rotate(-150deg);
        -o-transform: rotate(-150deg);
    }

.den #switch_5:checked ~ .dot {
    transform: rotate(210deg);
    -webkit-transform: rotate(210deg);
    -o-transform: rotate(210deg);
}

    .den #switch_5:checked ~ .dot span {
        opacity: .9;
        transform: rotate(-210deg);
        -webkit-transform: rotate(-210deg);
        -o-transform: rotate(-210deg);
    }


.den hr.line {
    z-index: 1;
    position: absolute;
    top: 50%;
    height: 0;
    margin-top: -1px;
    border-width: 1px 0;
    border-style: solid;
    border-top-color: #3c3d3f;
    border-bottom-color: #666769;
}

    .den hr.line:nth-child(1) {
        transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
    }

.button {
    display: flex;
    justify-content: center;
    color: #fff;
    width: 100%;
    max-width: 173px;
    height: 173px;
    border-radius: 100%;
    background: linear-gradient(30deg, #0F5586 20%, #4b9ed9 80%);
    align-items: center;
    border-color: aqua;
}

.container2 {
    width: 99px;
    height: 99px;
    position: relative;
    border-radius: 50%;
}

.play-btn {
    position: absolute;
    appearance: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#edfd0e, #cef435c7);
    cursor: pointer;
    outline: none;
    left: 0%;
    top: 2%;
}

    .play-btn::before {
        content: "";
        position: absolute;
        width: 93%;
        height: 93%;
        background-color: #0F5586;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .play-btn:checked {
        animation: borderAnimate 700ms ease-in-out 1;
        animation-fill-mode: forwards;
    }

@keyframes borderAnimate {
    0% {
        transform: rotate(0);
        background: conic-gradient(#edfd0e, transparent 20%);
    }

    80% {
        background: conic-gradient(rgba(214, 245, 33, 0.961), transparent 90%);
    }

    100% {
        transform: rotate(360deg);
        background: conic-gradient(rgb(251, 251, 25), rgb(227, 234, 95));
    }
}

.play-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 60%;
    top: 50%;
    background-color: #f4ff55d6;
    transform: translate(-60%, -50%) rotate(90deg);
    clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
    transition: all 400ms ease-in-out;
    cursor: pointer;
}

.play-btn:checked + .play-icon {
    clip-path: polygon(0 100%, 0% 100%, 100% 100%);
}

.pause-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

    .pause-icon::before {
        content: "";
        position: absolute;
        width: 0%;
        height: 100%;
        background-color: #f4ff55d6;
        left: 0;
    }

    .pause-icon::after {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        background-color: #f4ff55d6;
        right: 0;
    }

.play-btn:checked ~ .pause-icon::before {
    animation: reveal 300ms ease-in-out 350ms 1;
    animation-fill-mode: forwards;
}

.play-btn:checked ~ .pause-icon::after {
    animation: reveal 300ms ease-in-out 600ms 1;
    animation-fill-mode: forwards;
}

@keyframes reveal {
    0% {
        width: 0;
    }

    100% {
        width: 35%;
    }
}

@keyframes pulse {
    100% {
        box-shadow: 0 0 0 45px rgba(193, 244, 246, 0);
    }
}

.button {
    display: flex;
    justify-content: center;
    color: #fff;
    width: 100%;
    max-width: 173px;
    height: 173px;
    border-radius: 100%;
    background: linear-gradient(30deg, #0F5586 20%, #4b9ed9 80%);
    align-items: center;
    border-color: aqua;
}

.circle {
    display: flex;
    justify-content: center;
    color: #fff;
    width: 100%;
    max-width: 123px;
    height: 123px;
    border-radius: 100%;
    background: linear-gradient(30deg, #19464c 20%, #2a70d7 80%);
    /* transition: all 0.3s ease-in-out 0s; */
    /* box-shadow: rgba(193, 244, 246, 0.698) 0px 0px 0px 0px; */
    align-items: center;
}

.circles.active-yellow {
    background-color: #c9d666;
}

.container2 {
    width: 99px;
    height: 99px;
    position: relative;
    border-radius: 50%;
}

.play-btn {
    position: absolute;
    appearance: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#edfd0e, #cef435c7);
    cursor: pointer;
    outline: none;
    left: 0%;
    top: 2%;
}

    .play-btn::before {
        content: "";
        position: absolute;
        width: 93%;
        height: 93%;
        background-color: #0F5586;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.play-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 60%;
    top: 50%;
    background-color: #f4ff55d6;
    transform: translate(-60%, -50%) rotate(90deg);
    clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
    transition: all 400ms ease-in-out;
    cursor: pointer;
}

.pause-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

    .pause-icon::before {
        content: "";
        position: absolute;
        width: 0%;
        height: 100%;
        background-color: #f4ff55d6;
        left: 0;
    }

    .pause-icon::after {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        background-color: #f4ff55d6;
        right: 0;
    }