html {
  /* IMPORTANT; */
  text-align: center; 
  height: 100%;
  font-family: SF Pro Display, SF Pro, -apple-system, "San Francisco", "Helvetica", "Roboto", "Arial"; 
  width: 100%;
}
body {
  background-color: #020418 !important;

  /* animation: pulseAnimation 3s ease-in-out infinite; Adjust the duration (3s) to control the speed of pulsation */
  
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;

  width: 100%;
  height: 100%;  
  display: flex;
  justify-content: center;
  font-family:  SF Pro Display, SF Pro, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, "Roboto", sans-serif;

}
body::before,
body::after {
  content: '';
  position: fixed;
  width: 130vmax; /* Makes the gradient responsive */
  height: 100vmax;
  filter: blur(40px);
  opacity: 0.8;
  z-index: -1;
  will-change: transform, filter;
}

/* First blob (top-left to bottom-right) */
body::before {
  top: 25%;
  left: 25%;
  background: radial-gradient(
    75% 30% at 70% 65%,
    rgba(94, 102, 255, 0.8) 0%,
    #7500ff24 70%
  );
  animation: blobBreath 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: center;
}

/* Second blob (bottom-right to top-left) */
body::after {
  top: 15%;
  left: 45%;
  background: radial-gradient(
    15% 42% at 80% 65%, 
    #855effcc 0%, 
    #3000ff12 70%);
  animation: blobBreathReverse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: center;
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  font-style: normal;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

@font-face {
  font-family: "San Francisco bold";
  font-weight: 400;
  font-style: bold;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}

/* html, body, div {
    background-color: #7076f0;
    text-align: center;
    font-family: "San Francisco", "Helvetica", "Arial"; 
} */

@keyframes pulseAnimation {
  0% {
    background-image: radial-gradient(78.6% 34.5% at 42.9% 44.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);
    /* background-position: 22.9% 34.8%; */
  }
  50% {
    background-image: radial-gradient(78.6% 34.5% at 42.9% 44.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);
    /* background-image: radial-gradient(78.6% 34.5% at 50% 50%, rgb(77 81 159) 0%, rgb(17, 17, 30) 100%); */
    /* background-position: 50% 50%; */
  }
  100% {
    background-image: radial-gradient(78.6% 34.5% at 42.9% 44.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);

    /* background-image: radial-gradient(78.6% 34.5% at 77.1% 65.2%, rgb(77 81 159) 0%, rgb(17, 17, 30) 100%); */
    /* background-position: 77.1% 65.2%; */
  }
}
@keyframes pulseBlob {
  0% {
      transform: scale(1);
      opacity: 0.8;
  }
  50% {
      transform: scale(1.2);
      opacity: 1;
  }
  100% {
      transform: scale(1);
      opacity: 0.8;
  }
}
@keyframes blobPulse {
  0%, 100% {
    transform: scale(1) translate(-50%, -50%);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.4) translate(-50%, -50%);
    opacity: 0.6;
  }
}
@keyframes blobBreath {
  0%, 100% {
    transform: scale(1) translate(-50%, -50%);
    filter: blur(40px) brightness(1);
  }
  50% {
    transform: scale(1.6) translate(-50%, -50%);
    filter: blur(60px) brightness(1.2);
  }
}
@keyframes blobBreathReverse {
  0%, 100% {
    transform: scale(1.6) translate(-50%, -50%);
    filter: blur(40px) brightness(1.2);
  }
  50% {
    transform: scale(1) translate(-50%, -50%);
    filter: blur(20px) brightness(1);
  }
}

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

.strive_h1 {
  columns: white;
  font-weight: bold;
} 
.track_search{
  display: flex;
  flex-direction: column;
  /* background-color: #ffffff70 !important; */
  width: 28%;
  margin-right: 15px;
}
.data_graph_content .track_search{
  width: 22%;
}
.track_search_dropdown{
  top: 5px !important;
  max-width: 30vw !important;
  max-height: 50vh;
  overflow-y: scroll;

  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;

}
#search-input {
  outline: 1px solid #ffffff00;
  border-radius: 10px;
  border-color: #ffffff00;
}
.search-input {
  outline: 1px solid #ffffff00;
  border-radius: 10px;
  border-color: #ffffff00;
}

