@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap");

a {
  color: #000;
}

.font-sans {
 font-family: "Sora", sans-serif;
}

.stretched-link::after {
  display: none;
}

img {
  max-width: 100%;
  height:auto !important;
}

.img-fluid.progressive__img.progressive--not-loaded, .progressive--not-loaded {
    filter: blur(0px) !important; }

.icon-mail-envelope-closed:before,
.form-group .icon-mail-envelope-closed:before {
  content: "\e901";
}

.BoxVc h2, #create_artist_click { text-transform: uppercase;}


.SongData {
  white-space: pre-wrap;
}

body {
  font-family: "Sora", sans-serif;
  overflow-x: hidden;
  word-wrap: unset;
  word-break: unset;
  font-size: 14px;
}

.hidedefault {
  display: none;
}

.discionnectXRPWallet {
  color: red;
  cursor: pointer;
}

.discionnectXRPWallet:hover {
  text-decoration: underline;
}

.TotalSaleRow { margin-bottom:30px; }

.form-group.featureFile.paymentCurrency {
  margin-bottom: 0;
}

.form-group.paymentCurrency .uploadType {
  margin: 30px 0;
}

.featureFile.paymentCurrency > label {
  font-size: 18px;
  font-family: "Sora-Medium";
  margin-bottom: 0;
}

.form-group.inlineradio label { display: inline-block;  }

.icon-fire {
  width: 35px;
  height: 35px;
  background: url(../images/flame-grey.png) no-repeat center;
  background-size: 100%;
  display: block;
}

.buttonRow .btn {
  display: block;
}

.NFTImagBox {
  border-radius: 20px;
  overflow: hidden;
}

.OfferOuter .col-md-4,
.OfferOuter .col-md-8,
.OfferOuter .col-md-6,
.OfferOuter .col-md-2 {
  padding: 10px;
}
.OfferOuter .row {
  background: #f2f2f2;
  border-radius: 6px;
  margin-bottom: 9px;
  font-size: 18px;
}

.OfferOuter .row.Tbhead {
  background: #60bd5c;
  color: #fff;
}

.table-responsive .dataTables_wrapper {
  overflow-x: scroll;
}

.icon-follow {
  width: 30px;
  height: 30px;
  background: url(../images/unfollowed-icon.png) no-repeat center;
  background-size: 100% !important;
  display: block;
}

#edit-col-form span,
#add-collabration-form #addCollabrationLabel {
  color: #000;
}

#add-collabration-form #addCollabrationLabel {
  border-bottom: 1px solid #a7a8aa;
}

#add-collabration-form .modal-content {
  border-radius: 30px;
  border: 1px solid #a7a8aa;
}

#add-collabration-form .modal .modal-header .close {
  top: 20px;
  right: 25px;
}

.maxWidth200 { max-width: 200px; }
#createNftsForm input[type="text"], #createNftsForm input[type="tel"], #transfer_fee { border: 1px solid #d2d2d2 !important; }

.commonsection .custom-tabs ul.nav-tabs {
  border: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
.commonsection .custom-tabs ul.nav-tabs li.nav-item a {
  font-size: 14px;
  color: #000;
}
.common-table .table thead tr th {
  padding: 20px 15px;
  font-size: 14px;
  color: #000;
}
.common-table .table tbody tr td {
  padding: 20px 15px;
}
.common-table .table thead tr {
  background: #f2f2f2;
}
.common-table .dataTables_wrapper,
.common-table .card {
  border-radius: 5px;
}
.common-table.orderStatus {
  padding: 0px;
  border: none;
}
.tab-content {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 50px;
  background: #fff;
}

.commonsection .tab-content {
  color: #000;
  font-weight: bold;
  margin-bottom: 30px;
}

.commonsection .tab-content h4 {
  font-weight: bold;
  margin-bottom: 30px;
}
.commonsection .badge {
  font-size: 13px;
}

.btn.btn-primary {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  border: none;
}
.btn.btn-primary:hover {
  box-shadow: none !important;
}

.modal.upgradePlan .planBox .check {
  border: 2px solid #45b970;
}

.custom-tabs ul.nav-tabs li.nav-item a.active:after,
.custom-tabs ul.nav-tabs li.nav-item a:hover:after {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
}

.dataTables_processing.card {
  border: none;
  box-shadow: none;
  margin-top: 30px;
  margin-left: 0px;
}

.common-table .table tbody tr td .artInfo p,
.common-table .table tbody tr td .artInfo p {
  white-space: normal;
  font-size: 12px;
  word-wrap: break-word;
  font-weight: normal;
  color: #b4b0b0;
}
.common-table .table tbody tr td .feeturreInfo__img,
.common-table.buyNowTable .feeturreInfo__img {
  max-height: none;
  border-radius: 10px;
}
.common-table .table tbody tr td .artInfo h5,
.common-table.buyNowTable .table tbody tr td .artInfo h5 {
  font-size: 18px;
  color: #000;
}
.orderDetails .common-table .table tbody tr td {
  font-size: 15px;
}

span.OrderIdDetails {
  font-size: 13px;
  color: #ccc;
  margin-left: 20px;
}
.common-table {
  border: 1px solid #e8e8e8;
  border-radius: 35px;
}

#switchingSellerModal,
#switchingBuyerModal,
#createNewFeeturreModal,
#sponsorModal {
  color: #fff;
}
#switchingSellerModal .modal-content,
#switchingBuyerModal .modal-content,
#createNewFeeturreModal .modal-content,
#imageCropperModal .modal-content,
#sponsorModal .modal-content {
  padding: 50px !important;
  border-radius: 10px;
}
#switchingSellerModal .modal-body,
#switchingBuyerModal .modal-body,
#createNewFeeturreModal .modal-body,
#imageCropperModal .modal-body,
#sponsorModal .modal-body {
  padding: 0px;
  padding-top: 24px;
  text-align: center;
}
#switchingSellerModal h5.modal-title,
#switchingBuyerModal h5.modal-title,
#createNewFeeturreModal h5.modal-title,
#imageCropperModal h5.modal-title,
#sponsorModal h5.modal-title {
  display: inline-block;
  background: #fff;

  padding: 11px 22px;
  border-radius: 6px;
  margin-bottom: 20px;
}

#switchingSellerModal h5.modal-title span,
#switchingBuyerModal h5.modal-title span,
#createNewFeeturreModal h5.modal-title span,
#sponsorModal h5.modal-title span {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#imageCropperModal h3 span {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  padding: 17px;
  border-radius: 50px;
  opacity: 1;
  font-size: 16px;
}

.modal.bgGreen .modal-header .modal-title {
  color: #fff !important;
}

.modal {
  color: #000;
}
.modal .modal-content {
  padding: 50px !important;
  border-radius: 10px;
}
.modal .modal-body {
  padding: 0px;
  padding-top: 24px;
  text-align: center;
}

.modal h5.modal-title {
  display: inline-block;
  background: #fff;

  padding: 11px 22px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.darkMode .modal h5.modal-title {
    background: transparent;
    color: #fff;
}
.musicwrapper__collaborators h4 small { font-size: 10px;
  font-weight: normal;
  color: #c0c0c0; }

.modal h5.modal-title span {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal .modal-header .modal-title,
.ModuleTitle h3 {
  display: flex;
  color: #fff;
  border-bottom: 1px solid #ffffff80;
  padding-bottom: 25px;
  position: relative;
  margin-bottom: 25px;
  align-items: center;
  justify-content: space-between;
}
.modal .modal-header .close,
.ModuleTitle h3 a {
  display: inline-block;
  float: right;
  background: #fff;
  padding: 12px;
  width: 50px;
  height: 50px;
  line-height: 23px;
  text-align: center;
  position: absolute;
  top: -12px;
  right: 0px;
  border-radius: 100px;
}

.modal .modal-body.pad0 {
  padding: 0px;
}
.modal .modal-header .modal-title,
.ModalBlackText h3 {
  color: #000;
  border-color: #ccc;
  font-weight: bold;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal .modal-header .close,
.ModalBlackText h3 a {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  -webkit-text-fill-color: #fff !important;
  position: static;
}

.ModuleTitle.ModalBlackText h3 a span {
  -webkit-text-fill-color: #fff !important;
}
.modal .modal-header {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#imageCropperModal h3 {
  color: #000;
  border-color: #0003;
}

#btnCloseCropper {
  opacity: 1;
  color: #fff;
}

.ModuleTitle h3 a span,
.orderDetails .common-table .table tbody tr td .commonDetail p span {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: normal;
}

#createNewFeeturreModal .modal-body li {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 50%
  );
  display: inline-block;
  padding: 3px;
  border-radius: 5px;
  width: 33.3333%;
}

.socialList li .icon {
  /*font-size: 30px !important;*/
  width: 75px;
  height: 75px;
}

#createNewFeeturreModal .modal-body li:last-child {
  margin-right: 0px !important;
}

#createNewFeeturreModal.modal .btn.btn-outline-light:hover {
  background: #fff;
  color: #000 !important;
}

#createNewFeeturreModal.modal .btn.btn-outline-light {
  border: none;
  color: #020202;
  background-color: #fff;
  padding-left: 16px;
  padding-right: 14px;
  border-radius: 5px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.white-text, .djPharrisPage h3.white-text {
  color: #fff;
}
.white-text:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

#upgradePlan .modal-body {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 30px;
}
.modal.upgradePlan .planBox label {
  border-radius: 10px;
  font-size: 14px;
  text-align: left;
  min-height: 65px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#createNewFeeturreModal.modal ul {
  margin-top: 30px;
  margin-bottom: 50px;
}

#createNewFeeturreModal.modal li:hover {
  box-shadow: 4px 4px 9px 3px #ff5f4475;
}

.common-table.buyNowTable {
  border: 1px solid #c4c3cc;
}
.common-table.buyNowTable thead tr {
  border-bottom: 1px solid #c4c3cc;
}

.orderDetails .common-table .table tbody tr td .commonDetail .pink-color {
  color: #111111;
}

.modal.upgradePlan .planBox input:checked ~ label {
  background-color: #d9d9d94a;
  border-color: #d9d9d94a;
}

.modal.upgradePlan .planBox .planName h5 {
  font-size: 18px;
}
.modal.upgradePlan .planBox input:checked ~ label .planName {
  color: #010101;
}
.modal.upgradePlan .planBox input:checked ~ label .price,
.modal.upgradePlan .planBox input:checked ~ label .date,
.modal.upgradePlan .planBox input:checked ~ label .removePlan {
  color: #010101;
  background: #ffffffb0;
}

.modal.upgradePlan .planBox input:checked ~ label .check {
  border-color: transparent;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
}

.modal.upgradePlan .planBox .price {
  background: #d9d9d98c;
  padding: 4px 14px;
  border-radius: 5px;
}

.addFeeturre .stepProgress li a .progressDot {
  background: #d3d1dd50;
  width: 56px;
  height: 56px;
  margin-bottom: 25px;
}
.addFeeturre .stepProgress li a .progressDot:before {
  background: #d3d1dd;
  width: 32px;
  height: 32px;
}

.addFeeturre .stepProgress li a.active .progressDot {
  background: linear-gradient(to right, #21bac050 0%, #47ba6d50 100%);
}
.addFeeturre .stepProgress li a.active .progressDot:before {
  background: linear-gradient(to right, #21bac0 0%, #47ba6d 100%);
}
.addFeeturre .stepProgress li:not(:last-child):after,
.addFeeturre .stepProgress li:not(:last-child):before {
  top: 28px;
}

.addFeeturre .stepProgress li a.active {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.addFeeturre .stepProgress li a {
  font-size: 18px;
}
.addFeeturre .stepProgress li a {
  font-size: 18px;
  color: #a1a1a1;
}
.addFeeturre .uploadType label {
  border: none !important;
  padding: 0px;
  background: transparent;
  max-width: 50px;
  margin: 0 auto;
}
.addFeeturre .uploadType {
  max-width: 100%;
}

.addFeeturre .uploadType ul li {
  font-size: 17px;
  background: #f9f9f9;
  padding: 15px;
  margin: 11px;
  border-radius: 10px;
  border: 1px solid #d2d2d2;
}
.addFeeturre .uploadType ul li {
  width: 180px;
}

.addFeeturre .uploadType ul li.textActive {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  border-color: transparent;
}

.addFeeturre .uploadType .iconBox {
  width: 100%;
  max-width: 156px;
}

.addFeeturre .uploadType .iconBox.textActive:not(.feeturre-type) ~ span {
  color: #fff;
}

.addFeeturre .uploadType ul li .white {
  display: none;
}
.addFeeturre .uploadType ul li.textActive .white {
  display: block;
}
.addFeeturre .uploadType ul li.textActive .black {
  display: none;
}
.addFeeturre .stepProgress {
  max-width: 1150px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.addFeeturre .uploadType {
  margin-top: 0px;
}
.addFeeturre fieldset {
  padding: 75px;
}

.form-group label > [class*="icon-"],
.input-group label > [class*="icon-"] {
  font-size: 12px;
  margin-right: 5px;
}

.messagePage {
  padding-top: 150px;
}

.messagePage .custom-tabs ul.nav-tabs {
  border: none;
  border-radius: 0px;
  background: transparent;
}
.messagePage .custom-tabs ul.nav-tabs li.nav-item a {
  color: #000;
}
.messagePage__left .chatWrap {
  border: none;
  background: #f6f6f9;
}
.chat_box_Order,
.chat_box_Request,
.chat_box_Regular {
  border-left: 2px solid #fff;
}

.messagePage__right .userWrap {
  border: none;

  padding: 0px;
}
.messagePage__right .userWrap__head .form-group .form-control {
  padding-right: 60px;
  height: 50px;
  border: 0;
  font-size: 15px;
  background: #fff !important;
}

.messagePage__left .chatWrap__head h2 {
  font-size: 16px;
}
.messagePage__left .chatWrap__head span {
  font-size: 12px;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.messagePage__left .chatWrap__footer .msgWrap .btnAttachment {
  right: 110px;
}
.messagePage__right .userWrap__head em.icon-search {
  font-size: 16px;
}
.messagePage__left .chatWrap__head {
  padding: 20px 20px;
}
.messagePage__left .chatWrap__footer .msgWrap textarea {
  opacity: 1;
  background: #fff;
  padding: 13px 18px;
  line-height: 23px;
  height: 50px;
}

.messagePage__right .userWrap__body {
  background: none;
}
.alert.alert-danger {
  border-radius: 0;
  border: 0;

  font-family: "Sora-Bold";
  background-color: #ffecea;
  color: #1c2753;
  margin-top: 29px;
  border-radius: 10px;
  margin: 20px;
}

.messagePage__right .userWrap__head {
  border: none;
  padding: 20px;
}
.messagePage__right .userWrap__body .userList.selected {
  background: none !important;
}
.messagePage__right .userWrap__body .userList {
  border-bottom: 1px solid #e8e8e8;
}
.messagePage__right .userWrap__body .userList h2 {
  font-size: 16px;
}
.messagePage__right .userWrap__body .userList .handle {
  font-size: 13px;
}
.messagePage__right .userWrap__body .userList p {
  font-size: 12px;
}
.messagePage .time {
  font-size: 12px;
  margin-bottom: 10px;
  color: #ccc;
}
.messagePage__left .chatWrap__body .attachment ul li img {
  border-radius: 100px;
  max-width: 60px;
}
.messagePage__left .chatWrap__body .msgList.rcv p:before,
.messagePage__left .chatWrap__body .msgList.send p:before {
  display: none;
}
.messagePage__left .chatWrap__body .msgList p {
  border-radius: 20px;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  font-size: 14px;
  line-height: 21px;
  padding: 20px;
}
.messagePage__left .chatWrap__body .msgList.send p {
  background: #fff;
  color: #000;
}

.messagePage__right .userWrap__body .userList.selected {
  position: relative;
}
.messagePage__right .userWrap__body .userList.selected:before {
  position: absolute;
  left: 0px;
  top: 0px;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  height: 100%;
  width: 4px;
  content: "";
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.messagePage .tab-pane {
  background: #f6f6f9;
  border-radius: 20px;
  overflow: hidden;
}

.exclusiveSponserBuynow .paymentMethod__left {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  border-radius: 5px;
  color: #fff;
  margin-right: 10px;
}

.badge.bg-theme {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  position: relative;
  top: -2px;
  line-height: 24px;
  height: 22px;
  width: 22px;
  text-align: center;
  padding: 0px;
}

.exclusiveSponserBuynow .paymentMethod__left .user {
  background: #ffffff29;
  margin: 30px;
  border-radius: 5px;
}

.exclusiveSponserBuynow .paymentMethod__left .payInfo label,
.exclusiveSponserBuynow .paymentMethod__left .payInfo span {
  color: #fff;
}

.exclusiveSponserBuynow .paymentMethod__left .toPay {
  border-top: 1pxsolidrgba (11, 4, 52, 0.2);
  width: auto;
  background: #fff;
  color: #000;
  margin: 30px;
  box-sizing: border-box;
  border-radius: 5px;
  padding-top: 10px !important;
  padding-bottom: 17px !important;
}

.exclusiveSponserBuynow .paymentMethod__left .toPay label {
  margin-bottom: 0px;
}
/*
body.darkMode .exclusiveSponserBuynow .paymentMethod__left .toPay {
  background: #7b797930;
  color: #fff;
} */

inout#coupon {
  background: #ffffffab;
  border: none !important;
  border-radius: 5px !important;
}

.exclusiveSponserBuynow .paymentMethod .paymentMethod__left .user,
.exclusiveSponserBuynow .paymentMethod__left .paymentMethod .user,
.exclusiveSponserBuynow .paymentMethod .paymentMethod__left .applyCoupon,
.exclusiveSponserBuynow .paymentMethod__left .paymentMethod .applyCoupon,
.exclusiveSponserBuynow .paymentMethod .paymentMethod__left .payInfo,
.exclusiveSponserBuynow .paymentMethod__left .paymentMethod .payInfo,
.exclusiveSponserBuynow .paymentMethod .paymentMethod__left .toPay,
.exclusiveSponserBuynow .paymentMethod__left .paymentMethod .toPay,
.exclusiveSponserBuynow .paymentMethod .paymentMethod__right__top,
.exclusiveSponserBuynow .paymentMethod .paymentMethod__right__bottom {
  padding-left: 30px;
  padding-right: 30x;
}

.exclusiveSponserBuynow .paymentMethod__right {
  /* border: 1px solid #c4c3cc; */
  border-left: 0;
  background: #fff;
  border-radius: 5px;
  margin-left: 10px;
}

body.darkMode .exclusiveSponserBuynow .paymentMethod__right {
  background: #7b797930;
}

.bg-white {
  background-color: #ffffffb8 !important;
}

.TableGreyBg .commonDetail.PaymentInfo {
  display: flex;
  justify-content: end;
}
.TableGreyBg .commonDetail.PaymentInfo .lightGray {
  margin-left: 5px;
  color: #868686;
}

.blue-color {
  color: #000 !important;
}
.TableGreyBg {
  background: #f2f2f2;
  border-radius: 5px;
  padding: 35px 50px;
  padding-bottom: 20px;
}
.TableGreyBg .commonDetail {
  text-align: right;
}

.orderDetails
  .common-table
  .table
  tbody
  tr
  td
  .TableGreyBg
  .commonDetail
  + .commonDetail {
  margin-top: 15px;
}
.TotalAmount {
  padding-top: 22px;
  border-top: 1px solid #e0dddd;
  margin-top: 10px;
}

.orderDetails .common-table .table tbody tr td .UserInfo p {
  font-size: 16px;
  color: #b4b0b0;
}

.orderDetails .common-table .table tbody tr td .UserInfo h5 span {
  font-size: 14px;
}

.orderDetails .common-table .table tbody tr td .commonDetail label {
  margin-bottom: 10px;
  color: rgb(108 108 108 / 80%);
}

.orderDetails .common-table .table tbody tr td .commonDetail label strong {
  color: #000;
}

.orderDetails .common-table .table tbody tr td .UserInfo h5 {
  font-size: 18px;
}

.mCustomScrollbar .mCSB_draggerContainer {
  border-radius: 0px;
}
.profile .formCommon .commonSection,
.profile .formCommon {
  padding: 0px;
  margin: 0px;
  border: none;
  background: no-repeat;
}
.profile .formCommon .common-table tr th:not(:last-child),
.profile .formCommon .common-table tr td:not(:last-child) {
  padding-left: 15px;
}

.modal .modal-body {
  text-align: left;
}

.innerGray {
  padding: 22px;

  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
}

.custom-checkbox .custom-control-label,
.custom-radio .custom-control-label,
#requestW9 .form-group label,
#requestW9 .input-group label {
  font-size: 14px;
}

.bootstrap-select.show div.dropdown-menu {
  border-color: transparent;
  border-radius: 10px;
  border: 1px solid #ededed;
}

.addFeeturre--exclusive {
  margin-top: 100px;
}
.addFeeturre fieldset.feeStep .selectOption .custom-radio label {
  border: none;
}
.addFeeturre .feeturreVideo .left {
  padding: 35px 0;
  padding-top: 0px;
}

.lightGraypad {
  padding: 30px;
  background: #f2f2f2;
  border-radius: 20px;
  border: 1px solid #cecdd6;
}

.addFeeturre .feeturreVideo .left h2 {
  font-size: 25px;
  color: #000000;
  margin-bottom: 16px;
}
.addFeeturre .feeturreVideo .left p {
  font-size: 14px;
}
iframe {
  border: 20px;
}

.addFeeturre p {
  color: #8e8e8e;
}
.addFeeturre .requirementsStep .quesSet .custom-checkbox .custom-control-label {
  font-size: 14px !important;
}
.addFeeturre .requirementsStep .quesSet,
.addFeeturre .requirementsStep .createSet {
  margin-top: 65px !important;
}

.addFeeturre fieldset.publishStep .publishSet .h-37 {
  margin-bottom: 10px;
  font-size: 26px;
}

.addFeeturre fieldset.publishStep .publishSet__wrap {
  border: 1px solid #f2f2f2;
  padding: 13px 60px 60px;
  background: #f2f2f2;
  border-radius: 20px;
}
.addFeeturre .feeturreVideo {
  background: none;
}

.ShopImgCntr {
  margin-top: -100px;
  background: #fff;
  border-radius: 10px;
}
.ShopImgCntr img {
  border-radius: 10px;
  overflow: hidden;
}
#products-container .card {
  border-radius: 10px;
  border: none;
  box-shadow: none;
  margin-top: 100px;
}
#products-container .card h4 {
  font-size: 15px;
  line-height: 21px;
  margin: 20px 0;
}
#products-container .card .PriceButton span,
.relatedProduct .card .PriceButton span {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.PriceButton del { color: #3ae630; }

#products-container .card .btn.btn-primary,
.relatedProduct .card .btn.btn-primary {
  padding: 8px 20px;
  font-weight: normal;
  background: #fff;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 1px solid rgba(49, 182, 128, 1);
}

#products-container .card .btn.btn-primary:hover,
.relatedProduct .card .btn.btn-primary:hover {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fff;
}

.ShopDetailPage .rightContent {
  margin-top: 100px;
}
.ShopDetailPage .rightContent .card {
  background: none;
  border: none;
  box-shadow: none;
}
.ShopDetailPage .rightContent .card h2 {
  font-size: 50px;
}
.ShopDetailPage .rightContent .card h4.Price {
  color: #2fb798;
  font-size: 30px;
  font-weight: bold;
}
.ShopDetailPage .rightContent .add-to-cart {
  max-width: 250px;
  margin-top: 40px;
}

.shortDesc {
  font-size: 20px;
  line-height: 32px;
  margin-top: 20px;
  margin-bottom: 40px;
  color: #7d7d7d;
}

.mb-b50 {
  margin-bottom: 50px;
}

.ShopDetailPage .tab-content {
  background: #e8e8e8;
  border-radius: 0px;
}
.ShopDetailPage .nav-tabs .nav-item.show .nav-link,
.ShopDetailPage .nav-tabs .nav-link.active,
.ShopDetailPage .nav-tabs .nav-link {
  color: #000;

  border-color: #dee2e6 #dee2e6 #fff;
  border-radius: 0px;
  padding: 17px 40px;
  font-size: 20px;
  border-color: transparent;
}

.ShopDetailPage .nav-tabs .nav-link.active {
  background-color: #31b8bc;
  color: #ffffff;
}
.relatedProduct {
  margin-top: 150px;
}
.relatedProduct h4 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}
.relatedProduct .card {
  border-radius: 10px;
  border: none;
  margin-top: 90px;
}
.relatedProduct .card h5 {
  font-size: 15px;
  line-height: 21px;
  margin: 20px 0;
}

#products-container .card a:hover,
.relatedProduct .card a:hover {
  color: #51bb67;
  cursor: pointer;
}

.ColoredNewBox,
.ColoredNewBox h5 {
  color: #fff;
  text-overflow: unset;
  white-space: unset;
}

.affiliatePage h5.sub-page-title {
  padding: 17px;
  margin-bottom: 0px;
}

body.darkMode .bootstrap-select.show div.dropdown-menu {
  border-color: #6e6e6e !important;
}
body.darkMode .custom-checkbox .custom-control-label,
body.darkMode .custom-radio .custom-control-label {
  color: #fff;
}
body.darkMode .messagePage {
  color: #fff;
}
body.darkMode .blue-color,
body.darkMode .messagePage .custom-tabs ul.nav-tabs li.nav-item a,
body.darkMode .black-color {
  color: #fff !important;
}

body.darkMode #add-collabration-form .modal-content {
  background-color: #000;
  border: 1px solid #a7a8aa;
}

body.darkMode .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #fff;
}

body.darkMode .innerGray {
  border: 1px solid #6e6e6e;
}
body.darkMode .ModuleTitle h3 {
  border-color: #6e6e6e;
}

body.darkMode #add-collabration-form #edit-col-form span,
body.darkMode #add-collabration-form #edit-col-form label,
body.darkMode #add-collabration-form #addCollabrationLabel {
  color: #fff;
}

body.darkMode .messagePage__right .userWrap__body .userList,
body.darkMode .messagePage__left .chatWrap__head,
body.darkMode .chat_box_Order,
body.darkMode .chat_box_Request,
body.darkMode .chat_box_Regular {
  border-color: #000000;
}

/* body.darkMode .tab-content {
  background: #000;
  border-color: #000;
} */
body.darkMode #paidFeeturre .tab-content {
  background: transparent;
}
body.darkMode .messagePage .tab-pane,
body.darkMode .messagePage__left .chatWrap,
body.darkMode .notificationPage .notification__box--new {
  background: #464646;
}

body.darkMode #add-collabration-form #addCollabrationLabel {
  border-bottom: 1px solid #a7a8aa;
  padding-bottom: 7px;
}

body.darkMode .mainHeader .navbar-nav li.notificationDrop .dropdown-menu {
  background: #000;
  box-shadow: 0px 0px 25px #464646 !important;
  color: #fff;
}

body.darkMode
  .mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notiHeader
  h2,
body.darkMode
  .mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notiFooter
  a {
  color: #fff;
}

body.darkMode
  .mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__text {
  color: #ffffff;
}

body.darkMode
  .mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notiHeader {
  border-bottom: 1px solid #a7a8aa;
}

body.darkMode
  .mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notiFooter {
  background: #464646;
  border-color: #a7a8aa;
}

body.darkMode .bg-white {
  background-color: #000000b8 !important;
  border-color: #5d5d5d;
}

body.darkMode .TableGreyBg {
  background: #3f3f3f;
}

body.darkMode
  .orderDetails
  .common-table
  .table
  tbody
  tr
  td
  .commonDetail
  label {
  color: #ffffff9e;
}
body.darkMode
  .orderDetails
  .common-table
  .table
  tbody
  tr
  td
  .commonDetail
  label
  strong,
body.darkMode .orderDetails .common-table .table thead tr th {
  color: #fff;
}
body.darkMode .common-table .table tbody tr td,
body.darkMode .TotalAmount {
  border-color: #5d5d5d;
  color: #fff;
}
body.darkMode .common-table .table thead tr {
  background: #3f3f3f;
}

body.darkMode .dropdown-menu.dropdown-menu-right:after {
  border-bottom-color: #000;
}

body.darkMode .SideFlyout {
  background: #000;
}
body.darkMode .SideFlyoutInner {
  background: #2d282a;
}

body.darkMode .SideFlyout ul li {
  background: #000;
  border-color: #000;
}
body.darkMode .accountAddress a,
body.darkMode .commonsection .tab-content,
body.darkMode .common-table .table thead tr th {
  color: #fff;
}
body.darkMode .commonsection .custom-tabs ul.nav-tabs li.nav-item a {
  color: #fff;
}
body.darkMode .common-table {
  background: transparent;
  border-color: transparent;
}
body.darkMode .SideFlyout h3 a {
  border-color: transparent;
}
body.darkMode .addFeeturre fieldset {
  background: #000;
  border: 1px solid #5d5d5d;
}
body.darkMode .addFeeturre fieldset.detailStep {
  background: transparent;
  border-color: transparent;
}
body.darkMode .addFeeturre .uploadType ul li {
  background: #2d282a;
  border: 1px solid #5d5d5d;
}
body.darkMode .addFeeturre .uploadType ul li .white {
  display: inline-block;
}
body.darkMode .addFeeturre .uploadType ul li .black {
  display: none;
}

body.darkMode .addFeeturre .uploadType ul li.textActive .white {
  display: none;
}
body.darkMode .addFeeturre .uploadType ul li.textActive .black {
  display: inline-block;
}
body.darkMode .addFeeturre .uploadType ul li.textActive {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff;
  border-color: transparent;
}
body.darkMode .form-group label,
body.darkMode .input-group label {
  color: #fff;
}
body.darkMode .detailStep .box-with-title {
  background: #000;
  border: 1px solid #5d5d5d;
}
body.darkMode .boxHeader {
  background: #3f3f3f;
  border-bottom: 1px solid #5d5d5d;
}

body.darkMode .bootstrap-select .dropdown-toggle:after {
  color: #fff;
}

body.darkMode .form-group input.form-control,
body.darkMode input.form-control,
body.darkMode textarea.form-control,
body.darkMode select.form-control,
body.darkMode .form-group textarea.form-control,
body.darkMode .input-group input.form-control,
body.darkMode .input-group textarea.form-control,
body.darkMode .addFeeturre .artistTypeDrop .dropdown-toggle {
  background: #3f3f3f !important;
  color: #fff !important;
  border-color: #5d5d5d !important;
}

body.darkMode .modal-content {
  background: #393939;
}
body.darkMode #earningGoalModal .modal-header .close {
  background: #fff;
  color: #000;
}

.earningPage .counterBox__left  { max-width:100%; }

body.darkMode .bootstrap-select .dropdown-toggle:hover,
body.darkMode .bootstrap-select .dropdown-toggle:focus,
body.darkMode .bootstrap-select .dropdown-toggle:active:focus,
body.darkMode .bootstrap-select .dropdown-toggle:active,
body.darkMode .bootstrap-select .dropdown-toggle:active:hover,
body.darkMode .bootstrap-select .dropdown-toggle:not(:disabled),
body.darkMode .bootstrap-select .dropdown-toggle:not(.disabled):active {
  background: #3f3f3f !important;
  color: #fff;
}

body.darkMode .bootstrap-select.show .dropdown-menu {
  background: #3f3f3f !important;
}
body.darkMode .modal-content a {
  color: #00cb50;
}

.filterSection__wrapper > li {
  margin-right: 15px !important;
}
.listBox__favorite input[type="checkbox"]:checked + span[class^="icon-"] {
  background: url(../images/flame-green.png) no-repeat center;
}

.listBox__favorite input[type="checkbox"]:checked + span[class^="icon-follow"] {
  background: url(../images/followed-icon.png) no-repeat center;
}

#exclusive-detail .artTypeSection .commonList label,
#exclusive-detail .genreSection .commonList label,
#exclusive-detail .strSection .commonList label,
#exclusive-detail .keySection .commonList label,
#exclusive-detail .promotionalSection .commonList label,
#exclusive-detail .moodSection .commonList label,
#lease-detail .artTypeSection .commonList label,
#lease-detail .genreSection .commonList label,
#lease-detail .strSection .commonList label,
#lease-detail .keySection .commonList label,
#lease-detail .promotionalSection .commonList label,
#earningGoalModal .commonList label,
#lease-detail .moodSection .commonList label,
.editProfile .profileInfo__artistType .commonList label {
  border: 1px solid #31b680;
  /* height: 42px; */
  margin-bottom: 10px;
  cursor: pointer;
  padding: 15px 23px !important;
  color: #31b680;
  font-family: "Sora-Medium";
  font-size: 16px;
  border-radius: 100px;
}

