/*  */
.fs-xs {
  font-size: 12px;

}

.fs-sm {
  font-size: 14px;
}



/*  */
----------------------------

/* login css */
------------------------------------ .form-control {
  border-radius: 0;
  border-radius: 0 0.375rem 0.375rem 0;
}

.form-signin {
  max-width: 430px;
  padding: 15px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.copyright {
  text-align: center;
}

a {
  text-decoration: none;
}

.input-group-text {
  padding: 0.375rem 0.45rem;
}

/* ------------------------------------------------------------ */
/* -----------------------------------/* header css */

.header {
  width: 100%;
  height: 114px;
  background-color: #0b0d2a;
  overflow: hidden;
}

.header-img {
  width: 175px;
  height: 50px;
  margin-left: 60px;
}

.body {
  font-family: 'Inter', sans-serif;
}

.custom-nav-link {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  display: block;
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

.custom-nav-link:hover {
  background-color: #f8f9fa;
  color: #000 !important;
}

.custom-nav-link.active {
  background-color: #f8f9fa;
  color: #000 !important;
}

.contact-nav {
  list-style: none;
}

.contact-btn {
  color: white !important;
  background: none;
  border: none;
  outline: none;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.contact-btn:hover {
  color: #3CB6AB !important;
}

.modal-body {
  color: black !important;
}


/* --------------------------------------------- */
/*--------------------Dashboard--------------------------  */
.nav-link {
  padding: 5px 10px 5px 10px !important;
}

.dashboard-home {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px !important;

}

.sidebar-home .nav-link {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-home .nav-link:hover {
  background-color: #0b0d2a;
  color: #ffffff !important;
}

.sidebar-home {
  background-color: #f5f5f5;

}

.sidebar-text {
  font-size: 12px;
}

/* Programs Card */
.hover-shadow {
  transition: all 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}



/*  */

/*---------------------------program detail page-------------------------- */

.program-bg {
  /* background-color: #E5E7EB; */
  border: #2ec4b6 1px solid;
  padding-bottom: 60px;
  padding-top: 20px;
}

.white-bg {
  background-color: white;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}

.select2-selection--multiple {
  width: 100%;
  /* max-width: 500px; */
}

.select2-selection__choice {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;

}

.select2-search__field {
  min-width: 100px;
}

.margin-t {
  margin-top: 40px;
}

.box-shw {
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
}

.top-bar {
  padding: 24px;
}

.btn-black {
  background-color: black;
  border-radius: 5px;
}

.btn-white {
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1);

}

/* .preview-btns {
  margin-left: 11rem;
} */


/*---------------------------end program detail page-------------------------- */

/*  */
.hover-link {
  color: #1F2937;
}

.hover-link:hover {
  color: #1f2937e0;
}

/*  */


/* Buttons */
.button-default {
  color: #ffffff;
  padding: 0.3rem 2rem !important;
  background-color: #3CB7AC;
  /* border-color: #1F2937; */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0)
}

.button-default:hover {
  color: #ffffff;
  background-color: #1f2937e0;
  border-color: #1F2937;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0)
}


.button-hover:hover {
  background-color: #0b0d2a;
  color: white;
  border-color: #4B5563;
  box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125);

}

/* .button-scoreboard {
  color: #ffffff;
  padding: 0.3rem 2rem !important;
  background-color: #0B0D2A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0)
}

.button-scoreboard:hover {
  background-color: #0b0d2a;
  color: white;
  border-color: #4B5563;
  box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125);

} */

.button-scoreboard {
  color: #0b0d2a;
  padding: 0.3rem 2rem !important;
  background-color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0);

}

.button-scoreboard:hover {
  background-color: #0b0d2a;
  color: white;
  border-color: #4B5563;
  box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125);

}

/*  */
/* Add page Company management */
.content {
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
    0 3px 6px 0 rgba(0, 0, 0, 0.07);
  padding: 1rem 1rem 1rem 1rem;
  transition: all 0.3s;
}


