/* -- start scroll -- */

.single-page .scroll-status li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(var(--brand-white-15-color), var(--brand-white-15-color)),
    linear-gradient(var(--brand-black-color), var(--brand-black-color)); /* first bg is on top of this */
}

.single-page .scroll-status li a.active {
  background: linear-gradient(var(--brand-orange-15-color), var(--brand-orange-15-color)),
    linear-gradient(var(--brand-black-color), var(--brand-black-color)); /* first bg is on top of this */
}

.single-page .scroll-status li a.active i svg path {
  fill: var(--brand-orange-color) !important;
}

/* -- end scroll */

/* -- start -- */

.single-page .info-block .list .item::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 10px 0 0;
}

.single-page .info-block .list .item:nth-child(1)::before {
  /* background-color: rgba(210, 73, 131, 1); */
  background-color: #d24983;
}

.single-page .info-block .list .item:nth-child(2)::before {
  /* background-color: rgba(60, 180, 120, 1); */
  background-color: #3cb478;
}

.single-page .info-block .list .item:nth-child(3)::before {
  /* background-color: rgba(60, 180, 185, 1); */
  background-color: #3cb4b9;
}

.single-page .info-block .list .item:nth-child(4)::before {
  /* background-color: rgba(224, 89, 80, 1); */
  background-color: #e05950;
}

.single-page .info-block .list .item:nth-child(5)::before {
  /* background-color: rgba(137, 125, 253, .15); */
  background-color: #897dfd26;
}

/* -- end -- */

/* -- start -- */

.single-page .questions > li {
  padding-left: 20px !important;
}

.single-page .questions li .point {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
  position: absolute;
  top: 36px;
  left: 40px;
  */
  font-size: 0.9em;
}

.single-page .questions li .point .btn {
  color: #adb5bd;
  font-size: 24px;
}

/* -- end -- */

.microscopical-image {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.microscopical-image .bg {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
}

.microscopical-image .container {
  position: relative;
  margin: -100px auto 0;
}

.microscopical-image .zoom-box {
  display: flex;
  align-items: center;
  width: 268px;
  height: 70px;
  border-radius: var(--brand-radius-10);
  background-color: var(--brand-black-6-color);
  overflow: hidden;
}

.microscopical-image .zoom-box .zoom-title {
  width: 268px;
  padding: 11px 20px;
  color: var(--brand-white-color);
  font-weight: 600;
}

.microscopical-image .zoom-box .zoom-select {
  display: none;
  width: 132px;
  height: 70px;
  border: 0;
  padding: 0 0 0 20px;
  color: var(--brand-white-color);
  background-color: var(--brand-white-15-color);
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  font-weight: 600;
  appearance: none;
  outline: none;
}

.microscopical-image .zoom-box .zoom-select option {
  color: var(--brand-black-color);
}

@media screen and (min-width: 992px) {
  .microscopical-image {
    height: 500px;
  }

  .microscopical-image .zoom-box {
    width: 400px;
  }

  .microscopical-image .zoom-box .zoom-select {
    display: block;
  }
}

@media screen and (min-width: 1200px) {
  .microscopical-image {
    height: 600px;
  }
}

/* -- product-gallery start -- */
#product-gallery li .main-product-img {
  position: relative;
  width: 264px;
  height: 264px;
  margin: 0;
  border-radius: var(--brand-radius-10);
}

@media (min-width:992px){
  #product-gallery li .main-product-img{
    width: 100%;
    height: unset !important;
    position: sticky;
    left: 0;
    top: 20px;
  }
}
#product-gallery li .main-product-img img {
  width: 100%;
  height: 100%;
}


#product-gallery .small-gallery-image {
  width: 70px;
  height: 70px;
  margin: 0 10px 10px 0;
  border-radius: var(--brand-radius-10);
  overflow: hidden;
}

#product-gallery .gallery-image-counter, 
#product-gallery .gallery-image-add-or-edit
{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #222B34;
}

