html,
body,
#root {
    height: 100%;
    overflow: auto;
}
body {
    background-color: #000000;
    font-family: "Montserrat", sans-serif;
    line-height: normal;
    font-weight: 400;
    color: #ffffff;
}
.main_container,
.main_container > div,
.main_container > div > div {
    height: 100%;
}
a {
    color: #fff;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
img {
    max-width: 100%;
}
hr {
    border-top: 1px solid rgba(149, 152, 154, 0.28);
}
h1,
h2,
h3,
h4 {
    margin: 0;
}
ul,
ol {
    margin: 0 0 0 0;
    padding: 0 0 0 0px;
    list-style-type: none;
}
.error {
    color: #721c24;
}
.field-error {
    right: 0;
    color: hsl(354, 61%, 28%);
    z-index: 9999;
    text-align: left;
    position: absolute;
}
.displaynone {
    display: none;
}
h1,
.heading1 {
    font-size: 39px;
    line-height: normal;
    color: #ffffff;
    padding: 50px;
    font-weight: 700;
    position: relative;
}
h2,
.heading2 {
    margin: 0 0 60px 0;
    font-size: 29px;
    color: #ffffff;
    font-weight: 700;
    line-height: normal;
}
h2 span {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.47);
    font-weight: 400;
    display: block;
    text-transform: capitalize;
}
h2 span .text-danger {
    color: #ed1651 !important;
}
h2 span .text-success {
    color: #3cc480 !important;
}
.mid-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 39px;
    color: #ffffff;
    padding: 70px 50px;
}
.mid-title span {
    font-size: 29px;
    font-weight: 700;
    line-height: 35px;
}
.mid-title svg {
    font-size: 22px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 20px 0 5px;
}
.small-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 37px;
    color: #ffffff;
}
.small-title span {
    font-size: 14px;
    color: #898989;
    vertical-align: middle;
    padding: 0 0 0 30px;
}
.title-20 {
    font-size: 20px;
    line-height: normal;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 26px 0;
}
.gray-btn {
    color: #6a6a6a;
    background: #252525;
    padding: 12px 20px;
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
}
.gray-btn svg {
    font-size: 12px;
    margin-left: 6px;
}
.btn:focus,
button:focus {
    box-shadow: none;
    outline: none;
}
.btn-udux-yellow {
    min-width: 130px;
    margin: 0 0 50px;
    color: #1c1c1c;
    border-radius: 50px;
    background-color: #ffa700;
    border-color: #ffa700;
    outline: none;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    font-family: "Montserrat", sans-serif;
}
.btn-udux-pink {
    border-radius: 50px;
    background: #ff3366;
    color: #ffffff;
    border: none;
    min-width: 130px;
    padding: 12px;
    line-height: normal;
    outline: none;
    box-shadow: none;
}
.btn-udux-black {
    color: #636262;
    outline: none;
    box-shadow: none;
}
.btn-udux-blue {
    color: #ffffff;
    border-color: #007bff;
    background-color: #007bff;
    border: none;
    padding: 12px;
    min-width: 72px;
    border-radius: 50px;
    line-height: normal;
    outline: none;
    box-shadow: none;
}
.btn-udux-red {
    color: #ffffff;
    background-color: #dc3545;
    border-color: #dc3545;
    border: none;
    padding: 12px;
    min-width: 72px;
    border-radius: 50px;
    line-height: normal;
    outline: none;
    box-shadow: none;
}
.btn-udux-grey {
    color: #ffffff;
    background-color: #717171;
    border-color: #717171;
    border: none;
    padding: 12px;
    min-width: 72px;
    border-radius: 50px;
    line-height: normal;
    outline: none;
    box-shadow: none;
}
.text-yellow {
    color: #ffb100;
}
.text-green {
    margin: 0;
    color: #2ecc71 !important;
}
button.text-red {
    background: none;
    border: none;
    color: #e83e3e;
}
.link-text {
    color: #898989;
    font-size: 14px;
}
.link-text svg {
    margin-left: 5px;
}
.signin_section::placeholder {
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    color: rgba(255, 252, 252, 0.44);
}
.nav {
    padding: 35px;
}
.nav ul {
    padding: 0 0 0 30px;
}
.nav li span {
    margin: 0 0 17px;
    display: block;
    color: #6f6f6d;
    font-size: 15px;
}
.nav li a:hover {
    color: #f7b010;
}
.nav li a.is-active {
    color: #f7b010;
}
.sidebar {
    padding: 35px;
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    height: 100vh;
}
.profile_image a {
    flex: 1;
}
.profile_image img {
    width: 130px;
}
.profile_image span {
    color: #d8d8d8;
    font-size: 19px;
    margin-left: 30px;
    flex: 1;
    word-break: break-all;
}
.sidebar li a {
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 25px 0;
    display: block;
}
/* Loader Css*/
.udux_loader {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    bottom: 0;
}
.css-1b2wvok {
    top: 50% !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    left: 50%;
}
.css-14hgwh {
    background-color: #808080 !important;
}
.css-1fymig2 {
    background-color: #a9a9a9 !important;
}
.signin_section {
    padding: 50px 68px 100px;
    color: #898989;
    background-color: #1c1c1c;
    box-shadow: 0 0 36px 0 rgba(3, 3, 3, 0.16);
}
.signin_section .udux_logo {
    width: 60px;
    margin: 0 auto 35px;
}
.login-sec h3 {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 15px 0;
    color: #ffffff;
}
.signin_section .signin_hr {
    max-width: 227px;
    margin: 0 auto 30px;
}
.signin_section .signin_form label {
    display: none;
}
.form-group {
    margin: 0 0 48px;
    position: relative;
}
input.form-control,
select.form-control,
.form-control:focus,
textarea.form-control,
.form-group .react-tagsinput {
    background: #252525;
    border: 0.5px solid #646464;
    width: 100%;
    z-index: 99;
    position: relative;
    padding: 24px 50px;
    color: #fffcfc;
    box-shadow: 0 0 2px 0 rgba(37, 37, 37, 0.9);
    border-radius: 5px;
    font-size: 15px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}