#track-table {
  background-color: #ffffff70 !important;
  color: black;
  max-width: 50vw !important;
  overflow-x: scroll;
}
#track-table .dash-cell.column-0{
  max-width: 240px;
  overflow-x: scroll;
}
.track_select_div {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  margin-top: 15vh;
  width: 90%;
  margin-left: 11vw;
}
.big_data_graph_content .track_select_div{
  width: 96% !important;
  margin-left: 4vw;
  margin-right: 4px;

}
.track_select_div.edit{
  background-color: #ffffff14;
  border-radius: 50px;
}
.mantine-MultiSelect-dropdown.mantine-rynikm{
  overflow: scroll !important;
  z-index: 99999 !important;
}
.track-dropdown label{
  position: inherit !important;
  background-color: #ffffff70 !important;
  text-align: start !important;

  display: flex !important;
  padding-right: 2px;
  padding-left: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  justify-content: flex-start;
  align-items: center;
}
.trackdropdown-option {
  display: flex;
  align-items: center;

}
.searchtr_pic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 10px;
  margin-left: 10px;
}
.spotify_tracks {
  display: flex;
  flex-direction: row;
  background-color: #ffffff3b;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-radius: 10px;
}
.slider_table{
  display: flex;
  flex-direction: column !important;
  width: 60%;
}
.rc-slider-handle{
  width: 30px !important;
  height: 30px !important;
  margin-top: -10px !important;
}
.rc-slider-mark-text-active {
  color: #f1f1fa;
  font-weight: 800;

  transform: rotate(30deg) !important;
  top: 15px;
}
.rc-slider-mark-text {
  transform: rotate(30deg) !important;
  top: 15px;
}
.pay_row{
  width: 23%;
  margin-left: 15px;
  background-color: #ffffff1c;
  height: 100%;
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 2px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.pos_span {
  font-weight: 900;
  font-size: 17px;
  /* display: flex; */
  width: 130% !important;
}
.inline_pos_span {
  font-weight: 900;
  font-size: 17px;
  display: inline;
}
.step1_title {
  font-size: 1.9vw;
  font-weight: 800;
  text-align: start;
  margin-bottom: 0px;
}
.step2_title {
  font-size: 29px;
  font-weight: 800;
  text-align: start;
  margin-bottom: 0px;
}
.step2_1_title {
  font-size: 20px;
  font-weight: 700;
  text-align: start;
  margin-bottom: 0px;
  margin-left: 2px;
  /* align-self: center; */
}

.bold {
  font-weight: 800;
}
.success {
  background-color: #9fa4f9;
  color: white;
  font-weight: 700;
}
.danger {
  color: #ff608d;
  background-color: white;
  font-weight: 700;
}
.step3_title {
  font-size: 29px;
  font-weight: 800;
  text-align: start;
}
.renew_sub{
  font-size: 17px;
  font-weight: 700;
  width: 108%;
  text-align: center;
}
.renew_sub2{
  font-size: 18px;
  font-weight: 600;
  width: 102%;
  text-align: center;
  margin-bottom: 15px;
}
.step1_sub{
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  text-align: start;
}
.final_budget_row{
  margin-top: 6px;
}
.save_payment_button {
  background-color: #553aff;
  color: #fff;
  font-weight: 700;
}
.add_camp_button {
  background-color: #e239f1;
  color: #fff;
  font-weight: 700;

  height: 36px;
  width: 74px;
  font-size: 14.5px;
  vertical-align: middle;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.add_edit_button_div {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
@keyframes pulseColor {
  0%, 100% {
    background-color: #f56a3f;
  }
  50% {
    background-color: #9e42b0;
  }
}
.step3_sub{
  font-size: 16px;
  font-weight: 600;
  width: 90%;
  text-align: start;
  margin-right: 5px;
  display: flex;
  align-items: center;
}
.step3_sub.sub4{
  font-size: 18px !important;
  font-weight: 800 !important;
}
.cost_sub {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    text-align: start;
    margin-right: 5px;
    align-items: center;
    justify-content: center;
}
.cost_sub_text {
  /* min-width: 108px; */
  font-size: 18px;
  flex-direction: column;
  font-weight: 800;
  text-align: start;
  margin-right: 2px;
  align-items: center;
  display: flex;
  margin-bottom: 0px;
}
.discount_percent{
  font-size: 19px;
  font-weight: 800;
  background-color: #ffffff36;
  color: #32ffc3;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 20px;
}
.step1_sub_title{
  display: flex;
  flex-direction: row;
}
.costperstream_title{
  display: flex;
}
.alert-container {
  background-color: #3a36ae;
  border-radius: 15px;
  padding: 10px;
  border: 1px solid #ddd;

}
.camp_status_edit_button_div{
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
  margin-left: 25px;
  margin-top: 4px;

}
#camp_status_label {
  min-width: 195px;
}
#cost_est{
  display: flex;
  flex-direction: column;
  align-items: start;
}
.cps_title_val{
  display: flex;
  padding-bottom: 8px;
}
#stream_cost_est {
  padding-bottom: 8px;
}
#budget_cost_est{
  padding-bottom: 8px;
}
.Select-control{
  background-color: transparent !important;
  color: #e4e4e4 !important;
  border-color: #e4e4e4 !important;
}
.btn-outline-primary {
  color: #c7caff !important;
  border-color: #c7caff !important;
}
.btn-primary {
  border-color: #8d91ff !important;
}
.Select-value-label {
  color: #e4e4e4 !important;
}
.Select-menu-outer {
  background-color: #5d61ba !important;
  color: white !important;
  display: block !important;
}
#react-entry-point {
  max-width: 100% !important;
}
#parent_div {
  width: 100%;
}
#page-content {
  width: 100% !important;
  /* z-index: 300 !important;
  position: sticky !important; */
}
.card {
  display: flex !important;
  flex-direction: row;
  color: white !important;
  background-color: transparent !important;
  /* background-color: rgb(51, 53, 89) !important; */
  margin-top: 10px;
  width: 100%;
  border: none !important;
}
.navbar {
  position : fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 17vw;
  padding: 25px 10px;
  background-color: #151521;
  z-index: 100;
  
}
.managecount_title{
  font-size: 16px;
}
.artist_overview {
  display: inline-flex;
  margin-bottom: 5px;
  background-color: #736bdd3b;
  border-radius: 30px;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 5px;
  width: 100%;
}
#art_pfp_name{
  display: flex;
  flex-direction: column;
}
#art_overview_title {
  font-size: 100%;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 700;
}
#art_overview_body {
  margin-bottom: 2px;
  font-size: 80%;

}
#art_overview_pfp {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
#selart_title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
#new_artist_input {
  width: 100%;
  height: 26px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #9792ff;
}
#art_delete_button{
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  font-size: 13px;
  align-items: center;
}
.managecount_h1 {
  font-size: 28px;
  font-weight: 700;
}
/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.hvr-pulse-always {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
/* }
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { */
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.strivers_lock {
  margin-left: 20%;
}

.nav_logo_on {
  color: #5d61ba !important;
  font-weight: bold !important;
}
.striver_nav_logo {
  color: #FFFFFF;
}
.artists_nav_logo {
  color: #FFFFFF;
}
.network_nav_logo {
  color: #FFFFFF;
}
.home_nav_logo {
  color: #FFFFFF;
}
._artist_bg {
  animation: pulseAnimation 3s infinite; /* Adjust the duration (3s) to control the speed of pulsation */
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;

}
.logo {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  align-items: center;
}
.expand_icon {
  font-size: 21px;
  padding: 10px;
  transition: transform 0.3s ease; 
}
.expand_icon:hover {
  transform: scale(0.6, 0.6);
}
.max_icon {
  font-size: 15px;
  transition: transform 0.3s ease; 
}
.max_icon:hover {
  transform: scale(1.7, 1.7);
}
.logo_2{
  background-color: transparent;
  align-items: center;
}
.logo_navbar {
  position : fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  display: none;
  background-color: #151521;

  z-index: 9999;

}
.login_header .logo_img {
  width: 15% !important;
  height: 15% !important;
  margin: 6px;
  margin-top: 0px !important;
}

.logo_img {
  width: 21% !important;
  height: 22% !important;
  margin: 4px;
}
.logo_img_2 {
  width: 69% !important;
  height: 69% !important;
  margin: 8px;
}
.tooltip-container {
  position: relative;
  display: inline-block;
  /* padding-bottom: 8px; */
}
.navbar_links i {
  padding-bottom: 30px !important;
}
.navbar_links i.max_icon {
  padding: 16px !important;
}

.tooltip {
  position: absolute;
  opacity: unset;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  top: -30px; /* Adjust the positioning as needed */
  left: 40px; /* Adjust the positioning as needed */
}

.tooltip-container:hover .tooltip {
  display: block;
}

.info_icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    /* border-radius: 20%; */
    /* background-color: lightgray; */
    text-align: center;
    cursor: pointer;
}
.info_container {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}