#product-gallery .gallery-image-counter img,
#product-gallery .gallery-image-add-or-edit img
{
  max-width: 28px;
  max-height: 28px;
}

#product-gallery .gallery-image-add-or-edit
{
  cursor: pointer;
}

#product-gallery .gallery-image-counter .gallery-image-counter--count {
  position: absolute;
  bottom: 0;
  right: 10px;
  font-family: Inter;
  font-weight: 600;
  font-size: 16px;
  color: var(--brand-orange-color);
}

#product-gallery .gallery-image-community {
  position: absolute;
  bottom: 0;
  right: 0;
}


.h-85 {
  height: 85% !important;
}

/* -- product-gallery end -- */

.main-image {
  width: 264px;
  height: 264px;
}

/* -- scrollsequence start -- */

@media (min-width: 992px) {
  .scrollsequence-wrap {
    margin: -290px 0 0 0 !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap {
    margin: 290px 0 0 0 !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky {
    position: relative !important;
    left: initial !important;
    top: 0 !important;
    height: 376px !important;
    border-radius: var(--brand-radius-10);
    overflow: hidden;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky.fixed {
    position: fixed !important;
    left: initial !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky.absolute {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-canvas {
    display: block !important;
    width: 100% !important;
    height: 376px !important;
    object-fit: contain !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-pages-wrap {
    height: 376px !important;
  }

  .scrollsequence-wrap
    #sticky-pin-wrap
    .scrollsequence-sticky
    .scrollsequence-pages-wrap
    .scrollsequence-page {
    height: 376px !important;
  }

  .main-image {
    width: 100%;
    height: 376px !important;
  }

  .scrollsequence-wrap .scrollsequence-spacer {
    height: 0 !important;
  }
}

@media (min-width: 1200px) {
  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky {
    height: 356px !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-canvas {
    height: 356px !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-pages-wrap {
    height: 356px !important;
  }

  .scrollsequence-wrap
    #sticky-pin-wrap
    .scrollsequence-sticky
    .scrollsequence-pages-wrap
    .scrollsequence-page,
  .main-image {
    height: 356px !important;
  }
}

@media screen and (min-width: 1400px) {
  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky {
    height: 416px !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-canvas {
    height: 416px !important;
  }

  .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky .scrollsequence-pages-wrap {
    height: 416px !important;
  }

  .scrollsequence-wrap
    #sticky-pin-wrap
    .scrollsequence-sticky
    .scrollsequence-pages-wrap
    .scrollsequence-page,
  .main-image {
    height: 416px !important;
  }

  .receipt-from-doctor h4 {
    font-size: 20px;
  }

  .receipt-from-doctor p {
    font-size: 16px;
  }
}

/* -- scrollsequence end -- */

/* -- social gallery start */

#social-gallery li {
  padding: calc(var(--bs-gutter-x) * 0.5);
}

@media (min-width: 768px) {
  .range-slider .slider {
    margin-right: 0;
    margin-left: 0;
  }

  #social-gallery {
    margin: 0 -7px;
  }

  #social-gallery li {
    height: 222px;
    margin: 7px 0;
    padding: 0 7px;
  }
}

@media (min-width: 992px) {
  #social-gallery li {
    height: 116px;
  }
}

@media (min-width: 1200px) {
  #social-gallery li {
    height: 109px;
  }
}

@media (min-width: 1400px) {
  #social-gallery li {
    height: 129px;
  }
}

/* -- social gallery end */

.details-section.fixed .scrollsequence-wrap #sticky-pin-wrap .scrollsequence-sticky {
  /* position: fixed !important; */
}



.order-product-btn {
  background: #FF763C;
  border-radius: 5px;
  color: #FFF;
}

.order-product-btn:hover,
.order-product-btn:active {
  color: #FFF;
}

.favorite-pharmacy {
  width: fit-content;
  padding: 0.5rem;
  height: 24px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pharmacy-section .verified-pharmacy {
  border-radius: 30px;
  background: rgba(60, 180, 120, 0.15);
  padding: 0.25rem 0.75rem;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.green-checkmark {
  display: flex;
  padding: 2px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 29px;
  background: #3CB478;
}

.pharmacy-section {
  font-weight: 500;
}
.pharmacy-section .price-row {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  gap: 0.5rem;
}

.pharmacy-section .pharmacy-name {
  font-family: IBM Plex Serif, serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.pharmacy-section .price-row .min-price {
  font-size: 38px;
  line-height: 130%;
}

.pharmacy-section .min-price {
  font-family: IBM Plex Serif, serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.pharmacy-section .min-price-container {
  flex: 1;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
}

.pharmacy-section .min-price-container::before {
  content: '';
  border-bottom: 2px dotted #AAA;
  flex:1;
  margin: 10px 10px 0;
}

.accordion-filter .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--brand-dark-gray-color);
}

.accordion-filter .accordion-item:last-of-type {
  border: 0;
}

.accordion-filter .accordion-header .accordion-button {
  position: relative;
  display: block;
  padding: 15px 0;
}

.accordion-filter .accordion-body {
  padding: 15px 0;
}

.accordion-filter .accordion-header .accordion-button span {
  display: block;
}

.accordion-filter .accordion-header .accordion-button span.title {
  font-weight: 600;
  line-height: 24px;
}

.accordion-filter .accordion-header .accordion-button .selected-list {
  display: flex;
  flex-wrap: wrap;
}
.accordion-filter .accordion-header .accordion-button .selected-list .selected-item {
  margin: 0 2px 0 0;
  color: var(--brand-dark-gray-color);
  font-size: 13px;
  font-weight: 400;
}

.accordion-filter
  .accordion-header
  .accordion-button
  .selected-list
  .selected-item:not(:last-child):after {
  content: ',';
}

.accordion-filter .accordion-button:not(.collapsed) {
  color: var(--brand-black-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion-filter .accordion-item .accordion-button::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url('../img/icons/icon-arrow-down.svg');
}

#jsv-holder {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

#jsv-holder img {
  width: 100%;
}

@media (min-width: 992px){
  #jsv-holder{
    display: none;
  }
}

.sticky-select-container {
  position: fixed;
  width: 100%;
  top: -100px;
  left: 0;
  right: 0;
  background-color: transparent;;
  z-index: 99;
  transition: top 0.3s ease-in-out;
}

.sticky-select-container.active {
  top: 0;
}

.sticky-select-container select {
  flex-grow: 1;
}

.custom-select-trigger, .custom-options {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  user-select: none;
  background: #222B34;
  border: none;
  color: #FFF;
  min-height: 75px;
}

.custom-select-trigger span {
  flex-grow: 1;
  gap: 0.5rem;
}

.custom-select-trigger .arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #555;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.custom-select.open .arrow {
  transform: rotate(180deg);
}

.custom-select-trigger .icon-container,
.custom-select .custom-options .custom-option .icon-container {
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 20px;
  background: linear-gradient(0deg, rgba(10, 20, 30, 0.30) 0%, rgba(10, 20, 30, 0.30) 100%), rgba(255, 255, 255, 0.30);
  border-radius: 5px;
}

.custom-select .custom-options .custom-option .icon-container svg path {
  fill: rgba(255, 255, 255, 0.9);
}

.custom-select-trigger .icon-container,
.custom-select .custom-options .custom-option.selected .icon-container {
  background: var(--brand-orange-15-color);
}

.custom-select-trigger .icon-container svg path,
.custom-select .custom-options .custom-option.selected .icon-container svg path {
  fill: var(--brand-orange-color);
}

.custom-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;  position: absolute;
  top: -375px;
  left: 0;
  right: 0;
  background: #222B34;
  border: none;
  overflow-y: auto;
  color: #FFF;
  z-index: -1;
  transition: all 1s ease-in-out;
}

.custom-select.open .custom-options {
  top: 100%;
}

.custom-select .custom-options .custom-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.custom-select-hidden {
  display: none;
}

.main-pharmacy-info {
  gap: 1rem;
}

.simple-bar {
  width: 100%;
}

.jsv-show {
  display: none !important;
}

.agent-cards .agent-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: #0A141E;
  text-decoration: none;
  font-size: 20px;
  color: #FFF;
  font-weight: 700;
}