.editProfile .profileInfo,
.userProfilePage {
  margin-top: 100px !important;
}

#exclusive-detail .artTypeSection .commonList input:checked + label,
#exclusive-detail .genreSection .commonList input:checked + label,
#exclusive-detail .strSection .commonList input:checked + label,
#exclusive-detail .keySection .commonList input:checked + label,
#exclusive-detail .promotionalSection .commonList input:checked + label,
#exclusive-detail .moodSection .commonList input:checked + label,
#lease-detail .artTypeSection .commonList input:checked + label,
#lease-detail .genreSection .commonList input:checked + label,
#lease-detail .strSection .commonList input:checked + label,
#lease-detail .keySection .commonList input:checked + label,
#lease-detail .promotionalSection .commonList input:checked + label,
#earningGoalModal .commonList input:checked + label,
#lease-detail .moodSection .commonList input:checked + label,
.editProfile .profileInfo__artistType .commonList input:checked + label {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
  color: #fff;
}

.switch label input[type="checkbox"]:checked ~ .lever:before,
.switch label input[type="checkbox"]:checked ~ .lever:after,
.switch label .lever:before,
.switch label .lever:after {
  box-shadow: none;
}

.switch label .lever {
  background-color: rgb(216 213 213);
}

.switch label input[type="checkbox"]:checked ~ .lever {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
}

#earningGoalModal .commonList label {
  border-radius: 15px;
  color: #000;
}

.uploadBox__wrap {
  background-color: #f2f2f2;
}

.thumbnailSection .commonList {
  margin-top: 25px;
}

#earningGoalModal .form-group {
  margin-bottom: 10px;
}

#earningGoalModal .modal-header .close {
  color: #fff;
  background: #333;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  position: absolute;
  top: 50px;
  right: 45px;
}

#earningGoalModal .modal-header h5,
#earningGoalModal .modal-header {
  padding: 0px;
}

#earningGoalModal .earn_amount {
  background: #eaeaea;
}

#earningGoalModal .modal-header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 30px;
}

.expand-check::after {
  position: absolute;
  content: "+";
  left: 2px;
  top: -2px;
  font-size: 24px;
  color: #bbbdbf;
  line-height: 23px;
  text-align: center;
}

.expand-check::after {
  content: "+";
  left: 2px;
  top: -2px;
}

.expand-check:checked::after,
li.active .expand-check::after {
  content: "-";
  left: 3px;
  top: -3px;
  border: none;
}

.extra-text {
  color: #000;
}

.mainHeader .navbar-nav li.extra-info .dropdown-menu {
  background-color: #fff !important;
  margin-top: 15px !important;
  min-width: 225px !important;
  border-radius: 30px !important;
  border: 3px solid #4bba6b !important;
}

.mainHeader .navbar-nav li.user-info .dropdown-menu .dropdown-item,
.mainHeader .navbar-nav li.extra-info .dropdown-menu .dropdown-item {
  font-size: 16px !important;
  color: #000 !important;
  font-family: unset !important;
}

.faq-page .card {
  margin: 0;
}

.faq-page .btn {
  padding: 0 !important;
}

.faq-page .card-header {
  text-align: left;
  background-color: #fff;
}

body.darkMode .faq-page .card-header {
  background-color: #000;
  border-bottom: 2px solid #fff;
}

.faq-page .card-header .btn {
  color: #000;
}

body.darkMode .faq-page .card-header .btn {
  color: #fff;
}

.faq-page .card-body {
  color: #000;
  text-align: left;
}

body.darkMode .faq-page .card-body {
  color: #fff;
  background: #000;
}

.m-b-30 {
  margin-bottom: 30px;
}

.tutorial-page .tutorial-desc {
  font-size: 25px;
  font-weight: bold;
  margin-top: 10px;
  color: #000;
  font-family: "Sora", sans-serif;
}

body.darkMode .tutorial-page .tutorial-desc {
  color: #fff;
}

.tutorial-text,
.faq-text {
  color: #000;
}

body.darkMode .tutorial-text,
body.darkMode .faq-text {
  color: #fff;
}

.extra-text:hover:after {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
  height: 4px;
  content: "";
  left: 0px;
}

.extra-text:hover {
  color: #000;
}

.addFeeturre .requirementsStep .quesSet,
.addFeeturre .requirementsStep .createSet {
  margin-top: 25px;
}

.addFeeturre .requirementsStep .quesSet .h-27,
.addFeeturre .requirementsStep .createSet .h-27 {
  margin-bottom: 25px;
}

.addFeeturre .requirementsStep .quesSet .custom-checkbox + .custom-checkbox {
  margin-top: 35px;
}

.addFeeturre .requirementsStep .quesSet .custom-checkbox .custom-control-label {
  font-size: 20px;
  color: #000;
  display: inline-block;
}

.addFeeturre .requirementsStep .addOptionalAnswer__field .removeAddOption {
  width: 26px;
  height: 26px;
  position: absolute;
  right: -10px;
  top: -12px;
  background-color: #ef384c;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressive--is-loaded {
  animation: unset;
  filter: blur(0);
}

/* .progressive--not-loaded {
  filter: blur(0);
} */
#community-sidebar {
  width: 100%;
}

#community-sidebar .nav {
  display: unset;
}

#community-sidebar .nav a {
  background: none;
  border-bottom: 1px solid #d4d8db;
  font-size: 25px;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.darkMode #community-sidebar .nav a {
  color: #fff;
}

.darkMode #community-sidebar .nav a.active {
  color: #000;
}

#community-sidebar .nav a.active {
  background: #fff;
}

#community-sidebar .nav a:hover {
  background: none;
  color: #eceff1;
}

.dropdown-menu a.dropdown-item:hover {
  background: none;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu {
  background: #fff;
  border-radius: 10px;

  border: none;
  box-shadow: 0px 0px 25px #d6d6d6 !important;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiHeader h2,
.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiFooter a {
  color: #000;
  font-size: 18px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu {
  right: -40px;
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notifications
  .mCSB_container {
  padding-right: 10px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notificationsList {
  margin-left: 0px;
  padding-left: 30px;
}

.thumbnailSection ul li {
  padding: 0 7.5px;
  font-family: "Sora-Bold";
  text-align: left;

  font-size: 22px;
}

.backLink .btn.btn-outline-secondary {
  color: #000;
  border: none;
  background: transparent !important;
}

.backLink span.material-icons {
  top: 5px;
  position: relative;
}

.borderRadius10 {
  border-radius: 10px;
  overflow: hidden;
}
.uploadBox__wrap {
  box-shadow: none !important;
}
.marginBottom40 {
  margin-bottom: 40px;
}
.notificationPage .notification__box {
  padding-top: 5px;
  padding-bottom: 5px;
}
.notificationPage .notification__image {
  width: 50px;
  max-width: 50px;
}
.notificationPage .notification__media .media-body h5 {
  font-size: 16px;
}
.notificationPage .notification__titlte {
  font-size: 20px;
  color: #888;
  margin-top: 50px;
  text-align: center;
  margin-bottom: 20px;
}
.detailsIntro .box-padd {
  padding: 40px;
  background: #fff;
}

.feeturre__videoBox .tab-content {
  border: none;
  background: transparent;
  padding: 0px;
  border-radius: 0xp;
}

.contactUs .contactSection__wrap {
  background: transparent;
  border: none;
  background-repeat: no-repeat;
  background-position: right;
}

.pad50 {
  padding: 50px;
  background: #fff;
}

.thumbnailSection .iconBox {
  position: relative;
  margin-bottom: 10px;

}

.contactFormBg {
  background: #fff;
  padding: 50px;
  border: 1px solid #dddce7;
  border-radius: 10px;
}

.custom-tabs .tabsBtn .btn {
  border-radius: 10px;
  height: 46px;
}
.custom-tabs.customCentertabs ul.nav-tabs {
  margin-bottom: 50px !important;
}
.listRowSponsor {
  margin-bottom: 30px;
}
.editProfile .profileInfo__inner {
  background: none;
  padding: 0px;
  border: none;
}
.editProfile .bannerSection__content .userProfile {
  left: 0px;
  transform: translateX(0px);
  bottom: -122px;
}
.uploadBox__contentType--video {
  max-width: 100%;
}
.thumbnailSection .iconBox input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.thumbnailSection .iconBox input:checked ~ label {
  border: 2px solid #00cb50;
}

.thumbnailSection .iconBox label {

    width: 100%;
    margin-bottom: 0;
    /* padding: 25px; */
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    max-width: 80px;
}

.thumbnailSection ul li span { display: none; }



.thumbnailSection .iconBox label img {
  width: 100%;
}
.tree ul li:not(.has),
.tree li:not(.has) {
  display: flex;
  align-items: center;
}
/* label.country-flag div {
  display: inline-table;
  position: relative;
  top: 10px;
} */

.countryList li label {
  font-size: 17px !important;
  max-height: 30px;
  max-width: calc(100% - 65px) !important;
}

.colored-checkbox,
.colored-radio,
.expand-check {
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.colored-checkbox:checked,
.tree ul li.active .colored-checkbox,
.colored-radio:checked {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
}

.reprePage .colored-checkbox:checked,
.reprePage .tree ul li.active .colored-checkbox {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
}

.modal.bgGreen .modal-content {
  background-color: #ffffff;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
}

.modal.bgGreen .modal-header .modal-title {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#earningGoalModal .modal-header .modal-title {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
}

.modal .btn.btn-outline-light {
  border-color: #252525;
  color: #020202;
  background-color: transparent;
}

.modal .btn.btn-outline-light:hover,
.modal .textActive {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 50%
  );
  color: #fff !important;
}

.addFeeturre fieldset {
  border-radius: 20px;
}

.addFeeturre .box-padd {
  padding: 60px;
}

.boxHeader {
  background: #f2f2f2a8;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #dddce7;
}

.feeturreArtType h5 {
  margin-bottom: 15px;
}

.feeturreArtType .h-14 {
  font-size: 16px;
}

.feeturreArtType ul.list-inline {
  margin-bottom: 30px;
}

.feeturreArtType .list-inline-item:not(:last-child),
.list-inline-item:not(:last-child) {
  margin-right: 10px !important;
}

.boxHeader label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0px;
}

.addFeeturre .rm-con-style {
  background: none;
  padding: 0px;
  border: none;
}
.addFeeturre .box-with-title {
  background: #fff;

  border-radius: 10px;
  border: 1px solid #dddce7;
  margin-bottom: 30px;
}

.addFeeturre .btn.btn-primary,
.orderDetails .countDown--Box .counterValue span {
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;
  color: #fff;
  border: none;
}

.form-group input.form-control,
.form-group textarea.form-control,
.input-group input.form-control,
.input-group textarea.form-control,
.addFeeturre .artistTypeDrop .dropdown-toggle {
  border: 1px solid #d5d4db !important;
}

.btn.btn-primary,
.orderDetails .orderSection__video {
  border-radius: 5px;
}

.media-counterBox .btn {
  width: 100%;
}

.orderDetails .submitBtn {
  background: none !important;
}

.addFeeturre .form-group .form-control,
.addFeeturre .input-group .form-control {
  height: 50px;
  border-radius: 0px;
}

.orderDetails .orderSection {
  padding: 30px;
  border: 1px solid #e8e8e8;
  margin-top: 21px;
  border-radius: 5px;
}

.dashWhiteBtn span.material-icons {
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 5px;
  position: relative;
  display: inline-block !important;
  width: auto;
  margin-bottom: 0px;
  padding-right: 12px !important;
  font-size: 24px;
}

.font-25 {
  font-size: 25px !important;
}

#save-goal-btn {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  border-color: unset;
}

#earningGoalModal .modal-content {
  border-radius: 35px;
}

.dataTables_wrapper {
  border: 1px solid #e8e8e8;
  border-radius: 15px;
  overflow: hidden;
}

.details-page { margin-top: 150px !important; }

.details-page .detailsBox__left .totalFigure__info span {
  color: #b8b8b8;
}

body.darkMode .details-page .detailsBox__left .totalFigure__info span {
  color: #b8b8b8;
}

body.darkMode .dataTables_wrapper {
  border: 1px solid #5d5d5d;
}
body.darkMode .addFeeturre fieldset.publishStep .publishSet__wrap {
  border: 1px solid rgb(45 40 42);
  padding: 15px 60px 60px;
  background: #2d282a;
  border-radius: 10px;
}

body.darkMode .ModalBlackText h3,
body.darkMode .modal,
body.darkMode .modal.upgradePlan .planBox .price {
  color: #fff;
}
body.darkMode
  .common-table
  .dataTables_wrapper
  .dataTables_paginate
  .previous
  a,
body.darkMode .common-table .dataTables_wrapper .dataTables_paginate .next a {
  color: #f3f3f3;
}

body.darkMode .common-table .dataTables_wrapper .table tbody tr:last-child td {
  border-bottom: 1px solid rgb(93 93 93);
}

body.darkMode .border {
  border: 1px solid rgb(93 93 93) !important;
}
body.darkMode .detailsIntro .box-padd,
body.darkMode .pad50 {
  background: #181818;
}

body.darkMode ::-webkit-input-placeholder {
  /* Edge */
  color: #ccc !important;
}

body.darkMode :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc !important;
}

body.darkMode ::placeholder {
  color: #ccc !important;
}

body.darkMode #earningGoalModal .commonList label {
  color: #fff;
}

body.darkMode .form-group .iconRight:before,
body.darkMode .input-group .iconRight:before {
  color: #ccc !important;
}

body.darkMode
  .details-page
  .detailsBox__right
  .contentDetails__list__info
  span {
  color: #868686;
}

.custom-tabs ul.nav-tabs {
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 15px;
}

.earningPage .infoRow__box {
  border: 1px solid #e8e8e8;
  border-radius: 15px;
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__text {
  color: #000000;
  width:80%;
  text-align: left;
}
.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notificationsList,
.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList:hover {
  border-bottom: 1px solid rgb(187 187 187 / 46%);
}

.bodyOverlay {
  background: transparent;
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList:hover {
  background: rgb(187 187 187 / 6%);
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__leftWrap {
  width: 20%;
  height: 75px;
}
.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__text
  p {
  font-size: 18px;
}
.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__text
  span {
  font-size: 13px;
  margin-bottom: 15px;
  display: block;
  margin-top: 5px;
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notificationsList__text
  .timing {
  color: #acacac;
  font-size: 12px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiFooter {
  background: #f6f6f6;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiHeader {
  border-bottom: 1px solid #e0e0e0;
  margin: 0px;
  padding: 10px 30px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiFooter a {
  padding-top: 11px;
  font-size: 15px;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 11px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiFooter {
  padding-bottom: 0;
  border-top: 1px solid #e0e0e0;
  display: block;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.mainHeader .navbar-nav li.notificationDrop .dropdown-menu .notiHeader a {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainHeader
  .navbar-nav
  li.notificationDrop
  .dropdown-menu
  .notifications
  .mCSB_dragger_bar {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
}

.dropdown-menu.dropdown-menu-right:after {
  content: ""; /* Required to display content */
  position: absolute; /* Sets the position absolute to the top div */
  top: 0;
  right: 46px; /* position the little arrow */
  margin-left: -15px;
  margin-top: -18px; /* Set margin equal to border px */
  width: 0;
  z-index: 1;
  height: 0;
  /* border-bottom: solid 15px #FFF;*/ /* Creates the arrow pointing up, to change to a notch instead user border-top */
  border-left: solid 15px transparent; /* Creates triangle effect */
  border-right: solid 15px transparent; /* Creates triangle effect */
}

body.darkMode .reprePage .colored-radio {
  background: #434041 !important;
  border: 1px solid #fff;
}

.reprePage .colored-radio:checked,
body.darkMode .reprePage .colored-radio:checked,
.reprePage .tree ul li.active .colored-radio {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
  border: 1px solid rgba(175, 32, 137, 1);
}

.marketplace-title {
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  font-size: 17px;
}

.contentSet ul {
  margin-bottom: 50px;
}

.contentSet ul li {
  line-height: 30px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-family: "billcorporatenarrow-medium";
  font-size: 19px;
}

.contentSet table {
  margin-bottom: 30px;
}

.contentSet table p {
  margin-bottom: 0px;
}

.contentSet a {
  color: #00d431;
}

.contentSet a:hover {
  text-decoration: underline;
}


.mainHeader.fixed {
  background: #ffffff;
}

body {
  background: url(../images/bodybg.jpg);
}

.bannerSection__content h1 {
  color: #000;
}

.gradientBtn-g {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background: rgb(24, 186, 212);
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
}

.mainHeader .navbar-nav li a[class="nav-link"],
.mainHeader .navbar-nav li a[class="nav-link"]:hover {
  color: #000;
  position: relative;
}

.mainHeader .navbar-nav li a[class="nav-link"]:hover:after {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
  height: 4px;
  content: "";
  left: 0px;
}

.view-all {
  padding-bottom: 8px;
  position: relative;
  display: inline-block !important;
}

.view-all:hover:after {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
  height: 4px;
  content: "";
  left: 0px;
}

.c-footer .list-unstyled li a,
.c-footer .list-unstyled li a:hover {
  position: relative;
}

.c-footer .list-unstyled li a:hover:after {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
  height: 4px;
  content: "";
  left: 0px;
  top: 25px;
}

.homePage .bannerSection__content {
  position: relative;
  top: unset;
  transform: unset;
  margin-top: 250px;
  margin-bottom: 150px;
}

.homePage .bannerSection__content h1 {
  font-size: 100px;
  font-weight: bold;
  font-family: "Sora", sans-serif;
  text-transform: uppercase;
}

.homePage .bannerSection__content h1 span {
  background: linear-gradient(
    260deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heroBtn {
  position: absolute;
  bottom: 25px;
  right: 0px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 32px;
  padding: 1px 10px;
}

.homePage .trendingSection {
  background: none;
}

.homePage .trendingSection h2,
.homePage .trendingSection h3,
.homePage .trendingSection .genres,
.homePage .discoverSection h2,
.homePage .discoverSection h3,
.homePage #trendingArtistList p,
.homePage .ArtistPageList p,
.homePage .commonSection,
#feeturreList .genres {
  color: #231f1f;
}

.ArtistPageList #artistsList .listBox__detailArtist .sub {
  color: #231f1f;
}

body.darkMode .homePage .trendingSection h2,
body.darkMode .homePage .trendingSection h3,
body.darkMode .homePage .trendingSection .genres,
body.darkMode .homePage .discoverSection h2,
body.darkMode .homePage .discoverSection h3,
body.darkMode .homePage #trendingArtistList p,
body.darkMode .homePage .ArtistPageList p,
body.darkMode .homePage .commonSection {
  color: #fff;
}

.c-footer p.email {
  color: #000;
}

.listRow .col-md-4:nth-child(1) .listBox,
.listRow .col-md-4:nth-child(2) .listBox,
.listRow .col-md-4:nth-child(3) .listBox {
  margin-top: 0px;
}

.listBox {
  position: relative;
  margin-top: 38px;
  margin-bottom: 0px;
  border-radius: 20px;
  overflow: hidden;
  padding: 5px;
  background: linear-gradient(
    260deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
}

.listBox__detailFeeturres,
.listBox__detailArtist {
  margin-top: 5px;

  position: unset;
  background: #fff;
  padding: 18px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 16px;
}

.listBox__img {
  border-top-left-radius: 15px;
  border-top-right-radius: 16px;
  overflow: hidden;
  min-height: 250px;
}

.listBox__detailFeeturres img {
  top: 10px;
  left: 10px;
  border: 2px solid #fff;
  height: auto;
}

.discoverSection .listBox {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
}

.BoldTextSection {
  padding-top: 100px;
  padding-bottom: 100px;
}



.BoldTextSection h2 {
  font-weight: bold;
  font-size: 100px;
  color: #000;
  text-transform: uppercase;
  line-height: 125px;
  text-align: right;
  font-family: "Sora", sans-serif;
}



.BoldTextSection h2 span {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bannerSectionContainer {
  position: relative;
}

.h-15 {
  font-size: 17px;
}

.listBox--verified .listBox__detailFeeturres .sub,
.repre-details-artist .listBox--verified .listBox__detailArtist h2 {
  width: 100%;

  font-size: 17px;

  background-image: url(../images/verified-yellow.png);
  /* background-size: 25px !important; */
  background-size: 18px !important;
  overflow: unset;
  text-overflow: unset;
  white-space: unset;
  background-position: top right !important;
}

.listBox--verified .listBox__detailFeeturres .sub {
  text-overflow: unset;
  white-space: normal;
}

.listBox__detailFeeturres .genres,
.listBox__detailFeeturres > div h2 {
  font-size: 14px;
}

.listBox__detailFeeturres > div h2 {
  font-size: 14px;
  text-overflow: unset;
}

.toggleButton #label {
  width: 30px;
  height: 15px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #fff;
  padding: 5px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: scale(1.5);
  top: -1px;
  margin-left: 20px;
  box-shadow: 0px 0px 1px #ccc;
}

.toggleButton #label .fa-moon,
.toggleButton #label .fa-sun {
  color: #f1c40f;
}

.toggleButton #label--ball {
  width: 11px;
  height: 11px;
  background-color: #f2c304;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  position: absolute;
  transition: transform 0.2s linear;
}

.toggleButton #label--ball.darkMode {
  transform: translatex(15px);
}

.listBox__detailArtist h2.h-15,
.listBox__detailArtist h4.h-15 {
  font-size: 15px;
  width: 100%;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.listBox--verified .listBox__detailArtist h2 {
  background-size: 15px !important;
}

.list-inline-item:not(:last-child) {
  margin-right: 0px;
}

.listBox__detailArtist h2 {
  display: block;
}

.listBox__detailArtist .h-12 {
  font-size: 12px;
}

.TopBannerSection {
  padding-top: 10px;
  padding-bottom: 40px;
  text-align: center;
}

.TopBannerSection h1 {
  font-size: 120px;
  font-weight: bold;
  font-family: "Sora", sans-serif;
  text-transform: uppercase;
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0px;
}

.padtop40 {
  padding-top: 40px;
}

.sideBarInner {
  margin-top: 20px;
}

.authPage--otp .bannerSection .rightContent .form-group .otpBox {
  background-color: transparent;
}

.sideBarInner .btn.btn-primary.skill-filter-tab,
.sideBarInner .btn.btn-primary.market-filter-tab {
  border: 1px solid #000;
}

.tree {
  margin: 0px;
  padding: 0px;
  list-style: none;
  margin-bottom: 50px;
}

.tree ul {
  display: none;
  margin: 4px auto;
  margin-left: 6px;
  border-left: 1px dashed rgba(128, 194, 66, 1);
  list-style: none;
  padding-left: 0px;
}

.bpmcom {
  display: none;
}

.tree li {
  padding: 3px 10px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 30px;
  padding-right: 0px;
}

.tree li:first-child {
  border-radius: 3px 3px 0 0;
}

.tree li:last-child {
  border-radius: 0 0 3px 3px;
}

.tree label {
  cursor: pointer;
  /* font-weight: bold; */
  margin-left: 15px;
  margin-bottom: 0px;
}

.tree input[type="checkbox"] {
  margin: -2px 6px 0 0px;
}

.has > label {
  color: #000;
  font-size: 22px;
  margin-bottom: 0px;
  cursor: pointer;
}

.feeturre_award_list {
  /* width: 21%; */
  /* min-height: 155px; */
  /* background: #E8EBE8; */
  /* border-radius: 15px; */
  margin-right: 17px;
  margin-bottom: 5px;
  margin-left: 20px;
  position: relative;
}

.feeturre_award_list img {
  border-radius: 15px;
}

body.darkMode .feeturre_award_list {
  /* background: #7b797930; */
}

body.darkMode .artist-similar .darkbkue-color,
body.darkMode .similarFeeturre .darkbkue-color {
  color: #fff !important;
}

body.darkMode .feeturreBioOuter {
  background: #7b797930;
}

.award_list {
  width: 14%;
  min-height: 130px;
  background: #f2f2f2;
  border-radius: 15px;
  margin-right: 10px;
  margin-left: 12px;
  position: relative;
}

.artist_details .award_list,
.body.darkMode .artist_details .award_list {
  background: unset !important;
  border-radius: unset !important;
}

.award_title {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 40px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: linear-gradient(34deg, #e7b73d 0%, #fcdf6c 50%);
}

.award_list.active {
  background: #fff;
}

.ArtitBioOuter .award_list { margin-bottom:25px; background:transparent; }

body.darkMode .award_list.active {
  background: #000;
}

body.darkMode .award_list {
  background: #161616;
}

.award_title span {
  position: relative;
  top: 10px;
  color: #000;
}

.tree ul label,
.tree li:not(.has) label {
  font-size: 18px;
  font-weight: normal;
  margin-left: 5px;
  display: inline;
  white-space: nowrap;
  max-width: calc(100% - 25px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree .total {
  color: #e13300;
}

.sidebarSep {
  height: 0;
  width: 100%;
  background: #f1f1f2;
}

.TransBgSidebar {
  background: #e7e7e76e;
  border-radius: 20px;
}

.BoldTextInner {
  position: relative;
}

.BoldTextInner .heroBtn {
  left: 0px;
  bottom: 28px;
  top: unset;
  right: unset;
}

.homePage .commonSection__heading h3 {
  max-width: 730px;
}

.homePage .imgWrap {
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.homePage .list-inline-item {
  text-align: center;
}

.GreenGradient h1 {
  background: linear-gradient(to right, #21bac0 0%, #47ba6d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn.btn-outline-secondary {
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;
  color: #fff;
  border-color: transparent;
}

.notificationPage .notification__box--new {
  background-color: #ffffff;
  border: 1px solid rgba(11, 4, 52, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
}

.TopBannerSection.mb50 {
  padding-bottom: 50px;
}

body.darkMode .toggleButton #label {
  background: #39383a;
  border: 1px solid #000;
}

body.darkMode .toggleButton #label--ball {
  background: #efc30a;
}

body.darkMode .toggleButton #label--ball:before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: #39383a;
  right: 3px;
  border-radius: 50%;
  top: 0px;
}

body.darkMode .listBox__detailFeeturres,
body.darkMode .listBox__detailArtist {
  background: #000;
}

body.darkMode .homePage .listBox__detailFeeturres,
body.darkMode .listBox__detailArtist {
  background: #231f1f;
}

body.darkMode .listBox--verified .listBox__detailArtist h2,
body.darkMode .listBox__detailArtist h2,
body.darkMode .listBox__detailArtist .sub,
body.darkMode .listBox--verified .listBox__detailFeeturres .sub,
body.darkMode .listBox__detailFeeturres > div .amount,
body.darkMode .listBox__detailFeeturres > div h2,
body.darkMode .listBox__detailFeeturres .genres {
  color: #fff !important;
}

#marketplaceFeeturreList .listBox--verified .listBox__detailArtist h2,
#marketplaceFeeturreList .listBox__detailArtist .sub,
#marketplaceFeeturreList .listBox--verified .listBox__detailFeeturres .sub,
#marketplaceFeeturreList .listBox__detailFeeturres > div .amount,
#marketplaceFeeturreList .listBox__detailFeeturres > div h2,
#marketplaceFeeturreList .listBox__detailFeeturres .genres,
#marketplaceFeeturreList .listBox--verified .listBox__detailFeeturres h4 {
  color: #fff !important;
}

#marketplaceFeeturreList .listBox--verified .listBox__detailFeeturres h4 {
  margin-bottom: 0px;
}

#marketplaceFeeturreList .listBox__detailFeeturres .Prices {
  color: #fff !important;
}

#marketplaceFeeturreList .listBox__detailFeeturres .Prices .xrp-icon {
  background-image: url(../images/xrp-logo-white.svg);
}

.homePage .talentSection {
  background: url(../images/feeturre-rev.jpg);
  margin-bottom: 150px;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 140px;
  background-attachment: fixed;
}

.homePage .talentSection .commonSection__heading {
  position: relative;
  top: unset;
  transform: unset;
  text-align: center;
}

.homePage .talentSection {
  height: auto;
  color: #fff;
}

.homePage .talentSection .commonSection__heading h2 {
  color: #fff;
  font-size: 50px;
  margin-bottom: 20px;
}

.homePage .talentSection .commonSection__heading h4 {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 75px;
}

.homePage .talentSection .commonSection__heading h3 {
  margin-top: 10px;
}

.homePage .listBox__detailFeeturres,
.homePage .listBox__detailArtist {
  height: 122px;
}

.noabsolute {
  position: unset;
  margin-top: 30px;
}

.homePage .commonSection__heading .heroBtn {
  font-size: 60px;
  padding: 0px 25px;
}

section.monitiseSection {
  margin-bottom: 100px;
}

.c-footer p.details {
  font-size: 17px;
  margin: 35px 0;
  max-width: 350px;
  color: #000;
  line-height: 23px;
}

.c-footer h2,
.mainHeader .navbar-nav li a.active,
#menuItemList a:hover {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#menuItemList {
  text-transform: uppercase;
}

.whiteLogo {
  display: none;
}

#subscription-form {
  max-width: 80%;
}

.c-footer li + li {
  margin-top: 20px;
}

.c-footer a {
  color: #000;
  font-size: 17px;
}

#subscription-form #email {
  background: #f1f2f2;
  padding: 12px;
  font-size: 18px;
  border-radius: 0 !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;

  border: 1px solid #e5e6e6 !important;
}

body.darkMode #subscription-form #email {
  background: #414042;
}

body.darkMode #subscription-form #email::placeholder {
  color: #6d6e71;
}

#subscription-form #subscribe-user-click {
  padding: 0px 10px;
  font-size: 14px;
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;
}

#owl-feeturre-list .owl-nav,
#owl-artist-list .owl-nav,
.owl-feeturre-list .owl-nav {
  position: absolute;
  top: 40%;
  width: 100%;
}

#owl-feeturre-list .owl-nav .owl-prev,
.owl-feeturre-list .owl-nav .owl-prev,
#owl-artist-list .owl-nav .owl-prev {
  float: left;
  margin-left: -40px !important;
}

#owl-feeturre-list .owl-nav .owl-next,
.owl-feeturre-list .owl-nav .owl-next,
#owl-artist-list .owl-nav .owl-next {
  float: right;
  margin-right: -40px !important;
}

#owl-feeturre-list.owl-theme .owl-nav [class*="owl-"],
.owl-feeturre-list.owl-theme .owl-nav [class*="owl-"] {
  width: 35px;
  padding: 0;
  font-size: 20px;
  border: 3px solid rgba(250, 171, 44, 1);
  border-radius: 10px;
  background: #fff;
  color: black;
}

#owl-artist-list.owl-theme .owl-nav [class*="owl-"] {
  width: 35px;
  padding: 0;
  font-size: 20px;
  border: 3px solid rgba(50, 97, 172, 1);
  border-radius: 10px;
  background: #fff;
  color: black;
}

body.darkMode #owl-feeturre-list.owl-theme .owl-nav [class*="owl-"],
body.darkMode .owl-feeturre-list.owl-theme .owl-nav [class*="owl-"],
body.darkMode #owl-artist-list.owl-theme .owl-nav [class*="owl-"] {
  background: #2d2929;
  color: #fff;
}

#owl-artist-list.owl-theme .owl-nav [class*="owl-"]:hover {
  background: rgba(50, 97, 172, 1);
  color: #fff;
}

.color-gray {
  color: rgba(11, 4, 52, 0.5) !important;
}