/*  */

/* Table */
table tr {
  border-radius: 10px;

}

/*  */

/* Multistep process */
#multi-step-form-container {
  margin: 2rem auto;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.pl-0 {
  padding-left: 0;
}

.mt-3 {
  margin-top: 2rem;
}

.d-none {
  display: none;
}

.form-step {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 3rem;
}

.font-normal {
  font-weight: normal;
}

ul.form-stepper {
  counter-reset: section;
  /* margin-bottom: 3rem; */
}

.form-stepper-list {
  align-items: center;
  justify-content: center;
}

ul.form-stepper .form-stepper-circle {
  position: relative;
  cursor: pointer;
}

ul.form-stepper .form-stepper-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  cursor: pointer;
}

.form-stepper-horizontal {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

ul.form-stepper>li:not(:last-of-type) {
  margin-bottom: 0.625rem;
  -webkit-transition: margin-bottom 0.4s;
  -o-transition: margin-bottom 0.4s;
  transition: margin-bottom 0.4s;
}

.form-stepper-horizontal>li:not(:last-of-type) {
  margin-bottom: 0 !important;
}

.form-stepper-horizontal li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.form-stepper-horizontal li:after {
  background-color: #dee2e6;
}

.form-stepper-horizontal li.form-stepper-completed:after {
  background-color: #4da3ff;
}

/* .form-stepper-horizontal li:last-child {
  flex: unset;
} */

ul.form-stepper li a .form-stepper-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 0;
  line-height: 1.7rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 50%;
}

.form-stepper .form-stepper-active .form-stepper-circle {
  background-color: #0B0D2A !important;
  color: #fff;
}

.form-stepper .form-stepper-active .label {
  color: #0B0D2A !important;
}

.form-stepper .form-stepper-active .form-stepper-circle:hover {
  background-color: #0B0D2A !important;
  color: #fff !important;
}

.form-stepper .form-stepper-unfinished .form-stepper-circle {
  background-color: #3CB7AC;
  color: #fff !important;
}

.form-stepper .form-stepper-completed .form-stepper-circle {
  background-color: #3CB7AC !important;
  color: #fff;
}

.form-stepper .form-stepper-completed .label {
  color: #3CB7AC !important;
}

.form-stepper .form-stepper-completed .form-stepper-circle:hover {
  background-color: #3CB7AC !important;
  color: #fff !important;
}

.form-stepper .form-stepper-active .text-muted {
  color: #fff !important;
}

.form-stepper .form-stepper-completed .text-muted {
  color: #fff !important;
}

.form-stepper-circle span.text-muted {
  color: #fff !important;
}

.form-stepper .label {
  font-size: 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

.form-stepper a {
  cursor: default;
}

/*  */
/* Header Steps Styling */
.header-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 2rem;
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  gap: 1rem;
}

