.unread-badge {

    background: red;

    color: white;

    min-width: 20px;       /* Ensures circle shape */

    height: 20px;          /* Same as width */

    padding: 0;            /* Remove padding so circle stays round */

    border-radius: 50%;

    font-size: 12px;

    font-weight: bold;

    display: inline-flex;   /* Allows centering */

    justify-content: center;

    align-items: center;

    margin-left: 5px;

    animation: none;

}

.unread-blink {

    animation: redBlink 1s infinite;

}



@keyframes redBlink {

    0% { background-color: red; }

    50% { background-color: #ff6060; } /* lighter red */

    100% { background-color: red; }

}

.share-icons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin: 20px 0;

}



.share-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    font-size: 22px;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

}



.share-btn.fb { background: #1877F2; }

.share-btn.tw { background: #1DA1F2; }

.share-btn.wa { background: #25D366; }

.share-btn.mail { background: #EA4335; }

.share-btn.copy { background: #444; }



.centered-modal .modal-dialog {

    margin-top: 100px;

}









#google_translate_element

{

    display:none;

}

.skiptranslate

{

    display:none;

}

.loaderdiv {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 99999;

    width: 100%;

    height: 100%;

    background: rgb(0 0 0 / 80%);

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    backdrop-filter: blur(5px);

}

.loaderdiv .loader-spinner {

    width: 50px;

    height: 50px;

    border: 6px solid #383838;

    border-top: 6px solid #3bc8e7;

    border-radius: 50%;

    animation: spin 1s 

    linear infinite;

    margin-bottom: 15px;

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

.fancybox__content {

    padding: 0 !important;

}

.fancybox__content video {

    margin-bottom: -8px;

}

.ms_table_dropdown ul.more_option,

.ms_free_download ul.more_option {

    min-width: 140px;

}

.content-text p {

    margin-left: 0 !important;

    text-indent: 0 !important;

}

.content-text span,

.content-text font {

    color: #fff !important;

    background-color: transparent !important;

}

.content-text a{

    text-decoration-color: #3bc8e7 !important;

}







/* hide player initially */

.ms_player_wrapper { display: none; }

/* optional visible state */

.ms_player_wrapper.is-visible { display: block; }





.link {

    color: #fff;

}



.link:hover {

    color: #3bc8e7;

}



.ms_btn.btn1 {

    height: auto;

    line-height: normal;

    width: auto;

    padding: 11px 16px 9px 16px;

    margin-left: 0;

}

.text-main{

    color: #3bc8e7;

}



.fs-14 {

    font-size: .875rem;

}



.fs-12 {

    font-size: .75rem;

}



.ms_header .ms_btn {

    width: auto;

    margin-left: 5px;

    font-size: .875rem;

}



.nav.nav1 {

    column-gap: 5px;

}



.nav.nav1 a {

    font-size: .875rem;

    color: #fff;

    background: transparent;

    border-radius: 5px;

    padding: 5px 10px;

    font-weight: 600;

}



.nav.nav1 a:hover {

    background: #3bc8e7;

    color: #fff;

}

.nav.nav1 a.active {

    background: #3bc8e7;

    color: #fff;

}



.ms_rcnt_box_img {

    height: 190px;

}



.ms_rcnt_box_img img {

    height: 100%;

    object-fit: cover;

}





.ms_featured_slider .ms_rcnt_box_img {

    width: 120px;

    height: 120px;

    border-radius: 100%;

    margin: auto;

}

.ms_featured_slider .ms_rcnt_box_img img {

    height: 100%;

    object-fit: cover;

}



.ms_featured_slider .ms_rcnt_box .ms_rcnt_box_text {

    text-align: center;

}



.ms_weekly_box {

    min-height: auto;

    padding: 25px 0px 21px 0px;

    border-bottom: 1px solid #252b4d;

}



.ms_header {

    z-index: 9999;

}



.main-sidebar {

    padding-top: 60px;

}

.sidebar-div {

    top: 100px;

}

.sidebar-div {

    background: #1b2039;

    border-radius: 5px;

}



.profile-box .img {

    width: 100px;

    height: 100px;

    border-radius: 100%;

    object-fit: cover;

}



hr.hr1 {

    background: rgb(46 200 230 / 40%);

}



.sidebar-div .sidebar-body {

    padding: 16px;

}







.nav.nav2 .items {

    padding: 8px 16px;

    color: #fff;

    border-radius: 5px;

    margin-top: 5px;

}



.nav.nav2 .items:hover {

    color: #3bc8e7;

}



.nav.nav2 .items.active {

    background: #3bc8e7;

    color: #fff;

}



.nav.nav2 .items i {

    padding-right: 6px;

    width: 22px;

}



ul.more_option {

    width: auto;

    padding-right: 12px;

    max-width: 100%;

}



ul.more_option li a {

    white-space: nowrap;

}



.ms_genres_box img {

    height: 100%;

    object-fit: cover;

    max-height: 220px;

}



.col-lg-6  .ms_genres_box img {

    max-height: 350px;

}



.principaux .ms_genres_box {

    max-height: 220px;

}

.principaux .col-lg-6 .ms_genres_box {

    max-height: 350px;

}



.principaux .ms_genres_box img {

    height: 100%;

}



.paymentCard {

    padding: 24px;

    background: #3bc8e7;

    border-radius: 10px;

}



.dropdown-lang button.btn {

    box-shadow: none !important;

    outline: none !important;

    border: 1px solid rgb(59 200 231 / 30%) !important;

    color: #fff !important;

    font-size: .875rem;

}



.success-card {

  max-width: 991px;

  background: #1b263b;

  margin: 50px auto;

  border-radius: 15px;

  padding: 24px;

  box-shadow: 0 0 20px rgba(0,0,0,0.3);

}

.success-icon {

  background-color: #3bc8e7;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 20px;

}

.success-icon i {

  font-size: 35px;

  color: #fff;

}

.section-box {

  background: rgb(59 200 231 / 10%);

  border-radius: 10px;

  padding: 20px;

  margin-bottom: 25px;

}

.song-box {

  display: flex;

  align-items: center;

  background: rgb(59 200 231 / 10%);

  padding: 15px;

  border-radius: 10px;

}

.song-box img {

  width: 60px;

  height: 60px;

  border-radius: 10px;

  margin-right: 15px;

}

.btn-custom {

  border-radius: 30px;

  font-weight: 500;

  padding: 10px 25px;

}



.video-box {

    border: 1px solid rgb(55 65 81);

}

.donation-box {

    background: rgb(0 0 0 / 40%);

    border: 1px solid rgb(59 200 231 / 40%);

    width: 100%;

    max-width: 520px;

    border-radius: 20px;

    padding: 24px;

}







.form.form1 .form-check-input {

    box-shadow: none !important;

    outline: none !important;

}



.form.form1 .form-check-input:checked[type=radio] {

    background-color: #3bc8e7;

    border-color: #3bc8e7;

}



.song-options-more ul {

    padding: 10px;

}

.song-options-more ul.more_option a {

    white-space: normal;

    display: flex;

    line-height: 1.75;

    font-size: 11px;

    padding-bottom: 3px;

    padding-top: 3px;

}



.ms_sidemenu_wrapper.open_menu a{

    display: flex

}

.ms_sidemenu_wrapper.open_menu span.nav_text {

    white-space: normal;

}



.fancybox__container {

    z-index: 9999 !important;

}

.audio-player .jp_queue_wrapper span.que_text {

    font-size: .75rem;

    padding: 0 10px;

}

.ms_nav_wrapper ul li a {

   margin: 30px 0;

}



.content-text {

    background-color: #1b2039;

    width: 100%;

    max-width: 767px;

    margin: auto;

    padding: 40px;

    border-radius: 10px;

}





.button-group-1 .checkbox-div {

  border-radius: 5px;

  margin-bottom: 8px;

  background-color: #374151;

  color: #fff;

  display: block;

  border: 0 !important;

  padding: 8px;

  cursor: pointer;

}

.button-group-1 input[type="checkbox"]:checked + .checkbox-div {

  border-color: #3bc8e7;

  background-color: #3bc8e7;

  color: #FFF;

  box-shadow: none;

}

.button-group-1 .checkbox-div:hover {

  border-color: #22d3ee;

  background-color: #4ddcfb;

  color: #FFF;

}

.button-group-1 label {

    display: block;

    width: 100%;

}

.button-group-1 label input {

    position: absolute;

    clip: rect(0, 0, 0, 0);

}



.music-1 .img1 {

    border-radius: 5px;

    width: 40px;

    min-width: 40px;

    height: 40px;

    object-fit: cover;

}



.music-1 {

    text-align: left;

}



.ms_heading1 {

    background: #3bc8e7;

    border-radius: 8px;

    padding: 16px 24px;

}



.btn-white.btn1 {

    background: #fff;

    color: #3bc8e7;

}

.ms_profile_box .form-control {

    background: #374151;

    color: #fff;

}





.chat-div {

    background-color: #1b2039;

    border-radius: 10px;

    overflow: hidden;

}

.chat-div .chat-box {

    padding: 16px;

    height: 62vh;

}

.chat-box .send-div {

    text-align: end;

    width: 90%;

    margin-left: auto;

    margin-bottom: 16px;

}

.chat-box .reseive-div {

    width: 90%;

    margin-bottom: 16px;

}



.chat-box .text {

    display: inline-block;

    padding: 16px 16px 0;

    border-radius: 10px;

    font-size: .875rem;

}

.chat-box .send-div .text {

    background: #3bc8e7;

    color: #fff;

    text-align: left;

    border-bottom-right-radius: 0;

}

.chat-box .reseive-div .text {

    background: rgb(255 255 255 / 8%);

    border-bottom-left-radius: 0;

}



.chat-div .chat-head {

    padding: 16px;

    border-bottom: 1px solid rgb(255 255 255/ 10%);

}



.chat-div .chat-foot {

    padding: 16px;

    border-top: 1px solid rgb(255 255 255/ 10%);

}



.chat-div .chat-input-box {

    position: relative;

}



.chat-div .chat-input-box .form-control {

    background: #374151;

    border-radius: 50px;

    padding-right: 45px;

    height: 45px;

    color: #fff;

}



.chat-div .chat-input-box .btn.btn-send {

    box-shadow: none !important;

    outline: none !important;

    border: 0;

    background: #3bc8e7;

    border-radius: 50%;

    color: #fff;

    width: 34px;

    height: 34px;

    line-height: 40px;

    position: absolute;

    top: 5.5px;

    right: 6px;

    font-size: .875rem;

    text-align: center;

    display: block;

    padding: 0;

}



#share_modal .modal-dialog {

    margin-top: 0;

}



#share_modal .modal-content {

    background: #1b2039;

}

#share_modal .share-btn {

    width: 62px;

    height: 62px;

    font-size: 25px;

}



#share_modal .share-icons {

    gap: 10px;

}

.ms_profile .ms_top_btn .ms_btn {

    margin-top: 0;

}

.ms_main_wrapper.ms_profile .ms_top_search {

    top: 0;

}











/* scrollbar */

.scrollbar

{

  overflow-y: auto;

  overscroll-behavior: contain;



}

.scrollbar::-webkit-scrollbar-track

{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

  border-radius: 10px;

  background-color: #161616;

}



.scrollbar::-webkit-scrollbar

{

  width: 5px;

  height: 4px;

  background-color: #161616;

}



.scrollbar::-webkit-scrollbar-thumb

{

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  background-color: #3bc8e7;

}



/*responsive css*/

@media (max-width: 991px) {

    .main-sidebar {

        padding-top: 40px;

    }



    .sidebar-left {

        position: fixed;

        left: -100%;

        top: 0;

        width: 100%;

        max-width: 300px;

        z-index: 9999;

        padding: 0;

        transition: all .3s ease;

    }



    .sidebar-left.show {

        left: 0;

    }

    .ms_nav_wrapper ul li a {

       margin: 20px 0;

    }

    .sidebar-body.scrollbar {

        height: calc(100vh - 236px);

    }

    .ms_top_search .search_icon {

        height: 30px;

        line-height: 30px;

    }

    .ms_top_right .ms_top_lang {

        top: 0;

    }

    .ms_main_wrapper.ms_profile .ms_nav_close {

        top: 25px;

    }

    .ms_main_wrapper.ms_profile .ms_top_lang {

        top: 0;

    }

}



@media (max-width: 767px) {

    .content-text {

        padding: 24px;

    }

}



@media (max-width: 575px) {

    .ms_heading1 {

        padding: 16px;

    }

}



.cart-btn {

    position: relative;

    margin-right: 10px;

}



.cart-btn .sub {

    position: absolute;

    background: #3bc8e7;

    color: #fff;

    border-radius: 50px;

    line-height: 24px;

    min-width: 20px;

    height: 20px;

    text-align: center;

    right: -12px;

    top: -3px;

    font-size: .75rem;

}



.cart-total{

    background-color: #1b2039;

    padding: 16px;

    border-radius: 15px;

}



.table.table1 {

    text-align: left;

}



.table.table1 tr th {

    color: #3bc8e7;

    border-color: #3bc8e7;

    background: rgb(0 0 0 / 50%);

    padding: 12px;

    font-weight: 600;

}



.table.table1 tr td {

    color: #fff;

    padding: 12px;

    vertical-align: middle;

    border-color: rgb(255 255 255 / 10%);

}



.table.table1 tbody {

    border-top: 1px solid #3bc8e7 !important;

    

}



.table.table1 img.img1 {

    width: 100px !important;

}

.ms_nav_wrapper ul li a span.icon-bs {
    font-size: 20px;
    width: 25px;
    height: 25px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
}
.ms_nav_wrapper ul li a span.icon-bs span {
    display: block;
    transition: all .3s ease;
}
.ms_nav_wrapper ul li a:hover span.icon-bs span {
    transform: translateY(-22px);
}