.listBox__detailArtist .rating li span[class^="icon-"],
.userInfo__details .rating li span[class^="icon-"] {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#companyList .listBox__detailArtist .rating li span[class^="icon-"],
.bg-listbox-company .listBox__detailArtist .rating li span[class^="icon-"] {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.max-width-152 {
  max-width: 152px !important;
}

#owl-feeturre-list.owl-theme .owl-nav [class*="owl-"]:hover,
.owl-feeturre-list.owl-theme .owl-nav [class*="owl-"]:hover {
  background: rgba(250, 171, 44, 1);
  color: #fff;
}

.homePage .monitiseSection .list-inline-item {
  padding-right: 20px;
  padding-right: 20px;
}

.homePage .list-inline-item {
  background: none;
}

.c-footer .logo {
  max-width: 200px;
  height: auto;
}

.searchInput {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: none;
  padding: 5px 10px;
}

body.darkMode .searchInput {
  background: #2d2929;
  border: 1px solid black;
}

.Headersearch {
  display: flex;
  padding-left: 20px;

  margin-left: 20px;
  margin-right: 20px;
  padding-right: 20px;
}

.Headersearch input[type="button"] {
  background: #79c243;
  border: none;
  padding: 0 19px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-image: url("../images/search-icon49.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.authLink ul {
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

.authLink ul li {
  display: inline-block;
  vertical-align: middle;
}

.authLink ul li a {
  color: #000;
}

.SignUpNav a {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff !important;
  padding: 0px 6px;
  border-radius: 5px;
}

.SignUpNav a:hover,
.gradientBtn-g:hover {
  background: #80c242;
  color: #fff;
}

.HeroSearchBar {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 35px;
}

.followPage .HeroSearchBar,
.favorite-page .HeroSearchBar {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 35px;
}

.bg-listbox-artist {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  ) !important;
}

.bg-listbox-company {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
}

.HeroSearchBar .searchInput,
.tagInput,
.bootstrap-tagsinput input {
  border: 1px solid #ebebeb;
  width: 100%;
  padding: 10px;
  padding-left: 30px;
  font-size: 21px;
}

.bootstrap-tagsinput input {
  border: none;
}

.HeroSearchBar input[type="button"] {
  background: #79c243;
  border: none;
  padding: 0 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-image: url("../images/search-icon49.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 27px;
}

.tagInput,
.bootstrap-tagsinput input {
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 75px;
}

.bootstrap-tagsinput {
  position: relative;
  text-align: left;
  padding-left: 5px !important;
}

.bootstrap-tagsinput .badge-info {
  color: #000;
  background-color: #ffffff;
  font-weight: normal;
  border: 1px solid #ccc;
  margin-left: 2px !important;
}

body.darkMode .bootstrap-tagsinput .badge-info {
  color: #fff;
  background-color: #161515;
  font-weight: normal;
  border: 1px solid #161515;
  margin-left: 2px !important;
}

body.darkMode .TransBgSidebar {
  background: #5f5f5f6e;
}

.artists-page .bootstrap-tagsinput .badge [data-role="remove"]:after {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 50%
  ) !important;
}

.reprePage .bootstrap-tagsinput .badge [data-role="remove"]:after {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
  color: #fff;
}

.artistTagBar .bootstrap-tagsinput .badge [data-role="remove"]:after {
  color: #fff;
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  ) !important;
}

.bootstrap-tagsinput .badge [data-role="remove"] {
  color: #fff;
}

.TagBar label {
  position: absolute;
  left: 15px;
  color: #000;
  z-index: 10;
  top: 9px;
  margin-bottom: 0px;
}

.TagBar {
  margin-left: 100px;
  margin-right: 100px;
  position: relative;
  overflow: hidden;
}

.ArtistPageList .listBox {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
}

.reprePage .TopBannerSection h1 {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ScrollUl {
  max-height: 300px;
  overflow-x: hidden;
}

.sideBarInner .outercategoryFilter {
  background: none;
}

#companyList .listBox {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  );
}

.feeturre-page .TopBannerSection h1 {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.MarketPlaceTypeBox {
  text-align: center;
  border-radius: 20px;
  padding-bottom: 30px;
}

.MarketPlaceTypeBox h2 {
  font-weight: bold;
  font-size: 50px;
  line-height: 68px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.MarketPlaceTypeBox .MarketPlacBox {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 50%
  );
  padding: 5px;
  border-radius: 20px;
  overflow: hidden;
}

.MarketPlacBox {
  position: relative;
}

.MarketPlacBoxInner {
  background: #fff;
  border-radius: 20px;
  padding: 60px 20px;
  min-height: 460px;
}

.MarketPlacBoxInner h5 {
  font-weight: bold;
}

.MarketPlacBox {
  position: relative;
}

.MarketPlacBox a {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

.authPage .TopBannerSection h1 {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.authPage .TopBannerSection h2 {
  font-weight: bold;
}

.textClip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blueGradbg {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 100%
  ) !important;
}

.orangeGradbg {
  background: linear-gradient(
    45deg,
    rgba(250, 171, 44, 1) 0%,
    rgba(239, 78, 78, 1) 100%
  ) !important;
}

.purpleGradbg {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 100%
  ) !important;

  border: none;
}

.GreenGradbg {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
  color: #fff;
}

.textwhite {
  color: #fff !important;
}
.textblack {
  color: #fff !important;
}

.musicwrapper__feeturrelist h4 small {
  color: #a7a7a7;
}

.SignUpPageBox {
  margin-bottom: 100px;
}

.SignUpPageBox .col-lg-4 { margin-bottom:25px !important; }

.SignUpPageBox .BoxOuter, .SignUpPageBox .creatorBox {
  border-radius: 20px;
  padding: 5px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.SignUpPageBox .creatorBox h2 { font-weight: bold; font-size: 45px; text-transform: uppercase;  }
.SignUpPageBox .creatorBo .highlight h2, .highlight .creatorPrice  { color: #fff; }

.creatorPrice {        font-size: 25px;
  margin: 40px 0;
  line-height: 24px; }
  .creatorPrice h3 { font-size: 40px; font-weight: bold; }

  .creatorFeature {      font-size: 25px;
    margin: 40px 0;
    line-height: 30px; }

.makeBold, .creatorFeature strong { font-weight: bold; color: #000; }
.highlight .creatorFeature strong { color: #000; }

.currency-tab.customCentertabs ul.nav-tabs li.nav-item a {
  background-color: transparent;
  padding: 8px 5px !important;
  font-size: 13px !important;
}

.currency-tab .nav-justified .nav-item:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.currency-tab .nav-justified .nav-item:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.currency-tab .nav-justified .nav-item {
  margin-left: -1px;
  border: 1px solid #000;
}

.BoxInner .icon-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.SignUpPageBox  .BoxInner {
  border-radius: 15px;
  text-align: center;
  background: #fff;
  width: 100%;
  height: 200px;
  position: relative;
  word-break: break-all;
}

.SignUpPageBox .creatorBox .BoxInner { height:auto; }
.SignUpPageBox .creatorBox .BoxInner strong { display:inline-block; color: #000; }
.SignUpPageBox .creatorBox .BoxInner.highlight strong, .SignUpPageBox .creatorBox .BoxInner.highlight  h2 { color: #fff; }

.SignUpPageBox .creatorBox .BoxInner .BoxVc { padding-top: 50px;}

.creatorBtn { padding-bottom: 40px; }
.creatorBtn a {    background: linear-gradient(45deg, rgba(24, 186, 212, 1) 0%, rgba(49, 182, 128, 1) 50%, rgba(128, 194, 66, 1) 100%);
  color: #fff !important;
  padding: 16px 26px;
  border-radius: 5px;
  font-size: 21px;
  max-width: 211px !important;
  display: block;
  margin: 0 auto;
  word-break: normal !important;}

.BoxOuter h2 {
  font-weight: bold;
}

.BoxOuter h2 span { font-size: 20px;
    color: #32b67f; }

.BoxOuter .BoxVc {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  transform: translateY(-50%);
}

.SignUpPageBox .BoxInner.highlight, body.darkMode .SignUpPageBox .BoxInner.highlight {
  background: linear-gradient(45deg, rgba(56, 194, 223, 1) 0%, rgba(50, 97, 172, 1) 50%);
}


.SignUpPageBox .purpleGradbg .BoxInner.highlight, body.darkMode .SignUpPageBox .purpleGradbg .BoxInner.highlight {
  background: linear-gradient(45deg, rgba(175, 32, 137, 1) 0%, rgba(89, 84, 164, 1) 100%) !important;
}

body.darkMode .SignUpPageBox .creatorBox .BoxInner strong { color: #fff;}

.BoxVc strong {
  color: #7c7c7c;
  font-size: 20px !important;
}

.SignUpPageBox strong {
  font-size: 22px;
  text-align: center;
  display: block;
}

.abLink {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.LoginPage .TopBannerSection h2 {
  color: #000;
  text-transform: uppercase;
  font-size: 50px;
}

.LoginSection {
  padding-top: 200px;
  padding-bottom: 200px;
}

.LoginSection h2 {
  text-transform: uppercase;
}

.LoginFormOuter {
  max-width: 700px;
  margin: 0 auto;
}

.form-group .form-control,
.input-group .form-control {
  border: none;
  border-radius: 10px !important;
}

.bootstrap-select .dropdown-toggle,
.tagsInput .bootstrap-tagsinput {
  border-radius: 10px;
}

.modal.bgGreen .modal-header .close {
  color: #333;
}

.listBox--verified .listBox__detailFeeturres .sub {
  background-position: center right;
  color: #000;
}

.signup-data .joinCommunity {
  font-size: 118px !important;
}

.signup-data .form-group .form-control {
  height: 55px;
}

.signup-data .country-data .dropdown.bootstrap-select {
  height: 55px !important;
}

.signup-data .country-data .icon .dropdown-toggle {
  border: 1px solid #d5d4db !important;
}

.signup-data .country-data .bootstrap-select.show .dropdown-menu {
  border-color: #d5d4db;
}

.darkMode .signup-data .country-data .bs-searchbox {
  background-color: #424243;
}

.darkMode .signup-data .country-data ul.dropdown-menu.inner.show {
  background-color: #424243 !important;
}

.authPage .form-group .form-control,
.authPage .input-group .form-control {
  height: 65px;
}

/* .repre-sort-dropdown-menu {
  transform: translate3d(1289px, 49px, 0px) !important;
} */

.skill-filter-tab {
  background: transparent !important;
  border-color: black !important;
  text-transform: uppercase;
  padding: 8px 5px !important;
  font-size: 13px !important;
  color: #000 !important;
  font-weight: bold !important;
  border-radius: 12px;
}

.skill-filter-tab.active {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  ) !important;
  color: #fff !important;
}

.market-filter-tab {
  background: transparent !important;
  border-color: black !important;
  text-transform: uppercase;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #000 !important;
  font-weight: bold !important;
  border-radius: 12px;
}

.top-0 {
  top: 0;
}

#artistReportrange,
#topFeeturreReportrange,
#feeturreVideoReportrange,
#feeturreBySalesReportrange,
#representReportrange,
#feeturreReportrange {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  cursor: pointer;
  padding: 7px 40px;
  border: 1px solid #ccc;
  width: 100%;
  color: #fff;
  border-radius: 5px;
  display: none;
}

.artistChartButton {
  float: right;
  margin-bottom: 10px;
  display: flex;
}

.m-r-10 {
  margin-right: 10px;
}

.artistWeekBtn {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
}

#contact_me_frm .form-group input.form-control {
  border: 1px solid #c7c6d1;
  height: 50px;
}

#contact_me_frm .form-group {
  margin-bottom: 20px;
}

#contact_me_frm .form-group textarea.form-control {
  border: 1px solid #c7c6d1;
}

#contact_me_frm .form-group label {
  margin-bottom: 3px;
}

.feeturreDetails span.breadMenu {
  padding: 0px 15px;
  text-transform: uppercase;
  font-size: 13px;
  color: #000;
}

#NFTTokenModal .modal-content,
#AcceptNFTTokenModal .modal-content {
  background: #fff;
}
#NFTTokenModal .modal-footer,
#AcceptNFTTokenModal .modal-footer {
  padding-left: 0px;
  padding-right: 0px;
}
.mkOfferBtn,
.accpetOfferBtn {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  border: none;
  color: #fff;
}

.nftDetail {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
  color: #fff;
}

.nftDetail a.theme-color {
  color: #fff !important;
}

.nftDetail .ml-auto {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.darkMode .feeturreDetails span.breadMenu {
  color: #fff;
}

.feeturreDetails .breadsmith .icon-right-arrow {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 13px;
}

.breadsmith span.breadMenu {     padding: 0px 15px;
    text-transform: uppercase;
    font-size: 13px;
    color: #000; }

.breadsmith span.icon-right-arrow, .breadsmith a:hover span.breadMenu  { color:#79c243 !important; }


.listShare {
  position: absolute;
  right: 50px;
  top: 2px;
  color: #79c243;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.m-b-0 {
  margin-bottom: 0;
}

.m-b-15 {
  margin-bottom: 15px;
}

.p-b-50 {
  padding-bottom: 50px;
}

.p-b-40 {
  padding-bottom: 40px !important;
}

.m-b-40 {
  margin-bottom: 40px !important;
}

.m-t-40 {
  margin-top: 40px !important;
}

.p-t-150 {
  padding-top: 150px;
}

body.darkMode .skill-filter-tab,
body.darkMode .market-filter-tab {
  color: #fff !important;
}

.feeturreDetails .video__videoBox {
  background-color: #e8ebe8;
  border-radius: 30px;
}

body.darkMode .feeturreDetails .video__videoBox {
  background-color: #7b797930;
}

.feeturreDetails .feeturre-box {
}

.market-filter-tab.active {
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;

  color: #fff !important;
}

.artistsSection .tree {
  margin-bottom: 30px;
}

.sort-dropdown {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
  border: 0;
  padding: 7px 40px;
  font-size: 23px;
}

.sort-dropdown:focus {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sort-dropdown::after,
.artist-sort-dropdown::after,
.followers-sort-dropdown::after,
.favourite-sort-dropdown::after,
.following-sort-dropdown::after,
.repre-sort-dropdown::after {
  content: unset;
}

.sort-dropdown-menu,
.artist-sort-dropdown-menu,
.followers-sort-dropdown-menu,
.favourite-sort-dropdown-menu,
.following-sort-dropdown-menu,
.repre-sort-dropdown-menu {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

body.darkMode .dropdown-item {
  color: #fff;
}

body.darkMode .dropdown-menu {
  background-color: #414042;
}

.top-search-dropdown-menu {
  width: 100%;
  border-radius: 0.6rem;
}

.top-search-dropdown-menu ul {
  list-style-type: none;
  padding-left: 0px;
}

.top-search-dropdown-menu .dropdown-header {
  padding: 0.5rem 16px;
  font-size: 18px;
  border-bottom: 1px solid #e6e8eb;
  color: #727a82;
}

body.darkMode .top-search-dropdown-menu .dropdown-header {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-search-dropdown-menu .dropdown-li {
  border-bottom: 1px solid #e6e8eb;
}

.top-search-dropdown-menu .dropdown-item {
  font-weight: 600;
  word-break: break-word;
  white-space: break-spaces;
  padding: 0.5rem 2rem !important;
  font-size: 16px !important;
}

.sort-dropdown-menu .dropdown-item,
.artist-sort-dropdown-menu .dropdown-item,
.followers-sort-dropdown-menu .dropdown-item,
.favourite-sort-dropdown-menu .dropdown-item,
.following-sort-dropdown-menu .dropdown-item,
.repre-sort-dropdown-menu .dropdown-item,
.top-search-dropdown-menu .dropdown-item {
  padding: 0.25rem 0.5rem;
  font-size: 14px;
}

.artist-sort-dropdown {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  border: 0;
  padding: 7px 40px;
  font-size: 23px;
}

.artist-sort-dropdown:focus {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.followers-sort-dropdown,
.favourite-sort-dropdown,
.following-sort-dropdown {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  border: 0;
  padding: 7px 40px;
  font-size: 23px;
}

.followers-sort-dropdown:focus,
.favourite-sort-dropdown:focus,
.following-sort-dropdown:focus {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.repre-sort-dropdown {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  );
  border: 0;
  padding: 7px 40px;
  font-size: 23px;
}

.repre-sort-dropdown:focus {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.copyRightSection {
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
}

body.darkMode .artist-sort-dropdown-menu .dropdown-item:hover,
body.darkMode .top-search-dropdown-menu .dropdown-item:hover {
  background-color: #4180bf;
}

body.darkMode .sort-dropdown-menu .dropdown-item:hover {
  background-color: #f68939;
}

body.darkMode .followers-sort-dropdown-menu .dropdown-item:hover,
body.darkMode .favourite-sort-dropdown-menu .dropdown-item:hover,
body.darkMode .following-sort-dropdown-menu .dropdown-item:hover {
  background-color: #50bb68;
}

body.darkMode .repre-sort-dropdown-menu .dropdown-item:hover {
  background-color: #5954a4;
}

.ArtistPageList .listBox--verified .listBox__detailArtist h2,
.reprePage .listBox--verified .listBox__detailArtist h2,
.homePage .listBox--verified .listBox__detailArtist h2,
.listBox--verified .listBox__detailArtist h2

/* .listBox__detailArtist h2  */ {
  width: 100%;
  font-size: 16px;
  background-image: url(../images/verified-yellow.png);
  background-size: 25px !important;
  background-position: center right;
  text-overflow: unset;
  white-space: normal;
  background-repeat: no-repeat;
  color: #000;
}

.listBox__detailArtist h2 a {
  color: #000;
}

body.darkMode .listBox__detailArtist h2 a {
  color: #fff;
}

.listBox__detailArtist .sub {
  font-size: 14px;
}

.verified-icon {
  width: 25px;
  margin-left: 5px;
}

#allList .genres,
#exclusivesList .genres {
  color: #231f1f;
}

.m-r-20 {
  margin-right: 20px;
}

.ArtistPageList #artistsList .listBox__detailArtist .sub,
.ArtistPageList #artistsList .listBox__detailArtist h2 {
  color: #231f1f;
}

.sliderVideo,
.sliderImg,
.sliderPrev,
.sliderNext {
  height: 400px;
  object-fit: cover;
}

.favorited-page .listBox__favorite {
  bottom: 65px;
  font-size: 25px;
  top: unset;
  right: 25px;
}

.favorited-page .icon-fire {
  width: 25px;
  height: 25px;
  display: inline-block;
}

.favorited-page .fire-text {
  font-size: 16px;
}

.fetDetMain {
  padding-top: 150px !important;
}

.MarketPlaceTypeBox .MarketPlacBox:hover {
  box-shadow: 10px 10px 15px 10px #ff5f4475;
}
.pagination-wrap li.page-item[aria-label*="Prev"] .page-link,
.pagination-wrap li.page-item[aria-label*="Next"] .page-link,
.pagination-wrap li.page-item .page-link[aria-label*="Next "],
.pagination-wrap li.page-item .page-link[aria-label*="Prev"] {
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
}
.pagination-wrap li.page-item[aria-label*="Prev"] .page-link,
.pagination-wrap li.page-item .page-link[aria-label*="Prev"] {
  background-image: url("../images/left-arrow.png");
}

.pagination-wrap li.page-item .page-link[aria-label*="Next "],
.pagination-wrap li.page-item[aria-label*="Next"] .page-link {
  background-image: url("../images/right-arrow.png");
}
.sub-page-title + a.icon-info {
  padding-top: 0rem !important;
}
.btn-group-colbtm-view .btn {
  padding-left: 18px;
  padding-right: 18px;
}
.btn-group-colbtm-view .btn img {
  max-width: 29px;
}
.btn-group-colbtm-view .btn.btn-primary img,
.darkMode .btn-group-colbtm-view .btn img {
  filter: invert(1);
}
.collabathon-list .custom-card-lp {
  padding: 0;
  color: #000;
}
.collabathon-view .container {
  max-width: 1180px;
}
.collabathon-list .TransBgSidebar h4 {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  opacity: 0.3;
}
.darkMode .collabathon-list .TransBgSidebar h4 {
  color: #fff;
  opacity: 1;
}
.darkMode .copyRightSection a {
  color: #fff;
}
.collabathon-list[data-view-type*="list"] .custom-card-lp {
  width: 100%;
  grid-gap: 0;
}

.collabathon-list[data-view-type*="grid"] .custom-card-lp {
  width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  margin: 0 0 30px 30px;
}

.collabathon-list[data-view-type*="grid"] {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.collabathon-list[data-view-type*="list"]
  .custom-card-lp
  .card-head
  .card-img-top {
  width: auto;
  height: auto;
  max-width: 100%;
}
.collabathon-list .card-content-lp p:empty {
  display: none;
}
.collabathon-list[data-view-type*="list"] .custom-card-lp .card-head {
  width: 30% !important;
}
.collabathon-list[data-view-type*="list"] .custom-card-lp .card-body {
  width: 70%;
}
.collabathon-list[data-view-type*="grid"] .custom-card-lp .img-profile {
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
}
.ag-colbthn-my-project-page .card-title {
  font-size: 30px;
  line-height: 38px;
}
.ag-colbthn-my-project-page .card {
  margin-left: 0;
}
.text-blue-gradient {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#comment-div .commonSection__heading {
  margin-top: 10px;
  margin-bottom: 40px;
}
#comment-div .commonSection__heading h2 {
  font-size: 1.75rem;
}
.custom-checkbox.custom-radio .custom-control-label:before,
.custom-radio.custom-radio .custom-control-label:before {
  top: 0;
}
.custom-checkbox.custom-radio .custom-control-label:after,
.custom-radio.custom-radio .custom-control-label:after {
  top: 4px;
}
.collabathon-list[data-view-type] .custom-card-lp .card-menu {
  margin-right: -30px;
}
.ag-colbthn-my-project-page audio {
  max-width: 100%;
}
.ag-collbtn-project-page .card img.card-img-top {
  min-height: 300px;
}
.ag-collbtn-project-page .card img.card-img-top {
  min-height: 300px;
  max-width: none;
  width: auto;
}
.faqPage .accordion .card-header {
  padding: 0;
}

.faqPage .accordion .card-header .btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.25rem 2.5rem 1.25rem 1.25rem !important;
  text-decoration: none;
  position: relative;
  font-weight: 400;
}
.faqPage .accordion .acc-card-icon {
  display: none;
  float: right;
  font-size: 30px;
  line-height: 27px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  /* color: #000; */
}
.faqPage .accordion .btn-link[aria-expanded="true"] {
  font-weight: 700;
}
.faqPage
  .accordion
  .btn-link[aria-expanded="true"]
  .acc-card-icon.acc-card-minus {
  display: inline-block;
}
.faqPage
  .accordion
  .btn-link[aria-expanded="false"]
  .acc-card-icon.acc-card-plus {
  display: inline-block;
}
.faqPage .accordion .card-body {
  color: #000;
  text-align: left;
  padding-top: 40px;
  padding-bottom: 40px;
}
.faqPage .accordion .card-header .btn:focus {
  box-shadow: none;
}
.mainHeader .navbar-nav #headerCartList .mCSB_container {
  padding: 10px 0;
  text-align: center;
}
.dashboard-page .TopBannerSection .right-side .dashWhiteBtn span {
  top: 0;
}

.dashboard-page .TopBannerSection .right-side .dashWhiteBtn span {
  padding-left: 25px !important;
  padding-right: 25px !important;
}
.darkMode .list-judges .list-inline-item > a {
  color: #fff;
}
.collabathon-list[data-view-type*="grid"] .card-judges.lp-profile-min-img {
  width: 100%;
  margin-top: 10px;
}
body.darkMode #shop-orders-container .card {
  color: #000;
  margin: 0;
}
body.darkMode .bannerSection__content .searchInput {
  color: #fff;
}
.darkMode .media-counterBox .btn.dashWhiteBtn {
  color: #000 !important;
}
#companyList .listBox__detailArtist .sub {
  max-width: 100% !important;
}
body.darkMode
  .header-text-color
  .mainHeader
  .navbar-nav
  li:not(.header-icons)
  a[class="nav-link"] {
  color: #000;
}

body.darkMode .contentPage .contentSet * {
  color: #fff;
}
.contentPage .contentSet * {
  font-family: "Sora", sans-serif;
}
.card-creator-detail {
  display: flex;
  align-items: center;
}
.card-creator img {
  margin-right: 8px;
}
.ReferralLinkCard #feeturre_url {
  word-break: break-all;
}
body.darkMode #feeturreList .listBox__detailFeeturres h2,
body.darkMode #NFTfeeturreList .listBox__detailFeeturres h2 {
  color: #fff !important;
}
body.darkMode .earningPage .infoRow__box label {
  color: #fff;
}
.profile .formCommon .commonSection h2 {
  margin-bottom: 20px;
}
#contact-us-form .form-group input.form-control,
#contact-us-form .form-group .form-control {
  border: 1px solid #ccc !important;
}
body.darkMode .contactUs h1,
body.darkMode .contactUs h2,
body.darkMode .messagePage__right .userWrap__body .userList p,
body.darkMode .messagePage__right .userWrap__body .userList.selected,
body.darkMode .messagePage__right .userWrap__body .userList.selected p {
  color: #fff;
}
body.darkMode
  .messagePage__right
  .userWrap__body
  .userList:not(.selected):hover,
body.darkMode
  .messagePage__right
  .userWrap__body
  .userList:not(.selected):hover
  p {
  color: #000;
}
body.darkMode .contactUs {
  background-color: transparent;
}
body.darkMode .mainHeader .navbar-nav li a[class="nav-link"],
body.darkMode .c-footer a,
body.darkMode .c-footer p.details,
body.darkMode .c-footer p.email,
body.darkMode .extra-text,
body.darkMode #blogList .blogRow p,
body.darkMode #promoCodeDetail .detailbox__contant__list__cnt label + span,
body.darkMode .feeturre-page .custom-tabs .nav-link,
body.darkMode .feeturre-page .custom-tabs .tab-pane,
body.darkMode .feeturre-page .custom-tabs .toggleFilter .toggletext,
body.darkMode #createNewFeeturreModal a {
  color: #fff;
}
.ArtistPageList .listBox .listBox__detailArtist .h-27 {
  font-size: 22px;
}
body.darkMode #promoCodeDetail .detailbox__contant__list__cnt label {
  color: #eee;
}
.collabathon-list[data-view-type*="list"] .card-content-lp h3 {
  font-size: 14px;
}
.collabathon-view .TopBannerSection.collabathonHeader {
  padding-top: 180px;
}
body.darkMode .row-coll-participants .card-body {
  background-color: transparent;
}
#projectsList .card-creator-detail img {
  position: static;
  width: 48px;
}
.authPage .bannerSection__content h1.white-text {
  color: #fff;
}
.rightContent--login a.white-text {
  color: #fff !important;
}
body.darkMode #kb-container .card-body p {
  color: #000;
}
body.darkMode #kb-container .card-body h4,
body.darkMode #kb-container .card-body h6 {
  color: #000;
}
body.darkMode .how-it-works .howItWorksSection {
  color: #fff;
}
.card-body .card-list li {
  background: #f3f3f3;
  border-radius: 10px;
  text-decoration: none;
  padding: 4px 12px;
  margin-right: 5px;
}
#myCollrathonTab .nav-link span {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
body.darkMode .orderStatPage #myTabContent {
  background: transparent;
}
body.darkMode .walletRow__box.text-center {
  background-color: transparent;
}
body.darkMode #createCollabathonForm .form-design {
  background-color: transparent;
  border: 1px solid #ccc;
}
body.darkMode #createProjectForm .form-design {
  background-color: transparent;
  border: 1px solid #ccc;
}
body.darkMode .tabs-browse-feeturres .tab-content {
  background-color: transparent;
}
body.darkMode .followPage .follow p {
  color: #fff;
}
body.darkMode .company-order-stat .tab-content {
  background-color: transparent;
}
@media (max-width: 1700px) {
  .dashboard-page .TopBannerSection .right-side {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1600px) {
  .tree ul label {
    font-size: 14px;
  }

  .feeturreArtType .list-inline-item:not(:last-child),
  .list-inline-item:not(:last-child) {
    margin-right: 5px !important;
  }
}

@media (max-width: 1480px) {
  .mainHeader .navbar-nav li + li {
    margin-left: 10px;
  }

  .nav-link {
    padding: 0.5rem 0.5rem;
  }

  .searchInput {
    width: 100%;
    border: 1px solid #e9e9e9;
  }

  .Headersearch {
    max-width: 250px;
  }

  .award_list {
    margin-left: 14px;
  }

  .detailslider {
    padding-top: 50px;
  }

  .prfBtn {
    font-size: 11px !important;
  }

  .artSlider {
    margin: 15px;
  }
  .TitleTab {
    padding: 7px 20px;
    font-size: 18px;
  }
  .dashboard-page .TopBannerSection .right-side .btn {
    font-size: 16px;
    padding: 10px 16px;
  }
}

@media (max-width: 1399px) {
  .listBox__detailArtist .sub {
    max-width: 100px;
  }

  .MarketPlacBoxInner {
    min-height: 385px !important;
  }

  .BoldTextSection h2 {
    font-size: 75px;
    line-height: 95px;
  }

  .listBox__img {
    min-height: 200px;
  }

  .homePage .imgWrap {
    max-width: 125px;
  }

  .homePage .list-inline-item {
    font-size: 14px;
  }

  .homePage .talentSection .commonSection__heading h4 {
    font-size: 55px;
  }

  .homePage .talentSection .commonSection__heading h2 {
    font-size: 40px;
  }

  .homePage .commonSection__heading .heroBtn {
    font-size: 35px;
  }

  /* .listBox--verified .listBox__detailFeeturres .sub {
    font-size: 16px;
  } */

  .listBox__detailFeeturres .sub,
  .listBox__detailFeeturres .genres {
    font-size: 14px;
  }

  .listBox__detailFeeturres > div h2 {
    font-size: 14px;
  }

  .mainHeader .navbar-nav li,
  .authLink ul li {
    font-size: 13px;
  }

  .mainHeader .navbar-nav li + li {
    margin-left: 4px;
  }

  .Headersearch {
    max-width: 170px;
  }

  .Headersearch {
    margin-left: 10px;
    padding-left: 10px;
    margin-right: 10px;
    padding-right: 10px;
  }

  .nav-link {
    padding: 0.5rem 0.3rem;
  }

  .homePage .trendingSection,
  .homePage .commonSection {
    padding-left: 50px;
    padding-right: 50px;
  }

  .award_list {
    margin-left: 10px;
    min-height: 80px;
    margin-right: 4px;
    border-radius: 12px;
  }

  .award_title {
    font-size: 9px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    min-height: 30px;
  }

  .prfBtn {
    font-size: 10px !important;
  }

  .artSlider {
    margin: 15px;
  }

  .feeturreArtType .list-inline-item:not(:last-child),
  .list-inline-item:not(:last-child) {
    margin-right: 3px !important;
  }
}
@media (max-width: 1299px) {
  .dashboard-page .TopBannerSection .row {
    flex-direction: column;
  }
  .dashboard-page .TopBannerSection .right-side {
    flex-direction: row;
  }
}
@media (max-width: 1199px) {
  .TagBar {
    margin-left: 50px;
    margin-right: 50px;
  }
  .listBox__img {
    /* min-height: 190px; */
    min-height: 140px;
  }

  .MarketPlacBoxInner {
    min-height: 325px !important;
  }

  .listBox--verified .listBox__detailFeeturres .sub {
    font-size: 14px;
    background-size: 17px !important;
  }

  .listBox__detailFeeturres .sub,
  .listBox__detailFeeturres .genres,
  .listBox__detailFeeturres > div h2 {
    font-size: 12px;
  }

  .homePage .bannerSection {
    height: auto;
  }

  .homePage .bannerSection__content h1 {
    font-size: 85px;
  }

  .Headersearch {
    margin: 0px;
    padding: 0px;
    border: none;
    max-width: 100%;
  }

  .TopBannerSection h1 {
    font-size: 96px;
  }

  .has > label {
    font-size: 18px;
  }

  .ArtistPageList .listBox {
    margin-left: 0px;
    margin-right: 0px;
  }

  .ArtistPageList .d-sm-flex {
    display: block !important;
  }

  .sliderVideo,
  .sliderImg,
  .sliderPrev,
  .sliderNext {
    height: 360px;
  }

  .feeturre_award_list {
    margin-right: 11px;
    margin-left: 11px;
  }

  /*  .listBox__detailFeeturres>div {
    display: block !important;
  }*/

  .listBox__detailFeeturres > div .amount {
    margin: 0;
  }

  .heading__detailArtist h2 {
    font-size: 60px !important;
  }
  .left-arrow-img,
  .right-arrow-img {
    width: 36px;
  }
  .ag-colbthn-my-project-page .card-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #000000;
  }
  #artistShopList .listRow div[class*="col-md-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .artist_details .custom-tabs.customCentertabs ul.nav-tabs {
    max-width: 100% !important;
  }
  .custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
    font-size: 14px !important;
  }
  .ag-collbtn-project-page .card-creator img {
    max-width: 60px;
  }
  .contentSet ul {
    margin-bottom: 25px;
  }
  .contentSet ul li {
    line-height: 24px;
    font-size: 14px;
  }
  .addFeeturre fieldset {
    padding: 40px;
  }
}