.header-step {
  text-align: center;
  min-width: 100px;
  max-width: 160px;
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-step .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3CB7AC;
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.header-step span {
  word-wrap: break-word;
  white-space: normal;
  font-size: 0.9rem;
}

.header-step span {
  font-size: 14px !important;
  font-weight: 500;
  color: #58677d;
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: #3CB7AC;
  /* Light green background for inactive steps */
  color: #e6f7f2;
  /* Dark green text */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.step-number.active {
  background-color: #0B0D2A;
  /* Active step background */
  color: white;
  /* Active step text color */
}

.header-step span {
  margin-top: 10px;
  font-size: 14px;
}





/*-------------------------------------- goal--------------------------------- */

.set-goals {
  padding: 20px;
  background-color: white;
  margin: 20px;
  border-radius: 10px;

}

.set-goals h2 {
  margin-bottom: 10px;
}

.goals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.goal-card input[type="checkbox"] {
  display: none;
}

.goal-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 150px;
  padding: 1rem;
  font-size: 18px;
  font-weight: 600;
  background-color: #fefefe;
  color: #0b0d2a;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.goal-card.checked {
  background-color: #0B0D2A;
  color: #fefefe;
  border-color: #28a745;
  transition: background-color 0.3s ease;
}

.goal-card:hover {
  background-color: #3CB7AC;
  color: #fefefe;
}

/* Scoreboard Card */
/* Scoreboard Card */
/* .scorecard-card input[type="checkbox"] {
  display: none;
} */

/* Hide the checkbox */
.scorecard-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 150px;
  padding: 5px;
  font-size: 18px;
  font-weight: 600;
  background-color: #fefefe;
  color: #0b0d2a;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.scorecard-card-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 150px;
  padding: 5px;
  font-size: 18px;
  font-weight: 600;
  background-color: #fefefe;
  color: #0b0d2a;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.scorecard-card-scoreboard.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.scorecard-card-scoreboard.dis {
  opacity: 0.5;
  pointer-events: none;
}





.scorecard-card-scoreboard-enterprise {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 150px;
  padding: 5px;
  font-size: 18px;
  font-weight: 600;
  background-color: #fefefe;
  color: #0b0d2a;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.scorecard-card-scoreboard-enterprise.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.scorecard-card-scoreboard-enterprise.dis {
  opacity: 0.5;
  pointer-events: none;
}

.scorecard-card.dis {
  opacity: 0.5;
  pointer-events: none;
}


/* Hide the checkbox itself */
.scorecard-card input[type="checkbox"] {
  display: none;
}

.scorecard-card-scoreboard-enterprise input[type="checkbox"] {
  display: none;
}

/* Style when checked */
.scorecard-card.checked {
  background-color: #0b0d2a;
  color: white;
  /* border: 2px solid #0b0d2a; */
}


/* Optional: style label nicely */
.scorecard-card label {
  display: block;
  cursor: pointer;
  font-weight: 500;
}

.scorecard-card {
  display: flex !important;
  gap: 20px !important;

}

.scorecard-card.checked {
  background-color: #0B0D2A !important;
  color: #fefefe;
  transition: background-color 0.3s ease;
}

.scorecard-card:hover {
  background-color: #3cb7ac;
  color: #fefefe;
}


/* Hide the checkbox itself */
.scorecard-card-scoreboard input[type="checkbox"] {
  display: none;
}

/* Style when checked */
.scorecard-card-scoreboard.checked {
  background-color: #0b0d2a;
  color: white;
  /* border: 2px solid #0b0d2a; */
}


/* Optional: style label nicely */
.scorecard-card-scoreboard label {
  display: block;
  cursor: pointer;
  font-weight: 500;
}

.scorecard-card-scoreboard {
  display: flex !important;
  gap: 20px !important;

}

.scorecard-card-scoreboard.checked {
  background-color: #0B0D2A !important;
  color: #fefefe;
  transition: background-color 0.3s ease;
}

.scorecard-card-scoreboard:hover {
  background-color: #3cb7ac;
  color: #fefefe;
}







scorecard-card-scoreboard-enterprise input[type="checkbox"] {
  display: none;
}

/* Style when checked */
.scorecard-card-scoreboard-enterprise.checked {
  background-color: #0b0d2a;
  color: white;
  /* border: 2px solid #0b0d2a; */
}


/* Optional: style label nicely */
.scorecard-card-scoreboard-enterprise label {
  display: block;
  cursor: pointer;
  font-weight: 500;
}

.scorecard-card-scoreboard-enterprise {
  display: flex !important;
  gap: 20px !important;

}

.scorecard-card-scoreboard-enterprise.checked {
  background-color: #0B0D2A !important;
  color: #fefefe;
  transition: background-color 0.3s ease;
}

.scorecard-card-scoreboard-enterprise:hover {
  background-color: #3cb7ac;
  color: #fefefe;
}