.agent-cards .agent-card:hover {
  background: var(--brand-orange-15-color);
}

.agent-cards .agent-card span {
  color: var(--brand-grey-color);
  font-size: 13px;
  font-weight: 400;
}

.agent-cards .agent-card.active {
  border: 1px solid #FF7222;
  background: var(--brand-orange-15-color);
  cursor: not-allowed;
  pointer-events: none;
}

#review-modal-form-of-consuming-collapse .description {
  font-size: 16px;
  font-weight: 400;
}

.btn.usage-amount-check {
  border: 2px solid #F0F0F2;
  height: 45px;
  width: 50px;
  outline: none;
  box-shadow: none !important;
}

.btn.usage-amount-check.active {
  border: 2px solid #FF7222;
  background: var(--brand-orange-15-color);
}

#usageAmount {
  border: 2px solid #F0F0F2;
  height: 45px;
  outline: none;
  box-shadow: none;
}

.selectbox-filter input[type="radio"] {
  display: none;
}

.selectbox-filter label.selectbox-label {
  cursor: pointer;
  font-size: 14px;
  display: flex;
  padding: 6px 10px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: 1 0 0;
  border-radius: 50px;
  color: var(--brand-orange-color);
  background: var(--brand-orange-15-color);
  transition: all 0.24s ease-in-out;
}


