/*.unread-badge {
    background: red;
    color: white;
    padding: 3px 7px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-left: 5px;
    animation: none; 
}*/
.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;
}


.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;
}

.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;
}



/* 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;
    }
    .cart-btn .sub {
        top: -12px;
    }
}

@media (max-width: 767px) {
    .content-text {
        padding: 24px;
    }
}

@media (max-width: 676px) {
    .cart-btn {
        transform: translateY(-9px);
        display: inline-block;
    }
}

@media (max-width: 575px) {
    .ms_heading1 {
        padding: 16px;
    }
    .table.table1 img.img1 {
        width: 70px !important;
    }


}