.change-percent {
  color: rgba(156, 132, 132, 0.6);
  background-color: rgba(173, 163, 163, 0.468);
  font-size: 12px !important;
  white-space: nowrap;
}

.change-percent-p {
  color: rgba(61, 159, 107, 0.6);
  background-color: rgba(93, 205, 146, 0.3);
  font-size: 12px !important;
  white-space: nowrap;
}

.change-percent-n {
  color: rgba(179, 45, 45, 0.6);
  background-color: rgba(218, 74, 89, 0.6);
  font-size: 12px !important;
  white-space: nowrap;
}

/*  */

/* .button {
  text-align: center;
  margin-top: 20px;
} */
.button button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button button:hover {
  background-color: #0056b3;
}

/*  */

/*Extras  */
.select2-selection--multiple {
  border-color: #dee2e6 !important;
}

/*  */





/* -------------------------------------------preview dashboard------------------------------------------------------ */
.tab {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

.active-tab {
  background-color: #0B0D2A !important;
  color: white !important;
}

.inactive-tab {
  background-color: white !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
}

.metrics {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

.metric-card {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 20px;
  text-align: center;
  height: 100%;
}


.change-percent-p {
  background-color: #28a745;
  color: white !important;
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
}

.change-percent-n {
  background-color: #e06975;
  color: white !important;
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
}

.change-percent {
  background-color: #6c757d;
  color: white !important;
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
}

/* -------------------------------------------end preview dashboard------------------------------------------------------ */

/* -------------------------------------------preview dashboard------------------------------------------------------ */


.active {
  background-color: #cce5ff;
}

.metrics {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

.metric-card {
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 1rem 3rem;
}

.growth {
  color: green;
  background-color: rgb(175, 232, 175);
  border-radius: 10px;
  height: 40px;
}


.tab {
  padding: 10px;
}

.tab.active {
  background-color: #007bff;
}




/* -------------------------------------------end preview dashboard------------------------------------------------------ */

/* Charts */
h2 {
  font-family: "Inter", sans-serif;
  margin-bottom: 10px;
}

.active-patients-bar {
  fill: #2ec4b6;
}

.active-patients-tooltip {
  position: absolute;
  pointer-events: none;
  background: white !important;
  border: 1px solid #ccc;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.active-patients-pill,
.promotions-pills {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  color: white;
  margin: 2px 4px 0 0;
}

.active-patients-pill-patients {
  background-color: #2ec4b6;
}

.adoption-rate-pill-adoption {
  background-color: #f17eb8;
}

.active-patients-bar {
  fill: #2ec4b6;
  rx: 6;
  ry: 6;
}

.adoption-rate-line {
  stroke: #f17eb8;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  fill: none;
}

.adoption-rate-dot {
  fill: #f17eb8;
  stroke: white;
  stroke-width: 1.5;
}

.active-patients-legend text {
  font-size: 13px;
}

.active-patients-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

/* ----Program Awareness & Promotions & Recall ---- */
#program-awareness-chart {
  font-family: "Inter", sans-serif;
  background: #fff;
  padding: 30px;
}

#program-awareness-chart h2 {
  margin-bottom: 10px;
}

.chart-pr-awareness-tooltip {
  position: absolute;
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  pointer-events: none;
  font-size: 13px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
}

.chart-pr-awareness-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  color: white;
  margin: 2px 4px 0 0;
}

.pill-program-promotion {
  background-color: #003f5c;
}

.pill-recall-rate {
  background-color: #ffcc00;
  color: black;
}

.chart-pr-awareness-bar {
  fill: #003f5c;
  rx: 6;
  ry: 6;
}

.chart-pr-awareness-line {
  stroke: #ffcc00;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  fill: none;
}

.chart-pr-awareness-dot {
  fill: #ffcc00;
  stroke: white;
  stroke-width: 1.5;
}

.chart-pr-awareness-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.chart-pr-awareness-legend text {
  font-size: 13px;
}

/* ---------------- */
/* New Patients & Adoption */
.new-patients-bar {
  fill: #20a4f3;
  /* Sky Blue */
  rx: 4;
}

.new-patients-line {
  fill: none;
  stroke: #ff69b4;
  /* Hot Pink */
  stroke-width: 3;
}

.new-patients-dot {
  fill: #ff69b4;
  stroke: white;
  stroke-width: 1.5;
}

.new-patients-tooltip {
  position: absolute;
  text-align: center;
  background: white;
  border-radius: 12px;
  pointer-events: none;
  padding: 12px 16px;
  /* Adjust this to control internal padding */
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
}

.new-patients-tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #333;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

.new-patients-pill {
  display: inline-block;
  background-color: #2ca02c !important;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
}

.new-patients-pill-count {
  background-color: #2ca02c;
  /* Green for Active HCPs */
}

.adoption-rate-pill {
  background-color: #ff69b4;
  /* Pink for Adoption Rate */
}

.new-patients-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  color: white;
  margin: 2px 4px 0 0;
}

