@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;400;600&display=swap');

:root {
    --primary-color: #000000;
    --secondary-color: #D40490;
    --success-color: #37AA35;
    --dark-color: #373737;
    --light-color: #ffffff;
    --gray-1: #E7E7E7;
    --gray-2: #ced4da;
    --gray-3: #333;
    --gray-4: #F9F9F9;
    --gray-5: #909090;
    --gray-6: #A4A4A4;
    --gray-7: #6c757d;
}


* {
    font-family: 'Prompt', sans-serif !important;
    outline: none;
}

#loading {
    background-color: rgba(255,255,255,0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    overflow: hidden !important;
    right: 0px;
    z-index: 999999
}

#loading-center {
    border: 3px solid var(--gray-1);
    border-radius: 50%;
    border-top: 3px solid var(--secondary-color);
    width: 30px;
    height: 30px;
    -webkit-animation: loader 2s linear infinite;
    animation: loader 2s linear infinite;
    position: relative;
    top: 50%;
    left: 50%;
}

a {
    word-wrap: break-word;
}



    a:hover {
        color: var(--secondary-color) !important;
    }

.fix-top {
    margin-top: -5px;
}

.spacing-2 {
    letter-spacing: 2px
}

.img-icon-nav {
    width: 20px;
}

.img-icon-select {
    width: 25px;
    border-radius:50px;
}

.img-song-new {
    width: 100%;
    min-height: 8rem;
    object-fit: cover;
    border-radius: 10px;
}

.dropdown-item {
    color: var(--dark-color) !important;
}

.circle {
    width: 5px;
    margin-top: -10px;
}

.header {
    background-image: url("../../../images1/bg-1.png");
    height: 130vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -10rem;
}

.line {
    background-color: var( --gray-2);
}