.main_section input.form-control,
.main_section select.form-control,
.main_section .form-control:focus,
textarea.form-control {
    color: #c8c8c8;
    padding: 12px 20px;
    height: auto;
    border: none;
}
.signup_section {
    width: 50%;
    padding: 4%;
    color: #636262;
    background-color: #1c1c1c;
}
.signup_section .udux_logo {
    width: 60px;
}
.signup_section .signup_hr {
    width: 70%;
}
.signup_section .registered_peragraph span {
    color: #ce8906;
}
.signup_section .signup_form label {
    display: none;
}
.register_success {
    color: #226a41;
}
.signin_form .form-group:before {
    content: "";
    position: absolute;
    z-index: 999;
    left: 15px;
    top: 12px;
    font-family: "Font Awesome 5 free";
    font-weight: 900;
}
.signin_form .form-group:nth-child(1):before {
    content: "\f0e0";
    font-weight: 400;
    font-size: 20px;
}
.signin_form .form-group:nth-child(2):before {
    font-size: 18px;
    content: "\f084";
    transform: rotateZ(315deg);
    -webkit-transform: rotateZ(315deg);
}
.main_section {
    background: #101010;
    overflow: hidden;
}
.main_section .track-inner {
    background: #1c1c1c;
    border-radius: 5px;
    padding: 40px;
}
.track-inner h3 {
    margin: 0 0 30px;
    font-weight: 500;
    font-size: 20px;
}
.track-content {
    padding: 0 0 0 40px;
}
.main_section p {
    color: #717171;
}
.main_section .form-group .col-form-label {
    color: #6f6f6d;
    font-size: 15px;
    margin: 0 0 22px;
    line-height: normal;
    display: block;
    padding: 0;
    font-weight: 500;
}
.main_section .form-group textarea.form-control {
    height: 177px;
    width: 94%;
    margin: 0 0 0 auto;
}
.main_section .form-group select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url(../image/select-arrow.png);
    position: relative;
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-size: 15px;
}
.react-datepicker-popper {
    z-index: 999;
}
/* table css */
.new-track-table .react-bs-container-body table.table {
    margin: 0 0 70px 0;
}
.new-track-table table.table {
    border: none;
    margin: 0;
    table-layout: fixed;
}
table.udux-table {
    color: #c8c8c8;
}
table.udux-table td,
table.udux-table th,
.new-track-table .table th,
.new-track-table .table td {
    border: none;
    padding: 15px 10px;
    vertical-align: middle;
    color: #ffffff;
    outline: none;
    font-weight: 300;
    font-size: 15px;
    word-break: break-word;
}
.tracks_table_section table.udux-table tbody tr,
.new-track-table .table tbody tr {
    border-bottom: 1px solid #212121;
}
.new-track-table .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
table.udux-table th,
.new-track-table .table th {
    font-weight: 400;
    color: #7e7e7e;
    text-transform: uppercase;
    border: none;
    font-size: 16px;
}
.track-table tr td:nth-child(1) a {
    display: block;
}
.track-table tr td:nth-child(1) a img {
    width: 50px;
    margin: 0 15px 0px 0;
    display: inline-block;
}
.track-table tr td:nth-child(1) a span {
    display: inline-block;
    width: calc(100% - 66px);
}
.tracks_table_section table.udux-table img {
    width: 50px;
    margin-right: 4%;
    display: inline-block;
    vertical-align: top;
}
.tracks_table_section table.udux-table img + a,
.tracks_table_section table.udux-table img + span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
}
.table-item-image {
    width: calc(100% - 77%);
}
.table-item-detail {
    width: calc(100% - 28%);
}
.table-item-detail p {
    color: #ffffff;
}
.tracks_table_section table.udux-table .table-item-image img {
    width: calc(450px - 250px);
    margin-right: 0;
}
.track-table tr td:nth-child(1),
.track-table tr th:nth-child(1) {
    width: 40% !important;
}
/* .album-page .track-table tr td:nth-child(1){width:auto!important;}
.album-page .track-table tr td:nth-child(2){width:30%!important;}
.album-page .track-table tr td:nth-child(3){width:20%!important;}
 */