.new-patients-pill-count {
  background-color: #20a4f3;
  /* Sky Blue */
}

.adoption-rate-pill {
  background-color: #ff69b4;
  /* Hot Pink */
}

.new-patients-grid-line {
  stroke: #e0e0e0;
  stroke-width: 1;
  stroke-dasharray: 4;
}

.new-patients-legend text {
  font-size: 13px;
  font-weight: 600;
  fill: #333;
  transform: translate(45px, 20px);
}

.new-patients-legend rect {
  transform: translate(0px, 0px);
}

/* ---------------- */

/* ----------hcp interaction---------- */
.hcp-interaction-tooltip {
  position: absolute;
  pointer-events: none;
  background: white !important;
  border: 1px solid #ccc;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.hcp-interaction-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  color: white;
  margin: 2px 4px 0 0;
}

.pill-phone {
  background-color: #2ec4b6;
}

.pill-sms {
  background-color: #ff7f0e;
}

.pill-email {
  background-color: #a8a8a8;
}

.pill-face_to_face {
  background-color: #f4c430;
}

.pill-total {
  background-color: #4682b4;
}

.line-phone {
  stroke: #2ec4b6;
  stroke-dasharray: 5 5;
}

.line-sms {
  stroke: #ff7f0e;
  stroke-dasharray: 5 5;
}

.line-email {
  stroke: #a8a8a8;
  stroke-dasharray: 5 5;
}

.line-face_to_face {
  stroke: #f4c430;
  stroke-dasharray: 5 5;
}

.line-total {
  stroke: #4682b4;
  stroke-dasharray: 5 5;
}

.hcp-interaction-dot {
  stroke: white;
  stroke-width: 1.5;
}

.hcp-interaction-legend text {
  font-size: 13px;
}

.hcp-interaction-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.hcp-interaction-hover-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

/* Ensure SVG responsiveness */
/* .card-body svg {
    width: 100% !important;
    max-width: 100%;
}
.card-body .d-flex {
    width: 100%;
} */


/* Patients Services by Type */
.tooltip-custom {
  position: absolute;
  background: white !important;
  border-radius: 12px;
  padding: 12px 16px;
  pointer-events: none;
  font-size: 13px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
}

.grid-line-custom {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.legend-custom text {
  font-size: 13px;
}

/* ------------- */

/* Active Patients */
.hcp-line {
  stroke: #2ec4b6;
  stroke-width: 2;
  fill: none;
}

.hcp-dot {
  fill: #2ec4b6;
  stroke: white;
  stroke-width: 1.5;
  cursor: pointer;
}

.hcp-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.hcp-legend text {
  font-size: 13px;
}

/* --------------- */

/* New HCPs */
.newhcp-line {
  stroke: #ff9f1c;
  stroke-width: 2;
  fill: none;
}

.newhcp-dot {
  fill: #ff9f1c;
  stroke: white;
  stroke-width: 1.5;
  cursor: pointer;
}

.newhcp-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.newhcp-legend text {
  font-size: 13px;
}

/* ------------ */

/* HCP interaction by type */
#hcpint-chart {
  display: block;
}