@media (max-width: 991px) {
  .TopBannerSection h1 {
    font-size: 64px;
    margin-bottom: 20px;
  }
  #subscription-form {
    margin-bottom: 40px !important;
  }
  .homePage .bannerSection__content h1 {
    font-size: 65px;
  }

  .MarketPlacBoxInner {
    min-height: 385px !important;
  }

  .signup-data .joinCommunity {
    font-size: 65px !important;
  }

  .homePage .bannerSection__content {
    margin-bottom: 50px;
  }

  .bannerSectionContainer {
    margin-bottom: 100px;
  }

  .heroBtn {
    position: unset;
  }

  .BoldTextInner {
    text-align: right;
  }

  .BoldTextInner .heroBtn {
    margin-top: 30px;
  }

  .homePage .monitiseSection ul {
    flex-wrap: wrap;
  }

  .homePage .monitiseSection .list-inline-item {
    flex: 50%;
    margin-bottom: 40px;
  }

  .resourcePage .monitiseSection .list-inline-item {
    width: auto !important;
  }

  .c-footer .col-xl-5 {
    margin-bottom: 40px;
  }

  .listRow {
    margin-left: 0px;
    margin-right: 0px;
  }

  .award_list {
    min-height: 90px;
    margin-right: 5px;
    margin-bottom: 10px;
  }

  .sliderVideo,
  .sliderImg,
  .sliderPrev,
  .sliderNext {
    height: 320px;
  }

  .artSlider {
    margin: 15px;
  }

  .feeturre_award_list {
    /* min-height: 115px; */
    margin-right: 7px;
    margin-left: 7px;
  }

  .fetDetMain {
    padding-top: 100px;
  }

  .artist_details {
    max-width: 100%;
  }

  .artist_details .detailsBox__left {
    max-width: 250px;
    min-width: 250px;
    flex: 0 0 250px;
  }
  #switchingSellerModal .modal-content,
  #switchingBuyerModal .modal-content,
  #createNewFeeturreModal .modal-content,
  #imageCropperModal .modal-content,
  #sponsorModal .modal-content {
    padding: 25px !important;
  }
  #sponsorModal .btn {
    border: 1px solid #fff;
    color: #fff;
  }
  #sponsorModal .btn:hover,
  #sponsorModal .btn:focus {
    background: linear-gradient(
      45deg,
      rgba(250, 171, 44, 1) 0%,
      rgba(239, 78, 78, 1) 50%
    );
    color: #fff !important;
  }
  .modal .modal-content {
    padding: 25px !important;
  }
  .modal .modal-header .close,
  .ModuleTitle h3 a {
    padding: 13px 10px;
    width: 32px;
    height: 32px;
    line-height: 3px;
    top: 2px;
  }
  .ModuleTitle h3 a span,
  .orderDetails .common-table .table tbody tr td .commonDetail p span {
    font-size: 16px;
  }
  .modal .modal-header .modal-title,
  .ModuleTitle h3 {
    font-size: 24px;
    padding-bottom: 15px;
    margin-bottom: 5px;
  }
  .contactFormBg {
    padding: 30px;
  }
  .award_list {
    width: 28%;
  }
  .how-it-works .howItWorksSection .list-hiw-browse li {
    min-width: 25%;
    margin-bottom: 45px;
  }

  .how-it-works .howItWorksSection ul.list-hiw-browse {
    flex-wrap: wrap;
  }
  .artist-sort-dropdown {
    padding: 7px 30px;
    font-size: 20px;
  }

  .collabathon-list[data-view-type*="grid"] {
    margin: 0 -45px;
  }
  .collabathon-list[data-view-type*="grid"] .custom-card-lp {
    margin: 0 0 30px 20px;
  }
  .collabathon-list[data-view-type*="list"] {
    margin: 0 0 0 -35px !important;
  }
  .how-it-works .howItWorksSection li .imgWrap:after {
    width: 50px;
    height: 50px;
    left: 130%;
  }
  .how-it-works .howItWorksSection li:nth-child(2) .imgWrap:after {
    display: none;
  }
  #companyList .listRow {
    margin: 0 -25px;
  }
  #createNewFeeturreModal.modal ul {
    margin-top: 0;
  }
  .custom-tabs .tabsBtn {
    top: -50px;
    right: -50px;
  }
  .custom-tabs .tabsBtn .btn {
    border-radius: 10px;
    height: 40px;
    width: 40px;
  }
  .heading__detailArtist h2 {
    font-size: 48px !important;
  }
  .details-page .GreyRoundBox .custom-tabs ul.nav-tabs {
    flex-direction: column;
  }
  .details-page .GreyRoundBox .custom-tabs ul.nav-tabs .nav-item {
    min-height: 41px;
  }
  .details-page .GreyRoundBox .custom-tabs ul.nav-tabs .nav-item:first-child {
    border-radius: 10px 10px 0 0;
  }
  .details-page .GreyRoundBox .custom-tabs ul.nav-tabs .nav-item:last-child {
    border-radius: 0 0 10px 10px;
  }
  .collabathon-view .TopBannerSection.collabathonHeader {
    padding-top: 150px;
  }
  .contentPage h1 {
    font-size: 32px;
  }
  .addFeeturre fieldset {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .collabathon-list[data-view-type*="list"] {
    margin: 0 0 0 -20px !important;
  }
  .how-it-works .howItWorksSection li .imgWrap:after {
    left: calc(100% + 5vw);
  }
  #companyList .listRow {
    margin: 0 -10px;
  }
  .faqPage .accordion .card-body {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .feeturreDetails .contentDetails h3 {
    font-size: 24px;
  }
  .feeturreDetails .commonSection__heading h2 {
    font-size: 28px;
  }
  .addFeeturre fieldset {
    padding: 22px;
  }
}
@media (max-width: 575px) {
  .collabathon-list[data-view-type*="list"] {
    margin: 0 -10px !important;
  }
  .collabathon-list[data-view-type*="list"] .custom-card-lp {
    margin: 0 0 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .collabathon-list[data-view-type*="list"] .custom-card-lp .card-head {
    width: 100% !important;
  }
  .collabathon-list[data-view-type*="list"] .custom-card-lp .card-body {
    width: 100%;
  }
  .collabathon-list[data-view-type*="list"] .custom-card-lp .img-profile {
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
  }
  .ag-colbthn-my-project-page .card-title {
    font-size: 18px;
    line-height: 24px;
  }
  .mainHeader {
    background: none;
  }
  #artistShopList .listRow div[class*="col-md-4"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .addFeeturre fieldset {
    padding: 15px;
  }
}
@media (max-width: 420px) {
  .resourcePage .bannerSection__content h1 {
    font-size: 30px !important;
  }
  .similarFeeturre .container div[class*="col-lg-"],
  .artist-similar .container div[class*="col-lg-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
  .feeturre_award_list {
    /* min-height: 85px; */
    margin-right: 6px;
    margin-left: 6px;
  }
  .contactFormBg {
    padding: 20px;
  }
  .how-it-works .howItWorksSection li {
    width: 100%;
    margin-right: 0 !important;
  }
  .sideBarInner .btn-group {
    flex-wrap: wrap;
  }
  .sideBarInner .btn-group .btn {
    min-width: 100%;
  }
  .sideBarInner .btn-group .btn:first-child {
    border-radius: 5px 5px 0 0;
  }
  .sideBarInner .btn-group .btn + .btn {
    border-top: none;
  }
  .sideBarInner .btn-group .btn:last-child {
    border-radius: 0 0 5px 5px;
  }
  .modal .modal-header .modal-title,
  .ModuleTitle h3 {
    font-size: 20px;
  }
  #createNewFeeturreModal.modal ul {
    flex-wrap: wrap;
  }
  #createNewFeeturreModal .modal-body li {
    width: 100%;
  }

  #createNewFeeturreModal .modal-body li + li {
    margin-top: 8px;
  }
  .pad50 {
    padding: 15px;
  }
  .contentPage h1 {
    font-size: 28px;
  }
}

@media (max-width: 525px) {
  .TopBannerSection h1 {
    font-size: 45px !important;
  }

  .artSlider {
    margin: 35px;
  }

  .fetDetMain {
    padding-top: 50px;
  }
}

@media (max-width: 767.98px) {
  .mainHeader .navbar-collapse {
    top: 81px;
  }
}

@media screen and (min-width: 768px) and (max-width: 800px) {
  .TransBgSidebar {
    margin: 0 25px 25px 0px;
  }

  .heading__detailArtist h2 {
    font-size: 40px !important;
  }

  .artist_details .detailsBox__left {
    max-width: 230px;
    min-width: 230px;
    flex: 0 0 230px;
  }

  .award_list {
    min-height: 70px;
    margin-right: 0px;
    margin-bottom: 10px;
  }

  .award_title span {
    top: 9px;
    font-size: 7px;
  }

  .Artistcontactbtn a {
    font-size: 12px;
  }

  .listBox__img {
    /* min-height: 190px; */
    min-height: 120px;
  }
}

@media (max-width: 767px) {
  .TopBannerSection .right-side {
    text-align: center;
    margin-top: 8px;
  }
  .details-page .detailsBox__left {
    margin-right: 0px;
    max-width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
  }
  .MarketPlaceTypeBox h2 {
    font-size: 42px;
    line-height: 52px;
  }
  .HeroSearchBar .searchInput {
    padding-left: 15px;
  }
  .listRow .listBox {
    margin-top: 0;
  }
  .c-footer ul {
    margin-bottom: 35px !important;
  }
  .TagBar {
    margin-left: 30px;
    margin-right: 30px;
  }
  .TitleTab {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .c-footer li + li {
    margin-top: 8px;
  }
  .details-page .detailsBox__left .userInfo__details {
    max-width: none;
  }
  .details-page .detailsBox__left .totalFigure {
    padding: 30px 40px 0;
  }
  .details-page .detailsBox__left .musicwrapper {
    padding: 15px 30px 15px 15px;
  }
  .detailsBox.detailsComments.detailslider {
    margin-left: 0;
    margin-right: 0;
  }
  .notificationPage .notification__image {
    min-width: 35px;
    height: 35px;
    width: 35px;
  }
  .notificationPage .TopBannerSection.p-b-50 {
    padding-bottom: 0 !important;
  }
  .btn-group-colbtm-view {
    display: none;
  }
  .faqPage .accordion .card-header .btn {
    font-size: 16px;
  }
  .modal .modal-header .modal-title,
  .ModuleTitle h3 {
    font-size: 22px;
  }
  .pad50 {
    padding: 24px;
  }
  #products-container .card {
    margin-left: auto !important;
    max-width: 480px;
    margin-right: auto;
  }
  .similarFeeturre .container,
  .artist-similar .container {
    padding-left: 45px;
    padding-right: 45px;
  }
  .earningPage.dashboard-page .counterBox--blue .counterBox__left {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 575px) {
  .mainHeader ul.afterLogin .header-icons .nav-link,
  .mainHeader ul.afterLogin .header-icons .nav-link:hover {
    color: #fff;
  }
  .bannerHeader .navbar-brand,
  .Headersearch {
    margin-bottom: 10px;
  }
  .mainHeader #user_header_message li a[class="nav-link"],
  .mainHeader #user_header_message li a[class="nav-link"]:hover {
    color: #fff;
  }
  .mainHeader .navbar-collapse {
    top: 93px;
  }

  .TopBannerSection {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .MarketPlacBoxInner {
    min-height: 300px !important;
  }

  body .whiteLogo {
    display: block;
  }

  body .blackLogo {
    display: none;
  }

  .c-footer .blackLogo {
    display: block;
  }

  .c-footer .whiteLogo {
    display: none;
  }

  .authLink .before-login a {
    color: #fff;
  }

  .feeturre__videoBox .nav-justified .nav-item {
    margin-bottom: 0px !important;
  }
  .TagBar {
    margin-left: 15px;
    margin-right: 15px;
  }
  .TopBannerSection h1 {
    font-size: 45px !important;
  }
  .cart-item-box .pro-counter .minus,
  .cart-item-box .pro-counter .plus {
    width: 36px;
    height: 36px;
    line-height: 18px;
  }
  .cart-item-box .pro-counter input {
    height: 36px;
    width: 80px;
  }
  .HeroSearchBar .searchInput {
    font-size: 16px;
  }
}

@media (max-width: 690px) {
  .reprePage .TopBannerSection h1 {
    font-size: 45px;
  }

  .listBox__detailFeeturres > div .amount,
  .h-18 {
    font-size: 12px;
  }

  .listBox__detailFeeturres,
  .listBox__detailArtist {
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 10px;
  }

  .listBox__detailFeeturres .sub,
  .listBox__detailFeeturres .genres,
  .listBox__detailFeeturres > div h2 {
    font-size: 10px;
    line-height: 20px;
  }

  .owl-stage-outer .d-flex {
    align-content: flex-end;
  }

  .owl-stage-outer .listBox__detailFeeturres > div h2 {
    padding-bottom: 0px;
    display: unset;
  }

  .owl-stage-outer .line-h29 {
    line-height: 22px;
  }

  .owl-stage-outer .listBox--verified .listBox__detailFeeturres .sub {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .signup-data .joinCommunity {
    font-size: 45px !important;
  }

  .reprePage .TopBannerSection h1 {
    font-size: 30px !important;
  }

  .sliderVideo,
  .sliderImg,
  .sliderPrev,
  .sliderNext {
    height: 260px;
  }

  .listBox__img {
    min-height: 100px;
  }

  .custom-tabs.customCentertabs ul.nav-tabs {
    display: block;
  }

  .feeturre__videoBox .nav-justified .nav-item {
    border-radius: 10px;
  }

  .feeturre__videoBox .custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
    background-color: unset !important;
  }

  .feeturre__videoBox .nav-justified .nav-item {
    margin-left: 0 !important;
  }

  .feeturre__videoBox .nav-justified .nav-item:last-child {
    border-bottom-color: #000 !important;
  }
  .c-footer a {
    font-size: 16px;
  }
}

@media (max-width: 1340px) {
  body.darkMode .bannerSection__content .line-or-class span {
    background: #2d2929 !important;
  }
}

@media (max-width: 600px) {
  .homePage .bannerSection__content h1,
  .BoldTextSection h2 {
    font-size: 45px;
    line-height: 60px;
  }

  .homePage .bannerSection__content {
    margin-top: 150px;
  }

  .feeturre-page .TopBannerSection h1 {
    font-size: 45px !important;
  }
}

@media (max-width: 380px) {
  .feeturre-page .TopBannerSection h1 {
    font-size: 30px !important;
  }
}

@media (max-width: 625px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 1rem !important;
  }
}

@media (max-width: 484px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 0.4rem !important;
  }

  .award_list {
    min-height: 105px;
    margin-right: 14px;
    margin-left: 14px;
    margin-bottom: 20px;
    width: 26%;
  }
}

@media (max-width: 1599px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 3.5rem !important;
  }

  .detailsBox.detailsComments.detailslider {
    margin-top: 100px !important;
  }

  .listBox--verified .listBox__detailFeeturres .sub,
  .repre-details-artist .listBox--verified .listBox__detailArtist h2,
  .listBox__detailFeeturres > div .amount,
  .h-18,
  .h-15 {
    font-size: 16px;
  }

  .listBox--verified .listBox__detailFeeturres .sub,
  .repre-details-artist .listBox--verified .listBox__detailArtist h2,
  .listBox__detailFeeturres > div .amount,
  .h-18 {
  }
}

@media (max-width: 1399px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 2.8rem !important;
  }

  .min-h35.h-15,
  .listBox--verified .listBox__detailFeeturres .sub {
    font-size: 18px;
  }

  .min-h35 {
    min-height: 70px;
  }
  .collabathon-list[data-view-type*="grid"] .custom-card-lp .card-creator img {
    max-width: 60px;
  }
  .lp-profile-min-img img {
    width: 32px;
  }
}

@media (max-width: 1199px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 2.2rem !important;
  }
  .collabathon-list[data-view-type*="grid"] .custom-card-lp .card-creator {
    width: 100%;
    margin-bottom: 15px;
  }
  .mainHeader .navbar-collapse .navbar-nav li a[class*="nav-link"] {
    padding: 0;
  }
  #NFTfeeturreList .listBox__detailFeeturres .Prices,
  #feeturreList .listBox__detailFeeturres .Prices {
    min-width: 100%;
    text-align: left;
    margin-top: 4px;
  }
  #NFTfeeturreList .listBox__detailFeeturres .Prices > *,
  #feeturreList .listBox__detailFeeturres .Prices > * {
    font-size: 15px;
  }
  header.mainHeader .navbar-nav li a.nav-link {
    font-size: 16px;
  }
  .card-creator img {
    max-width: 60px;
  }
  .listBox__detailArtist .sub {
    max-width: none !important;
  }
  body.darkMode .mainHeader .navbar-nav .nav-link.extra-text {
    color: #000;
    text-align: center;
  }
  body.darkMode .mainHeader .navbar-nav li a[class="nav-link"] {
    color: #000;
  }
  .ArtistPageList .listBox .listBox__detailArtist .h-27 {
    font-size: 20px;
  }
  .addFeeturre .box-padd {
    padding: 30px;
  }
}

@media (max-width: 992px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 1.5rem !important;
  }
  .addFeeturre .box-padd {
    padding: 25px;
  }
}

@media (max-width: 669px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 1.2rem !important;
  }
}

@media (max-width: 599px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 0.6rem !important;
  }
  .addFeeturre .box-padd {
    padding: 15px;
  }
}

@media (max-width: 399px) {
  .pagination-data .pagination .page-link {
    padding: 0.5rem 0.4rem !important;
  }

  .award_list {
    min-height: 95px;
    margin-right: 10px;
    margin-left: 10px;
    width: 27%;
  }
  .how-it-works .howItWorksSection ul:not(.list-hiw-browse) li {
    width: calc(100% - 15px);
    margin-bottom: 40px;
  }
  #subscription-form {
    max-width: 100%;
  }
}
@media (max-width: 359px) {
  .TopBannerSection h1 {
    font-size: 32x !important;
  }
}
@media (max-width: 320px) {
  .award_list {
    min-height: 90px;
    margin-right: 6px;
    margin-left: 6px;
    width: 29%;
  }
}

@media (max-width: 1024px) {
  .custom-tabs.customCentertabs ul.nav-tabs {
    max-width: 100% !important;
  }

  .custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
    font-size: 12px !important;
  }

  .heading__detailRepre h2 {
    font-size: 35px !important;
  }

  .authPage .SignUpPageBox .BoxInner h2 {
    font-size: 25px;
  }

  .earning-half-circle {
    left: 110px !important;
  }

  .dashboard-page.earningPage .half-circle {
    width: 120px !important;
    height: 60px !important;
  }
}

.xrp-icon {
  background: url(../images/xrp-logo.svg);
  width: 25px;
  height: 13px;
  background-size: 100%;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

.xrp-icon-white {
background: url(../images/xrp-logo-white.svg);
  width: 25px;
  height: 13px;
  background-size: 100%;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  }

.XRPwalletAmount .xrp-icon {
  width: 65px;
  height: 30px;
}

.walletPage .walletRow__box {
  border: 1px solid #ccc;
}

.Prices {
  text-align: right;
}

.min-h35 {
  min-height: 40px;
  background-position: top right !important;
}

.line-h29 {
  line-height: 29px;
}

.listBox__detailFeeturres a {
  color: #000;
}

#allList .listBox__detailFeeturres > div .amount,
#allList .h-18,
#exclusivesList .listBox__detailFeeturres > div .amount,
#exclusivesList .h-18,
#leasesList .listBox__detailFeeturres > div .amount,
#leasesList .h-18 {
  font-size: 16px;
}

.form-group input.form-control,
.form-group textarea.form-control,
.input-group input.form-control,
.input-group textarea.form-control,
.addFeeturre .artistTypeDrop .dropdown-toggle {
  border: none !important;
  background: #f8f7f7 !important;
  font-size: 14px;
}

.bootstrap-select .dropdown-toggle {
  line-height: 27px;
  font-size: 14px;
  border: none;
  background: #f8f7f7 !important;
}
.bootstrap-select .dropdown-toggle:after {
  top: 12px;
}

.bootstrap-select .dropdown-toggle:hover,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:active:focus,
.bootstrap-select .dropdown-toggle:active,
.bootstrap-select .dropdown-toggle:active:hover,
.bootstrap-select .dropdown-toggle:not(:disabled),
.bootstrap-select .dropdown-toggle:not(.disabled):active {
  border: none;
  background: #f8f7f7 !important;
  border-radius: 10px !important;
}

.bootstrap-select.show .dropdown-menu {
  border-color: transparent;
}

.modal .modal-content .modal-body {
  padding: 0px;
}

body.darkMode .listBox__detailFeeturres a {
  color: #fff;
}

/* Dark Mode */

body.darkMode .xrp-icon {
  background-image: url(../images/xrp-logo-white.svg);
}

body.darkMode {
  background: #000 url(../images/bodybg-dark.jpg);
  color: #fff;
}

body.darkMode .bannerSection__content h1,
body.darkMode .homePage .commonSection,
body.darkMode .BoldTextSection h2,
body.darkMode .authLink ul li a {
  color: #fff;
}

body.darkMode .bannerSection__content h2,
body.darkMode .homePage .commonSection {
  color: #fff !important;
}

body.darkMode .bannerSection__content .searchInput {
  background: #2d2929;
  border: 1px solid black;
}

body.darkMode .bannerSection__content .form-control {
  background: #424243;
  color: #a7a8aa;
}

body.darkMode .bannerSection__content .form-control::placeholder {
  color: #bdbec0;
}

body.darkMode .bannerSection__content .custom-control label {
  color: #fff !important;
}

body.darkMode .bannerSection__content .line-or-class span {
  background: #161616;
  color: #fff !important;
}

body.darkMode .SignUpPageBox .BoxInner {
  background: #161616;
}

body.darkMode .MarketPlacBoxInner {
  background: #161616;
}

body.darkMode .color-black {
  color: #fff !important;
}

body.darkMode .artists-page .HeroSearchBar .searchInput,
body.darkMode .reprePage .HeroSearchBar .searchInput {
  background: #404041;
  border: 1px solid black;
  color: #fff;
}

body.darkMode .artists-page .bootstrap-tagsinput,
body.darkMode .reprePage .bootstrap-tagsinput {
  background: #404041;
  border: 1px solid black;
  color: #747474;
}

body.darkMode .artists-page .bootstrap-tagsinput input,
body.darkMode .reprePage .bootstrap-tagsinput input {
  color: #747474;
}

body.darkMode .artists-page .TagBar label,
body.darkMode .reprePage .TagBar label {
  color: #fff;
}

body.darkMode .pagination-data .page-item.active .page-link {
  color: #fff;
}

body.darkMode .pagination-data .pagination .page-link {
  color: #747474;
}

body.darkMode .expand-check {
  background: #747474;
  border: 1px solid #fff;
}

body.darkMode .has > label {
  color: #fff;
}

body.darkMode .tree ul label {
  color: #fff;
}

body.darkMode .whiteLogo {
  display: inline-block;
}

body.darkMode .blackLogo {
  display: none;
}

body.darkMode .Headersearch {
  border-color: #fff;
}

body.darkMode .mainHeader.fixed {
  background: #333333;
}

body.darkMode a.default-color {
  color: #fff;
}

#artistsList .pagination,
#companyList .pagination {
  display: none;
}

#companyList .listBox__detailArtist h2 {
  color: #231f1f;
  margin-bottom: 0;
}

#companyList .listBox__detailArtist .sub {
  color: #000;
}

.pagination-data .pagination .page-link {
  border: none;
  /* padding: 0.5rem 1.5rem; */
  padding: 0.5rem 3.8rem;
  color: rgba(11, 4, 52, 0.5);
  font-size: 22px;
  background-color: transparent;
  line-height: 2.25;
}

.pagination-data {
  margin: 0 auto;
  margin-top: 40px;
}

.pagination-data .pagination {
  border: 1px solid black;
  border-radius: 15px;
  margin: 0 auto;
  justify-content: center;
  width: 90%;
  align-items: center;
}

.page-item.active .page-link {
  background-color: transparent;
  color: black;
}

.page-item.disabled .page-link {
  background-color: transparent;
}

.left-arrow-img,
.right-arrow-img {
  width: 45px;
  position: relative;
}

.top-search-div {
  display: inline-flex !important;
}

/* Skeleton Loading */

.cards {
  display: flex;
}

.card {
  margin: 10px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 0px;
  margin-bottom: 30px;
}

.card .image img {
  max-width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .content {
  padding: 20px 30px;
}

.card.is-loading .image,
.card.is-loading h2,
.card.is-loading p {
  background: #eee;
  background: linear-gradient(110deg, #d4d4d4 8%, #f5f5f5 18%, #d4d4d4 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  -webkit-animation: 1.5s shine linear infinite;
  animation: 1.5s shine linear infinite;
}

.card.is-loading .image {
  height: 200px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card.is-loading h2 {
  height: 30px;
}

.card.is-loading p {
  height: 70px;
}

/* ============================================================
   Dark Mode — Cards + Loading Skeletons
   ============================================================ */
body.darkMode .card {
  background: #1E1E1E;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  border: 1px solid #2E2E2E;
}

body.darkMode .card .content {
  color: #EAEAEA;
}

body.darkMode .card .content h2 {
  color: #FFF;
}

body.darkMode .card .content p {
  color: #B0B0B0;
}

/* Dark-mode skeleton shimmer */
body.darkMode .card.is-loading .image,
body.darkMode .card.is-loading h2,
body.darkMode .card.is-loading p {
  background: linear-gradient(
    110deg,
    #2C2C2C 8%,
    #3A3A3A 18%,
    #2C2C2C 33%
  );
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
  border-radius: 6px;
}

.market-text {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  ) !important;
  -webkit-background-clip: text !important;
}

.skill-filter .colored-radio:checked {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 50%
  ) !important;
  border: 1px solid rgba(250, 171, 44, 1);
}

.font-20 {
  font-size: 20px !important;
}

.skillSidebarBtn {
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;
  border: none;
  padding: 8px 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-left: -17px;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
}

/* .feeturre-page .MarketPlacBox {
  word-break: break-word;
} */

.font-118 {
  font-size: 118px !important;
}

.joinCommunity {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold !important;
  font-family: "Sora", sans-serif !important;
  text-transform: uppercase !important;
  margin-top: 0px !important;
  text-align: center;
}

.joinCommunity:before {
  content: unset !important;
}

.color-black {
  color: #000 !important;
}

.signup-data h2 {
  font-family: "Sora", sans-serif !important;
  font-weight: bold;
}

.signup-data .socialLogin a,
.signin-data .socialLogin a {
  border-radius: 16px;
}

.signin-data .socialLogin a {
  width: auto !important;
}

.signin-data .socialLogin a label {
  width: 100%;
}

.signup-data .form-group input.form-control {
  border-radius: 13px !important;
  border: 1px solid #000;
  height: 55px;
}

.country-data button {
  border: 1px solid #000 !important;
  border-radius: 15px !important;
}

.country-data input {
  height: 35px !important;
}

#submit-create-account,
#submit-login,
.buyXfeeBtn {
  width: 50%;
  margin: 0 auto;
  padding: 15px;
  border-radius: 15px;
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  );
}

#submit-login {
  width: 100%;
}

.signup-data .form-group .icon:before {
  color: #80c242 !important;
}

.country-data .icon.icon-location:before {
  z-index: 99999;
}

.signup-data .bootstrap-select .dropdown-toggle:after {
  color: #80c242 !important;
}

.signup-data .bootstrap-select.show .dropdown-menu {
  border-color: #000;
}

.signup-data .custom-checkbox .custom-control-label:before {
  border-radius: 7px;
}

.signup-data
  .bootstrap-select
  .dropdown-toggle.bs-placeholder
  .filter-option-inner-inner {
  color: #c2c2c2;
}

.form-group .icon.icon-location:before {
  content: "\e947" !important;
}

.signin-data .rightContent--login {
  max-width: 600px !important;
}

.signin-data .rightContent h2 {
  font-family: "Sora-Bold" !important;
}

.signin-data .rightContent .accountType label span {
  color: black !important;
  border: 1px solid black !important;
}

.authPage--account
  .rightContent
  .accountType
  label
  input[type="radio"]:checked
  + span {
  color: #80c242 !important;
  border: 1px solid #80c242 !important;
}

#login-form .form-group .form-control {
  border: 1px solid #000;
}

.ScrollUl::-webkit-scrollbar {
  width: 6px;
  /* width of the entire scrollbar */
}

.ScrollUl::-webkit-scrollbar-track {
  background: #d9f7e5;
  /* color of the tracking area */
  border-radius: 6px;
}

.ScrollUl::-webkit-scrollbar-thumb {
  background-color: #00cb50;
  border-radius: 20px;
  background: linear-gradient(
    45deg,
    rgba(128, 194, 66, 1) 50%,
    rgba(49, 182, 128, 1) 100%
  ) !important;
}

.artistry-font {
  font-size: 25px !important;
  font-weight: bold !important;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  margin-top: -15px !important;
  margin-bottom: 60px !important;
}