.info_container:hover > .info_content {
  display: block;
}
.ag-theme-alpine-dark {
  --ag-background-color:#16162b !important;
  --ag-header-background-color: #0d0d1b !important;
  --ag-border-color: transparent !important;
}
.balance_title{
  font-size: 1.8vw;
  font-weight: 700;
}
.info_content {
  z-index: 9999;
  width: 272px;
  position: absolute;
  opacity: unset;
  display: none;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  top: -30px; /* Adjust the positioning as needed */
  left: 40px; /* Adjust the positioning as needed */
}
.info_content.right{
  top: -30px !important; /* Adjust the positioning as needed */
  left: 40px !important; /* Adjust the positioning as needed */
}
.info_content.bottom{
  top: 30px !important; /* Adjust the positioning as needed */
  left: -120px !important; /* Adjust the positioning as needed */
}
.info_content.top{
  top: -56px !important; /* Adjust the positioning as needed */
  left: -140px !important; /* Adjust the positioning as needed */
}
.title_subrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#nav_selection {
  display: none;
}
.navbar_links {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* margin-top: -15vh; */
}
.navbar_logout {
  display: flex;
  flex-direction: column;

  background-color: white;
  border-radius: 10px;

  color: rgb(255, 58, 58);

}

#loading-0{
  background-color: transparent !important;
}
#loading-1{
  background-color: transparent !important;
}
#loading-2{
  background-color: transparent !important;
}

#single_striver_nav_link {
  background-color: transparent !important;
}

.active {
  color: #7076f0 !important;
  background-color: #FFF !important;
  pointer-events: none !important;
  font-weight: 800;
}
.modebar-btn.active {
  background-color: #4b00ff !important;
}
.navbar_links .not-active:hover {
  /* color: rgba(255, 255, 255, 0.6); Reduced opacity white color on hover */
  background-color: hsla(0, 0%, 100%, 0.302) !important; /* Keep the background transparent */
  font-weight: 700;
}

/* .navbar_links:hover .hvr-float {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
} */

.not-active {
  color: #FFF !important;
  background-color: transparent !important;
  transition: background-color 0.3s ease; 
  /* background-color: #7076f0 !important; */
}

.inactive_2 {
  color: #ffffff50;
}

.nav-pills {
  /* margin-left: -1vw; */
  margin-top: 10%;
}
.nav-pills .nav-link.not-active {
  color: #7076f0 !important;
  background-color: #FFF !important;
}
.nav-pills .nav-link.active {
  color: #fff !important;
  background-color: #7076f0 !important;
}
.nav-footer {
  margin-left: 2vw;
  width: 100%;
  height: 20%;
  margin: auto;
}

.reload_buttons {
  flex: 1 1 auto;
}

#c-opps {
  display: flex;
  flex-direction: row;
  /* background-color: green; */
  margin-left: -2vw;
  gap: 10px;
}

#reset_button {
  flex-grow: 1;
  /* background-color: #323559; */
  /* border-color: #7076f0; */
  /* text-align: center;  */
}

/* logout button */
#log-out-text { 
  font-weight: bold;
  color: red;
  background-color: rgba(255, 0, 0, 0.15);
  border-radius: 10px;
  border:0.5px solid red;
}
  /* #cache_options { 
  background-color: #5d61ba;
  margin-top: 25vh;
  }
  #reset_button {
      width: 6.5rem !important;
      background-color: #323559;
      margin-left: 5px;
      border: none !important;
      border-color: transparent !important;

  }
  #refresh_button {
      width: 6.5rem !important;
      background-color: #323559;
      border: none !important;
      border-color: transparent !important;
  } */


.popover_none{
    display: none !important;
}

/*.data_specs {
    background-color: #FFF;
    border-radius: 16px;
} */
#inline-time-options {
  display: flex;
}
.data-select-container {
  min-width: 34%;
  width: 94%;
  margin-left: 70px;
  /* margin-left: 6vw; */
  background-color: #ffffff2b;
  border-radius: 8px;
  z-index: 99;
  padding: 10px 25px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  position: fixed;
  display: flex !important;
  flex-direction: row;
}

.data_graph_content{
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  width: 100vw !important;
  margin-left: 6vw !important;
}
.data_graph_content .data-select-container {
  width: 81%;
  margin-left: 11vw;
}
.big_data_graph_content{
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  width: 100vw !important;
  /* margin-left: 2% !important; */
}
.title{
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 24px;
  margin-bottom: 0;
  align-items: start;
  /* font-family: "San Francisco", "Helvetica", "Arial"; */
}
.title2 {
  font-size: 11px;
  font-weight: 200 !important;
}
.header-description {
  color: #FFF;
  margin: 4px auto;
  text-align: center;
  max-width: 384px;
}
.data-select-description {
  color: #FFFFFF; 
}
.data-input{
  /* width: 100%; */
  display: flex;
  text-align: center;
  justify-content: center;
  /* padding-bottom: 2px; */
}
.loading-dataselcontainer{
  display: flex !important;
  align-items: center;
}
.loading-data-input{
  display: flex;
  align-items: center;
}