/* Tooltip */
.d3-tooltip {
  position: absolute;
  pointer-events: none;
  background: transparent;
  padding: 0;
  font-family: sans-serif;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.1s;
}

.d3-tooltip .month-header {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  text-align: center;
}

.d3-tooltip .value-badge {
  display: block;
  margin: 2px auto;
  padding: 4px 8px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  min-width: 40px;
  font-size: 11px;
}

/* Hover line */
.hover-line {
  stroke: #999;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

/* ----------------------- */

.psp-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 32px 24px 24px 24px;
  max-width: 600px;
  margin: 0 auto;
}

.psp-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 60px;
  margin-right: 20px;
  margin-top: 16px;
}

.psp-legend-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: end;
  gap: 8px;
  font-size: 16px;
}

.psp-legend-color {
  width: 35px;
  height: 20px;
  border-radius: 50px;
  display: inline-block;
}

.psp-legend-hcp {
  background: #20bfa9;
}

.psp-legend-patient {
  background: #ff914d;
}

.psp-chart-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: left;
}

.psp-radar-label {
  font-size: 14px;
  fill: #222;
  font-weight: 400;
}

.psp-radar-tick {
  font-size: 12px;
  fill: #000!important;
}

/* ---------------- */

/* PSP effectiveness old */

.psp2-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-right: 20px;
  margin-bottom: 60px;
  margin-top: 16px;
}

.psp2-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 16px;
}

.psp2-legend-color {
  width: 35px;
  height: 20px;
  border-radius: 50px;
  display: inline-block;
}

.psp2-legend-hcp {
  background: #1f77b4;
  /* blue */
}

.psp2-legend-patient {
  background: #fdd835;
  /* yellow */
}

.psp2-chart-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: left;
}

.psp2-radar-label {
  font-size: 14px;
  fill: #222;
  font-weight: 400;
}

.psp2-radar-tick {
  font-size: 12px;
  fill: #000!important;
}

/* --------------------- */

/* HCP Adoption */
.hcp-line {
  stroke: #ff5733;
  /* Replace with your desired color */
  stroke-width: 2px;
  /* Optional: Adjust the stroke width */
}


/* ------------------------------- */
/* -------------------------------------------------------------------------------------------------- */


/*HCP TABLE */

.hcp-summary-table thead th {
  background-color: #3cb7ac !important;
  color: #f6f6f6e7 !important;
  white-space: normal;
  word-break: break-word;
  text-align: left;
  vertical-align: middle;
  padding: 0.75rem;
}

.hcp-summary-table {
  table-layout: fixed;
  width: 100%;
}

/* -----------------------------------------------active hcps and adoption--------------------------------------------------- */
.chart-tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  /* Ensure tooltip is above other elements */
}

.chart-pill {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
}

.chart-pill-count {
  background: #2ca02c;
  /* Green for Active HCPs (bars) */
}

.adoption-rate-pill {
  background: #d62728;
  /* Red for Adoption (line/dots) */
}

.active-hcps-bar {
  fill: #2ca02c;
  /* Green for Active HCPs bars */
}

.active-hcps-line,
.active-hcps-dot {
  stroke: #d62728;
  /* Red for Adoption line */
  fill: #d62728;
  /* Red for Adoption dots */
}

.active-hcps-line {
  stroke-width: 2;
  fill: none;
}

.active-hcps-grid-line {
  stroke: #eee;
  stroke-dasharray: 2, 2;
}

/* -----------------------------------------------end active hcps and adoption--------------------------------------------------- */