.main-right-sec {
    padding: 30px 15px;
}
.main-right-sec .col p {
    margin: 10px 0 0 0;
}
.form-group .form-check input[type="checkbox"],
.form-group .form-radio input[type="radio"] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.form-group .form-check label,
.form-group .form-radio .form-radio-label {
    position: relative;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 0 0 0 35px;
    color: #ffffff;
}
.form-group .form-check label:before,
.form-group .form-radio .form-radio-label:before {
    content: "";
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    cursor: pointer;
    margin: 0px 5px 0 0;
    border: 2px solid #979797;
    border-radius: 5px;
    left: 0;
    top: -3px;
}
.form-group .form-check input[type="checkbox"]:checked + label:before {
    background: url("../image/yellow-check.png") no-repeat;
    border: none;
    background-size: 100%;
}
.form-group .form-radio .form-radio-label:before {
    border-radius: 50px;
}
.form-group .form-radio input[type="radio"]:checked + label:before {
    background: url("../image/radio-yellow-checked.png") no-repeat;
    border: none;
    background-size: 100%;
}
#form_group_tracks_warning .form-check {
    width: 100%;
}
.form-group .form-check {
    display: inline-block;
    width: 14.28%;
    margin: 0 0 30px 0;
    padding: 0;
}
.form-group .form-radio {
    margin: 0 0 30px 0;
    width: auto;
    display: inline-block;
    padding: 0 0 0 20px;
}
.form-group .react-tagsinput {
    padding: 10px 15px;
}
.form-group .react-tagsinput .react-tagsinput-input {
    margin: 0;
    line-height: normal;
    padding: 0;
}
span.react-tagsinput-tag {
    background: #ffb100;
    border-color: #ffb100;
    color: #000;
    font-size: 20px;
}
.react-tagsinput-remove {
    color: #000000;
}
.tracks_table_section .track-content #form_group_tracks_tags label {
    display: block;
    color: #c8c8c8;
}
.tracks_table_section .pagination-bottom ul,
.react-bs-table-pagination ul {
    justify-content: flex-end;
}
.tracks_table_section .page-item.active .page-link {
    color: #ff3366;
}
.tracks_table_section .pagination-bottom .page-link,
.react-bs-table-pagination ul .page-item .page-link {
    color: #6a6a6a;
    background-color: transparent;
    border: 1px solid transparent;
}
.tracks_table_section .pagination-bottom .page-link:hover,
.react-bs-table-pagination ul .page-item .page-link:hover {
    z-index: 2;
    color: #ff3366;
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
}
.tracks_table_section .pagination-bottom .page-link:focus,
.react-bs-table-pagination ul .page-item .page-link:focus {
    box-shadow: none;
    outline: none;
}
.react-bs-table-pagination .btn {
    background: #252525;
    border: none;
}
.react-bs-table-pagination .btn:focus,
.react-bs-table-pagination .btn:active:focus {
    box-shadow: none !important;
}
.basic_info,
.other-album-form {
    background: #1c1c1c;
    padding: 55px;
    border-radius: 5px;
}
.edit-ablum-right-sec h4 {
    font-weight: 400;
    font-size: 19px;
    margin: 0 0 35px 0;
    color: #ffffff;
}
.edit-ablum-right-sec img {
    width: 300px;
    padding: 0px 0 0 50px;
    margin: 0 0 15px;
}
.other-album-head {
    position: relative;
}
.other-album-head:after {
    content: "";
    position: absolute;
    top: 60px;
    border-bottom: 1px solid #2b2929;
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.other-album-form .form-group input,
.other-album-form .form-group select {
    width: 94%;
    margin: 0 0 0 auto;
}
.form-group.date-today-btn input.form-control {
    flex: 2;
    margin: 0 0 0 32px;
    background: #252525 url(../image/calendar.png) no-repeat;
    background-position: 95% 50%;
    background-size: 25px;
}
.form-group.date-today-btn button {
    flex: 1;
    margin: 0 0 0 25px;
}
.main_section .bottom-separator {
    border-bottom: 1px solid #2b2929;
    padding: 0 0 30px 0;
    margin: 0 0 30px;
}
.heading2 span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    margin: 5px 0 0 0;
    color: rgba(255, 255, 255, 0.47) !important;
}
.main_section select.form-control.all-artist {
    padding: 12px 15px 12px 50px;
    background-image: url(../image/circle.png);
    background-size: 40px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
}
.PlaylistTracksModal .modal-dialog {
    max-width: calc(100% - 10%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.PlaylistTracksModal .modal-dialog .modal-content {
    background: #101010;
    border-radius: 20px;
}
.PlaylistTracksModal .modal-dialog .modal-content .table-responsive {
    height: 500px;
    overflow: auto;
}
.PlaylistTracksModal .modal-dialog .modal-content .modal-header {
    padding: 0;
    border: none;
}
.PlaylistTracksModal .modal-dialog .modal-content .modal-body {
    padding: 50px;
}
.PlaylistTracksModal .modal-header .close {
    outline: none;
    padding: 0;
    margin: 0 25px 0 auto;
    font-size: 40px;
    color: #6f6f6f;
    text-shadow: none;
    opacity: 1;
    line-height: normal;
    font-weight: 400;
}
.popup-search {
    margin: 0 0 90px;
}
.popup-search .form-group {
    max-width: 650px;
    margin: 0 auto 35px;
}
.popup-search .form-group input.form-control {
    border-radius: 50px;
}
.popup-search p {
    color: #c8c8c8;
    max-width: 780px;
    text-align: center;
    margin: auto;
    font-size: 18px;
}

.playlist-details-content p,
.playlist-details-content span {
    display: inline-block;
    color: #c8c8c8;
    vertical-align: top;
    margin: 0 0 10px 0;
}
.playlist-details-content span {
    width: calc(100% - 75%);
}
.playlist-details-content p {
    width: calc(100% - 26%);
}
::-webkit-scrollbar {
    width: 10px;
    height: auto;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #080808;
    border-radius: 50px;
    border: 1px solid #262626;
}
/* Genres css */
#dropdownMenu2 {
    border: none;
    background: none;
    color: #c8c8c8;
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50px;
    padding: 0;
}
.dropdown.show #dropdownMenu2 {
    background: #272727;
}
.dropdown-menu.dropdown-primary.show {
    background: #252525;
    color: #ffffff;
}
.dropdown-item {
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 300;
}
.dropdown-item svg {
    font-size: 10px;
    margin: 0 15px 0 0;
}
.genres-table table.udux-table td:last-child,
.genres-table table.udux-table th:last-child {
    text-align: right;
}
/* dashboard css starts */
.top-head h1 .fa-bell {
    color: #cbcbcb;
    width: 16px;
    height: auto;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
}
.dashboard-main {
    padding: 0 0 0 30px;
}
.dashboard-user-sec {
    margin: 0 0 80px 0;
}
.dashboard-user-sec .col-lg-3:nth-child(1) .users-platform {
    background: #9a16ed;
}
.dashboard-user-sec .col-lg-3:nth-child(2) .users-platform {
    background: #2e77cc;
}
.dashboard-user-sec .col-lg-3:nth-child(3) .users-platform {
    background: #efae00;
}
.dashboard-user-sec .col-lg-3:nth-child(4) .users-platform {
    background: #ed1651;
}
.users-platform {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 35px 25px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 14rem;
}
.user-platform-content {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    text-align: right;
    padding-left: 15px;
}
.user-platform-content span {
    font-size: 16px;
    font-weight: 400;
    display: block;
}
.user-platform-content:after {
    content: "";
    border-bottom: 1px solid #ffff;
    width: 93px;
    padding: 5px 0 0 0;
}
.dashboard-content-sec {
    margin: 0 0 65px 0;
}
.dashboard-content-inner {
    background: #1c1c1c;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    padding: 38px 40px 30px;
    display: flex;
}
.dashboard-content-common {
    flex: 1;
    text-align: center;
}
.dashboard-content-title {
    font-size: 45px;
    line-height: 55px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.32);
}
.dashboard-content-title span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    line-height: normal;
}
.dashboard-content-common .link-text,
.authorization-inner-content .link-text,
.insight-inner-sec .link-text,
.revenue-table .link-text {
    font-size: 16px;
    color: #ffa700;
    text-transform: uppercase;
}
.dashboard-content-common:nth-child(2) .dashboard-content-title {
    border-left: 1px solid #333030;
    opacity: 7;
    border-right: 1px solid #333030;
}
.dashboard-performance-sec {
    margin: 0 0 45px 0;
}
.dash-performance-inner {
    background: #1c1c1c;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    padding: 30px 40px;
}
.dash-performance-inner rect {
    fill: transparent;
}
.dash-performance-inner g > text {
    fill: #767791;
}
.dash-performance-inner g > g > path {
    stroke: #887bff;
}
.dash-performance-inner g > g > g > g > path {
    fill: rgba(136, 123, 255);
}
.authorization-inner-sec {
    background: #1c1c1c;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    padding: 30px 40px;
}
.auth-common-sec {
    margin: 0 0 30px 0;
    display: flex;
}
.auth-common-sec .auth-access {
    font-size: 14px;
    flex: 3;
}
.auth-common-sec .auth-access .auth-user-email {
    font-size: 15px;
    line-height: normal;
}
.auth-common-sec .auth-access .auth-user-email span {
    color: #afafaf;
}
.auth-accept-decline {
    flex: 0.5;
    text-align: right;
}
.auth-accept-decline a {
    display: block;
    font-size: 16px;
    text-align: right;
}
.authorization-inner-content .link-text {
    padding: 0 0 0 20px;
}
.insight-inner-sec {
    background: #1c1c1c;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    padding: 30px 40px;
}
.insight-inner-title {
    margin: 0 0 25px 0;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
}
.insight-content td img {
    border-radius: 5px;
    margin: 0 15px 0 0;
    float: left;
    width: 50px;
}
.insight-content td span {
    float: left;
}
.insight-content td span label {
    display: block;
    font-size: 12px;
    margin: 5px 0 0 0;
}
.grey-bg {
    background: #1c1c1c;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
}
.dashboard-revenue-inner {
    padding: 30px 40px;
}
.revenue-head {
    display: flex;
    justify-content: space-evenly;
    width: 50%;
    margin: 0 0 55px 0;
}
.revenue-head .revenue-streams {
    border-right: 1px solid rgba(51, 48, 48, 0.77);
    padding: 0 100px 0 0;
    margin: 0 50px 0 0;
}
.revenue-head .revenue-streams,
.revenue-head .total-revenue {
    font-size: 40px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.32);
    flex: 1;
    padding: 0 0px 0 0px;
}
.revenue-head .revenue-streams span,
.revenue-head .total-revenue span {
    display: block;
    font-size: 15px;
    color: #ffffff;
    line-height: normal;
    font-weight: 400;
}
/** Dashboard CP **/
.dashboardcp-artist-sec {
    margin: 0 0 100px 0;
}
.artist-details-cp .grey-bg {
    box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.016);
}
.artist-details-cp {  display: flex;   flex-wrap: wrap;
}
.artist-detail-img {
    flex: 0 0 40%;
    padding: 0 30px 0 0;
}
.top-artist-details {
    flex: 0 0 60%;
}
.top-artist-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
    border-bottom: 1px solid rgba(51, 48, 48, 0.77);
    padding: 0px 0 15px 0;
}
.top-artist-name span,
.top-artist-tracks span,
.top-artist-connections span {
    display: block;
    font-weight: 400;
    color: #7c7c7c;
    font-size: 12px;
    line-height: normal;
}
.top-artist-tracks,
.top-artist-connections {
    font-weight: 700;
    font-size: 22px;
}
.artist-track-connections {
    display: flex;
    justify-content: space-around;
}
.addnew-artist-box,
.artist-details-cp a {
    width: 100%;
}
.addnew-artist-box .add-icon {
    width: 100px;
    height: 100px;
    background: #404040;
    border-radius: 50%;
    position: relative;
}
.addnew-artist-box .add-icon span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 90px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
    font-weight: 100;
}
.add-artist-text {
    color: #7c7c7c;
    font-size: 15px;
    font-weight: 500;
}
.content-performance-inner {
    height: 100%;
}
.content-performance-left {
    font-size: 45px;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 700;
    line-height: normal;
}
.content-performance-left span {
    display: block;
    font-size: 15px;
    line-height: normal;
    color: #ffff;
    font-weight: 400;
}
.revenue-chart .small-title {
    margin-top: -36px;
    font-size: 17px;
    line-height: normal;
}
.revenue-chart-mid {
    border-top: 1px solid #e8e9ec;
    border-bottom: 1px solid #e8e9ec;
    padding: 15px 0;
    text-align: center;
}
.revenue-chart-bottom {
    padding: 20px 0 0 0;
}
.revenue-chart-bottom .text-green {
    font-size: 28px;
    font-weight: 700;
}
.revenue-chart-bottom span {
    font-size: 13px;
}
/*** metrics track css ***/
.view-compare-track {
    padding: 70px 0px 90px;
}
.view-track-left {
    background: #151515;
    padding: 44px 22px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
    display: flex;
}
.view-track-img {
    margin: 0 50px 0 0;
}
.view-track-content .view-track-head {
    color: #d6d6d6;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
    position: relative;
    padding-left: 48px;
}
.view-track-inner .view-total-track {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
}
.view-track-inner .view-total-track span {
    color: #6f6f6f;
    font-weight: 400;
    display: inline-block;
    margin: 0 0 5px 16px;
}
.view-track-inner {
    margin: 0 0 20px 0;
}
.view-track-content .view-track-head:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 6px;
    background: #6ad9a6;
    border-radius: 10px;
    bottom: 0;
    margin: auto;
}
.view-track-content .link-text {
    color: #ffa700;
    font-size: 20px;
    line-height: normal;
    font-weight: 300;
}
.track-graph-data {
    background: #1c1c1c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    border-radius: 7px;
    padding: 50px;
    margin: 0 0 100px;
}
.listen-stream-sec {
    display: flex;
}
.listen-stream-sec p {
    margin: 0;
    flex: 0 0 15%;
    font-size: 17px;
    color: #bebebe;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}
.listen-stream-sec .graph_active:after {
    border-bottom: 5px solid #ffab26;
    content: "";
    position: absolute;
    bottom: -5px;
    left: -5px;
    top: auto;
    width: 113px;
}
.graph_active {
    color: #f7b010 !important;
    font-weight: bold;
}
.cursor-pointer {
    cursor: pointer;
}
.rbt.react-bootstrap-typeahead .dropdown-menu {
    background: #1c1c1c;
    padding: 0;
    margin: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.rbt.react-bootstrap-typeahead .dropdown-item {
    padding: 30px 25px;
}
.rbt.react-bootstrap-typeahead .dropdown-menu .dropdown-item:focus,
.rbt.react-bootstrap-typeahead .dropdown-menu .dropdown-item:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.1);
}
.listener-gender-sec {
    padding: 100px 0;
}
.listener-gender-sec h2 {
    margin: 0 0 150px;
}
.listener-gender-sec h2 span,
.world-listener-sec h2 span,
.listener-of-artist h2 span {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.47);
    font-weight: 400;
    display: block;
    text-transform: capitalize;
}
.listener-gender {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    background: #1c1c1c;
    padding: 18px 15px;
}
.listener-gender .title-20,
.listener-age .title-20 {
    text-transform: uppercase;
    color: #bcbcbc;
    font-size: 21px;
}
.listener-age {
    padding: 25px 30px;
    background: #1c1c1c;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
    border-radius: 7px;
}
.world-listener-sec {
    margin: 0 0 175px 0;
}
.world-country-table table thead th {
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}
.world-country-table table th,
.world-country-table table td {
    padding: 10px;
}
.listener-artist-common {
    margin: 0 0 30px 0;
}
.listener-artist-img {
    text-align: center;
}
.listener-artist-common span {
    display: block;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.47);
    text-align: center;
    padding: 17px 0 0 0;
}
.new-h1-head svg {
    font-size: 26px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0px 0 15px;
    width: auto !important;
}
.playlist-item-streams-title,
.playlist-item-streams-name {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #d6d6d6;
}
.playlist-item-streams-name {
    color: #ed1651;
    font-weight: 400;
}
.playlist-item-streams-right p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
}
.playlist-item-streams-right {
    padding: 0 0px 0 15px;
}
.playlist-item-streams {
    margin: 0 0 0 40px;
}
.audiance-playlist-head {
    background: #262626;
    padding: 15px 15px 15px 50px;
}
.audiance-playlist-head ul {
    display: flex;
    align-items: center;
}
.audiance-playlist-head ul li a {
    color: #7b7b7b;
    font-size: 17px;
    font-weight: 400;
}
.audiance-playlist-head ul li.active a {
    color: #f7b010;
}
.audiance-playlist-head ul li:after {
    content: "/";
    margin: 0 5px;
    color: #7b7b7b;
}
.audiance-playlist-head ul li:last-child:after {
    content: "";
}
.audience-item-streams {
    padding: 0 0 0 74px;
}
.audience-streams-right {
    padding: 0 0 0 15px;
}
.audience-streams-right .title-20 {
    font-weight: 700;
    color: #ea003f;
    margin: 0;
}
.audience-streams-right p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.47);
    margin: 0;
}
.male-female {
    display: flex;
    justify-content: space-evenly;
    background: #282828;
    padding: 12px;
    margin: 0 -15px -18px;
}
.male-female span {
    display: block;
    position: relative;
}
.male-female span:nth-child(n):after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c350bd;
    left: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.male-female span:nth-child(2):after {
    background: #f89d3c;
}
.filter-metric-artist-left {
    padding: 0 53px 0 0;
    font-size: 14px;
}
.filter-metric-artist-left img {
    margin-right: 25px;
}
.filter-metric-artist-outer {
    padding: 50px 0 50px;
}
.filter-metric-artist {
    margin: 0 0 50px 0;
}
.cummulative-metric {
    font-size: 18px;
    color: #ffa700;
    font-weight: 500;
    font-style: italic;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.source-stream-content {
    margin: 90px 0 0 0;
    background: #1c1c1c;
    padding: 55px 80px;
    border-radius: 7px;
}
.source-stream-inner {
    padding: 35px 0 20px;
    border-bottom: 1px solid #303030;
}
.source-stream-left .title-20 {
    margin: 0 0 10px 0;
    color: #ffa700;
}
.source-stream-right {
    width: 165px;
    text-align: right;
    color: #ffa700;
}
.source-stream-right span {
    margin: 0 0 24px 0;
    display: block;
}
.progress-bar {
    background: #ffa700;
}
.progress {
    background: #2c2c2e;
    border-radius: 50px;
    height: 10px;
}
.view-artist-main .addnew-artist-box .add-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.view-artist-main .addnew-artist-box .add-icon span {
    font-size: 40px;
}
.view-artist-main .add-artist-text {
    margin: 0 0 0 40px;
    border-bottom: 1px solid rgba(51, 48, 48, 0.77);
}
.artists_list_table tr td:nth-child(1),
.artists_list_table tr th:nth-child(1) {
    width: 18% !important;
}
.image_click_upload img {
    cursor: pointer;
}
.image_click_upload input {
    display: none;
}
.artist-image-title,
.artist-data-title,
.artist-link-title ,.artist-contract-agreements-title{
    font-size: 27px;
    font-weight: 700;
}
.artist_image.image_click_upload {
    margin: 0 0 50px 0;
}
.artist_image.image_click_upload p {
    padding: 0 0 0 70px;
    margin: 0;
}
.artist_poster.image_click_upload img {
    cursor: pointer;
}
.artist_image_img {
    border: 2px solid rgba(100, 100, 100, 0.28);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    position: relative;
}
.artist_image_img img {
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.artist_poster_img {
    width: 100%;
    border: 2px solid rgba(100, 100, 100, 0.28);
    border-radius: 6px;
    text-align: center;
    padding: 25px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.artist_poster {
    margin: 0 0 43px 0;
}
.artist_poster p {
    margin: 0;
}
.back-next-sec {
    margin: 0 0 15px 0;
}
.track-inner.add-artist-page input.form-control {
    border: 0.5px solid #646464;
    border-radius: 5px;
    font-size: 20px;
    padding: 15px 33px;
    background: rgba(186, 186, 186, 0.06);
}
.artist-already-exist-content {
    font-size: 14px;
    font-weight: 300;
    color: #898989;
    margin: 0 0 57px;
}
.merger-back-btn-sec .btn-udux-grey {
    background: #898989;
    color: #f6f6f6;
}
.artist-data-page .form-group .react-tagsinput {
    padding: 12px 15px;
}
.artist-data-page .form-group .react-tagsinput .react-tagsinput-input {
    margin: 0;
    line-height: normal;
    padding: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    background: #252525;
    font-size: 15px;
}
.add_new_entry button.btn {
    padding: 0;
    border: 0;
    margin: 0 0 46px 0;
}

.artist_detail_content {
    padding: 0 30px 0 10px;
    position: relative;
}
.artist-link-social,
.artist-award-below-content {
    margin: 0 0 75px 0;
    font-size: 14px;
    font-weight: 300;
}
.artists-awards-sec .card {
    border: none;
    background: transparent;
    margin: 0 0 45px 0;
}

.artists-awards-sec .card-header {
    background: #292828;
    border: none;
    padding: 0;
    border-radius: 6px 6px 0 0;
    padding: 10px 20px;
}
.artists-awards-sec h2 {
    display: inline-block;
    line-height: normal;
    font-size: 0;
}
.artists-awards-sec h2 .btn-link {
    color: #f6f6f6;
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    line-height: normal;
    border: none;
}
.artists-awards-sec .card-body {
    background: #151515;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 33px 23px;
}
.remove {
    cursor: pointer;
}
.artist-contract-common-content {
    display: flex;align-items: center;
}
.artist-contract-common-content a {
    font-size: 15px;
    font-weight: 500;
}
.artist-contract-common-content a .svg-inline--fa.fa-w-12 {
    width: auto;
    font-size: 20px;vertical-align: middle;
    margin: 0 15px 0 0;
}
.artist-contract-common-content input[type="file"] {
    display: inline-block;
    width: 40%;
    padding: 0 0 0 15px;
}
.recommeded-pdf-jpg {
    color: #616563;
    font-size: 10px;
}
/* Manage Artist */
.banner_image {
    /* background: url(../image/yemi-alade-banner.jpg); */
    height: 295px;
    width: 100%;
    background-size: cover;
    background-position: 75% 50%;    position: relative;
}
.artist_description {
    padding: 16px;
    background: #1c1c1c;
    border: 1px solid #7e7e7e;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
}
.artist_description p{
    color: #ffffff
}

#tab_about_artist {  padding: 0 0 0 30px;}
.artist_detail .nav {
    padding: 37px 0 50px 0;
}

.artist_detail .nav li .nav-link {
    font-size: 20px;
    color: rgba(255,255,255,0.40);
    font-weight: 500;
    line-height: normal;
    margin: 0 17px;
    position: relative;
    padding: 0;
}

.artist_detail .nav li .nav-link.active {
    color: #Ffffff;
    background: transparent;
    border-bottom: 5px solid #ED1651;
    border-radius: 0;
  }
  .artist_detail .nav li:first-child .nav-link {
    margin-left: 0;
}
.artist_bio_title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 23px 0;
}


.artist_bio_title .icon-Cirle {
    font-size: 45px;
    vertical-align: middle;
    margin-right: 14px;
    display: inline-block;
}
.cursor_pointer{
    cursor: pointer;
}
.icon-Edit {  font-size: 28px;display: inline-block; vertical-align: middle;}
.icon-track { font-size: 41px; display: inline-block; vertical-align: -5px;}
.icon-Awards-Accolades {font-size: 40px;vertical-align: middle; margin-right: 14px;display: inline-block; line-height: normal;}
.icon-Links_socials {font-size: 45px; line-height: normal;vertical-align: middle; display: inline-block; margin: 0 10px 0 0;}
.icon-album{ font-size: 48px; line-height: normal; vertical-align: middle; display: inline-block; margin: 0 10px 0 0;}
.icon-tape{ font-size: 41px; line-height: normal; vertical-align: middle; display: inline-block; margin: 0 10px 0 0;}
.icon-video{ font-size: 25px; line-height: normal; vertical-align: middle; display: inline-block; margin: 0 10px 0 0;}
.banner-artist-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;position: relative;
}
.banner-artist-sec {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 86px;
}
.banner-artist-info {
    margin-left: 80px;
}

.banner-artist-name {
    font-size: 24px;
    font-weight: 300;
    margin: 0 0 10px 0;
    line-height: normal;
}

.banner-artist-name img {
    margin: 0 0 0 10px;
}

.banner-artist-designation {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 20px 0;
}
.banner-artist-info .btn {
    background: rgba(78,50,65,0.84);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
    min-width: 145px;
    font-size: 12px;
    padding: 12px 20px 12px 10px;
}
.banner-artist-info .btn .icon-pencil {
    font-size: 15px;
    vertical-align: middle;
    margin-right: 14px;
}
.banner-artist-info .btn:hover {
    color: #000000;
    background: #ffffff;
}
.change-artist-banner {
    position: absolute;
    bottom: 24px;
    right: 92px;
    text-align: center;
    width: 78px;
}

.change-artist-banner span {
    display: block;
    font-size: 12px;
    color: rgba(252,252,252,0.44);
    line-height: normal;
}
.artist_gallery_description {
    width: 100%;
    height: 419px;
    border: 0.5px solid rgba( 242,242,242,0.41);
    border-radius: 5px;
    padding: 60px;
}

.artist_gallery_text {
    color: rgba(255,255,255,0.46);
    font-size: 22px;
    margin: 0 88px 0 0;
}

.add_box {
    position: relative;
    background: #1c1c1c;
    border-radius: 5px;
    padding: 25px;
    color: #7C7C7C;
    text-align: center;
}

.add_box_sign { width: 100px; height: 100px; background: #404040; border-radius: 50%; text-align: center; margin: 0 auto 15px;font-size: 80px;   font-weight: 300;}

.add_box_text { border-top: 1px solid #333030; padding: 15px 0 0 0;font-size: 17px; line-height: normal;}
                                
.artist_social_links ,.awards_accolades_filled_content { background: #151515; border-radius: 0 0 6px 6px;box-shadow: 0 0 2px 0 rgba(0,0,0,0.16);    padding: 32px;}

.artist_social_content {display: flex; margin: 0px 0 25px 0;align-items: center;}

.artist_social_name {font-size: 18px;line-height: normal;font-weight: 600; margin: 0 60px 0 0;    flex: 1;}
.artist_social_website { flex: 3;}

.artist_social_website a {color: rgba(255,255,255,0.65);    display: block; white-space: normal; word-break: break-all;}
.awards_accolades_headline { font-size: 18px; font-weight: 600; color: #BCBCBC; margin: 0 0 10px 0;}

.awards_category_content { color: #BCBCBC; font-size: 18px; font-weight: 300;}
.awards_year { color: rgba(255,255,255,0.46); font-size: 18px;}
.awards_accolades_common { margin: 0 0 30px;}
.awards_accolades_common:last-child {  margin: 0;}
.artist_gallery_title ,.artist_manage_title{font-size: 30px;line-height: normal; margin: 0 0 36px;position: relative;    padding: 0 0 10px 0;}
.artist_gallery_title span,.artist_manage_title span { color: #898989; display: block; font-size: 14px;}

.artist_gallery_title:after,.artist_manage_title:after {content: "";width: 70%;position: absolute;bottom: 0px;height: 1px;background: rgba(51,48,48,0.77);}

.artist_gallery_image_sec {
    background: #151515;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.16);
    padding: 50px;
}
.artist_gallery_image_sec ul li {
    width: 200px;
    height: 200px;
    margin: 0 25px 0 0;
}
.manage_artist_detail, .artist_manage_account_setting {
    background: #1c1c1c;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.16);
}
.manage_artist_detail table {
    width: 100%;
}
.manage_artist_detail table td {
    font-size: 15px;
    text-transform: capitalize;padding: 0 0 15px 0;
}

.manage_artist_detail table td:last-child {  text-align: right;}

.manage_artist_detail table td:last-child a {background: #019CCB; color: #ffffff;border-radius: 30px; min-width: 75px; padding: 4px;    font-size: 15px;  font-weight: 300;  line-height: normal;}
.account_setting_left { font-size: 14px;  color: #898989;}

.switch {position: relative;}

.switch input[type="checkbox"] {opacity: 0;width: 0;height: 0;}
.switch label {
    position: relative;
    cursor: pointer;
    background-color: rgba(255,255,255,0.50);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 30px;
    margin: 0;
    width: 34px;
    height: 17px;
}
.switch label:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 0;
    bottom: 0px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50px;
    box-shadow: -3px 0 6px 0 rgba(0,0,0,0.16);
}

.switch input[type="checkbox"]:checked + label {
    background: rgba(237,22,81,0.5);
}

.switch input[type="checkbox"]:checked + label:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
    background: #ED1651;
   
}
#tab_overview .artist_bio_title {  margin: 0 0 30px;}
.track-name { color: #d6d6d6; font-size: 19px; line-height: normal; margin: 5px 0 0 0;}

.track-name span { display: block; font-size: 13px;}
.top-performing-tracks ,.latest-release-tracks,.albums-tracks{   margin: 0 0 43px 0;}
.common-track-sec ul li { width: 200px; margin: 0 0px 0 50px;}

.common-track-sec ul li:first-child {  margin: 0;}
.common-track-sec ul li img { border-radius: 5px;}
 input.upload {
    position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0);   height: 100%;    text-align: center;    left: 0;  bottom: 0;width: 100%;   cursor: pointer;}

.mediaupload-content-sec {     border-bottom: 1px solid #212121;    margin: 0 0 83px 0;    }
.mediaupload-content-sec .addnew-artist-box .add-icon {
    width: 70px;
    height: 70px;
    margin: 0 20px 0 0;
}
.mediaupload-content-sec .addnew-artist-box .add-icon span {
    color: #CCCBCB;
    font-size: 60px;
    line-height: 30px;
}
.add-artist-text{border-bottom: 1px solid #333030;}

.media-album-playlist{margin: 0 0 131px 0;}
.media-all-common {  background: #1c1c1c; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);  border-radius: 7px;}
.media-all-inner { padding: 30px 25px 35px;}
.media-all-icon { background: #403D39;padding: 30px;width: 130px; height: 130px; display: flex;    flex-wrap: wrap;align-items: center; margin: 0 40px 0 0;}

.media-all-icon .icon-album { margin: 0;}
.media-all-details .title-20 { margin: 0 0 7px 0; font-weight: 700;}
.media-all-details .media-all-artist { font-size: 15px; color: rgba(255,255,255,0.47); margin: 0 0 5px 0; line-height: 19px;}

.media-all-tracks { font-size: 14px; line-height: 18px;}
.detail-icon-sec {      display: flex;   }
.media-all-pending { margin: 24px 0 0 0;}
.pending-btn {background: #4CCCF2;padding: 5px 20px 5px 10px;font-size: 12px; color: #1C1C1C; text-transform: uppercase; margin: 0 0 15px 0;}
.media-all-active {  font-size: 12px; color: #7E7E7E;   text-align: right;  padding-right: 10px; text-transform: uppercase;}
.media-view a { padding: 23px 25px; background: #25262B; border-radius: 0 0 7px 7px; display: flex; justify-content: space-between;    font-size: 12px;}
.media-recent-added-title{font-size: 29px;font-weight: 700;line-height: 35px; margin:0 0 50px 0;}
.media-album-video-playlist {
    padding: 0 0 0 45px;margin: 0 0 131px 0;
}
.media-album-video-playlist .media-all-icon {
    background: #25262B;
    padding: 30px 25px;
    width: 130px;
    height: 130px;
    display: block;
    align-items: center;
    margin: 0 20px 0 0;
    font-size: 43px;
    font-weight: 700;
}
.media-album-video-playlist .media-all-icon span {
    display: block;
    text-align: right;
    font-size: 25px;
    margin: 0 -5px 0 0;
}


.media-album-video-playlist .media-view a {
    padding: 10px 30px;
    background: #25262B;
    border-radius: 0 0 7px 7px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    align-items: center;
}
.media-album-video-playlist .add-icon {
    height: 40px;
    width: 40px;
}

.media-album-video-playlist .add-icon span {
    font-size: 40px;
    line-height: 20px;
}



.media-album-video-playlist .add-artist-text {
    border-bottom: 0;
    font-size: 12px;
    color: #898989;
}

.react-bs-table-pagination ul {
    padding: 0;
}
.react-bs-table-pagination .dropdown-item {
    padding: 0;
}

.react-bs-table-pagination .dropdown-item a {
    padding: 10px 20px;
    display: block;
    background: #252525;
}


.react-bs-table-pagination .dropdown-item a:hover {
    background: #eee;
    color: #252525;
}
/* 07-01-2021 */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
.artists-overview-slider .slick-slide {
    padding: 10px;
}
.artists-overview-slider .slick-slide img {
    height: 250px;
}
.container-playlists, .container-singles {
    width: 75%;
    float: left;
    margin-right: 30px;
}
.playlist-tracks.common-track-sec {
    clear: both;
    padding-top: 35px;
}

/*** Playlist Order Tracks ***/
.reorder_trackslist_modal .modal-dialog {
    max-width: calc(100% - 40%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.reorder_trackslist_modal .modal-dialog .modal-content {
    background: #101010;
    border-radius: 20px;
}
.reorder_trackslist_modal .modal-dialog .modal-content .table-responsive {
    height: 500px;
    overflow: auto;
}
.reorder_trackslist_modal .modal-dialog .modal-content .modal-header {
    padding: 0;
    border: none;
}
.reorder_trackslist_modal .modal-dialog .modal-content .modal-body {
    padding: 50px;
}
.reorder_trackslist_modal .modal-header .close {
    outline: none;
    padding: 0;
    margin: 0 25px 0 auto;
    font-size: 40px;
    color: #6f6f6f;
    text-shadow: none;
    opacity: 1;
    line-height: normal;
    font-weight: 400;
}
.reorder_trackslist_modal .trackslist_droppable {
    height: 340px;
    overflow-y: auto;
    margin: 0 0 40px;
}
.reorder_trackslist_modal .trackslist_item {
    display: flex;
    margin: 0 0 15px;
}
.reorder_trackslist_modal .trackslist_img {
    margin: 0 0 10px 0;
    flex: 2;
}
.reorder_trackslist_modal .trackslist_content {
    flex: 1;
}
.reorder_trackslist_modal .trackslist_img img {
    width: 50px;
}
.reorder_trackslist_modal .trackslist_img span {
    margin: 0 0 0 10px;
}
.reorder_trackslist_modal .trackslist_item p {
    flex: 1;
}
/*** Cp dashboard Css ***/
.addplaylist_loader .udux_loader {
position: unset;
}

.cp-artists-overview-slider .slick-slide img {
height: 100px;
border-radius: 50%;
width: 100px;
}
.cp-artists-overview-slider .artist-track-connections {

flex-wrap: wrap;
}
.cp-artists-overview-slider .artist-track-connections  .top-artist-tracks{    word-break: break-all;
flex: 0 0 50%;}
.cp-artists-overview-slider .artist-details-cp   .artist-detail-img{    padding: 0 0 15px 0;}

/*** metrics track Css ***/

img.related-artists {
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

/*** tables ***/
.table-dark{
 background-color: transparent !important;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
}
.grid.artists, .grid.albums{
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    grid-gap: 0.2rem;
}
.grid > div {
    background: black;
    padding: 1rem;
    position: relative;
  }
.grid > div::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.grid > div img {
    position: absolute;
    max-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}