/* .data-input > * {
  padding-left: 10px;
  padding-right: 10px;
} */
/* .data-input #artist-uid-input {

} */
#artist-uid-input input {
  color: white;
}
#yaxis-column {
  margin-left: 5px;
}
.data-select{
  /* flex: 10 0 55%; */
  display: inline-flex;
  min-width: 120px;
  /* margin-left: 10%;
  width: 50%; */
}
.uid-input {
  /* display: block !important; */
  display: inline-flex;
  min-width: 300px;
  /* float: left; */
}
.artist-uid-input {
  /* display: block !important; */
  display: inline-flex;
  min-width: 285px;
  /* float: left; */
}

.x_freq {
  /* display: block !important; */
  display: inline-flex;
  min-width: 150px;
  /* float: left; */
}

.map_types {
  /* display: block !important; */
  display: inline-flex;
  min-width: 150px !important;
  /* float: left; */  
}
#map_types {
  /* display: block !important; */
  display: inline-flex;
  min-width: 150px;
  /* float: left; */  
}
.dtable-container {
  margin: auto;
  max-width: 69%; 
  margin-left: 6vw;
}
.totals {
  justify-content: center;
  margin: 1em;
  color: #7c82ff;
  background-color: #ffffff;
  border-radius: 20px;
  height: 17%;
  min-height: 50px;
  width: 60%;
  position: inherit;
  bottom: 0;
  z-index: 999;
/* NONE TO REMOVE V0 WHITE STAT BLOCK  */
  display: none !important; 
}
.overall-metrics {
  /* width: 50%; */
  min-width: 500px !important;
}

.date_picker{
  display: none !important;
}
#date-picker-div {
  width: 300px;
}
#date_specs{
    /* display: flex !important; */
    /* flex-direction: row; */
}
#period_tabs .tab {
  width: 42px !important;
  padding: 9px 6px !important;
  font-size: 15px !important;  
  background: transparent;
  color: white;
}
.tabs .tab {
  width: 80px !important;
  padding: 9px 6px !important;
  font-size: 15px !important;  
  background: transparent;
}
.time-cardbody {
  width: 30vw;
  padding: 0px !important;
  color: #567bff, #9fa4f9, #2445ff, #583eff
}

.tabs {
  color: black !important;

  text-align: center;
  justify-content: center;

  /* display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important; */
  display: flex !important;
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
}
#period_tabs {
  color: black !important;

  text-align: center;
  justify-content: center;

  /* display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important; */
  display: flex !important;
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
}
.pfp{
  width: 56%;
  border-radius: 50%;
}
#tutorial-tabs {
  align-items: center;
  justify-content: center;
}
.tutorial-header {
  font-size: 18px;
  font-weight: 800;
}

.single-tabs {
background-color: red;
}
.tab--selected {
  color: #FFFFFF !important;
  background-color: #4b50d0 !important;
}
.modal_container {
  width: 50vw;
  background-color: rgb(9, 9, 9);
  display: flex;
  justify-content: center;
}
/*graph collection group 1*/
.temporal_geo {
  width: 88%;
  display: inline-flex;
  flex-direction: row;
  /* justify-content: space-between; */
  gap: 10px;
  /* margin: auto; */;
  overflow: auto;
  /* background-color: red; */
  margin-left: 11vw;
  margin-top: 15.5vh;
}
.big_data_graph_content .temporal_geo {
  width: 90% !important;
  margin-left: 4vw;

}

.temporal_geo>div {
  flex: 1;
}

