label {
    background: 0 0
}

@media only screen and (max-width:800px) {
    .download-table table tr th:first-child {
        width: 50%
    }

    .table tr th:nth-child(2), .download-table table tr th:nth-child(3) {
        width: 25%
    }

    .course-table1 table {
        overflow: auto
    }

        .course-table1 table tr td:first-child, .course-table1 table tr td:nth-child(2), .course-table1 table tr th:first-child, .course-table1 table tr th:nth-child(2) {
            display: none
        }
}

tr.tc td {
    background: #f9f9f9 !important
}

tr.tch td {
    background: #fff !important
}

.dtails, .player {
    align-items: center;
    display: flex
}

.player-container {
    position: fixed;
    height: auto;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 0;
    z-index: 99992;
    background: #f5f1dc;
    color: #a73801;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.player {
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: center;
    top: auto;
    bottom: 0;
    _z-index: 99992;
    _background: #f5f1dc;
    color: #a73801
}

.details {
    margin-top: 15px;
    width: auto;
    font-weight: 700;
    color: #000
}

.track-art {
    margin: 25px;
    height: 250px;
    width: 250px
}

.now-playing {
    font-size: 1rem
}

.track-name {
    font-size: 3rem
}

.track-artist {
    font-size: 2rem
}

.buttons {
    display: flex;
    align-items: center;
    justify-content:center
}

.next-track, .playpause-track, .prev-track, .backward-track, .forward-track {
    /*padding: 25px 10px;*/
    padding: 0px 10px;
    cursor: pointer
}

    .next-track:hover, .playpause-track:hover, .prev-track:hover, .seek_slider:hover, .volume_slider:hover {
        opacity: 1
    }

.container-holder {
    display: flex;
    justify-content: center;
}

.slider_container {
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider_container1 {
    width: 40%;
    max-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider_container2 {
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider_container3 {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center
}

.seek_slider, .volume_slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 5px;
    background: #d9b66f;
    opacity: .9;
    -webkit-transition: .2s;
    transition: opacity .2s
}

    .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: var(--bs-danger);
        cursor: pointer;
        border-radius: 50%;
        opacity: 1;
    }

.seek_slider {
    width: 100%
}

.volume_slider {
    width: 100%
}

.current-time, .total-duration {
    padding: 3px 5px;
    min-width:70px;
    text-align:center
}

i.fa-volume-down, i.fa-volume-up {
    padding: 10px;
    font-size: 1.5rem
}

i.fa-pause-circle, i.fa-play-circle, i.fa-step-backward, i.fa-step-forward {
    cursor: pointer
}

.closeplayer {
    float: right;
    position: absolute;
    z-index: 99999;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: var(--bs-danger);
    color: #fff !important;
    padding: 15px;
    cursor: pointer;
}



.ftr-bt {
    padding-bottom: 115px;
}

slider_container3 .share-wrap {
    display: flex;
    justify-content: center;
}

.share-wrap a {
    padding: 0px 7px;
}

.slider_container2 .fa-download {
    color: #a73801 !important;
}


@media only screen and (max-width:1279px) {
    .player {
        height: auto;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        _position: fixed;
        top: auto;
        bottom: 0;
        z-index: 99992;
        _background: #f5f1dc;
        color: #a73801;
        padding-left: 15px
    }

    .track-artist {
        font-size: 1.5rem
    }

    .fa-5x {
        font-size: 4em;
    }

    .next-track, .playpause-track, .prev-track {
        padding: 10px;
    }

    .slider_container {
        width: 100%;
        max-width: 400px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .slider_container1 {
        width: 100%;
        max-width: 150px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .closeplayer {
        line-height: 24px
    }

    .ftr-bt {
        padding-bottom: 72px;
    }
}

@media only screen and (max-width:1023px) {
    .player {
        height: auto;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: flex-start;
        _position: fixed;
        top: auto;
        bottom: 0;
        z-index: 99992;
        _background: #f5f1dc;
        color: #a73801;
        padding-left: 15px
    }

    .track-artist {
        font-size: 1.5rem
    }

    .fa-5x {
        font-size: 4em;
    }

    .next-track, .playpause-track, .prev-track {
        padding: 10px !important;
        width: 35px !important;
        height: 35px !important;
        line-height: 35px;
        border-radius: 100px
    }

    .slider_container {
        width: 100%;
        max-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .slider_container1 {
        width: 100%;
        max-width: 120px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .closeplayer {
        line-height: 24px
    }

    .ftr-bt {
        padding-bottom: 72px;
    }
}

@media only screen and (max-width:767px) {
    .container-holder {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .player {
        height: auto;
        left: 0;
        right: 0;
        flex-direction: column;
        _position: fixed;
        top: auto;
        bottom: 0;
        z-index: 99992;
        _background: #f5f1dc;
        color: #a73801;
        padding: 20px 0px 20px 0px;
    }

    .track-artist {
        font-size: 1.5rem
    }

    .fa-5x {
        font-size: 4em;
    }




    .slider_container {
        width: 100%;
        max-width: 230px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slider_container1 {
        width: 100%;
        max-width: 100px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .slider_container2 {
        width: 75%;
        max-width: 40px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .slider_container3 {
        width: 75%;
        max-width: 110px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .closeplayer {
        line-height: 15px;
        bottom: auto;
        padding: 15px;
    }

    .ftr-bt {
        padding-bottom: 190px;
    }
}

.inactive {opacity:0.2; cursor:none; pointer-events: none;}


.skip-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 16px;
    z-index: 9999;
    animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}