:root {
  --borderRadius: 20px;
  --headingSize: 20px;
  --labelHeading: 16px;
  --userProfileFont: 9px;
  --buttonProfile: 10rem;
  --primaryColor:#8074fe !important;
}

.custom_bg {
  background-color: #000;
  overflow: hidden;
}
.custom_bg_profile{
  background-image: url("./../icons/Profile .jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  overflow: hidden;
}
.custom_row {
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.newtaskmodal{
  background-color: transparent !important;
  border-radius: 1rem !important;
  backdrop-filter: blur(20px);
  color: #fff;
}
.custom_card {
  border-radius: var(--borderRadius);
  height: auto;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
  background-color: transparent !important;
  min-height: 88vh;
  overflow: hidden;
}

label {
  color: #fff;
  font-weight: 600;
  font-size: var(--labelHeading);
  text-align: center !important;
}

.form-control {
  background-color: #606060 !important;
  border-radius: var(--borderRadius);
  text-align: center;
  color: #fff !important;
}
.form-control::placeholder {
  color: #fff;
  opacity: 1;
}
.form-group {
  text-align: center;
}

.btn-submit {
  border-radius: 11px;
  background-color: #8074fe;
  color: #fff;
  font-size: var(--headingSize);
  margin-top: 1rem;
  font-weight: bolder;
}

.profile_header {
  border-bottom: 1px solid #fff;
}
h5{
  font-size: smaller !important;
}

.para_username {
  /* font-size: 1.5rem; */
  font-weight: bolder;
}
.btn-new{
  background-color:var(--primaryColor);
  color: #fff;
}

.button_side {
  display: grid;
  justify-content: end;
  padding: 0;
}

.custom_width {
  width: 9rem;
  text-align: start;
  border: none;
  font-size: smaller;
  height: 3rem;
}

.dollar_ {
  text-align: start;
  font-weight: bolder;
}

swiper-container {
  padding: 0.5rem 0;
}

swiper-slide {
  margin-left: 0.5rem;
}

.active {
  background-color: #7329c9;
  border-radius: 50%;
  height: 14vh;
}

.active a {
  color: #fff;
}

.col_boder {
  border-bottom: 1px solid #fff;
}

.credit_score {
  color: #fff;
  font-size: smaller;
}

.profile_boder {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 0.5rem;
  cursor: pointer;
}
.text_balance{
  color: var(--primaryColor);
}
.bg-profit{
  background-color:var(--primaryColor);
  color:#fff;
}
.record {
  font-size: var(--headingSize);
  font-weight: bolder;
}

#chart-container svg {
  width: 100% !important;
}

.accordion {
  border-radius: 0 !important;
}

.accordion-item:first-of-type {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.accordion-item {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
  border-left: transparent !important;
  border-right: transparent !important;
}
.accordion-header {
  background: transparent !important;
}
.accordion-button {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
}
.accordion-button::after {
  background-image: url("../icons/acarrow.png") !important;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 999;
}

.main-content {
  width: 100%;
  /* margin-bottom: 5rem; */
  overflow-x: hidden;
  overflow-y: auto !important;
  height: 69vh;
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.main-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Internet Explorer */
.main-content {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.footer p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  font-weight: bold;
  margin-bottom: 0;
  cursor: pointer;
}

.footer p.activenav {
  color: #fff;
  background-color: var(--primaryColor);
}
.complete-badge{
  background-color: #03bd62 !important;
  border-radius: 23px !important;
}
.product-cards{
  border-radius: 25px;
}
.total-amount{
  font-size: 15px !important;
}
.total-amount_note{
  font-size: 0.7rem;
}
@media only screen and (max-width: 600px) {
  .custom_row {
    justify-content: start;
    align-items: start;
  }
 
  .custom_card {
    border-radius: 0;
    width: 100%;
    box-shadow: 0 !important;
  }
  .main-content {
    height: 31rem;
  }
  .main-content-profile {
    height: 373px;
  }
}