/*left side - note, make super flex div to fit all card content into*/
#graph-left-col {
  background-color: #1e1e3c85;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 5px;
  border-radius: 10px;
  overflow: auto;
  flex: 1;
}
#graph_right_col {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
  gap: 5px;
  overflow: auto;
  background-color: #1e1e3c85;

}
.graph_right_col{
  display: flex;
  flex-direction: column !important;
}
.treemap1 {
  overflow: auto;
  flex: 1;
  /* border:3px solid black; */
  /*height: 50%;*/
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.info-cluster {
  display: flex;
  flex-direction: row !important;
}
.info-container-1 {
  background-color: #151521;
  /* width: 100%;
  height: 47%; */
  /* border: 3px solid black; */
  overflow: auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  flex: 1;
}
.info-container-2 {
  background-color: #151521;
  /* width: 100%;
  height: 47%; */
  /* border: 3px solid black; */
  overflow: auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  flex: 1;
  height: auto;
}

.hidden {
  display: none !important;
 /* Fade out */
  /* height: 0 !important;
  width: 0 !important;
  opacity: 0;
    visibility: hidden;  */
}

.sms-output {
  /* max-width: 300px; */
  display: flex;
  flex-direction: row;
}

/* ?????????? */
.graph_titles h3{ 
  font-size: 20px;
  font-weight: 800;
}
.camp_growth_title {
  margin-bottom: 10px;
}
.camp_growth_title h3{
  font-size: 20px;
  font-weight: 800;
  margin-top: 10px;

}

.camp_comp_title h3{
  font-size: 20px;
  font-weight: 800;
  margin-top: 10px;

}
.geo_growth_title {
  margin-bottom: 10px;
}
.geo_growth_title h3{
  font-size: 20px;
  font-weight: 800;
  margin-top: 10px;

}

.spot_growth_title h3{
  font-size: 20px;
  font-weight: 800;
  margin-top: 110px;
}

.config_geo_title h3{
  font-size: 20px;
  font-weight: 800;
}

.fan_growth_title h3{
  font-size: 20px;
  font-weight: 800;
}

.spot_pop_title h3{
  font-size: 20px;
  font-weight: 800;
}

.listener_title h3{
  font-size: 20px;
  font-weight: 800;
}


.camp_growth_title span.campain_growth_sub{
  font-size: 14px;
  font-weight: 500;
}

.alert_popup {
  /* display: 'none'; */
  background-color: 'white';
  padding: '20px';
  border-radius: 10px;
  box-shadow: '0 4px 8px rgba(0, 0, 0, 0.2)';
  max-width: '600px';
  margin: '0 auto';
}
/*right side*/
.treemap2 {
  /* float: right; */
  /* height: 50%; */
  width: 100%;
  /* border:3px solid black; */
  border-radius: 8px;
  overflow: auto;
  /* flex: 1; */
}
.treemap4 {
  /* float: right; */
  /* height: 50%; */
  width: 100%;
  /* border:3px solid black; */
  border-radius: 8px;
  overflow: auto;
  /* flex: 1; */
}
  /*bottom graph area*/
.secondary-graph-container{
  display: flex;
  flex-direction: row;
  gap: 10px;
  /* height: calc(85vh - 71px); */
  flex-wrap: wrap;
  border-radius: 8px;
  overflow: auto;
  margin-left: 5vw;
  min-width: 90%;
  background-color: #1e1e3c85; /* USED TO BE 11111e */
  padding: 10px;
}
.data_graph_content .secondary-graph-container{
  margin-left: 6vw;
  min-width: 80%;
}
.secondary-graph {
  flex: 1;
}
.width_slider {
  display: none;
}
.login_box {
  display: flex;
  background-color: #07070d6b;
  border-radius: 20px;
  width: 50%;
  align-items: center;
  flex-direction: column;
  margin-left: 25%;
  margin-top: 10%;
}

.ocean {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;

}

.wave {
  background: url(https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave2 {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;

  background: url(https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg) repeat-x;
  position: absolute;

  width: 6400px;
  height: 198px;

  transform: translate3d(0, 0, 0);
}

.login_screen {
  /* background: radial-gradient(ellipse at center, #b6b9ee 0%, #7c82ff 35%, #5d61ba 100%); */
  background: radial-gradient(ellipse at center, #696969 0%, #515151 35%, #000000 100%);
  overflow: hidden;
}
@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
@keyframes swell {
  0%,
  100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}

.endWave{
  display:none;
}

.dont_show {
display: none !important;
}
.row-colleciton {
  background-color: #1e1e3c85;
}
/* #single_striver_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle !important;
    border-radius: 33px !important;
} */
._nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  vertical-align: middle !important;
  border-radius: 33px !important;
}
#monitor_datatable {
  color: black !important;
  display: none !important;
}
#update-submit-toast {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}

#period-toast {
    margin-top: 2vh !important;
    margin-bottom: 2vh !important;
    margin-left: 20vw !important;
}
#store-toast {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 20vw;
    z-index: 99999;

}
#test-toast {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
}
#cancel-submit-toast-div {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}
#success-submit-toast {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}
#submit-toast-div {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}
#login-toast {
  margin-top: 1vh;
  margin-bottom: 2vh;
  /* margin-left: 20vw; */
  z-index: 99999;
}
#login-toast-div {
  margin-top: 1vh;
  margin-bottom: 2vh;
  left: 0;
  margin-left: 10vw;
  z-index: 99999;
  position: fixed;
}
#logout-toast {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}
#logout-toast-div {
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}
#taken-toast {
  left: 0;
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: 20vw;
  z-index: 99999;
  position: fixed;
}

/*login css*/
.login_wrapper {
  font-family:  SF Pro, -apple-system, system-ui, BlinkMacSystemFont, Helvetica,"Roboto", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 420px !important; */
  width: 100% !important;
  /* height: 560px !important; */
  height: 100% !important;

  padding-top: 10px;
  margin-top: 24%;
}
.login-pg {
  position: relative;
  z-index: 1;
  background: #12122a;
  max-width: 400px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 22px;
}
.login-pg input {
  /*font-family: "Roboto", sans-serif;*/
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
}
.login-pg button {
  /*font-family: "Roboto", sans-serif;*/
  text-transform: uppercase;
  outline: 0;
  background: #292c58;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
}
.login-pg button:hover,.form button:active,.form button:focus {
  background: #7076f0;
}
.login-pg .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.login-pg .message a {
  color: #7076f0;
  text-decoration: none;
}
.login-pg .register-form {
  display: none;
}
.login-pg {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.login-pg:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.login-pg .info {
  margin: 50px auto;
  text-align: center;
}
.login-pg .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.login-pg .info span {
  color: red;
  font-size: 12px;
}
.login-pg .info span a {
  color: #000000;
  text-decoration: none;
}
.login-pg .info span .fa {
  color: #EF3B3A;
}

.stat-card {
  /* background-color: #7c82ff; */
  /* width: 69%; */
  border-radius: 110px;
  margin: 4px;
}
.stat-card-body {
  background-color: #1e1e3c85;
  border: 2px solid #7c82ff;
  font-size: 12px;
  border-radius: 21px;
  font-weight: 900;
  overflow: hidden;
}

.card-title {
  margin-bottom: 0px;
}
#sub-card {
  width: 50%;
  float: left;
  height: 100%;
  background-color: blue;
  border-radius: 10px;
}

.stat-str {
  color: red;
  display: none;
}

.google-button-container {
  margin: auto;
  font-size: 12px;
  padding: 5px;
  color: white;
  border-radius: 7px;
  background-color: #535374;
  font-family: SF Pro !important;
  font-weight: 600;

}

.card-value-stat {
  overflow: hidden;
  font-size: 24px;
  font-weight: 800;
  white-space: nowrap;
  margin-top: 4px;
}
.submit_campaign_button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vw;
  font-weight: 800;
  color: white;
  border-radius: 12px;
  background-color: rgb(120, 120, 255);
  margin-top: 20px;
  width: 102%;
  padding: 4px;
}
.update_campaign_button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  font-weight: 800;
  color: white;
  border-radius: 12px;
  background-color: rgb(120, 120, 255);
  margin-top: 10px;
  width: 104%;
  padding: 4px;
}
#cancel_campaign {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: rgb(251, 29, 255);
  border-radius: 12px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  margin-bottom: 5px;
  width: 102%;
  padding: 4px;
  border: 2px solid #d0c6fa;
}
.cancel_campaign_button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4vw;
  font-weight: 800;
  color: rgb(251, 29, 255);
  border-radius: 12px;
  background-color: rgb(255, 255, 255);
  width: 102%;
  padding: 4px;
  border: 2px solid #d0c6fa;
}
#pay_est {
  margin-bottom: 5px;
  width: 100%;
}