.selectbox-filter p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  text-align: center;
}

.selectbox-filter label.active {
  color: #0A141E;
  background-color: #FF7222;
}

.consumption-type label.selectbox-label {
  flex: 1 auto;
}


#product-prescription-configurator-collapse .range-slider .slider {
  margin-left: unset;
  margin-right: unset;
 }
 #product-prescription-configurator-collapse .range-slider input[type="range"] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   width: 100%;
   margin: 0;
   background: transparent; 
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-webkit-slider-runnable-track {
   height: 0.5rem;
   background-color: var(--brand-orange-color);
   border-radius: 1rem;
   cursor: pointer;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: .75rem;
   height: .75rem;
   background-color: var(--brand-orange-color);
   border: none;
   border-radius: 50%;
   margin-top: -0.25rem; /* center the thumb on the track */
   transition: background-color .15s ease-in-out,
               box-shadow .15s ease-in-out;
   cursor: pointer;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-moz-range-track {
   height: 2px;
   background-color: var(--brand-orange-color);
   border-radius: 1rem;
   cursor: pointer;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-moz-range-thumb {
   width: .75rem;
   height: .75rem;
   background-color: var(--brand-orange-color);
   border: none;
   border-radius: 50%;
   transition: background-color .15s ease-in-out,
               box-shadow .15s ease-in-out;
   cursor: pointer;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-ms-track {
   width: 100%;
   height: 2px;
   background: transparent;
   border-color: transparent;
   color: transparent;
   cursor: pointer;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-ms-fill-lower,
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-ms-fill-upper {
   background-color: var(--brand-orange-color);
   border-radius: 1rem;
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]::-ms-thumb {
   width: .75rem;
   height: .75rem;
   background-color: var(--brand-orange-color);
   border: none;
   border-radius: 50%;
   transition: background-color .15s ease-in-out,
               box-shadow .15s ease-in-out;
   cursor: pointer;
   margin-top: 0; 
 }
 
 #product-prescription-configurator-collapse .range-slider input[type="range"]:focus {
   outline: none;
 }
 
 
.btn-link {
  outline: none;
  border: none;
  background: transparent;
}

.basic-dosage-wrapper input,
.dosage-alt,
.preview-text {
  color: #fff;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  outline: none !important;
  transition: all 0.24s ease-in-out;
  border: none;
  padding: 2rem 0;
}

.dosage-alt,
.preview-text,
.dosage-alt-label {
  padding: 2rem;
}

.preview-text {
  min-height: 200px;
}

.dosage-alt-container {

}
.basic-dosage-wrapper input:focus,
.basic-dosage-wrapper input:active,
.dosage-alt:focus,
.dosage-alt:active {
  color: #FFF;
  background: rgba(255, 255, 255, 0.10) !important;
  outline: none !important;
  border: none !important;
}

.form-floating>label {
  left: 10px;
}

.range-slider .range-slider {
  border: none;
  background: rgba(255, 255, 255, 0.10);
}

.slider-count.amount {
  color: #FFF;
}

.range-slider .slider-count-block {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  border: none;
  border-radius: 2px 2px 0px 0px;
  padding: 0px;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.10);
}

.range-slider .slider-count-block.fm-input-focus {
  border: 1px solid #2fdaa0;
  border-bottom: 1px solid #a1a7ae;
}
.range-slider .slider-count-block .label {
  position: absolute;
  left: 10px;
  z-index: 1;
}
.range-slider .slider-count-block input[type='number'] {
  border: unset;
  width: 100%;
  z-index: 0;
  text-align: right;
  z-index: 2;
  background: transparent;
  padding-right: 12px;
}
.range-slider .slider-count-block input[type='number']:focus {
  border: unset !important;
}
.range-slider .slider {
  padding: 0;
  margin-top: -14px;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}

#product-prescription-configurator-collapse {
  position: relative;
  z-index: 9;
}

.range-slider .slider-ranges {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: -3px;
}

.range-slider .slider-ranges span {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #c4c4c4;
}

.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: transparent;
  border-radius: 5px;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #FF7222;
  border-radius: 50%;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 5px;
  background: #FF7222;
}

