/* webfonts */

@font-face {
    font-family: 'Inter-bold';
    src: url('../fonts/Inter-Bold.woff2') format('woff2'), url('../fonts/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-black';
    src: url('../fonts/Inter-Black.woff2') format('woff2'), url('../fonts/Inter-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-extra-bold';
    src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'), url('../fonts/Inter-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-semibold';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2'), url('../fonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-light';
    src: url('../fonts/Inter-Light.woff2') format('woff2'), url('../fonts/Inter-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-regular';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'), url('../fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-medium';
    src: url('../fonts/Inter-Medium.woff2') format('woff2'), url('../fonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* webfonts end */

:root {
    --white: #fff;
    --light-gray:#8A8A8A;
    --light-black:#0E0F11;
    --dark-gray:#3E3E43;
    --bg-color:#1B1B1B;
    --gray:#858585;
    --lg-color:#272727;
    --md-color:#3E3E3E;
    --thamar-black:#181818;
    --var-black:#232324;
    --font: 'Inter-regular';
    --font-light: 'Inter-light';
    --font-bold: 'Inter-bold';
    --font-semibold: 'Inter-semibold';
    --font-medium: 'Inter-medium';
    --font-black: 'Inter-black';
    --font-extra-bold: 'Inter-extra-bold';
}

html {
    margin: 0;
}

body {
    font-family: var(--font);
    color: var(--secondary-color);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

h1 {
    font-size: 75px;
}

h2 {
    font-size: 50px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 30px;
}

h5 {
    font-size: 26px;
}

h6 {
    font-size: 20px;
}

a, p, button, span {
    white-space: normal;
    word-break: break-word;
}

a {
    text-decoration: none !important;
}

p {
    font-size: 16px;
    margin: 0;
}

.large-font {
    font-size: 18px;
}

.small-font {
    font-size: 14px;
}
.btn:hover {
    color: var(--white);
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
label {
    font-size: 15px;
    color: var(--light-gray);
    line-height: 26px;
    margin-bottom: 3px;
}
.btn {
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    border-radius: 100px;
    min-height:40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.form-check-input:focus {
    box-shadow: none;
}
button.navbar-toggler {
    padding: 0;
}
.gradiant:after, .downloadsongs-popup .modal-content:after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    background: linear-gradient(to bottom , #8A00D4, #5535EE);
    z-index: -1;
    border-radius: 50px;
}
.selling-btn.gradiant:after {
    background: linear-gradient(to bottom , #FE0B1D, #FE00E9);
}
.gradiant {
    position: relative;
    background-clip: padding-box;
    border-radius: 50px;
    background: var( --light-black);
}
:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1620px;
    margin: 0 auto;
}
.form-control {
    background: #1C1C1D;
    border-radius: 8px;
    border: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
    color: var(--light-gray);
    padding-right: 40px;
}

.form-control:focus {
    color: var(--white);
    background-color: #1c1c1d;
    border-color: transparent;
    box-shadow: none;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}
/* HEADER CSS START */
header.cstm-header {
    background: var( --light-black);
    padding: 23px 0px;
    transition: all 0.5s;
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9;
}
.cstm-header ul.right-nav li.login-signup a:after {
    content: '/';
    position: absolute;
    left: 4px;
}
.cstm-header ul.right-nav li.login-signup a:first-child:after {
    display: none;
}
.cstm-header ul.right-nav li.login-signup a {
    padding-left: 20px;
    position: relative;
}
header.cstm-header nav.navbar {
    padding: 0;
}
header.cstm-header.fixed-header {
    background: rgb(26 26 26);
    box-shadow: 0px 0px 11px #000;
}
.cstm-header ul.right-nav {
    display: flex;
    align-items: center;
}
.cstm-header ul.right-nav li.selling-btn svg {
    margin-right: 10px;
}
.cstm-header .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 18px;
    color: var(--white);
}
.cstm-header .navbar-expand-lg .navbar-nav .nav-item {
    margin-right: 40px;
}
.cstm-header ul.right-nav li.selling-btn {
    margin-left: 20px;
    backdrop-filter: blur(1px);
}
.cstm-header ul.right-nav li.selling-btn a.btn {
    padding: 8px 32px;
    font-size: 18px;
    font-family: 'Inter-medium';
    background: var( --light-black);
    text-transform: capitalize;
}
.cstm-header ul.right-nav .cstm-profile-dropdown img {
    border-radius: 50%;
    width: 39px;
    height: 39px;
    object-fit: cover;
}
.cstm-header ul.right-nav .cstm-profile-dropdown a.btn.dropdown-toggle {
    padding: 3px 55px 3px 6px;
    position: relative;
    background: var( --light-black);
    border: 2px solid #3E3E43;
}
.cstm-header ul.right-nav .cstm-profile-dropdown .dropdown-toggle::after {
    content: "";
    position: absolute;
    top: 15px;
    transform: rotate(45deg);
    right: 11px;
    width: 14px;
    height: 14px;
    border-right: 3px solid #3E3E43;
    border-bottom: 3px solid #3E3E43;
    display: inline-block;
    border-top: 0;
    border-left: 0;
    cursor: pointer;
    z-index: 1;
    margin: 0;
    transition: .5s ease;
}
.cstm-explore-dropdown .dropdown-toggle::after {
    position: absolute;
    transform:rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    display: inline-block;
    border-top: 0;
    border-left: 0;
    cursor: pointer;
    z-index: 1;
    margin-left: 8px;
    transition: .3s ease;
    top: 15px;
}
.cstm-explore-dropdown .dropdown-toggle.show::after {
    transform:rotate(225deg);
    transition: .5s ease;
    top: 20px;
}
.cstm-header ul.right-nav .cstm-profile-dropdown .dropdown-toggle.show::after {
    transform:rotate(225deg);
    top: 20px;
    transition: .5s ease;
}
.dropdown.cstm-explore-dropdown ul.dropdown-menu a.dropdown-item:hover {
    color: var(--white);
}
.cstm-header a.navbar-brand {
    margin-right: 122px;
}
.cstm-profile-dropdown ul.dropdown-menu {
    background: #1A1A1A;
    border-radius: 10px;
    min-width: 280px;
    left: auto !important;
    right: 0;
    padding: 10px;
    margin-top: 10px;
}
.cstm-profile-dropdown a.dropdown-item {
    font-size: 14px;
    font-family: 'Inter-medium';
    color: var(--gray);
}
.cstm-profile-dropdown a.dropdown-item span.drop-menu-span {
    margin-right: 15px;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--white);
    background-color: transparent;
}
.cstm-profile-dropdown a.dropdown-item:hover {
    color: var(--white);
}
.cstm-profile-dropdown a.dropdown-item:hover svg, .cstm-profile-dropdown a.dropdown-item:hover svg path {
    color: var(--white);
    fill: var(--white);
}
.cstm-profile-dropdown .dropdown-item.active {
    color: var(--white);
    background-color: transparent;
}
button.navbar-toggler i {
    color: var(--white);
    font-size: 30px;
}
.login-status li a {
    font-size: 20px;
    color: rgb(255 255 255 / 90%);
}
ul.right-nav.login-status>li {
    margin-left: 20px;
    position: relative;
}

li.drop-profile-details {
    background: #272727;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
}
.cstm-header .cstm-profile-dropdown li.drop-profile-details .drop-profile img {
    width: 45px;
    height: 45px;
}
.cstm-header .cstm-profile-dropdown li.drop-profile-details .drop-profile {
    margin-right: 11px;
}
.cstm-header .cstm-profile-dropdown li.drop-profile-details .drop-content p {
    font-family: 'Inter-medium';
    color: var(--white);
    margin-bottom: 5px;
}
.cstm-header .cstm-profile-dropdown li.drop-profile-details .drop-content span.btn {
    font-family: 'Inter-medium';
    font-size: 12px;
    line-height: 15px;
    color: var(--white);
    padding: 2px 11px;
    min-height: 21px;
    text-transform: capitalize;
    cursor: auto;
}
.cstm-header .cstm-profile-dropdown li {
    margin-bottom: 14px;
}
.cstm-header .cstm-profile-dropdown li a.btn.log-out-btn {
    min-height: 33px;
    padding: 4px 20px;
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'Inter-medium';
    text-transform: capitalize;
}
.cstm-header .cstm-profile-dropdown li.log-out-list svg {
    margin-right: 6px;
}
.cstm-header .cstm-profile-dropdown li.log-out-list {
    border-top: 1px solid #272727;
    padding: 18px 18px 0;
}
.cstm-header ul.right-nav.mobile-nav {
    display: none;
}
.dropdown.cstm-explore-dropdown ul.dropdown-menu {
    background: #1A1A1A;
    border-radius: 10px;
    border: 1px solid #3e3e3e;
    left: 10px !important;
}
.dropdown.cstm-explore-dropdown ul.dropdown-menu a.dropdown-item {
    font-size: 14px;
    font-family: 'Inter-medium';
    color: var(--gray);
}
.cstm-header .navbar-expand-lg .navbar-nav .nav-link:hover {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* HEADER CSS END */
/* LOGIN CSS START */
.login-logo {
    text-align: center;
    margin-bottom: 30px;
}
section.login-sec {
    background: #0E0F11 url(../img/login-banner.png) no-repeat center /cover;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 50px 0;
}
.login-content {
    background: var( --light-black);
    border-radius: 20px;
    border: 2px solid  transparent;
    width: 100%;
    max-width: 470px;
    padding: 44px 50px;
    margin: 0 auto;
    position: relative;
}

.login-content::after, 
.change-password-sec .login-content::after, 
.upload-song-sec .edit-profile-inner::after, 
section.details-sec .details-content:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(to left, #8a00d4, #5535ee);
}
.login-content h5 {
    font-weight: 700;
    color: var(--white);
    line-height: 31px;
    margin-bottom: 6px;
}
.login-content p{
    color: var(--light-gray);
    line-height: 26px;
}
form.login-form {
    margin-top: 22px;
}
form.login-form .form-group {
    margin-bottom: 8px;
    position: relative;
}
.login-forgot-check-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-forgot-check-box .form-check {
    margin-bottom: 0;
}
.login-forgot-check-box p {
    margin-bottom: 0;
    cursor: pointer;
}
.login-forgot-check-box p a {
    cursor: pointer;
    font-size: 14px;
    color: rgb(138 138 138 / 50%);
}
.login-forgot-check-box label {
    margin-bottom: 0px;
    cursor: pointer;
}
button.btn.login-btn {
    width: 100%;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    border-radius: 100px;
    margin-top: 20px;
}
.login-hr {
    position: relative;
    text-align: center;
}
.login-hr p {
    font-size: 12px;
    line-height: 16px;
    color: rgb(138 138 138 / 50%);
    text-align: center;
    margin: 18px 0px;
    background: var( --light-black);
    display: inline-block;
    z-index: 1;
    position: relative;
    padding: 0 12px;
}
.login-hr:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #222427;
    top: 26px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
ul.google-list {
    display: flex;
    grid-gap: 15px;
}
ul.google-list li {
    border: 1px solid #3E3E43;
    border-radius: 100px;
    transform: matrix(1, 0.01, 0, 1, 0, 0);
    display: inline-flex;
    width: 50%;
    text-align: center;
    height: 52px;
    align-items: center;
    justify-content: center;
}
ul.google-list a {
    color: var(--white);
}
p.login-registred {
    text-align: center;
    margin: 24px 0 0;
    font-size: 14px;
}
p.login-registred a.create-account {
    color: #5535EE;
    margin-left: 5px;
}

ul.google-list li a span {
    margin-right: 8px;
    vertical-align: text-bottom;
}
.login-sec .form-group .icon {
    position: absolute;
    right: 16px;
    top: 55px;
    color: #CACACA;
    line-height: 10px;
    cursor: pointer;
}
.login-forgot-check-box .form-check-input {
    background-color: #0E0F11;
    border-color: #454545;
    border: 1px solid #454545;
    border-radius: 90px;
    cursor: pointer;
}

.login-sec .tacbox-group, .upload-song-sec .tacbox-group{
    display: flex;
}
.tacbox-input {
    margin-right: 10px;
}
.login-sec .tacbox-group a {
    color: var(--light-gray);
}
.login-sec .tacbox-group a {
    color: #7c10dd;
    font-size: 15px;
}
/* LOGIN CSS END */
/* RESET PASSWORD CSS START */
.reset-arrow {
    text-align: center;
    margin-top: 19px;
}
/* RESET PASSWORD CSS END */

/* PROFILE CSS START */
section.cstm-profile-sec, section.edit-profile-sec {
    background: #0E0F11 url(../img/profile-banner-bg.png) no-repeat center;
    min-height: 660px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    padding: 50px 0;
    z-index: 1;
    position: relative;
}
.cstm-profile-dropdown .dropdown-item.active .drop-menu-span  svg path {
    fill: #fff;
}
.profile-inner-content {
    background: var(--bg-color);
    border: 1px solid var(--dark-gray);
    border-radius: 20px;
    padding: 32px;
}
.profile-inner-content {
    background: var(--bg-color);
    border: 1px solid var(--dark-gray);
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 492px;
    margin: 0 auto;
    position: relative;
}
.profile-data {
    display: flex;
    align-items: center;
    width: 86%;
}
.profile-inner-content .profile-left-img img {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    object-fit: cover;
}
.profile-left-img {
    margin-right: 19px;
}
.profile-inner-content .profile-right-content h6 {
    color: var(--white);
    line-height: 22px;
    margin-bottom: 2px;
}
.profile-inner-content .profile-right-content p {
    color: var(--gray);
    line-height: 31px;
    margin-bottom: 8px;
    white-space: pre;
}
.profile-inner-content .profile-right-content span.btn {
    font-family: 'Inter-medium';
    font-size: 12px;
    line-height: 15px;
    color: var(--white);
    padding: 6px 9px;
    min-height: 21px;
    cursor: auto;
}
.profile-edit-btn {
    position: absolute;
    right: 35px;
    top: 48px;
}
.profile-edit-btn span {
    background: var(--lg-color);
    border: 1px solid var(--md-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.profile-list-bottom {
    border-top: 1px solid #272727;
    margin-top: 31px;
    padding-top: 38px;
}
.profile-list-bottom ul li {
    display: flex;
    margin-bottom: 30px;
}
.profile-list-bottom ul li:last-child {
    margin-bottom: 0px; 
}
.profile-list-bottom ul li p {
    color: var(--gray);
    line-height: 22px;
}
.profile-list-bottom ul li span.profile-list-icon {
    margin-right: 16px;
}
/* PROFILE CSS END */

/* EDIT PROFILE CSS START */
.edit-account-form input.form-control::placeholder {
    color: var(--light-gray);
    font-size: 15px;
}
/* section.edit-profile-sec.upload-song-sec {
    background: #0E0F11 url(../img/banner-bg-list.jpg) no-repeat;
    min-height: 760px;
    background-attachment: fixed;
    background-size: cover;
} */
.edit-profile-left {
    background: #1B1B1B;
    border-radius: 20px;
    text-align: center;
    padding: 40px 20px;
}
.edit-profile-left .edit-profile-img img {
    height: 131px;
    width: 131px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 26px;
}

.edit-profile-left .edit-profile-content span.btn {
    font-family: 'Inter-medium';
    font-size: 12px;
    line-height: 15px;
    color: var(--white);
    padding: 6px 14px;
    min-height: 21px;
    cursor: auto;
}
.edit-profile-left .edit-profile-content h5 {
    line-height: 22px;
    color: var(--white);
    font-family: 'Inter-medium';
    margin-bottom: 13px;
    font-size: 22px;
}
.edit-profile-left .edit-profile-content h6 {
    line-height: 22px;
    color: #c38eff;
    font-family: 'Inter-medium';
    margin-bottom: 13px;
    font-size: 19px;
}
.edit-profile-left .edit-profile-content p.user-email {
    color: #9e9797;
    font-size: 14px;
    white-space: pre;
    margin-bottom: 14px;
}
.edit-profile-left .edit-profile-img {
    position: relative;
    display: inline-block;
}
.edit-profile-left .edit-profile-img .edit-img-icon {
    position: absolute;
    right: 0px;
    bottom: 40px;
    cursor: pointer;
}
.edit-profile-left .edit-profile-img span.camera {
    background: #1B1B1B;
    border: 2px solid #FFFFFF;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.edit-profile-right h5 {
    line-height: 28px;
    text-transform: capitalize;
    color: var(--white);
    font-family: 'Inter-bold';
    margin-bottom: 32px;
}
form.edit-account-form .form-group {
    margin-bottom: 15px;
}
form.edit-account-form textarea.form-control {
    min-height: 153px;
    resize: none;
    padding: 8px;
}
.save-btn a.btn {
    padding: 10px 51px;
}
.edit-profile-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
/* EDIT PROFILE CSS END*/

input.profile-upload {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    top: 0;
}

/* BANNER CSS START */
section.banner-sec {
    background: var( --light-black);
    padding: 84px 0;
    position: relative;
}
.banner-layer {
    position: relative;
}
.banner-layer::before {
    content: '';
    position: absolute;
    background: url(../img/banner-layer.png) no-repeat;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: 100%;
}
.banner-sec .banner-inner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 44px 44px 0 0;
}
.banner-inner-img {
    width: 100%;
    height: 292px;
    overflow: hidden;
    margin-bottom: 40px;
}
.banner-left-content span.top-title {
    font-size: 34px;
    color: var(--white);
    font-family: 'Inter-semibold';
    margin-bottom: 18px;
}
.banner-left-content h1 {
    font-size: 90px;
    text-transform: capitalize;
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Inter-bold';
    margin-bottom: 18px;
}
.banner-left-content h6 {
    font-size: 22px;
    line-height: 36px;
    color: rgb(255 255 255 / 70%);
    font-family: 'Inter-regular';
}
.banner-left-content .create-btn {
    margin-top: 32px;
    padding: 10px 32px;
}
.banner-right-content {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(56.4375px);
    border-radius: 44px;
    text-align: center;
    max-width: 571px;
    margin: 0 auto;
    padding-bottom: 42px;
    position: relative;
}
.banner-right-content h4 {
    font-size: 16px;
    text-align: center;
    color: var(--white);
    font-family: 'Inter-medium';
    line-height: 1.5;
    max-width: 462px;
    margin: 0 auto 20px;
}
.banner-right-content ul.golf-music-list {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.banner-right-content ul.golf-music-list li {
    display: flex;
}
.banner-right-content ul.golf-music-list li p {
    font-family: 'Inter-medium';
    line-height: 27px;
    color: var(--white);
}
.banner-right-content ul.golf-music-list li span {
    margin-right: 10px;
}
.banner-right-content ul.golf-music-list li:first-child {
    margin-right: 36px;
}
.banner-right-content a.btn.buy-btn {
    padding: 10px 50px;
}
.banner-right-content::after {
    content: '';
    position: absolute;
    background: url(../img/banner-layer.png) no-repeat;
    width: 100%;
    top: 0;
    right: 0;
}
/* BANNER CSS END */
/* GET STARTED SECTION START */
section.get-started-sec {
    background: var( --light-black);
    padding: 72px 0;
    position: relative;
}
.loops-box-get-inner img {
    width: 100%;
}
.get-started-inner {
    width: 100%;
    max-width: 770px;
    margin: 0 auto;
}
section.get-started-sec::before, section.payment-summary::before {
    content: '';
    position: absolute;
    background: url(../img/bg-layer-left.png) no-repeat;
    width: 141px;
    height: 278px;
    top: 0;
    left: 0;
}
section.get-started-sec::after, section.payment-summary::after {
    content: '';
    position: absolute;
    background: url(../img/bg-layer-right.png) no-repeat;
    width: 107px;
    height: 278px;
    bottom: 0;
    right: 0;
}
.get-started-inner h2 {
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
    font-family: 'Inter-bold';
    margin-bottom: 50px;
}
.loops-box-get {
    display: flex;
}
.loops-box-get-inner {
    background: var(--var-black);
    border-radius: 15px;
    width: 367px;
    text-align: center;
    padding: 50px;
}

.loops-box-get {
    display: flex;
    grid-gap: 35px;
}
.loops-box-get-inner span {
    display: block;
}
.loops-box-get-inner h4 {
    color: var(--white);
    margin-top: 38px;
}
/* GET STARTED SECTION END */
/* LOOPS PRODUCER SECTION START */
section.loops-producer-sec {
    background: #151515;
    padding: 72px 0;
}
.loops-producer-left {
    display: flex;
    align-items: center;
    grid-gap: 30px;
}
.loops-producer-left .loops-producer-img img, .loops-producer-left .loops-producer-left-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 30px;
    transition: .8s ease;
}
.loops-img img:hover {
    transform: scale(1.5);
}
.loops-producer-right span.loops-top-title {
    background: var(--var-black);
    border-radius: 100px;
    padding: 10px 30px;
    font-family: 'Inter-bold';
    font-size: 18px;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 30px;
    display: inline-block;
}
.loops-producer-right h2 {
    text-transform: capitalize;
    color: var(--white);
    font-family: 'Inter-bold';
    line-height: 1.3;
    margin-bottom: 16px;
}
.loops-producer-right h2 span.loops-text {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.loops-producer-right p {
    color: rgb(255 255 255 / 70%);
}
.brows-btn {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    border-radius: 1000px;
    margin-top: 31px;
    border: 0;
    padding: 10px 40px;
}
.loops-producer-right {
    padding-left: 80px;
}
.loops-producer-left .loops-img {
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin-bottom: 30px;
}
/* LOOPS PRODUCER SECTION END */

/* MUSIC CHART CSS START */
section.music-chart-sec {
    background: var( --light-black);
    padding: 84px 0;
}
section.music-chart-sec .chart-heading {
    display: flex;
    justify-content: space-between;
}
section.music-chart-sec .chart-heading h2 {
    font-family: 'Inter-bold';
    text-transform: capitalize;
    color: var(--white);
}
section.music-chart-sec .chart-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 54px;
    backdrop-filter: blur(56.4375px);
}
section.music-chart-sec .chart-music-data-inner {
    background: var(--var-black);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 20px;
    display: flex;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    height: 95%;
}
section.music-chart-sec.chart-theme-sec .chart-music-right-data-inner {
    display: flex;
    grid-gap: 20px;
    align-items: center;
}

section.music-chart-sec.chart-theme-sec .chart-price-take-off {
    margin-top: 20px;
    display: block;
    z-index: 2;
    padding-right: 35px;


}
.chart-music-data-sub-data {
    width: 40%;
}
.chart-timing-details {
    width: 10%;
}
.chart-music-data-btn {
    width: 10%;
}
.chart-music-theme {
    width: 60%;
}
.chart-music-theme .chart-theme-img {
    width: 100%;
    color: #fff;
}
.chart-music-theme .chart-theme-img audio.audio-player {
    width: 100%;
}
section.music-chart-sec.chart-theme-sec .chart-price-take-off span.chart-cart-price {
    background: #303031;
    border-radius: 100px;
    padding: 4px 22px;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 10px;

}
section.music-chart-sec.chart-theme-sec .chart-price-take-off span.chart-cart-price-colored {
    border-radius: 100px;
    padding: 4px 22px;
    display: inline-block;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    margin-right: 6px;
    margin-bottom: 10px;

}    

section.music-chart-sec.chart-theme-sec .chart-price-take-off span.chart-cart-price a {
    font-family: 'Inter-medium';
    font-size: 14px;
    text-transform: capitalize;
    color: rgb(164 164 165 / 60%);
    opacity: 0.6;
    display: inline-block;
}
.chart-music-data-content {
    display: flex;
    align-items: center;
}
.chart-music-data-img {
    margin-right: 18px;
    flex: 0 0 20%;
    max-width: 20%;
    z-index: 1;
}
.chart-music-right-data-details {
    flex: 0 0 75%;
    max-width: 75%;
    z-index: 2;
}
.chart-banner-sec .chart-banner-left-content .chart-img-bg img {
    max-width: 100%;
}
section.music-chart-sec.chart-theme-sec .chart-price-take-off span.chart-cart-price:hover {
    background: linear-gradient(180deg, #8A00D4 0%, #5535EE 100%);
}
section.music-chart-sec.chart-theme-sec .chart-price-take-off span.chart-cart-price:hover a {
    color: var(--white);
    opacity: 1;
}
.chart-music-data-sub-data h4 {
    text-transform: capitalize;
    color: var(--white);
    font-family: 'Inter-semibold';
    margin-bottom: 10px;
}
.chart-music-data-sub-data p {
    color: rgb(255 255 255 / 60%);
    font-family: 'Inter-medium';
}
.chart-music-data-img img {
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 140px;
}
.chart-music-data-btn a svg {
    width: 25px;
    color: #ffff;
    fill: #fff;
}
.chart-music-data-btn a {
    display: inline-flex;
    width: 68px;
    height: 68px;
    border: 2px solid transparent;
    position: relative;
    align-items: center;
    justify-content: center;
    background: var( --light-black);
    border-radius: 50px;
}
.chart-music-data-btn a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(to top, #FE0B1D , #FE00E9);
}
.view-more-btn {
    padding: 10px 56px;
}
/* MUSIC CHART CSS END */
/* FEATURED CSS START */
section.featured-sec {
    padding: 52px 0;
    background: #F5F5F7;
    position: relative;
}
section.featured-sec::before, 
section.contact-us-sec::before, 
section.details-sec::before {
    content: '';
    position: absolute;
    background: url(../img/fea-bg-left.png) no-repeat;
    width: 289px;
    height: 278px;
    max-width:100%;
    top: 0;
    left: 0;
}
section.featured-sec::after,  
section.contact-us-sec::after, 
section.details-sec::after {
    content: '';
    position: absolute;
    background: url(../img/fea-bg-right.png) no-repeat;
    width: 241px;
    height: 278px;
    bottom: 0;
    right: 0;
}
.featured-heading {
    text-align: center;
    margin-bottom: 54px;
}
.featured-heading h2 {
    font-family: 'Inter-bold';
    text-align: center;
    text-transform: capitalize;
    color: var(--var-black);
}
.featured-slider {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}
.featured-slider .item {
    padding: 40px 20px;
    text-align: center;
}
.featured-slider .item h5 a {
    font-family: 'Inter-semibold';
    text-align: center;
    color: #0E0F11;
    margin-bottom: 8px;
}
.featured-slider .item p {
    font-family: 'Inter-medium';
    text-align: center;
    color: rgb(14 15 17 / 50%);
}
.featured-img img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-sec button.slick-arrow, section.news-sec button.slick-arrow, .banner-slider button.slick-arrow {
    border-radius: 50px;
    width: 58px;
    height: 58px;
    right: -100px;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    z-index: 5;
}
.featured-sec button.slick-arrow.slick-prev,  section.news-sec button.slick-arrow.slick-prev {
    left: -100px;
    right: auto;
}
/* 9-11-2022 */
/* 9-11-2022 */
.featured-sec .slick-prev:before, 
.featured-sec .slick-next:before, 
section.news-sec .slick-prev:before, 
section.news-sec .slick-next:before, 
.banner-slider .slick-next:before, 
.banner-slider .slick-prev:before {
    content: '';
    border: 1px solid transparent;
    transform: rotate(316deg);
    width: 16px;
    height: 16px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    display: block;
    position: absolute;
    top: 20px;
    left: 22px;
    opacity: 1;
}
.featured-sec .slick-next:before, section.news-sec .slick-next:before,  .banner-slider .slick-next:before {
    transform: rotate(135deg);
    left: 17px;
}
.featured-img {
    position: relative;
    width: 261px;
    height: 261px;
    margin: 0 auto 22px;
}
.featured-img::after, .featured-img::before {
    content: '';
    position: absolute;
    top: -27px;
    left: 0;
    bottom: 0;
    border: 1px solid rgb(254 11 29 / 20%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
}
.featured-img::before {
    top: -12px;
    border: 1px solid rgb(138 0 212 / 20%);
}
/* FEATURED CSS END */
/* UPLOAD-WORK CSS START */
section.upload-work-sec {
    background: var( --light-black);
    padding: 108px 0 142px;
    text-align: center;
    backdrop-filter: blur(56.4375px);
}
.upload-work-content h1 {
    font-family: 'Inter-semibold';
    font-size: 60px;
    text-transform: capitalize;
    color: var(--white);
    margin-top: 70px;
}
.upload-work-content p {
    text-align: center;
    color: rgb(255 255 255 / 80%);
    opacity: 0.8;
    line-height: 28px;
    max-width: 432px;
    margin: 16px auto 0;
}
.upload-work-content a.btn.selling-btn {
    border-radius: 50px;
    padding: 10px 40px;
    margin-top: 32px;
}
.upload-work-img img {
    max-width: 100%;
}
/* UPLOAD-WORK CSS END */
/* COUNTLESS CSS START */
section.countless-sec {
    background: #000000;
}
.countless-content {
    padding-left: 166px;
}
.countless-content h2 {
    font-family: 'Inter-bold';
    text-transform: capitalize;
    color: var(--white);
}
.countless-btn {
    padding: 10px 50px;
    margin-top: 37px;
}
.countless-content h2 span {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.countless-img img {
    max-width: 100%;
}
/* COUNTLESS CSS END */
/* NEWS CSS START */
section.news-sec {
    background: #F3F3F3;
    padding: 58px 0;
    position: relative;
}
section.news-sec::before {
    content: '';
    position: absolute;
    background: url(../img/lops-bg-left.png) no-repeat;
    width: 186px;
    height: 278px;
    top: 0;
    left: 0;
}
section.news-sec::after {
    content: '';
    position: absolute;
    background: url(../img/lops-bg-right.png) no-repeat;
    width: 162px;
    height: 278px;
    bottom: 0;
    right: 0;
}
.news-heading {
    margin-bottom: 50px;
}
.news-heading h2 {
    font-family: 'Inter-bold';
    text-align: center;
    text-transform: capitalize;
    color: var(--var-black);
}
section.news-sec .item {
    padding: 15px;
}
.news-img {
    background: #FFFFFF;
    border-radius: 15px 15px 0 0;
    width: 100%;
    height: 250px;
    overflow: hidden; 
}
.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-data {
    background: #FFFFFF;
    border-radius: 0 0 15px 15px;
    padding: 21px;
    min-height: 240px;
}
.news-data span.date-slider, .news-date-details span.date-slider {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 12px;
    font-family: 'Inter-semibold';
    padding: 10px 14px;
}
.news-date-details {
    border: double 2px transparent;
    border-radius: 80px;
    display: inline-block;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(white, white), radial-gradient(circle at bottom, #FE0B1D,#FE00E9);
}
.news-data h6 a {
    font-family: 'Inter-semibold';
    line-height: 30px;
    color: #0E0F11;
    margin: 13px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-data p {
    line-height: 22px;
    color: rgb(14 15 17 / 50%);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.news-btn {
    text-align: center;
}
.post-btn {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    padding: 10px 46px;
    margin-top: 31px;
    border: 0;
}
section.news-sec button.slick-arrow.slick-prev {
    left: -50px;
}
section.news-sec button.slick-arrow {
    right: -50px;
}
section.chart-banner-sec.favourite-banner .chart-banner-left-content h1 {
    text-align: center;
}
section.chart-banner-sec.favourite-banner .chart-banner-left-content h6 {
    line-height: 38px;
}
/* NEWS CSS END */
/* CHART BANNER CSS START */
section.chart-banner-sec {
    background: var( --light-black);
    padding: 50px 0;
    position: relative;
}
section.chart-banner-sec::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/chart-top-bg-layer.png) no-repeat;
    width: 100%;
    height: 100%;
}
.chart-banner-left-content h1 {
    font-family: 'Inter-bold';
    font-size: 60px;
    color: var(--white);
    margin-bottom: 14px;
}
/* .chart-banner-sec .banner-inner-img img {
    max-width: 100%;
} */
span.chart-hotest-loop {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.chart-banner-sec .chart-banner-left-content {
    text-align: center;
    position: relative;
}
.chart-banner-sec .chart-banner-left-content h6 {
    font-weight: 400;
    font-size: 26px;
    text-align: center;
    text-transform: capitalize;
    color: #A4A4A5;
}
.create-btn {
    padding: 10px 55px;
    margin-top: 32px;
}
.chart-banner-sec .chart-banner-left-content .chart-img-bg {
    margin-bottom: 16px;
}
/* CHART BANNER CSS END */
/* CHART THEME CSS START */
.chart-theme-sec .chart-music-data-btn a {
    width: 47px;
    height: 47px;
}
.chart-price-take-off {
    margin-top: 32px;
}
.chart-theme-sec .chart-music-data-sub-data h6 a {
    font-family: 'Inter-semibold';
    letter-spacing: 0.01em;
    text-transform: capitalize;
    color: var(--white);
    margin-bottom: 8px;
}
.chart-theme-sec .chart-music-data-btn a:hover,  .kits-content .kids-audio a:hover {
    background: linear-gradient(180deg, #8A00D4 0%, #5535EE 100%);
}
.chart-theme-sec .chart-music-data-btn a:hover i,  .kits-content .kids-audio a:hover i {
    color: var(--white);
}
.chart-theme-sec .chart-music-data-btn a i {
    color: #4F4F4F;
}
.chart-theme-sec .chart-music-data-sub-data p {
    font-size: 13px;
    font-family: 'Inter-regular';
}
.chart-theme-sec span.chart-theme-time {
    font-size: 13px;
    color: var(--white);
}
.chart-music-theme {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}
.chart-theme-img img {
    max-width: 100%;
}
section.music-chart-sec.chart-theme-sec {
    padding: 70px 0;
}
.chart-theme-sec .chart-heading {
    border-top: 1px solid #373738;
    padding-top: 40px;
}

/* CHART THEME CSS END */
/* PRODUCERS CSS START */
section.producers-details {
    background: var( --light-black);
    padding: 65px 0;
}
section.producers-details .producers-heading {
    margin-bottom: 22px;
}
section.producers-details .producers-heading h2 {
    font-family: 'Inter-bold';
    text-transform: capitalize;
    color: var(--white);
}
.producers-img img {
    border-radius: 50%;
    width: 100%;
}
section.producers-details .item {
    padding: 25px;
}
section.producers-details .item  h6 {
    font-family: 'Inter-semibold';
    color: rgb(255 255 255 / 50%);
    margin-top: 22px;
    text-align: center;
}
/* PRODUCERS CSS END */
.chart-theme-img span {
    display: inline-block;
}

/* FOOTER CSS START */
footer.cstm-footer {
    background:var(--thamar-black);
    padding-top: 65px;
}
.footer-latest-news, .footer-logo {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.footer-latest-news h4 {
    line-height: 30px;
    margin-bottom: 34px;
    color: var(--white);
    font-family: 'Inter-bold';
}
.footer-latest-news .input-group-prepend {
    position: absolute;
    right: 0;
    top: 0;
}
.footer-latest-news .input-group .form-control {
    height: 74px;
    border-radius: 50px !important;
    padding-left: 44px;
    padding-right: 224px;
    font-size: 18px;
    font-family: 'Inter-semibold';
    color:rgb(255 255 255 / 50%);
}
.footer-latest-news .input-group .btn {
    z-index: 4;
    height: 75px;
    font-size: 22px;
    font-family: 'Inter-medium';
    padding: 10px 40px;
}
.footer-logo {
    margin-bottom: 42px;
}
.footer-logo ul.footer-menu li {
    padding: 0 30px;
}
/* .footer-logo ul.footer-menu li:last-child {
    margin-right: 0px;
} */
.footer-logo ul.footer-menu  li a {
    font-size: 18px;
    color: rgb(255 255 255 / 60%);
}
.footer-logo ul.footer-menu {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-bottom {
    background: #1C1C1D;
    padding: 28px 0;
}
.footer-copyright p {
    color: var(--white);
}
.footer-bottom .footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom ul.copyright-social-icon {
    display: flex;
}

.footer-bottom ul.copyright-social-icon li {
    margin-left: 21px;
}
.footer-bottom ul.copyright-social-icon a, .detail-pro-social ul.copyright-social-icon a {
    background: #181818;
    width: 39px;
    height: 39px;
    display: inline-flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.footer-bottom ul.copyright-social-icon a:hover, .detail-pro-social ul.copyright-social-icon a:hover {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
}
.footer-bottom ul.copyright-social-icon i, .detail-pro-social ul.copyright-social-icon a i {
    font-size: 15px;
    color: var(--white);
}
.footer-bottom ul.copyright-social-icon  li:first-child {
    margin-left: 0px;
}
/* FOOTER CSS END */
/* scroll css */
.chart-music-data::-webkit-scrollbar-track, 
form.edit-account-form textarea.form-control::-webkit-scrollbar-track, .details-creator-sec .details-profile-music-list ul::-webkit-scrollbar-track  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #232324;
}

.chart-music-data::-webkit-scrollbar, 
form.edit-account-form textarea.form-control::-webkit-scrollbar, 
.details-creator-sec .details-profile-music-list ul::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.chart-music-data::-webkit-scrollbar-thumb, 
form.edit-account-form textarea.form-control::-webkit-scrollbar-thumb, 
.details-creator-sec .details-profile-music-list ul::-webkit-scrollbar-thumb {
    background-color: #5535ee;
}   
section.music-chart-sec.chart-theme-sec.music-data-play-list .chart-music-data {
    max-height: 450px;
    overflow: auto;
}
.music-data-play-list .chart-heading {
    border-top: 0;
}
section.music-chart-sec.chart-theme-sec.music-data-play-list {
    padding-bottom: 100px;
}
.error {
    color: #d44848;
    font-size: 13px;
}
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-color:  var(--light-gray) !important;
}

/* alert css start */
.alert-dismissible .btn-close {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 2;
    padding: 0;
}
.alert {
    padding: 8px 8px;
    font-size: 12px;
    padding-right: 30px;
}
/* Banner slider css Start */
.banner-slider button.slick-prev.slick-arrow {
    left: 88px;
    z-index: 1;
    right: auto;
}
.banner-slider button.slick-arrow {
    right: 88px;
    z-index: 1;
    width: 44px;
    height: 44px;
}
.banner-slider .slick-next:before, .banner-slider .slick-prev:before {
    width: 13px;
    height: 13px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    top: 16px;
    left: 18px;
}
.banner-slider .slick-next:before {
    left: auto;
    right: 18px;
}
.save-btn .btn {
    padding: 6px 51px;
    margin-right: 10px;
}

/* ABOUT SECTION HTML START */
section.about-us-sec {
    padding: 100px 0;
    background: #1c1c1c;
}
section.chart-banner-sec.about-banner {
    padding: 100px 0;
}

.about-content p {
    color: #a3a3a3;
    margin-bottom: 30px;
    text-align: justify;
    line-height: 28px;
}
.about-content h4 {
    font-family: 'Inter-medium';
    margin-bottom: 25px;
    color: #fff;
}
.about-content p:last-child {
    margin-bottom: 0px;
}
/* ABOUT SECTION HTML END */
/* FAQ SECTION CSS START  */
section.faq-sec {
    background: #000000;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}
section.faq-sec .accordion-item:not(:first-of-type) {
    border-top: 1px solid rgba(0,0,0,.125);
}
section.faq-sec .accordion-item {
    margin-bottom: 30px;
    border-radius: 10px;
}
section.faq-sec .faq-heading h3 {
    margin-bottom: 50px;
    font-family: 'Inter-semibold';
    color: var(--white);
    text-align: center;
    margin-top: 20px;
}
.search-bar {
    margin-bottom: 50px;
    padding: 4px;
    background: #8508d8;
    border-radius: 10px;
}
.search-bar input.form-control {
    background: #fff;
    border: 1px solid #ddd;
    color: var(--light-gray);
}
section.faq-sec .faq-content {
    position: relative;
    background: #171717;
    padding: 30px;
    border-radius: 10px;
    width: 50%;
    margin: 0 auto;
}
section.faq-sec .faq-content  button.accordion-button {
    color: #000;
    font-weight: 600;
    border-radius: 10px !important;
    position: relative;
    transition: .3s ease;
}
/* FAQ SECTION CSS END */
/* CONTACT US START CSS */
section.contact-us-sec {
    padding: 100px 0;
    position: relative;
    background: black;
    z-index: 1;
}
section.contact-us-sec .contact-content .contact-details p {
    margin-bottom: 14px;
}
section.contact-us-sec .contact-content .contact-details p:last-child {
    margin-bottom: 0px;
}
section.contact-us-sec .contact-content {
    background: #101113;
    border-radius: 10px;
    border: 2px solid  transparent;
    padding: 50px;
    position: relative;
    color: #fff;
    width: 80%;
    margin: 0 auto;
}
section.contact-us-sec .contact-content .contact-form {
    width: 100%;
    max-width: 600px;
}
section.contact-us-sec .contact-content .contact-form  form .form-group {
    margin-bottom: 20px;
}
section.contact-us-sec .contact-content .contact-form  form  textarea.form-control {
    resize: none;
    height: 110px;
}
section.contact-us-sec .contact-content .contact-form  form  button.btn.contact-submit {
    padding: 10px 40px;
}
section.contact-us-sec .contact-content .contact-information {
    padding: 30px;
    background: #1c1c1d;
    border-radius: 10px;
    z-index: 2;
    position: relative;
}
section.contact-us-sec .contact-content .contact-information li {
    display: flex;
}
section.contact-us-sec .contact-content .contact-information .contact-inner {
    margin-right: 16px;
}
section.contact-us-sec .contact-content .contact-information li {
    display: flex;
    margin-bottom: 30px;
}
section.contact-us-sec .contact-content .contact-details {
    margin-top: 20px;
}
section.contact-us-sec .contact-content .contact-form  h5 {
    margin-bottom: 20px;
}
section.contact-us-sec .contact-content .contact-information li:last-child {
    margin-bottom: 0;
}
section.contact-us-sec .contact-content .contact-information h5 {
    text-transform: capitalize;
}
section.contact-us-sec .contact-content .contact-details p.largeFont.title-phone {
    font-size: 14px;
}
section.contact-us-sec .contact-content .contact-details p.subtitle-paragraph {
    font-size: 15px;
}
/* CONTACT US START END */

/* SUBSCRIPTION CSS START */
.subscription-box::after, section.contact-us-sec .contact-content::after, .faq-content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(to left, #8a00d4, #5535ee);
}

.subscription-box {
    background: var( --light-black);
    border-radius: 10px;
    border: 2px solid  transparent;
    padding: 40px;
    position: relative;
    color: #fff;
    text-align: center;
    border-radius: 0px 80px 0px 80px;
    height: 90%;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}
section.subscription-plan {
    padding: 100px 0;
}
section.subscription-plan .subscription-box ul.subscription-list {
    border-top: 1px solid #ddd;
    margin-top: 24px;
    padding-top: 30px;
    min-height:220px;
}
.subscription-box ul.subscription-list li {
    margin-bottom: 20px;
    position: relative;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
}
.subscription-box a.btn.subscription-submit {
    margin-top: auto;
    padding: 10px 40px;
    min-height:50px
}
.subscription-box ul.subscription-list li::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 9px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    width: 7px;
    height: 11px;
    transform: rotate(218deg);
    z-index: 1;
}
.subscription-box ul.subscription-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: #5a34f0;
    border-radius: 50%;
}
.subscription-box span.price-total {
    font-size: 36px;
    font-family: 'Inter-semibold';
    background: linear-gradient(180deg, #8A00D4  0%, #5535EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin: 12px 0;
}
.subsciption-plan-width {
    width: 70%;
    margin: 0 auto;
}
.subsciption-plan-width .row .col-md-4:last-child .subscription-box {
    margin-bottom: 0;
}
.subscription-no-plan {
    text-align: center;
}
.subscription-no-plan img {
    width: 100%;
    margin: 0 auto;
    max-width: 400px;
}
/* SUBSCRIPTION CSS END */

/* NEWS CSS START */
section.news-sec .cstm-news-slider .item {
    margin-bottom: 30px;
    padding: 0;
}
/* NEWS CSS END */

/* PAYMENT SECTION CSS START */
.payment-summary-data {
    background: #141414;
    border-radius: 10px;
    padding: 40px;
    position: relative;
    color: #fff;
    width: 80%;
    margin: 0 auto;
    z-index: 1;
}
section.payment-summary {
    padding: 100px 0;
    background: #000000;
    position: relative;
}
.col.pay-summary-right {
    width: 35%;
    flex: 0 0 35%;
}
.col.pay-left-card {
    width: 65%;
    flex: 0  0 65%;
    padding-right: 80px;
}
.col.pay-left-card .form-control::placeholder {
    color: var(--light-gray);
}
.col.pay-left-card h5 {
    margin-bottom: 18px;
    color: #fff;
    font-family: 'Inter-semibold';
}
.col.pay-left-card .form-group {
    margin: 0 0 20px;
}
.col.pay-left-card form {
    max-width: 600px;
}
.order-summary-data {
    padding: 30px;
    background: #1c1c1d;
    border-radius: 10px;
}
.order-summary-data ul.category-list li.small-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.order-summary-data button.pay-button.btn {
    width: 100%;
    padding: 10px 10px;
    margin: 20px 0;
}
.order-summary-data ul.category-list li.small-block.total-amount {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 24px;
    margin-bottom: 10px;
}
.order-summary-data ul.category-list .total-amount span.title-box, .order-summary-data ul.category-list .total-amount span.sub-title-box {
    font-family: 'Inter-bold';
    font-size: 20px;
}
.order-summary-data ul.category-list li.small-block span.title-box, .order-summary-data ul.category-list li.small-block span.sub-title-box {
    font-size: 14px;
    color: #fff;
}
.order-summary-data ul.category-list li.small-block.coupon-form-li {
    display: block;
}
.order-summary-data ul.category-list li.small-block.coupon-form-li input#coupon {
    background: #fff;
    border: 1px solid #ddd;
    color: var(--light-gray);
    height: 46px;
    border-radius: 8px !important;
}
.order-summary-data ul.category-list li.small-block.coupon-form-li .input-group-append {
    position: absolute;
    right: 0;
    top: 0px;
}
.order-summary-data ul.category-list li.small-block.coupon-form-li button#apply_coupon {
    z-index: 5;
    height: 46px;
    border-radius: 0px 4px 4px 0px;
    padding: 5px 20px;
    border: 0;
}
.order-summary-data ul.category-list  li.small-block.plan-cost-li span.title-box {
    font-size: 16px;
    font-family: 'Inter-semibold';
}
.order-summary-data ul.category-list  li.small-block.plan-cost-li span.plan-duration {
    font-size: 14px;
    color: var(--light-gray);
    font-family: 'Inter-regular';
}
.col.pay-summary-right .order-summary-data h6 {
    margin-bottom: 18px;
    color: #fff;
    font-family: 'Inter-bold';
}
.order-summary-data ul.category-list li.small-block.offered-li span.sub-title-box {
    text-align: end;
}
.order-summary-data ul.category-list li.small-block.offered-li span.sub-title-box span.remove-coupon-span {
    display: block;
    color: #b90000;
}
.order-summary-data ul.category-list li.small-block.offered-li span.title-box, .order-summary-data ul.category-list li.small-block.offered-li span.sub-title-box {
    color: #008484;
}
.order-summary-data ul.category-list li.small-block.have_coupon span.title-box {
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: #3b00ed;
    text-transform: capitalize;
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.order-summary-data ul.category-list li.small-block.have_coupon {
    margin-bottom: 12px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
/* PAYMENT SECTION CSS END */

/* loader css */

.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: rgb(50 50 50 / 61%) url(../img/loading.gif) center no-repeat;
    background-size: 200px;
}

body.loading .overlay {
    display: block;
}

.overlay-ajax {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: rgb(50 50 50 / 61%) url(../img/Lazy-Loader-ajax.gif) center no-repeat;
    background-size: 200px;
}

body.loading .overlay-ajax {
    display: block;
}

/* End Loader CSS */
.col.pay-left-card div#card-element {
    display: block;
}
.col.pay-left-card .__PrivateStripeElement {
    top: 13px;
}
.payment-summary-data form#payment-form {
    display: flex;
    flex-wrap: wrap;
}
.payment-summary-data .InputContainer .InputElement {
    color: #fff !important;
}
.col.pay-left-card .InputContainer .InputElement {
    color: #ffff !important;
}
.edit-account-form select.form-control, .add-song-form select.form-control, 
.add-song-form .select2-container--default .select2-selection--multiple .select2-selection__rendered, 
section.library-sec select#filter-search,
.library-inner-sec select {	
    background-image: url(../../images/select-icon.svg);	
    background-position: 96%;	
    background-repeat: no-repeat;	
    z-index: 1;	
    cursor: pointer;
}
.add-song-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    background-position: 98% 32%;
}
section.login-sec.change-password-sec {
    min-height: inherit;
}
.cstm-profile-dropdown a.dropdown-item span.drop-menu-span svg {
    width: 22px;
    height: 20px;
    fill: #858585;
}
.cstm-profile-dropdown a.dropdown-item span.drop-menu-span svg polygon, 
.cstm-profile-dropdown a.dropdown-item span.drop-menu-span svg circle, 
.cstm-profile-dropdown a.dropdown-item span.drop-menu-span svg path {
    fill: #858585;
}
.cstm-profile-dropdown .dropdown-item:hover .drop-menu-span svg path, 
.cstm-profile-dropdown a.dropdown-item:hover span.drop-menu-span svg polygon, 
.cstm-profile-dropdown a.dropdown-item:hover span.drop-menu-span svg circle, 
.cstm-profile-dropdown a.dropdown-item:hover span.drop-menu-span svg {
    fill: #fff;
}
.cstm-profile-dropdown .dropdown-item.active .drop-menu-span svg, 
.cstm-profile-dropdown a.dropdown-item.active span.drop-menu-span svg polygon, 
.cstm-profile-dropdown a.dropdown-item.active span.drop-menu-span svg circle {
    fill: #fff;
}
.upload-song-sec .edit-profile-inner {
    background: var( --light-black);
    border-radius: 20px;
    border: 2px solid  transparent;
    width: 100%;
    padding: 44px 50px;
    margin: 0 auto;
    position: relative;
}
.upload-song-sec .edit-profile-right .cstm-file-name {
    margin: 20px 0;
    font-family: 'Inter-semibold';
}
.upload-song-sec .edit-profile-right .form-group {
    margin: 0 0 20px;
}
.upload-song-sec .edit-profile-right .form-group.upload-error-file {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 20px;
}
.add-song-form .file-input {
    background: #1C1C1D;
    border-radius: 8px;
    border: 0;
    height: 56px;
    align-items: center;
    color: var(--white);
    padding-right: 40px;
    display: inline-flex;
    width: 100%;
    position: relative;
}
.add-song-form .file-input input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}
.add-song-form .file-input span.button {
    background: #5838f2;
    width: 130px;
    text-align: center;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    margin-left: 10px;
    border-radius: 8px;
}
.add-song-form .submit-button {
    padding: 6px 40px;
}
textarea.form-control {
    resize: none;
    height: 130px;
}

/* news css start */
.inner-news-detail {
    background: #FFFFFF;
    box-shadow: 0px 4px 3px rgb(0 0 0 / 7%);
    border-radius: 20px;
    padding: 40px;
}
.relates-slide-news .related-box-news img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.related-box-news .img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    min-width: 150px;
}
.news-detail-img {
    height: 471px;
    margin-bottom: 25px;
    overflow: hidden;
}
.relates-slide-news {
    box-shadow: 1px 1px 11px #ddd;
    padding: 30px;
    border-radius: 10px;
}
.news-detail-img img {
    display: block;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-box-news {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}
.relates-slide-news .txt {
    padding: 0 0 0 26px;
}
.news-author-name {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.mews-author-name h6 {
    font-size: 22px;
    line-height: 33px;
    color: #000000;
    margin: 0 0 0 17px;
    text-transform: capitalize;
}
.cstm-news-sec .inner-news-detail .row {
    margin: 0 -20px;
}
.cstm-news-sec .inner-news-detail .row .col-md-6 {
    padding: 0 20px;
}
.news-data h6 a {
    font-family: 'Inter-semibold';
    line-height: 30px;
    color: #0E0F11;
    margin: 13px 0 8px;
}
.relates-slide-news p.see-all-txt {
    text-align: end;
    text-decoration: underline;
}
.inner-news-detail .heading-news-detail h5.post-title {
    font-family: 'Inter-semibold';
    line-height: 30px;
    color: #0E0F11;
    margin: 12px 0;
}
.inner-news-detail .news-detail-desp {
    margin: 15px 0;
}
.inner-news-detail .news-detail-desp p {
    line-height: 28px;
    max-width: 760px;
    margin-bottom: 10px;
}
.news-author-name h6 {
    margin-left: 10px;
}
.news-author-name img {
    border-radius: 50%;
}
.related-box-news .news-date-details {
    margin-top: 10px;
}
.relates-slide-news h4 {
    font-family: 'Inter-semibold';
}
.related-box-main .news-data {
    margin-left: 18px;
    padding: 0;
}
/* news end start */

/* melody-list css start */
section.melodaylist-song-sec .edit-profile-inner {
    max-width: 100%;
    background: #181818;
    border-radius: 12px;
}
section.melodaylist-song-sec {
    padding: 100px 0;
}
.list-items table.table tr th {
    color: #fff;
}
.list-items table.table tr td, .list-items table.table tr td a {
    color: #e5e5e5;
}
.list-items table.table tr:last-child td {
    border-bottom: 0;
    padding-bottom: 0 !important;
    vertical-align: middle;
}
.list-items table.table tr th, .list-items table.table tr td {
    padding: 30px 20px !important;
    border-bottom: 1px solid #2b2a2a;
    vertical-align: middle;
    font-size: 14px;
}

.list-items table.table tr th {
    background: linear-gradient(to bottom , #8A00D4, #5535EE);
}
/* melody-list css end */
.custom-file {
    position: relative;
    background: #1C1C1D;
    border-radius: 8px;
    border: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
    color: var(--white);
    width: 100%;
    padding: 12px;
    cursor: pointer;
}
.cstm-upload-file.custom-file {
    height: 260px;
    max-width: 448px;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.custom-file .custom-file-input {
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer;
}
.custom-file label.custom-file-label {
    margin-bottom: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 400px;
}
.custom-file .custom-file-label::after {
    content: "Browse";
    position: absolute;
    right: 7px;
    top: 6px;
    bottom: 0;
    z-index: 1;
    display: block;
    height: 44px;
    padding: 8px 20px;
    color: #ffffff;
    background: #5838f2;
    border-left: inherit;
    border-radius: 0 .25rem .25rem 0;
}
.custom-file.cstm-upload-file .custom-file-label::after {
    position: initial;
    width: 44px;
    height: 44px;
    padding: 8px 8px;
    text-align: center;
    border-left: inherit;
    border-radius: 40px;
    content: "\f093";
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    margin: 5px auto 0;
}
.add-song-form .select2-container--default .select2-selection--multiple, .edit-melodysong-form .select2-container--default .select2-selection--multiple {
    cursor: text;
    background: #1C1C1D;
    border-radius: 8px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    color: var(--white);
    padding-right: 10px;
    width: 100%;
}
.add-song-form li.select2-search.select2-search--inline {
    width: 100% !important;
}
.add-song-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5a3bf6;
    border: 0;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 12px;
    height: 38px;
    line-height: 35px;
    margin-bottom: 5px;
}
.add-song-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 6px;
    font-size: 20px;
}
.add-song-form .select2-container--default .select2-search--inline .select2-search__field {
    color: #ffff;
    width: 100% !important;
    background-position: 99%;
    padding-right: 40px;
    
}
.add-song-form .select2-container--default .select2-selection--multiple {
    border: 0;
}
.list-items table.table tr th:first-child {
    border-radius: 10px 0px 0px 0px;
}
.list-items table.table tr th:last-child {
    border-radius: 0px 10px 0px 0px;
}
section.melodaylist-song-sec tfoot.table-footer .pagination {
    justify-content: flex-end;
}
section.melodaylist-song-sec tfoot.table-footer p {
    text-align: end;
    margin-top: 9px;
    font-size: 14px;
}

.cstm-show-form.cstm-hide-form {
    position: relative;
}
.row.cstm-hide-btn {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}
.cstm-hide-form:after {
    content: '';
    position: absolute;
    background-color: rgb(201 201 201 / 80%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.add-song-form .submit-button {
    margin-top: 30px;
}
section.upload-song-sec {
    padding: 50px 0;
}
.row.cstm-hide-btn h6 {
    font-size: 18px;
    color: #fff;
}
.row.cstm-hide-btn a.ajax-submit-button {
    margin-top: 16px;
}

.list-items table.table tr td a.delete-temp-list, .list-items table.table tr td a.edit-temp-list, .list-items table.table tr td a.view-temp-list {
    background: #ff0038;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.list-items table.table tr td a.view-temp-list {
    background: #b3b3b3;
}
.list-items table.table tr td a.edit-temp-list {
    background: #602cec;
}
.list-items table.table tr td a.delete-temp-list i, 
.list-items table.table tr td a.edit-temp-list i, 
.list-items table.table tr td a.view-temp-list i {
    color: #ffffff;
    font-size: 12px;
}
.list-items table.table tr td a.list-cancel-icon {
    background: #eb5454;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.list-items table.table tr td a.list-cancel-icon.resume-subscription{
    background: #5cb85c;
}
.list-items table.table tr td a.list-cancel-icon i {
    color: #fff;
}
/* label#song_file-error {
    position: absolute;
    top: 55px;
    left: 0;
} */
.banner-text {
    font-size: 20px;
    color: white;
    text-align: right;
}
.list-items table.table tr td.purchase-order-date.list-action-sec {
    width: 180px;
}
.pagination-list .pagination {
    justify-content: center;
}
section.melodaylist-song-sec {
    padding: 70px 0;
    flex: 1;
    background: #1c1c1c;
}
footer.cstm-footer {
    background: var(--thamar-black);
    padding-top: 65px;
    flex: 0;
    margin-top: auto;
}
.melodaylist-song-sec .right-btns {
    margin: 0 auto 20px;
    text-align: end;
}
span.required-field {
    color: red;
}
.relative .serach-form {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}
.relative .serach-form form {
    max-width: 240px;
    position: relative;
    display: flex;
}
.relative .serach-form form .absolute {
    position: absolute;
    right: 4px;
    top: 18px;
    transform: translateY(-50%);
    color: #830bd9;
    font-size: 13px;
}
.relative .serach-form form .absolute svg {
    width: 20px;
    height: 20px;
    stroke: #7f0ad9;
}
.relative .serach-form form input {
    border: 1px solid #7910db;
    border-radius: 2px 0 0 2px;
    padding: 4px 35px 4px 10px;
    width: 100%;
    color: #4a00d7;
    font-size: 16px;
}
.relative .serach-form h4 {
    color: #ffffff;
    font-weight: 700;
    font-size: 25px;
    font-family: 'Inter-bold';
}
.table>:not(:last-child)>:last-child>* {
    border-bottom-color: unset;
    border: 0;
}
.add-song-form audio.audio-player {
    margin-top: 30px;
    width: 100%;
}
.add-song-form  span.select2.select2-container {
    width: 100% !important;
}
.melody-list-sec .list-items table.table tr th:last-child {
    border-radius: 0;
}
.melody-list-sec .list-items table.table tr th:first-child {
    border-radius: 0;
}
section.melodaylist-song-sec .serach-form .search-cross-btn, section.details-sec.details-creator-sec .search-form .search-cross-btn {
    color: #e8e8e8;
    width: 28px;
    height: 34px;
    background: #800dda;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 2px 2px 0px;
}
section.details-sec.details-creator-sec .search-form .search-cross-btn {
    width: 32px;
    height: 40px;
}
.slick-dots li.slick-active button:before {
    color: #f4004a;
}
.slick-dots li button:before {
    font-size: 38px;
}
.featured-slider, .news-slider {
    z-index: 2;
}
.featured-slider .slick-dots {
    margin: 0 auto;
    left: 0;
    right: 0;
}
.chart-banner-sec .chart-banner-left-content {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
}
.chart-banner-sec .chart-banner-left-content p {
    text-align: end;
    font-style: italic;
}
.chart-banner-sec .chart-banner-left-content p .banner-text {
    font-size: 26px;
    color: white;
    text-align: right;
}
.subsciption-plan-width .subscription-box h4 {
    font-size: 20px;
}
.key-radio-sec .key-radio-inner-btn {
    text-align: end;
    color: var(--light-gray);
}
.key-radio-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.key-radio-sec .key-radio-inner-btn input {
    margin-left: 10px;
    margin-right: 10px;
}
section.details-sec .details-content {
    width: 100%;
    margin: 0 auto;
    background: #000;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    position: relative;
    max-width: 640px;
}
section.details-sec {
    padding: 70px 0;
    background: #151515;
    z-index: 1;
    position: relative;
}
section.details-sec .details-profile {
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 30px;
    margin-bottom: 0px;
}
section.details-sec .details-profile .details-left-img {
    height: 250px;
    overflow: hidden;
    margin-bottom: 40px;
}
section.details-sec .details-profile .details-left-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
}
section.details-sec .details-tab {
    margin-top: 30px;
    border-radius: 10px;
    padding: 0 30px 30px;
}
section.details-sec .details-profile .details-profile-data h6 {
    margin-bottom: 8px;
    font-size: 20px;
    font-family: 'Inter-semibold';
    margin-right: 30px;
}
section.details-sec .details-profile .details-profile-data a {
    display: block;
    color: var(--white);
    margin-bottom: 10px;
}
.details-featuers-listing {
    margin-top: 20px;
}
section.details-sec .details-featuers-listing h4, .details-description h4 {
    font-family: 'Inter-semibold';
}
section.details-sec .details-featuers-listing ul {
    margin-top: 10px;
}
section.details-sec .details-featuers-listing ul li span.details-list-title {
    font-size: 16px;
    font-family: 'Inter-semibold';
    margin-inline-end: 5px;
    text-align: left;
}
section.details-sec .details-featuers-listing ul li span.details-list-desc {
    color: #fff;
    font-size: 14px;
    text-align: right;
    margin-inline-start: 5px;
}
section.details-sec .details-featuers-listing ul li {
    display: flex;
    align-items: center;
}
section.details-sec .details-description {
    margin-bottom: 20px;
    margin-top: 30px;
}
section.details-sec .details-description h4 {
    margin-bottom: 10px;
}
section.details-sec .details-description p {
    font-size: 16px;
    margin: 0;
    color: var(--white);
}
section.details-sec .details-profile .details-profile-data  .details-like-btn, section.details-sec .details-profile .details-profile-data .buy-btn-btn.btn {
    color: var(--white);
    padding: 8px 22px;
    margin-top: 20px;
    display: inline-block;
    margin-bottom: 0;
    width: auto;
}
section.details-sec .details-profile-data ul.details-buy-list {
    border-top: 1px solid #3b3b3b;
    margin-top: 20px;
    padding-top: 10px;
}
section.details-sec .details-profile-data ul.details-buy-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.details-sec .details-profile-data ul.details-buy-list li span.details-price-title {
    font-size: 20px;
    font-family: 'Inter-semibold';
}
section.details-sec .details-profile-data ul.details-buy-list li span.details-price {
    font-size: 22px;
    font-family: 'Inter-semibold';
}
section.details-sec .details-profile .details-profile-data  .details-like-btn {
    margin-right: 20px;
}
.creator-profile-sec .tab-content {
    margin-top: 30px;
}
.creator-profile-sec .details-tab .nav-tabs .nav-link.active {
    background: #612ded;
    color: #fff;
}
.creator-profile-sec .details-tab .nav-tabs .nav-link {
    margin-bottom: 0;
    border: 0;
    border-radius: 30px;
    padding: 8px 40px;
    color: #fff;
    font-family: 'Inter-semibold';
}
.creator-profile-sec .details-tab .nav-tabs {
    width: 100%;
    padding: 20px 0;
    border-radius: 0;
    border-bottom: 1px solid #333333;
}
.creator-profile-sec .details-tab .tab-content p {
    font-size: 16px;
    margin: 0;
    color: var(--light-gray);
}
.creator-profile-sec .details-profile .details-profile-data a.add-fav-btn.btn {
    color: #fff;
    display: inline-flex;
    width: 30px;
    min-height: 30px;
}
.melodaylist-song-sec .right-btns a.nav-link.btn.navy-blue-btn.open-section {
    background: #5535EE;
    font-size: 14px;
}
.melodaylist-song-sec .right-btns a.nav-link.btn.navy-blue-btn.open-section:hover {
    box-shadow: 0px 3px 4px #820bd9;
}
.chart-music-like {
    position: absolute;
    bottom: 3px;
    right: 3px;
    z-index: 3;
}
.chart-music-like .details-like-btn.btn {
    border-radius: 10px 10px 10px 10px;
    background: #0e0f11;
}
.chart-music-like .details-like-btn.btn.like {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
}
.chart-music-like .details-like-btn.btn.unlike {
    color: #767676;
    z-index: 2;
    position: relative;
}
section.details-sec.creator-profile-sec .details-profile-data {
    display: flex;
    align-items: flex-start;
}
section.details-sec.details-creator-sec {
    background: #191919;
    color: #fff;
}
.details-profile-img {
    height: 250px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}
.details-creator-sec .favourite-list-sec {
    position: absolute;
    top: 5px;
    right: 6px;
    z-index: 1;
}
.details-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    object-position: top;
}
.details-left-profile h4 {
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Inter-medium';
    text-transform: capitalize;
}
.details-left-profile .genre-details {
    font-size: 14px;
    font-family: 'Inter-regular';
    margin-bottom: 8px;
}
.details-left-profile .genre-details span.genre-title {
    font-family: 'Inter-medium';
    font-size: 18px;
}
.details-right-profile .details-profile-data h4 {
    margin-bottom: 20px;
}
.details-right-profile .details-profile-data p {
    margin-bottom: 20px;
    max-width: 840px;
}
.details-profile-music-list h4 {
    text-transform: capitalize;
    font-family: 'Inter-medium';
}

.details-profile-music-list ul li {
    display: flex;
    justify-content: space-between;
}
.details-profile-music-list ul li span.music-list-data i {
    /* margin-right: 10px; */
}

.details-profile-music-list ul li {
    display: flex;
    justify-content: space-between;
    background-color: var(--var-black);
    padding: 10px 22px;
    border-top: 1px solid #464646;
    align-items: center;
}
.music-chart-sec.chart-theme-sec.chart-price-take-off.creator-kits .chart-music-theme,
.music-chart-sec.chart-theme-sec.chart-price-take-off.creator-kits .chart-music-data-sub-data{
    width:100%;
}
.details-profile-music-list ul li span.music-list-data {
    /* width: 150px; */
    /* white-space: pre; */
    color:#FFF;
}

.details-profile-music-list ul li span.music-list-data.loop-serial-number {
    flex-basis: 10%;
}
.details-profile-music-list ul li span{
    padding:0 5px;
}

.details-profile-music-list ul li span.audio-player-cstm{
    margin:0;
}
.details-profile-music-list ul li span.music-list-data.loop-image {
    flex-basis: 15%;
}
.details-profile-music-list ul li span.music-list-data.loop-image img{
    width: 50px;
    height: 50px;
}
section.details-sec.melody-detail-sec .details-left-profile .loop-creator-collaborators{
    border-bottom: 1px solid #353333;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
section.details-sec.melody-detail-sec .details-left-profile .loop-creator-collaborators .cstm-text-creator{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    display:inline
}
.details-profile-music-list ul li span.music-list-data.loop-title {
    flex-basis: 45%;
    max-width: 45%;
}
.details-profile-music-list ul li span.music-list-data.loop-title a{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
}
.details-profile-music-list ul li span.music-list-data.loop-title a:last-child{
    font-size:.8rem;
}
.details-profile-music-list ul li span.audio-player-cstm.loop-player {
    flex-basis: 10%;
}

.details-profile-music-list ul li span.music-list-data.loop-price {
    flex-basis: 20%;
}

.details-profile-music-list ul li span.details-social-link.loop-detail-page {
    flex-basis: 5%;
}

.details-profile-music-list ul li span.music-list-data a {
    color: #fff;
    white-space: nowrap;
}
.details-profile-music-list ul li:last-child {
    border-bottom:1px solid #464646;
}
.detail-pro-social ul.copyright-social-icon {
    display: flex;
    grid-gap: 20px;
    flex-wrap: wrap;
}
.detail-pro-social {
    margin-top: 20px;
}
.details-profile-music-list ul li span.details-social-link a.details-social-icon i {
    color: #fff;
}
.details-pro-inner {
    width: 90%;
    margin: 0 auto;
}
.details-right-profile {
    padding-left: 40px;
}
/* .alert-dismissible .close{
    display:none
} */
.detail-pro-social ul.copyright-social-icon a.blue-fb {
    background: #3478f6;
}
.detail-pro-social ul.copyright-social-icon a.twitter {
    background: #40a2f5;
}
.detail-pro-social ul.copyright-social-icon a.youtube {
    background: #f40000;
}
.detail-pro-social ul.copyright-social-icon a.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.details-creator-sec .favourite-list-sec a.add-fav-btn.btn {
    background: #767676;
}
section.music-chart-sec.chart-theme-sec.favourite-music-sec {
    padding: 80px 0;
    background: #1e1e1e;
}
.details-creator-sec .favourite-list-sec a.add-fav-btn.btn {
    background: #767676;
}
.favourite-list-sec .featured-title {
    text-align: center;
}
.favourite-list-sec .featured-title h5 a {
    color: var(--white);
}
.search-cross-btn .fas.fa-times {
    cursor: pointer;
}
.chart-list-pagination .pagination .page-link {
    padding: 10px 25px;
    color: #fff;
    background-color: #232324;
    border: 1px solid #0e0e0e;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.chart-list-pagination .pagination .page-item  .page-link:hover, .chart-list-pagination .pagination .page-item.active .page-link {
    z-index: 2;
    color: #ffff;
    border-color: #000000;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
}
.chart-list-pagination {
    margin-top: 20px;
}
.chart-list-pagination .pagination {
    justify-content: center;
}
section.details-sec .details-song-description h4 {
    margin-bottom: 20px;
}
section.details-sec .details-featuers-listing ul li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between;
}
section.details-sec .details-description, .details-song-description, .details-featuers-listing {
    border-bottom: 1px solid #3b3b3b;
    padding-bottom: 30px;
}
section.details-sec .details-content .details-featuers-listing:last-child {
    border: 0;
    padding-bottom: 0;
}
.details-creator-sec .details-profile-music-list ul {
    max-height: 400px;
    overflow: auto;
}

.list-items table td.purchase-order-date img {
    border-radius: 50%;
}

/* no record */
.no-record-div {
    align-items: center;
    padding: 30px;
}
.no-record-div img{
    height: 150px;
    margin-top: 30px;
}
.no-record-div .card-text {
    color: #bb1414;
}
section.details-sec.melody-detail-sec {
    background: #0b0b0b;
}
section.details-sec.melody-detail-sec .details-left-profile {
    background: #141414;
    padding: 30px;
    border-radius: 12px;
}
section.details-sec.melody-detail-sec .details-pro-inner {
    color: #fff;
    width: 100%;
    z-index: 2;
    position: relative;
}
section.details-sec.melody-detail-sec .melody-details-price-list, 
section.details-sec.melody-detail-sec .details-profile-data, 
section.details-sec.details-creator-sec .details-left-profile, 
section.details-sec.details-creator-sec .details-right-profile {
    background: #141414;
    padding: 30px;
    border-radius: 14px;
}
section.details-sec.melody-detail-sec .details-profile-data {
    margin-bottom: 20px;
}
section.details-sec.melody-detail-sec ul.details-buy-list {
    border-bottom: 1px solid #303030;
    padding-bottom: 13px;
    margin-bottom: 30px;
}
section.details-sec.melody-detail-sec ul.details-buy-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.details-sec.melody-detail-sec ul.details-price-data {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
section.details-sec.melody-detail-sec ul.details-price-data li {
    width: 50%;
    padding: 10px;
}
section.details-sec.melody-detail-sec ul.details-price-data li .melody-sub-files {
    border: 1px solid #262626;
    padding: 20px;
    position: relative;
    display: block;
    height: 100%;
    border-radius: 8px;
}
section.details-sec.melody-detail-sec ul.details-price-data li .details-file-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 36px;
    height: 36px;
    background: #393939;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
}
section.details-sec.melody-detail-sec ul.details-price-data li:hover .details-file-icon {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
}
section.details-sec.melody-detail-sec ul.details-price-data p {
    font-size: 14px;
    color: var(--light-gray);
    margin-top: 2px;
}
section.details-sec.melody-detail-sec ul.details-price-data li h6 {
    margin-bottom: 2px;
    font-size: 20px;
    padding-right: 16px;
    display: inline-block;
}
section.details-sec.melody-detail-sec ul.details-price-data li span.total-price {
    font-size: 24px;
    margin-top: 5px;
    display: inline-block;
    margin-right: 10px;
    font-family: 'Inter-semibold';
}
section.details-sec.melody-detail-sec .details-right-profile .details-profile-data p {
    margin-bottom: 0;
    font-size: 14px;
}   
section.details-sec.melody-detail-sec .details-right-profile .details-profile-data h4 {
    margin-bottom: 10px;
}
section.details-sec.melody-detail-sec ul.details-buy-list span.details-price {
    font-size: 25px;
}
section.details-sec.melody-detail-sec .details-left-profile .cstm-text-creator {
    color: var(--light-gray);
    font-size: 14px;
    display: block;
    border-bottom: 1px solid #353333;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
section.details-sec.melody-detail-sec .detail-pro-social {
    margin-top: 20px;
    border-top: 1px solid #353535;
    padding-top: 15px;
    border-bottom: 1px solid #353535;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
section.details-sec.melody-detail-sec .details-featuers-listing {
    border-bottom: 0;
    border-top: 1px solid #353333;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 0;
}
section.details-sec.melody-detail-sec .details-profile-img {
    height: 220px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}
section.details-sec.melody-detail-sec .details-featuers-listing ul li span.details-list-desc {
    color: var(--light-gray);
    font-size: 14px;
}
section.details-sec.melody-detail-sec .details-price-buy {
    display: flex;
    align-items: center;
    column-gap: 16px;
}
section.details-sec.melody-detail-sec .details-right-profile {
    padding-left: 20px;
}
section.details-sec.melody-detail-sec .details-like-btn.btn.unlike.like-melody {
    padding: 2px 30px;
}
section.details-sec.melody-detail-sec ul.details-price-data li a {
    color: #fff;
}
section.details-sec.melody-detail-sec ul.details-price-data li .melody-sub-files:hover, section.details-sec.melody-detail-sec ul.details-price-data li .melody-sub-files.active-melody {
    box-shadow: 0px 0px 5px #7519e2;
}
section.details-sec.details-creator-sec .details-creator-list {
    background: #000;
    margin-bottom: 20px;
    padding: 14px 18px;
}
section.details-sec.details-creator-sec .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.details-sec.details-creator-sec .details-search-icon {
    position: absolute;
    right: 4px;
    top: 7px;
}
section.details-sec.details-creator-sec .search-form button, .relative .serach-form button {
    background: transparent;
    border: none;
}
section.details-sec.details-creator-sec .search-form button i, .relative .serach-form button i {
    color: #830bd9;
    font-size: 13px;
}  
section.details-sec.details-creator-sec form#list_search_form {
    position: relative;
    display: flex;
}
section.details-sec.details-creator-sec input.search_keyword {
    padding: 8px 10px;
    border-radius: 4px 0px 0px 4px;
    border: 0;
    padding-right: 30px;
}
section.details-sec.details-creator-sec .search-cross-btn {
    top: 4px;
}
.export-btn i {
    margin-right: 8px;
}
.nav-link:focus, .nav-link:hover {
    color: #fff;
}
.key-radio-sec .key-radio-inner-btn input:checked + label {
    background-color: #5a3bf6;
    box-shadow: none;
    color: #ffff;
}
.key-radio-sec .key-radio-inner-btn label {
    background-color: #fff;
    color: rgb(28 28 29);
    font-size: 14px;
    text-align: center;
    padding: 4px 7px;
    margin-right: 0px;
    transition: all 0.1s ease-in-out;
    margin-bottom: 10px;
    cursor: pointer;
    border-right: 1px solid #0e0f11;
}
.key-radio-sec .key-radio-inner-btn input {
    position: absolute;
    width: 0px;
    height: 1px;
    border: 0;
    font-size: 0;
    background-image: none !important;
    overflow: hidden;
}
.key-radio-sec .key-radio-inner-btn {
    text-align: end;
    color: var(--light-gray);
    display: flex;
}
.key-radio-sec .key-radio-inner-btn label:first-of-type {
    border-radius: 12px 0 0px 12px;
}
.key-radio-sec .key-radio-inner-btn label:last-of-type {
    border-radius: 0 12px 12px 0;
}
section.details-sec.details-creator-sec span.details-social-link {
    width: 30px;
    height: 30px;
    background: #444444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
section.details-sec.details-creator-sec span.details-social-link a.details-social-icon {
    margin-left: 0;
}
.details-creator-sec .favourite-list-sec a.add-unfav-btn {
    height: 40px;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    width: 40px;
}
.custom-file.cstm-upload-file img {
    margin-right: 0;
    max-width: 400px;
    height: 149px;
    object-fit: cover;
    width: 100%;
}
.cstm-btn-edit {
    margin-top: 30px;
}
.add-song-form .cstm-btn-edit .submit-button {
    margin-top: 0;
    margin-right: 10px;
}
.cstm-btn-edit .cancel-btn, .save-btn.cstm-btn-edit .cancel-btn {
    padding: 6px 42px;
    background: #cb4f4f;
}
/* tooltip css start */
/* .tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
    z-index: 1;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 470px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 0;
    margin-left: -220px;
}
.tooltip i {
    font-size: 18px;
    color: #eae9eb;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
} */
section.details-sec.melody-detail-sec .details-file-buy-btn {
    margin-top: 20px;
    text-align: end;
    border-top: 1px solid #2a2a2a;
    padding-top: 15px;
}
section.details-sec.melody-detail-sec .details-file-buy-btn button.btn {
    padding: 6px 14px;
    min-height: 30px;
    font-size: 12px;
}
td.purchase-order-date.table-ribbn {
    position: relative;
    overflow: hidden;
}
td.purchase-order-date.table-ribbn:after {
    content: attr(data-ribbon);
    position: absolute;
    background: #e46464;
    color: white;
    top: 11px;
    text-align: center;
    left: -26px;
    padding: 3px 19px;
    transform: rotate(315deg);
    font-size: 12px;
}
.subscription-box.current-active-plan {
    background: #360257;
}
.subscription-box  button.btn.activated-btn {
    margin-top: 26px;
    background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
    pointer-events: none;
}
section.details-sec.melody-detail-sec ul.details-price-data audio.audio-player {
    margin-top: 20px;
    max-width: 100%;
}
.col.pay-left-card .form-control {
    background: #ffffff;
    color: #000;
}

/* library */
section.library-sec {
    background: #000000;
    padding: 100px 0;
}
.library-inner-sec {
    /* background: #141414; */
    border-radius: 10px;
    padding: 25px 30px 20px;
}
.library-inner-sec ul.nav.nav-pills {
    margin-bottom: 50px;
}
.library-inner-sec .library-album-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 0px 0px 12px;
}
.library-inner-sec .library-content {
    padding: 18px;
}
.no-library-found {
    margin: 30px 0 60px;
}
.library-list-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.library-inner-sec .album-section {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 40px;
    height: calc(100% - 40px);
    display: flex;
}
.library-list-heading h4 {
    color: var(--white);
    text-transform: capitalize;
}
.library-album-img {
    height: 145px;
    overflow: hidden;
    flex: 0 0 180px;
}
.library-inner-sec .nav-link {
    color: #fff;
    padding: 10px 30px;
    font-size: 18px;
}
.library-inner-sec .nav-pills .nav-link.active, .library-inner-sec .nav-pills .show>.nav-link {
    color: #fff;
    background-image: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
}
.library-inner-sec .library-content h6 a {
    margin-bottom: 2px;
    font-family: 'Inter-medium';
    color: #000;
    display: block;
}
.library-inner-sec .library-content p {
    color: #363636;
    font-size: 14px;
}
.library-album-img img:hover {
    transform: scale(1.5);
    transition: .8s ease;
}
.library-inner-sec li.search-input {
    margin-left: auto;
}
.library-inner-sec input {
    height: 44px;
    padding: 0px 10px 0px 10px;
    border-radius: 40px;
    border: 3px solid #5535EE;
    width: 170px;
}
.album-section .library-price {
    margin-bottom: 4px;
}
.album-section .library-price .price-title {
    font-family: 'Inter-bold';
    font-size: 20px;
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
section.library-sec button#loop_melody_search i {
    color: #3e3e43;
}
.album-section .library-price .bpm-desc {
    font-size: 14px;
    color: #000000;
    font-family: 'Inter-medium';
}
section.library-sec form#list_search_form {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    column-gap: 20px;
    border-bottom: 1px solid #333131;
    padding-bottom: 26px;
    position: relative;
    flex-wrap: wrap;
    
}
section.library-sec .list-search-group {
    position: relative;
    margin-bottom: 15px;
}
section.library-sec .details-search-icon {
    position: absolute;
    right: 8px;
    top: 8px;
}
section.library-sec button#loop_melody_search {
    /* background: none; */
    border: 0;
}
section.library-sec .form-group label strong {
    font-size: 22px;
    color: #fff;
}
section.library-sec select#filter-search {
    height: 44px;
    padding: 8px 15px 10px 10px;
    border-radius: 10px;
    border: 3px solid #5535EE;
    width: 250px;
    background-color: #fff;
    color: #000;
}
section.library-sec select#filter-search.form-control:focus {
    color: #000;
    background-color: #fff;
    border-color: #5535EE;
    box-shadow: none;
}
section.details-sec.melody-detail-sec ul.details-price-data li .details-file-icon svg {
    width: 22px;
    height: 22px;
}
.melody-sub-files .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 8px;
}
.midi-input-check {
    display: flex;
}

/* featured-producer  */
section.featured-producer-sec {
    padding: 100px 0;
    background: #0e0d0d;
}
.featured-producer-sec .featured-producer-inner {
    background: #161515;
    border-radius: 10px;
    margin-bottom: 40px;
}
.featured-producer-sec .featured-producer-img a {
    display: block;
    height: 250px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    padding-top:10px;
    text-align: center;
}
.featured-producer-sec .featured-producer-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.featured-producer-sec .featured-producer-title {
    padding: 16px 20px;
}
.featured-producer-sec .featured-producer-title h6 a {
    color: #fff;
    text-transform: capitalize;
}
.favorite-list-sec a.add-unfav-btn, .favorite-list-sec a.add-fav-btn {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    color: #fff;
}
.favorite-list-sec a.add-fav-btn {
    background: #767676;
}
.favorite-list-sec {
    position: absolute;
    top: 5px;
    right: 4px;
}
span.track-user{
    color:#FFF;
}
span.track-user a {
    color: #fff;
    margin: 4px 0;
    display: inline-block;
    font-size: 13px;
}
section.faq-sec .accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
section.faq-sec .accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #f7f7f7;
    box-shadow: none;
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
} 
.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
section.faq-sec .accordion-button::after {
    background-image: url(../../images/select-icon.svg);
    position: absolute;
    top: 20px;
    right: 20px;
    transition: .3s ease;
}
section.faq-sec .accordion-button:not(.collapsed)::after {
    background-image: url(../../images/select-icon.svg);
    top: 12px;
}
section.details-sec.details-creator-sec .details-profile-data {
    margin-top: 30px;
}

.read-more-show, .read-more-hide {
    cursor: pointer;
    background: linear-gradient(to bottom , #8A00D4, #5535EE);
    padding: 5px 9px;
    display: inline-block;
    margin-top: 13px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
}
.read-more-show i, .read-more-hide i {
    margin-left: 8px;
    vertical-align: middle;
}

.hide_content{
    display: none;
}

.flash-message .alert-dismissible .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
}
.flash-message button.close {
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
.flash-message .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0.3;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}  
.chart-list-pagination p {
    text-align: end;
}
.key-radio-inner-btn.loopType {
    display: flex;
    justify-content: center;
    column-gap: 30px;
    background: #231743;
    max-width: 680px;
    margin: 0 auto;
    padding: 9px 9px;
    border-radius: 10px;
    margin-bottom: 50px;
    align-items: center;
}
.loopType-inner-sec label {
    margin-left: 10px;
    color: #fff;
}
.loopType-inner-sec.active {
    background: #fff;
    padding: 10px 7px;
    border-radius: 10px;
}
.loopType-inner-sec.active label {
    color: #000;
}
.stem-files-sec p, .midi-files-sec p {
    font-size: 15px;
    color: #fff;
    margin-bottom: 14px;
}
.upload-song-sec .edit-profile-right .stem-files-sec .cstm-file-name, .upload-song-sec .edit-profile-right .midi-files-sec .cstm-file-name {
    margin: 20px 0 5px;
    font-family: 'Inter-semibold';
}
.stem-files-sec::before, .line-files-sec::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom , #8A00D4, #5535EE);
    z-index: -1;
    border-radius: 50px;
    width: 3px;
    height: 100%;
}
.stem-files-sec, .line-files-sec {
    position: relative;
    z-index: 1;
}
#payment-request-button{
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
}

.filter-container-1{
    display: flex;
    justify-content: center;
}
.filter-container-1 input{
    border: 1px solid rgb(31, 27, 27);
    width: 100%;
    text-align: center;
    height: 30px;
    border-radius: 5px;
}
.filter-container-1 button{
    background: #51a179;
    color:#fff;
    padding: 5px 20px;
}
.filter-container-1 button:hover{
    background: #2e7552;
    color:#fff;
}
.mall-property .noUi-horizontal {
    height: 7px;
}
.mall-property .noUi-tooltip {
    font-size: 10px;
    font-weight: 700;
}
.mall-property .noUi-connect {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
}
.mall-property .noUi-horizontal .noUi-handle {
    height: 32px;
    top: -8px;
}
.mall-property {
    padding: 40px 40px 0;
    border-radius: 10px;
    width: 300px;
}
.mall-property .noUi-handle {
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: default;
    box-shadow: none;
}
.mall-property .noUi-target {
    border: 0;
    box-shadow: none;
    background: transparent;
}
.mall-property .noUi-tooltip {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    color: #fff;
    border: 0;
}
.mall-property .noUi-touch-area {
    background: linear-gradient(180deg, #FE0B1D 0%, #FE00E9 100%);
    color: #ffff;
    border: 0;
    box-shadow: none;
    border-radius: 5px;
}
.mall-property .noUi-handle:before, .mall-property .noUi-handle:after {
    width: 2px;
    background: #fff;
    top: 9px;
}
.upload-error-file label#song_image-error {
    text-align: center;
    display: block;
}
.library-sec.music-chart-sec.chart-theme-sec .chart-music-data-sub-data {
    width: 100%;
}
.library-sec.music-chart-sec.chart-theme-sec .chart-music-theme {
    max-width: 300px;
    width: 100%;
}
section.music-chart-sec.library-sec.chart-theme-sec .chart-music-right-data-inner {
    flex-wrap: wrap;
}
.details-search-button {
    text-align: center;
    margin-top: 30px;
    position: relative;
    z-index: 1;
    color: #FFF;
    margin-bottom: 15px;
}
section.library-sec .details-search-button button#loop_melody_search {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    border: 0;
    border-radius: 40pc;
    padding: 6px 30px;
    color: #fff;
}
.chart-music-data-img a {
    display: block;
}
section.library-sec .chart-music-data-img img {
    height: 150px;
}
section.library-sec .chart-music-data-img {
    margin-right: 18px;
    flex: 0 0 30%;
    max-width: 30%;
    border-radius: 10px !important;
    z-index: 2;
}

section.library-sec .chart-music-right-data-details {
    flex: 0 0 66%;
    max-width: 66%;
    z-index: 2;
}
section.library-sec.music-chart-sec .chart-music-data-inner {
    flex-wrap: wrap;
}
section.chart-banner-sec.library-banner-sec, section.chart-banner-sec.chart-banner-bg, section.chart-banner-sec.music-detail-banner {
    padding: 50px 0;
    position: relative;
    background: url(../img/library-bg.png) no-repeat center /cover;
    min-height: 634px;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.chart-banner-sec.library-banner-sec::before, section.chart-banner-sec.chart-banner-bg::before, section.chart-banner-sec.music-detail-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
}
section.library-sec.music-chart-sec.chart-theme-sec {
    padding: 70px 0;
}
section.chart-banner-sec.chart-banner-bg {
    background: url(../img/chart-guitar.png) no-repeat center /cover;
}
section.chart-banner-sec.music-detail-banner {
    background: url(../img/music-producer-bg.png) no-repeat center /cover;
}
.melody-detail-sec a.download-song {
    width: 40px;
    height: 40px;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.melody-detail-sec a.download-song  i {
    color: #fff;
}
.search-keyboard-input {
    position: relative;
}
.loopType-inner-sec .form-check-input {
    margin-top: 0;
    vertical-align: middle;
}
body.toggle-body {
    overflow-y: hidden;
}
.melody-detail-sec ul.details-price-data li label {
    display: block;
    height: 100%;
}
.chart-music-data-inner .chart-music-like .details-like-btn.btn.unlike:hover {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    color: #fff;
    z-index: 2;
}
.chart-music-data-inner::before, .chart-music-data-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all .7s ease 0s;
    border-radius: 10px;
}
.chart-music-data-inner::after {
    border-left: 3px solid #8409d9;
    border-right: 3px solid #5936f1;
    transform: scale(1,0);
    transform-origin: 100% 0 0;
}
.chart-music-data-inner::before {
    border-bottom: 3px solid #5936f1;
    border-top: 3px solid #8409d9;
    transform: scale(0,1);
    transform-origin: 0 0 0;
}
.chart-music-data-inner:hover::after, .chart-music-data-inner:hover::before{
    opacity: 1;
    transform: scale(1);
    transition-delay: .15s;
}
.no-record-div.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: 0;
    border-radius: .25rem;
}

.download-sons-list a i {
    color: #6426e7;
}
.download-sons-list a {
    display: inline-block;
    color: #fff;
    margin-right:10px
}
.downloadsongs-popup .btn-close {
    color: #fff;
    filter: invert(3);
    opacity: 1;
}
.download-sons-list .download-sons-title {
    color: #fff;
    margin-bottom: 8px;
    display: block;
}
.download-sons-list {
    padding: 20px 0;
    text-align: center;
}
.downloadsongs-popup .modal-header {
    background: #131212;
    border-radius: 20px 20px 0px 0px;
    padding: 16px 16px;
}
.downloadsongs-popup .modal-title {
    color: #fff;
    text-align: center;
}

.downloadsongs-popup .modal-body {
    background: #232426;
    border-radius: 0px 0px 20px 20px;
    padding: 30px 20px;
}
.downloadsongs-popup .modal-footer{
    background: var( --light-black)
}


.favorite-list-sec a.add-fav-btn:hover {
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    color: #fff;
}
.library-list-heading a.btn {
    padding: 4px 20px;
    font-size: 16px;
}
.list-items .toggle.btn, .list-items .toggle-handle.btn{
    font-size: 15px;
    background: inherit;
}
.list-items .toggle-off.btn {
    font-size: 15px;
    background: #ff8490;
    border-color: #ff8490;
    border: 1px solid #ff8490;
}
.list-items .toggle-on.btn {
    font-size: 15px;
    background: #53c791;
    border-color: transparent;
}
.list-items table.table tr th {
    padding: 20px 10px !important;
    font-size: 13px;
}
.modal-header {
    border-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.modal-content {
    background-color: #181818;
    border-radius: 20px;
} 
.downloadsongs-popup .modal-content:after {
    border-radius: 20px;
}
.downloadsongs-popup .modal-title {
    font-size: 20px;
}
section.melodaylist-song-sec.melody-list-sec .modal {
    background: rgba(0,0,0,0.7);
}
#song_image_preview {
    height: 0;
}
/** Audio player section **/
.waveform-player-parent {
    display: flex;
    position: relative;
    z-index: 1;
    color:#FFF
}
.waveform-player-parent .waveform {
    flex-basis: 90%;
    position: relative;
}
.waveform-player-parent.completed .waveform img{
    display: none;
} 
.waveform-player-parent .waveform img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
}
.waveform-player-parent .duration-played {
    flex-basis: 20%;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
}
.waveform-player-parent .play-button {
    flex-basis: 15%;
    text-align: center;
    display: flex;
    align-items: center;
}
.waveform-player-parent .play-icon {
    flex-basis: 38px;
    border: 1px solid transparent;
    background: linear-gradient(89.97deg, #8A00D4 -15.6%, #5535EE 101.6%);
    /* padding: 10px; */
    border-radius: 50%;
    cursor: pointer;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Kits section css start */
.kits-img {
    width: 100%;
    z-index: 2;
    position: relative;
}
.kits-img a {
    display: block;
    height: 250px;
    margin-bottom: 20px;
}
.kits-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kids-audio a {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 2px solid transparent;
    position: relative;
    align-items: center;
    justify-content: center;
    background: var( --light-black);
    border-radius: 50px;
}
.kids-audio a i {
    font-size: 21px;
}
.kits-content {
    display: flex;
    flex-wrap: nowrap;
    z-index: 2;
    position: relative;
}
.kits-content .kids-audio {
    margin-right: 20px;
}
.kits-head-data{
    width:100%
}
.kits-head-data h4 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.kits-head-data h4 a {
    color:inherit
}
.kits-head-data .track-user{
    font-size:16px;
}
.kids-desc {
    color: #fff;
    padding: 20px 10px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 14px;
}
section.music-chart-sec.chart-theme-sec .kids-data .chart-price-take-off {
    margin-top: 0;
}
span.audio-player-cstm {
    margin-right: 20px;
}
span.audio-player-cstm audio.audio-player {
    max-width: 100%;
}
.cstm-header a.navbar-brand img {
    width: 260px;
}
.music-chart-sec.chart-theme-sec.chart-price-take-off.creator-kits {
    padding: 10px;
    background-color:#000;
    max-height: 800px;
    overflow-y: auto;
}
.music-chart-sec.chart-theme-sec.chart-price-take-off.creator-kits  .row{
    margin:0
}
section.music-chart-sec .chart-music-data-inner.kit-section-data {
    display: block;
    padding: 14px 14px 28px;
}
section.music-chart-sec.chart-theme-sec .chart-price-take-off .chart-cart-player {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 10px;
}
.stem-files-sec,.midi-files-sec{
    margin-bottom:20px
}
.add-field-btn {
    text-align: right;
    margin-bottom: 10px;
}
.add-field-btn .add_fields{
	background: #fff;
	border: 0;
	color: #000;
	text-align: right;
	border-radius: 11px;
	font-size: 12px;
	padding: 8px 14px;
    /* background: transparent;
    color: #fff;
    text-decoration: underline; */
}
#addsong-form .wrapper .row, #addmultiple-form .wrapper .row, #editKitsong-form .wrapper .row, #editmelodysong-form .wrapper .row{
    position: relative;
}
#addsong-form .remove_field, #addmultiple-form .remove_field, #editKitsong-form .remove_field, #editmelodysong-form .remove_field{
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: #eee;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
    color: #000;
    font-size: 15px;
    padding-bottom: 4px;
}
.collaboration-users-sec {
    border-bottom: 1px solid #353333;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.loopType-inner-sec.click-not-allowed:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    cursor: not-allowed;
  }
  .loopType-inner-sec.click-not-allowed {
    position: relative;
  }

  .text, a.text:hover {
    color:white;
  }
  .banner-slider:not(.slick-initialized){
    max-height: 476px;
    overflow: hidden;
  }
section.chart-banner-sec.library-banner-sec,
section.chart-banner-sec.music-detail-banner{
    min-height: 159px;
}
#pay-btn-paypal,#paypal-btn{
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    overflow: hidden;
}
#pay-btn-paypal img,#paypal-btn img{
    width: 100%;
    height: 50px
}

.bio {
        text-align: left;
        color: whitesmoke;
        font-size: small;
}
.top-heading1 {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.custom-logo {
    justify-content: center;

}
.details-profile-music-list ul li span.music-list-data.loop-title a.cstm-text-creator {
    display: inline;
}

section.chart-banner-sec.about-banner {
    padding: 50px 0;
}
.library-inner-sec select {
    padding: 0 10px;
    height: 44px;
    min-width: 140px;
}
@media screen and (max-width: 767px) { 
    .custom-logo {
        flex-direction: column;
    }  
    .top-heading1 {
        margin-right: 0;
    }
}
@media screen and (max-width: 480px) {
    .custom-logo span img {
        max-height: 31px !important;
    }  
   
    
    .custom-logo span {
        font-size: 36px !important;
    }
}

/* ======  3/21/24   google-grecaptcha-badge ======*/

.grecaptcha-badge{
    z-index: 3;
}