/* MOBILE CSS */
@media only screen and (max-width: 850px) {
  .data-select-container {
    min-width: 88% !important;
    margin-left: 10vw;
  }
  .data-select{
      /* flex: 10 0 55%; */
      max-width: 200px !important;
      /* margin-left: 10%;
      width: 50%; */
  }
  .uid-input {
      /* display: block !important; */
      display: inline-flex;
      max-width: 300px;
      /* float: left; */
  }
  .artist-uid-input {
      /* display: block !important; */
      display: inline-flex;
      max-width: 300px;
      /* float: left; */
  }
  .spotify_tracks {
    flex-direction: column !important;
  }
  .x_freq {
      /* display: block !important; */
      display: inline-flex;
      max-width: 150px;
      /* float: left; */
  }
  .map_types {
      /* display: block !important; */
      display: inline-flex;
      max-width: 160px;
      /* float: left; */  
  }

  .temporal_geo {
      width: 90% !important;
      display: flex;
      flex-direction: column !important;
  }
  /* .treemap1 {
      width: 40vw !important;
  }
  .treemap2 {
      width: 40vw !important;
  } */
  .data_graph_content{
      width: 34% !important;
      margin-left: 42% !important;
  }
  .big_data_graph_content{
      /* width: 100% !important; */
      margin-left: 4% !important;
  }
  #track_count {
    font-size: 16px;
  }
  .track_select_div{
    margin-top: 22vh !important;
    width: 104%;
  }
  .track_search_dropdown{
    width: 100%;
  }
  .track_search{
    width: 96% !important;
    margin-left: 6px;
  }
  .step1_title{
    font-size: 30px !important;
  }
  .slider_table{
    width: 102% !important;
  }
  .pay_row{
    width: 100% !important;
    margin: 5px !important;
  }
  .strivers_lock{
    margin-left: 8% !important;
  }
  .title {
    font-size: 20px !important;
  }
  .navbar{
    width: 36vw !important;
    padding: 1vh 1vw !important;
  }
  .expand_icon{
    margin-left: -10vw;
    margin-bottom: -4vh;
  }
}

/* CSS for the user profile and dropdown menu */
.profile-container {
  display: flex;
  align-items: center;
}

.profile-picture {
  width: 50px; /* Adjust the width as needed */
  height: 50px; /* Adjust the height as needed */
  border-radius: 50%; /* Creates a circular profile picture */
  margin-right: 10px; /* Spacing between the picture and artist name */
}

.artist-name {
  margin: 0;
  min-width: 72%;
}
.artist-name-dropdown label{
  position: inherit;
  color: #fff;
  padding: 2px;
}
.artist_list {
  max-height: 120px;
  overflow: auto;
  border-radius: 18px;
  background-color: #7d6b9d5c;
}
.artist_list label{
  position: inherit;
  color: #fff;
}
.artist-name-dropdown {
  max-height: 120px;
  overflow: auto;
  background-color: #ffffff30;
  border-radius: 18px;
  padding: 6px;
}
.profile-dropdown {
  position: relative;
  margin-left: 10px;
}

.profile-dropdown .dropdown-toggle::after {
  font-size: 22px;
  color: rgb(255, 255, 255, 1);
  font-family: "Font Awesome 5 Free";
  margin-left: 2px; /* Spacing between artist name and chevron icon */
}

.profile-dropdown .dropdown-toggle:hover {
  color: rgb(255, 255, 255, 0.5);
}

.dropdown-toggle.btn {
  background-color: transparent !important;
}

/* .profile-dropdown.dropup button {
  background-color: transparent !important;
} */

.campain_growth_sub {
  font-size: 14px !important;
}
.geo_growth_sub {
  font-size: 14px !important;
}

.cities-dropdown {
  flex-wrap: wrap;
  max-width: 700px;
  display: flex;
  overflow-y: scroll;
  max-height: 82px;
}

.cities-dropdown label {
  /* flex-basis: 24%; */
  margin-right: 4px;
}

.countries-dropdown {
  flex-wrap: wrap;
  max-width: 700px;
  display: flex;
  justify-content: center;
}
.regions_title{
  display: flex;
  min-width: 20px;
}
.launch_title{
  font-size: 30px;
  font-weight: 800;
  display: flex;
  justify-content: center;
}
.edit_icon{
  margin-left: 10px;
}
#openEditButton {
  height: 36px;
  width: 74px;
  font-size: 14.5px;
  vertical-align: middle;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.edit_title{
  font-size: 32px;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit_title_options{
  margin-left: 10px;
  padding: 6px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.launch_title_options{
  /* margin-left: 10px; */
  padding: 6px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.launch_subtitle{
  display: flex;
  font-size: 14.5px;
  min-width: 400px;
  justify-content: center;
}
.edit_subtitle{
  display: flex;
  font-size: 15px;
  min-width: 450px;
}
.launch_subtitle_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#geo_list {
  min-width: 135px;
} 
#collapse-geo-options hr {
  margin-top: 3px;
  margin-bottom: 3px;
}

.dash-default-spinner > div {
  background-color: #676dff !important;
  width: 1.5px !important;
  margin-right: 4px !important;
}
.dash-cube-side { 
  background-color: #676dff !important;
}
.dash-dot-spinner > div {
  background-color: #676dff !important;
}
.login_title {
  font-family:  SF Pro, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, "Roboto", Arial,sans-serif;
  color: #ffffff;
  margin-top: 36px;
}
.login_header {
  font-family:  SF Pro, -apple-system, system-ui, BlinkMacSystemFont, Helvetica,"Roboto", Arial, sans-serif;
  color: #ffffffb0;
  display: flex;
  top: 16px;
  position: absolute;
  left: 10px;
}

.login_header .title {
  font-size: 20px !important;
  letter-spacing: 0.5px !important;
}


@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.magic_card {

  animation: pulseAnimation 3s infinite;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;

  cursor: pointer;
}
.data-input.magic_card {
  width: auto !important;
  height: auto !important;
  background: #1d1d2e; /* 191c29 */
  /* min-width: 65vw; */
}

.magic_card::before {
  content: "";
  width: 104%;
  height: 104%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #897bd6, #362b71, #5041f3, #a496ff, #5b79ff 37%, #3a36ae, rgb(90, 51, 231));
    position: absolute;
    z-index: -1;
    top: -2%;
    left: -2%;
    animation: magin_spin 6.1s linear infinite;
}
.loginagain_title_options.magic_card::before {
  width: 104% !important;
  height: 106% !important;
  top: -2% !important;
  left: -2% !important;
}
.data-input.magic_card::before {
  height: 112% !important;
  width: 102% !important;
  top: -4% !important;
  left: -1% !important;
}

.magic_card::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(0);
  background-image: linear-gradient(
    var(--rotate)
    , #4b3fff, #4e65d8 43%, #5b2fd4, #4d6eff, #7954ff);
  opacity: 1;
  transition: opacity .5s;
  animation: magin_spin 2.5s linear infinite;
}

.signup_magic_card {
  
  animation: pulseAnimation 3s infinite;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;

  cursor: pointer;
}

.signup_magic_card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #897bd6, #362b71, #5041f3, #a496ff, #5b79ff 37%, #3a36ae, rgb(90, 51, 231));
    position: absolute;
    z-index: 0;
    top: -1%;
    left: -2%;
    animation: magin_spin 6.1s linear infinite;
}