/* -----------------------------------------------upload excel file--------------------------------------------------- */

.upload-area {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #fff;
}

.upload-area-hover {
  background-color: #e9f7f6;
  border-color: #00b3a4;
}

.upload-icon {
  font-size: 2rem;
  color: #333;
}

.sidebar {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.template-download {
  font-weight: 500;
  cursor: pointer;
}


/* -----------------------------------------tooltip----------------------------------------- */
#patient_interaction_chart {
  display: block;
  /* margin: 20px auto; */
}

.patient-interaction-tooltip {
  position: absolute;
  pointer-events: none;
  background: white !important;
  border: 1px solid #ccc;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.patient-interaction-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  color: white;
  margin: 2px 4px 0 0;
}

.pill-phone {
  background-color: #2ec4b6;
}

.pill-sms {
  background-color: #ff7f0e;
}

.pill-email {
  background-color: #a8a8a8;
}

.pill-face_to_face {
  background-color: #f4c430;
}

.pill-total {
  background-color: #4682b4;
}

.line-phone {
  stroke: #2ec4b6;
  stroke-dasharray: 5 5;
}

.line-sms {
  stroke: #ff7f0e;
  stroke-dasharray: 5 5;
}

.line-email {
  stroke: #a8a8a8;
  stroke-dasharray: 5 5;
}

.line-face_to_face {
  stroke: #f4c430;
  stroke-dasharray: 5 5;
}

.line-total {
  stroke: #4682b4;
  stroke-dasharray: 5 5;
}

.patient-interaction-dot {
  stroke: white;
  stroke-width: 1.5;
}

.patient-interaction-legend text {
  font-size: 13px;
}

.patient-interaction-grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  shape-rendering: crispEdges;
}

.patient-interaction-hover-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

/* Tooltip styling for smaller pill‐style bubbles */
.d3-tooltip {
  position: absolute;
  pointer-events: none;
  background: transparent;
  padding: 0;
  font-family: sans-serif;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.1s;
}

.d3-tooltip .month-header {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  text-align: center;
}

.d3-tooltip .value-badge {
  display: block;
  margin: 2px auto;
  padding: 4px 8px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  min-width: 40px;
  font-size: 11px;
}

/* Style for the hover line */
.hover-line {
  stroke: #999;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}



/* Tooltip pills */
.active-patients-tooltip {
  position: absolute;
  pointer-events: none;
  background: transparent;
  font-family: sans-serif;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.1s;
}

.active-patients-tooltip .pill {
  display: inline-block;
  margin: 2px 4px;
  padding: 4px 8px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.active-patients-tooltip .pill.patients {
  background: #2ec4b6;
}

.active-patients-tooltip .pill.adoption {
  background: #f17eb8;
}



/*--------------------------------------- Enterprise start----------------------------------------------- */

/* frequency count */
.start-100 {
  left: 96% !important;
}


/* enterprise chart */
.grid-line {
  stroke: #ccc;
  stroke-dasharray: 4 4;
}

/* Legend text */
.legend-text {
  text-anchor: middle;
  font-size: 12px;
}

/* Legend pill */
.legend-pill {
  rx: 6;
  ry: 6;
}

/* Tooltip pill (now vertical) */
.tooltip-pill {
  display: block;
  /* each pill on its own line */
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
  /* space between pills */
}

/* Tooltip container */
.program-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Vertical guide line */
.guide-line {
  stroke: #888;
  stroke-dasharray: 4 2;
}

/* hcp interaction */
#chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.axis line,
.axis path {
  stroke: #ccc;
}

/* .legend rect {
  stroke: #999;
  stroke-width: 1px;
} */

/* remove old div tooltip */
#tooltip {
  display: none;
}


/* tooltip of radar chart */

.program-tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  font-size: 12px;
  white-space: nowrap;
  /* Prevents text wrapping, keeping it horizontal */
}

