/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/user-dashboard-pro.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.better-payment .w-325 {
  flex-basis: 325px;
}
.better-payment .w-214 {
  flex-basis: 214px;
}
.better-payment .w-130 {
  flex-basis: 130px;
}
.better-payment .bp-chart_header .name h3 {
  color: #2a3256;
  font-size: 20px;
  font-weight: 600;
}
.better-payment .bp-analytics_box {
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 20px 24px;
}
.better-payment .bp-chart_header {
  border-bottom: 1px solid #eaecf0;
  padding-top: 8px;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.better-payment .bp-subscription_box {
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 0 16px;
}
.better-payment .bp-subscription_box-th {
  border-bottom: 1px solid #eaecf0;
  padding: 16px 0;
  margin-bottom: 20px;
}
.better-payment .bp-subscription_th {
  padding: 12px;
  background: #fafafc;
  margin-bottom: 6px;
}
.better-payment .bp-subscription_title {
  color: #2a3256;
  font-size: 16px;
  font-weight: 600;
}
.better-payment .bp-subscription_th h4 {
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.better-payment .bp-subscription_td {
  padding: 15px 0px 15px 12px;
}
.better-payment .bp-subscription_td .bp-plan_info h4 {
  color: #2a3256;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  margin-bottom: 5px;
}
.better-payment .bp-subscription_td .bp-plan_info p {
  color: #48506d;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
}
.better-payment .bp-subscription_td .starter-plan,
.better-payment .bp-subscription_td .due-plan {
  color: #797e90;
  font-size: 14px;
  font-weight: 400;
}
.better-payment .bp-subscription_td button {
  border-radius: 5px;
  font-size: 10px;
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid #9dd0ff;
  background: rgba(0, 133, 255, 0.1019607843);
  color: #0085ff;
}
.better-payment .bp-subscription_td .active {
  color: #00c679;
  background: rgba(0, 198, 123, 0.1019607843);
  border: 1px solid #a2eccf;
}
.better-payment .bp-subscription_td .inactive {
  border: 1px solid #ffeb91;
  color: #edaa00;
  background-color: rgba(255, 209, 0, 0.1019607843);
}
.better-payment .bp-subscription_product-price {
  display: flex;
  align-items: end;
  gap: 2px;
}
.better-payment .bp-subscription_product-td {
  border-bottom: 1px solid rgba(110, 88, 247, 0.1);
}
.better-payment .bp-subscription_product-td:last-child {
  border: none;
}
.better-payment .bp-subscription_product-price span:first-child {
  color: #2b2748;
  font-size: 18px;
  font-weight: 500;
}
.better-payment .bp-subscription_product-price span:last-child {
  color: #797e90;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10.2px;
  font-weight: 400;
}
.better-payment .bp-subscripthon_doughnut-box {
  margin-bottom: 48px;
  justify-content: center;
}
.better-payment .bp-total_title {
  color: #667085;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
}
.better-payment .bp-total_count {
  font-size: 56px;
  font-weight: 600;
  text-align: center;
  position: absolute;
}
.better-payment .better-payment-user-dashboard-container .dashboard-tab-wrapper .bp-total_count {
  margin-bottom: 35px;
}
.better-payment .bp-multi-graph {
  width: 400px;
  height: 200px;
  position: relative;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.better-payment .bp-multi-graph:before {
  content: "";
  width: 400px;
  height: 200px;
  border: 30px solid rgba(0, 0, 0, 0.15);
  border-bottom: none;
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  border-radius: 300px 300px 0 0;
  left: 0;
  top: 0;
}
.better-payment .bp-graph {
  width: 400px;
  height: 200px;
  border: 30px solid var(--fill);
  border-top: none;
  position: absolute;
  transform-origin: 50% 0%;
  border-radius: 0 0 300px 300px;
  left: 0;
  top: 100%;
  z-index: 5;
  animation: 1s fillGraphAnimation ease-in;
  transform: rotate(calc(1deg * var(--percentage) * 1.8));
  box-sizing: border-box;
  cursor: pointer;
}
.better-payment .bp-graph:after {
  content: attr(data-name) " " counter(varible) "%";
  counter-reset: varible var(--percentage);
  background: var(--fill);
  box-sizing: border-box;
  border-radius: 2px;
  color: #fff;
  font-weight: 200;
  font-size: 12px;
  height: 20px;
  padding: 3px 5px;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30px, 0);
  transition: 0.2s ease-in;
  transform-origin: 0 50%;
  opacity: 0;
}
@keyframes fillGraphAnimation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}
.better-payment .bp-doughnut_info {
  position: absolute;
  width: 132px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8509803922);
  border-radius: 2px;
  padding: 12px;
  left: 0;
  top: 0;
  z-index: 99;
  opacity: 0;
  cursor: pointer;
  transition: all 0.5s;
}
.better-payment .bp-multi-graph:hover .bp-doughnut_info {
  opacity: 1;
}
.better-payment .bp-doughnut_info .bp-doughnut_date {
  font-size: 9.28px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 7px;
}
.better-payment .bp-doughnut_info .bp-dougnut_color-info {
  color: #fff;
  font-size: 7.95px;
  font-weight: 500;
}
.better-payment .bp-doughnut_info .bp-dougnut_color-info div {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background-color: #fff;
  padding: 2px;
  margin: 5px 5px 5px 0;
}
.better-payment .bp-doughnut_info div .color-B {
  background-color: #8673ff;
}
.better-payment .bp-doughnut_info div .color-Y {
  background-color: #ffcf66;
}
.better-payment .bp-doughnut_info div .color-R {
  background-color: #ff5060;
}
.better-payment .border-bottom_active {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.better-payment .min-w_600 {
  min-width: 580px !important;
}
.better-payment .email-recipient-field {
  margin-bottom: 10px;
}
.better-payment .email-recipient-field-note {
  color: #666;
}
@media only screen and (max-width: 1200px) {
  .better-payment .bp-subscription_box {
    margin-bottom: 24px;
  }
  .better-payment .bp-analytics_box {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1024px) {
  .better-payment .bp-chart_header .name h3 {
    font-size: 16px;
  }
}
@media only screen and (max-width: 800px) {
  .better-payment .bp-multi-graph {
    width: 200px !important;
    height: 100px !important;
  }
  .better-payment .bp-multi-graph:before {
    width: 200px !important;
    height: 100px !important;
  }
  .better-payment .bp-graph {
    width: 200px !important;
    height: 100px !important;
  }
  .better-payment .better-payment-user-dashboard-container .dashboard-tab-wrapper .bp-total_count {
    margin-bottom: 20px;
  }
  .better-payment .bp-total_count {
    font-size: 28px !important;
  }
  .better-payment .bp-total_title {
    font-size: 10px !important;
  }
}