.gradientTextOrange {
  background: linear-gradient(
    260deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.signin-data .form-group .icon:before {
  font-size: 28px !important;
  left: 18px !important;
  top: 20px !important;
  color: #80c242 !important;
}

.signin-data .form-group .icon input {
  padding-left: 60px !important;
}

.signin-data .custom-checkbox .custom-control-label:before {
  border-radius: 7px;
  border-color: #999191;
}

.color-c2c2c2 {
  color: #c2c2c2 !important;
}

.m-l-25 {
  margin-left: 25px;
}

.m-r-25 {
  margin-right: 25px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-t-0 {
  margin-top: 0 !important;
}

.signin-data .text-signup {
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  padding: 4px 10px;
  color: #fff;
  border-radius: 7px;
  margin-left: 35px;
  font-weight: bold;
}

.line-or-class {
  width: 80%;
  text-align: center;
  position: relative;
  line-height: 0.1em;
  margin: 0 auto !important;
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.line-or-class span:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 40%;
  background: #c2c2c2;
  left: 0px;
}

.line-or-class span:after {
  position: absolute;
  content: "";
  height: 2px;
  width: 40%;
  background: #c2c2c2;
  right: 0px;
}

.signin-data .rightContent p {
  margin-top: 60px !important;
  font-size: 22px !important;
}

.resourcePage .bannerSection__content {
  color: #1c2753 !important;
  margin-top: 100px !important;
  margin-bottom: 50px !important;
}

.resourcePage .monitiseSection .list-inline-item {
  width: 25%;
}

.resourcePage .HeroSearchBar {
  margin-bottom: 115px;
}

.p-b-50 {
  padding-bottom: 50px !important;
}
.listRow > div[class*="col-"] {
  margin-bottom: 40px;
}

.listRow .listBox {
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.listRow .listBox .listBox__detailFeeturres {
  flex-grow: 1;
}
.listRow .listBox .listBox__detailArtist {
  flex-grow: 1;
}

/* .tree .has .active .expand-check:nth-child(1)::after{
  content: '+' !important;
} */
@-webkit-keyframes shine {
  to {
    background-position-x: -200%;
  }
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

@media (max-width: 425px) {
  .heading__detailArtist h2 {
    font-size: 35px !important;
  }

  .TransBgSidebar {
    margin: 0 25px 25px 20px;
  }

  .repre-container .detailsBox__right {
    margin: 0px 15px 0 15px;
  }

  .repre-container .detailsBox__left {
    margin: 0 25px 0 0px;
  }

  .signin-data .rightContent p {
    margin-top: 60px !important;
    font-size: 18px !important;
  }
}

.details-page .detailsBox__left .userInfo__details {
  position: unset;
  color: #fff;
  padding: 30px;
}

.details-page .detailsBox__left .userInfo__details {
  color: #000;
}

.filterSection {
  display: block;
}
.filterSection__wrapper > li .form-group .form-control,
.filterSection__wrapper > li .form-group .bootstrap-tagsinput,
.filterSection__wrapper > li .filterbtn {
  box-shadow: none;
  color: #000;
}

.filterSection__wrapper > li .filterbtn {
  color: #fff;
}

body.darkMode .details-page .detailsBox__left .userInfo__details,
body.darkMode .details-page .detailsBox__left .userInfo__details h4,
body.darkMode .musicInfo__List h4 {
  color: #fff;
}

body.darkMode
  .details-page
  .detailsBox__left
  .musicwrapper
  .musicInfo__List
  .badgewrapper__list {
  background-color: #000;
  border: 1px solid #000;
  color: #fff;
}

body.darkMode .ArtitBioOuter,
body.darkMode .GreyRoundBox {
  background: #7b797930;
}

body.darkMode .custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
  background-color: #000;
  color: #fff;
}

body.darkMode .currency-tabs ul.nav-tabs li.nav-item a {
  background-color: transparent !important;
}

body.darkMode .feeturre__videoBox .nav-justified .nav-item {
  border: 1px solid #3f3f3f;
}

body.darkMode rect {
  fill: #000;
}
body.darkMode text {
  color: rgb(234 234 234) !important;
  fill: rgb(234 234 234) !important;
}

.custom-tabs ul.nav-tabs {
  border: none;
}

.details-page
  .detailsBox__left
  .userInfo__details
  .badgewrapper__list.font-med {
  color: rgb(56 194 223);
}

.details-page .detailsBox__left {
  background-color: #dfdfdf30;
  border-radius: 20px;
  overflow: hidden;
}

.details-page
  .detailsBox__left
  .musicwrapper
  .musicInfo__List
  .badgewrapper__list {
  min-width: auto;
  padding: 3px 6px;
  border: 1px solid #d6d6d6;
  border-radius: 7px;
  font-weight: normal;
  background-color: #ffffff;
  color: #676767;
  font-size: 14px;
}

body.darkMode .collaboration-value {
  color: #000 !important;
}

.collaboration-value {
  min-width: auto;
  padding: 3px 6px;
  border: 1px solid #d6d6d6;
  border-radius: 7px;
  font-weight: normal;
  background-color: #ffffff;
  color: #676767;
  font-size: 14px;
}

.details-page .detailsBox__left .musicwrapper .musicInfo__List h4 {
  margin-bottom: 4px;
}

.details-page .detailsBox__left .userInfo__img:before {
  display: none;
}

#marketplaceFeeturreList .listBox {
  background: linear-gradient(260deg, #231f1f 0%, rgb(73 72 70) 100%);
}

#marketplaceFeeturreList .listBox__detailFeeturres {
  background: linear-gradient(
    260deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
}

body.darkMode #marketplaceFeeturreList .listBox {
  background: linear-gradient(260deg, #fff 0%, rgb(246 245 245) 100%);
}

.feerurre-slider {
  margin: 0px 30px;
  padding: 30px 0 30px 0px;
  display: none;
}

.feerurre-slider .container {
  border: 1px solid #fbac2c;
  border-radius: 20px;
  padding-bottom: 40px;
  padding-top: 40px;
}

.details-page .detailsBox__left .userInfo--verified .userInfo__details h2,
.details-page .detailsBox__left__profile .media--verified .media-body h2 {
  background-image: url(../images/verified-yellow.png);
  background-position: center right !important;
  background-size: 25px;
  display: block;
}

.details-page .detailsBox__left__profile .media--verified .media-body a {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  border: none;
}

.details-page .musicwrapper a.theme-color {
  background: linear-gradient(
    45deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
  font-size: 18px;
}

.details-page .musicwrapper .customGutter a.buyBtn {
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
}

body.darkMode
  .details-page
  .detailsBox__left
  .userInfo--verified
  .userInfo__details
  h2 {
  color: #fff;
}

.heading__detailArtist,
.heading__detailRepre {
  position: relative;
}

.heading__detailArtist h4,
.heading__detailArtist h2 {
  font-size: 69px;
  text-transform: uppercase;
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.heading__detailArtist .follow,
.heading__detailRepre .follow {
  position: absolute;
  top: 50%;
  right: 0px;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  );
  color: #fff !important;
  transform: translateY(-50%);
  padding: 3px 7px;
  border-radius: 6px;
}

.heading__detailRepre h4,
.heading__detailRepre h2 {
  font-size: 60px;
  text-transform: uppercase;
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.repre-details-artist .listBox {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
}

.ArtistSocialOuter {
  position: absolute;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 1200px) and (max-width: 1599px)
{
.bannerSection--dynamic {
  padding-bottom: 85px;
}
}

.feeturreBioOuter {
  background: #e8ebe8;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 40px;
  margin-top: 40px;
}

#artistsimilarList .owl-feeturre-list .genres,
#similarFeeturreList .owl-feeturre-list .genres {
  color: #231f1f;
}

.ArtitBioOuter,
.GreyRoundBox {
  background: #e8ebe8;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 40px;
}

.ArtitBioOuter h3,
.GreyRoundBox h3 {
  font-weight: bold;
  text-transform: uppercase;
}

.repType {
  color: #000;
}

.ArtistMetaData {
  margin-bottom: 30px;
}

.Artistcontactbtn {
  padding: 0px 30px 0;
}

.Artistcontactbtn a {
  background: linear-gradient(
    45deg,
    rgba(56, 194, 223, 1) 0%,
    rgba(50, 97, 172, 1) 50%
  );
  color: #fff;
  display: block;
  text-align: center;
  padding: 13px 0px;
  border-radius: 10px;
  text-transform: uppercase;
}

.repreContactBtn {
  padding: 0px 40px 0;
}

.repreContactBtn a {
  background: linear-gradient(
    45deg,
    rgba(175, 32, 137, 1) 0%,
    rgba(89, 84, 164, 1) 50%
  );
  color: #fff;
  display: block;
  text-align: center;
  padding: 13px 0px;
  border-radius: 10px;
  text-transform: uppercase;
}

.line-height-30 {
  line-height: 30px;
}

.details-page .detailsBox__left .totalFigure {
  border: none;
  padding: 30px 30px 0;
}

.custom-tabs.customCentertabs ul.nav-tabs {
  max-width: 70%;
  margin: 0 auto 15px;
}

.requrestBtn a {
  background: linear-gradient(
    45deg,
    rgba(150, 201, 62, 1) 0%,
    rgba(103, 188, 71, 1) 100%
  );
}

.custom-tabs.customCentertabs ul.nav-tabs li.nav-item a.active,
.custom-tabs.customCentertabs ul.nav-tabs li.nav-item a:hover {
  background: linear-gradient(
    260deg,
    rgba(239, 78, 78, 1) 0%,
    rgba(250, 171, 44, 1) 100%
  );
}

.feeturre__videoBox .nav-justified .nav-item:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

/* .owl-nav {
  display: block !important;
} */

.feeturre__videoBox .nav-justified .nav-item:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: normal;
}

.details-page .detailsBox__left .userInfo__details {
  width: 100%;
}

.feeturre__videoBox .nav-justified .nav-item {
  margin-left: -1px;
  border: 1px solid #000;
}

.feeturre__videoBox .custom-tabs.customCentertabs ul.nav-tabs li.nav-item a {
  box-shadow: none;
}

.SideFlyout {
  position: fixed;
  right: -550px;
  width: 550px;
  height: 100%;
  background: #fff;
  top: 0px;
  z-index: 10;
  z-index: 9999;
  box-shadow: 0px 0px 2px #ced2d5;
  transition: all 0.2s ease-in;
  padding-top: 0px;
  padding: 30px;
  box-sizing: border-box;
}

.accountAddress a {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  margin-top: 10px;
}

.SideFlyoutInner {
  background: #f6f6f9;
  padding: 15px;
  border-radius: 10px;
  position: relative;
  height: 95vh;
}
.WalltetListOuter {
  text-align: center;
}
.WalltetListOuter p {
  color: #969696;
  font-size: 19px;
}
.SideFlyout.active {
  right: 0px;
  transition: all 0.2s ease-in;
}

.currency-tab.customCentertabs ul.nav-tabs {
  margin-bottom: 30px !important;
  max-width: 100% !important;
}

.pro-counter span {
  cursor: pointer;
}
.pro-counter .minus,
.pro-counter .plus {
  width: 50px;
  height: 50px;
  background: #f2f2f2;
  border-radius: 0px;
  padding: 8px 5px 8px 5px;
  border: 1px solid #d7d7d7;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  line-height: 31px;
  font-size: 21px;
  background: #fff;
}
.pro-counter input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ddd;
  border-radius: 0px;
  display: inline-block;
  vertical-align: middle;
  background: transparent;
}

@media (min-width: 2000px) {
  .earning-half-circle {
    left: 200px;
  }
}

@media (max-width: 1600px) {
  .MarketPlaceTypeBox h2 {
    font-size: 50px;
    line-height: 60px;
  }

  .createTicketPage .bannerSection {
    padding-top: 0;
  }
  .MarketPlacBoxInner {
    min-height: 360px;
  }

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

  .earning-half-circle {
    left: 5px;
  }

  .dashboard-page.earningPage .half-circle {
    width: 90px;
    height: 40px;
  }

  .dashboard-page.earningPage .earning-half-circle p {
    font-size: 15px;
  }
}

@media (max-width: 575.98px) {
  .c-footer li + li {
    margin-top: 3px;
  }
  .mainHeader .navbar-brand {
    order: 0;
  }
  .HeroSearchBar .searchInput {
    padding-left: 15px;
    font-size: 18px;
  }

  .pagination-data .pagination {
    width: 100%;
  }

  .faqPage .accordion .card-header .btn {
    font-size: 16px;
  }
  body.darkMode .mainHeader .navbar-nav li.header-icons a[class="nav-link"] {
    color: #fff;
  }
}

@media (max-width: 768px) {
  .heading__detailArtist h4 {
    font-size: 35px !important;
  }

  .feerurre-slider {
    margin: 0px 40px;
  }

  .authPage .SignUpPageBox .BoxInner h2 {
    font-size: 18px;
  }

  .earning-half-circle {
    left: 15px !important;
  }

  .dashboard-page.earningPage .half-circle {
    width: 100px !important;
    height: 50px !important;
  }
}

@media (max-width: 425px) {
  .earning-half-circle {
    left: 90px !important;
  }

  .dashboard-page.earningPage .half-circle {
    width: 120px !important;
    height: 60px !important;
  }
}
@media (max-width: 399px) {
  .TopBannerSection h1 {
    font-size: 42px !important;
  }
}

@media (max-width: 381px) {
  .Headersearch {
    width: calc(100% - 40px);
  }
  .top-search-div {
    width: 100%;
    margin-bottom: 6px;
    margin-top: 5px;
  }
  .mainHeader .navbar-brand {
    order: 0;
  }

  .mainHeader .Headersearch {
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .earning-half-circle {
    left: 60px !important;
  }

  .dashboard-page.earningPage .half-circle {
    width: 100px !important;
    height: 50px !important;
  }
}
@media (max-width: 360px) {
  .listRow > div[class*="col-"] {
    margin-bottom: 40px;
    min-width: 100%;
  }
  .artist-sort-dropdown {
    font-size: 18px;
  }
}
@media (max-width: 320px) {
  .earning-half-circle {
    left: 30px !important;
  }

  .dashboard-page.earningPage .half-circle {
    width: 80px !important;
    height: 40px !important;
  }
}

.loading-animation {
  background: linear-gradient(110deg, #d4d4d4 8%, #f5f5f5 18%, #d4d4d4 33%);
  background-size: 200% 100%;
  -webkit-animation: 1.5s shine linear infinite;
  animation: 1.5s shine linear infinite;
}

.error-help-block {
  color: red;
}

.required-symbol {
  color: red;
}
.bootstrap-tagsinput .badge [data-role="remove"]:after {
  padding: 0 5px;
}

/*
 * Variables
 */
:root {
  --card-padding: 24px;
  --card-height: 340px;
  --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);
  --avatar-size: 32px;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: radial-gradient(
    circle 16px at center,
    white 99%,
    transparent 0
  );
  --title-height: 32px;
  --title-width: 200px;
  --title-position: var(--card-padding) 180px;
  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);
  --desc-line-height: 16px;
  --desc-line-skeleton: linear-gradient(
    white var(--desc-line-height),
    transparent 0
  );
  --desc-line-1-width: 230px;
  --desc-line-1-position: var(--card-padding) 242px;
  --desc-line-2-width: 180px;
  --desc-line-2-position: var(--card-padding) 265px;
  --footer-height: 40px;
  --footer-position: 0 calc(var(--card-height) - var(--footer-height));
  --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
  --blur-width: 200px;
  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}

/*
 * Card Skeleton for Loading
 */
.s-card {
  width: 280px;
  height: 30px;
  display: block;
}
.s-card:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(
      90deg,
      rgba(211, 211, 211, 0) 0,
      rgba(211, 211, 211, 0.8) 50%,
      rgba(211, 211, 211, 0) 100%
    ),
    var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton),
    var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
  background-size: var(--blur-size), var(--title-width) var(--title-height),
    var(--desc-line-1-width) var(--desc-line-height),
    var(--desc-line-2-width) var(--desc-line-height),
    var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
  background-position: -150% 0, var(--title-position),
    var(--desc-line-1-position), var(--desc-line-2-position),
    var(--avatar-position), var(--footer-position), 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading 1.5s infinite;
  animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
  to {
    background-position: 350% 0, var(--title-position),
      var(--desc-line-1-position), var(--desc-line-2-position),
      var(--avatar-position), var(--footer-position), 0 0;
  }
}

@keyframes loading {
  to {
    background-position: 350% 0, var(--title-position),
      var(--desc-line-1-position), var(--desc-line-2-position),
      var(--avatar-position), var(--footer-position), 0 0;
  }
}

/*New Player*/

#app-cover {
  width: 430px;
  height: 100px;
  margin: -4px auto;
}

#bg-artwork {
  filter: blur(40px);
  -webkit-filter: blur(40px);
  z-index: 1;
}

#player {
  position: relative;
  height: 100%;
  z-index: 3;
}

#player-track {
  position: absolute;
  top: 0;
  right: 15px;
  left: 15px;
  padding: 13px 22px 10px 184px;
  background-color: #fff7f7;
  border-radius: 15px 15px 0 0;
  transition: 0.3s ease top;
  z-index: 1;
}

#player-track.active {
  top: -92px;
}

#album-name {
  color: #54576f;
  font-size: 17px;
  font-weight: bold;
}

#track-name {
  color: #acaebd;
  font-size: 13px;
  margin: 2px 0 13px 0;
}

#track-time {
  height: 12px;
  margin-bottom: 3px;
  overflow: hidden;
}

#current-time {
  float: left;
}

#track-length {
  float: right;
}

#current-timee,
#track-length {
  color: transparent;
  font-size: 11px;
  background-color: #ffe8ee;
  border-radius: 10px;
  transition: 0.3s ease all;
}

#track-time.active #current-time,
#track-time.active #track-length {
  color: #f86d92;
  background-color: transparent;
}

#s-area,
#seek-bar {
  position: relative;
  height: 4px;
  border-radius: 4px;
}

#s-area {
  background-color: #ffe8ee;
  cursor: pointer;
}

#ins-time {
  position: absolute;
  top: -29px;
  color: #fff;
  font-size: 12px;
  white-space: pre;
  padding: 5px 6px;
  border-radius: 4px;
  display: none;
}

#s-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0.2;
  z-index: 2;
}

#ins-time,
#s-hover {
  background-color: #3b3d50;
}

#seek-bar {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fd6d94;
  transition: 0.2s ease width;
  z-index: 1;
}

#player-content {
  position: relative;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 30px 80px #656565;
  border-radius: 15px;
  z-index: 2;
}

#album-art {
  position: absolute;
  top: -40px;
  width: 115px;
  height: 115px;
  margin-left: 40px;
  transform: rotateZ(0);
  transition: 0.3s ease all;
  box-shadow: 0 0 0 10px #fff;
  border-radius: 50%;
  overflow: hidden;
}

#album-art.active {
  top: -60px;
  box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px auto 0 auto;
  background-color: #d6dee7;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
  z-index: 2;
}

#album-art img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
}

#album-art img.active {
  opacity: 1;
  z-index: 1;
}

#album-art.active img.active {
  z-index: 1;
  animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

#buffer-box {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 13px;
  color: #1f1f1f;
  font-size: 13px;
  font-family: Helvetica;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  padding: 6px;
  margin: -12px auto 0 auto;
  background-color: rgba(255, 255, 255, 0.19);
  opacity: 0;
  z-index: 2;
}

#album-art img,
#buffer-box {
  transition: 0.1s linear all;
}

#album-art.buffering img {
  opacity: 0.25;
}

#album-art.buffering img.active {
  opacity: 0.8;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box {
  opacity: 1;
}

#player-controls {
  width: 250px;
  height: 100%;
  margin: 0 5px 0 141px;
  float: right;
  overflow: hidden;
}

.PlayreOuter .control {
  width: 33.333%;
  float: left;
  padding: 12px 0;
}

.PlayreOuter .button {
  padding: 25px;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.PlayreOuter .button span {
  display: block;
  color: #333333;
  font-size: 26px;
  text-align: center;
  line-height: 1;
}

.PlayreOuter .button,
.PlayreOuter .button span {
  transition: 0.2s ease all;
}

.PlayreOuter .button:hover {
  background-color: #d6d6de;
}

.PlayreOuter .button:hover i {
  color: #fff;
}

/*Player End*/

.PlayreOuter .data {
  height: 1px;
  width: 1px;
}

.PlayreOuter #loader {
  width: 100%;
  height: 50px;

  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  display: -ms-grid;
  display: grid;
  place-items: center;
}
.PlayreOuter #loader:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  border: 15px solid #a0a0a0;
  border-radius: 50%;
  border-top-color: #2887e3;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#song-image {
  display: none;
}

.PlayreOuter #wrapper {
  padding: 1em 0 1em 0;
  display: none;
}
.PlayreOuter .music-player {
  position: relative;
  font-size: 16px;
  width: 100%;

  padding: 2em 1.8em;
  background: linear-gradient(
    45deg,
    rgba(24, 186, 212, 1) 0%,
    rgba(49, 182, 128, 1) 50%,
    rgba(128, 194, 66, 1) 100%
  ) !important;
  border-radius: 20px;
  -webkit-box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.25);
  box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.25);
}
.PlayreOuter a {
  display: block;
  background-color: #ffffff;
  border-radius: 0.3em;
  -webkit-box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.25);
  box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.25);
  padding: 1.1em 0;
  text-align: center;
  margin-top: 1em;
  font-size: 1.2em;
  color: #2887e3;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.PlayreOuter img {
  width: 100%;
  margin-top: 1.25em;
}
.PlayreOuter #playlist {
  float: right;
}
.PlayreOuter .song-details {
  font-family: "Poppins", sans-serif;
  text-align: center;
  display: none;
}
.PlayreOuter .song-details #song-name {
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.PlayreOuter .song-details #song-artist {
  font-size: 0.8em;
}
.PlayreOuter .player-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 0 1.25em;
  margin: 1.25em 0 0.6em 0;
}
.PlayreOuter .music-player button {
  border: none;
  background-color: transparent;
  outline: none;
}
.PlayreOuter #play,
.PlayreOuter #pause {
  height: 2.3em;
  width: 2.3em;
  font-size: 1.6em;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
}
.PlayreOuter #prev,
.PlayreOuter #next {
  color: #16191e;
  font-size: 1.2em;
}
.PlayreOuter #shuffle,
.PlayreOuter #repeat {
  color: #949494;
  font-size: 0.8em;
}

.PlayreOuter .material-icons {
  line-height: 2;
}

.PlayreOuter #progress-bar {
  position: relative;
  width: 100%;
  height: 0.3em;
  background-color: #eee;
  margin: 1em 0;
  border-radius: 0.18em;
  cursor: pointer;
}
.PlayreOuter #current-progress {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: 100%;
  width: 0;
  background: #2887e3;
  border-radius: 0.18em;
}
.PlayreOuter .time-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Roboto Mono", monospace;
}

.PlayreOuter #playlist-container {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  padding: 2em 1em;
  border-radius: 0.6em;
  font-family: "Poppins", sans-serif;
}
.PlayreOuter .hide {
  display: none;
}
.PlayreOuter #close-button {
  background: transparent;
  border: 0;
  height: 2em;
  width: 2em;
  border-radius: 0.3em;
  cursor: pointer;
  margin-left: 90%;
}
.PlayreOuter ul {
  list-style-type: none;
}
.PlayreOuter li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1em 0;
  cursor: pointer;
}
.PlayreOuter .playlist-song-details {
  margin-left: 1em;
}
.PlayreOuter .playlist-song-details > span {
  display: block;
}
.PlayreOuter #playlist-song-artist-album {
  color: #444;
  font-size: 0.8rem;
}
.PlayreOuter .playlist-image-container {
  width: 3em;
}
.PlayreOuter button.active i {
  color: #2887e3;
}


.blurBox
{
   -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}


.lockforPro a { background: #ff5722 url(../../images/lock-icon.png) no-repeat 14px center;
    background-size: 21px;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    padding-left: 48px; }

.lockforPro a:hover { background:#32B9B5 url(../../images/lock-icon.png) no-repeat 14px center; background-size: 21px; }

.no-ellipsis span { white-space:unset !important; }

.usdSyb:after, .xrpSyb:after { position: absolute;
    content: "RLUSD";
    bottom: -8px;
    right: 17px;
    font-size: 80px;
    /* width: 100%; */
    /* height: 100%; */
    color: #ffffff57;
    z-index: 10;
    line-height: 90px;   }
.xrpSyb:after { content:"XRP";   }

.usdSyb .counterBox__left h5, .xrpSyb .counterBox__left h5 { font-size:40px; }

.whiteText, .whiteText .counterBox { color:#fff !important; }
.award_list a { display:block; }

.tooltip-inner {
    text-align: center;
}

#checkout-shop-order img, .cart-item-box img { max-width:60px; }
#checkout-shop-order .card .col-8 .row > div, .cart-item-box .card .row > div { align-self:center; }
#checkout-shop-order h5 { margin-bottom:0px; }

.billingBox { background: #fff;
    padding: 25px;
    box-shadow: 0px 0px 35px #e9e9e9;
    border-radius: 25px;  }

#place-shop-order .form-group .form-control {     border: 1px solid #ccc; }

.progressive--is-loaded {
    filter: blur(0px); }

#calculation-box h6 { font-weight:bold; }
#calculation-box {     background: #fff;
    padding: 15px 10px;
    padding-top: 0px;
    border-radius: 18px; }

@media screen and (max-width: 450px) {
  .PlayreOuter .music-player {
    font-size: 14px;
  }
}

main.main-content { margin-top:160px; }
/* .bannerSection--dynamic .bannerOverlay { position:relative; } */



[draggable=true] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

ul#sortable-list {
  list-style: none;
  margin: 0px;
  padding:0px;

}
ul#sortable-list li {
 list-style-image: none;
    margin-bottom: 10px;
    border: 1px solid #31b680;
    padding: 11px;
    border-radius: 4px;
    color: #31b680;
    position: relative;


}


#sortable-list li {  border: 1px solid #31b680; }

.SongBtns { margin-top:30px; }
.SongBtns a { margin-right:10px; }

.mb4 { margin-bottom:40px; }

.partsItems { margin:0px; padding:0px; margin-bottom:30px;  }
.partsItems li { list-style: none;
    cursor: pointer;
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px solid #8bc73f;
    background: linear-gradient( 45deg, rgba(24, 186, 212, 1) 0%, rgba(49, 182, 128, 1) 50%, rgba(128, 194, 66, 1) 100% );
    line-height: 100px; color:#fff; margin-right:10px; position:relative; }

.partsItems li:hover { background: #8bc73f; }

ul#sortable-list li:after {
background: url(../images/bin.png) no-repeat center;
width: 20px; height: 20px; content: ''; position: absolute;right: -30px;
background-size: 100%;
}

ul#sortable-list li:hover:after { cursor:pointer; }
.cke_notifications_area { display:none !important; }
input[name="category"]:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

.user_name { position: relative;padding-left: 10px;  }
.user_name:before { position: absolute; content: '@'; left: 0px; top: 0px;;  }


.collapse.show {
    visibility: visible;
}

.collapse {
    visibility: visible;
}


/* Custom audio player tweaks */
#audio-player audio::-webkit-media-controls-panel {
  background-color: #1f2937;
}

.track-play-button {
  transition: all 0.2s ease;
}

.track-play-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}