.tooltip-pill {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 5px;
  /* Consistent with inline style for spacing */
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
}

/* patient interaction by type */
.tooltip-group {
  pointer-events: none;
}

.tooltip-line {
  stroke-width: 1px;
}

.tooltip-bubble rect {
  fill-opacity: 0.9;
}


/* active adoption rate  */

.program-tooltip .tooltip-pill {
  display: inline-block;
  /* let us size and round it */
  padding: 6px 14px;
  /* adjust for height & length */
  margin: 4px 0;
  /* spacing between pills */
  font-size: 11px;
  color: #fff;
  /* text in white */
  background-color: currentColor;
  /* you’re already setting this inline */
  border-radius: 999px;
  /* full pill shape */
  border: 2px solid rgba(255, 255, 255, 0.8);
  /* soft white stroke */
  box-sizing: border-box;
  /* include the border in the height */
}




.program-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Grid lines */
.grid-line {
  stroke: #e0e0e0;
  stroke-dasharray: 2 2;
}

/* Legend pill */
.chart-legend {
  font-size: 12px;
  cursor: default;
}

.chart-legend rect {
  rx: 10;
  ry: 10;
}

/* psp table */

.table-light {
  --bs-table-bg: #d9e6f2;
}

/* hcp-table */

.entr-table {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.entr-table thead th {
  background-color: #00b3a4;
  color: #e6e6e6;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.entr-table tbody td {
  color: #1b1b1b;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.entr-row-toggle {
  cursor: pointer;
  background: #f9f9f9;
}

.entr-row-toggle:hover {
  background: #e0f7f4;
}

.entr-row-content {
  display: none;
  background: #fff;
}

.entr-row-content td {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 8px;
  border-top: none;
  font-weight: 600;
  background: #f1f1f1;
}

/* Icon styling */
.entr-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  transition: transform 0.2s ease;
  margin-right: 6px;
  vertical-align: middle;
  color: #005a9e;
}

.entr-icon.open {
  transform: rotate(90deg);
}

.entr-table {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.entr-table thead th {
  background-color: #00b3a4;
  color: #e6e6e6;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.entr-table tbody td {
  color: #1b1b1b;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.entr-row-toggle {
  cursor: pointer;
  background: #f9f9f9;
}

.entr-row-toggle:hover {
  background: #e0f7f4;
}

.entr-row-content {
  display: none;
  background: #fff;
}

.entr-row-content td {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 8px;
  border-top: none;
  font-weight: 600;
  background: #f1f1f1;
}

/* Icon styling */
.entr-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  transition: transform 0.2s ease;
  margin-right: 6px;
  vertical-align: middle;
  color: #005a9e;
}

.entr-icon.open {
  transform: rotate(90deg);
}


/* pagination */

.simple-pagination {
  margin: 1em 0;
  text-align: center;
}

.simple-pagination .page-btn {
  margin: 0 .25em;
  padding: .4em .8em;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.simple-pagination .page-btn.active {
  background: #0B0D2A;
  color: #fff;
  border-color: #0B0D2A;
  border-color: #0B0D2A;
}

.active>.page-link,
.page-link.active {
  background-color: #0B0D2A !important;
  color: #fff !important;
  border-color: #0B0D2A !important;
}

/* scorecard color  */
.change-percent-p {
  color: green;
}

.change-percent-n {
  color: red;
}

.change-percent {
  color: gray;
}



/* Tooltip container */
.new-patients-tooltip {
  position: absolute;
  pointer-events: none;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #000;
  font-weight: 500;
  opacity: 0;
  z-index: 1000;
  text-align: left;
  max-width: 200px;
}

/* Pill style for number only */
.tooltip-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 13px;
  color: white;
  margin-top: 4px;
}


.active-tab {
  background-color: #007bff;
  color: white;
}

.card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.card-body {
  padding: 1rem;
  width: 100%;
}