.signup_magic_card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #4b3fff, #4e65d8 43%, #5b2fd4, #4d6eff, #7954ff);
  opacity: 1;
  transition: opacity .5s;
  animation: magin_spin 2.5s linear infinite;
}

@keyframes magin_spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

.signup_button{
  background-color: transparent !important;
  color: #938cff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.geo_col_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.collapsible_regions {
  display: flex;
  flex-direction: row;
  font-size: 13px;
}
.campaign_select{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.region_checklist{
  max-width: 31vw !important;
}
.track_title_num {
  display: flex;
}
#track_count {
  margin-left: 5px;
  font-weight: 800;
  min-width: 18%;
  border: 1px solid #e6ddff;
  border-radius: 6px;
  padding: 3px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cost_explain_title {
  display: flex;
}
.imp_slider {
  width: 92%;
  margin: 0 auto;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 40px !important;
}
#cpc_est {
  font-weight: 600;
}
.imp_select_title{
  display: flex;
  font-size: 1.9vw;
  font-weight: 800;
}
.creditCard {
  display: inline-block;
  width:   300px; /* Adjust as needed */
  height:   150px; /* Adjust as needed */
  background-color: #fff;
  border-radius:   15px;
  box-shadow:   0   4px   6px rgba(0,   0,   0,   0.1),   0   1px   3px rgba(0,   0,   0,   0.08);
  padding:   20px;
  margin:   10px;
  text-align: center;
  position: relative;
}

.card-brand {
  position: absolute;
  top:   10px;
  left:   10px;
  font-size:   14px;
  color: #999;
}

.card-number {
  font-size:   18px;
  color: #333;
  margin-top:   10px;
}

.pick_saved_card_button {
  background-color: #3a36ae;
  color: white;
  border: none;
  border-radius:   5px;
  padding:   10px   20px;
  cursor: pointer;
  font-size:   14px;
  margin-top:   10px;
}

.ag-cell.ag-cell-normal-height.ag-cell-value.ag-cell-focus.ag-cell-inline-editing{
  overflow: visible !important;
}

/* .rc-slider-tooltip {
  transform: translateX(-50%);
}

.rc-slider-ticks {
  position: relative;
  margin-top: 10px;
}

.rc-slider-tick {
  position: absolute;
  width: 1px;
  height: 8px;
  background-color: #888;
}


.rc-slider-mark-text {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
} */
.rc-slider-rail {
  height: 10px;
  background-color: #c0c3fd;
}
.rc-slider-track {
  height: 10px;
  background-color: #757cff;
}
.rc-slider-mark {
  font-size: 16px;
  font-weight: 600;
  height: 8px;
  }
.countries-dropdown label{
  position: relative !important;
  color: #fff !important;
}
.cities-dropdown label{
  position: relative !important;
  color: #fff !important;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
  border-radius: 50%; /* Make it round */
  border: 2px solid #aaa; /* Border color */
  outline: none; /* Remove outline */
  cursor: pointer; /* Show pointer cursor on hover */
}
/* Checked state style */
input[type="checkbox"]:checked {
  background-color: #567bff; /* Background color when checked */
  border-color: #567bff; /* Border color when checked */
}
/* Hover state style */
input[type="checkbox"]:hover {
  background-color: #a4b8ff; /* Background color on hover */
}
.impsel_info {
  display: flex;
}
#imp_val_txt {
  font-size: 42px;
  font-weight: 900;
  margin-left: 10px;
  margin-top: -10px;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 0px 4px;
  color: #fff;
  background-color: transparent;
  width: 32%;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}
.balance_title_info {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#forecast_nums {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 5px;
}
.card_title{
  font-size: 13px;
  margin-bottom: 4px;
}

.manage_artist_modal {
  margin-left: 12vw;
  margin-top: -64vh;
  /* margin-bottom: 50vh; */
  width: 250px;
  background-color: #000000e3;
  border-radius: 20px;
  padding: 15px;
  border: 2px solid #8389ff;
}
.modal-content {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  margin: 0px auto;
  background-color: #000000f0;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.modal-header {
  font-weight: 700;
  padding: 5px;
  color: white;
  font-size: 21px;
}
.modal-body {
  font-weight: 700;
  padding: 5px;
  color: white;
  font-size: 16px;
}
.artists_inline {
  margin-top: 15px;
}