/* ----- Artist Hero Section ----- */
.artist-hero-section {
  background: linear-gradient(90deg, #f25c5c 0%, #fbb03b 100%);
  color: #fff;
  padding-bottom: 0px !important;
  margin-top: 50px;
  margin-bottom: 80px;
}
.artist-hero__img {
  display: block;
  max-width: 100%;
  height: auto;
      margin-top: -111px;
}
.artist-hero__title {
  font-size: 4.5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
      font-family: "Sora-Bold";
}
.artist-hero__text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* gradient buttons */
.btn-gradient {
  background: linear-gradient(90deg, #00c6ff 0%, #00c850 100%);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.btn-gradient:hover {
  opacity: 0.9;
}

/* ----- DJ Pharris Hero Section ----- */
.dj-hero-section {
  background: linear-gradient(90deg, #b02eb9 0%, #4539c5 100%);
  color: #fff;
  margin: 100px 0;
   padding-bottom: 0px !important;
}
.dj-hero__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: -111px;
}
.dj-hero__title {
  font-size: 4.5rem;
  font-weight: 700;
  margin-bottom: 1rem;

}
.dj-hero__text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* reuse this from the previous section */
.btn-gradient {
  background: linear-gradient(90deg, #00c6ff 0%, #00c850 100%);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.btn-gradient:hover {
  opacity: 0.9;
}

.streamHeadingSection { margin: 100px 0; margin-bottom: 200px; }

.streamHeading h2 {      font-size: 100px;
    font-weight: bold;
    font-family: "Sora", sans-serif;
    text-transform: uppercase; }

    .streamHeading h2 span {     background: linear-gradient(45deg, #AF2089 0%, #5954A4 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  }


    /* Namespace everything under .stream-page */
.stream-page { font-family: 'Helvetica Neue', Arial, sans-serif; margin-top: 150px; }

/* Top bar */
.stream-page__topbar {
  height: 40px;
  background: linear-gradient(90deg, #38BFDD 0%, #3261AC 100%);
}
.stream-page__toplink {
  color: #fff;
  font-size: .875rem;
  text-decoration: none;
  padding: 0 1rem;
}
.stream-page__toplink:hover {
    text-decoration: underline;
    color: #79c243;
}

/* Sidebar */
.stream-page__sidebar {

  background: #F9F9F9;
    border: none;
    border-radius: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  padding-top: 1.5rem;
}
.stream-page__section-header {
  font-weight: 700;
  font-size: 1rem;
  color: #333;
  padding: .5rem 1rem;
}
.stream-page__sidebar .nav-link {
  color: #555;
  padding: .4rem 1rem;
      font-size: 16px;
    line-height: 30px;
}
.stream-page__sidebar .nav-link:hover {
  background: #f8f9f9;
  color: #111;
}
.playlists-header .fa-plus { color: #28a745; }

.stream-page__sidebar .nav-link i { margin-right: 15px; }


/* Main container */
.table thead th { border-bottom: none;}

/* Page title */
.stream-page__title {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #B02EB9 0%, #4539C5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search input */
.stream-page__search-form .input-group .form-control {
  border-radius: 20px 0 0 20px;
  border: 1px solid #ddd;
}
.stream-page__search-form .input-group-text {
  border-radius: 0 20px 20px 0;
  border: 1px solid #ddd;
  border-left: none;
  background: #fff;
}

/* Section titles */
.stream-page__section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Album/New-Release cards */
.stream-page__album-card {
  border: none;
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
  margin: 0 .5rem;
}
.stream-page__album-card .card-img-top {
  height: 150px;
  object-fit: cover;
}
.stream-page__album-card .card-body {
  position: relative;
  padding: .75rem;
}
.stream-page__play-btn,
.stream-page__fav-btn {
  position: absolute;
  top: .75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  color: #fff;
  background: rgba(0,0,0,.6);
  font-size: 1rem;
}
.stream-page__play-btn { left: .75rem; }
.stream-page__fav-btn  { right: .75rem; }

/* Carousel nav buttons (if you’re using Owl/Slick) */
.stream-page__carousel-albums .owl-nav button,
.stream-page__carousel-releases .owl-nav button {
  background: rgba(0,0,0,.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.stream-page__carousel-albums .owl-nav .owl-prev { left: -16px; }
.stream-page__carousel-albums .owl-nav .owl-next { right: -16px; }
/* same for .stream-page__carousel-releases */

/* Tracks table */
.stream-page__table-wrapper {
background: #E8EBE8;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
}
.stream-page__table-wrapper .table {

  border-radius: .5rem;
}

.stream-page__table-wrapper .table tbody tr {   background-color: #fff;
    }

.stream-page__table-wrapper th,
.stream-page__table-wrapper td {
  border-top: none;
  vertical-align: middle;
}
.stream-page__table-wrapper td i {
  color: #ccc;
  cursor: pointer;
}
.stream-page__table-wrapper td i:hover {
  color: #e74c3c;
}

/* Genres */
.stream-page__genre-item {
  text-align: center;
  width: 80px;
  margin: 0 .5rem 1rem;
}
.stream-page__genre-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}


.cardstyle { background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0px 2px 13px #b6b6b62e;
    margin-bottom: 14px; }
.cardText { padding: 20px;}
.trackHeading { font-size: 18px; color: #000; }
.trackArtistName { font-size: 14px; color: #676767; }
.GenresRounded { border-radius: 100% !important; }
.GenresText { top: 50%; transform: translateY(-50%);}
.GenresText .small { font-size: 18px;}
.navlarger {     font-size: 14px;
    font-weight: bold; }
.navlarger i { color: #F16147; }
.playIcon { max-width: 40px;     bottom: 10px;
    left: 10px; opacity: 0; }
.cardstyle:hover .playIcon { opacity: 1;}

.stream-page__table-wrapper table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;      /* 0 horizontal, 0.75rem vertical gap */
}

.stream-page__table-wrapper table tbody tr {
  background: #fff;               /* white “card” */
}

.stream-page__table-wrapper table tbody tr td:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.stream-page__table-wrapper table tbody tr td:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* ============================================================
   Stream Page — Dark Mode
   ============================================================ */
body.darkMode .stream-page__sidebar {
  background: #1A1A1A;
  border: none;
  border-radius: 20px;
  color: #EDEDED;
}
body.darkMode .stream-page__section-header {
  color: #F0F0F0;
}
body.darkMode .stream-page__sidebar .nav-link {
  color: #BBBBBB;
}
body.darkMode .stream-page__sidebar .nav-link:hover {
  background: #222;
  color: #FFF;
}
body.darkMode .playlists-header .fa-plus {
  color: #38D66B;
}

/* Title gradient preserved */
body.darkMode .stream-page__title {
  background: linear-gradient(90deg, #B02EB9 0%, #4539C5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search form */
body.darkMode .stream-page__search-form .input-group .form-control {
  background: #1F1F1F;
  border: 1px solid #333;
  color: #FFF;
}
body.darkMode .stream-page__search-form .input-group-text {
  background: #2A2A2A;
  border: 1px solid #333;
  color: #FFF;
}

/* Section headings */
body.darkMode .stream-page__section-title {
  color: #FFF;
}

/* Album cards */
body.darkMode .stream-page__album-card {
  background: #222;
  border: 1px solid #333;
}
body.darkMode .stream-page__album-card .card-body {
  color: #EAEAEA;
}
body.darkMode .stream-page__play-btn,
body.darkMode .stream-page__fav-btn {
  background: rgba(255,255,255,0.15);
  color: #FFF;
}
body.darkMode .stream-page__play-btn:hover,
body.darkMode .stream-page__fav-btn:hover {
  background: rgba(255,255,255,0.25);
}

/* Carousel nav */
body.darkMode .stream-page__carousel-albums .owl-nav button,
body.darkMode .stream-page__carousel-releases .owl-nav button {
  background: rgba(255,255,255,0.15);
  color: #FFF;
}

/* Tracks table wrapper */
body.darkMode .stream-page__table-wrapper {
  background: #181818;
  border-radius: 1rem;
}

body.darkMode .stream-page__table-wrapper .table thead tr,
body.darkMode .stream-page__table-wrapper .table tbody tr {
  background: #222;
  color: #EDEDED;
}
body.darkMode .stream-page__table-wrapper .table tbody td a {
  color: #EDEDED;
}
body.darkMode .stream-page__table-wrapper td i {
  color: #999;
}
body.darkMode .stream-page__table-wrapper td i:hover {
  color: #FF6A5C;
}

/* Genres */
body.darkMode .stream-page__genre-item {
  color: #EAEAEA;
}
body.darkMode .stream-page__genre-circle {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}

/* Card variants */
body.darkMode .cardstyle {
  background: #1E1E1E;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
body.darkMode .trackHeading {
  color: #FFF;
}
body.darkMode .trackArtistName {
  color: #AAA;
}
body.darkMode .navlarger i {
  color: #FF6A5C;
}



.trackTable .square-img { max-width: 40px; margin-right: 10px;  }
.trackTable .d-flex { align-items: center; }

.trackTable .d-flex:hover{
    cursor: pointer;
}
/* ----------- AUDIO PLAYER ----------- */
.audio-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, #B02EB9 0%, #4539C5 100%);
  color: #fff;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
  z-index: 9999;
  font-family: inherit;
  font-size: 0.9rem;
}

/* Meta (cover + text) */
.audio-player__meta {
  flex: 1;
  min-width: 180px;
}
.audio-player__cover {
  width: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}
.audio-player__text {
  overflow: hidden;
}
.audio-player__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.audio-player__artist {
  opacity: 0.75;
}

/* Center controls */
.audio-player__center {
  flex: 2;
  max-width: 50%;
}
.audio-player__controls .audio-player__btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
  margin: 0 0.5rem;
}
.audio-player__controls .audio-player__btn--play {
  background: #fff;
  color: #4539C5;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  line-height: 1;
  border-radius: 50%;
  padding: 0;
}
.audio-player__controls .audio-player__btn:hover {
  color: #fff;
}
.audio-player__controls .text-success {
  color: #2ecc71 !important;
}

/* Seek bar */
.audio-player__seek {
  width: 100%;
}
.audio-player__seekbar {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  flex: 1;
}
.audio-player__seekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  margin-top: -4px;
}
.audio-player__seekbar::-moz-range-thumb {
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  border: none;
}

/* Extras (right side) */
.audio-player__extras {
  flex: 1;
  justify-content: flex-end !important;
}
.audio-player__icon {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  padding: 0 0.5rem;
}
.audio-player__icon:hover {
  color: #fff;
}
.audio-player__vol-range {
  width: 80px;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  margin-left: 0.5rem;
}
.audio-player__vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  margin-top: -2px;
}


/* --------- QUEUE PANEL --------- */
.queue-panel {
  width: 380px;
  height: 100vh;
  background: #fff;
  color: #111;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  z-index: 1050;
  padding: 1rem;
}

/* Header */
.queue-panel__header h5 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.queue-panel__close {
  color: #555;
  font-size: 1.1rem;
}
.queue-panel__close:hover {
  color: #000;
}

/* List */
.queue-panel__list {
  margin-top: 1rem;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  padding-right: 0.5rem; /* for scrollbar room */
}

/* Individual queue item */
.queue-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.queue-item:last-child {
  border-bottom: none;
}

/* Cover thumbnail */
.queue-item__cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Info block */
.queue-item__info {
  min-width: 0; /* allows text truncation */
}
.queue-item__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}
.queue-item__artist {
  font-size: 0.85rem;
  color: #666;
}

/* Duration */
.queue-item__duration {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #666;
}

#queue-list img { max-width: 40px;}
#queue-list li {
    margin-bottom: 20px;
    cursor: pointer;
}

.queueTrackTitle { font-size: 15px; color: #000; }
.Queue-track-meta { color: #676767; }
h1.stream-page__title { background: linear-gradient(45deg, #AF2089 0%, #5954A4 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  }

    /* --------- QUEUE PANEL : DARK MODE --------- */
body.darkMode .queue-panel{
  background:#141616;
  color:#F2F4F3;
  box-shadow:-4px 0 12px rgba(0,0,0,.6);
}

/* Header */
body.darkMode .queue-panel__header h5{
  color:#FFFFFF;
}

body.darkMode .queue-panel__close{
  color:#9AA09B;
}
body.darkMode .queue-panel__close:hover{
  color:#FFFFFF;
}

/* List */
body.darkMode .queue-panel__list{
  scrollbar-color:#2A2E2E #141616;
}

/* Individual queue item */
body.darkMode .queue-item{
  border-bottom:1px solid #242828;
}

/* Cover thumbnail */
body.darkMode .queue-item__cover{
  background:#1E2222;
}

/* Info block */
body.darkMode .queue-item__title{
  color:#FFFFFF;
}

body.darkMode .queue-item__artist{
  color:#A1A8A3;
}

/* Duration */
body.darkMode .queue-item__duration{
  color:#A1A8A3;
}

body.darkMode #queue-list li{
  color:#F2F4F3;
}

body.darkMode .queueTrackTitle{
  color:#FFFFFF;
}

body.darkMode .Queue-track-meta{
  color:#A1A8A3;
}

/* Gradient title still works in the dark */
body.darkMode h1.stream-page__title{
  background: linear-gradient(45deg, #E24BB8 0%, #7A74D6 50%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* === Usertype Section === */
.usertype-section__heading {
  font-size: 1.75rem;
  font-weight: 700;
}

/* Card base */
.usertype-card {
  border-radius: 12px;
  overflow: hidden;
}

/* Outer gradient + padding */
.usertype-card__outer {
  padding: 1.5rem;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* SUPPORTER gradient */
.usertype-card--supporter .usertype-card__outer {
  background: linear-gradient(90deg, #f12711 0%, #f5af19 100%);
}

/* CREATOR gradient */
.usertype-card--creator .usertype-card__outer {
  background: linear-gradient(90deg, #36d1dc 0%, #5b86e5 100%);
}

/* BRAND gradient */
.usertype-card--brand .usertype-card__outer {
  background: linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%);
}

/* Title & icon */
.usertype-card__title {
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}
.usertype-card__icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  line-height: 1;
}

/* Subtitle */
.usertype-card__subtitle {
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Inner white panel */
.usertype-card__inner {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
}

/* Features heading */
.usertype-card__features-heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: #686868;
  margin-bottom: 0.75rem;
}

/* Feature list items */
.usertype-card__features-list li {
    font-size: 14px;
    color: #000;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* SELECT button */
.usertype-card__btn {
  background: linear-gradient(45deg, rgba(24, 186, 212, 1) 0%, rgba(49, 182, 128, 1) 50%, rgba(128, 194, 66, 1) 100%);
  color: #fff;
  font-weight: 600;
      font-size: 1.2rem;
  padding: 0.75rem 0;
  border: none;
  border-radius: 6px;
  transition: opacity 0.2s;
  text-align: center;
}
.usertype-card__btn:hover {
  opacity: 0.9;
  color: #fff;
}


/* Entire section wrapper */
.stream-section {
  width: 100%;
}
.stream-section__inner {
  background: #E8EBE8;
  border-radius: 16px;
}

/* Header */
.stream-section__title {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
}
.stream-section__open-btn {
  background: linear-gradient(45deg, rgba(24, 186, 212, 1) 0%, rgba(49, 182, 128, 1) 50%, rgba(128, 194, 66, 1) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

/* Highlight area */
.stream-highlight__cover {
  border-radius: 12px;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1;
}
.stream-highlight__track-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
}
.stream-highlight__time {
  font-size: 0.85rem;
}

/* Progress bar */
.stream-highlight__progress {
  height: 6px;
  background-color: #ddd;
}
.stream-highlight__progress .progress-bar {
  background-color: #007bff;
}

/* Control buttons */
.stream-highlight__icon-btn {
  background: transparent;
  border: none;
  color: #555;
  font-size: 1.25rem;
  padding: 0.25rem;
}
.stream-highlight__icon-btn--active {
  color: #2bc0e4;
}
.stream-highlight__play-btn {
  background: linear-gradient(135deg, #ff8a00 0%, #e52e71 100%);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Divider */
.stream-section__divider {
  border-color: #ccc;
}

/* List items */
.stream-list__item {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}
.stream-list__item:last-child {
  border-bottom: none;
}
.stream-list__cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}
.stream-list__title {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}
.stream-list__meta {
  font-size: 0.9rem;
}
.stream-list__duration {
  font-size: 0.9rem;
  min-width: 40px;
  text-align: right;
}

/* ——— Dark Mode: Stream Section ——— */
body.darkMode .stream-section__inner {
  background: #2B2B2B;
}

body.darkMode .stream-section__title {
  color: #F1F1F1;
}

body.darkMode .stream-section__open-btn {
  /* keep the same gradient but slightly boost brightness for contrast */
  filter: brightness(1.1);
  color: #FFF;
}

/* Highlight area */
body.darkMode .stream-highlight__track-title {
  color: #FFF;
}
body.darkMode .stream-highlight__time {
  color: #A0A0A0;
}

/* Progress bar */
body.darkMode .stream-highlight__progress {
  background-color: #444;
}
body.darkMode .stream-highlight__progress .progress-bar {
  background-color: #2bc0e4; /* cyan accent */
}

/* Control buttons */
body.darkMode .stream-highlight__icon-btn {
  color: #CCC;
}
body.darkMode .stream-highlight__icon-btn--active {
  color: #2bc0e4;
}
body.darkMode .stream-highlight__play-btn {
  /* preserve your gradient but increase vividness slightly */
  filter: brightness(1.1);
}

/* Divider */
body.darkMode .stream-section__divider {
  border-color: #444;
}

/* List items */
body.darkMode .stream-list__item {
  border-bottom: 1px solid #444;
}
body.darkMode .stream-list__title {
  color: #FFF;
}
body.darkMode .stream-list__meta,
body.darkMode .stream-list__duration {
  color: #A0A0A0;
}



/* Social Media Followers Widget */
.smf-widget {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-left: 30px;
    margin-right: 30px;

    max-width:400px;
    margin-bottom: 30px;
}

.smf-widget__title {
  font-size: 1rem;
  color: #777;
  margin-bottom: 0.25rem;
}

.smf-widget__total {
  font-size: 1.75rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1rem;
}

.smf-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smf-widget__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.smf-widget__item:last-child {
  margin-bottom: 0;
}

.smf-widget__icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
  color: #555;
}

.smf-widget__network {
  flex: 1;
  margin: 0 0.75rem;
  font-size: 0.9rem;
  color: #333;
}

.smf-widget__count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;
}

/* ——— Dark Mode: Social Media Followers Widget ——— */
body.darkMode .smf-widget {
  background: #2C2C2C;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.darkMode .smf-widget__title {
  color: #A0A0A0;
}

body.darkMode .smf-widget__total {
  color: #F1F1F1;
}

body.darkMode .smf-widget__item {
  background: #3A3A3A;
}

body.darkMode .smf-widget__icon {
  color: #D1D1D1;
}

body.darkMode .smf-widget__network {
  color: #E0E0E0;
}

body.darkMode .smf-widget__count {
  color: #FFF;
}


.Artistcontactbtn { margin-bottom: 30px;}

/* -------------------------------
   smf-stats widget (below social)
   ------------------------------- */

.smf-stats-outer { padding-left: 25px; padding-right: 25px; margin-bottom: 30px; }

.smf-stats {
  margin-top: 1rem;
}

/* remove Bootstrap gutters since we add our own padding */
.smf-stats.row {
  margin-left: 0;
  margin-right: 0;
}
.smf-stats .col-6 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-bottom: 0.75rem;
}

.smf-stats__card {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.smf-stats__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #111;
  margin-bottom: 0.25rem;
}

.smf-stats__label {
  font-size: 0.95rem;
  color: #777;
  line-height: 1.2;
}

/* ——— Dark Mode: smf-stats Widget ——— */
body.darkMode .smf-stats__card {
  background: #2C2C2C;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.darkMode .smf-stats__value {
  color: #F1F1F1;
}

body.darkMode .smf-stats__label {
  color: #A0A0A0;
}



/* ------------------------------------------------
   SHOP widget container
   ------------------------------------------------ */
.shop-widget {
  background-color: #E8ECE8;
  border-radius: 20px;
}

/* Title */
.shop-widget__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
}

/* Header buttons */
.shop-widget__controls .btn {
  padding: 0.375rem 1.25rem;
  border-radius: 50px;
  font-weight: 600;
}
.shop-widget__all-btn {
  background: transparent;
  color: #4CAF50;
  border: 2px solid #4CAF50;
}
.shop-widget__sort-btn {
  background: linear-gradient(90deg, #00C5D1 0%, #4CAF50 100%);
  border: none;
  color: #fff;
}

/* Tabs wrapper */
.shop-widget__tabs {
  background-color: #fff;
  border: 3px solid #fff;
  border-radius: 12px;
  overflow: hidden;
}

/* Individual tabs */
.shop-widget__tab {
  background-color: #F0F1F2;
  border: none;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  transition: background-color .2s;
}
.shop-widget__tab:not(.shop-widget__tab--active):hover {
  background-color: #E0E1E2;
}

/* Active tab gradient */
.shop-widget__tab--active {
  background: linear-gradient(90deg, #FF5F6D 0%, #FFC371 100%);
  color: #fff;
}

/* ——— Dark Mode: Shop Widget ——— */
body.darkMode .shop-widget {
  background-color: #2B2B2B;
}

body.darkMode .shop-widget__title {
  color: #F1F1F1;
}

/* Header buttons */
body.darkMode .shop-widget__all-btn {
  background: transparent;
  color: #81C784; /* lighter green for dark bg */
  border-color: #81C784;
}
body.darkMode .shop-widget__all-btn:hover {
  background: rgba(129, 199, 132, 0.1);
}

body.darkMode .shop-widget__sort-btn {
  background: linear-gradient(90deg, #00D1E1 0%, #66BB6A 100%);
  color: #FFF;
}

/* Tabs wrapper */
body.darkMode .shop-widget__tabs {
  background-color: #333;
  border-color: #333;
}

/* Individual tabs */
body.darkMode .shop-widget__tab {
  background-color: #3A3A3A;
  color: #EAEAEA;
}
body.darkMode .shop-widget__tab:not(.shop-widget__tab--active):hover {
  background-color: #444;
}

/* Active tab gradient */
body.darkMode .shop-widget__tab--active {
  background: linear-gradient(90deg, #FF5F6D 0%, #FFC371 100%);
  color: #FFF;
}



/* Wrap in your main stylesheet */
.rewards-widget {
  background-color: #e6e9e5; /* same gray as your other panels */
  border-radius: .75rem;
}

/* Title styling */
.rewards-widget__title {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Flex container already handled by Bootstrap */
/* .rewards-widget__list { display: flex; flex-wrap: wrap; } */

/* Each square card */
.rewards-widget__card {
  position: relative;
  width: 120px;     /* tweak as needed */
  height: 120px;    /* square */
  background: #ffffff;
  border-radius: .75rem;
  padding: 10px;
}

/* The gradient footer on the first card */
.rewards-widget__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(90deg, #C547BC 0%, #5B2EEC 100%);
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 30px;
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

/* ——— Dark Mode: Rewards Widget ——— */
body.darkMode .rewards-widget {
  background-color: #2B2B2B; /* darker panel background */
}

body.darkMode .rewards-widget__title {
  color: #F1F1F1;
}

body.darkMode .rewards-widget__card {
  background: #333;
  color: #EAEAEA;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Gradient footer remains vivid; optional brightness boost */
body.darkMode .rewards-widget__footer {
  filter: brightness(1.1);
  color: #FFF;
}


/* ----- Sidebar Categories Widget ----- */
.sidebar-cats-widget {
  /* white card, rounded */

  border-radius: 0.75rem;
}

/* Group wrapper: spacing between section blocks */
.sidebar-cats-widget__group {
  /* nothing special, uses mb-4 on HTML */
}

/* Section heading */
.sidebar-cats-widget__heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333333;
}

/* Badge container (flex wrap if many) */
.sidebar-cats-widget__badges {
  display: flex;
  flex-wrap: wrap;
}

/* Individual pill badge */
.sidebar-cats-widget__badge {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #555555;
    background-color: #ffffff;
    border: 1px solid #d4d7dc;
    border-radius: 7px;
    line-height: 1;
}


/* container */
.feeturre-social-icons {
  display: flex;
  gap: 12px; /* space between icons */
  margin-bottom: 24px; /* whatever spacing you need above the follower box */
  margin-left: 30px;
}

.feeturre-social-icons img { width: 40px; height: 40px;}

/* base icon styling */
.feeturre-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem; /* adjust icon size */
  text-decoration: none;
  transition: transform .15s ease;
}
.feeturre-social-icon:hover {
  transform: scale(1.1);
}

/* individual brand colors */
.feuturre-social-icon--tiktok,
.feeturre-social-icon--x {
  background-color: #000;
}
.feeturre-social-icon--instagram {
  background-color: #E1306C;
}
.feeturre-social-icon--youtube {
  background-color: #FF0000;
}
.feeturre-social-icon--facebook {
  background-color: #1877F2;
}




/* =========================================================================
   PRICING CARDS (Free / Premium)
   ========================================================================= */
.pricing-section {
  background-color: #ECEFEA;
  border-radius: 24px;
  padding: 2rem;
}

/* card wrapper is only needed for header row; inner rows share same rounding */
.pricing-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* ---------------- Header ---------------- */
.pricing-card__header {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 0;
  text-transform: uppercase;
}

/* color override per plan */
.pricing-card--free    .pricing-card__header { color: #FF7043; }
.pricing-card--premium .pricing-card__header { color: #9E9E9E; }

/* ---------------- Fee Row ---------------- */
.pricing-card__row {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0; /* no gap between siblings */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pricing-card__value {
  font-size: 1rem;
  font-weight: 700;
  color: #FF7043;
}

/* ---------------- Features Box ---------------- */
.pricing-card__features {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  max-height: 280px;
  overflow-y: auto;
}
.pricing-card__features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-card__features-list li {
  margin-bottom: 0.5rem;
  color: #333;
}
.pricing-card__features-list li.text-danger {
  color: #E53935;
  font-weight: 600;
}

/* ---------------- BUY BUTTON ---------------- */
.pricing-card__btn {
  background: linear-gradient(90deg, #00C6E6 0%, #6CDA73 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem;
}

/* remove Bootstrap’s default focus outline on these custom buttons */
.pricing-card__btn:focus {
  box-shadow: none;
}


/* ===========================
   DARK MODE (body.darkMode)
   =========================== */
body.darkMode .pricing-section {
  background-color: #1b1b1b;
}

body.darkMode .pricing-card {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
}

body.darkMode .pricing-card__header {
  color: #f1f1f1;
}

body.darkMode .pricing-card--free .pricing-card__header {
  color: #ff8a50;
}

body.darkMode .pricing-card--premium .pricing-card__header {
  color: #bdbdbd;
}

body.darkMode .pricing-card__row {
  background: #2a2a2a;
  color: #e0e0e0;
  border-top: 1px solid #3a3a3a;
}

body.darkMode .pricing-card__value {
  color: #ff8a50;
}

body.darkMode .pricing-card__features {
  background: #2a2a2a;
}

body.darkMode .pricing-card__features-list li {
  color: #dcdcdc;
}

body.darkMode .pricing-card__features-list li.text-danger {
  color: #ff5555;
}

body.darkMode .pricing-card__btn {
  background: linear-gradient(90deg, #00b5e2 0%, #6acf66 100%);
  color: #fff;
}

body.darkMode .pricing-card__btn:focus {
  box-shadow: none;
}



/* ---------- Container & Background ---------- */
.plan-section__inner {
  background-color: #e5e7e5;
  border-radius: 15px;
}

/* ---------- Section Title ---------- */
.plan-section__title {
  color: #000;
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Card Base ---------- */
.plan-card {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
}

/* ---------- Header Row ---------- */
.plan-card__header {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.75rem 0;
  border-radius: 8px;
  background: #fff;
}

/* Tier-specific header colors */
.plan-card__header--free     { color: #3EB3E5; } /* cyan */
.plan-card__header--gold     { color: #F5BF56; } /* gold */
.plan-card__header--platinum { color: #9CA3AF; } /* light gray */
.plan-card__header--diamond  { color: #9B8FEF; } /* soft purple */

/* ---------- Rows (FEE Staked & Features) ---------- */
.plan-card__row {
  display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
}

/* Features rows stack label + list */
.plan-card__row--features {
  flex-direction: column;
}

/* Row labels (left column) */
.plan-card__label {
  flex: 0 0 30%;
  color: #6B7280;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Row values (right column) */
.plan-card__value {
  flex: 1;
  text-align: right;
  font-size: 1rem;
}

/* ---------- Feature List ---------- */
.plan-card__list {
  list-style: none;
  padding-left: 0.5rem;
  margin-top: 0.5rem;
}
.plan-card__list li {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

/* Emoji & ❌ styling inherit list font */

/* ---------- Buy Button ---------- */
.plan-card__buy-btn {
  background: linear-gradient(90deg, #00C6FF 0%, #8DDC54 100%);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem;
}

/* Ensure the button sits at the bottom */
.plan-card.d-flex {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.plan-card__buy-btn {
  margin-top: auto;
}


/* ---------- Container & Background ---------- */
.plan-section__inner {
  background-color: #e5e7e5;
  border-radius: 15px;
}

/* ---------- Section Title ---------- */
.plan-section__title {
  color: #000;
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Card Base ---------- */
.plan-card {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
}

/* ---------- Header Row ---------- */
.plan-card__header {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.75rem 0;
  border-radius: 8px;
  background: #fff;
}

/* Tier-specific header colors */
.plan-card__header--free     { color: #3EB3E5; } /* cyan */
.plan-card__header--gold     { color: #F5BF56; } /* gold */
.plan-card__header--platinum { color: #9CA3AF; } /* light gray */
.plan-card__header--diamond  { color: #9B8FEF; } /* soft purple */

/* ---------- Rows (FEE Staked & Features) ---------- */
.plan-card__row {
  display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
}

/* Features rows stack label + list */
.plan-card__row--features {
  flex-direction: column;
}

/* Row labels (left column) */
.plan-card__label {
  flex: 0 0 30%;
  color: #6B7280;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Row values (right column) */
.plan-card__value {
  flex: 1;
  text-align: right;
  font-size: 1rem;
}

/* ---------- Feature List ---------- */
.plan-card__list {
  list-style: none;
  padding-left: 0.5rem;
  margin-top: 0.5rem;
}
.plan-card__list li {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

/* Emoji & ❌ styling inherit list font */

/* ---------- Buy Button ---------- */
.plan-card__buy-btn {
  background: linear-gradient(90deg, #00C6FF 0%, #8DDC54 100%);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem;
}

/* Ensure the button sits at the bottom */
.plan-card.d-flex {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.plan-card__buy-btn {
  margin-top: auto;
}


/* === overall section === */
.pricing-plan {
  background: #E6E8E6;
  border-radius: 16px;
}

/* title at top */
.pricing-plan__title {
  color: #00B5E2;
  font-size: 1.75rem;
  font-weight: 700;
}

/* generic card wrapper */
.pricing-plan__card {
  background: #fff;
  border-radius: 8px;
}

/* Tier headers */
.pricing-plan__header {
  padding: 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 8px;
}

/* colour variants */
.pricing-plan__card--free    .pricing-plan__header { color: #00B5E2; }
.pricing-plan__card--gold    .pricing-plan__header { color: #E6B318; }
.pricing-plan__card--platinum.pricing-plan__header { color: #A6A6A6; }
.pricing-plan__card--diamond .pricing-plan__header { color: #9C9CC9; }

/* the “Fee Staked” row */
.pricing-plan__row {
  background: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.pricing-plan__value {
  font-size: 1.25rem;
  font-weight: 700;
}

/* the Features boxes */
.pricing-plan__features {
  background: #fff;
  padding: 1rem;
  margin-top: 0.5rem;
  border-radius: 0 0 8px 8px;
}

.pricing-plan__features ul li { list-style: disc; }

.pricing-plan__label {
  color: #6E6E6E;
  font-weight: 500;
}

/* buy buttons */
.pricing-plan__btn {
  background: linear-gradient(90deg, #00B5E2, #6ACF66);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 0;
  margin-top: 0.75rem;
}

body.darkMode .pricing-plan {
  background: #121212;
  color: #EAEAEA;
}

body.darkMode .pricing-plan__title {
  color: #4DD0E1;
}

body.darkMode .pricing-plan__card {
  background: #1E1E1E;
}

/* color variants */
body.darkMode .pricing-plan__card--free .pricing-plan__header { color: #4DD0E1; }
body.darkMode .pricing-plan__card--gold .pricing-plan__header { color: #FFD54F; }
body.darkMode .pricing-plan__card--platinum .pricing-plan__header { color: #B0BEC5; }
body.darkMode .pricing-plan__card--diamond .pricing-plan__header { color: #B39DDB; }

body.darkMode .pricing-plan__row {
  background: #2A2A2A;
}

body.darkMode .pricing-plan__value {
  color: #FFFFFF;
}

body.darkMode .pricing-plan__features {
  background: #2A2A2A;
}

body.darkMode .pricing-plan__features ul {
  color: #CCCCCC;
}

body.darkMode .pricing-plan__label {
  color: #AAAAAA;
}

body.darkMode .pricing-plan__btn {
  background: linear-gradient(90deg, #00B5E2, #6ACF66);
  color: #fff;
}

body.darkMode .pricing-plan__btn:hover {
  opacity: 0.9;
}



.navbar-expand-xl .navbar-collapse {     justify-content: center; }
.bottomBar, .bottomBar a { color: #fff; }

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }




/* ===========================================================================
   Lupe Hero Section Styles (unique prefixed classes)
   =========================================================================== */

/* 1) Base container for the hero */
.lupe-hero-section {
  font-family: "Sora", sans-serif;
  /* Ensures the pseudo‐element .lupe-hero-bg-diagonal can be positioned inside */
  position: relative;
  overflow: hidden;
  padding-top: 160px !important;
}


/* 3) Wrapper that ensures content sits above the gray background */
.lupe-hero-content-wrapper {
  position: relative;
  z-index: 1;
}

/* 4) Image column */
.lupe-hero-image {
  max-width: 100%;
  height: auto;
}

/* 5) Title with red→orange gradient */
.lupe-hero-title {
  font-size: 6.3rem;      /* Adjust as needed */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.5rem;
      font-weight: bold;

}

.lupe-hero-title-gradient {
  display: inline-block;
  background: linear-gradient(to right, #FF4E42, #FFA744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 6) Subtitle text */
.lupe-hero-subtitle {
  font-size: 1.6rem;
    font-weight: 600;
  color: #000000;
  margin-bottom: 1rem;
}

/* 7) Button styles (teal→green gradient) */
.lupe-hero-btn-teal {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 8px;
  background: linear-gradient(to right, #00C5D2, #4CB742);
  transition: opacity 0.2s ease-in-out;
}
.lupe-hero-btn-teal:hover {
  opacity: 0.9;
}

/* 8) Description block (light tinted background with rounded corners) */
.lupe-hero-description-block {
  background-color: #E6ECE9; /* Very light green-gray */
  border-radius: 8px;
  /* Ensure it stays above the diagonal background */
  position: relative;
  z-index: 1;
}
.lupe-hero-description-text, .lupeLandingPage p {
  margin: 0;
  font-size: 1.1rem;
    line-height: 1.5;
  color: #000000;

}
.lupe-hero-description-text strong {
  font-weight: 700;
}

.GrammySection { margin-top:50px;   font-family: "Sora", sans-serif;}

.lupeLandingPage h3 { font-size: 2rem;
    color: #000;}

.GrammyLupeimg { margin-top: -40px;}


.lupeLandingPage { font-family: "Sora", sans-serif; }

.collabHeading { background: linear-gradient(45deg, rgba(175, 32, 137, 1) 0%, rgba(89, 84, 164, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   }


.lupe-ent-section h3, .dayInChicagoSection h3 {     background: linear-gradient(45deg, rgba(250, 171, 44, 1) 0%, rgba(239, 78, 78, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: 20px; }


    .lupe-ent-container-box, .professroBox { background: #E8EBE8; padding: 40px; padding-bottom: 0px; border-radius: 20px; }


  .lupe-ent-thumb { margin: 0 10px; margin-bottom: 40px; }


.collbarationSection { padding-top: 80px; }

.collbarationSectionBox {     padding: 0 30px; }

.googlecollab h3, .whyLupeSection h3 { background: linear-gradient(45deg, rgba(24, 186, 212, 1) 0%, rgba(49, 182, 128, 1) 50%, rgba(128, 194, 66, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }


    .textFx {     background: url(../../images/textfx-bg.png) no-repeat;
    text-align: center;
    background-size: cover;
    padding: 400px 0; }

    .textFx img { margin: 0 auto;}


.professroBox { padding: 40px;}

.whyLupeSection img { margin: 0 auto;}
.whyLupeSection p { font-size: 14px;}

.dayInChicagoSection{ background: url(../../images/chicago-skyline-lupe.png) no-repeat; background-position: center bottom;     padding-bottom: 330px !important; }


.bookLupeSection {
    background: linear-gradient(90deg, #b02eb9 0%, #4539c5 100%);
    color: #fff;
    margin: 100px 0;
    padding-bottom: 0px !important; }

.bookLupeImg { margin-top: -50px;}


.orangeGradientBg{
    background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}

.djPharrisPage .blueGradText {     background: linear-gradient(45deg, rgba(56, 194, 223, 1) 0%, rgba(50, 97, 172, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
.djPharrisPage .orangeGradText {   background: linear-gradient(to right, #FF4E42, #FFA744);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

    .uppercase { text-transform: uppercase;}

    .educationSection{
        background: #fff;
    }

/* ============================================================
   Lupe Hero Section — Dark Mode Skin
   ============================================================ */
body.darkMode .lupe-hero-section {
  color: #EDEDED;
}

body.darkMode .lupe-hero-title {
  color: #FFFFFF;
}
body.darkMode .lupe-hero-title-gradient {
  background: linear-gradient(to right, #FF6A5C, #FFB560);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.darkMode .lupe-hero-subtitle {
  color: #CCCCCC;
}

body.darkMode .lupe-hero-btn-teal {
  background: linear-gradient(to right, #00C5D2, #4CB742);
  color: #FFFFFF;
}
body.darkMode .lupe-hero-btn-teal:hover {
  opacity: 0.85;
}

/* Description box */
body.darkMode .lupe-hero-description-block {
  background-color: #1F1F1F;
  border: 1px solid #2C2C2C;
}
body.darkMode .lupe-hero-description-text,
body.darkMode .lupeLandingPage p {
  color: #E4E4E4;
}

/* Headings & gradient text */
body.darkMode .collabHeading {
  background: linear-gradient(45deg, rgba(202, 92, 200, 1) 0%, rgba(107, 102, 199, 1) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.darkMode .lupe-ent-section h3,
body.darkMode .dayInChicagoSection h3 {
  background: linear-gradient(45deg, rgba(250, 171, 44, 0.85) 0%, rgba(239, 78, 78, 0.9) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section containers */
body.darkMode .lupe-ent-container-box,
body.darkMode .professroBox {
  background: #1E1E1E;
  border: 1px solid #2C2C2C;
  color: #EDEDED;
}

body.darkMode .googlecollab h3,
body.darkMode .whyLupeSection h3 {
  background: linear-gradient(45deg, rgba(24, 186, 212, 0.85) 0%, rgba(49, 182, 128, 0.85) 50%, rgba(128, 194, 66, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* “A Day in Chicago” background */
body.darkMode .dayInChicagoSection {
  background: url(../../images/chicago-skyline-lupe.png) no-repeat center bottom;
  background-color: #141414;
}

/* Book Lupe CTA */
body.darkMode .bookLupeSection {
  background: linear-gradient(90deg, #b02eb9 0%, #4539c5 100%);
  color: #fff;
}

/* Orange gradient utility */
body.darkMode .orangeGradientBg {
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}
body.darkMode .educationSection {
  background: #16191e;
}

/* DJ Pharris variant */
body.darkMode .djPharrisPage .blueGradText {
  background: linear-gradient(45deg, rgba(56, 194, 223, 1) 0%, rgba(50, 97, 172, 1) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.darkMode .djPharrisPage .orangeGradText {
  background: linear-gradient(to right, #FF6A5C, #FFB560);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* overall sidebar */
.filter-sidebar {
  background: #F9F9F9;
  padding: 1rem;
  border-radius: 8px;
}

/* ——— Category Buttons ——— */
.filter-categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filter-cat-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 1rem;
  background: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}
.filter-cat-btn:hover {
  background: #F0F0F0;
}
.filter-cat-btn.active {
  background: linear-gradient(90deg, #FF6A6A, #FFA348);
  color: #FFF;
}

/* ——— Accordion ——— */
.filter-accordion .filter-group {
  margin-bottom: 0.5rem;
}
.filter-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #333;
  background: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.filter-header:hover {
  background: #F0F0F0;
}
.toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-weight: bold;
  transition: transform .2s;
}
.filter-group.expanded > .filter-header .toggle-icon {
  transform: rotate(45deg);
}
.filter-body {
  display: none;
  margin-top: 0.25rem;
  margin-left: 1.5rem;
}
.filter-group.expanded > .filter-body {
  display: block;
}
.filter-body .filter-leaf {
  padding: 0.4rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background .2s;
}
.filter-body .filter-leaf:hover {
  background: #EEF5FF;
}


/* 1) Base */
.filter-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  position: relative;
}
/* 2) Green vertical line */
/* .filter-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.5rem;
  width: 2px;
  background: #8fc442;
} */
/* 3) Header styling (same as before) */
.filter-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle-icon {
  width: 1em;
  text-align: center;
  font-weight: bold;
  transition: transform .2s;
}
/* rotate “+” → “–” (we’ll swap the character in JS) */
.filter-group.expanded > .filter-header .toggle-icon {
  transform: none;
}
/* 4) Leaf styling */
.filter-leaf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}
.filter-leaf label {
  cursor: pointer;
}
/* hide nested lists by default */
.filter-group > .filter-list {
  display: none;
}
/* show when expanded */
.filter-group.expanded > .filter-list {
  display: block;
}

.filter-group, .filter-header { margin-bottom: 10px;}



/* Sidebar background */
body.darkMode .filter-sidebar {
  background: #2B2B2B;
}

/* Category Buttons */
body.darkMode .filter-cat-btn {
  background: #333;
  color: #EAEAEA;
}
body.darkMode .filter-cat-btn:hover {
  background: #3D3D3D;
}
body.darkMode .filter-cat-btn.active {
  background: linear-gradient(90deg, #FF6A6A, #FFA348);
  color: #FFF;
}

/* Accordion Header */
body.darkMode .filter-header {
  background: #333;
  color: #EAEAEA;
}
body.darkMode .filter-header:hover {
  background: #3D3D3D;
}

/* Accordion Body & Leafs */
body.darkMode .filter-body .filter-leaf:hover {
  background: #3A3A3A;
}

/* Optional: line color if you re-enable the vertical line */
body.darkMode .filter-list::before {
  background: #6BAF3A; /* Softer green for dark bg */
}

    /* 9) Spacing utility (already present? If you want to override, use unique names)
   The “mt-5”, “px-4”, “py-3” classes come from Bootstrap. We keep them here.
*/

/* 10) Responsive adjustments */
@media (max-width: 767.98px) {
  /* Optionally hide the diagonal on narrow screens */
  .lupe-hero-bg-diagonal {
    display: none;
  }

  .lupe-hero-title {
    text-align: center;
  }
  .lupe-hero-subtitle {
    text-align: center;
  }
  .lupe-hero-text-col {
    text-align: center;
  }
  .lupe-hero-button-group {
    justify-content: center;
  }
}


/* 1) Make each item a single flex row */
  .filter-list .filter-leaf label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 8px;
  }
  /* 2) Style the radio to be a circle with some right-spacing */
  .filter-list .filter-leaf input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50%;
    margin: 0 8px 0 0;
    position: relative;
  }
  .filter-list .filter-leaf input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 6px; height: 6px;
    background: #333;
    border-radius: 50%;
  }
  /* 3) Keep the text and flag inline */
  .filter-list .filter-leaf .country-name {
    flex: 1;          /* push the flag to the right */
  }
  .filter-list .filter-leaf .country-flag {
    margin-left: 8px;
    width: 32px;      /* adjust to your flag size */
    height: 32px;
    display: flex;
    align-items: center;
  }
  .filter-list .filter-leaf .country-flag .flag {
    width: 32px;
    height: 32px;
  }

.filter-list.country-list {
    max-height: 250px;
    overflow: auto;
}


#filter-tree-general { border-bottom:1px solid #ccc; margin-bottom:35px; padding-bottom:25px; }
input[type=checkbox]:disabled { color:#ccc; }

    .is-invalid {
        border-color: #dc3545 !important;
    }
    .step.completed {
        color: green;
        font-weight: bold;
    }



 .stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
    padding: 0 20px;
}

/* .stepper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 60px;
    right: 60px;
    height: 2px;
    background-color: #ddd;
    z-index: 1;
    transform: translateY(-50%);
} */

.step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
    font-weight: 600;
    color: #aaa;
    font-family: 'Inter', sans-serif;
}

.step::before {
    content: "";
    display: block;
    margin: 0 auto 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ccc;
        z-index: 1;
    position: relative;
}


/* .step::after {

    width: 100%;
    right: -50%;
    top: 21px;
    height: 2px;
    background-color: #ccc;
    content: "";
    position: absolute;


} */

.step:last-child::after {
    display: none;
}

.step.completed::after
{
background-color: #2ABF9E;
}


/* ✅ Active Step */
.step.active {
    color: #2ABF9E;
}
.step.active::before {
    background: radial-gradient(circle at center, #2ABF9E 40%, #A0E8DE 80%);
}

/* ✅ Completed Step with Checkmark */
.step.completed {
    color: #2ABF9E;
}
.step.completed::before {
    background-color: #2ABF9E;
    background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.629 13.313l-3.9-3.902 1.413-1.414 2.487 2.49 5.489-5.49 1.414 1.414-6.902 6.902z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.feature-type-option {
    cursor: pointer;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    width: 140px;
    transition: all 0.3s ease;
}

.feature-type-option .icon-box {
    background: #f9f9f9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 70px;

}

.feature-type-option .label {
    font-weight: 600;
    font-size: 16px;
}

.feature-type-option:hover,
.feature-type-option.active {
    border-color: #28a745;
    background: #e6f9ed;
}

.feature-type-option.active .icon-box {
    background-color: #fff;
    color: #28a745;
}


.AddskillforhirePage { margin: 150px 0;}
.step-content { background:rgb(253 253 253);
    padding: 50px;
    border: 2px solid rgb(242, 242, 242);
    border-radius: 20px;
    display: block; }

    #feeturreTypeContainer .form-check { margin-bottom: 0px; font-size: 14px; }
#feeturreTypeContainer h3 { border-bottom: 1px solid #e2e2e2;
    padding-bottom: 10px;
    margin-bottom: 20px;     font-size: 20px; }


.platform-chip.active,
.platform-chip input:checked + span {          /* supports JS toggle or :checked? */
    background: linear-gradient(135deg,#2ecc71,#1abc9c)!important;
    color:#fff!important;
    border-color:transparent!important;
}


.feature-type-option.active i { color: #20B573 !important;}
#feeturreTypeContainer h4 { font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px; }
#downloadForm .form-group { margin-bottom: 30px !important;}

form label.greenText { color:#29a746 ;  font-weight: bold;}
.step-content h3 {     font-size: 32px;
    /* text-align: center; */
    margin-bottom: 40px;
    font-weight: bold;
    color: #3369b0;
    text-transform: uppercase; }

    #step-4 p { border-bottom: 1px solid #efefef; padding-bottom: 20px; margin-bottom: 20px; }
#step-4 .card {  padding: 50px !important; }


.card-skeleton {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.skeleton-img {
  width: 100%;
  height: 180px;
  background: #eee;
  position: relative;
  overflow: hidden;
}
.skeleton-body {
  padding: 1rem;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton-text {
  height: 12px;
  background: #eee;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }
.skeleton-text.long   { width: 80%; }

/* shimmer animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-img::after,
.skeleton-text::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}

/* === Dark Mode Skeleton Loader === */
body.darkMode .card-skeleton {
  background: #1e1e1e;
  box-shadow: 0 2px 6px rgba(255,255,255,0.05);
}

body.darkMode .skeleton-img {
  background: #2a2a2a;
}

body.darkMode .skeleton-text {
  background: #2f2f2f;
}

/* subtle shimmer for dark mode */
body.darkMode .skeleton-img::after,
body.darkMode .skeleton-text::after {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(255,255,255,0.15) 50%,
    rgba(0,0,0,0) 100%
  );
}



#audio-filter-options .form-control { background-color: #fff !important;}
#audio-filter-options .form-group label { font-size: 12px; margin-bottom: 3px; }
#audio-filter-options .form-group { margin-bottom: 20px;}
#audio-filter-options h4 { font-size: 17px; margin-bottom: 15px; }

/* container card */
.ft-feature-card{
  position: relative;
  min-height: 120px;               /* tune to your design */
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  border-radius: 22px;              /* rounded corners like screenshot */
  text-decoration: none !important;
  overflow: hidden;
}

/* left stack (icon top, text below) */
.ft-feature-left{
  color: #fff;
  flex: 1 1 auto;
}
.ft-feature-icon{
  font-size: 1.9rem;                /* icon size per screenshot feel */
  line-height: 1;
  color: #fff;
  margin-bottom: .75rem;
}
.ft-feature-text{
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .5px;
}

/* right arrow */
.ft-feature-right{
  flex: 0 0 40px;                   /* keeps a constant right zone */
}
.ft-feature-arrow{
  color: #fff;
  font-size: 1.5rem;
  opacity: .95;
}

/* gradients per card */
.ft-feature-analytics{
  background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
}
.ft-feature-awards{
  background: linear-gradient(90deg, #00C0E5 0%, #2B6BE3 100%);
}
.ft-feature-stream{
  background: linear-gradient(90deg, #A42087 0%, #4F5AB1 100%);
}

/* small screens: keep layout intact with spacing */
@media (max-width: 575.98px){
  .ft-feature-card{ min-height: 110px; }
  .ft-feature-icon{ font-size: 1.7rem; }
  .ft-feature-text{ font-size: 1rem; }
}


.ft-stat-card {
    background: #F9F9F9;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    height: 100%;
    border:1px solid #00000029;
}
.ft-stat-block {
    text-align: left;
}
.ft-stat-value {
    font-weight: 800;
    font-size: 28px;
    color: #000;
    line-height: 1.2;
    margin-bottom: 11px;
}
.ft-stat-label {
    color: #6c757d; /* Bootstrap muted */
    font-size: 16px;
}
.ft-stat-divider {
    width: 1px;
    background-color: #ddd;
    margin: 0 1rem;
}


/* Panel container: soft greenish grey, rounded corners, subtle border */
.ft-panel{
    background: #E6E9E4;             /* tune if needed to match your design exactly */
    border: 1px solid #D7DED4;
    border-radius: 22px;
    padding: 1.25rem 1.25rem 1rem;
}

/* Title: bold and dark like the screenshot */
.ft-panel-title{
    font-weight: 700;
    color: #111;
    letter-spacing: .2px;
}

/* The grey headings line above the white box */
.ft-table-head{
    color: #8A8F89;                   /* muted label grey */
    font-weight: 600;
    padding: 0 .25rem;
}
.ft-table-head > .flex-fill { padding-right: .5rem; }

/* White inner block (empty state / table wrapper) */
.ft-empty,
.ft-table-wrap{
    background: #fff;
    border: 1px solid #ECEFF1;
    border-radius: 12px;
}

/* Empty state pill */
.ft-empty{
    text-align: center;
    color: #4E5551;
    padding: 1.1rem 1rem;
}

/* Table inside white block: remove default spacing/borders and mimic screenshot spacing */
.ft-table-wrap{
    padding: .25rem .25rem;
}
.ft-table-wrap .table td{
    border: 0 !important;
    color: #2A2D2B;
    padding: .75rem .75rem;
    vertical-align: middle;
}

/* "VIEW ALL" link style */
.ft-link-viewall{
    color: #22B573;                   /* green like design */
    font-weight: 700;
    letter-spacing: .6px;
    text-decoration: none;
}
.ft-link-viewall:hover{ text-decoration: underline; }

/* Bootstrap 4 badge palette alignment */
.badge-danger{ background:#E74C3C; }
.badge-warning{ background:#F1C40F; color:#1B1B1B; }
.badge-success{ background:#27AE60; }


/* Sponsor button (top-right) */
.ft-btn-sponsor {
    background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
}
.ft-btn-sponsor:hover {
    opacity: 0.9;
}

/* View button (promo code table) */
.ft-btn-view {
    background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
    color: #fff;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
}
.ft-btn-view:hover {
    opacity: 0.9;
}

/* Delete button (promo code table) */
.ft-btn-delete {
    background: transparent;
    border: none;
    color: #E74C3C;
    font-size: 1rem;
    line-height: 1;
}
.ft-btn-delete:hover {
    opacity: 0.8;
}


/* container */
.ft-topbar{
    /* keep it compact like the mock */
    min-height: 44px;
}

/* "Creator" label with blue gradient text */
.ft-topbar-role{
    font-weight: 700;
    font-size: 1.25rem; /* ~20px */
    line-height: 1;
    background: linear-gradient(90deg, #1BA9E1 0%, #2B6BE3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* reveals the gradient */
}

/* Create button: cyan→blue gradient pill */
.ft-btn-create{
    background: linear-gradient(90deg, #00C0E5 0%, #2B6BE3 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: .3px;
    padding: .5rem 1rem;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.ft-btn-create:hover{
    opacity: .95;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* small white circle with plus inside (left of text) */
.ft-icon-circle{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
}
.ft-icon-circle i{
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

/* responsive nudge (optional) */
@media (max-width: 575.98px){
    .ft-topbar-role{ font-size: 1.1rem; }
    .ft-btn-create{ font-size: .9rem; padding: .45rem .9rem; }
}


/* Modal shell */
.ft-modal .modal-dialog { max-width: 600px; } /* matches your screenshot width */
.ft-modal-content{
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

#createNewFeeturreModal .modal-content { padding: 10px !important; }

/* Header */
.ft-modal-header{
  padding: 1.25rem 1.25rem 0.5rem;
}
.ft-modal-title{
  font-weight: 800;
  color: #111;
  font-size: 1.5rem; /* ~24px */
  line-height: 1.1;
  letter-spacing: .2px;
  margin: 0;
}
.ft-help-link{
  font-weight: 700;
  color: #22B573;          /* green like the design */
  text-decoration: none;
  font-size: .95rem;
}
.ft-help-link:hover{ text-decoration: underline; }

.ft-close-btn{
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: #222;
  opacity: .8;
  padding: .25rem .25rem 0 .75rem;
}
.ft-close-btn:hover{ opacity: 1; }

/* Body */
.ft-modal-body{
  padding: 0 1.25rem 1.25rem;
}

/* Create tiles (2×2 grid) */
.ft-create-tile{
  background: #F9F9F9;
  border: 1px solid #E7E8EA;     /* subtle border like the mock */
  border-radius: 12px;
  padding: .9rem 1rem;
  font-weight: 700;
  color: #222;
  text-decoration: none !important;
  transition: box-shadow .15s ease, transform .08s ease;
}
.ft-create-tile .ft-arrow{
  color: #9AA0A6;                /* soft grey arrow */
  font-weight: 700;
}
.ft-create-tile:hover{
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Small screens */
@media (max-width: 575.98px){
  .ft-modal .modal-dialog { max-width: 92vw; }
  .ft-modal-title{ font-size: 1.35rem; }
}


/* wrapper spacing (matches tight header row) */
.ft-listing-top{ gap: .5rem; }

/* Search input */
.ft-search-input{
  background: #FFFFFF;
  border: 1px solid #E7E8EA;
  border-radius: 12px;
  padding: .55rem .9rem .55rem 2.1rem; /* room for icon */
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
  height: 40px;
  font-size: .95rem;
}
.ft-search-input::placeholder{ color:#A6ABAD; }
.ft-search-input:focus{
  border-color:#BFD8CC; /* subtle greenish focus */
  box-shadow: 0 0 0 .15rem rgba(33,181,115,.12);
  outline: none;
}

/* Magnifier icon at left inside input */
.ft-search-icon{
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
}

/* Gradient button */
.ft-btn-grad{
  background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 12px;
  padding: .5rem .9rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  height: 40px;
}
.ft-btn-grad:hover{ opacity:.95; transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12); }

/* small white circular icon inside the button */
.ft-btn-icon{
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .45rem; font-weight: 800; font-size: 14px; line-height: 1;
  color:#fff;
}

/* XS adjustments */
@media (max-width: 575.98px){
  .ft-search-input{ height: 38px; }
  .ft-btn-grad{ height: 38px; padding: .45rem .8rem; font-size: .9rem; }
}


/* ===== Top switches ===== */
.ft-toggle-wrap { border-radius: 12px; overflow: hidden; }
.ft-switch{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:#202020; color:#fff; text-decoration:none;
}
.ft-switch + .ft-switch{ margin-left:8px; }
.ft-switch.is-active{ background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%); }

.ft-switch-grid-2x2{ width:18px; height:18px; display:grid; grid-template-columns:repeat(2,1fr); grid-gap:2px; }
.ft-switch-grid-2x2 span{ display:block; width:100%; height:100%; background:#35C48A; border-radius:2px; }
.ft-switch.is-active .ft-switch-grid-2x2 span{ background:#fff; }

.ft-switch-grid-1x1{ width:14px; height:14px; background:#35C48A; border-radius:2px; }
.ft-switch.is-active .ft-switch-grid-1x1{ background:#fff; }

/* Sort pill */
.ft-sort-pill{
  background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
  color:#fff; font-weight:700; border:0; border-radius:12px; padding:.4rem .75rem; line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.ft-sort-pill:focus{ outline:none; }


/* Dark Mode */

/* ——— Dark Mode: Feature Cards ——— */
body.darkMode .ft-feature-card {
  color: #fff;
}
body.darkMode .ft-feature-analytics,
body.darkMode .ft-feature-awards,
body.darkMode .ft-feature-stream {
  filter: brightness(1.1);
}

/* ——— Dark Mode: Stat Cards ——— */
body.darkMode .ft-stat-card {
  background: #2A2A2A;
  border-color: #3A3A3A;
}
body.darkMode .ft-stat-value { color: #FFF; }
body.darkMode .ft-stat-label { color: #A0A0A0; }
body.darkMode .ft-stat-divider { background-color: #444; }

/* ——— Dark Mode: Panels and Tables ——— */
body.darkMode .ft-panel {
  background: #1E1E1E;
  border-color: #333;
}
body.darkMode .ft-panel-title { color: #FFF; }
body.darkMode .ft-table-head { color: #AAA; }
body.darkMode .ft-empty,
body.darkMode .ft-table-wrap {
  background: #2A2A2A;
  border-color: #3A3A3A;
  color: #EAEAEA;
}
body.darkMode .ft-table-wrap .table td { color: #EAEAEA; }
body.darkMode .ft-link-viewall { color: #39B54A; }

/* ——— Dark Mode: Buttons ——— */
body.darkMode .ft-btn-sponsor,
body.darkMode .ft-btn-view {
  filter: brightness(1.15);
}
body.darkMode .ft-btn-delete { color: #E57373; }

/* ——— Dark Mode: Topbar ——— */
body.darkMode .ft-topbar-role {
  background: linear-gradient(90deg, #22D4E8 0%, #4F7FF0 100%);
  color: transparent;
  -webkit-background-clip: text;
}
body.darkMode .ft-btn-create {
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
body.darkMode .ft-icon-circle { background: rgba(255,255,255,.2); }

/* ——— Dark Mode: Modals ——— */
body.darkMode .ft-modal-content {
  background: #2A2A2A;
  color: #EAEAEA;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
body.darkMode .ft-modal-title { color: #FFF; }
body.darkMode .ft-help-link { color: #39B54A; }
body.darkMode .ft-close-btn { color: #DDD; }
body.darkMode .ft-create-tile {
  background: #333;
  border-color: #444;
  color: #FFF;
}
body.darkMode .ft-create-tile .ft-arrow { color: #BBB; }

/* ——— Dark Mode: Search + Actions ——— */
body.darkMode .ft-search-input {
  background: #2A2A2A;
  border-color: #444;
  color: #EAEAEA;
}
body.darkMode .ft-search-input::placeholder { color: #777; }
body.darkMode .ft-search-icon { color: #999; }
body.darkMode .ft-btn-grad { box-shadow: 0 4px 10px rgba(0,0,0,.5); }
body.darkMode .ft-btn-icon { background: rgba(255,255,255,.2); }

/* ——— Dark Mode: Switches + Sort ——— */
body.darkMode .ft-switch {
  background: #333;
  color: #FFF;
}
body.darkMode .ft-switch.is-active {
  background: linear-gradient(90deg,#00D1E1 0%, #66BB6A 100%);
}
body.darkMode .ft-switch-grid-2x2 span,
body.darkMode .ft-switch-grid-1x1 { background: #39B54A; }
body.darkMode .ft-sort-pill {
  background: linear-gradient(90deg,#00D1E1 0%, #66BB6A 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

body.darkMode .associated-text {
  color: #ddd;
}

/* ===== Card ===== */
.ft-card{
  background:#E6E9E4;                /* same body bg as prior panels */
  border:1px solid #D7DED4;
  border-radius:20px;
  text-decoration:none !important;
  color:inherit;
  overflow:hidden;
  transition: box-shadow .15s ease, transform .08s ease;
}
.ft-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.1); transform: translateY(-1px); }

.ft-card-img{
  width:30%;
  min-height:220px;
  background-size:cover; background-position:center;
}
.ft-card-body{
  width:70%;
  padding:1.1rem 1.25rem;
}

/* pill + arrow */
.ft-pill{
  display:inline-block;
  font-weight:700; font-size:.8rem;
  color:#A56B5E;                       /* warm text like mock */
  background:#F8E6D2;                  /* peachy pill */
  border-radius:10px;
  padding:.25rem .5rem;
}
.ft-arrow{ color:#757B75; font-weight:700; }

/* title/desc */
.ft-card-title{ font-weight:800; color:#111; font-size:1.35rem; letter-spacing:.2px; }
.ft-card-desc{ color:#6D746E; margin-bottom:1rem; }

/* ——— Dark Mode: Feature Card ——— */
body.darkMode .ft-card {
  background: #2B2B2B;
  border-color: #3A3A3A;
  color: #EAEAEA;
}
body.darkMode .ft-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

body.darkMode .ft-card-img {
  /* keep image vibrant; optional subtle overlay for darker tone */
  filter: brightness(0.9);
}

body.darkMode .ft-card-body {
  background: #2B2B2B;
  color: #EAEAEA;
}

/* pill + arrow */
body.darkMode .ft-pill {
  background: #3A2F2B;  /* muted warm brown base */
  color: #E4BFAF;       /* soft peach text for contrast */
}
body.darkMode .ft-arrow {
  color: #B0B0B0;
}

/* title/desc */
body.darkMode .ft-card-title {
  color: #FFF;
}
body.darkMode .ft-card-desc {
  color: #A0A0A0;
}


/* sub-cards row */
.ft-subcards{ margin-left:-.25rem; margin-right:-.25rem; }
.ft-subcard{
  background:#fff;
  border:1px solid #ECEFF1;
  border-radius:12px;
  padding:.6rem .7rem;
}
.ft-subcard + .ft-subcard{ margin-left:.25rem; }
.ft-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
}
.ft-subcard-title{ font-weight:700; color:#111; line-height:1; }
.ft-subcard-muted{ color:#8A8F89; font-size:.9rem; line-height:1.2; }
.ft-prize{ font-weight:800; font-size:1.4rem; color:#111; line-height:1; }

.ft-judge-stack{ display:flex; }
.ft-judge-avatar{
  width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.08);
  margin-left:-8px;
}
.ft-judge-avatar:first-child{ margin-left:0; }

/* ——— Dark Mode: Sub-Cards ——— */
body.darkMode .ft-subcard {
  background: #2F2F2F;
  border-color: #3A3A3A;
}

body.darkMode .ft-subcard-title {
  color: #F1F1F1;
}

body.darkMode .ft-subcard-muted {
  color: #A0A0A0;
}

body.darkMode .ft-prize {
  color: #FFF;
}

/* Judge avatars */
body.darkMode .ft-judge-avatar {
  border-color: #2F2F2F; /* match card background */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}


/* ===== Pagination ===== */
.ft-pager{
  background:#fff;
  border:1px solid #E7E8EA;
  border-radius:20px;
  padding:.4rem .75rem;
  margin: .5rem 0 2rem;
}
.ft-pager-prev, .ft-pager-next{
  color:#111; text-decoration:none; font-weight:600; padding:.2rem .4rem; border-radius:10px;
}
.ft-pager-prev:hover, .ft-pager-next:hover{ background:#F2F4F5; text-decoration:none; }
.ft-pager-prev.disabled, .ft-pager-next.disabled{ opacity:.4; pointer-events:none; }
.ft-pager-count{ color:#111; font-weight:700; }
.ft-pager-arrow{ color:#21B573; font-weight:800; }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .ft-card{ flex-direction:column; }
  .ft-card-img, .ft-card-body{ width:100%; }
  .ft-card-img{ min-height:200px; }
}


body.darkMode .ft-pager {
  background: #2B2B2B;
  border-color: #3A3A3A;
}

body.darkMode .ft-pager-arrow {
  color: #21B573;
}
body.darkmode .ft-pager-prev:hover, .ft-pager-next:hover{
  background: #3A3A3A;
}

body.darkMode .ft-pager-prev, body.darkMode .ft-pager-next {
  color: #EAEAEA;
}
body.darkMode .ft-pager-count {
  color: #EAEAEA;
}


/* ===== HERO ===== */
/* ===== HERO (clean split, no dark block) ===== */
.ft-hero{
  border-radius: 24px;          /* only used to soften overall group on mobile */
  overflow: visible;
  gap: 22px;                    /* space between image and text */
}

/* Left image: fixed visual size, fully rounded */
.ft-hero-img{
  flex: 0 0 360px;              /* desktop visual width */
  height: 340px;                /* desktop visual height */
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Right block: no background, just spacing */
.ft-hero-body{
  flex: 1 1 auto;
  padding: 6px 0 0 4px;         /* subtle top nudge like mock */
}

/* Small gradient pill above title */
.ft-hero-accent{
    border-radius: 10px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #FF8A00 0%, #FF6A3A 35%, #F5317F 100%);
    padding: 6px 13px;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    font-size: 18px;
}

/* Big gradient title (multi-line, tight leading) */
.ft-hero-title{
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.05;            /* tight like design */
  font-size: 3rem;              /* base desktop size */
  margin: 0;
  text-transform: none;         /* we already strtoupper in Blade */
  background: linear-gradient(90deg, #9B59FF 0%, #7C4DDB 45%, #A64AC9 70%, #B444C2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keep long words breaking cleanly across lines */
  word-break: break-word;
}

/* ----- Responsive tweaks ----- */
@media (min-width: 1200px){
  .ft-hero-img{ flex-basis: 380px; height: 360px; }
  .ft-hero-title{ font-size: 5.2rem; }
}
@media (max-width: 991.98px){
  .ft-hero{ gap: 16px; }
  .ft-hero-img{ flex-basis: 100%; width:100%; height: 280px; }
  .ft-hero-title{ font-size: 2.4rem; line-height: 1.06; }
}
@media (max-width: 575.98px){
  .ft-hero-img{ height: 240px; border-radius: 20px; }
  .ft-hero-title{ font-size: 2rem; }
  .ft-hero-accent{ width: 110px; height: 14px; margin-bottom: 14px; }
}


/* ===== TABS & ACTIONS ===== */
.ft-tabs{
  background: #E6E9E4; border:1px solid #D7DED4; border-radius: 20px; padding:.5rem;
}
.ft-tab{
  display:inline-block; padding:.55rem .9rem; margin:.2rem;
  background: #F5F7F6; border:1px solid #E3E6E4; border-radius: 999px;
  color:#2B2F2C; text-decoration:none; font-weight:600; font-size:.95rem;
}
.ft-tab.is-active {
    border-color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
    color: #fff;
    border: none;
}
.ft-share-btn{
  border: none; background:#FFFFFF; border:1px solid #E3E6E4; color:#4A4F4B;
  width:40px; height:40px; border-radius:12px;
}
.ft-join-btn{
  background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
  color:#fff; border:none; border-radius:12px;
  padding:.55rem 1rem; font-weight:800; letter-spacing:.3px;
}
.ft-join-outline{
  background:#fff; color:#22B573; border:1px solid #BFE3D3;
}

/* ===== PANEL (overview) ===== */
.ft-panel{
  background: #E6E9E4; border:1px solid #D7DED4; border-radius: 20px;
}
.ft-avatar-large{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.ft-host-name{ font-weight:800; color:#111; line-height:1.2; }
.ft-host-email{ color:#7C827D; font-size:.95rem; }

.ft-desc{
  background:#FFFFFF; border:1px solid #ECEFF1; border-radius:12px;
  padding:1rem 1.1rem; color:#2A2D2B;
}

/* date chips */
.ft-dates{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ft-meta-pill{
  background:#FFFFFF; border:1px solid #ECEFF1; border-radius:999px;
  padding:.4rem .8rem; color:#424844; font-weight:600;
}

/* ===== JUDGES ===== */
.ft-section{ background:#fff; border:1px solid #ECEFF1; border-radius:20px; padding:1rem 1.25rem; }
.ft-section-title{ font-weight:800; color:#111; margin-bottom:1rem; }
.ft-judge-card{
  background:#fff; border:1px solid #ECEFF1; border-radius:12px; padding:.6rem .8rem;
}
.ft-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.ft-judge-name{ font-weight:700; color:#111; line-height:1.1; }
.ft-judge-email{ color:#8A8F89; font-size:.9rem; }

/* ===== METRICS ===== */
.ft-metrics{}
.ft-metric-pill{
  background:#fff; border:1px solid #ECEFF1; border-radius:12px; padding:.7rem .9rem; min-width:220px;
}
.ft-metric-title{ color:#8A8F89; font-weight:700; font-size:.9rem; margin-bottom:.15rem; }
.ft-metric-value{ color:#111; font-weight:800; font-size:1.1rem; }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .ft-hero{ border-radius: 16px; }
  .ft-hero-img{ flex-basis: 100%; min-height: 220px; }
  .ft-hero-title{ font-size: 1.8rem; }
}


/* Card wrapper (panel look) */
.ft-gallery-card{
  background:#E6E9E4;
  border:1px solid #D7DED4;
  border-radius:18px;
  overflow:hidden;
  transition:box-shadow .15s ease, transform .08s ease;
}
.ft-gallery-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.1); transform: translateY(-1px); }

/* Image */
.ft-gallery-img{
  width:100%; height:180px;
  background-size:cover; background-position:center;
}

/* Body */
.ft-gallery-body{ padding: .9rem 1rem 1rem; }
.ft-gallery-title{
  font-weight:800; color:#111; font-size:1.1rem; line-height:1.2; margin-bottom:.25rem;
}
.ft-gallery-meta{ color:#6D746E; font-size:.92rem; }

/* Small gradient button */
.ft-btn-sm{ padding:.45rem .75rem; border-radius:10px; font-size:.9rem; }

/* Reuse from Overview: .ft-pill, .ft-arrow, .ft-pager, .ft-btn-grad, .ft-tabs, .ft-tab ... already defined */


/* media box on hero left */
.ft-media-box{ flex:0 0 420px; width:420px; }
.ft-media-thumb{
  width:100%; height:260px; border-radius:20px; background:#F5F7F6;
  border:1px solid #E7E8EA; display:flex; align-items:center; justify-content:center; color:#9AA0A6;
}
.ft-video-rounded{ border-radius:20px; overflow:hidden; }
.ft-audio-skeleton{ position:relative; }
.ft-audio-icon{ font-size:38px; color:#21B573; opacity:.9; }

/* score table */
.ft-score-table thead th{
  border:0; color:#8A8F89; font-weight:700; background:#F8FAF9;
}
.ft-score-table tbody td{ border-top:1px solid #ECEFF1; vertical-align:middle; }

/* tighten hero gap on this page */
@media (max-width: 991.98px){
  .ft-media-box{ width:100%; flex-basis:100%; }
}

/* ——— Dark Mode: Tabs & Actions ——— */
body.darkMode .ft-tabs {
  background: #2B2B2B;
  border-color: #3A3A3A;
}
body.darkMode .ft-tab {
  background: #3A3A3A;
  border-color: #444;
  color: #EAEAEA;
}
body.darkMode .ft-tab.is-active {
  background: linear-gradient(90deg, #00C0E5 0%, #39B54A 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
body.darkMode .ft-share-btn {
  background: #3A3A3A;
  border-color: #444;
  color: #EAEAEA;
}
body.darkMode .ft-join-btn {
  background: linear-gradient(90deg, #00D1E1 0%, #66BB6A 100%);
  color: #FFF;
}
body.darkMode .ft-join-outline {
  background: transparent;
  border-color: #66BB6A;
  color: #66BB6A;
}

/* ——— Dark Mode: Panels (overview) ——— */
body.darkMode .ft-panel {
  background: #2B2B2B;
  border-color: #3A3A3A;
}
body.darkMode .ft-host-name {
  color: #FFF;
}
body.darkMode .ft-host-email {
  color: #A0A0A0;
}
body.darkMode .ft-desc {
  background: #333;
  border-color: #444;
  color: #EAEAEA;
}

/* Date chips */
body.darkMode .ft-meta-pill {
  background: #333;
  border-color: #444;
  color: #EAEAEA;
}

/* ——— Dark Mode: Judges Section ——— */
body.darkMode .ft-section {
  background: #2B2B2B;
  border-color: #3A3A3A;
}
body.darkMode .ft-section-title {
  color: #FFF;
}
body.darkMode .ft-judge-card {
  background: #333;
  border-color: #444;
}
body.darkMode .ft-judge-name {
  color: #FFF;
}
body.darkMode .ft-judge-email {
  color: #A0A0A0;
}

/* ——— Dark Mode: Metrics ——— */
body.darkMode .ft-metric-pill {
  background: #333;
  border-color: #444;
}
body.darkMode .ft-metric-title {
  color: #A0A0A0;
}
body.darkMode .ft-metric-value {
  color: #FFF;
}

/* ——— Dark Mode: Gallery Cards ——— */
body.darkMode .ft-gallery-card {
  background: #2B2B2B;
  border-color: #3A3A3A;
}
body.darkMode .ft-gallery-title {
  color: #FFF;
}
body.darkMode .ft-gallery-meta {
  color: #A0A0A0;
}

/* ——— Dark Mode: Media Box ——— */
body.darkMode .ft-media-thumb {
  background: #333;
  border-color: #444;
  color: #AAA;
}
body.darkMode .ft-audio-icon {
  color: #39B54A;
  opacity: 1;
}

/* ——— Dark Mode: Score Table ——— */
body.darkMode .ft-score-table thead th {
  background: #333;
  color: #A0A0A0;
}
body.darkMode .ft-score-table tbody td {
  border-top-color: #444;
  color: #EAEAEA;
}



/* ===== WALLET CARDS ===== */
.ftw-card{
  background:#fff;
  border:1px solid #E6E8EA;
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.ftw-muted{ color:#8A8F89; font-size:.92rem; }
.ftw-title-6{ font-weight:800; color:#111; font-size:1.05rem; }

.ftw-balance-amount{
  font-weight:900; color:#111; letter-spacing:.2px;
  font-size:2.25rem; line-height:1;
}
.ftw-brand{ height:48px; width:auto; }

.ftw-btn-grad{
  display:inline-block; border:0; border-radius:10px;
  padding:.65rem 1rem; font-weight:800; color:#fff;
  background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  width:100%;
}
.ftw-btn-grad:focus{ outline:none; }

.ftw-pill{
  border:0; border-radius:12px; padding:.35rem .7rem; font-weight:800;
  color:#fff; background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
}
.ftw-coin{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.ftw-coin-amount{ font-weight:900; color:#111; font-size:2rem; line-height:1; }
.ftw-coin-label{ color:#7B817C; font-size:1.05rem; font-weight:700; }
.ftw-arrow{ color:#9EA5A0; font-weight:800; font-size:1.25rem; }

/* Responsive tweaks */
@media (max-width: 575.98px){
  .ftw-balance-amount{ font-size:1.9rem; }
  .ftw-brand{ height:40px; }
}


/* ===== WALLET CARDS : DARK MODE ===== */
body.darkMode .ftw-card{
  background:#141616;
  border:1px solid #242828;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

body.darkMode .ftw-muted{
  color:#9AA09B;
}

body.darkMode .ftw-title-6{
  color:#F2F4F3;
}

body.darkMode .ftw-balance-amount{
  color:#FFFFFF;
}

body.darkMode .ftw-brand{
  filter: brightness(0.95) contrast(1.05);
}

body.darkMode .ftw-btn-grad{
  color:#FFFFFF;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}

body.darkMode .ftw-pill{
  color:#FFFFFF;
}

body.darkMode .ftw-coin{
  background:#1E2222;
}

body.darkMode .ftw-coin-amount{
  color:#FFFFFF;
}

body.darkMode .ftw-coin-label{
  color:#A1A8A3;
}

body.darkMode .ftw-arrow{
  color:#8E9590;
}

body.darkMode .list-group-item{
  background-color: #141616;
  border-color: #242828;
}

#transactionTable tr, #transactionTable { background-color: #fff; border-bottom: 1px solid #eaeaea; }

.wallterFilterBox input { height: 50px; }


/* ===== Skill-for-Hire stepper skin (non-invasive) ===== */
.fsh-stepperskin{
  display:flex;
  align-items:stretch;
  counter-reset: fsh-step;
  padding: 0px;
}
.fsh-stepperskin .step{
  position:relative;
  flex:1 1 0;
  background:#fff;
  border:1px solid #E6E8EA;
  color:#8B8F8D;
  font-weight:700;
  border-radius:10px;
  padding:20px 14px 20px 48px;   /* room for the number badge */
  line-height:1.2;
  display:flex; align-items:center;
}

/* spacing between segments */
.fsh-stepperskin .step + .step{ margin-left:12px; }

/* numbered badge */
.fsh-stepperskin .step::before{
  counter-increment: fsh-step;
  content: counter(fsh-step);
  position:absolute;
  left:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.95rem;
  background:#fff; color:#7E837F; border:2px solid #DDE2DE;
}

/* chevron connector */
/* .fsh-stepperskin .step::after{
  content:"";
  position:absolute; right:-13px; top:-1px; bottom:-1px;
  width:26px; transform:skewX(20deg);
  background:#fff;
  border-top:1px solid #E6E8EA; border-right:1px solid #E6E8EA; border-bottom:1px solid #E6E8EA;
  z-index:2;
} */
.fsh-stepperskin .step:last-child::after{ display:none; }

/* ACTIVE segment */
.fsh-stepperskin .step.active, .fsh-stepperskin .step.completed{
  background:linear-gradient(90deg, #ef4e4e38 0%, #ffc36354 100%);
  color:#111; border-color:#f47f52;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.fsh-stepperskin .step.active::before, .fsh-stepperskin .step.completed:before{
  background:linear-gradient(90deg, #ef4e4e 0%, #faab2c 100%); color:#fff;  border: 1px solid #f68b38;
}
/* chevron continues the gradient */
/* .fsh-stepperskin .step.active::after, .fsh-stepperskin .step.completed::after{
  background:linear-gradient(90deg,#FF6A00 0%, #EE0979 100%);
  border-color:transparent;
} */

/* Responsive tweak */
@media (max-width:575.98px){
  .fsh-stepperskin .step{ padding-left:44px; font-size:.95rem; }
  .fsh-stepperskin .step::before{ width:24px; height:24px; font-size:.85rem; }
}

/* ——— Dark Mode: Skill-for-Hire Stepper ——— */
body.darkMode .fsh-stepperskin .step {
  background: #1E1E1E;
  border-color: #333;
  color: #A0A0A0;
}
body.darkMode .fsh-stepperskin .step::before {
  background: #2A2A2A;
  color: #BBB;
  border-color: #444;
}


/* active or completed steps */
body.darkMode .fsh-stepperskin .step.active,
body.darkMode .fsh-stepperskin .step.completed {
  background: linear-gradient(90deg, rgba(239, 78, 78, 0.25) 0%, rgba(255, 195, 99, 0.35) 100%);
  color: #FFF;
  border-color: #F68B38;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
body.darkMode .fsh-stepperskin .step.active::before,
body.darkMode .fsh-stepperskin .step.completed::before {
  background: linear-gradient(90deg, #EF4E4E 0%, #FAAB2C 100%);
  color: #FFF;
  border-color: #F68B38;
}





/* Panel */
#step-1.step-content{
  background:#F7F8F7;
  border:1px solid #E6E8EA;
  border-radius:16px;
  padding:24px;
}
#step-1.step-content h3{
  margin:0 0 16px 6px;
  font-weight:800;
  color:#111;
  text-align:left !important;
}

/* 3-up row with proper gaps (BS4 doesn't have gap: use margins) */
.fsh-types{
  flex-wrap:wrap;
  margin-left:-12px; margin-right:-12px;
  justify-content:flex-start;  /* like the shot, not centered */
}
.fsh-types > .feature-type-option{
  margin:0 12px 16px;
  flex:0 0 calc(33.333% - 24px); /* three columns */
  max-width:calc(33.333% - 24px);
}

/* Tile */
.feature-type-option{
  position:relative;
  display:flex; align-items:center;
  background:#fff;
  border:2px solid #E2EDE6;
  border-radius:14px;
  min-height:96px;
  padding:18px 20px;
  cursor:pointer;
  text-align:left !important;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
  overflow:hidden; /* for gradient overlay */
}
.feature-type-option > input[type="radio"]{
  position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none;
}

/* Icon circle (white, slight ring + soft shadow) */
.feature-type-option .icon-box{
  width:56px; height:56px; border-radius:50%;
  background:#F2F2F2;
  border:1px solid #EEF2EF;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  margin-right:14px;
}
.feature-type-option .icon-box .fa-solid{ color:#20B573; font-size:22px; }

.feature-type-option .label{
  font-weight:800; color:#111; font-size:1.08rem;
}

/* Right check badge */
.feature-type-option::after{
  content:"";
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:#EAF7EE; display:none;
}
.feature-type-option::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:25px; top:50%; transform:translateY(-50%);
  font-size:14px; color:#20B573; display:none;
}

/* Selected state – thin green border + subtle left->right green overlay */
.feature-type-option.is-selected{
  border-color:#45C372;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.feature-type-option.is-selected .icon-box{ background:#fff; }
.feature-type-option.is-selected::after,
.feature-type-option.is-selected::before{ display:block; }

/* gradient fill as overlay */
.feature-type-option.is-selected .fsh-fill,
.feature-type-option.is-selected::marker{ display:none; }
.feature-type-option.is-selected::selection{ background:transparent; }

.feature-type-option.is-selected:focus{ outline:none; }

.feature-type-option.is-selected:before{
  /* we already used ::before for check; use an overlay instead */
}
.feature-type-option.is-selected > .fsh-overlay{}
.feature-type-option::marker{}

/* Use ::-webkit- trick? Better: a dedicated pseudo */
.feature-type-option.is-selected:after{} /* (check circle already used) */
.feature-type-option.is-selected:before{} /* (check icon already used) */

/* We'll use an extra pseudo element for the gradient background: */
.feature-type-option.is-selected > *:first-child::before{}

/* Simpler: use the tile's own :global pseudo using :after for check; so use :before for gradient */
.feature-type-option.is-selected::before{
  /* already used; swap: we'll move icon check to ::after+/span. To avoid confusion keep as is: */
}


.feature-type-option.active:after { position: absolute; background: url(../images/green-tick.png) no-repeat center right; content: '';     width: 32px;
    height: 32px;
    right: 24px; top:50%; display: block !important; z-index: 10; }


    /* ——— Dark Mode: Skill-for-Hire Type Tiles ——— */
body.darkMode #step-1.step-content {
  background: #1E1E1E;
  border-color: #333;
}
body.darkMode #step-1.step-content h3 {
  color: #FFF;
}

/* Tiles */
body.darkMode .feature-type-option {
  background: #2A2A2A;
  border-color: #3A3D3A;
  color: #E4E4E4;
}
body.darkMode .feature-type-option:hover {
  border-color: #45C372;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
body.darkMode .feature-type-option .icon-box {
  background: #333;
  border-color: #444;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
body.darkMode .feature-type-option .icon-box .fa-solid {
  color: #22B573;
}
body.darkMode .feature-type-option .label {
  color: #FFF;
}

/* Selected state */
body.darkMode .feature-type-option.is-selected {
  border-color: #45C372;
  background: linear-gradient(90deg, rgba(34,181,115,0.25) 0%, rgba(0,192,229,0.15) 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
body.darkMode .feature-type-option.is-selected::after {
  background: #234635;
}
body.darkMode .feature-type-option.is-selected::before {
  color: #45C372;
}

/* Active (with PNG check overlay) */
body.darkMode .feature-type-option.active:after {
  filter: brightness(1.1);
}



    /* Panel shell */
.fsh2-panel{
  background:#F7F8F7;
  border:1px solid #E6E8EA;
  border-radius:16px;
  padding:22px;
}
.fsh2-title{ font-weight:800; color:#111; }

/* Section shells (white rounded boxes inside the gray panel) */
.fsh2-box{
  background:#FFF;
  border:1px solid #E6E8EA;
  border-radius:10px;
  padding:15px;
}

/* Labels */
.fsh2-section-label{ color:#111; font-weight:800; }
.fsh2-field-label{ color:#111; font-weight:700; }

/* Inputs (keep your names; only skin) */
.step-content .form-group .fsh2-control{
  border-radius:12px !important;
  border:1px solid #DDE2DE !important;
  padding:12px 14px;
  background: #fff !important;
}
.fsh2-control:focus{
  border-color:#45C372;
  box-shadow:0 0 0 .2rem rgba(69,195,114,.15);
}

/* Drag & drop upload */
.fsh2-drop{
  position:relative;
  border:2px dashed #C9D2CC;
  border-radius:10px;
  min-height:84px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transition:background .15s ease, border-color .15s ease;
}
.fsh2-drop.dragover{ background:#F3FAF6; border-color:#45C372; }
.fsh2-file{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.fsh2-drop-icon{
  width:28px; height:28px; border-radius:6px;
  background:linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 20q-.825 0-1.413-.588T3 18v-5h2v5h14v-5h2v5q0 .825-.588 1.413T19 20zm7-4l-4-4l1.4-1.4l1.6 1.6V4h2v7.2l1.6-1.6L16 12z'/%3E%3C/svg%3E") center/70% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ... %3C/svg%3E") center/70% no-repeat;
  margin:0 auto 6px;
}
.fsh2-drop-title{ font-weight:800; color:#111; }
.fsh2-dim{ color:#7B817C; font-weight:600; }
.fsh2-drop-sub{ font-size:.9rem; }

/* Predefined thumbs */
.fsh2-thumb{
  position:relative; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  border-radius:10px; padding:10px 12px;
  border:1px solid transparent;
  cursor:pointer; user-select:none;
}
.fsh2-thumb input{ position:absolute; opacity:0; pointer-events:none; }
.fsh2-thumb img{
  width:120px; height:84px; object-fit:cover;
  border-radius:8px; border:1px solid #E6E8EA; background:#F3F5F4;
}
.fsh2-thumb-name{ margin-top:6px; color:#111; font-weight:700; font-size:.95rem; }
.fsh2-thumb-check{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  background:#EAF7EE; border:1px solid #CFECD9; display:none;
}
.fsh2-thumb input:checked ~ .fsh2-thumb-check{
  display:block;
}
.fsh2-thumb input:checked ~ img{
  border-color:#45C372;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Platform chips */
.fsh2-chip{
  display:inline-flex; align-items:center;
  border:1px solid #DDE2DE; border-radius:999px;
  padding:6px 12px; cursor:pointer; background:#fff;
  transition:all .15s ease;
}
.fsh2-chip input{ display:none; }
.fsh2-chip input:checked + span,
.fsh2-chip input:checked ~ span{
  color:#111;
}
.fsh2-chip input:checked ~ *{
  /* highlight pill */
}
.fsh2-chip input:checked ~ span,
.fsh2-chip input:checked ~ i{
  /* text/icon color already stronger */
}
.fsh2-chip.active{
  border-color:#45C372;
  background:linear-gradient(90deg, rgba(0,192,229,.08) 0%, rgba(57,181,74,.08) 100%);
}

/* Buttons */
.fsh2-btn-back{
  background:#ECEFEC; color:#111; border:none; font-weight:800;
  border-radius:12px; padding:.6rem 1.2rem;
}
.fsh2-btn-next{
  background:linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
  color:#fff; border:none; font-weight:800;
  border-radius:12px; padding:.6rem 1.4rem;
}

/* ——— Dark Mode: Skill-for-Hire Step 2 Panel ——— */
body.darkMode .fsh2-panel {
  background: #1E1E1E;
  border-color: #333;
}
body.darkMode .fsh2-title {
  color: #FFF;
}

/* Inner sections */
body.darkMode .fsh2-box {
  background: #2A2A2A;
  border-color: #3A3D3A;
}
body.darkMode .fsh2-section-label,
body.darkMode .fsh2-field-label {
  color: #EAEAEA;
}

/* Inputs */
body.darkMode .step-content .form-group .fsh2-control {
  background: #252525 !important;
  border-color: #3A3D3A !important;
  color: #E4E4E4;
}
body.darkMode .step-content .form-group .fsh2-control:focus {
  border-color: #45C372 !important;
  box-shadow: 0 0 0 0.2rem rgba(69,195,114,0.25);
}

/* Drag & Drop upload */
body.darkMode .fsh2-drop {
  border-color: #3A3D3A;
  background: #242424;
  color: #CCC;
}
body.darkMode .fsh2-drop.dragover {
  background: rgba(69,195,114,0.08);
  border-color: #45C372;
}
body.darkMode .fsh2-drop-icon {
  background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
}
body.darkMode .fsh2-drop-title {
  color: #FFF;
}
body.darkMode .fsh2-dim,
body.darkMode .fsh2-drop-sub {
  color: #A0A0A0;
}

/* Predefined thumbs */
body.darkMode .fsh2-thumb img {
  border-color: #3A3D3A;
  background: #2E2E2E;
}
body.darkMode .fsh2-thumb-name {
  color: #EEE;
}
body.darkMode .fsh2-thumb input:checked ~ img {
  border-color: #45C372;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}
body.darkMode .fsh2-thumb-check {
  background: #1F3B2A;
  border-color: #2E6646;
}

/* Platform chips */
body.darkMode .fsh2-chip {
  background: #2A2A2A;
  border-color: #3A3D3A;
  color: #CCC;
}
body.darkMode .fsh2-chip.active {
  border-color: #45C372;
  background: linear-gradient(90deg, rgba(0,192,229,0.12) 0%, rgba(57,181,74,0.12) 100%);
}
body.darkMode .fsh2-chip input:checked ~ span,
body.darkMode .fsh2-chip input:checked ~ i {
  color: #FFF;
}

/* Buttons */
body.darkMode .fsh2-btn-back {
  background: #2A2A2A;
  color: #EAEAEA;
}
body.darkMode .fsh2-btn-next {
  background: linear-gradient(90deg,#00C0E5 0%, #39B54A 100%);
  color: #FFF;
}

body.darkMode #step-1.step-content,
body.darkMode #step-2.step-content,
body.darkMode #step-3.step-content,
body.darkMode #step-4.step-content,
body.darkMode #step-4.step-content .card {
    background: #2A2A2A;
    color: #EAEAEA;
}


/* ===== Radio pills (Usage Rights) ===== */
.fsh3-rights{ display:flex; flex-wrap:wrap; gap:10px; }
.fsh3-radio{
  display:inline-flex; align-items:center; cursor:pointer;
  border:1.5px solid #DDE2DE; border-radius:999px; background:#fff;
  padding:8px 14px; transition:all .15s ease;
}
.fsh3-radio input{ position:absolute; opacity:0; pointer-events:none; }
.fsh3-radio span{ font-weight:700; color:#111; }
.fsh3-radio input:checked ~ span{ color:#111; }
.fsh3-radio input:checked ~ span:after{
  content:""; display:inline-block; width:8px; height:8px; margin-left:10px; border-radius:50%;
  background:#45C372;
}
.fsh3-radio input:checked ~ *{ }
.fsh3-radio input:checked + span, .fsh3-radio.active{
  border-color:#45C372;
  background:linear-gradient(90deg, rgba(0,192,229,.08) 0%, rgba(57,181,74,.08) 100%);
}

/* ===== Table look (royalty + preview) ===== */
.fsh3-table{
  background:#fff; border:1px solid #E6E8EA; border-radius:10px; overflow:hidden;
}
.fsh3-table thead th{
  background:#F5F7F6; border-bottom:1px solid #E6E8EA; color:#626A65; font-weight:800;
}
.fsh3-table td, .fsh3-table th{ vertical-align:middle; }
.fsh3-table input.form-control{ border-radius:10px; padding:.5rem .65rem; }

/* Checklist (popular questions) */
.fsh3-checklist{ padding:10px; }
.fsh3-check{ display:flex; align-items:flex-start; padding:6px 4px; }
.fsh3-check input{ margin-top:3px; margin-right:10px; }
.fsh3-check span{ font-weight:600; color:#111; }

/* Buttons already defined: .fsh2-btn-back / .fsh2-btn-next */


:root { --wf-width: 420px; }

.wf-flyout { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.wf-flyout.is-open { pointer-events: auto; }
.wf-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s ease;
}
.wf-flyout.is-open .wf-backdrop { opacity: 1; }

.wf-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 100%;
  max-width: var(--wf-width); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  padding: 22px 18px; box-shadow: -12px 0 30px rgba(0,0,0,.15);
  border-top-left-radius: 16px; border-bottom-left-radius: 16px; outline: none;
}
.wf-flyout.is-open .wf-panel { transform: translateX(0); }

.wf-close {
  position: absolute; top: 8px; right: 10px; background: transparent; border: 0;
  font-size: 34px; line-height: 1; cursor: pointer; color: #111;
}

.wf-header { padding-right: 36px; }
.wf-title { margin: 8px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: .4px; }
.wf-sub { color: #6b7280; margin: 0 0 14px; font-size: 14px; }

.wf-body { overflow: auto; padding-right: 6px; }

.wf-card {
  display: flex; align-items: center; gap: 16px;
  border-radius: 16px; padding: 18px; text-decoration: none;
  color: #111; background: #eef1f4; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .15s ease; margin-bottom: 16px;
}
.wf-card:hover { transform: translateY(-2px); }
.wf-logo { height: 38px; }
.wf-cta {
  margin-left: auto; font-weight: 700; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.75); letter-spacing: .5px;
}

/* gradients similar to your mock */
.wf-grad-green  { background: linear-gradient(135deg, #C8F1E5, #D7F4C8); }
.wf-grad-orange { background: linear-gradient(135deg, #F8D9C2, #FBD6B0); }

body.wf-noscroll { overflow: hidden; }

/* optional: header icon look */
.nav-wallet-icon { display:inline-flex; align-items:center; gap:6px; color:#111; }
.nav-wallet-icon:hover { color:#0ea5e9; }

#owl-feeturre-list .feeturre-item { margin: 0 15px;}

#play-icon.fa-play { margin-left: 3px;}
#play-btn:hover { color: #a82fba !important; }

.album-play-card .album-card-btn { opacity: 0; transition: opacity .2s;     opacity: 0;

    height: 35px;
    width: 35px;
    text-align: center;
    bottom: 10px;
    left: 10px;
    background: rgba(239, 78, 78, 1);
    border-radius: 60px;}
.album-play-card:hover .album-card-btn,
.album-play-card.is-playing .album-card-btn { opacity: 1; }

.brandDetailPage { margin-top: 200px !important;}


#searchDropdown {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
    background-color: #fff;
    z-index: 100;
}


#searchDropdown strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #555;
}


.stream-artist-item,
.stream-album-item,
.stream-track-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}


.stream-artist-item:hover,
.stream-album-item:hover,
.stream-track-item:hover {
    background-color: #f8f9fa;
    color: #000;
    border-radius: 6px;
}


.stream-artist-item img,
.stream-album-item img,
.stream-track-item img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}


.item-title {
    font-weight: 500;
    color: #333;
    font-size: 18px;
}

.item-title {
    font-weight: 500;
    color: #333;
    font-family: 'Sora-Medium';
}

.item-subtitle {
    font-size: 0.85rem;
    color: #777;
    margin-top: 2px;
}

/* Section wrapper adjustments for hiding empty sections */
#artist-section,
#album-section,
#track-section {
    margin-bottom: 8px;
}

/* Optional scroll styling */
#searchDropdown::-webkit-scrollbar {
    width: 6px;
}

#searchDropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

#searchDropdown .dropdown-item .item-img img {
    width: 65px;
    height: 65px !important;
    padding: 0 !important;
    max-width: 100%;
}

#searchDropdown .dropdown-item {
    padding: .25rem 0.5rem;
}

#searchDropdown .dropdown-item:hover {
    cursor: pointer;
}
#searchDropdown .dropdown-item .item-title:hover  {
    text-decoration: underline;
    color: indigo;
}


.preview-content {
    max-width: 500px;
    width: 500px;
}


/* ============================================================
   Dark Mode — Search Dropdown
   ============================================================ */
body.darkMode #searchDropdown {
  background-color: #1C1C1C;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  border: 1px solid #2E2E2E;
}

body.darkMode #searchDropdown strong {
  color: #AAA;
}

body.darkMode .stream-artist-item,
body.darkMode .stream-album-item,
body.darkMode .stream-track-item {
  color: #EAEAEA;
}

body.darkMode .stream-artist-item:hover,
body.darkMode .stream-album-item:hover,
body.darkMode .stream-track-item:hover {
  background-color: #2A2A2A;
  color: #FFF;
}

body.darkMode .item-title {
  color: #FFF;
}

body.darkMode .item-subtitle {
  color: #AAA;
}

body.darkMode #searchDropdown::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.15);
}

body.darkMode #searchDropdown .dropdown-item .item-title:hover {
  color: #6A7BFF;
  text-decoration: underline;
}

body.darkMode #searchDropdown .dropdown-item:focus,
body.darkMode #searchDropdown .dropdown-item:hover{
    background-color: #2A2A2A;
    color: #FFF;
}

/* Responsive adjustments for small screens */
@media (max-width: 576px) {
    .stream-artist-item img,
    .stream-album-item img,
    .stream-track-item img {
        width: 36px;
        height: 36px;
    }

    .stream-artist-item,
    .stream-album-item,
    .stream-track-item {
        font-size: 0.9rem;
        gap: 8px;
    }
    .preview-content{
        max-width: 100%;
        width: 250px;
        margin: 0 auto;
    }
}


@keyframes bell-shake {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.bell-shake {
    display: inline-block;
    animation: bell-shake 1s infinite;
    transform-origin: top center;
    color: #93c93e;
}

#notificationBadge {
    background-color: #8bc740 !important;
    color: #fff;
    font-size: 10px;
}

.feature-tile-wrapper {
    position: relative;
}

/* Blur locked features */
.locked-feature {
    filter: blur(1.5px);
    opacity: 0.7;
    pointer-events: none;
    transition: filter 0.3s, opacity 0.3s;
}

.overlay-upgrade-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 30px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    border-radius: 0.5rem;
    transition: background 0.3s, transform 0.2s;
}

.overlay-upgrade-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.blurred-card {
    filter: blur(3px);
    pointer-events: none;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    text-align: center;
    padding: 1rem;
}


.blurred-btn {
    filter: blur(2px);
    pointer-events: none;
}

.locked-overlay-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    padding: 0.25rem;
    z-index: 2;
}


.authPage--account .bannerSection .bannerSectionContainer {
    min-height: 700px;
}

.authPage--account .bannerSection {
    min-height: 900px;
}



/* === GRID VIEW ONLY === */
.view-type-view[data-view-type="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

/* Grid card */
.view-type-view[data-view-type="grid"] .ft-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: #E6E9E4;
    /* glass effect */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid #E6E9E4;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.view-type-view[data-view-type="grid"] .ft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}

/* Cover image */
.view-type-view[data-view-type="grid"] .ft-card-img {
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: 300px;
    flex-shrink: 0;
}

/* Body */
.view-type-view[data-view-type="grid"] .ft-card-body {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* Pill */
.view-type-view[data-view-type="grid"] .ft-pill {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

/* Title */
.view-type-view[data-view-type="grid"] .ft-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Description */
.view-type-view[data-view-type="grid"] .ft-card-desc {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Subcards */
.view-type-view[data-view-type="grid"] .ft-subcards {
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
}

.view-type-view[data-view-type="grid"] .ft-subcard {
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Avatars */
.view-type-view[data-view-type="grid"] .ft-avatar,
.view-type-view[data-view-type="grid"] .ft-judge-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.view-type-view[data-view-type="grid"] .ft-judge-stack {
    display: flex;
}

.view-type-view[data-view-type="grid"] .ft-judge-stack img:not(:first-child) {
    margin-left: -10px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    background: #fff;
}

.collabathon-list .HeroSearchBar{
    min-width: 450px;
}

/* ——— Dark Mode: Grid View ——— */
body.darkMode .view-type-view[data-view-type="grid"] .ft-card {
  background: rgba(40, 40, 40, 0.8);
  border-color: #3A3A3A;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #EAEAEA;
}

body.darkMode .view-type-view[data-view-type="grid"] .ft-card:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

/* Title + Description */
body.darkMode .view-type-view[data-view-type="grid"] .ft-card-title {
  color: #FFF;
}
body.darkMode .view-type-view[data-view-type="grid"] .ft-card-desc {
  color: #A0A0A0;
}

/* Pill */
body.darkMode .view-type-view[data-view-type="grid"] .ft-pill {
  background: rgba(255, 255, 255, 0.1);
  color: #FFD8B0;
}

/* Subcards */
body.darkMode .view-type-view[data-view-type="grid"] .ft-subcard {
  background: #333;
  border-color: #3A3A3A;
  color: #EAEAEA;
}

/* Judge avatars */
body.darkMode .view-type-view[data-view-type="grid"] .ft-judge-stack img:not(:first-child) {
  border-color: #2B2B2B;
  background: #2B2B2B;
}

/* Optional tweak for dark theme hero search bar contrast */
body.darkMode .collabathon-list .HeroSearchBar {
  background: #2F2F2F;
  color: #EAEAEA;
  border-color: #444;
}



/* ============================
   DARK MODE: Select2 Styling
   ============================ */

/* === SINGLE SELECT === */
body.darkMode .select2-container--default .select2-selection--single {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #ddd;
    transition: all 0.25s ease;
}

body.darkMode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ddd;
}

body.darkMode .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #777;
}

body.darkMode .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #aaa transparent transparent transparent;
}

/* === DROPDOWN PANEL === */
body.darkMode .select2-dropdown {
  background-color: #2a2a2a;
  border: 1px solid #444;
  color: #ddd;
  overflow: hidden;
}

body.darkMode .select2-container--default .select2-results__option {
  color: #ddd;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

body.darkMode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #444;
  color: #fff;
}

body.darkMode .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #333;
  color: #fff;
}

/* === MULTI SELECT === */
body.darkMode .select2-container--default .select2-selection--multiple {
    background-color: #3f3f3f !important;
    border: 1px solid #444 !important;
    color: #ddd;
    cursor: text;
    transition: all 0.25s ease;
}

body.darkMode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  color: #eee;
  border-radius: 6px;
}

body.darkMode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #aaa !important;
}

body.darkMode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #f88 !important;
}

/* === SEARCH INPUT inside multiple === */
body.darkMode .select2-container--default .select2-search--inline .select2-search__field {
  color: #fff;
}


body.darkMode .select2-results__options::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

/* === Smooth transitions === */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-link:hover{
    text-decoration: none;
}

.verificationModal.modal .modal-header .close span{
    font-size: inherit;
}

.verificationModal.modal .modal-content {
    padding: 65px !important
}

body.darkMode #uploadSection h3{
    color: #fff;
}
body.darkMode #uploadSection p.text-muted {
    color: #FFF !important;
}

body.darkMode #dropZone.bg-light{
    background-color: #2F2F2F !important;
}
body.darkMode #dropZone p{
    color: #FFF !important;
}
body.darkMode #audioPreviewWrapper .fw-bold{
    color: #FFF !important;
}

body.darkMode #detailsForm .bg-light{
    background-color: #2F2F2F !important;
}

body.darkMode #coverMessage p{
    color: #FFF !important;
}

body.darkMode .cke {
  background: #1e1e1e;
  border-color: #333;
}

body.darkMode .cke_top,
body.darkMode .cke_bottom {
  background: #1e1e1e;
  border-color: #333;
}

body.darkMode .cke_contents {
  background: #121212;
}

body.darkMode .cke_editable {
  background: #121212;
  color: #e0e0e0;
}
/* *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #00CB50;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #00a943;
} */

.form-check-input{
    position: static;
    margin-top: 0;
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Card Container */
.wallet-card-container {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(255, 126, 0, 0.2);
    transition: transform 0.2s;
}
.wallet-card-container:hover {
    transform: translateY(-3px);
}

/* Background */
.wc-bg {
    background: linear-gradient(135deg, #00ff01 0%, #106f00 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
/* Content */
.wc-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}

/* Copy Button Area */
.wc-bottom {
    display: flex;
    justify-content: flex-end;
}

.btn-copy-action {
    background: rgba(0,0,0,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    z-index: 10; /* Ensure it sits above background */
}
.btn-copy-action:hover {
    background: rgba(0,0,0,0.4);
    transform: scale(1.05);
}

/* Text Styles */
.wc-address { font-family: monospace; font-size: 1.1rem; font-weight: bold; }
.wc-label { font-size: 0.7rem; opacity: 0.8; text-transform: uppercase; }
.wc-badge { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; font-size: 0.6rem; }
.wc-top { display: flex; justify-content: space-between; align-items: center; }
.wc-logo-img { height: 24px; filter: brightness(0) invert(1); }

/* Create Button */
.btn-create-wallet { width: 100%; padding: 15px; border: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }