@font-face {
    font-family: "Gudea-Regular";
    src: url("../../fonts/Gudea-Regular.ttf");
}

@font-face {
    font-family: "Montserrat";
    src: url("../../fonts/Montserrat-Regular.ttf");
}

body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

h3 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container{
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 800px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1000px;
    }
}

.create-event {
    color: #ffffff;
}

.create-event h3 {
    margin-top: 50px;
    margin-bottom: 20px;
}

.input-group-text {
    color: rgba(217, 217, 217, 1) !important;
    background: rgba(217, 217, 217, 0.5) !important;
    border-radius: 5px 0 0 5px;
    border: none !important;
}

.url-c{
    /* border: var(--bs-border-width) solid var(--bs-border-color); */
    border-radius: 5px;
}

#basic-url{
    border-radius: 0 5px 5px 0 !important;
    border: none !important;
}

@media (max-width: 480px){
    #basic-url {
        padding: 15px 70px 15px 10px!important;
    }
}

::placeholder {
    color: rgba(217, 217, 217, 0.5) !important;
}

#request{
    padding-right: 40px !important;
    border-radius: 0 5px 5px 0 !important;
}

.form-control {
    margin: 0 0 25px 0;
    padding: 15px 10px;
    color: #fff !important;
    background-color: rgba(217, 217, 217, 0.3) !important;
    /* margin: 0 0 10px 0; */
    border: none;
    border-radius: 5px !important;
    cursor: pointer;
}

@media (max-width: 480px) {
    .form-control {
        margin: 0 0 0 0;
    }
}

.form-control:focus {
    color: #fff;
    background: rgba(217, 217, 217, 0.2);
    border-color: #ffffff;
    box-shadow: none;
}
.form-label-custom {
    margin: 10px 0 10px 0;
    font-size: 20px;
}

@media (max-width: 480px) {
    .form-label-custom {
    font-size: 16px;
    }
}

.dropdown-toggle {
    color: rgba(217, 217, 217, 0.5) !important;
    width: 100%;
}

#dj-input {
    margin: 10px 0;
    font-size: 16px;
    color: #ccc;
}

.title {
    margin: 10px 0;
}

.img-up-btn {
    background-color: rgba(217, 217, 217, 0.3);
    color: rgba(217, 217, 217, 1) !important;
    padding: 15px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px !important;
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
}

.custom-label {
    margin: 0 2px;
}

.w-5 {
    width: 10% !important;
}

/* Remove this container when use*/
.component-title {
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 30px;
    left: 0;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #888;
    text-align: center;
}

/* The switch - the box around the slider */
.container-switch {
    width: 40px;
    height: 15px;
    position: relative;
}

/* Hide default HTML checkbox */
.checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    background: rgba(226, 226, 228, 0.7);
    border-radius: 20px;
    transition: all 0.2s ease-out;

}

/* The slider */
.slider {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    border-radius: 50%;
    background: rgba(226, 226, 228, 1);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-out;
    cursor: pointer;

}