.single-prescription-configurator h4 {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  color: #FFF;
}

.single-prescription-configurator input[type="number"]::-webkit-outer-spin-button,
.single-prescription-configurator input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.custom-tooltip {
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  top: -30px; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
}

.custom-tooltip.show {
  visibility: visible;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

.receipt-from-doctor h4 {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

.receipt-from-doctor p {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

.receipt-from-doctor span {
  color: #FF7222
}

@media (max-width: 365px) {
  .single-page .info-block h2 {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 767px) {
  .simplebar-mask {
    overflow: scroll !important;
  }
  
  .badge-favorite-btn {
    flex-direction: column;
  }
}


.doughnut-chart-card-wrapper {
  display: flex;
  align-items: center; 
  justify-content: space-between;
}

.doughnut-chart-card {
  position: relative;
  width: clamp(45px, 20vw, 56px);  
  aspect-ratio: 1;
  border: 0.2em solid #434b52;
  border-radius: 50%;
  background: conic-gradient(
      var(--purple) 0% calc(var(--purple-percent) - 1.5%),
      #636e72 calc(var(--purple-percent) - 1.5%) var(--purple-percent),
      var(--green) var(--purple-percent) calc(var(--green-percent) - 1.5%),
      #636e72 calc(var(--green-percent) - 1.5%) var(--green-percent)
  );
}

.doughnut-chart-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  border: 0.2em solid #434b52;
  background-color: #232c35;
  border-radius: 50%;
}


.doughnut-chart-card-badges {
  display: flex;
  flex-direction: column;
  width: 70%;
}

.blueten-price-section .min-price {
  font-size: 36px !important;
}


@media (max-width: 767px)
{
  .doughnut-chart-card-badges {
    width: 60%;
  }
}
@media (max-width: 479px)
{
  .blueten-price-section .min-price {
    font-size: 28px !important;
  }
}

@media (max-width: 425px)
{
  .badge-thc,
  .badge-cbd {
    font-size: 11px;
  }
  .doughnut-chart-card-badges {
    width: 50%;
  }
}

@media (max-width: 360px)
{
  .blueten-card-title {
    justify-self: end;
  }
  .blueten-price-section .min-price {
    font-size: 20px !important;
  }
  .blueten-card-section {
    padding: 1rem !important;
  }
}