/*--------------------- Copyright (c) 2018 ----------------------- [Master Stylesheet] Project: Miraculous - Online Music Store Html Template Version: 1.0.0 Author: Kamleshyadav ------------------------------------------------------------------- [Table of contents] 1. Body 2. Normal Css 3. Loader Css 4. Sidebar Css 5. Header Css 6. Banner Css 7. Index page Css 8. Player Css 9. Artist Page Css 10. Music Page Css 10. Download Page Css 12. History Page Css 13. Media Css -------------------------------------------------------------------*/ .ms_empty_data { color: #d52e49; } /*====Body Css Start====*/ body { margin: 0; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; color: #33455a; background-color: #0b1828; background-image: -moz-linear-gradient( 134deg, rgb(12 26 42) 0%, rgb(10 23 38) 100%); background-image: -webkit-linear-gradient( 134deg, rgb(12 26 42) 0%, rgb(10 23 38) 100%); background-image: -ms-linear-gradient( 134deg, rgb(12 26 42) 0%, rgb(10 23 38) 100%); } /*====Normal Css Start====*/ :root { --theme-color: #fb324f; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0; font-family: inherit; font-weight: 600; line-height: 1.2; color: var(--theme-color); } h1, .h1 { font-size: 40px; } h2, .h2 { font-size: 32px; } h3, .h3 { font-size: 28px; } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 20px; } h6, .h6 { font-size: 16px; } a { color: #7188a4; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } a:hover { text-decoration: none; color: var(--theme-color); } a:focus, button:focus { outline: none; } ul { list-style-type: none; margin: 0; padding: 0; } .ms_color { color: var(--theme-color) !important } .form-control { height: 40px; line-height: 40px; border: 1px solid transparent; border-radius: 25px; background-color: rgb(23 37 51); width: 100%; font-size: 14px; height: 50px; padding: 0 20px; color: #72859b; } .form-control:focus { box-shadow: none; border: 1px solid var(--theme-color); background-color: rgb(23 37 51); color: #72859b; padding-top: 3px; } select.form-control:not([size]):not([multiple]) { height: 40px; } .padder_top100 { padding-top: 100px !important; } .padder_top80 { padding-top: 80px !important; } .padder_top90 { padding-top: 90px !important; } .padder_top5 { padding-top: 5px; } .padder_top10 { padding-top: 10px; } .padder_top20 { padding-top: 20px; } .padder_top110 { padding-top: 110px; } .padder_top50 { padding-top: 50px; } .padder_top55 { padding-top: 55px; } .padder_top60 { padding-top: 60px; } .padder_top70 { padding-top: 70px; } .padder_top15 { padding-top: 15px; } .padder_bottom70 { padding-bottom: 70px; } .padder_bottom20 { padding-bottom: 20px; } .padder_top30 { padding-top: 30px; } .marger_top20 { margin-top: 20px; } .marger_top15 { margin-top: 15px; } .marger_bottom30 { margin-bottom: 30px; } .marger_bottom100 { margin-bottom: 100px; } .marger_bottom25 { margin-bottom: 25px; } .marger_top100 { margin-top: 100px; } .marger_top60 { margin-top: 60px; } .ms_relative_inner { position: relative; } .marger_top20 { margin-top: 20px; } .padder_bottom60 { padding-bottom: 60px !important; } .padder_bottom30 { padding-bottom: 30px !important; } .marger_bottom60 { margin-bottom: 60px; } .padding_right40 { padding-right: 40px; } .tab-content>.tab-pane { -webkit-animation: faderight .3s ease-in-out; -moz-animation: faderight .3s ease-in-out; -ms-animation: faderight .3s ease-in-out; -o-animation: faderight .3s ease-in-out; animation: faderight .3s ease-in-out; } @keyframes faderight { 0% { transform: translateX(50px); opacity: 0 } 100% { transform: translateX(0); opacity: 1 } } @-webkit-keyframes faderight { 0% { -webkit-transform: translateX(50px); opacity: 0 } 100% { -webkit-transform: translateX(0); opacity: 1 } } @-ms-keyframes faderight { 0% { -ms-transform: translateX(50px); opacity: 0 } 100% { -ms-transform: translateX(0); opacity: 1 } } @-o-keyframes faderight { 0% { -o-transform: translateX(50px); opacity: 0 } 100% { -o-transform: translateX(0); opacity: 1 } } @-moz-keyframes faderight { 0% { -moz-transform: translateX(50px); opacity: 0 } 100% { -moz-transform: translateX(0); opacity: 1 } } /*====Btn Css Start====*/ .ms_btn { background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); min-width: 120px; height: 40px; line-height: 40px; display: inline-block; border-radius: 35px; color: #fff; border: 0; padding: 0 20px; cursor: pointer; text-align: center; } .ms_btn:hover { color: #fff; background-image: -moz-linear-gradient( -57deg, rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%); } .modal-body { padding: 30px 20px; } .ms_clear_modal .modal-body { text-align: center; } /*====Loader Css Start====*/ body.loaded .ms_loader { display: none; } .ms_loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; background-color: #14182a; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; } .ms_inner_loader .ms_loader { background-color: #14182a; } .ms_inner_loader .ms_loader .bar { background: var(--theme-color); } .ms_loader .wrap { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ms_loader .wrap .lines { background: linear-gradient(to top, #f85032 0%, #db1ba8 82%, #db1ba8 100%); } .ms_loader .wrap .lines:nth-child(1) { -webkit-animation: lines 1s 0.1s ease infinite alternate; animation: lines 1s 0.1s ease infinite alternate; } @-webkit-keyframes lines { 0% { height: 0; } 100% { height: 35px; } } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(2) { -webkit-animation: lines 1s 0.2s ease infinite alternate; animation: lines 1s 0.2s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(3) { -webkit-animation: lines 1s 0.3s ease infinite alternate; animation: lines 1s 0.3s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(4) { -webkit-animation: lines 1s 0.4s ease infinite alternate; animation: lines 1s 0.4s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(5) { -webkit-animation: lines 1s 0.5s ease infinite alternate; animation: lines 1s 0.5s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(6) { -webkit-animation: lines 1s 0.6s ease infinite alternate; animation: lines 1s 0.6s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(7) { -webkit-animation: lines 1s 0.7s ease infinite alternate; animation: lines 1s 0.7s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(8) { -webkit-animation: lines 1s 0.8s ease infinite alternate; animation: lines 1s 0.8s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(9) { -webkit-animation: lines 1s 0.9s ease infinite alternate; animation: lines 1s 0.9s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(10) { -webkit-animation: lines 1s 1s ease infinite alternate; animation: lines 1s 1s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(11) { -webkit-animation: lines 1s 1.1s ease infinite alternate; animation: lines 1s 1.1s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } .ms_loader .wrap .lines:nth-child(12) { -webkit-animation: lines 1s 1.2s ease infinite alternate; animation: lines 1s 1.2s ease infinite alternate; } @keyframes lines { 0% { height: 0; } 100% { height: 35px; } } /*====sidebar Css Start====*/ .ms_sidemenu_wrapper { position: fixed; width: 225px; background-color: rgb(12, 27, 44); z-index: 10000; height: 100%; top: 0; bottom: 0; background-image: -moz-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -webkit-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -ms-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); box-shadow: 0px 42px 60px 0px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .ms_sidemenu_wrapper .ms_logo_mini { display: none; } .ms_logo_inner { display: flex; justify-content: left; align-items: center; padding: 33px 0px 30px 30px; } .ms_nav_wrapper { padding: 0px 0px; position: absolute !important; left: 0; top: 135px; right: 0; bottom: 70px; } .nav_heading { font-size: 14px; color: #5c7089; text-transform: uppercase; padding: 27px 5px 6px 30px; letter-spacing: 1.1px; transition: .2s; transition-delay: .1s; } .ms_nav_wrapper ul { padding: 0px; margin: 0px; list-style: none; } .ms_nav_wrapper ul li a { color: #7c8ea5; text-transform: capitalize; width: 100%; display: block; position: relative; font-size: 14px; text-align: left; padding: 12px 30px; display: flex; font-weight: 500; } .ms_nav_wrapper span.nav_icon>.icon { width: 21px; height: 25px; display: inline-block; vertical-align: middle; background-image: url(../../../images/svg/icon.svg); background-repeat: no-repeat; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .nav_text { padding: 0px 12px; white-space: nowrap; } .ms_nav_close { width: 55px; height: 55px; text-align: center; line-height: 55px; position: absolute; right: -24px; top: 50%; background-color: rgb(15 31 50); border-radius: 100%; cursor: pointer; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: -1; } .ms_nav_close i { color: #8da5c2; font-size: 20px; position: absolute; top: 50%; right: 12px; transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; } .ms_nav_close:after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; right: -6px; width: 30px; height: 133px; background: url(../../../images/svg/sidebar_bg.svg) no-repeat; z-index: -1; } .ms_nav_wrapper ul li a:hover, .ms_nav_wrapper ul li a.active { background-position: 0px 0px; color: var(--theme-color); } .ms_nav_wrapper span.nav_icon>.icon.icon_discover { background-position: 0px 2px; } .ms_nav_wrapper span.nav_icon>.icon.icon_artists { background-position: -354px 3px; } .ms_nav_wrapper span.nav_icon>.icon.icon_albums { background-position: -160px 3px; } .ms_nav_wrapper span.nav_icon>.icon.icon_station { background-position: -56px 2px; } .ms_nav_wrapper span.nav_icon>.icon.icon_music { background-position: -306px 3px; } .ms_nav_wrapper span.nav_icon>.icon.icon_download { background-position: -258px 2px; } .ms_nav_wrapper span.nav_icon>.icon.icon_purchased { background-position: -109px 2px; } .ms_nav_wrapper span.nav_icon>.icon.icon_favourite { background-position: -209px 3px; } .ms_nav_wrapper span.nav_icon>.icon.icon_history { background-position: -403px 2px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_discover, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_discover { background-position: 0px -34px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_artists, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_artists { background-position: -354px -34px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_albums, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_albums { background-position: -160px -30px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_station, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_station { background-position: -56px -33px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_music, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_music { background-position: -306px -33px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_download, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_download { background-position: -258px -33px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_purchased, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_purchased { background-position: -109px -32px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_favourite, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_favourite { background-position: -209px -31px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_history, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_history { background-position: -403px -32px; } /**/ .ms_nav_wrapper span.nav_icon>.icon.playlist_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -75px 6px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.playlist_icon, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.playlist_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -75px -35px; } .ms_nav_wrapper span.nav_icon>.icon.genres_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -105px 6px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.genres_icon, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.genres_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -105px -34px; } .ms_nav_wrapper span.nav_icon>.icon.home_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 100px; background-position: -85px 6px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.home_icon, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.home_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 100px; background-position: -85px -27px; } .ms_nav_wrapper span.nav_icon>.icon.icon_home { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -132px 6px; } .ms_nav_wrapper ul li a:hover span.nav_icon>.icon.icon_home, .icon.icon_genres, .ms_nav_wrapper ul li a.active span.nav_icon>.icon.icon_home { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 150px; background-position: -135px -34px; } .jp_queue_wrapper .jp-playlist h2 img { height: 30px; margin-right: 18px; } /*====page section Css Start====*/ .ms_content_wrapper { margin-left: 225px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } /*====Header section Css Start====*/ .bg_cmn_icon { background: url(../../../images/svg/icon.svg) !important; width: 30px; height: 30px; background-repeat: no-repeat!important; display: inline-block; background-color: #c5c5c500; cursor: pointer; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .noti_icon .bg_cmn_icon { background-position: -776px 5px !important; } .noti_icon:hover .bg_cmn_icon { background-position: -776px -31px !important; } .ms_header { position: fixed; top: 0; left: 225px; right: 0; z-index: 1000; backface-visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .ms_header:after { position: absolute; top: 0; left: 0; content: ''; z-index: -1; width: 100%; height: 0; background: rgb(14 29 47); box-shadow: 0px 42px 60px 0px rgba(0, 0, 0, 0.12); } .ms_header.dark_header:after { height: 100%; } .ms_header.dark_header .ms_header_inner { padding: 15px 50px; } .ms_header_inner { display: flex; align-items: center; justify-content: space-between; padding: 26px 50px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition-delay: .5s; } .ms_top_left { display: flex; align-items: center; /* flex: 10; */ } .ms_top_search { position: relative; max-width: 500px; min-width: 500px; width: 100%; } .search_icon { position: absolute; right: 25px; top: 0; bottom: 0; margin: auto; cursor: pointer; display: flex; justify-content: center; align-items: center; } .ms_top_search .form-control { border-radius: 25px; background-color: rgb(23 37 51); width: 100%; font-size: 14px; height: 50px; padding: 0 50px 0 30px; color: #72859b; } .ms_top_search .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #33455a; opacity: 1; /* Firefox */ } .ms_top_search .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #33455a; } .ms_top_search .form-control::-ms-input-placeholder { /* Microsoft Edge */ color: #33455a; } .noti_icon { border-radius: 24px; background-color: rgb(23 37 51); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-left: 15px; } .ms_pro_inner { display: flex; align-items: center; cursor: pointer; position: relative; /* max-width: 163px; */ } .ms_header_inner .ms_top_right .ms_pro_inner .ms_top_btn .reg_btn { margin-right: 10px; } .ms_pro_img { border: 1px solid rgb(247, 108, 53); background-color: rgb(234, 234, 234); width: 50px; height: 50px; border-radius: 100%; overflow: hidden; } .ms_prodile_form .ms_pro_img img { width: 100px; height: 100px; } .ms_prodile_form .ms_pro_img { width: 100px; height: 100px; } .ms_pro_img>img { width: 50px; height: 50px; object-fit: cover; border-radius: 100%; } .ms_pro_namewrap { color: #828b97; } .ms_pro_namewrap .pro_name { margin-left: 10px; margin-right: 5px; } .ms_profile_dropdown { top: 100%; right: -20px; } .common_drop_icon.drop_pro { background-position: -1354px 3px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_pro { background-position: -1354px -34px; } .common_drop_icon.drop_logt { background-position: -1388px 3px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_logt { background-position: -1388px -34px; } /**/ .common_drop_icon.pricing_icon { background-position: -1421px 3px; } .ms_common_dropdown>li>a:hover .common_drop_icon.pricing_icon { background-position: -1421px -34px; } span.common_drop_icon.drop_pro.playlist_icon { background-position: -1450px 3px; } .ms_common_dropdown>li>a:hover .common_drop_icon.playlist_icon { background-position: -1450px -36px; } .ms_common_dropdown>li>a .blog_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 130px; background-position: 4px 6px; } .ms_common_dropdown>li>a:hover .blog_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 130px; background-position: 4px -28px !important; } .ms_common_dropdown>li>a .admin_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 130px; background-position: -25px 4px; } .ms_common_dropdown>li>a:hover .admin_icon { background-image: url(../../../images/svg/icon_left.svg); background-repeat: no-repeat; background-size: 130px; background-position: -25px -31px; } .ms_empty_data { margin-bottom: 30px; } /**/ .ms_common_dropdown { position: absolute; width: max-content; background-color: rgb(25, 38, 56); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.2); padding: 21px 0; border-radius: 10px; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; z-index: 99999; } .ms_pro_inner.show .ms_common_dropdown { opacity: 1; visibility: visible; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); } .ms_common_dropdown>li>a { display: block; padding: 0 30px 14px; } .ms_common_dropdown>li:last-child>a { padding-bottom: 0; } .ms_common_dropdown>li>a>span { margin-right: 6px; width: 21px; height: 25px; display: inline-block; vertical-align: middle; background-image: url(../../../images/svg/icon.svg); background-repeat: no-repeat; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .ms_common_dropdown:after { content: ""; position: absolute; top: -10px; right: 15px; width: 20px; height: 20px; background: rgb(25, 38, 56); transform: rotate(45deg); } .ms_top_right { display: flex; flex-wrap: wrap; align-items: center; } .ms_header_inner .ms_top_right .ms_pro_inner .ms_top_btn { display: flex; flex-wrap: wrap; } .ms_input_group1 { width: 48%; padding-right: 20px; } .ms_cmnt_form form { display: flex; flex-wrap: wrap; align-items: center; } .ms_heading h1 { font-size: 22px; margin: 0 0 20px; } .ms_needlogin { background: #0f1e31; width: auto; max-width: 500px; margin: auto; padding: 30px 20px 30px; text-align: center; border-radius: 10px; } .ms_needlogin img { max-height: 80px; margin-bottom: 10px; } .ms_needlogin h2 { font-size: 22px; margin: 0 0 20px; } .ms_common_dropdown>li>a>span.icon_fav { background: transparent; } .album_list_wrapper ul .btn_pause .play_hover .list_play { display: none; } .album_list_wrapper ul .btn_pause .play_hover .list_play_bar { display: block; } .album_list_wrapper ul span:not(.btn_pause) .play_hover .list_play { display: block; } .album_list_wrapper>ul.btn_pause .list_play_bar { margin: 0 0 0 5px; } .album_list_wrapper>ul.btn_pause .list_play_bar { display: block; } .album_list_wrapper>ul.btn_pause .list_play { display: none; } .play_hover { /* background: url(../../../images/svg/play_songlist.svg); */ width: 35px; height: 35px; background-repeat: no-repeat; display: inline-block; background-color: transparent; cursor: pointer; position: absolute; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); opacity: 0; visibility: hidden; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } /*====Index page Css Start====*/ .ms_songlist.ms_index_songlist, .music_listwrap .ms_songlist { margin-bottom: 190px; } .common_pages_space { padding: 106px 40px 0 65px; } .ms_index_secwrap { display: flex; margin-top: 12px; } .ms_songslist_main { max-width: 676px; width: 100%; } .ms_songslist_wrap .ms_songslist_box>div { padding-right: 40px; } .ms_songslist_nav { position: relative; margin-bottom: 28px; } .ms_songslist_nav>li>a { font-size: 16px; font-weight: 500; margin-right: 45px; position: relative; padding-bottom: 13px; display: inline-block; } .ms_songslist_nav>li>a.active { color: var(--theme-color); } .ms_songslist_nav>li:last-child>a { margin: 0; } .ms_songslist_nav:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #30455f; background-image: linear-gradient(90deg, rgb(48 69 95) 40%, rgb(12 25 41) 100%); } .ms_songslist_nav>li>a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 0%; height: 1px; background: var(--theme-color); z-index: 1; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .ms_songslist_nav>li>a.active:after { width: 75%; } .ms_songslist_box { position: relative; } .ms_songlist>li { margin: 15px 0; } .ms_songslist_inner { border-radius: 6px; /* background-image: -moz-linear-gradient( 134deg, rgb(18,34,55) 0%, rgb(12,27,44) 100%); background-image: -webkit-linear-gradient( 134deg, rgb(18,34,55) 0%, rgb(12,27,44) 100%); background-image: -ms-linear-gradient( 134deg, rgb(18,34,55) 0%, rgb(12,27,44) 100%); */ background: rgb(21 37 55); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.12); padding: 10px 30px 10px 10px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .ms_songslist_inner:hover { background: var(--theme-color); } .songslist_sn { font-size: 16px; font-weight: 600; color: #aebed3; } .ms_songslist_left { display: flex; align-items: center; } .songslist_details { display: flex; align-items: center; } .songslist_thumb { width: 50px; height: 50px; border-radius: 6px; background-image: -moz-linear-gradient( 134deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -webkit-linear-gradient( 134deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -ms-linear-gradient( 134deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.12); margin-right: 25px; } .songslist_thumb>img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; } .songslist_name .song_name, .songslist_name .song_name>a { font-size: 14px; color: #aebed3; font-weight: 600; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .songslist_name .song_artist { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #5c7089; } .ms_songslist_right { display: flex; align-items: center; margin-top: 7px; } .ms_songslist_time { margin: 0 55px; color: #7c8ea5; } .songslist_number { position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin-right: 14px; } .songslist_play { position: absolute; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); cursor: pointer; } .ms_songslist_inner:hover .songslist_play { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .ms_songslist_inner:hover .songslist_sn { opacity: 0; visibility: hidden; } .ms_songslist_like { cursor: pointer; margin-top: 2px; } .ms_songslist_more { cursor: pointer; position: relative; } .songslist_name .song_name, .songslist_name .song_name>a, .songslist_name .song_artist, .ms_songslist_time { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .ms_songslist_inner:hover .songslist_name .song_name, .ms_songslist_inner:hover .songslist_name .song_name>a, .ms_songslist_inner:hover .songslist_name .song_artist, .ms_songslist_inner:hover .ms_songslist_time { color: #fff; } .ms_songslist_inner:hover .songslist_moreicon svg path, .ms_songslist_inner:hover .ms_songslist_like svg path { fill: #fff; } .common_drop_icon.drop_fav { background-position: -209px 3px; } .common_drop_icon.drop_downld { background-position: -258px 2px; } .common_drop_icon.drop_playlist { background-position: -617px 3px; } .common_drop_icon.drop_share { background-position: -660px 2px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_fav { background-position: -209px -33px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_downld { background-position: -258px -33px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_playlist { background-position: -617px -31px; } .ms_common_dropdown>li>a:hover .common_drop_icon.drop_share { background-position: -660px -33px; } .ms_songslist_dropdown { top: 100%; right: -20px; } .ms_songslist_dropdown.open, .ms_downlod_list.open { opacity: 1; visibility: visible; -webkit-transform: translateY(12px); -ms-transform: translateY(12px); -o-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: var(--theme-color); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: var(--theme-color); background-color: var(--theme-color); } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 3px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail { background-color: rgb(255 255 255 / 0.10); width: 3px; } /*====playes css Css Start====*/ /* Paymetn -page CSS */ .coupan_code_from .checkYourCoupon { display: flex; flex-wrap: wrap; align-items: center; } .coupan_code_from .checkYourCoupon label { margin-right: 20px; } .coupan_code_from .checkYourCoupon .nice-select { min-width: 150px; padding-top: 0px; color: #72859b; } .coupan_code_from .checkYourCoupon ul.list { width: 100%; } .coupan_code_from { background: #152438; padding: 30px 30px; border-radius: 20px; margin: 0 0 30px; border-style: solid; border-width: 1px; border-color: rgb(41 47 72); } input[type="radio"], input[type="checkbox"] { cursor: pointer; } .mira_radio_btn_wrap { display: flex; flex-wrap: wrap; } .mira_radio_btn_wrap .mira_radio_btn { margin: 10px 10px 10px 0; } .payment_detail_view { margin: 10px 0 30px; font-weight: 500; } .payment_detail_view span { float: right; color: #ffffff; } .payment_detail_view p { margin: 0 0 10px; } .payment_detail_view p:last-child { border-top: 1px solid rgb(124 142 165 / 28%); padding-top: 10px; } .payment_detail_view p:last-child b, .payment_detail_view p:last-child span#totalAmt{ font-size: 20px; } .ms_profile_box .ms_pro_form button#paypalSubmit{ margin-left: 10px; } .paymentSinglePage .ms_profile_box { background: #112034; padding: 30px 30px 20px; border-radius: 20px; } .paymentSinglePage .ms_profile_box { background: #112034; padding: 30px 30px 20px; border-radius: 20px; max-width: 1000px; margin: auto; } /*radio*/ .mira_radio_btn { position: relative; display: flex; flex-wrap: wrap; align-items: center; } .mira_radio_btn input[type="radio"] { opacity: 0; position: relative; z-index: 9; height: 20px; width: 20px; margin-top: -5px; top: -5px; left: 10px; } .mira_radio_btn label { display: inline-block; position: relative; padding-left: 6px; cursor: pointer; } .mira_radio_btn:hover label{ color: #FFFFFF; } .mira_radio_btn label::before { content: ""; display: inline-block; position: absolute; width: 19px; height: 19px; left: 0; margin-left: -20px; border: 1px solid #ededed; border-radius: 50%; background-color: #ffffff; -webkit-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; } .mira_radio_btn label::after { display: inline-block; position: absolute; content: " "; width: 9px; height: 9px; left: 5px; top: 5px; margin-left: -20px; border-radius: 50%; background-color: red; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .mira_radio_btn input[type="radio"]:checked+label::before { border-color: #ff553e; } .mira_radio_btn input[type="radio"]:checked+label::after { background-color: #ff553e; } .mira_radio_btn input[type="radio"]:checked+label::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } /* Radio */ .ms_card_options { margin: 0; padding: 0; list-style: none; } .ms_card_options>li { display: inline-flex; margin-right: 5px; } .ms_radio_btn>input { display: none; } .ms_radio_btn>span { width: 15px; height: 15px; background-color: #fff; display: inline-flex; border-radius: 100%; border: 1px solid; margin-right: 5px; position: relative; } .ms_radio_btn { font-size: 16px; color: #3bc8e7; margin-bottom: 5px; display: flex; align-items: center; text-transform: capitalize; cursor: pointer; background-color: #fff; padding: 10px 8px; border-radius: 6px; } .ms_radio_btn img { height: 20px; } .ms_radio_btn>span:after { position: absolute; width: 7px; height: 7px; background-color: #2ec8e6; content: ''; border-radius: 100%; left: 3px; top: 3px; transform: scale(0); transition: all 0.3s ease-in-out; } .ms_radio_btn>input:checked+span:after { transform: scale(1); } .ms_cardoption_wrapper > label { color: #fff; margin: 0 0 20px; text-transform: capitalize; font-size: 16px; font-weight: 500; } @media (min-width: 1200px) { .coupan_code_input { display: flex; flex-wrap: wrap; } .coupan_code_input .form-group { width: calc(100% - 200px); } .coupan_code_input .form-group input { border-radius: 25px 0 0 25px; } .coupan_code_input button { border-radius: 0 30px 30px 0; height: 49px; } } /*====Player Css Start====*/ .ms_player_wrapper { background: url(../../../images/player_bg.png) rgb(23 39 62); box-shadow: 0px 31px 50px 0px rgba(0, 0, 0, 0.1); background-size: cover; position: fixed; bottom: 0px; width: 100%; z-index: 10000; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .ms_player_close i { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; color: #8da5c2; } .main_class .ms_footer_wrapper { margin-bottom: 0; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .ms_player_wrapper.close_player { bottom: -108px; } .ms_player_wrapper.close_player .ms_player_close i { position: relative; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); } .ms_player_close { position: absolute; top: -26px; right: 0; left: 0; margin: auto; background: rgb(23 39 62 / 0%); box-shadow: 0px -7px 10px 0px rgba(0, 0, 0, 0.1); width: 55px; height: 27px; text-align: center; color: #fff; font-size: 20px; line-height: 34px; z-index: 1; cursor: pointer; border-radius: 25px 25px 0px 0px; } .ms_player_close:after { content: ""; position: absolute; top: -55px; margin: auto; right: 0; left: 0; width: 30px; height: 133px; background: url(../../../images/svg/player_shap.svg) no-repeat; z-index: -1; transform: rotate(-90deg); } .ms_player_wrapper:after { position: absolute; left: 0; right: 0; top: 0; background-color: rgba(27, 32, 57, 0.6); content: ""; width: 100%; height: 100%; z-index: -1; } .player_left { width: auto; position: absolute; border-radius: 0px 12px 12px 0px; background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); float: left; z-index: 10; display: flex; align-items: center; } .play_song_img { width: 50px; float: left; } input#couponCode { background-color: rgb(38 59 80); } .play_song_name span.que_img { /* width: 100px; */ width: 80px; } .play_song_name span.que_img img { border-radius: 5px; width: 100%; } .play_song_name .que_data { width: calc(100% - 100px); padding-left: 15px; font-size: 18px; font-weight: 600; } .play_song_name h3 { font-size: 16px; color: #fff; } .play_song_img img { border-radius: 5px; } .play_song_name a { color: #dedede; font-size: 15px; } span.play-left-arrow { float: right; width: 20px; height: 20px; text-align: center; border: 1px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; cursor: pointer; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } .ms_play_song { width: 350px; padding: 15px 0px 0px 30px; height: 108px; } .play_song_options { margin-right: 50px; display: none; } .play_song_options ul { display: flex; padding: 0px; margin: 0px; list-style: none; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transform: translateX(-10%); -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); } .play_song_options ul li {} .play_song_options ul li a { color: #fff; text-transform: capitalize; font-size: 15px; padding: 8px 20px; border-right: 2px solid #cdcdcd; } .play_song_options ul li:first-child a { padding-left: 0px; } .play_song_options ul li:last-child a { border-right: none; } .ms_icon { width: 25px; height: 25px; display: inline-block; vertical-align: middle; background-image: url(../../../images/svg/icon.svg); background-repeat: no-repeat; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); display: inline-block; } .play_song_options ul li a .icon_download { background-position: -1038px 0; } .song_optn_icon { margin-right: 5px; } .play_song_options ul li a .icon_fav { background-position: -1245px 0; } .play_song_options ul li a .icon_playlist { background-position: -1280px 0; } .play_song_options ul li a .icon_share { background-position: -1314px 0; } .player_left.open_list .play_song_options { display: block; } .player_left.open_list .play_song_options ul { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } .player_left.open_list span.play-left-arrow { transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); } .audio-player a, .audio-player a:hover { text-decoration: none } .audio-player.is_hidden { top: 100% } .audio-player.is_hidden .hide_player { bottom: 100% } .audio-player:hover .hide_player { bottom: 100% } .hide_player { position: absolute; bottom: -25px; right: 0; background: #333; color: #ccc; padding: 6px 10px; line-height: 1; display: inline-block; text-transform: uppercase; font-size: 12px; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease } .hide_player:hover { color: #fff } .hide_player:active, .hide_player:focus { color: #ccc } .touchevents .hide_player { bottom: 100%!important } .no-flexbox .audio-player { display: none } .flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .jp-controls.flex-item { -ms-flex-preferred-size: 200px; flex-basis: 200px; margin-right: 50px; } .jp-progress-container.flex-item { -ms-flex-preferred-size: 350px; -ms-flex-positive: 2; flex-grow: 2; -ms-flex-negative: 2; flex-shrink: 2; max-width: 660px; width: 100%; margin-top: 3px; } .jp-now-playing.flex-item { -ms-flex-preferred-size: 145px; flex-basis: 145px } .jp-toggles.flex-item { -ms-flex-preferred-size: 145px; flex-basis: 145px; text-align: center; } .jp-volume-controls.flex-item { -ms-flex-preferred-size: 155px; flex-basis: 80px; margin-left: 40px; } .jp-playlist { display: none } .jp-toggles.flex-item button { margin: 8px 10px 0px 10px; } .jp-gui.jp-interface.flex-wrap { position: relative; top: 1px; } .jp-interface .jp-controls button, .jp-interface .jp-toggles button, .jp-interface .jp-volume-controls button { background: 0 0; border: 0; outline: 0; color: #7b7c8b; line-height: 24px; font-weight: 600; -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: .2s; -webkit-transition-timing-function: ease-in-out; -o-transition-property: all; transition-property: all; -o-transition-duration: .2s; transition-duration: .2s; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; font-size: 20px; padding: 0 0px } .jp-interface .jp-controls button, .jp-interface .jp-toggles button, .jp-interface .jp-volume-controls button { width: 50px; height: 50px; border-radius: 100%; background: rgb(255 255 255 / 0.05); } .jp-interface .jp-controls .jp-play i, .jp-interface .jp-controls .jp-previous i, .jp-interface .jp-controls .jp-next i { font-size: 23px; color: #fff } .jp-interface .jp-controls .jp-play i { padding-left: 5px; padding-top: 5px } .jp-interface .jp-controls .jp-play { margin: 0 10px; background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); width: 70px; height: 70px; } .jp-audio.jp-state-playing .jp-play i { padding-left: 0 } /* .jp-audio.jp-state-playing .jp-play i.ms_play_control { background-position: -877px -29px !important; } */ .jp-audio.jp-state-playing .jp-play i.ms_play_control { background-position: -918px 6px !important; } .jp-progress-container, .jp-volume-bar-container { height: 3px; padding: 0; } .jp-progress, .jp-seek-bar, .jp-play-bar, .jp-volume-bar, .jp-volume-bar-value { height: 4px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .jp-progress { margin: 0px; background-color: rgb(255 255 255 / 0.30); border-radius: 15px; } .jp-seek-bar, .jp-volume-bar { cursor: pointer; background-color: rgb(255 255 255 / 0.30); border-radius: 10px; } .jp-play-bar { float: left; position: relative; background-color: var(--theme-color); border-radius: 5px; overflow: visible!important; } .jp-volume-bar-value { float: left; position: relative; background-color: #aaa } .jp-progress .bullet, .jp-volume-bar .bullet { position: absolute; content: ""; top: -2.5px; right: -7px; height: 8px; width: 8px; background: var(--theme-color); border-radius: 50%; } .jp-time-holder { position: relative; top: 0; color: #979797; font-size: 12px } .jp-time-holder .jp-current-time { position: absolute; left: 0; top: 10px; color: #fff; } .jp-time-holder .jp-duration { position: absolute; right: 0; top: 10px; color: #fff; } .jp-track-name { color: #fff; font-size: 16px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 100%; padding-right: 30px; display: flex; align-items: center; } .jp-artist-name { color: #dedede; font-size: 14px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 140px; font-weight: 400; } .jp-toggles button { margin: 0 3px } .jp-toggles button:hover { color: #fff } .jp-state-looped .jp-toggles .jp-repeat, .jp-state-shuffled .jp-toggles .jp-shuffle, .jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist { color: #00c85f } .jp-volume-controls button { float: left } .jp-volume-controls .jp-volume-bar { margin-left: 40px; margin-top: 17px; } .jp-volume-bar, .jp-volume-bar-value { border-radius: 5px } .jp-state-no-volume .jp-volume-controls { display: none } .jp-playlist { position: absolute; right: 0; bottom: -2%; /* bottom: 100%; */ background: rgb(12, 27, 44); background-image: -moz-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -webkit-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); background-image: -ms-linear-gradient( 145deg, rgb(18, 34, 55) 0%, rgb(12, 27, 44) 100%); padding: 40px 0px 25px 0px; width: 350px; box-shadow: 0px 0px 24px 6px rgba(4, 4, 4, 0.2); border-radius: 12px 0px 0px 12px; z-index: 10; } .jp-playlist ul { padding: 0; margin: 0; max-height: 345px; } .jp-playlist li { list-style: none; float: left; width: 100%; position: relative; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .jp-playlist li:hover { background-color: var(--theme-color); } .jp-playlist li:hover .que_data, .jp-playlist li:hover .que_data .jp-artist { color: #fff; } .jp-playlist li a { color: #fff; display: block; padding: 10px 20px; outline: 0; border-bottom: none; float: left; width: 100%; } .jp-playlist li:last-child a { border-bottom: 0 } .jp-playlist li a:hover, .jp-playlist li a:focus, .jp-playlist li a:active { color: #fff; text-decoration: none } .jp-playlist li a span.jp-artist { color: rgb(99 114 132); width: 100%; display: block; font-size: 14px; line-height: 1; font-weight: 400; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .player_mid { position: relative; width: 100%; } .jp_queue_cls { position: absolute; right: 0; left: 0; margin: auto; top: -25px; color: #8da5c2; font-size: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .jp_queue_cls i { padding-top: 5px; padding-left: 5px; } .jp_queue_cls:after { content: ""; position: absolute; top: -55px; margin: auto; right: 0; left: 0; width: 30px; height: 133px; background: url(../../../images/svg/queue_shap.svg) no-repeat; z-index: -1; transform: rotate(-90deg); } .jp-type-playlist { padding-left: 480px; padding-top: 19px; padding-bottom: 19px; } .jp-volume-wrap { margin-top: -3px; } .jp_queue_wrapper { float: right; padding-right: 20px; margin-top: 34px; } .jp_queue_wrapper span.que_text { text-transform: capitalize; cursor: pointer; z-index: 1; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; text-align: center; } .jp_queue_wrapper span.que_text i { width: 12px; height: 12px; text-align: center; background-color: #fff; color: var(--theme-color); border-radius: 50%; line-height: 12px; font-size: 11px; } .jp-playlist h2 { text-align: center; color: #fff; font-size: 18px; text-transform: uppercase; padding-bottom: 20px; } .jp-playlist span.que_img { width: 50px; float: left; } .jp-playlist span.que_img img { border-radius: 5px; width: 50px; height: 50px; object-fit: cover; } .jp-playlist .que_data { width: calc(100% - 50px); float: left; padding-left: 20px; line-height: 30px; font-size: 14px; color: #aebed3; font-weight: 600; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .jp-playlist li.jp-playlist-current { background-color: rgb(40 61 84); } .jp-playlist .action { overflow: auto; right: 15px; position: absolute; left: auto; top: 22px; top: 50%; opacity: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .jp-playlist li.jp-playlist-current .action, .jp-playlist li:hover .action { opacity: 1; } .jp-playlist li:hover .action .que_close { background-color: #252b4d; } .que_more { padding-right: 10px; cursor: pointer; } .que_more:hover ul.more_option { opacity: 1; visibility: visible; } .jp-playlist.find_li ul li:last-child ul.more_option { top: auto; bottom: 100%; } .que_close { width: 20px; height: 20px; background-color: var(--theme-color); display: inline-block; text-align: center; border-radius: 100%; line-height: 19px; cursor: pointer; } .jp_queue_btn { text-align: center; padding-top: 20px; display: flex; justify-content: center; flex-direction: column; align-items: center; } div#playlist-wrap span#myPlaylistQueue { margin-top: 23px; position: relative; top: 45px; } .jp_queue_btn a { display: inline-block; padding: 0px 32px; text-transform: capitalize; border-radius: 20px; margin: 0px 10px; } .jp_queue_btn .ms_clear { margin-top: 5px; } .jp_quality_optn.custom_select { margin-left: 17px; } .jp-type-playlist .nice-select span.current { color: #fff; text-transform: capitalize; } .jp-type-playlist .nice-select { background-color: transparent; border-radius: 20px; border: solid 1px #fff; font-size: 15px; height: 30px; line-height: 32px; } .jp-type-playlist .nice-select:after { border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: none; border-right: none; margin-top: -1px; right: 17px; width: 6px; height: 6px; } .jp-type-playlist .nice-select.open:after { margin-top: -6px; } .jp-type-playlist .nice-select .option:hover, .jp-type-playlist .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #eee; position: relative; } li.option.selected.focus:after { position: absolute; content: "\f00c"; font: normal normal normal 14px/1 FontAwesome; top: 8px; right: 8px; width: 20px; height: 20px; background-color: var(--theme-color); text-align: center; line-height: 20px; color: #fff; border-radius: 100%; font-size: 10px; } .jp-type-playlist .nice-select .list { top: auto; left: auto; right: 0; bottom: 189%; margin-bottom: 0px; width: 150px; border-radius: 5px 5px 0px 0px; text-transform: uppercase; font-size: 12px; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17); -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17); box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17); -o-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17); -ms-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17); } .jp-type-playlist .nice-select .option { line-height: 35px; min-height: 35px; border-bottom: 1px solid #eded; } .jp-interface .ms_play_control { background: url(../../../images/svg/icon.svg) !important; width: 30px; height: 30px; background-repeat: no-repeat!important; display: inline-block; background-color: transparent; cursor: pointer; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } button.jp-previous .ms_play_control { background-position: -840px 7px !important; } button.jp-play .ms_play_control { background-position: -875px 7px !important; } button.jp-next .ms_play_control { background-position: -953px 7px !important; } .jp-controls.flex-item { position: relative; top: 4px; } button.jp-mute { position: relative; top: 0px; height: 30px; } button.jp-mute .ms_play_control { background-position: 220px 0px !important; border: 1px solid #fff; border-radius: 100%; } button.jp-shuffle .ms_play_control { background-position: -688px 6px !important; border-radius: 100%; } button.jp-repeat .ms_play_control { background-position: -731px 8px !important; border-radius: 100%; } .jp-audio.jp-state-looped button.jp-repeat .ms_play_control { background-position: -731px -28px !important; } .jp-audio.jp-state-shuffled button.jp-shuffle .ms_play_control { background-position: -688px -30px !important; } .jp-volume-bar { position: relative; } .jp-volume-bar-value { position: absolute; bottom: 0; } .jp-playlist ul.more_option { overflow: inherit; } .jp-playlist ul.more_option li.jp-playlist-current { background-color: transparent; } .jp-playlist ul.more_option li:hover { background-color: transparent; } .jp-playlist ul.more_option li a:focus { color: #777; } .jp-playlist ul.more_option li a { padding-bottom: 0; } .jp-playlist ul.more_option { top: 90%; right: 30px; text-align: center; display: flex; } .jp-playlist ul.more_option li { width: auto; float: none; } .jp-playlist ul.more_option li a { text-align: left !important; color: #777777; display: block; font-size: 13px; padding: 5px; } .jp-playlist ul.more_option li a .opt_icon { padding-right: 0px; } .jp-playlist ul.more_option:after { top: -8px; right: 13px; border-top: transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgb(25, 38, 56); } /* right queue css */ ul.more_option { padding: 0px 10px; margin: 0px; position: absolute; top: 5px; right: 50px; background-color: rgb(25, 38, 56); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); max-width: max-content; width: 100%; list-style: none; text-align: left; border-radius: 10px; z-index: 100; visibility: hidden; opacity: 0; transform: translateX(-15px); transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; } ul.more_option:after { content: ""; position: absolute; width: 0; height: 0; top: 9px; right: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid #192638; } ul.more_option.open_option { opacity: 1; right: 50px; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); } ul.more_option li { width: 100%; display: block; } ul.more_option li a { text-align: left !important; color: #7188a4; padding-bottom: 10px; display: block; font-size: 13px; } ul.more_option li a:hover, .ms_rcnt_box:hover .ms_rcnt_box_text h3 a { color: var(--theme-color); } ul.more_option li a .opt_icon { padding-right: 10px; } ul.more_option li a .opt_icon .icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; background-image: url(../../../images/svg/icon.svg); background-repeat: no-repeat; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } ul.more_option li a .opt_icon .icon_fav { background-position: -208px -2px; } ul.more_option li a .opt_icon .icon_queue { background-position: -109px -2px; } ul.more_option li a .opt_icon .icon_dwn { background-position: -257px -2px; } ul.more_option li a .opt_icon .icon_playlst { background-position: -617px -2px; } ul.more_option li a .opt_icon .icon_share { background-position: -659px -2px; } ul.more_option li a:hover .opt_icon .icon_fav { background-position: -208px -38px; } ul.more_option li a:hover .opt_icon .icon_queue { background-position: -109px -38px; } ul.more_option li a:hover .opt_icon .icon_dwn { background-position: -257px -38px; } ul.more_option li a:hover .opt_icon .icon_playlst { background-position: -617px -38px; } ul.more_option li a:hover .opt_icon .icon_share { background-position: -659px -38px; } /*---*/ @keyframes shadow-pulse { 0% { box-shadow: 0px 0px 0px 0px rgb(255 255 255 / 0.2); } 100% { box-shadow: 0px 0px 0px 15px rgb(255 255 255 / 0); } } @-webkit-keyframes shadow-pulse { 0% { box-shadow: 0px 0px 0px 0px rgb(255 255 255 / 0.2); } 100% { box-shadow: 0px 0px 0px 15px rgb(255 255 255 / 0); } } @keyframes mt_ms_wave_noti { 0% { box-shadow: 0px 0px 0px 0px #FFF; opacity: 1; } 100% { box-shadow: 0px 0px 0px 12px #FFF; opacity: 0; } } .jp-previous:focus, .jp-next:focus, .jp-audio.jp-state-looped .jp-repeat, .jp-audio.jp-state-shuffled .jp-shuffle { animation: shadow-pulse 1s; -webkit-: shadow-pulse 1s; } /*====Artist Css Start====*/ .ms_artist_slider { margin-bottom: 40px; } .slider_cheading { overflow: hidden; width: 100%; } .slider_heading_wrap { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; } .cheading_title { font-size: 18px; color: #8097b1; position: relative; } .cheading_title:after { content: ""; position: absolute; width: 100%; max-width: 100%; height: 4px; border: 1px solid rgb(48, 69, 95); top: 0; bottom: 0; margin: auto; border-left: 0; border-radius: 0; } .slider_cbox { border-radius: 10px; /* padding: 8px; */ cursor: pointer; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .slider_cbox:hover { background: #152740; } .slider_cbox:hover .slider_cimgbox img { -webkit-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); } .slider_cbox:hover .slider_ctext { /* margin-top: -10px; */ } .slider_cbox:hover .slider_ctitle, .slider_cbox:hover .slider_cdescription { color: #fff; } .slider_cimgbox { border-radius: 10px; } .slider_cimgbox img { border-radius: 10px; width: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .slider_ctext { padding: 10px 10px 10px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .slider_ctitle { font-size: 14px; color: #aebed3; font-weight: 600; display: inline-block; } .slider_cdescription { font-size: 12px; color: #5c7089; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .slider_cmn_controls { display: flex; align-items: center; padding-left: 20px; } .slider_cmn_controls .slider_cmn_nav { background: rgb(20, 37, 59); width: 40px; height: 40px; border-radius: 50%; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .slider_cmn_controls .slider_nav_next, .slider_cmn_controls .slider_nav_prev { background: url(../../../images/svg/icon.svg)!important; width: 40px; height: 40px; background-repeat: no-repeat!important; display: inline-block; background-color: transparent; cursor: pointer; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; background-position: -1074px 10px !important; outline: 0; border-radius: 50%; } .slider_cmn_controls .slider_cmn_nav:hover { background: var(--theme-color); } .slider_cmn_controls .slider_cmn_nav:first-child { margin-right: 6px; } .slider_cmn_controls .slider_nav_next { background-position: -1074px 10px !important; } .slider_cmn_controls .slider_nav_prev { background-position: -1168px 10px !important; } .slider_cmn_controls .slider_nav_next:hover { background-position: -1106px 10px !important; } .slider_cmn_controls .slider_nav_prev:hover { background-position: -1136px 10px !important; } /*====Music Css Start====*/ .music_center_slider { position: relative; } .music_center_slider .swiper-container { padding: 10px 0 0 0; position: relative; } .swiper-slide { transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .music_center_img { position: relative; border-radius: 6px; } .music_center_img>img { border-radius: 6px; } .slider_music_controls>span { position: absolute; top: 105px; left: 0; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; outline: 0; z-index: 1; } .slider_music_controls>span svg path { transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .slider_music_controls>span:hover svg path { fill: var(--theme-color); } .slider_music_controls .swiper-music-next { left: auto; right: 0; transform: rotate(180deg); } .music_center_title { font-size: 22px; color: #fff; font-weight: 700; } .music_center_sub { color: #fff; font-size: 12px; margin: 0px 0 10px 0; } .music_center_info { opacity: 0; visibility: hidden; /* margin-top: 18px; */ transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transform: translateY(-10px); padding: 30px 0; } .music_center_slider .swiper-slide { opacity: 0; } .music_center_slider .swiper-slide.swiper-slide-active .music_center_info, .music_center_slider .swiper-slide.swiper-slide-active, .music_center_slider .swiper-slide.swiper-slide-prev, .music_center_slider .swiper-slide.swiper-slide-next { opacity: 1; visibility: visible; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right { background-image: none; outline: none; } .swiper-slide .music_center_info { transition: 0s; transition-delay: 0s; } .swiper-slide.swiper-slide-active .music_center_info { transition: .3s; transition-delay: .5s; transform: translateY(0px); } .center_dwld_icon { background: url(../../../images/svg/icon.svg) !important; width: 30px; height: 30px; background-repeat: no-repeat!important; display: inline-block; background-color: #c7c7c700; cursor: pointer; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .center_dwld_icon { background-position: -1213px 4px !important; } .music_center_dwld:hover .center_dwld_icon { background-position: -1213px -32px !important; } .music_center_details { display: flex; align-items: center; justify-content: center; } .music_center_dwld { width: 40px; height: 40px; background: rgb(255 255 255 / 12%); border-radius: 40px; display: flex; justify-content: center; align-items: center; } .music_center_details .ms_btn { margin-right: 10px; } .music_listwrap_tttl { font-size: 18px; color: #8097b1; margin: 30px 0 15px 0; } .music_listwrap .mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical { right: -15px; } body .swal2-popup{ background-color: #183150; } .swal2-title{ color: var(--theme-color) !important; } div#swal2-content { color: #72859b; } body .swal2-styled.swal2-confirm, body .swal2-styled.swal2-cancel{ background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%) !important; background-image: -webkit-linear-gradient( -57deg , rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%) !important; background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%) !important; border-radius: 35px; } .foo_sharing { display: flex; flex-wrap: wrap; align-items: flex-start !important; justify-content: space-evenly; } .swal2-actions:not(.swal2-loading) .swal2-styled:hover, .swal2-actions:not(.swal2-loading) .swal2-styled:hover { color: #fff; background-image: -moz-linear-gradient( -57deg, rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%) !important; background-image: -webkit-linear-gradient( -57deg , rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%) !important; background-image: -ms-linear-gradient( -57deg, rgb(255, 0, 101) 0%, rgb(255, 85, 62) 100%) !important; } .ms_share_text.foo_sharing ul, .foo_sharing{ width: auto !important; } .create_playlist.playlist_new { display: flex; flex-direction: column; } .ms_pro_form .form-group label { color: #fff; margin-bottom: 10px; margin-left: 10px; } .form-control[readonly]:focus { border: transparent; padding-top: 0; } input.form-control.plan_value { border: 1px solid #363434; } .nice-select:after{ right: 25px; } .nice-select.form-control.open{ padding: 3px 36px 3px 20px; } .ms_songslist_right{ margin-top: 0; } .nice-select .list{ width: 100%; } /*====Download page Css Start====*/ .album_list_wrapper>ul { display: flex; justify-content: space-between; margin: 0 0 10px; } .album_list_wrapper>ul:hover>li>a { color: var(--theme-color); } .album_list_wrapper>ul.play_active_song>li>a { color: var(--theme-color); } .album_list_wrapper>ul:hover svg path, .album_list_wrapper>ul.play_active_song>li svg path { fill: var(--theme-color); } .album_list_wrapper>ul:hover .play_no, .album_list_wrapper>ul.play_active_song .play_no { display: none; } .album_list_wrapper>ul.play_active_song>li .play_hover { opacity: 1; visibility: visible; transform: translateY(0) } .album_list_wrapper .album_list_name { position: relative; margin-bottom: 10px; padding-bottom: 15px; } .album_list_wrapper .album_list_name:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #30455f; background-image: linear-gradient(90deg, rgb(48 69 95) 90%, rgb(12 25 41) 100%); } .album_list_wrapper>ul>li>.dwld_sn { width: 30px; height: 30px; position: relative; display: flex; justify-content: center; align-items: center; } .play_hover { position: absolute; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .album_list_wrapper ul:hover .play_hover { opacity: 1; visibility: visible; transform: translateY(-2px); } .album_list_wrapper>ul>li { /*width: 14%;*/ width: 17%; margin-top: 15px; } ul.album_list_name>li { color: #7c8ea5; text-transform: capitalize; font-weight: 600; } .album_list_wrapper>ul>li>a { color: #7c8ea5; display: inline-block; position: relative; font-weight: 500; } .album_list_wrapper .list_more>a>span { transform: rotate(90deg); display: inline-block; } .album_list_wrapper .list_close { background: #20253f; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .album_list_wrapper>ul>li.list_more { position: relative; } .album_list_wrapper>ul>li.list_more>a { text-align: center; display: block; } .album_list_wrapper>ul>li.list_more>.ms_downlod_list { left: 0; right: 0; margin: auto; background: rgb(25, 38, 56); } .album_list_wrapper>ul>li.list_more>.ms_downlod_list:after { left: 0; right: 0; margin: auto; } .album_inner_list .cheading_title:after { display: none; } .album_list_wrapper .play_hover .list_play_bar { display: none; } .album_list_wrapper .play_active_song .play_hover .list_play_bar { display: block; } .album_list_wrapper .play_active_song .play_hover .list_play { display: none; } .album_inner_list .slider_heading_wrap { margin-bottom: 10px; } /* width */ .album_list_wrapper::-webkit-scrollbar { width: 3px; height: 3px; } /* Track */ .album_list_wrapper::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.10); } /* Handle */ .album_list_wrapper::-webkit-scrollbar-thumb { background: var(--theme-color); } /*====History Css Start====*/ .ms_history_wrapper .slider_cbox { margin-bottom: 30px; } .ms_btn.hisry_clear { text-align: center; margin-left: 10px; } /* Section CSS Started */ /*====Footer Css Start====*/ body.main_class .ms_footer_wrapper { width: 100%; } .open_menu .ms_footer_wrapper { padding-left: 130px; } .ms_footer_wrapper { padding-left: 80px; } body:not(.open_menu) .ms_footer_wrapper { padding-left: 270px; } .ms_footer_wrapper { background-image: url(../../images/footer_bg.png); background-size: cover; position: relative; z-index: 1; margin-bottom: 105px; padding-top: 35px; } .ms_footer_wrapper:after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; left: 0; z-index: -1; } .footer_box { margin-top: 35px; padding-right: 38px; } .ms_footer_logo { text-align: center; width: auto; } .ms_footer_logo { text-align: center; padding-bottom: 25px; padding-right: 35px; } .ms_footer_logo span { display: block; width: 100%; color: #fff; text-transform: capitalize; font-size: 18px; font-weight: 600; margin-top: 5px; } h1.footer_title { font-size: 18px; text-transform: capitalize; position: relative; padding-bottom: 10px; margin-bottom: 18px; } h1.footer_title:after { width: 100px; height: 5px; content: ""; position: absolute !important; bottom: 0; left: -15px; z-index: 0; background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #fb324f, rgba(255, 42, 112, 0) 60%); background: -moz-radial-gradient(50% 50%, ellipse closest-side, #fb324f, rgba(255, 42, 112, 0) 60%); background: -ms-radial-gradient(50% 50%, ellipse closest-side, #fb324f, rgba(255, 42, 112, 0) 60%); background: -o-radial-gradient(50% 50%, ellipse closest-side, #fb324f, rgba(255, 42, 112, 0) 60%); } .ms_footershdow_widget h1.footer_title:after { width: 50px; height: 1px; content: ""; position: absolute !important; bottom: 0; left: 0; z-index: 0; background: -webkit-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -moz-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -ms-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -o-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); } .footer_box p { color: #ffffff; line-height: 25px; margin: 0px; } .footer_box.footer_app p { margin-bottom: 5px; } .footer_box a.foo_app_btn { display: inline-block; padding: 10px 15px 10px 0px; } .footer_box a.foo_app_btn img { border-radius: 5px; } .footer_box.footer_subscribe p { margin-bottom: 15px; } .footer_box.footer_subscribe .form-group { margin-bottom: 20px; } .footer_box.footer_subscribe .ms_btn { height: 40px; line-height: 40px; width: auto; padding: 0px 22px; margin-left: 0px; outline: none; border: none; } .footer_box.footer_contacts ul.foo_con_info { padding: 0px; margin: 0px; list-style: none; } .footer_box.footer_contacts ul.foo_con_info li { width: 100%; display: inline-block; } .footer_box.footer_contacts ul.foo_con_info li .foo_con_icon { width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; float: left; border-radius: 5px; background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); } .footer_box.footer_contacts ul.foo_con_info li .foo_con_data { width: calc(100% - 40px); float: left; padding-left: 20px; margin-bottom: 3px; } .footer_box.footer_contacts ul.foo_con_info li .foo_con_data span { display: block; line-height: 25px; color: #ffffff; } .footer_box.footer_contacts ul.foo_con_info li .foo_con_data span.con-title { text-transform: capitalize; } .footer_box.footer_contacts ul.foo_con_info li .foo_con_data span a { color: #ffffff; } .footer_box.footer_contacts ul.foo_con_info li .foo_con_data span a:hover { color: var(--theme-color); } .foo_sharing { width: 100%; display: inline-block; margin-top: 10px; } .share_title { display: inline-block; color: #fff; text-transform: capitalize; line-height: 33px; margin-right: 10px; } .foo_sharing ul { padding: 0px; margin: 0px; float: left; padding-left: 25px; } .foo_sharing ul li { display: inline-block; margin-right: 5px; } .foo_sharing ul li a { width: 30px; height: 30px; display: inline-block; color: #fff; text-align: center; line-height: 30px; border-radius: 5px; background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); } .foo_sharing ul li a:hover { box-shadow: 0 0 18px 0 var(--theme-color); } .footer_box.footer_subscribe input.form-control { width: 93%; padding: 0px 20px; } .ms_copyright { text-align: center; margin-top: 40px; width: 100%; display: inline-block; padding: 0px 0px 0px; } .ms_copyright p { color: #ffffff; margin: 0px; padding: 20px 0px; } .ms_copyright p a { color: var(--theme-color); } .footer_border { width: 250px; height: 1px; margin: 0 auto; z-index: 0; background: -webkit-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -moz-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -ms-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); background: -o-radial-gradient(50% 50%, ellipse closest-side, var(--theme-color), rgba(255, 42, 112, 0) 60%); } .footer_box.footer_subscribe { position: relative; } p.ns_form_msg.error-row { position: absolute; bottom: -60px; } /* ALBUM Single Page CSS */ .album_single_data { padding-bottom: 50px; display: flex; width: 100%; position: relative; flex-wrap: wrap; } .album_single_img img { border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(4, 4, 4, 0.4); } .album_single_data .album_single_img { width: 240px; } .album_single_text { width: calc(100% - 240px); float: left; padding-left: 35px; padding-right: 35px; } .album_single_text h2 { font-size: 22px; color: #fff; padding-bottom: 10px; } .album_single_text p.singer_name { color: #fff; font-size: 15px; margin-bottom: 5px; } .about_artist { font-size: 15px; color: #dedede; line-height: 30px; } .album_btn { margin-top: 19px; display: inline-block; } .album_btn a.ms_btn { height: 40px; line-height: 36px; width: auto; margin-left: 0px; padding: 0px 39px; font-size: 16px; margin-right: 20px; position: relative; vertical-align: middle; } .ms_btn.play_btn { width: 150px; padding: 0px; } .album_more_optn { position: absolute; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; right: 0; top: -1px; cursor: pointer; } span.pause_all { opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .ms_btn.play_btn span.play_all { width: 151px; position: relative; overflow: hidden; padding: 0px; } .ms_btn.play_btn.btn_pause span.pause_all { opacity: 1; z-index: 1000; } .album_btn .ms_btn.play_btn { min-width: 150px; } .ms_btn.play_btn.btn_pause span.pause_all { transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); width: 100px; left: 25px; min-width: 80px; } .ms_btn.play_btn.btn_pause span.play_all { display: none; } .album_btn a.ms_btn img { margin-right: 10px; vertical-align: middle; position: relative; top: -1px; } .lyric_box h4 { font-size: 18px; margin: 0 0 10px; } .ms_share_img { text-align: center; } .ms_share_img img { height: 60px; margin: 0 0 20px; } .ms_btn.lyric_show svg { width: 28px; height: 40px; margin-right: 5px; } .ms_share_text.foo_sharing { text-align: center; } .ms_share_text.foo_sharing ul { padding: 0; width: 100%; } .album_btn a.ms_btn { height: 40px; line-height: 40px; width: auto; margin-left: 0px; padding: 0px 39px; font-size: 16px; margin-right: 20px; position: relative; vertical-align: middle; display: inline-block; } span.play_all { vertical-align: top; } .ms_btn.lyric_show .play_all { display: flex; flex-wrap: wrap; } .miraFrontSinglePage { color: #7c8ea5; } .album_more_optn.list_more ul li ul { right: 20px; left: unset; top: -15px; } .album_more_optn.list_more ul li ul:after { top: 10px; right: -8px; } textarea.form-control { border-radius: 15px; background-color: rgb(23 37 51); width: 100%; font-size: 14px; height: 150px; padding: 20px 30px; color: #72859b; } .form-control:disabled, .form-control[readonly] { background-color: rgb(23 37 51); opacity: 1; } /* Header ANd other */ .ms_header_inner .ms_top_right .ms_pro_inner { margin-left: 20px; } .album_btn .ms_btn { margin-bottom: 10px; } .album_list_wrapper>ul>li:first-of-type { position: relative; padding-left: 12px; } .currency_dropdown { margin: 0 0 0 20px; } .ms_top_lang { color: #828b97; cursor: pointer; } .ms_top_lang img { margin-left: 10px; } .modal-content { border: 1px solid rgb(104 100 100 / 8%); background: rgb(16 32 51); color: #ffffff; } .modal-body h1 { font-size: 22px; text-transform: capitalize; margin: 0 0 10px; } .add_lang ul.lang_list { margin: 20px 0 20px; } .nice-select { background-color: #172533; border: solid 1px transparent; color: #828b97; min-width: 80px; padding-top: 3px; } .nice-select:hover, .nice-select:focus { border-color: transparent; } .nice-select .list { background-color: #172533; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #19233b; } .jp-type-playlist .nice-select .option:hover, .jp-type-playlist .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #1d3248; } .nice-select:after { border-bottom: 2px solid #828b97; border-right: 2px solid #828b97; } /**/ .add_lang .modal-body { text-align: center; } .ms_lang_popup .modal-content ul.lang_list { padding: 0px; margin: 0 -15px; list-style: none; margin-top: 10px; width: 100%; display: inline-block; } .ms_lang_popup .modal-content ul.lang_list li { width: 50%; float: left; padding: 10px 20px; border-width: 1px 1px 1px 0px; margin-bottom: -1px; margin-right: -1px; text-align: left; } .ms_lang_popup .modal-content ul.lang_list li .lang_check_label { background: #1f3654; padding: 6px 10px; cursor: pointer; border-radius: 3px; } .ms_lang_popup .modal-content ul.lang_list li .lang_check_label .label-text { top: 8px; right: 10px; } .lang_list label { cursor: pointer; color: #fff; font-size: 16px; position: relative; font-weight: 500; width: 100%; text-transform: capitalize; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .lang_list label input[type="checkbox"] { display: none; } .lang_list label input[type="checkbox"]+.label-text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; right: 0; top: 5px; width: 14px; height: 14px; background-color: #fff; border: 1px solid #fff; border-radius: 50%; } .lang_list label input[type="checkbox"]:checked+.label-text:before { content: "\f00c"; color: #1b2039; -webkit-animation: tick 150ms ease-in; animation: tick 150ms ease-in; top: -2px; position: absolute; font-size: 12px !important; left: 0px; top: 0px; font: normal normal normal 14px/1 FontAwesome; background-color: #ffffff; border-radius: 50%; } @-webkit-keyframes tick { 0% { -webkit-transform: scale(0); transform: scale(0) } 90% { -webkit-transform: scale(1.4); transform: scale(1.4) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes tick { 0% { -webkit-transform: scale(0); transform: scale(0) } 90% { -webkit-transform: scale(1.4); transform: scale(1.4) } 100% { -webkit-transform: scale(1); transform: scale(1) } } .ms_lang_popup .modal-dialog { max-width: 500px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100%; } .modal-dialog .close { position: absolute; right: -12px; z-index: 1; top: -15px; width: 30px; height: 30px; background-color: #183150; opacity: 1; border-radius: 100%; cursor: pointer; } .fa_icon.form_close:before { content: "X"; font-style: normal; font-size: 16px; vertical-align: middle; padding-bottom: 1px; display: inline-block; font-weight: 600; color: #fff; } .show .modal-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .show .modal-content, .modal-content { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .favourite_icon { display: flex; flex-wrap: wrap; } .ms_common_dropdown>li.favourite_icon a { padding: 4px 15px 12px 30px; } /* .ms_common_dropdown>li>a.add_to_queue>span:before { content: "+"; color: #7188a4; font-size: 26px; margin-left: -3px; } */ .ms_common_dropdown>li>a.add_to_queue:hover>span:before { color: var(--theme-color); } .ms_common_dropdown>li>a.add_to_queue>span { background-position: -476px 0px; } .ms_common_dropdown>li>a.add_to_queue:hover>span { background-position: -474px -35px; } .album_list_wrapper ul:not(.album_list_name) { background: transparent; padding-bottom: 10px; border-radius: 6px; padding-right: 10px; padding-left: 10px; } .album_list_wrapper ul:not(.album_list_name):hover { background: #19233b; cursor: pointer; } .album_list_wrapper>li { color: #ffffff; list-style: none; text-align: center; } /* .album_list_wrapper ul.btn_pause { background: #19233b; } .album_list_wrapper ul.btn_pause .play_no { display: none; } .album_list_wrapper ul.btn_pause .play_hover { opacity: 1; visibility: visible; transform: translateY(-2px); } */ .album_list_wrapper ul:not(.album_list_name):hover, .album_list_wrapper ul:not(.album_list_name) { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Notification Dropdown */ .recent-notification { max-width: 300px; background: #132332; box-shadow: 0 0 20px 0 rgb(0 0 0 / 4%); position: absolute; top: 70px; border: none; border-radius: 10px; min-width: 300px; right: -120px; -webkit-transform: translateY(50px); -moz-trans-webkit-transform: translateY(50px); -ms-trans-webkit-transform: translateY(50px); -o-trans-webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; visibility: hidden; z-index: 2; } .recent-notification.show { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-trans-webkit-transform: translateY(0px); -ms-trans-webkit-transform: translateY(0px); -o-trans-webkit-transform: translateY(0px); transform: translateY(0px); } .ms_rcnt_box_text h3 a { width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-notification.show, .recent-notification { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .drop-down-header { background: var(--theme-color); color: #ffffff; padding: 15px 20px 13px; text-align: center; border: none; border-radius: 10px 10px 0 0; } .drop-down-header.no_new_notification { border-radius: 10px 10px; } .drop-down-footer { text-align: center; padding: 15px 0 15px; } .recent-notification ul li { display: inline-block; width: 100%; border-bottom: 1px solid #30455f; position: relative; } .recent-notification ul li a { padding: 14px 20px 8px; display: flex; flex-wrap: wrap; } .drop-down-header h4 { color: #ffffff; font-size: 20px; } .drop-down-header p { margin: 0; } .ms_noti_wrap { position: relative; } .recent-notification ul li p { margin: 0; } .notification_icon { width: 20px; display: inline-block; margin-top: 5px; } .notification_info { width: calc(100% - 20px); padding: 0 20px; word-break: break-word; } .notification_icon img { height: 50px; width: 50px; border-radius: 50%; } .notification_info small { font-weight: 500; color: #ffffff; } .notification_icon svg { fill: var(--theme-color); height: 20px; } .notification-options { background: #0c1929; position: absolute; right: 0; min-width: 120px; font-size: 12px; visibility: hidden; opacity: 0; border-radius: 3px; } .notification-options.show { visibility: visible; opacity: 1; } .notification-options.show, .notification-options { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .notification-options li { color: #ffffff; padding: 3px 10px; } .notification-options li:last-child { border-bottom: 0; } .noti_icon { position: relative; } .notification-count { position: absolute; background: var(--theme-color); border-radius: 100%; min-width: 25px; min-height: 25px; text-align: center; right: -6px; color: #ffffff; top: -6px; font-size: 12px; } /* Register Login */ .ms_register_img { text-align: center; margin: 0 0 30px; } .ms_register_form h2 { font-size: 22px; margin: 0 0 20px; padding: 0 10px; text-align: center; } .ms_register_img img.img-fluid { max-height: 80px; } .notification_info small i { margin-right: 8px; } .notification-status { position: absolute; right: 20px; top: 20px; } .recent-notification>ul { height: 200px; overflow: hidden; overflow-y: auto; } /* width */ .recent-notification>ul::-webkit-scrollbar { width: 3px; height: 3px; } /* Track */ .recent-notification>ul::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.10); } /* Handle */ .recent-notification>ul::-webkit-scrollbar-thumb { background: var(--theme-color); } /* Checkbox */ .remember_checkbox label { line-height: 23px; padding-left: 30px; cursor: pointer; } .remember_checkbox label input { opacity: 0; } .remember_checkbox span:before { content: ""; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; border: 1px solid var(--theme-color); border-radius: 2px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s } .remember_checkbox span:after { content: ""; position: absolute; top: 8px; left: 4px; width: 10px; height: 5px; border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s; opacity: 0; } .remember_checkbox input:checked~span:after { opacity: 1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } .remember_checkbox input:checked~span:before { background-color: var(--theme-color); border: 1px solid transparent } .remember_checkbox input:checked~span { color: var(--theme-color); } .remember_checkbox { position: relative; } /**/ .ms_register_form .ms_btn { width: 100%; } .login_dialog .modal-body, .ms_register_popup .modal-body { padding: 40px 40px 18px; } .auth_controls { text-align: center; } .auth_controls .popup_forgot { margin: 0 0 10px; } .auth_controls a { font-weight: 600; } .remember_checkbox { margin: 0 0 10px; } .auth_controls p { margin-top: 10px; } .ms_sm_btn { min-width: auto; height: auto; line-height: 1.5; padding: 6px 20px; font-size: 12px; } .ms_pro_inner .ms_pro_namewrap { display: flex; flex-wrap: wrap; align-items: center; } .modal-content.add_lang { padding: 35px 20px 40px; } .modal-content { width: 96%; } /* Play List Page */ .ms_rcnt_box_img { position: relative; overflow: hidden; border-radius: 10px; } .ms_rcnt_box_img>img { border-radius: 10px; max-width: 100%; width: 100%; } .ms_rcnt_box:hover .ms_main_overlay { opacity: 1; } .ms_main_overlay { opacity: 0; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; } .ms_box_overlay { position: absolute; border-radius: 10px; background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); height: 100%; width: 100%; left: 0; top: 100%; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .ms_rcnt_box:hover .ms_box_overlay { top: 0; } .ms_more_icon { position: absolute; top: -10%; right: 20px; cursor: pointer; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; } .ms_rcnt_box:hover .ms_more_icon { top: 10px; } .more_option { padding: 0px; margin: 0px; position: absolute; top: 5px; right: 50px; background-color: #fff; max-width: 172px; width: 100%; list-style: none; padding: 25px 0px 13px 20px; text-align: left; border-radius: 10px; z-index: 100; visibility: hidden; opacity: 0; transform: translateX(-15px); transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; } .more_option.remove_playlist { padding: 9px 13px 0; } .ms_play_icon { position: absolute; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; background: var(--theme-color); border-radius: 50%; padding: 5px; } .ms_rcnt_box .ms_play_icon { position: absolute; top: 50%; left: 50%; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ms_rcnt_box:hover .ms_play_icon { visibility: visible; opacity: 1; } .ms_rcnt_box .ms_play_icon.play_icon_btn:after { background-image: url(../../images/svg/play.svg); background-position: center; background-size: 100%; opacity: 0; background-color: transparent; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); } .ms_rcnt_box:hover .ms_play_icon.play_icon_btn::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ms_rcnt_box_text { text-align: left; margin-top: 20px; } .ms_rcnt_box_text h3 { font-size: 16px; margin-bottom: 5px; } .ms_rcnt_box_text p { color: #dedede; font-size: 14px; margin: 0px; } .create_playlist { width: 100%; height: 100%; background-color: #172533; border-radius: 10px; position: relative; cursor: pointer; min-height: 280px; /* display: flex; align-items: center; justify-content: center; */ } .create_playlist img.img-fluid { height: 50px; } .ms_rcnt_box.marger_bottom25 .create_playlist{ display: flex; align-items: center; justify-content: center; } .create_playlist i.ms_icon.icon_playlist { position: absolute; top: 50%; left: 50%; background-position: -610px -25px; width: 30px; height: 30px; cursor: pointer; transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -o-transform: scale(1) translate(-50%, -50%); } .form-group { margin-bottom: 20px; } .play_song_name .que_data { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; } /* Sweet Alert */ body .swal2-container { padding: 20px; } body .swal2-popup { max-width: 500px; width: 100%; padding: 20px; border-radius: 10px; font-size: 16px; } body .swal2-title { margin: 0 0 10px; font-size: 32px; } body .swal2-content { padding: 0 15px; font-size: 16px; } body .swal2-styled { margin: 8px; padding: 6px 20px; } body .swal2-styled.swal2-confirm { border-radius: 3px; font-size: 16px; } body .swal2-styled.swal2-cancel { border-radius: 3px; font-size: 16px; } .ms_songslist_box:after { display: none; } #add_in_playlist_modal .modal-dialog .modal-content .modal-body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } #add_in_playlist_modal .modal-dialog .modal-content .modal-body .ms_share_img img{ height: 150px; } .nice-select.form-control{ margin: 10px 0 20px 0; } .ms_btn.ms_btn_pad{ padding: 0 15px; margin-bottom: 10px; } a.ms_btn.ms_btn_pad.create_playlist { min-height: 10px; max-width: 100%; width: 130px; border-radius: 35px; } .lyric_box.box_open_dv p span { color: rgb(255 255 255) !important; } .footer_page_wrapper .footer_page_row p { color: #fff !important; } /* Profile Page CSS */ .hide { display: none; } .ms_prodile_form .ms_pro_img { position: relative; cursor: pointer; margin: 0 auto 40px; } .pro_img_overlay { position: absolute; display: inline-block; left: 0; opacity: 0; cursor: pointer; bottom:0; } .pro_img_overlay > .form-control{ width: 100px; height: 100px; cursor: pointer; font-size: 0; padding: 0; line-height: 0; } } .ms_pro_img img { cursor: pointer; } .ms_prodile_form { background: #0e1e30; margin: 30px auto 0; padding: 30px 30px; border-radius: 10px; max-width: 1000px; } .playlist_boxes .album_more_optn { right: 15px; top: 15px; z-index: 99; width: 30px; height: 30px; text-align: right; } .playlist_boxes .album_more_optn.list_more ul li ul { right: 15px; left: unset; top: -15px; } .playlist_boxes .album_more_optn.list_more .list_more ul li >a { text-align: left; padding: 2px 15px 10px; } body .playlist_boxes .album_more_optn .ms_common_dropdown .favourite_icon a.addToFavourite { width: auto; } body .playlist_boxes .album_more_optn .ms_common_dropdown .favourite_icon { display: inline-flex; color: #7188a4; } .playlist_boxes .album_more_optn .ms_common_dropdown .favourite_icon, .playlist_boxes .album_more_optn .ms_common_dropdown .favourite_icon a { width: 100%; } .playlist_boxes .songslist_moreicon svg { opacity: 0; } .playlist_boxes:hover .songslist_moreicon svg { opacity: 1; } .playlist_boxes .album_more_optn.list_more .list_more ul li >a.ms_remove_user_playlist .delete_icon { background: url(../../../images/svg/delete_icon.svg); background-size: 15px; background-position: 2px 2px; background-repeat: no-repeat; } .playlist_boxes .album_more_optn.list_more .list_more ul li >a.ms_remove_user_playlist:hover .delete_icon { background: url(../../../images/svg/delete_icon.svg); background-size: 15px; background-position: 2px -45px; background-repeat: no-repeat; } /* Blog */ .ms_single_page_image { position: relative; margin: 0 0 20px; } .ms_main_data .hentry header.entry-header .entry-meta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; font-weight: 500; color: var(--theme-color); } .ms_main_data .hentry header.entry-header .entry-meta i { margin-right: 6px; } .ms_single_page_image .ms_blog_date { background: var(--theme-color); width: 87px; height: 100px; color: #fff; border-radius: 20px 0px 20px 0px; text-align: center; font-size: 15px; font-weight: bold; word-break: break-word; padding: 5px; display: flex; align-items: center; justify-content: center; position: absolute; top: -14px; left: -14px; border: 5px solid #1b2039; } .ms_single_page_image img { max-height: 500px; width: 100%; object-fit: cover; object-position: top center; border-radius: 10px 10px 0 0; } .ms_main_data .hentry { background: #152740; padding: 20px 20px 20px; border-radius: 10px; margin: 0px 0 50px; } .ms_main_data .comments-area .ms_cmnt_wrapper .ms_cmnt_form .ms_input_group1 { width: 100%; padding: 0; margin: 0 0 30px; } .ms_main_data .comments-area .ms_cmnt_wrapper .ms_cmnt_form .ms_input_group2 { width: 100%; } .ms_main_data .hentry header.entry-header { margin: 0px 0 20px; } .ms_main_data { margin: 0 0 50px; } .ms_main_data .comments-area ol.comment-list { padding: 0; list-style: none; margin: 0 0 20px; } .comment-author.comment_img { width: 80px; margin: 0 0 20px; } .ms_main_data .comments-area ol.comment-list .comment-body.ms_comment_section .comment_info { width: calc(100% - 80px); padding-left: 30px; } .ms_main_data .comments-area ol.comment-list .comment-body.ms_comment_section { display: flex; flex-wrap: wrap; margin: 0 0 30px; background: #152740; padding: 20px 20px; border-radius: 10px; } .comment_info .comment_head h3, .comment_info .comment_head h3 * { font-style: normal; font-size: 20px; margin: 0 0 3px; } .ms_main_data .comments-area ol.comment-list .comment-body.ms_comment_section .comment_info .comment_head { margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; font-weight: 600; } .adminComments { list-style-type: none; margin-left: 20px; } /* Pricing Plan CSS */ .ms_plan_box { background: #0f1f32; margin: 0 0 30px; padding: 30px 30px; border-radius: 10px; text-align: center; } img { max-width: 100%; } .ms_plan_img img { height: 100px; } .ms_plan_header { margin: 0 0 20px; } .ms_plan_box .plan_heading { text-transform: capitalize; font-size: 20px; margin: 0 0 10px; } .plan_price { font-size: 40px; display: inline-block; font-weight: 700; color: #ffffff; margin: 20px 0; } .ms_plan_box > ul { margin: 0 0 30px; } .ms_plan_box > ul li { color: #7c8ea5; font-weight: 500; margin: 0 0 10px; } .ms_create_playlist_modal .ms_share_text { text-align: center; } .ms_create_playlist_modal .ms_share_text .clr_modal_btn { margin: 10px 0 0; } /* Comments */ .ms_heading h1 { text-transform: capitalize; } .ms_test_box { margin: 0 0 30px; } .ms_test_top .ms_test_img img { max-width: 100%; width: 100%; margin: auto; display: inherit; } .ms_test_top { text-align: center; padding: 20px; border: 1px solid #19233b; border-radius: 5px; background-color: #19233b; float: left; width: 100%; } .ms_test_top .ms_test_img { width: 200px; float: left; min-height: auto; background-size: auto 100%; background-repeat: no-repeat; background-position: center; margin-bottom: 0px; border-radius: 5px; } .ms_test_box .ms_test_top .ms_test_img { width: 50px; } .ms_test_top .ms_test_name { width: calc(100% - 50px); float: left; padding-left: 20px; width: calc(100% - 220px); text-align: left; } .ms_test_top .ms_test_name h3 { font-size: 20px; text-transform: capitalize; } .ms_test_top .ms_test_name span.cmnt_time { color: #ffffff; font-size: 15px; display: block; } .ms_test_para { display: inline-block; width: 100%; margin: 10px 0 0; } /* FAQ */ .ms_faq_wrapper .card { background-color: #112136; border-radius: 10px; margin: 0 0 30px; } .ms_faq_wrapper .card button.btn.btn-link { color: #8097b1; font-size: 18px; padding: 0; text-decoration: none; outline: none; width: 100%; text-align: left; border: 0; box-shadow: none; background: transparent; } .ms_faq_wrapper .card-body { padding: 20px; font-size: 15px; border-top: 1px solid rgb(48, 69, 95); color: #7188a4; } .ms_faq_wrapper .card-header h2 { margin-bottom: 0; } .ms_faq_wrapper .card-body p { margin: 0; } .ms_faq_wrapper .card .card-header { padding: 10px 20px 10px; } .ms_faq_wrapper .card button.btn.btn-link:after { content: ""; border-top: 2px solid #ff553e; border-left: 2px solid #ff553e; transform: rotate( -135deg); width: 12px; height: 12px; display: inline-block; float: right; margin-top: 6px; } .ms_faq_wrapper .card button.btn.btn-link:not(.collapsed):after { transform: rotate(45deg); } .playlist_boxes .ms_rcnt_box_img, .playlist_boxes .ms_rcnt_box_img img { width: 100%; display: inline-block; } /* Footer CSS */ .ms_copyright_wrapper { width: 100%; padding: 0 20px; } .footer-menus { text-align: right; } .ms_footer_wrapper .ms_pages { background-color: transparent; border-top: 1px solid #616264; padding: 5px 0; display: flex; flex-wrap: wrap; margin-right: 50px; justify-content: space-between; text-align: left; } .ms_footer_wrapper .ms_pages p { margin-bottom: 0; display: inline-block; text-transform: capitalize; } .ms_footer_wrapper .ms_pages p a { border-right: 1px solid rgb(48, 69, 95); padding: 0 20px; } .ms_footer_wrapper .ms_pages p:last-child a { border-right: 0px; } .ms_copyright { margin-bottom: 20px; } .main_class .ms_footer_wrapper { margin-bottom: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .foo_sharing { display: flex; flex-wrap: wrap; align-items: center; } .ms_main_wrapper.ms_mainindex_wrapper { background: url(../../../images/index_bg.png) no-repeat; background-position: top right; height: 100vh; background-size: 40%; background-position: right top; height: 100vh; background-size: contain; } /* Footer */ .footer_page_wrapper .footer_page_row { background: #102033; padding: 20px 30px; border-radius: 10px; color: #ffffff; } .footer_page_wrapper .footer_page_row h1, .footer_page_wrapper .footer_page_row h2, .footer_page_wrapper .footer_page_row h3, .footer_page_wrapper .footer_page_row h4, .footer_page_wrapper .footer_page_row h5, .footer_page_wrapper .footer_page_row h6 { color: var(--theme-color); margin: 0 0 10px; } /* Playlist */ .playlist_boxes { background: transparent; padding: 0px; border-radius: 10px; } .playlist_boxes:hover { background: #152740; padding: 15px; } .playlist_boxes:hover, .playlist_boxes { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .playlist_boxes .songslist_moreicon svg, .playlist_boxes .songslist_moreicon svg path { fill: var(--theme-color); } /* Track Scroll */ .ms_track_slides { max-height: 600px; overflow: hidden; } .ms_track_slides:hover { overflow: auto; } .ms_music_right.ms_track_slides { padding-right: 15px; } .ms_track_slides::-webkit-scrollbar { width: 3px; } .ms_track_slides::-webkit-scrollbar-track { background-color: #24303d; } .ms_track_slides::-webkit-scrollbar-thumb { background-color: var(--theme-color); } /* Play btn */ .play_box_container .slider_artist_imgbox, .play_box_container .play_box_img { position: relative; } .play_box_container:hover .ms_play_icon, .play_box_container:hover .play_box_img { opacity: 1; visibility: visible; } .limited_text_line { white-space: nowrap; max-width: 100%; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; } /* Blog Sidebar CSS */ .sidebar_wrapper .widget { background-color: #102034; padding: 30px 40px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 30%); } .sidebar_wrapper .widget-title { font-size: 18px; position: relative; display: inline-block; padding-bottom: 10px; text-transform: capitalize; width: 100%; margin-bottom: 20px; } .sidebar_wrapper .widget-title:after { width: 50px; height: 1px; content: ""; position: absolute; bottom: 0; left: 0; z-index: 0; background: #fb324f; background-image: -webkit-linear-gradient(left, #fb324f, #fb324f, #161a2d); background-image: -moz-linear-gradient(left, #fb324f, #fb324f, #161a2d); background-image: -ms-linear-gradient(left, #fb324f, #fb324f, #161a2d); background-image: -o-linear-gradient(left, #fb324f, #fb324f, #161a2d); } .sidebar_wrapper .widget li span { float: right; } .sidebar_wrapper .widget li { margin: 0 0 10px; } .sidebar_wrapper .tagcloud .tag-cloud-link { background: #172533; margin: 0 10px 10px 0; padding: 2px 10px; display: inline-block; border: 1px solid #172533; border-radius: 20px; font-size: 12px; font-weight: 500; } .sidebar_wrapper .tagcloud .tag-cloud-link:hover { background: var(--theme-color); color: #ffffff; border-color: var(--theme-color); } .sidebar_wrapper .widget.widget_post li { list-style: disc; padding-left: 0; } .ms_btn { text-transform: capitalize; } .blog-title { font-size: 22px; margin: 0 0 20px; text-transform: capitalize; } .notification-status .notification-option-btn { width: 30px; display: inline-block; cursor: pointer; text-align: right; } .music_center_slider .music_center_img .img-fluid { max-height: 240px; width: 100%; object-fit: cover; max-width: 350px; } .ms_music_right.ms_track_slides .ms_play_icon { top: 40%; } /*====Media Css Start====*/ @media(min-width:1800px) { .ms_songslist_box:after { content: ""; position: absolute; height: 300px; left: 0; right: 0; bottom: 0; background-image: -moz-linear-gradient( 90deg, rgb(11 25 40) 0%, rgb(0 120 255 / 0%) 100%); background-image: -ms-linear-gradient( 90deg, rgb(11 25 40) 0%, rgb(0 120 255 / 0%) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(11 25 40) 0%, rgb(0 120 255 / 0%) 100%); } .ms_songslist_box:hover:after { z-index: -1; } .common_pages_space { min-height: 450px; } } @media(min-width:1400px) { .col-xxl-2 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media(max-width:1800px) { .jp-controls.flex-item { margin-right: 25px; } .jp-type-playlist { padding-left: 375px; } .jp-progress-container.flex-item { max-width: 580px; } } @media(max-width:1600px) { .jp-progress-container.flex-item { max-width: 400px; } .ms_play_song { width: 300px; padding: 15px 0px 0px 10px; } .jp-type-playlist { padding-left: 315px; } .jp_queue_wrapper { padding-right: 10px; } .jp-volume-controls.flex-item { margin-left: 15px; flex-basis: inherit; } .jp-progress-container.flex-item { max-width: 325px; } .jp_queue_wrapper span.que_text { min-width: inherit; padding: 0 13px; } } @media(max-width:1199px) { .ms_copyright_wrapper p { text-align: center; width: 100%; } .ms_footer_wrapper .ms_pages .footer-menus p { width: auto; } .ms_footer_wrapper .ms_pages .footer-menus { text-align: center; } .ms_main_wrapper.ms_mainindex_wrapper { background: transparent; background-image: none; } .jp_queue_wrapper span.que_text { display: none; } .play_song_name span.que_img { width: 50px; } .play_song_name .que_data { width: calc(100% - 50px); } .ms_play_song { width: inherit; } span.play-left-arrow { right: 5px; } .jp-type-playlist { padding-left: 252px; } .ms_play_song { padding: 35px 0px 0px 10px; } .album_list_wrapper { overflow: auto; } .album_list_wrapper>ul { min-width: 1000px; } .album_list_wrapper>ul>li:first-child, .album_list_wrapper>ul>li:nth-child(6), .album_list_wrapper>ul>li:first-child { width: 80px; } } @media(max-width:1024px) { .ms_player_wrapper { bottom: -330px; } .ms_player_wrapper.close_player { bottom: 0; } .player_left { position: inherit; float: inherit; justify-content: center; background-image: none; margin-top: 20px; } span.play-left-arrow { right: 10px; top: 20px; } .player_left.open_list .play_song_options { display: block; display: block; } .jp-type-playlist { padding-left: 0; } .jp-controls.flex-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-right: 0; text-align: center; } .jp-toggles.flex-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: center; } .jp-progress-container.flex-item { max-width: 80%; margin: auto; } .ms_play_song { height: inherit; padding: 0; } .play_song_name span.que_img { width: 100px; } .play_song_name .que_data { width: 100%; padding-left: 0; margin-top: 10px; } .jp-track-name { padding-right: 0; flex-direction: column; text-align: center; } .play_song_options ul { flex-direction: column; transform: inherit; } .play_song_options { margin-right: 0; display: none; position: absolute; bottom: 100%; background: var(--theme-color); background-image: -moz-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -webkit-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); background-image: -ms-linear-gradient( -57deg, rgb(255, 85, 62) 0%, rgb(255, 0, 101) 100%); padding: 10px; border-radius: 10px; left: 0; z-index: 1; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .play_song_options ul li a { border-right: 0; padding: 0; } .album_single_text { width: 100%; padding: 30px 0 0; } } @media(min-width:1200px) { /*.ms_main_wrapper.ms_mainindex_wrapper {*/ /* background: url(../../../images/index_bg.png) no-repeat;*/ /* background-position: right top;*/ /* height: 100vh;*/ /* background-size: contain;*/ /*}*/ .common_pages_space { min-height: 400px; } } @media(min-width:992px) { /* close sidebar css */ .open_menu .nav_heading { opacity: 0; visibility: hidden; padding: 27px 0px 6px 0px; transition: 0s; transition-delay: 0s; position: absolute; z-index: 5; } .open_menu .ms_nav_close i { transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .open_menu .ms_sidemenu_wrapper { width: 80px; } .open_menu .ms_logo_inner { padding: 33px 0px 30px 0px; justify-content: center; } .open_menu .nav_text { opacity: 0; visibility: hidden; display: none; } .open_menu .ms_nav_wrapper ul li a { display: flex; justify-content: center; } .open_menu .ms_nav_wrapper ul li a { padding: 12px 0px; text-align: center; } .open_menu .ms_content_wrapper { margin-left: 80px; } .open_menu .ms_header { left: 80px; } .open_menu .ms_logo { display: none; } .open_menu .ms_logo_mini { display: block; } } @media(min-width:1400px) { .ms_music_row { display: flex; } .ms_music_left { max-width: 668px; width: 100%; padding-right: 40px; } .ms_music_right { width: calc(100% - 668px); } } @media(max-width:1399px) {} @media(max-width:1199px) { .ms_top_search { max-width: 300px; min-width: 300px; } .common_pages_space { min-height: 200px; } } @media(max-width:991px) { .ms_header_inner .ms_top_right .ms_pro_inner .ms_top_btn .ms_btn { min-width: auto; } .play_song_name .jp-now-playing .que_data { padding: 0 40px; width: 100%; max-width: 80%; } .ms_footer_wrapper .ms_pages { margin: 0 -15px; } .ms_menu_toggle span { display: block; width: 18px; height: 2px; background: #7c8ea5; margin-bottom: 4px; transition: 0.3s; } .ms_menu_toggle span:last-child { margin-bottom: 0; } .ms_menu_toggle:hover span:nth-child(2) { width: 18px; } .ms_menu_toggle span:nth-child(2) { width: 9px; } .open_menu .ms_menu_toggle span:nth-child(1) { transform: translate(1px, 6px) rotate(-48deg); } .open_menu .ms_menu_toggle span:nth-child(2) { opacity: 0; visibility: hidden; } .open_menu .ms_menu_toggle span:nth-child(3) { transform: translate(1px, -6px) rotate(48deg); } .ms_sidemenu_wrapper { left: -225px; } .open_menu .ms_sidemenu_wrapper { left: 0; } .ms_menu_toggle { cursor: pointer; margin-left: 15px; } .ms_content_wrapper { margin-left: 0; } .ms_header { left: 0; } .ms_header_inner { padding: 26px 15px; } .ms_header.dark_header .ms_header_inner { padding: 15px 15px; } .ms_nav_close { display: none; } .ms_songslist_main { max-width: inherit; } .common_pages_space { padding: 106px 15px 0 15px; } /* Footer CSS */ body:not(.open_menu) .ms_footer_wrapper, .open_menu .ms_footer_wrapper { padding-left: 0; } } @media(max-width:767px) { .ms_main_data .comments-area ol.comment-list .comment-body.ms_comment_section .comment_info { width: 100%; padding-left: 0; } .ms_top_search { max-width: inherit; min-width: inherit; } .ms_header_inner { flex-direction: column; } .ms_top_left { width: 100%; } .ms_top_right { margin-top: 15px; } .common_pages_space { padding: 155px 15px 0 15px; } .ms_songslist_wrap .ms_songslist_box>div { padding-right: 0px; } .recent-notification { right: 0; } .ms_lang_popup .modal-content ul.lang_list li { width: 100%; } .modal-content { width: 85%; } } @media(max-width:575px) { .ms_songslist_inner { flex-direction: column; } .ms_songslist_right { margin-top: 15px; } .ms_songslist_inner { padding: 10px; } .ms_songslist_nav>li>a { margin-right: 16px; } .ms_top_lang span { font-size: 0; } } @media(max-width:420px) { .ms_player_wrapper { bottom: -422px; } .ms_songslist_left { flex-direction: column; justify-content: center; } .ms_songslist_nav>li>a { margin-bottom: 10px; } .jp-volume-controls.flex-item { margin-left: 0; flex-basis: 100%; display: flex; justify-content: center; margin-top: 20px; } .jp-controls.flex-item { margin-bottom: 20px; } .jp-progress-container.flex-item { max-width: 90%; } }