.checkbox:checked + .switch {
    background: linear-gradient(99deg, #ec3434 0%, #f7aa16 100%);
}

.checkbox:checked + .switch .slider {
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
    left: 60%;
}

.day-fixed {
    border-radius: 5px;
    /* overflow: hidden; */
    transition: 0.1s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.day-fixed-input {
    display: none;
}

.day-fixed-input.check {
    display: block;
background: radial-gradient(90.16% 143.01% at 15.32% 21.04%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.0447917) 77.08%, rgba(255, 255, 255, 0) 100%);
background-blend-mode: overlay, normal;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 2px;

}

.day-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 12px;
    position: relative;
    flex: 1 1 10%;
    z-index: 1;
    color: #ffffff;
    border: 1px solid #ffffff2b;
    border-radius: 5px;
    text-align: center;
    background: radial-gradient(90.16% 143.01% at 15.32% 21.04%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.0447917) 77.08%, rgba(255, 255, 255, 0) 100%);
    background-blend-mode: overlay, normal;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.day-label:has(input:checked) {
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

@media (max-width : 760px) {
    .amt-fixed {
        flex-wrap: wrap;
        width: 100%;
    }
}

.amt-fixed {
    border-radius: 5px;
    transition: 0.1s ease;
    display: flex;
    justify-content: start;
    align-items: center;
}

.amt-fixed-input {
    display: none;
}

.amt-fixed-input.check {
    /* display: block;
background: radial-gradient(90.16% 143.01% at 15.32% 21.04%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.0447917) 77.08%, rgba(255, 255, 255, 0) 100%);
background-blend-mode: overlay, normal;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 2px; */

}

.amt-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    padding: 5px;
    margin: 5px;
    font-size: 12px;
    position: relative;
    flex: 1 1 12%;
    z-index: 1;
    color: #ffffff;
    border: 1px solid #ffffff2b;
    border-radius: 5px;
    text-align: center;
    background: linear-gradient(180deg, rgba(194, 113, 193, 0.2) 12.76%, rgba(113, 65, 176, 0.2) 100%);
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.amt-label.slider-lable{
    width: 150px;
    display: block;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}
.amt-label.slider-lable:focus{
    width: 150px;
    background: #0E1135;
}

.amt-label.slider-lable.value{
    width: 60px;
    color: #fff;
    display: block;
    border-radius: 3px;
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.amt-label.slider-lable::placeholder{
    font-size: 12px;
}

.amt-label:has(input:checked) {
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.submit-btn {
    width: 200px;
    margin-top: 20px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(99deg, #ec3434 0%, #f7aa16 100%);
    border: none !important;
    outline: none !important;
    transition: all 0.1s ease-in-out;
}

.brdr-seprator {
    width: 100%;
    height: 1px;
    margin: 5px auto;
    background-color: rgba(255, 255, 255, 0.2);
}

.template-box {
    margin: 50px auto;
}

.templates-selection-div{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.templates-selection-div .selected-temps-box{
    flex: 1 1 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 550px;
}

.templates-selection-div .templates{
    flex: 1 1 60%;
}

.template {
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-fixed-box{
    width: 250px;
}

.template-item {
    padding: 10px;
    width: 180px;
}

.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

.default-selected {
    border-radius: 20px;
    animation: box-shadow 2s linear infinite;
}

@-webkit-keyframes box-shadow {
    0%,
    100% {
        box-shadow: inset 0 0 5px #ec3434;
    }

    50% {
        box-shadow: inset 0 0 50px #f7aa16;
    }
}

.nav-button {
    font-size: 30px;
    color: white;
    background-color: black;
    padding: 10px;
    border-radius: 100% !important;
}

.owl-prev {
    position: absolute;
    background: linear-gradient(45deg, #ed5d28e0, #f9bb11e0) !important;
    top: 40%;
    left: -30px;
    height: 30px !important;
    width: 30px !important;
    border-radius: 100% !important;
    border: none !important;
    color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-box .owl-prev {
    height: 40px !important;
    width: 40px !important;
}


.owl-prev:hover {
    background: linear-gradient(45deg, #ed5b28, #f9bc11) !important;
}

.owl-next {
    position: absolute;
    background: linear-gradient(45deg, #ed5d28e0, #f9bb11e0) !important;
    top: 40%;
    right: -30px;
    height: 30px !important;
    width: 30px !important;
    border-radius: 100% !important;
    border: none !important;
    color: #fff !important;
}

.owl-next:hover {
    background: linear-gradient(45deg, #ed5b28, #f9bc11) !important;
}


.template-box .owl-next {
    height: 40px !important;
    width: 40px !important;
}

.select-dropdown {
    margin: 10px 0;
}

.dropdown-menu {
    width: 100%;
    background: rgb(217, 217, 217) !important;
    color: #000 !important;
}

.dropdown-toggle {
    width: 100%;
    background: rgb(217, 217, 217, 0.3) !important;
    color: #495057;
}

.dropdown-menu.show {
    overflow: auto;
    height: 75px;
}

.dropdown-menu.show::-webkit-scrollbar-track {
    margin: 10px;
}

#bank-detail {
    display: none;
}

.w-80 {
    width: 85% !important;
}

/* .border-modal {
    border-bottom: 1px solid #cccccc50;
    border-radius: 5px;
} */

.slideContainer {
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 5px;
    bottom: 50px;
    right: 0;
    background: #ccc;
    color: #000;
}

.slideContainer::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 90%;
    border-width: 15px;
    border-style: solid;
    border-color: #ffffff50 transparent transparent transparent;
    transform: translateX(-50%);
}

.slider-lable {
    position: relative;
}

#amt-value {
    font-size: 14px;
}

.amt-slider {
    outline: none;
    border: none;
    background: rgba(217, 217, 217,1);
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: 2px;
    transition: background 1s ease-in-out;
}

.amt-range {
    display: flex;
    justify-content: space-between;
}

.bubble {
    position: absolute;
    background: radial-gradient(
            200% 100% at 100% 100%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            200% 100% at -15% -10%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    color: white;
    width: 65px;
    padding: 10px;
    border-radius: 20px;
    font-size: 16px;
    text-align: center;
    bottom: 50px;
}

.down-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.5);
}

/* ___________________________________________ */

/* temp */

.disp-none {
    display: none;
}

.container-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    padding-bottom: 0;
}

.crt-prf-btn {
    font-family: "Comfortaa", sans-serif;
    border-radius: 6px;
    border: 1px solid #fcde09;
    background: #fcde09;
    color: #000 !important;
    transition: box-shadow 0.5s;
}

.crt-prf-btn:hover {
    box-shadow: 0 0 10px #fcde09;
    background: #fcde09;
}

.crt-prf-btn:active {
    box-shadow: 0 0 10px #fcde09;
    background: #fcde09 !important;
}

.date-selector,
.time-selector {
    margin: 15px 0;
    background-color: rgba(217, 217, 217, 0.3) !important;
    border: none;
    color: #fff;
    border-radius: 5px;
    padding: 15px;
}

.dropdown-item {
    padding: 0;
}

/* Profile Dropdown */

.menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: not-allowed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-toggle::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 4px;
    background: #ffffff;
    box-shadow: 0 0 0 #ffffff, 0 0 0 #ffffff;
}

/* Table Data */

.rwd-table {
    margin: 0 auto;
    min-width: 300px;
    max-width: 100%;
    border-collapse: collapse;
    color: #ffffff;
    border-radius: 0.2em;
    overflow: hidden;
}

.rwd-table tr {
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    background-color: rgba(217, 217, 217, 0.1);
}

.rwd-table th,
.rwd-table td {
    text-align: center;
    border: 1px solid white;
}

.rwd-table th,
.rwd-table td {
    padding: 10px;
}

#social-link-body, #music-link-body{
    overflow: auto;
    max-height: 480px;
}

/* _____________________________________________________________ */
/* Responsiveness */

@media only screen and (min-width: 200px) and (max-width: 600px) {
    .w-res {
        width: 50%;
    }

    .bank-form {
        width: 100% !important;
    }

    .slideContainer {
        box-shadow: inset 0 0 200px #fff;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
    }

    .slideContainer::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-color: #ffffff transparent transparent transparent;
    }

    .bubble {
        background: radial-gradient(
                200% 100% at 100% 100%,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(255, 255, 255, 0) 100%
            ),
            radial-gradient(
                200% 100% at -15% -10%,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(255, 255, 255, 0) 100%
            );
        color: #5c3c00;
        box-shadow: inset 0 0 200px #fff;
    }

    .down-arrow {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(255, 255, 255);
    }
}

@media only screen and (min-width: 601px) and (max-width: 1000px) {
    .template-item {
        width: 200px;
    }

    .w-res {
        width: 100%;
    }

    .bank-form {
        width: 95% !important;
    }

    .day-label {
    flex: 1 1 12%;
    height: 50px;
    }

}

@media only screen and (min-width: 1001px) and (max-width: 1400px) {
    .template-item {
        width: 220px;
    }

    .w-res {
        width: 100%;
    }

    .bank-form {
        width: 95% !important;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 2200px) {
    .template-item {
        width: 220px;
    }

    .w-res {
        width: 100%;
    }

    .bank-form {
        width: 95% !important;
    }
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Create-event-css */

.create-evnt-upld{
    font-size: 1rem !important;
    text-align: start;
}

.create-evnt-reset-upload{
    position: absolute;
    top: -10px;
    right: -10px;
}
.create-envt-poster-size{
    height: 242px;
}

.copy-shr-link{
    white-space: nowrap;
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
    padding: 10px 10px;
    color: white;
    border: none;
    border-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.modal-rad{
    border-radius: 24px !important;
}

.social-share-btns{
    background: linear-gradient(180deg, #60366F 0%, #293B73 100%);
    padding: 10px 0px;
    width: 40px;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    color: white;
    font-size: 18px;
}

.share-main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #60366F;
    margin: 20px 0;
    border-radius: 8px;
    padding-left: 10px;
}

.share-main-container > input {
    width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
}

.cursor-pointer{
    cursor: pointer;
}

@media screen and (max-width:768px) {
    .create-envt-poster-size{
        height: 225px;
    }
}

.dj-suggestion-box {
    position: relative;
    z-index: 1;
    background: #0e1135;
}

.dj-suggestion-box::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: 5px;
    background: linear-gradient(180deg, #ed5b28, #f9bc11);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.dj-suggestion-box .top-content h4 {
    font-size: 20px;
}

.dj-suggestion-box .top-content p {
    font-size: 12px;
    color: #fff;
}

div.dj-suggestion-box.p-4.row>div.Search-group {
    padding: 0;
    position: relative;
    border-radius: 5px;
    background: #0e1135;
    display: flex;
    /* flex-wrap: wrap; */
}
div.dj-suggestion-box.p-4.row>div.Search-group .searchIcon {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* div.dj-suggestion-box.p-4.row>div.Search-group .input-group-text {
    background: #FF4050 !important;
    color: #fff !important;
    font-size: 12px;
} */

div.dj-suggestion-box.p-4.row>div.Search-group .input-group-text-song {
    background-color: #30C454;   
    color: #07091F;
    border-radius: 5px 0 0 5px;
    border: none;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}
.music_list_container {
    overflow: auto;
    max-height: 300px;
}

.music_list_container .content-div {
    position: relative;
    background: #0e1135;
}
.music_list_container .content-div p {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff70 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.music_list_container .content-div p span {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
   
}

.music_list_container .content-div p {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff70 !important;
}



.song-list-suggestion-title {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff70 !important;
}
.song-list-suggestion-title span {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
   
}

.music_row .profile_img{
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

.music_list_container .content-div .checkBox {
    box-sizing: border-box;
    position: absolute;
    /* width: 38px;
    height: 38px; */
    right: 0px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* background: radial-gradient(90.16% 143.01% at 15.32% 21.04%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.0447917) 77.08%, rgba(255, 255, 255, 0) 100%); */
    /* backdrop-filter: blur(6.07811px);
    border-radius: 4px;
    border: 1px solid #4c4e67; */

}


.music_list_container .content-div .checkBox .checkmark-small {
    height: 20px;
    width: 20px;
    border: 1px solid #ffffff8a;
}

.music_list_container .content-div .checkBox .checkmark-small:after {
    width: 5px;
    height: 10px;
}

div.dj-suggestion-box  div  div.break_line {
    width: 98%;
    height: 1px;
    background: #ffffff70;
    padding-inline: 2rem !important;
    margin-top: 5px;
    margin-inline: auto;
}
.music_row {
    cursor: pointer;
    padding: 10px;
    margin-inline: auto;
}

.music_row:not(:last-child) {
    border-bottom: 1px solid #E2E2E450;
}

.music_row:only-child {
    border-bottom: none;
}

/* slider */
#music-provider-switch {
    height: 0;
    width: 0;
    visibility: hidden;
  }
  
  #music-provider-switch + label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: #30C454;
    display: block;
    border-radius: 100px;
    position: relative;
  }
  
  #music-provider-switch + label:after {
    content: '';
    background-image: url("../../images/create-profile/spotify.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 90px;
    transition: 0.3s;
  }
  
  #music-provider-switch:checked + label {
    background: #FF4050;
  }
  
  #music-provider-switch:checked + label:after {
    background-image: url("../../images/create-profile/yt.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(100% - 30px);
    transform: translateX(-100%);
    top: 50%;
    transform: translateY(-50%);
  }
  
  .music-provider-switch{
    font-size: 12px;
    color: #fff;
    gap: 5px;
  }

  /* slider */
  #table-view-switch {
    height: 0;
    width: 0;
    visibility: hidden;
  }
  
  #table-view-switch + label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 26px;
    background: #E2E2E4B2;
    display: block;
    border-radius: 100px;
    position: relative;
  }
  
  #table-view-switch + label:after {
    content: '';
    background-image: url("../../images/icons/song-request.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 90px;
    transition: 0.3s;
  }
  
  #table-view-switch:checked + label {
    background: linear-gradient(90.3deg, #EC3434 0.16%, #F7AB16 101.62%);
  }
  
  #table-view-switch:checked + label:after {
    background-image: url("../../images/icons/direct-request.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(100% - 25px);
    transform: translateX(-100%);
    top: 50%;
    transform: translateY(-50%);
  }
  /* slider close */

  /* submitBtnn */
  .doneBtn {
    background: linear-gradient(180deg, #ed5b28, #f9bc11);
    border-radius: 5px;
    box-sizing: border-box;
    color: #00a84f;
    display: block;
    height: 45px;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 2px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 190px;
    z-index: 2;
}

.doneBtn:hover {
  color: #fff;
}

.doneBtn span {
    align-items: center;
      background: #0e1135;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      color: #fff;
      height: 100%;
      transition: background .5s ease;
      width: 100%;
      font-size: 14px;
  }
  
  .doneBtn:hover span {
    background: transparent;
     
  }
  #eventSubmitBtn .submit-btn {
      width: 260px;
      height: 64px;
      /* padding: 1rem 2rem; */
      margin-top: 20px;
      font-size: 14px;
      cursor: pointer;
      font-size: 18px;
      color: #fff;
      border-radius: 10px;
      padding: 10px;
      background: linear-gradient(99deg, #ec3434 0%, #f7aa16 100%);
      border: none !important;
      outline: none !important;
      transition: all 0.1s ease-in-out;
  }
  
  @media screen and (max-width: 767px) {
      .music_list_container .content-div {
          justify-content: center;
          /* flex-wrap: wrap; */
          gap: 12px;
      }
      .music_list_container .content-div .checkBox {
         position: static;
      
      }
  }


  .dj-suggestion-song-container{
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
    z-index: 1;
    background: #2C2E4D;
    border-radius: 0px 0px 5px 5px;
    max-height: 330px;
    overflow: auto;
    z-index: 100;
  }

  /* .request-song-loader{
    position: absolute;
  } */

  /* HTML: <div class="loader"></div> */
.request-song-loader {
    margin: 10px auto;
    width: 90px;
    height: 14px;
    background: 
    conic-gradient(from 135deg at top, #ccc 90deg, #0000 0) 0 0,
    conic-gradient(from -45deg at bottom, #ccc 90deg, #0000 0) 0 100%;
    background-size: calc(100%/4) 50%;
    background-repeat: repeat-x;
    animation: l12 1s infinite;
  }
  @keyframes l12 {
      80%,100% {background-position: calc(100%/3) 0,calc(100%/-3) 100%}
  }


  
@media (min-width: 1500px) {
    .music_list_container .content-div p span {
        font-size: 14px;    
    }
    
    .music_list_container .content-div p {
        font-size: 14px;
    }
    .music_row .profile_img{
        width: 60px;
        height: 60px;
    }
    .music_list_container .content-div .checkBox .checkmark-small {
        height: 30px;
        width:30px;
    }
    
    .music_list_container .content-div .checkBox .checkmark-small:after {
        width: 8px;
        height: 16px;
    }
}
@media (max-width: 767px) {
    .song-list-suggestion-title span {
        font-size: 12px !important;
    }
    .song-list-suggestion-title {
        font-size: 10px !important;
    }
    .music_row .profile_img{
        width: 40px;
        height: 40px;
    }
}