@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');
    * {
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Poppins', sans-serif;
    }
    
     :root {
        --mainColor: #2593F7;
        --borderColor: #D9D9D9;
        --grayColor: #D9D9D9;
        --activeColor: #E8F4FF;
        --shadowColor: #0000000A;
        --grayText: #888888;
        --activeRow: #EFF2F7;
        --black: #000000;
        --red: #F46A6A;
        --subTitleColor: #43425D;
        /* ---------- */
    }
    
    a {
        text-decoration: none;
    }
    
    th {
        font-weight: normal !important;
    }
    
    .black-link {
        color: black;
        text-decoration: none;
    }
    
    .blue-link {
        color: var(--mainColor);
        text-decoration: none;
    }
    
    .page-title {
        font-size: 24px;
        font-weight: bold;
        color: #2E3271;
    }
    
    .username {
        color: #2E3271;
        font-family: 'Manrope';
        font-weight: 600;
    }
    
    .nav-item img:nth-child(1) {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }
    
    .user-type {
        font-size: 12px;
        color: rgba(124, 141, 181, 0.72);
        font-family: 'Manrope';
    }
    
    .i-icon {
        margin-inline: 5px;
    }
    
    .nav-item img:nth-child(1),
    .logo-container>img {
        margin-right: 15px;
    }
    
    .logo-container img {
        border-radius: 50%;
    }
    
    .nav-item img:nth-child(3) {
        margin-left: 15px;
    }
    
    .logo-container {
        padding: 40px 22px;
        /* color: #2E3271; */
        color: #F2CB99;
        font-size: 18px;
        font-weight: bold;
    }
    
    .list-group {
        margin-bottom: 80px;
    }
    
    .list-title {
        font-size: 15px;
        color: rgba(124, 141, 181, 0.72);
        margin-bottom: 10px;
        display: inline-block;
        padding: 0 22px;
    }
    
    .category-container {
        width: 80%;
        margin-bottom: 50px;
    }
    
    .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    
    .category-header>a {
        display: flex;
        align-items: center;
    }
    
    .category-header>a>img {
        margin-left: 5px;
    }
    
    .category-header .title {
        color: #000000;
        font-size: 20px;
    }
    
    .category-header .view-all-btn {
        color: #000000;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
    }
    
    #content-creators .category-body {
        display: flex;
        align-items: center;
        text-align: center;
    }
    
    #content-creators .category-body .catgory-item {
        margin-bottom: 15px;
    }
    
    #content-creators .category-body img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 10px;
        border: 1px solid #ddd;
    }
    
    #content-creators .category-body span {
        color: #444444;
        font-size: 14px;
    }
    
    .more-btn {
        display: flex;
    }
    
    #latest-tracks .category-body {
        width: 100%;
    }
    
    #genres .category-body {
        width: 50%;
    }
    
    #latest-tracks .catgory-item {
        margin-bottom: 15px;
    }
    
    #latest-tracks .catgory-item-name {
        color: #444444;
        font-size: 14px;
    }
    
    #latest-tracks .catgory-item img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
    }
    
    #genres .catgory-item {
        margin-bottom: 15px;
    }
    
    #genres .catgory-item img {
        width: 120px;
        height: 80px;
        object-fit: cover;
    }
    
    #popular-series .catgory-item img {
        width: 100%;
        height: 135px;
        object-fit: cover;
        margin-bottom: 10px;
    }
    
    #popular-series .row::-webkit-scrollbar {
        display: none !important;
    }
    
    #popular-series .catgory-item a {
        width: 100%;
    }
    
    #popular-series p {
        font-size: 14px;
        color: #000000;
        margin-bottom: 0;
    }
    
    #popular-series .catgory-item span {
        font-size: 12px;
        color: #9C9C9C;
    }
    
    .more-btn span {
        display: inline-block;
        width: 7px;
        height: 7px;
        background-color: #333;
        margin-left: 5px;
        border-radius: 50%;
    }
    
    #search-page .category-container {
        width: 50%;
    }
    
    #search-page .category-body {
        width: 100%;
    }
    
    #search-page .category-header .title,
    #search-page .category-header .view-all-btn {
        color: #9C9C9C;
    }
    
    #content-creators-page .catgory-item img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 15px;
        object-fit: cover;
    }
    
    #genres-page .catgory-item img {
        width: 220px;
        height: 175px;
        margin-bottom: 15px;
        object-fit: cover;
        border-radius: 0;
    }
    
    #content-creators-page .catgory-item a {
        color: #444444;
    }
    
    .catgory-item a {
        color: #444444;
    }
    
    #content-creators-page .catgory-item {
        text-align: center;
    }
    
    #albums-page .catgory-item {
        margin-bottom: 15px;
    }
    
    #albums-page .catgory-item img {
        height: 175px;
    }
    
    .library-categories img {
        width: 15px !important;
        height: 15px !important;
    }
    
    .search-container {
        position: relative;
    }
    
    .search-container .placholder-input {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #9C9C9C;
    }
    
    .search-container input {
        background-color: #F5F5F5;
        padding: 10px;
        width: 100%;
        border-radius: 5px;
        border: 0;
        margin-bottom: 40px;
    }
    
    .left-cover {
        box-shadow: 8px 8px 24px #00000014;
    }
    
    .cover-img-container {
        height: 100vh;
    }
    
    .cover-img-container img {
        object-fit: cover;
        height: 100%;
    }
    /* .content-container {
	padding: 70px;
	min-height: 100vh;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
} */
    
    .lg-padding {
        padding: 140px;
    }
    
    .login-page-padding {
        padding: 70px 140px;
    }
    
    .content-container .header {
        margin-bottom: 15px;
    }
    
    .content-container .header .page-title {
        font-size: 30px;
    }
    
    .content-container .header .page-title a.logo {
        width: fit-content;
    }
    
    .content-container .body .tab-title {
        font-size: 24px;
        margin-bottom: 25px;
    }
    
    .content-container .body .tab-title .sub-title {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .content-container .body .tab-title .sub-title .text {
        color: #7F7F7F;
        font-size: 12px;
        font-weight: 100;
    }
    
    .content-container .body .tab-title .sub-title .tab-num {
        color: var(--mainColor);
    }
    
    .content-container .body .tab-title img {
        cursor: pointer;
    }
    
    .content-container .body form {
        margin-top: 15px;
    }
    
    .form-label {
        margin-bottom: 15px;
    }
    
    label {
        display: inline-block;
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .content-container .body .footer-input-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* .submit-btn {
	background-color: var(--mainColor);
	color: white;
	padding: 12px 12px;
	font-size: 16px;
	margin-bottom: 30px;
	box-shadow: 4px 4px 20px #00000029;
} */
    
    .content-container .body .main-input {
        padding: 12px 12px;
        border: 1px solid var(--borderColor);
    }
    
    .footer-input-group {
        margin-top: 7px;
    }
    
    .form-footer {
        margin-top: 15px;
    }
    
    .upload-logo-input {
        width: 100%;
        height: 48px;
        border: 1px solid var(--borderColor);
        border-radius: 5px;
        color: var(--grayText);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        cursor: pointer;
    }
    
    .ri-upload-2-fill {
        font-size: 24px;
    }
    
    .sign-up-container a {
        margin-top: 40px;
    }
    
    .sign-up-container a {
        padding: 12px 0px;
        width: 147px;
        font-size: 16px;
        border: 1px solid var(--mainColor);
        color: var(--mainColor);
    }
    
    .sign-up-container a:hover {
        border: 1px solid var(--mainColor);
        background-color: var(--mainColor);
        color: white;
    }
    /* select {
        background-image: url("../image/select-arrow.svg");
        background-repeat: no-repeat;
        background-position-x: calc(100% - 10px);
        background-position-y: 50%;
    } */
    
    label[for='uploadimg'] {
        display: block !important;
        width: 100px;
        height: 100px;
        border: 1px dotted #556EE6;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
    }
    
    label[for='uploadimg'] img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .relative {
        position: relative;
    }
    
    .inner-input,
    .inner-left-input {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: default;
        background-color: white;
        z-index: 5;
        padding-left: 10px;
        color: var(--black);
    }
    
    .connect-inner-text {
        color: #7F7F7F;
    }
    
    .inner-left-input {
        left: 10px;
        width: 40px;
    }
    
    .google-search-input {
        padding: 11px 60px !important;
    }
    
    .validate input {
        border: 1px solid var(--red) !important;
        color: var(--red) !important;
    }
    
    .validate input:focus {
        box-shadow: 0 0 0 0.1rem #f46a6a70;
    }
    
    .validate-msg {
        margin-top: 7px;
        color: var(--red);
        display: none;
    }
    
    .validate .validate-msg {
        display: block;
    }
    
    .select2-container--default {
        width: 100% !important;
    }
    
    .select2-container--default .select2-selection--multiple {
        border: 1px solid var(--borderColor) !important;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #f4f9ff !important;
        border: 1px solid #020202 !important;
        color: #020202;
        padding-left: 0 !important;
        padding-right: 20px !important;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        border: 0 !important;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        left: unset !important;
        color: black !important;
        right: 0;
    }
    
    .select2-container--default .select2-search--inline .select2-search__field {
        height: 50px !important;
        padding: 12px 12px !important;
    }
    
    .select2-container .select2-selection--multiple .select2-selection__rendered {
        margin: 0 !important;
        position: absolute;
        top: calc(100% + 2px);
    }
    
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        display: flex !important;
        align-items: center !important;
    }
    
    .step {
        display: none;
    }
    /* Start Dashboard */
    
    #dashboard .main-container .main-content {
        display: flex;
        /* font-family: 'Outfit', sans-serif; */
    }
    
    #dashboard .main-container .main-content .center-container {
        flex-grow: 1;
        background-color: #ffff;
        /* height: 100vh; */
        margin-left: 250px;
    }
    
    #dashboard .main-container .main-content .left-container {
        width: 250px;
        height: 100vh;
        overflow: auto;
        background-color: white;
        /* padding: 15px; */
        transition: 0.5s;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        border-right: 3px solid #ff994564;
    }
    
     ::-webkit-scrollbar {
        width: 8px;
    }
    
     ::-webkit-scrollbar-thumb {
        background-color: var(--grayColor);
        border-radius: 5px;
    }
    
    .left-container::-webkit-scrollbar {
        width: 0;
    }
    
    .left-container::-webkit-scrollbar-thumb {
        background-color: #FF9A45;
    }
    
    .menue-title {
        color: var(--grayColor) !important;
        font-size: 12px;
    }
    
    #dashboard .main-container .main-content .left-container a.logo {
        width: 100%;
        display: inline-block;
        text-align: center !important;
        padding: 20px 28px;
        background-color: #FAFAFA;
    }
    
    #dashboard .main-container .main-content .left-container a.logo img {
        width: 100%;
    }
    
    #dashboard .main-container .main-content .left-container .list-container {
        margin-top: 10px;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item {
        height: 57px;
        border-radius: 5px;
        padding: 0 22px;
        text-decoration: none;
        margin-bottom: 2px;
        color: black;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item .text {
        font-size: 15px;
        color: #2E3271;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .top-header {
        padding: 0 15px;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .top-header input,
    #dashboard .main-container .main-content .left-container .list-container .top-header select {
        padding: 7px 10px;
        border-radius: 10px;
    }
    /* #dashboard .main-container .main-content .left-container .list-container select {

} */
    
    #dashboard .main-container .main-content .left-container .list-container .list-item:hover img {
        /* filter: invert(125%) sepia(111%) saturate(3078%) hue-rotate(199deg) brightness(95%) contrast(201%) !important; */
        filter: invert(85%) sepia(26%) saturate(7497%) hue-rotate(328deg) brightness(101%) contrast(103%) !important;
    }
    
    .active-list-item {
        background: linear-gradient(225deg, #FF7E3A 0%, #FF9A45 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item:hover {
        background: linear-gradient(225deg, #FF7E3A 0%, #FF9A45 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item img {
        /* filter: invert(85%) sepia(26%) saturate(7497%) hue-rotate(328deg) brightness(101%) contrast(103%); */
        filter: invert(36%) sepia(19%) saturate(3078%) hue-rotate(219deg) brightness(28%) contrast(83%);
    }
    
    .active-list-item img {
        /* filter: invert(85%) sepia(26%) saturate(7497%) hue-rotate(328deg) brightness(101%) contrast(103%) */
        filter: invert(85%) sepia(26%) saturate(7497%) hue-rotate(328deg) brightness(101%) contrast(103%) !important;
        /* filter: invert(125%) sepia(111%) saturate(3078%) hue-rotate(199deg) brightness(95%) contrast(201%) !important; */
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item:hover {
        background-color: var(--activeColor);
    }
    
    #dashboard .main-container .main-content .left-container .list-container .list-item .icon {
        margin-right: 10px;
    }
    
    #dashboard .main-container .main-content .center-container .custome-navbar {
        padding: 40px 22px;
        background-color: white;
        /* box-shadow: var(--shadowColor) 0px 2px 6px; */
    }
    
    .notification {
        width: 40px;
        height: 40px;
        background: var(--activeColor);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-item {
        margin-right: 5px;
        margin-left: 5px;
    }
    
    .list-btn {
        cursor: pointer;
    }
    
    .show-sidebar {
        height: fit-content !important;
    }
    
    .page-content {
        padding: 20px 20px;
        /* new */
        /* margin-bottom: 0px;  */
        min-height: 100vh;
        position: relative;
    }
    
    .page-content .header {
        margin-bottom: 15px;
    }
    
    .page-content .header .main-title {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .page-content .header .sub-title {
        font-size: 14px;
        color: var(--subTitleColor);
    }
    
    .page-content .header .main-title>span {
        margin-left: 10px;
    }
    
    .page-content .body .card-container {
        margin-bottom: 15px;
    }
    
    .page-content .body .card-container .card-content {
        background-color: white;
        /* padding: 25px 0px; */
        border-radius: 8px;
    }
    
    .page-content .body .card-container .card-content .details {
        margin-left: 20px;
    }
    
    .page-content .body .card-container .card-content .details .title {
        margin-bottom: 4px;
        font-weight: 500;
    }
    
    .page-content .body .card-container .card-content .details .count {
        font-size: 24px;
        font-weight: 500;
        color: var(--mainColor);
    }
    
    .custom-row {
        margin-bottom: 15px;
    }
    
    .custome-table {
        width: 100%;
    }
    
    .custome-table td,
    .custome-table td,
    .custome-table th {
        text-align: left;
        padding: 10px 10px;
    }
    
    .custome-table th:last-of-type,
    .custome-table td:last-of-type {
        /* text-align: right; */
        /* padding: 0 50px; */
    }
    
    .custome-table thead {
        /* color: var(--subTitleColor); */
        color: #76768B;
    }
    
    .custome-table tr {
        height: 57px;
    }
    
    .custome-table tbody tr {
        position: relative;
    }
    
    .custome-table tbody tr::after {
        content: ' ';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #FAFAFA;
    }
    
    .custome-table tbody tr:hover {
        outline: 1px solid var(--mainColor);
    }
    
    .custome-table tbody tr:hover::after {
        height: 0px;
    }
    
    .active-row {
        background-color: var(--activeRow)
    }
    
    th,
    td {
        /* text-align: center; */
    }
    
    .page-footer {
        background-color: #EEF0F2;
        padding: 15px 15px;
        color: #A4AFB7;
        font-size: 14px;
        margin-left: 250px;
        margin-top: 30px;
    }
    
    .sign-up-steps {
        margin: 30px 0px;
        font-size: 14px;
    }
    
    .arrowBg {
        color: var(--black);
        font-weight: 500;
        /* filter: drop-shadow(0px 0px 1px var(--mainColor)); */
        filter: drop-shadow(0px 0px 2px #E9E9F0);
        display: inline-block;
        width: 100%;
        flex-grow: 1;
    }
    
    .arrow {
        background-color: #ffff;
    }
    
    .user-card .arrow {
        font-size: 25px;
        margin-left: 15px;
    }
    
    .user-card .menue-container .menue {
        left: unset;
        right: 0 !important;
        top: calc(100% + 12px) !important;
        min-width: 180px;
    }
    
    .user-card .menue-container .menue a {
        padding: 10px 20px;
    }
    
    .arrowRight {
        padding: 20px 40px;
        clip-path: polygon(75% 0%, 90% 50%, 75% 100%, 0% 100%, 10% 50%, 0% 0%);
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    
    .custome-arrowRight {
        padding: 25px 40px;
    }
    
    .arrow-text {
        transform: translateX(-10px);
        display: inline-block;
    }
    
    .active-step {
        filter: drop-shadow(0px 0px 1px var(--mainColor));
        color: var(--mainColor) !important;
    }
    
    .finished-step {
        background-color: var(--mainColor);
        color: #ffff;
        border: 0;
    }
    
    .small-form {
        padding: 0px 140px;
    }
    
    .form-control {
        padding: 11px 10px;
    }
    
    .filters {
        padding: 0 10px;
    }
    
    .filter {
        min-height: 40px;
        height: 100%;
        border-radius: 4px;
    }
    
    .filter:not(.search-filter) {
        border: 0;
        outline: 1px solid var(--mainColor);
    }
    
    .search-filter {
        height: 100%;
    }
    
    .active-filter {
        background-color: var(--mainColor) !important;
        color: white !important;
    }
    
    .active-filter a {
        color: #ffff;
        text-decoration: none;
    }
    
    .export-icon {
        font-size: 18px;
    }
    
    .filter .export {
        background-color: #ffff;
        color: var(--mainColor);
        border: 0;
        width: 50%;
    }
    
    .filter-by {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 0;
        padding: 0px 12px;
    }
    
    .acting-label+input {
        display: none;
    }
    
    .acting-label {
        width: 100%;
        cursor: pointer;
        color: var(--grayText);
        padding: 12px 15px;
        border: 1px solid var(--grayColor);
        border-radius: 4px;
        text-decoration: none;
    }
    
    .acting-label:hover,
    .acting-label:active,
    .acting-label:focus {
        color: var(--mainColor);
        border: 1px solid var(--mainColor);
    }
    
    input:checked+.acting-label {
        color: var(--mainColor);
        border: 1px solid var(--mainColor);
    }
    
    .loader-modal {
        padding: 50px 0;
    }
    
    .loader-modal>p {
        color: var(--black);
        /* font-family: 'Outfit', sans-serif; */
        font-weight: 500;
    }
    
    .loader-modal p:first-child {
        margin-bottom: 80px;
    }
    
    .modal {
        background-color: #00000021;
    }
    
    .loader-modal p:last-child {
        font-size: 14px;
        margin-top: 40px;
    }
    
    .spinner-border {
        width: 3rem;
        height: 3rem;
    }
    
    .modal-content {
        border-radius: 10px;
        border: 0;
    }
    
    .complete-add-msg {
        position: absolute;
        top: calc(100% + 15px);
        left: 15%;
        width: calc(100% - 30%);
        background-color: white;
        padding: 7px 3px;
        text-align: center;
        border-radius: 4px;
        color: #C1C8D8;
    }
    
    .form-switch .form-check-input {
        width: 2em;
        margin-left: 20px;
        border-radius: 2em;
        transition: background-position .15s ease-in-out;
        float: right;
        align-items: center;
    }
    
    .form-switch {
        padding-left: 0;
        width: fit-content;
        display: flex;
    }
    
    #company-client-steps .form-footer {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    
    .step-btn {
        width: 166px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-decoration: none;
    }
    
    .cancel-btn {
        color: white;
        background: #A4AFB7;
    }
    
    .cancel-btn:hover {
        color: white;
    }
    
    .back-step-btn {
        border-color: #7B7A8D;
        color: #7B7A8D;
        display: flex;
        margin-right: 15px;
    }
    
    .back-step-btn:hover {
        background-color: #7B7A8D;
        color: white;
    }
    /* #company-client-steps .form-footer .submit-btn{
	margin-bottom: 0px;
	color: white;
	box-shadow: 4px 4px 20px transparent;
} */
    
    #company-client-steps .form-switch {
        margin-top: 40px;
    }
    
    .business-form-steps {
        margin-bottom: 80px;
    }
    
    .business-form-steps .form-footer {
        position: absolute;
        bottom: 0;
        right: 15px;
    }
    
    #invoice-address {
        display: none;
    }
    
    .show-invoice-address {
        display: flex !important;
    }
    
    label[for="defaultCheck1"] {
        color: var(--grayText);
    }
    
    input[id="defaultCheck1"]:checked+label {
        color: var(--black);
    }
    
    .single-arrowRight {
        display: none !important;
    }
    
    .action-icon {
        margin: 0px 6px;
    }
    
    .edit-action-icon {
        background-color: #e9f4ff;
        padding: 5px;
        border-radius: 5px;
        display: inline-flex;
    }
    
    .remove-action-icon {
        background-color: #fef0f0;
        padding: 5px;
        border-radius: 5px;
        display: inline-flex;
    }
    
    .profile-statistics-container {
        min-height: 80px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 2px solid #F2F9FF !important;
        border-radius: 4px;
        padding: 5px;
        font-weight: bold;
        outline: 0 !important;
    }
    
    .profile-statistics {
        display: flex;
        justify-content: space-between;
    }
    
    .profile-statistics .name {
        width: 75%;
        padding-right: 2px;
        font-size: 15px;
        font-weight: 100;
    }
    
    .profile-statistics .value {
        width: 35%;
        text-align: right;
        font-weight: 100;
    }
    
    .table-caption {
        margin-bottom: 15px;
    }
    
    .status {
        font-size: 14px;
    }
    
    .danger-status {
        color: #F46A6A;
    }
    
    .success-status {
        color: #46C93A;
    }
    
    .info-status {
        color: #2998FF;
    }
    
    .secondary-status {
        color: #A1A0AE;
    }
    
    .underline {
        text-decoration: underline;
    }
    
    .info-text {
        color: var(--grayColor);
        font-size: 15px;
    }
    
    .main-btn {
        width: 147px;
        height: 40px;
        color: white;
        background-color: var(--mainColor);
        border: 0;
        border-radius: 4px;
    }
    
    .add-job-btn {
        background-color: #43425D;
        color: white;
        border: 0;
        border-radius: 4px;
        width: 134px !important;
        height: 56px;
    }
    
    .tabs-btn-container {
        padding-right: 15px;
    }
    
    .tab-btn {
        color: #43425D;
        background-color: #F2F9FF;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        text-decoration: none;
        flex-grow: 1;
        position: relative;
        margin: 0 1px;
    }
    
    .active-tab-btn {
        position: relative;
    }
    /* .tab-btn:focus::after, */
    /* .tab-btn:active::after, */
    /* .tab-btn:hover::after, */
    
    .active-tab-btn::after {
        content: ' ';
        position: absolute;
        bottom: 0px;
        left: 3px;
        width: calc(100% - 6px);
        height: 4px;
        background-color: #43425D;
        border-radius: 8px 8px 0px 0px;
    }
    
    .custome-modal .modal-header {
        border: 0 !important;
    }
    
    .custome-modal .modal-title {
        flex-grow: 1;
        text-align: center;
    }
    
    .custome-modal .modal-body {
        padding: 0 80px;
    }
    
    .custome-modal form input {
        border-radius: 10px;
    }
    
    .custome-modal .modal-footer {
        margin-top: 15px;
        justify-content: center;
        border: 0 !important;
    }
    
    .custome-modal .modal-footer button {
        width: 150px;
        padding: 10px 0;
        border-radius: 10px;
    }
    
    .custome-modal .modal-footer button.close-btn {
        background-color: white;
        border: 1px solid #C1C8D8;
        color: #C1C8D8;
    }
    
    .customer-profile table tbody tr {
        /* border-bottom: 5px solid #FAFAFA !important; */
    }
    
    .active-td {
        position: relative;
    }
    
    .active-td::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border: 2px solid;
    }
    
    .danger-td::after {
        border-color: #F46A6A;
    }
    
    .success-td::after {
        border-color: #46C93A;
    }
    
    .info-td::after {
        border-color: #2998FF;
    }
    
    .secondary-td::after {
        border-color: #A1A0AE;
    }
    
    .form-check {
        margin-bottom: 8px;
    }
    
    .form-switch .form-check-input {
        width: 3em;
        height: 25px;
    }
    
    .big-gray-text {
        font-size: 24px;
        margin: 60px;
        color: #A4AFB7;
    }
    
    .services-table th:first-of-type {
        text-align: left;
        padding: 0px 15px;
    }
    
    .services-table th:last-of-type {
        text-align: right;
        padding: 0px 15px;
    }
    
    .services-table tbody tr.no-service {
        border: 0;
    }
    
    .services-tabs-btn-container {
        width: 70%;
    }
    
    .tab-content {
        box-shadow: 2px 2px 8px #00000014;
        ;
    }
    /* .sub-section-title {
	font-size: 16px;
	color: #43425D;
} */
    /* #company-client-steps .arrowRight .arrow-text {
	transform: translateX(-20px);
} */
    
    .custome-form-check {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }
    
    .custome-form-check label {
        margin-bottom: 0px;
    }
    
    .add-new-service .filter {
        width: 150px;
        text-decoration: none;
    }
    
    .add-new-service .import-btn {
        background-color: transparent;
        color: var(--mainColor);
    }
    
    .add-new-service .defualt-price {
        border: 1px solid #C1C8D8;
        border-radius: 10px;
        padding: 8px 20px;
    }
    
    #addNewPriceModal .modal-header {
        padding-left: 80px;
    }
    
    .checkbox-cell {
        /* width: 100px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    padding: 0 0px !important;
	text-align: center !important; */
    }
    
    .questions-table td,
    .questions-table td,
    .questions-table th {
        text-align: left;
        padding: 0 20px;
    }
    
    .add-question-modal .modal-body {
        padding: 1rem;
    }
    
    .add-question-modal .modal-body .form-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 50px;
    }
    
    .add-question-modal .modal-footer button {
        width: 310px;
        border-radius: 4px;
    }
    
    .add-question-modal .modal-footer {
        margin-top: 0px;
    }
    
    .add-question-modal form input {
        border-radius: 4px;
    }
    
    .question-types-modal .modal-body {
        padding: 0 30px !important;
    }
    
    #add-option-btn {
        font-size: 14px;
        background-color: #e9f4ff;
        color: #2998FF;
        padding: 2px 10px;
        border-radius: 4px;
        border: 0;
    }
    
    #option-block {
        display: none;
    }
    
    .show-element {
        display: block !important;
    }
    
    #calender-menue {
        display: inline-block;
        width: 130px;
    }
    
    #add-question,
    #calender-menue {
        position: relative;
    }
    
    #add-question .filter {
        width: 230px;
    }
    
    #calender-btn-container {
        display: flex;
        align-items: center;
        border: 1px solid #C1C8D8;
        width: 100%;
        justify-content: center;
        cursor: pointer;
        border-radius: 4px;
    }
    
    #calender-types-btn {
        border: 0;
        background-color: transparent;
        color: #C1C8D8;
        padding: 16px;
        text-decoration: underline;
    }
    
    #questions-btns,
    #calender-btns-group {
        position: absolute;
        top: 100%;
        left: 0%;
        z-index: 999;
        background: white;
        padding: 0 12px;
        width: 100%;
        box-shadow: 3px 3px 12px #00000029;
        display: none;
    }
    
    #questions-btns .question-btn,
    .custome-menue-btn {
        border: 0;
        background-color: transparent;
        color: var(--grayText);
        width: 100%;
        font-size: 14px;
        text-align: left;
        padding: 10px 0;
    }
    
    .custome-menue-btn {
        color: #43425D;
    }
    
    #questions-btns .question-btn:hover,
    #questions-btns .question-btn:active,
    .custome-menue-btn:hover,
    .custome-menue-btn:active {
        color: var(--mainColor);
    }
    
    .rotate-180 {
        transform: rotate(180deg);
    }
    
    .tab {
        display: none;
    }
    
    .option-container {
        display: none;
    }
    
    .added-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #D9D9D9;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    
    .added-option .delete-option-btn {
        cursor: pointer;
    }
    
    .active-added-option {
        border: 1px solid var(--mainColor);
        color: var(--mainColor);
    }
    
    .service-input-btns {
        margin-left: 16px;
    }
    
    #job-list .tabs {
        margin: 20px 0;
    }
    
    #job-list .tabs>div {
        justify-content: space-between;
    }
    
    #job-list .tabs .job-tab-btn {
        width: calc(99% / 5);
        position: relative;
        cursor: pointer;
        display: inline-block;
        text-decoration: none;
    }
    
    #job-list .tabs .job-tab-btn .profile-statistics-container:hover,
    .active-job-tab-btn {
        background-color: #F2F9FF;
    }
    
    #job-list .tabs .job-tab-btn .profile-statistics-container:hover::after,
    .active-job-tab-btn::after {
        content: ' ';
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background-color: #43425D;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    #job-list .tabs .profile-statistics-container {
        border-radius: 4px;
    }
    
    #job-list .tabs .profile-statistics-container .name {
        font-size: 18px;
        color: #43425D;
        font-weight: bold;
    }
    
    #job-list .tabs .profile-statistics-container .info {
        margin-top: 15px;
        font-size: 14px;
        color: #A1A0AE;
        font-weight: 100;
    }
    
    #job-list .tabs .job-tab-btn .value {
        font-weight: bold;
        color: #43425D;
        font-size: 28px;
    }
    
    #job-list .tabs .job-tab-btn:nth-child(3) .value {
        color: #2998FF;
    }
    
    #job-list .tabs .job-tab-btn:nth-child(4) .value {
        color: #46C93A;
    }
    
    #job-list .tabs .job-tab-btn:nth-child(5) .value {
        color: #F46A6A;
    }
    
    .status-outline {
        border-radius: 6px;
        font-size: 12px;
        display: inline-block;
        min-width: 70px;
        text-align: center;
        padding: 7px;
    }
    
    .status-outline-danger {
        background: #ff000014;
        color: #F46A6A;
    }
    
    .status-outline-info {
        background: #2998ff23;
        color: #2998FF;
    }
    
    .status-outline-secondary {
        background: #7b7a8d2e;
        color: #7B7A8D;
    }
    
    .status-outline-success {
        background: #46c93a2c;
        color: #46C93A;
    }
    
    .calender-review {
        background-color: #43425D;
        color: #ffffff;
        padding: 5px 20px 5px 10px;
        border-radius: 4px;
        margin-right: 15px;
    }
    
    .calender-review span {
        font-size: 10px;
    }
    
    .calender-review p {
        margin-bottom: 0px;
    }
    
    .calender-review img {
        margin-left: 20px;
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(128deg) brightness(100%) contrast(101%);
    }
    
    .job-info-section {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 4px 4px 16px #00000014;
        padding: 20px;
        margin: 30px 0;
    }
    
    .job-info-section .head {
        padding-bottom: 16px;
        margin-bottom: 16px;
        font-size: 14px;
    }
    
    .job-info-section#times .head {
        border-bottom: 1px solid #dddd;
        display: flex;
        align-items: center;
    }
    
    .job-info-section .head img {
        margin-right: 15px;
    }
    
    .job-info-section #body .info {
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
    }
    
    .job-info-section #body .info .name {
        width: 30%;
        display: inline-block;
        position: relative;
    }
    
    .job-info-section#times #body .info .name {
        color: #43425D;
    }
    
    .job-info-section#details #body .info .name {
        color: #000000;
        font-size: 16px;
    }
    
    .job-info-section #body .info .value {
        width: 60%;
        display: inline-block;
        padding-left: 16px;
    }
    
    .job-info-section #body .info .name::after {
        content: ':';
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .job-info-section.details-section #body {
        font-weight: bold;
    }
    
    .schedule-details-table {
        padding: 20px;
    }
    
    .job-info-section.details-section .head,
    .schedule-details-table.details-section .head {
        margin-bottom: 15px;
        padding-bottom: 0;
        font-size: 14px;
    }
    
    .gray-text {
        color: #7B7A8D;
    }
    /* ------------ */
    
    #audio-playing {
        width: 75%;
        /* padding: 5px 40px; */
        background-color: white;
        border-top: 1px solid #152C34;
        position: fixed;
        bottom: 0;
        /* right: 25%; */
        z-index: 99999;
        display: flex;
        align-items: center;
        height: 60px;
    }
    
    #audio-playing audio {
        flex-grow: 1;
        margin-left: 25px;
        height: 40px;
    }
    
    #audio-playing .audio-title {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .song-navigation {
        flex-grow: 1;
        display: flex;
        align-items: center;
        padding: 10px;
        direction: ltr !important;
    }
    
    .control-container {
        /* background-color: #000; */
    }
    
    .amplitude-play-pause {
        margin: 0 20px !important;
    }
    
    .audio-title img {
        transform: rotate(-90deg);
        width: 20px;
    }
    
    #audio-playing .audio-title>div {
        margin-left: 50px;
    }
    
    #audio-playing .audio-title>div>p {
        color: #444444;
        font-size: 14px;
        margin-bottom: 0;
        font-weight: bold;
    }
    
    #audio-playing .audio-title>div>span {
        font-size: 12px;
        color: #9C9C9C;
        font-weight: bold;
    }
    
    .login-page {
        background-color: #1D1E1D;
        width: 100%;
        min-height: 100vh;
        padding: 50px;
    }
    
    .login-page .content-container {
        width: 500px;
        background-color: #F6FBF9;
        border-radius: 14px;
        padding: 40px;
        margin: auto;
    }
    
    .login-page .content-container h1,
    form p.footer {
        text-align: center;
    }
    
    .login-page img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        display: block;
        margin: 0 auto 15px auto;
    }
    
    .login-page .content-container input,
    textarea,
    select {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 15px;
        border: 1px solid #ddd;
    }
    
    .login-page .content-container #submit-btn {
        background-color: #84C7AE;
        padding: 7px 0;
        border: 0;
        border-radius: 8px;
        color: white;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .form-container form {
        margin-top: 25px;
    }
    
    .upload-img {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .upload-img label {
        width: 150px;
        height: 150px;
        border-radius: 0;
        border: 1px solid #ddd;
        padding: 5px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .upload-img input {
        display: none;
    }
    
    input.checkbox-input-btn {
        width: auto !important;
    }
    
    input.radio-input-btn {
        min-width: 50px!important;
        width: auto !important;
        margin: 8px;
    }
    
    .social-media-account p,
    .upload-img span {
        font-weight: bold;
    }
    
    #as-creator-inputs {
        display: none;
    }
    
    .show-div {
        display: block !important;
    }
    
    a.arrow {
        color: #000000;
    }
    
    #video-container {
        width: 25%;
        height: 60px;
        position: fixed;
        bottom: 0;
        background-color: white;
        border-top: 1px solid #152C34;
        z-index: 9999;
        display: flex;
        align-items: center;
        right: 0;
    }
    
    #img-track-play {
        height: 58px;
        margin-left: auto;
        margin-right: 5px;
    }
    
    #video-container video {
        width: 100%;
        height: 100%;
        appearance: 0;
    }
    
    #video-container iframe {
        width: 100%;
        height: 100%;
        appearance: 0;
    }
    
    #full-screen-mode {
        width: 80%;
        margin: auto;
        padding: 50px;
        /* background-color: #eee; */
        text-align: center;
    }
    
    #full-screen-mode .content {
        width: 65%;
        margin: auto;
    }
    
    #full-screen-mode .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    #full-screen-mode .media-info p {
        font-size: 30px;
        color: #2B2B2B;
        margin-bottom: 0px;
    }
    
    #full-screen-mode .media-info span {
        font-size: 24px;
        color: #888888;
    }
    
    #full-screen-mode video {
        width: 50%;
        height: 450px;
        object-fit: contain;
        margin: 30px 0;
    }
    
    .full-screen-btn {
        border: 0;
        background-color: white;
        margin-bottom: 20px;
        transition: 0.7s;
    }
    
    .full-screen-btn:hover {
        transform: scale(1.2);
    }
    
    .media-controls button {
        border: 0;
        background-color: transparent;
    }
    
    #full-screen-mode .media-controls {
        margin-top: 20px;
    }
    
    .media-controls .play-media-btn {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 15px;
        border: 1px solid #ddd;
        margin: 0 60px;
    }
    
    .media-controls .play-media-btn img {
        transform: translateX(5px);
    }
    
    span.amplitude-current-time,
    .amplitude-time-remaining {
        color: #152C34 !important;
    }
    
    .media-details {
        min-height: 150vh;
    }
    
    .media-details .media-container {
        display: flex;
        align-items: center;
    }
    
    .media-details img.media-logo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 1px solid #ddd;
        box-shadow: 0 0 10px 0 #ddd;
        object-fit: cover;
    }
    
    .media-details .media-control {
        margin-left: 50px;
    }
    
    .media-informations {
        margin-top: 50px;
    }
    
    .media-informations .info {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        padding-left: 50px;
    }
    
    .media-informations .info .name {
        width: 10%;
        font-size: 18px;
        color: #9C9C9C;
    }
    
    .media-informations .info .value {
        width: 90%;
        font-size: 18px;
        color: #444444;
        padding-left: 50px;
    }
    
    .table-container table {
        width: 100%;
    }
    
    .table-container table th {
        font-size: 18px;
        color: #000000;
    }
    
    .table-container table td {
        vertical-align: middle;
        font-size: 14px;
        color: #9C9C9C;
        padding: 30px 5px;
    }
    
    .table-container table .more-btn {
        display: flex;
        justify-content: center;
    }
    
    .table-container table tbody .title>div {
        display: flex;
        align-items: center;
        /* justify-content: center; */
    }
    
    .table-container table tbody .title>div img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        margin-right: 15px;
    }
    
    .album-card {
        width: 350px;
        box-shadow: 0 0 4px 0 #dddd;
        margin-bottom: 120px;
    }
    
    .album-card .cover-img img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    
    .album-card .album-details {
        padding: 0px 20px 20px 20px;
        margin-top: -20px;
    }
    
    .album-card .album-details .name {
        font-size: 18px;
        margin-top: 15px;
    }
    
    .album-card .album-details>img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    .album-card .album-details .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 11px;
        color: #9C9C9C;
    }
    
    .album-card .album-details .info span {
        max-width: 33%;
    }
    
    .album-card .album-details .info>span:nth-of-type(2) {
        position: relative;
    }
    
    .album-card .album-details .info>span:nth-of-type(2)::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        background-color: #9C9C9C;
    }
    
    .album-card .album-details .info>span:nth-of-type(2)::after {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
        background-color: #9C9C9C;
    }
    
    .profile-img {
        text-align: center;
        width: fit-content;
        margin-bottom: 30px;
    }
    
    .profile-img p:nth-of-type(1) {
        margin: 15px 0 0 0;
        font-size: 18px;
        color: #000000;
    }
    
    .profile-img p:nth-of-type(2) {
        margin: 0;
        font-size: 14px;
        color: #000000;
    }
    
    .profile-img img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .profile-details {
        display: flex;
        justify-content: space-between;
    }
    
    .profile-details .about {
        width: 30%;
    }
    
    .profile-details .about p:first-of-type {
        font-size: 18px;
    }
    
    .profile-details .media {
        width: 60%;
    }
    
    .profile-details .media #latest-tracks .category-body {
        width: 100%;
    }
    
    .profile-details .media #latest-tracks .catgory-item img {
        width: 70px;
        height: 50px;
    }
    
    #latest-tracks .catgory-item:hover {
        background-color: #F9F9F9;
    }
    
    .options {
        display: flex;
        align-items: center;
    }
    
    .options img {
        width: 21px !important;
        height: 21px !important;
    }
    
    .app-icon {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 10px;
    }
    
    .app-icon a {
        display: inline-block;
    }
    
    .app-icon img {
        width: 110px;
    }
    
    .footer-text {
        margin-top: 10px;
        padding: 0 10px;
        font-size: 12px;
    }
    
    .footer-text span:first-of-type {
        color: #9C9C9C;
    }
    
    .footer-text .lang {
        color: #004CFFB8;
    }
    
    .footer-text .lang .lang-name {
        color: #000000;
    }
    
    #setting-page #latest-tracks .catgory-item {
        margin-bottom: 30px;
    }
    
    .light {
        color: #9C9C9C;
    }
    
    .menue-container {
        position: relative;
    }
    
    .menue-container .menue {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        min-width: 140px;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 4px;
        display: none;
        z-index: 999999;
    }
    
    .menue-container .menue a {
        border-bottom: 1px solid #ddd;
        display: inline-block;
        width: 100%;
        padding: 5px;
        color: #333;
        font-size: 14px;
    }
    
    .menue-container .menue a:hover {
        background-color: #F9F9F9;
    }
    
    .video-container-modal {
        width: 44.5% !important;
        height: auto !important;
        position: fixed;
        top: 200px;
        right: 28% !important;
        z-index: 99999;
    }
    
    .social-media a i {
        display: inline-block;
        font-size: x-large;
        width: 30px;
    }
    
    .social-media a {
        color: unset !important;
        text-decoration: none !important;
    }
    /* .menue-container>a:focus+.menue {
    display: block;
} */
    /* .library-page .library-categories .user-card img {
		width: 20px !important;
		height: 20px !important;
		object-fit: contain;
	} */
    /* Media Query */
    
    @media (max-width: 767px) {
        .login-page .content-container {
            width: 100%;
        }
        .upload-img label {
            width: 100%;
            margin-top: 10px;
        }
        .service-input-btns {
            margin-bottom: 15px;
            width: 130px;
        }
        .cover-img-container {
            display: none;
        }
        .content-container {
            padding: 50px 25px;
        }
        #dashboard .main-container .main-content .center-container .custome-navbar {
            padding: 15px 10px;
        }
        #dashboard .main-container .main-content .center-container {
            margin-left: 0;
            overflow: hidden;
        }
        #company-client-steps .form-footer {
            width: 100%;
            justify-content: center;
        }
        #company-client-steps .step {
            margin-bottom: 80px;
        }
        .small-form {
            padding: 0 0;
        }
        .arrowRight {
            padding: 15px 0px;
        }
        .single-arrowRight {
            display: block !important;
            width: 50%;
            padding: 15px 0px;
            margin: 15px auto;
        }
        .arrow-text {
            transform: translateX(-5px);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sign-up-container a {
            padding: 5px 0px;
            width: 100px;
            font-size: 14px;
        }
        .page-footer {
            margin-left: 0;
        }
        /* #company-client-steps .arrowRight {
		width: 50%;
		padding: 10px 0px;
		margin-bottom: 15px;
	} */
        .business-form-steps .form-footer {
            bottom: 0;
            right: 0;
        }
        .cancel-btn {
            width: 100px;
            font-size: 14px;
        }
        .page-content .header .main-title {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .page-content .header .sub-title {
            font-size: 12px;
        }
        .tabs-btn-container {
            padding-right: 0;
            margin-bottom: 15px;
        }
        .add-job-btn {
            width: 100% !important;
        }
        .tab-btn {
            font-size: 12px;
        }
        table * {
            font-size: 10px !important;
            max-width: 100%;
        }
        #full-screen-mode .content {
            width: 100%;
        }
        .media-controls .play-media-btn {
            width: 80px;
            height: 80px;
            margin: 0 15px;
        }
        #first-group .list-title {
            display: none;
        }
    }
    
    @media (max-width: 900px) {
        #first-group .list-title {
            display: none;
        }
        .profile-details {
            display: block;
        }
        .profile-details .about,
        .profile-details .media {
            width: 100%;
        }
        .profile-details .media {
            margin-top: 50px;
        }
        .profile-img,
        .album-card {
            margin: auto;
        }
        .album-card {
            margin-bottom: 50px;
        }
        #audio-playing .audio-title>div {
            text-align: center;
            margin-left: 0;
            margin-right: 0 !important;
            width: 100%;
        }
        #trackplay_div {
            width: 150% !important;
        }
        #audio-playing .audio-title .song-navigation {
            /* display: none; */
            position: fixed;
            bottom: 58px;
            left: 0;
            background-color: white;
            height: 0px;
        }
        #audio-playing .audio-title .control-container .amplitude-next,
        #audio-playing .audio-title .control-container .amplitude-prev {
            /* display: none; */
        }
        #audio-playing .audio-title #trackplay_div #trackplay_title,
        #audio-playing .audio-title #trackplay_div #trackplay_artist {
            font-size: 9px !important;
        }
        #audio-playing .audio-title {
            /* flex-direction: column; */
        }
        #video-container video {
            /* display: none; */
            /* margin-top: -91px; */
        }
        #full-screen-mode {
            width: 100%;
            padding: 50px 15px;
        }
        .media-details .media-container {
            width: 100%;
            text-align: center;
            display: block;
        }
        .media-details .media-control {
            margin-left: 0;
        }
        .media-informations .info .value {
            font-size: 16px;
        }
        .media-informations .info .name {
            width: 170px;
            font-size: 14px;
        }
        .media-informations .info {
            padding-left: 0;
        }
        .page-title {
            font-size: 14px;
        }
        .username {
            font-size: 12px;
        }
        #dashboard .main-container .main-content .center-container .custome-navbar {
            padding: 5px 10px;
        }
        .custome-sidebar {
            background-color: white;
        }
        .category-container,
        #latest-tracks .category-body,
        #genres .category-body {
            width: 100%;
        }
        #dashboard .main-container .main-content .left-container {
            /* overflow: unset !important; */
            border-right: 0;
        }
        .app-icon {
            justify-content: flex-start;
        }
        .app-icon img {
            margin-right: 15px;
        }
        .page-content {
            padding: 0px 0px;
            margin: 100px 15px;
        }
        .list-btn {
            display: block !important;
        }
        #dashboard .main-container .main-content .center-container {
            margin-left: 0;
        }
        #dashboard .main-container .main-content .left-container .logo-container {
            justify-content: space-between;
            padding: 0 15px;
        }
        #dashboard .main-container .main-content .left-container a.logo {
            width: fit-content;
            padding: 0 0;
            background-color: transparent;
        }
        #dashboard .main-container .main-content .left-container a.logo img {
            height: 40px;
        }
        #dashboard .main-container .main-content .left-container {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 50px;
            overflow: hidden;
            background-color: white;
            padding: 4px 0 4px 0;
            box-shadow: rgb(33 35 38 / 10%) 0px 10px 10px -10px;
        }
        .services-tabs-btn-container {
            width: 100%;
        }
    }
    
    @media (min-width: 768px) and (max-width: 991px) {
        .cover-img-container {
            height: 25vh !important;
        }
        .cover-img-container img {
            object-position: top;
        }
        #company-client-steps .arrow-text {
            font-size: 12px;
        }
        #company-client-steps .arrowRight {
            padding: 15px 10px;
        }
        #company-client-steps .arrowBg:not(.first-arrow) {
            margin-left: -15px;
        }
    }
    
    @media (min-width: 768px) and (max-width: 1200px) {
        .lg-padding {
            padding: 100px;
        }
        #company-client-steps .arrowRight {
            padding: 20px 20px;
            clip-path: polygon(75% 0%, 90% 50%, 75% 100%, 0% 100%, 10% 50%, 0% 0%);
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 12px;
        }
    }