.nav-bar {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    position: fixed;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.nav-art {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    position: fixed;
    box-sizing: border-box;
}

.nav-bar-light {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    position: fixed;
    background: var(--light-color);
    box-sizing: border-box;
}

.music {
    /* background: url("../../../images1/bg-2.png"); */
    background-image: radial-gradient(circle at top right,var(--secondary-color), rgb(255, 255, 255) 30% );
    background-attachment: fixed;
    /* width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
}

.music-1 {
    /* background: url("../../../images1/bg-4.png"); */
    /* height:150vh; */
    background-image: radial-gradient(circle at bottom left,var(--secondary-color), rgb(255, 255, 255) 15% );
    /* background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
}

.music-2 {
    background-image: radial-gradient(circle at top left,var(--secondary-color), rgb(255, 255, 255) 15% );
}

.nav-light {
    color: var(--light-color) !important;
}

.nav-black {
    color: var(--primary-color) !important;
}

.nav-light:hover {
    color: var(--light-color) !important;
    border-bottom: 1.5px solid;
    padding-bottom: 1.5px;
}

.nav-black:hover {
    color: var(--primary-color) !important;
    /*border-bottom: 1.5px solid var(--primary-color);*/
    padding-bottom: 1.5px;
}

.input-form {
    display: block;
    width: 100%;
    padding: 0.475rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-3) !important;
    background-color: var(--light-color);
    background-clip: padding-box;
    border: 1px solid var(--gray-2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2rem;
    text-decoration: none;
}

.input-form-black {
    display: block;
    width: 100%;
    padding: 0.475rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-3) !important;
    background-color: var(--light-color);
    background-clip: padding-box;
    border: 1px solid var(--primary-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2rem;
    text-decoration: none;
    background: url(../../../images1/search.svg) right 15px center no-repeat #ffffff;
    background-size: 20px;
}

::placeholder {
    color: var(--gray-3) !important;
    font-weight: 200 !important;
}

.p-input-form {
    padding: 0.675rem 0 !important;
}

.fix-mt-swiper {
    margin-right: 80px !important;
}

.img-type-music {
    display: block;
    max-width: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.img-menu {
    width: 40px;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: var(--light-color);
}

.partner {
    height: 80vh;
    background-image: url("../../../images1/bg-3.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.number-title {
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    border-radius: 50%;
    color: #ffffff;
}
/* .box-1{
  background: rgb(255,173,183);
  background: linear-gradient(270deg, rgba(255,173,183,1) 0%, rgba(255,173,183,0.2539609593837535) 100%);
  border-radius: 2rem;
} */

/* .box-2{
  background: rgb(255,173,183);
  background: linear-gradient(274deg, rgba(255,173,183,1) 0%, rgba(127,69,208,0.5424763655462185) 20%, rgba(127,69,208,0.5144651610644257) 41%, rgba(239,229,252,1) 100%);
  border-radius: 2rem;
} */

/* .box-3{
  background: rgb(191,108,212);
  background: linear-gradient(259deg, rgba(191,108,212,1) 0%, rgba(206,167,108,0.28757440476190477) 42%);
  border-radius: 2rem;
} */

.border-bottom {
    width: 90%;
}


.c-music .card-music {
    border-radius: 15px;
    height: 100px;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    transition: 0.4s ease-out;
}

.c-music:hover .card-music:before {
    opacity: .8;
}

.c-music:hover .number {
    color: var(--secondary-color) !important;
}

.c-music .card-music:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../../../images1/play.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
    transition: 0.5s;
    opacity: 0;
    border-radius: 1rem;
}

.c-music .card-music img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

#module a:hover {
    color: var(--secondary-color) !important;
}

#module a.collapsed::after {
    content: '+' !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a.collap1::after {
    content: '+';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a.collap2::after {
    content: '+';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a.collap3::after {
    content: '+';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a:not(.collapsed)::after {
    content: '-';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a:not(.collap1)::after {
    content: '-';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a:not(.collap2)::after {
    content: '-';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

#module a:not(.collap3)::after {
    content: '-';
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -25px;
}

footer {
    background-color: var(--primary-color);
    padding: 5rem 0;
    color: var(--light-color);
}

.mslprice {
    color: var(--primary-color);
    background-color: var(--light-color);
    height: 42px;
    width: 100%;
    border: 1px solid var(--gray-2);
    border-radius: 50px;
    padding-left: 20px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) right 15px center no-repeat #ffffff;
    background-size: 25px;
}

.input-calendar {
    color: var(--primary-color);
    background-color: var(--light-color);
    height: 42px;
    width: 100%;
    border: 1px solid var(--light-color);
    border-radius: 50px;
    padding-left: 20px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../../../images1/calendar.png) right 15px center no-repeat var(--light-color);
    background-size: 20px;
    border: 1px solid var(--gray-1);
}

[type="date"]::-webkit-inner-spin-button {
    display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.search-type {
    width: 100%;
    background-color: var(--light-color);
    height: 42px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    border-radius: 50px;
    padding-left: 18px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../../../images1/arrow-down.svg) right 15px center no-repeat #ffffff;
    background-size: 16px;
}

.search-type-black {
    width: 100%;
    background-color: var(--primary-color);
    height: 42px;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color);
    border-radius: 50px;
    padding-left: 18px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) right 15px center no-repeat #ffffff;
    background-size: 25px;
}


.search-type-account {
    width: 100%;
    background-color: var(--primary-color);
    height: 42px;
    border: transparent;
    color: var(--primary-color);
    border-radius: 50px;
    padding-left: 3rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) right 15px center no-repeat #ffffff;
    background-size: 25px;
    background-image: url(../../../images1/i-user.png) left 45px center no-repeat;
}


.border-muted {
    border: 1px solid #e6e6e6 !important;
}

.style-none {
    list-style-type: none;
    padding-left: 0px;
}

.mt-none {
    margin-top: 0 !important;
}

.faq {
    background-color: var( --gray-4);
}

.fix-width {
    width: 100px;
}

.song-new {
    height: 50vh;
    background-image: url(../../../images1/song-new.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.song-pop {
    height: 50vh;
    background-image: url(../../../images1/album/type-music-2.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.song-type {
    height: 50vh;
    background-image: url(../../../images1/album/type-music-4.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.song-company {
    height: 50vh;
    background-image: url(../../../images1/album/type-company.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.box-list {
    background: var(--gray-1);
    border-radius: 10px;
    color: var(--gray-5);
    padding: 0 .5rem;
    height: 7rem;
}

.box-modal {
    background: var(--light-color);
    border-radius: 10px;
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    padding: 0 .5rem;
    height: 4rem;
}

.box-modal-share {
    cursor:pointer;
    background: var(--light-color);
    border-radius: 10px;
    /* color: var(--secondary-color) !important; */
    /* border: 1px solid var(--secondary-color) !important; */
    padding: 0 0.5rem;
    height: 4rem;
}

.bg-icon {
    height: 5rem;
    width: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-right: 1rem;
}

.bg-modal {
    height: 3rem;
    width: 3rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-right: 1rem;
}

.icon-list {
    background-image: url("../../..@Url.Content("~/")images1/icon-list.png");
}

.icon-list-at {
    background-image: url("../../../images1/icon-list-at.png");
}

.icon-list-event {
    background-image: url("../../../images1/icon-list-event.png");
}

.icon-apple-help {
    background-image: url("../../../images1/apple-help.png");
}

.icon-spotify-help {
    background-image: url("../../../images1/spotify-help.png");
}


.icon-modal-1 {
    background-image: url("../../../images1/modal/icon-1-red.png");
}

.icon-modal-2 {
    background-image: url("../../../images1/modal/icon-2-red.png");
}

.icon-modal-3 {
    background-image: url("../../../images1/modal/icon-3-red.png");
}

.icon-modal-4 {
    background-image: url("../../../images1/modal/icon-4-red.png");
}

.icon-modal-5 {
    background-image: url("../../../images1/modal/icon-6-red.png");
}

.icon-modal-6 {
    background-image: url("../../../images1/modal/icon-7-red.png");
}

.icon-modal-8 {
    background-image: url("../../../images1/modal/icon-8-red.png");
}

.icon-modal-9 {
    background-image: url("../../../images1/modal/icon-9-red.png");
}

.icon-modal-10 {
    background-image: url("../../../images1/modal/icon-10-red.png");
}

.icon-modal-11 {
    background-image: url("../../../images1/modal/icon-11-red.png");
}

.icon-modal-12 {
    background-image: url("../../../images1/modal/icon-12-red.png");
}

.icon-modal-face {
    background-image: url("../../../images1/modal/icon-login-fac.png");
}

.icon-modal-twitter {
    background-image: url("../../../images1/modal/icon-login-twitter.png");
}

.icon-modal-line {
    background-image: url("../../../images1/modal/icon-login-line.png");
}

.box-list:hover {
    color: var(--light-color);
    background: rgb(226,79,79);
    background: linear-gradient(275deg, rgba(226,79,79,1) 17%, rgba(231,0,109,1) 69%);
}

.box-modal:hover {
    background: var(--secondary-color);
    color: var(--light-color) !important;
}

.box-contact {
    background-color: var( --gray-4);
    padding: 1rem;
    border-radius: 0.8rem;
}

.box-space {
    min-height: 300px;
}

.box-list:hover .icon-list {
    background-image: url("../../../images1/icon-list-red.png");
}

.box-list:hover .icon-list-at {
    background-image: url("../../../images1/icon-list-at-red.png");
}

.box-list:hover .icon-list-event {
    background-image: url("../../../images1/icon-list-event-red.png");
}


.box-modal:hover .icon-modal-1 {
    background-image: url("../../../images1/modal/icon-1.png");
}

.box-modal:hover .icon-modal-2 {
    background-image: url("../../../images1/modal/icon-2.png");
}

.box-modal:hover .icon-modal-3 {
    background-image: url("../../../images1/modal/icon-3.png");
}

.box-modal:hover .icon-modal-4 {
    background-image: url("../../../images1/modal/icon-4.png");
}

.box-modal:hover .icon-modal-5 {
    background-image: url("../../../images1/modal/icon-6.png");
}

.box-modal:hover .icon-modal-6 {
    background-image: url("../../../images1/modal/icon-7.png");
}

.box-modal:hover .icon-modal-8 {
    background-image: url("../../../images1/modal/icon-8.png");
}

.box-modal:hover .icon-modal-9 {
    background-image: url("../../../images1/modal/icon-9.png");
}

.box-modal:hover .icon-modal-10 {
    background-image: url("../../../images1/modal/icon-10.png");
}

.box-modal:hover .icon-modal-11 {
    background-image: url("../../../images1/modal/icon-11.png");
}

.box-modal:hover .icon-modal-12 {
    background-image: url("../../../images1/modal/icon-12.png");
}

.read-more {
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
}

.artist-name::after {
    background-image: url("../../../images1/arrow.png");
    background-size: 20px 20px;
    display: inline-block;
    margin-left: 0.5rem;
    width: 20px;
    height: 20px;
    content: "";
}

.type-artist li:first-child {
    border-left: 0;
    padding: 0 .5rem 0 0;
}

.type-artist li {
    border-left: 1px solid;
    padding: 0 .5rem;
}

.radius {
    border-radius: 1rem;
}

.radius-2 {
    border-radius: 2rem;
}

.radius-50 {
    border-radius: 50%;
}

.nav-link {
    color: var(--primary-color) !important;
}

    .nav-link.active {
        color: var(--secondary-color) !important;
        border-bottom: 3px solid var(--secondary-color);
    }

.nav-black:hover {
    padding: 0 !important;
}

.swiper-button-next {
    background-size: 15px 44px !important;
    background-image: url("../../../images1/arrow-right.svg") !important;
    position: absolute;
    right: -18px !important;
    margin-top: -70px !important;
}

    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
        opacity: 10 !important;
    }

#next-btn5 {
    right: -30px !important;
}

#prev-btn5 {
    left: -30px !important;
}

.swiper-button-prev {
    background-size: 15px 44px !important;
    background-image: url("../../../images1/arrow-left.svg") !important;
    position: absolute;
    left: -18px !important;
    margin-top: -70px !important;
}

.card-box {
    border: 1px solid var(--secondary-color);
    padding: 1rem;
    border-radius: 1rem;
}
/* 
.modal-header .btn-close {
  margin-top: -5rem  !important;
  margin-right: -2rem  !important; 
} */

.modal-xl {
    max-width: 1050px !important;
}

.lunchbox {
    position: relative;
    max-width: 1320px;
    margin: auto;
}

.about-music {
    background-color: var( --gray-4);
    height: 14rem;
}

.about-approve {
    background-color: var( --gray-4);
    height: 10rem;
}

.partner-music {
    height: 50vh;
    background-image: url("../../../images1/bg-3.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-history {
    border: 1px solid var(--gray-1);
    padding: 1rem;
    border-radius: 1rem;
}

.arrow-right {
    margin-left: 5px;
    width: 1.2vmin;
    height: 1.2vmin;
    box-sizing: border-box;
    position: absolute;
    transform: rotate(315deg);
    margin-top: 8px;
}

.arrow-left {
    margin-left: -8px;
    width: 1vmin;
    height: 1vmin;
    box-sizing: border-box;
    position: absolute;
    transform: rotate(130deg);
    margin-top: 8px;
}

.search-title .arrow-right {
    margin-left: 5px;
    width: 1vmin;
    height: 1vmin;
    box-sizing: border-box;
    position: absolute;
    transform: rotate(315deg);
    margin-top: 8px;
}

.arrow-right::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 0 0.2vmin 0 0;
    border-style: solid;
    border-color: var(--primary-color);
    display: block;
}


.arrow-right:after {
    content: "";
    float: left;
    position: relative;
    top: -100%;
    width: 100%;
    height: 100%;
    border-width: 0 0 0.2vmin 0;
    border-style: solid;
    border-color: var(--primary-color);
}


.arrow-left::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 0 0.2vmin 0 0;
    border-style: solid;
    border-color: var(--primary-color);
    display: block;
}


.arrow-left:after {
    content: "";
    float: left;
    position: relative;
    top: -100%;
    width: 100%;
    height: 100%;
    border-width: 0 0 0.2vmin 0;
    border-style: solid;
    border-color: var(--primary-color);
}


.dropdown-toggle::after {
    display: unset !important;
    margin-left: unset !important;
    vertical-align: unset !important;
    content: unset !important;
    border-top: unset !important;
    border-right: unset !important;
    border-bottom: unset !important;
    border-left: unset !important;
}

.dropdown-item:hover {
    color: var(--light-color) !important;
    background-color: var(--secondary-color) !important;
}

.w-dropdown {
    width: 30%;
}

.box-info {
    border: 1px solid var(--gray-1);
    padding: 2rem;
    border-radius: 20px;
}

.form-check-input[type=checkbox] {
    border-radius: 50% !important;
}

.form-check-input:checked {
    background-color: var(--secondary-color) !important;
    border: 3px solid var(--gray-2) !important;
    background-image: unset !important;
}

.header-artist {
    margin-top: -90px;
    height: 50vh;
    /*background-image: url("../../../images1/artist-herder.png");*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-profile {
    margin-top: -90px;
    height: 50vh;
    background-image: url("../../../images1/bg-profile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.w-md-100 {
    width: unset;
}

.artist-footer {
    height: 60vh;
    background-image: url("../../../images1/artist-footer.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    border: none;
}

.artist .no {
    width: 80px;
    background: var(--gray-5);
    height: 80px;
    display: flex;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
    color: var(--light-color);
    align-items: center;
    justify-content: center;
}

.card-job:hover .no {
    color: var(--light-color);
    background: var(--secondary-color);
}

.img-myaccount {
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: none;
    height: 150px;
    width: 150px;
    cursor:pointer;
}

.myaccount:hover .img-myaccount::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../../../images1/photo.png") rgba(255, 0, 150, 0.3) center no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-size: 50px;
}

.myaccount-profile {
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: none;
    height: 100px;
    width: 100px;
    cursor:pointer;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 50px;
}


.input-user {
    text-decoration: none;
    background: url("../../../images1/i-user.png") left 15px center no-repeat;
    background-size: 20px;
    padding-left: 3rem;
}

.input-bank {
    text-decoration: none;
    background: url("../../../images1/list1.svg") left 15px center no-repeat;
    background-size: 20px;
    padding-left: 3rem;
}

.input-lock {
    text-decoration: none;
    background: url("../../../images1/i-lock.svg") left 15px center no-repeat;
    background-size: 17px;
    padding-left: 3rem;
}

.input-email {
    text-decoration: none;
    background: url("../../../images1/i-email.png") left 15px center no-repeat;
    background-size: 20px;
    padding-left: 3rem;
}

.input-phone {
    text-decoration: none;
    background: url("../../../images1/i-phone.png") left 15px center no-repeat;
    background-size: 13px;
    padding-left: 3rem;
}

.input-map {
    text-decoration: none;
    background: url("../../../images1/i-map.png") left 15px center no-repeat;
    background-size: 20px;
    padding-left: 3rem;
}

.input-idCard {
    text-decoration: none;
    background: url("../../../images1/idCard.png") left 15px center no-repeat;
    background-size: 20px;
    padding-left: 3rem;
}

.btn-facebook {
    background: url("../../../images1/facebook.png") left 15px center no-repeat;
    background-size: 30px;
    background-color: #1877F2;
    color: var(--light-color);
    border-radius: 1.8rem;
    text-decoration: none;
    padding: 0.8rem 5rem;
    border: 1px solid #1877F2;
}

.btn-line {
    background: url("../../../images1/line.png") left 15px center no-repeat;
    background-size: 30px;
    background-color: #00C300;
    color: var(--light-color);
    border-radius: 1.8rem;
    text-decoration: none;
    padding: 0.8rem 5rem;
    border: 1px solid #00C300;
}

.btn-google {
    background: url("../../../images1/google-logo.png") left 15px center no-repeat;
    background-size: 30px;
    background-color: var(--light-color);
    color: var(--primary-color);
    border-radius: 1.8rem;
    text-decoration: none;
    padding: 0.8rem 5rem;
    border: 1px solid var(--gray-2);
}

.btn-apple {
    background: url("../../../images1/apple-logo.png") left 15px center no-repeat;
    background-size: 30px;
    background-color: var(--primary-color);
    color: var(--light-color);
    border-radius: 1.8rem;
    text-decoration: none;
    padding: 0.8rem 5rem;
    border: 1px solid var(--primary-color);
}

.card-muted {
    border-radius: 1rem;
    border: 1px solid var(--gray-2);
    padding: 0.7rem;
}

.card {
    border-radius: 1.25rem !important;
}

.card-header {
    padding: 1rem !important;
    background-color: var(--light-color) !important;
    border-bottom: 0 !important;
}

    .card-header:first-child {
        border-radius: calc(1.25rem - 1px) calc(1.25rem - 1px) 0 0 !important;
    }

.card-footer {
    border-top: 0 !important;
}

    .card-footer:last-child {
        border-radius: 0 0 calc(1.25rem - 1px) calc(1.25rem - 1px) !important;
    }

.card-row {
    padding: 1rem;
    background-color: var(--light-color) !important;
}

.card-img, .card-img-top {
    border-top-left-radius: calc(1.25rem - 1px) !important;
    border-top-right-radius: calc(1.25rem - 1px) !important;
}

.img-footer-card {
    max-width: 80px;
    max-height: 60px;
    object-fit: cover;
    border-radius: .8rem;
}

.card-row-footer {
    padding: .5rem 1rem;
    border-radius: 0 0 calc(1.25rem - 1px) calc(1.25rem - 1px) !important;
    border-top: 1px solid rgba(0,0,0,.125);
}

.card-img-top {
    border-radius: 15px;
    height: 300px;
    object-fit: cover;
    position: relative;
}

    .card-img-top img {
        border-top-left-radius: calc(1.25rem - 1px) !important;
        border-top-right-radius: calc(1.25rem - 1px) !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card-img-top .tag {
        position: absolute;
        backdrop-filter: blur(10px);
        color: var(--light-color);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0.5rem 2rem;
        border-radius: 8px;
    }


    .card-img-top .tag-success {
        position: absolute;
        background-color: var(--success-color);
        color: var(--light-color);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0.5rem 2rem;
        border-radius: 8px;
    }

.img-box {
    height: 50px;
}

.img-contact {
    width: 100%;
    border-radius: 2rem;
}

.search-title a:hover .arrow-right:after {
    border-color: var(--secondary-color);
}

.search-title a:hover .arrow-right:before {
    border-color: var(--secondary-color);
}

.faq-title li {
    border-left: 1px solid var(--gray-5);
    padding: 0 0.3rem;
    margin-left: 0.3rem;
}

    .faq-title li:nth-child(1) {
        border-left: 0;
        padding: 0;
        margin-left: 0;
    }

.faq-title .active {
    color: var(--primary-color);
}

.faq-content .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom: 1.5px solid var(--primary-color);
    font-weight: bold;
}

.account-content .nav-link.active {
    color: var(--secondary-color) !important;
    border-bottom: 1.5px solid var(--secondary-color);
}

.account-content .col-lg-3 {
    border-right: 1px solid var(--gray-2);
}

.faq-deteil {
    margin-top: 1rem;
}

    .faq-deteil:nth-child(1) {
        margin-top: 0;
    }

    .faq-deteil a:hover .arrow-right:after {
        border-color: var(--secondary-color);
    }

    .faq-deteil a:hover .arrow-right:before {
        border-color: var(--secondary-color);
    }

a:hover .arrow-left:after {
    border-color: var(--secondary-color);
}

a:hover .arrow-left:before {
    border-color: var(--secondary-color);
}

select {
    padding: 0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

.select-faq {
    color: var(--primary-color);
    background-color: var(--light-color);
    height: 47px;
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    padding-left: 20px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) right 15px center no-repeat #ffffff;
    background-size: 25px;
}

.divider-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .divider-section .divider-section-line {
        width: 100%;
        max-width: 28%;
        height: 0.1rem;
        background-color: var(--gray-2);
        border-radius: 1rem;
        border-color: var(--gray-2);
    }

.iOtp {
    color: var(--secondary-color) !important;
    font-size: 1.7rem !important;
    border-radius: 0.8rem !important;
}

.cookie-consent {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 1rem 0;
    color: var(--light-color);
    font-size: 14px;
    background: rgb(226,79,79);
    background: linear-gradient(275deg, rgba(226,79,79,1) 17%, rgba(231,0,109,1) 69%);
    z-index: 5;
    cursor: pointer;
}

.fix-height-box {
    height: 10rem;
}

.nav-light.active {
    border-bottom: 1px solid var(--light-color);
}

.nav-black.active {
    border-bottom: 1px solid var(--primary-color);
}

.nav-black.active {
    border-bottom: 1px solid var(--primary-color);
}

.header-today {
    margin-top: -90px;
    height: 50vh;
    background-image: url("../../../images1/bg-art.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-info {
    margin-top: -90px;
    height: 50vh;
    background-image: url("../../../images1/bg-info.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-music-all {
    margin-top: -90px;
    height: 50vh;
    background-image: url("../../../images1/bg-music.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.noti-list-box {
    right: 150px;
}

.noti-box {
    border-radius: 50%;
    border: 1px solid var(--light-color);
    width: 40px;
    height: 40px;
    background-image: url("../../../images1/noti.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.noti-box-black {
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    width: 40px;
    height: 40px;
    background-image: url("../../../images1/noti-color-black.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.noti-box:hover, .noti-box:focus {
    background-color: var(--light-color);
    background-image: url("../../../images1/noti-color.svg");
}

.noti-box-black:hover, .noti-box-black:focus {
    background-color: var(--primary-color);
    background-image: url("../../../images1/noti-color.svg");
}

.noti-number {
    margin-left: 25px;
    margin-top: -5px;
    background: var(--secondary-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: var(--light-color);
    font-size: 10px;
    text-align: center;
    padding-top: 2px;
}

.dropdown-noti-box .dropdown-item:hover {
    color: var(--secondary-color) !important;
    background-color: transparent !important;
}

.noti-box > .noti-sm {
    margin-top: 5rem !important;
    margin-right: 3rem !important;
}

.logo-myband {
    width: 95px;
    height: 95px;
}

.img-profile {
    width: 40px;
}

.u-music p, .u-music a {
    font-size: 14px;
}

.u-music small {
    font-size: 12px;
}

.u-list-img {
    width: 80px;
}

.app-store {
    width: 170px;
}


/* STEP WIZARD */
.process {
    background-color: var(--gray-4);
}

    .process .process-step,
    .process-account .process-step {
        list-style: none;
        display: list-item;
        margin: 0 auto;
    }

.process-account .stepButtons {
    overflow-y: hidden;
    display: block;
}

.process .process-step.active button,
.process-account .process-step.active button {
    background-color: var(--secondary-color);
}

.process .process-step.active .step1 {
    background-image: url("../../../images1/step1-action.svg") !important;
}

.process .process-step.active .step2 {
    background-image: url("../../../images1/step2-action.svg") !important;
}

.process .process-step.active .step3 {
    background-image: url("../../../images1/step3-action.svg") !important;
}

.process .process-step.active .step4 {
    background-image: url("../../../images1/step4-action.svg") !important;
}

.process .stepButtons {
    list-style-type: none;
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    border: 0;
}

.process-account .stepButtons {
    list-style-type: none;
    display: block;
    justify-content: center;
    width: 100%;
    position: relative;
    border: 0;
}

.process .stepButtons:before {
    top: 40px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 70%;
    height: 2px;
    background-color: var(--gray-2);
}

.process-account .stepButtons:before {
    top: 50px;
    bottom: 0;
    position: absolute;
    content: "";
    width: 2px;
    height: 65%;
    background-color: var(--gray-2);
    left: 41px;
}

.process-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.process .process-step p,
.process-account .process-step p {
    margin-top: 4px
}

.process-step > p > small {
    font-weight: normal;
    display: block;
}

.process-step.active > p > small {
    color: var(--secondary-color);
}

.process-account .process-step {
    display: flex;
    text-align: left;
    overflow: auto;
    padding: 20px 0;
    width: 100%;
}

    .process-account .process-step .btn-circle {
        width: 60px;
        height: 60px;
        padding: 0;
        z-index: 100;
        margin-top: 10px;
        float: left;
    }

.btn-circle {
    width: 80px;
    height: 80px;
    border-radius: 50% !important;
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s;
    background-color: #E6E6E6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 33px;
}

.process-account .btn-circle {
    width: 80px;
    height: 80px;
    border-radius: 50% !important;
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s;
    background-color: #E6E6E6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
}


.process-account .step1 {
    background-image: url("../../../images1/icon-user-light.svg");
}

.process-account .step2 {
    background-image: url("../../../images1/icon-money-light.svg");
}

.step1 {
    background-image: url("../../../images1/list-icon.svg");
}

.step2 {
    background-image: url("../../../images1/step2.svg");
}

.step3 {
    background-image: url("../../../images1/step3.svg");
    background-size: 35px;
}

.step4 {
    background-image: url("../../../images1/step4.svg");
}

.card-publisher:first-child span {
    display: inline;
}

.card-publisher span {
    display: none;
}

.check-box-input:checked {
    border-radius: 0.25rem;
    width: 1em;
    height: 1em;
    margin-top: 0.25rem;
    background-image: url("../../../images1/check-box.svg");
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    appearance: none;
    background-color: var(--gray-2);
    border: 3px solid var(--gray-2);
}

.check-box-input {
    margin-top: 0.25rem;
    float: left;
    margin-left: -1.5rem;
}

.list-partner {
    color: var(--gray-6);
    background-color: var(--gray-4);
    padding: 2px 17px;
    border-radius: 2rem;
}

.filter-img {
    filter: grayscale(100%);
}

.filter-img-0 {
    filter: grayscale(0);
}

.box-link {
    width: 20rem;
    padding: 2rem 1rem;
}

.btm-small {
    width: 15rem !important
}

.o-3 {
    opacity: 30%;
}

.loader {
    border: 3px solid var(--gray-1);
    border-radius: 50%;
    border-top: 3px solid var(--secondary-color);
    width: 20px;
    height: 20px;
    -webkit-animation: loader 2s linear infinite; /* Safari */
    animation: loader 2s linear infinite;
    display: inline-block;
}


.loader-lg {
    border: 3px solid var(--gray-1);
    border-radius: 50%;
    border-top: 3px solid var(--secondary-color);
    width: 36px;
    height: 36px;
    -webkit-animation: loader 2s linear infinite; /* Safari */
    animation: loader 2s linear infinite;
    display: inline-block;
}


/* Safari */
@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

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

.dropdown-item.active {
    color: var(--secondary-color) !important;
    background-color: transparent !important;
}

.w-none {
    width: unset !important;
}

.nowrap {
    white-space: nowrap;
    overflow-x: auto;
}

    .nowrap .nav {
        flex-wrap: nowrap !important;
    }

#myChart {
    width: 100% !important;
}

.account .nav-link {
    color: var(--gray-3) !important;
}

    .account .nav-link.active {
        color: var(--gray-6) !important;
        border-bottom: unset !important;
    }

    .account .nav-link:first-child {
        border-left: 0;
        padding: 0 .5rem 0 0;
    }

.account .nav-link {
    border-left: 1px solid var(--gray-6);
    padding: 0 .5rem;
}

.page-link {
    padding: 0 0.5rem !important;
    color: var(--gray-7) !important;
    border: unset !important;
}

.list-number {
    list-style-type: decimal;
}

.line-config {
    width: 78%;
    display: block;
    margin: auto;
}

.cursor-hand {
    cursor: pointer;
}

.empty-block {
    background-color: var( --gray-4);
    height: 14rem;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.empty-block-10 {
    background-color: var( --gray-4);
    height: 10rem;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}


.empty-block-tran {
    background-color: transparent;
    height: 8rem;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center;
}

.empty-block img {
    padding-top: 50px;
}

.empty-block p {
    padding-top: 10px;
    font-size: 14px;
    color: #909090;
}

.text-primary-1 {
    color: var(--secondary-color) !important;
}

.a-link {
    color: black;
    text-decoration: none;
}

.a-botton {
    text-decoration : none !important;
}

footer a {
    color: white !important;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.textarea-lyrics {
    border: none;
    overflow-y: hidden;
    min-height: 1000px;
    width: 100%;
}

.min-height {
    min-height:700px;
}

.cart-box {
    border-radius: 50%;
    border: 1px solid var(--light-color);
    width: 40px;
    height: 40px;
    background-image: url("../../../images1/cart.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 41px;
}

.cart-box-black {
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    width: 40px;
    height: 40px;
    background-image: url("../../../images1/cart-black.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 41px;
}
.noti-small {
    color: #6c757d !important;
    font-size: 0.6rem;
}