#inline_text {
  font-size: 14px;
}
.inline_pay_div {
  margin-top: 10px;
  width: 105%;
}
#inline_pay_notice {
  font-size: 15px;
}

#payment_info_button {
  display: flex;
  gap: 5px;
}
.segment_container {
  display: flex;
}
.segment_container label {
  position: inherit;
}
#campaign-renew-segments {
  width: 100%;
}
.cancel_refund_div {
  display: flex;
  width: 100%;
  align-items: center;
}
.disabled-cell {
  pointer-events: none;
  opacity: 0.6;  /* Optional: to visually indicate that the cell is disabled */
}
.live_badge {
  width: 50px;
  background-color: #ff1741;
  color: #ffffff;
  font-size: 15px;
  height: 25px;
  border-radius: 10px;
  margin-left: 5px;
}
.completed_badge {
  width: 70px;
  background-color: #d417ff;
  color: #ffffff;
  font-size: 10.5px;
  height: 25px;
  border-radius: 9px;
  margin-left: 3px;
  padding-top: 3px;
}
.live_outline {
  border: 1px solid #ff167f !important;
  border-radius: 5px;
}
.padded_live {
  border: 1px solid #ff167f !important;
  border-radius: 5px;
  padding: 2px;
}
.artist_comms {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.artist_tables {
  width: 100%;
}
.artist_tables_div {
  display: flex;
}
.track-grid {
  height: 430px;
}
.to_message_div {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.send_refresh_buttons {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 5px;
}
#stripe-checkout-container {
  width: 100%;
  height: 500px;
}
.stripe-modal-body {
  width: 100%;
  min-height: 500px;
  padding: 0px !important;
}
.stripe-checkout-modal {
  height: 680px;
}
.stripe-checkout-modal {
  max-width: 80vw;
}
.stripe-checkout-modal .modal-header {
  width: 100%;
  border-bottom: none;
}
.stripe-checkout-modal .modal-content {
  max-width: 80vw;
  background-color: #000000b0;
  padding: 0px;
  border-radius: 20px;
}
#stripe-back-button{ 
  color: white;
  font-size: 30px;
  align-items: center;
  justify-content: center;
}
#close-stripe-modal-btn {
  background-color: white;
  color: #4b50e3 !important;
  font-weight: 800;
}
.js-plotly-plot .plotly .modebar-btn { 
  font-size: 22px !important;
}
.js-plotly-plot .plotly .modebar-btn svg {
  top: 0px !important;
  justify-content: center;
  align-items: center;
  /* display: flex; */
}
.live_campaigns_select { 
  min-width: 250px;
}
.savepayment-spinner {
  display: inline-block;
}
.custom-table-row {
  /* display: flex; */
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 2.25fr 5fr 1.75fr;
  align-items: center;
  background-color: #0000003d;
  border-radius: 10px;
  padding: 5px;
}
.row-track-img {
  border-radius: 10px;
  width: 54px;
}
.row-track-name {
  /* width: 18%; */
  /* width: 120px; */
  display: flex;
  text-align: start;
}
.row-artist-name {
  display: flex;
  text-align: start;
  font-size: 12px;
}
.genre-tags {
  /* width: 42%;  */
  /* width: 300px; */
  color: #3632b0;
  background-color : #f0f0f0;
  border: 1px solid #6b49ff;
  border-radius: 8px;
}
.impressions-input {
  align-items: center;
  justify-content: center;
  display: flex;
  margin: 0 auto;
}
.table-header {
  display: grid;
  grid-template-columns: 3.25fr 5fr 1.75fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0px;
  border-bottom: "1px solid #e1e1e1";
  font-weight: 600;
  background-color: "#f8f9fa";
}
.header_cell {
  background-color: #0000003d;
  border-radius: 10px;
}
.add_song_step {
  background-color: #0000003d;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 700;
}
.track_artist_name {
  flex-direction: column;
  align-items: start;
}
.summary {
  width: 88%;
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  /* margin: auto; */
  overflow: auto;
  /* background-color: red; */
  margin-left: 11vw;
  margin-top: 16.5vh;
  margin-bottom: -100px;
  background-color: #1e1e3cd4;
  border-radius: 10px;
  min-height: 25px;
  justify-content: center;
  /* position: fixed; */
}
.big_data_graph_content .summary {
  margin-left: 4vw;
}
.stat-card-title {
  font-weight: 800;
  color: #acbcca;
  min-width: 160px;

}
.shadow-stat {
  margin-top: 0px !important;
}
.shadow-stat .card-body {
  padding: 5px 5px !important;
}

/* #loading-3 {
  position: fixed !important;
  z-index: 99999 !important;
  width: 100%;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-3 {
  position: fixed !important;
  z-index: 99999 !important;
  background-color: #0000006b;
  width: 100%;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
} */

div#loading-3 .loading-3 {
  position: fixed !important;
  z-index: 99999 !important;
  background-color: #0000006b !important;
  width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  top: 0 !important;
  left: 0 !important;
}
.loading-3 {
  position: fixed !important;
  z-index: 99999 !important;
  background-color: #0000006b;
  width: 100%;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
} 

/* Active track portion */
.imp_slider .rc-slider-track {
  background-color: #757cff;
  /* z-index: 1; */
}

/* Disabled track portion */
.imp_slider .rc-slider-rail {
  /* background-color: #dedede; */
}

/* Lock icons for disabled marks */
.imp_slider .rc-slider-mark-text[data-disabled="true"] {
  position: relative;
  /* color: #d3d3d3; */
}

.imp_slider .rc-slider-mark-text[data-disabled="true"]::after {
  content: "🔒";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
}

/* Handle styling */
.imp_slider .rc-slider-handle {
  /* border: 2px solid #1f77b4; */
  z-index: 2;
}

/* Disable clicking on disabled portion */
.imp_slider .rc-slider-mark-text[data-disabled="true"] {
  pointer-events: none;
}

/* Visual indicator for max value */
.imp_slider .rc-slider-mark-text[data-max="true"] {
  font-weight: bold;
  /* color: #1f77b4 !important; */
}