.sidebar {
  border-right: 1px solid #ccc;
  height: 100%;
}
.main-content {
  padding-left: 15px;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #000000;
  background-color: transparent;
  font-weight: 700;
  text-align: right;
  font-size: 1.2rem;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: rgb(0, 0, 0);
  text-align: right;
  font-size: 1.2rem;
}
.heading-space {
  height: 80px;
  padding-left: 80px;
  margin-left: 50px;
}
.gray-box {
  width: 100%;
  margin: 0 auto;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 0px 25px;
  box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.2);
  margin-left: 30px;
  color: #0a6c90;
}
.account-order-box {
  margin: 0 auto;
  background: #f2f2f2;
  border-radius: 10px;
  box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.2);
  color: #0a6c90;
}

.container-testimonial
{
  column-count: 3;
  column-gap: 40px;
}

@media only screen and (max-width: 320px)
{

  .container-testimonial
  {
    column-count: 1;
    column-gap: 10px;
  }
}


@media only screen and (min-width: 321px) and (max-width: 768px)
{
  .container-testimonial
  {
    column-count: 1;
    column-gap: 10px;
  }
}


@media only screen and (min-width: 769px) and (max-width: 1200px)
{
  .container-testimonial
  {
    column-count: 4;
    column-gap: 10px;
  }
}

.prod_border_all{border:1px solid #cdcdcd;}
.standard_text
{
  font-size: 1em;
  line-height: 1.5em;
  text-align: justify;
}

figure
{
  margin: 0;
  padding-top: 20px;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

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

.margin-top-15{
  margin-top: 15px !important;
}

.cat{
  font-family: "Lucida Console", "Courier New", monospace;
}

.dog{
  font-family: Cursive;
}

.margin-bottom-10{
  margin-bottom: 10px !important;
}

.progress-circle
{
  font-size: 20px;
  margin: 20px;
  position: relative;
 /* so that children can be absolutely positioned */
  padding: 0;
  width: 5em;
  height: 5em;
  background-color: #9CD4D1;
  border-radius: 50%;
  line-height: 5em;
}

.progress-circle:after
{
  border: none;
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4.3em;
  height: 4.3em;
  background-color: white;
  content: " ";
}
/* Text inside the control */
.progress-circle span
{
  position: absolute;
  line-height: 5em;
  width: 5em;
  text-align: center;
  display: block;
  color: #006E96;
  z-index: 2;
}

.left-half-clipper
{
   /* a round circle */
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
 /* needed for clipping */
  clip: rect(0, 5em, 5em, 2.5em);
 /* clips the whole left half*/;
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
   clip: rect(auto,auto,auto,auto);
}
.value-bar {
   /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/ 
   position: absolute; /*needed for clipping*/
   clip: rect(0, 2.5em, 5em, 0);
   width: 5em;
   height: 5em;
   border-radius: 50%;
   border: 0.45em solid #006E96; /*The border is 0.35 but making it larger removes visual artifacts */
   /*background-color: #4D642D;*/ /* for debug */
   box-sizing: border-box;
  
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 5em, 5em, 2.5em);
   background-color: #006E96;
   border-radius: 50%;
   width: 5em;
   height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }

/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }

.progress-circle.p50 .value-bar { transform: rotate(180deg); }

.progress-circle.p75 .value-bar { transform: rotate(270deg); }

.progress-circle.p100 .value-bar { transform: rotate(360deg); }
.small {
  font-size: 0.75rem;
  font-weight: 600;
}
.large {
  font-size: 1rem;
}
.extra-small {
  font-size: 0.55rem;
}

.btn-custom {
  color: black;
  background-color: white;
  border: 1px solid black;
  font-weight: 600;
  border-radius: 10px;
  width: 180px;
  font-size: 14.5px;
}
.btn-custom:hover {
  border: 1px solid black !important;
}
span.btn-custom {
  color: rgb(255, 255, 255);
  background-color: var(--cyan);
  border: 1px solid black;
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 0;
  padding: 0.375rem 0.75rem;
  width: auto;
  display: inline-block;
}
.circle {
  border-radius: 50%;
  height: 120px;
  width: 120px;
}
.edit-icon,
.delete-icon {
  cursor: pointer;
  display: inline-block;
  background-color: rgb(255, 255, 255);
}
.edit-icon i,
.delete-icon i {
  font-size: 1.3rem; /* Large icon size */
  vertical-align: middle; /* Align icon vertically */
}
.btn-oval {
  background: #eaea7e;
  font-size: 1em;
  border-radius: 10px;
  display: block;
  width: 100%;
  font-weight: 600;
}
.content-container {
  max-width: 800px !important;
  margin: 0 auto;
}
.text-yellow {
  color: yellow;
}
.tab-contents {
  padding: 20px;
  background: #e8e8e8;
}
.back-button {
  display: none; /* Hide the button by default */
}
.form-control{
  border: 1px solid #000000;
  text-align: center;
  font-size: .8rem;
  padding: 0.5rem 0.5rem !important;
}
.underline {
  display: inline-block;
  border-bottom: 1px solid black; /* Adjust thickness and color as needed */
  width: 100%; /* Ensure the underline spans the width of its container */
  margin-bottom: -1px; /* Adjust this value to align the underline with the text */
}
@media only screen and (max-width: 767px) {
  .back-button {
    display: block; /* Display the button for screens smaller than 768px */
    bottom: 20px;
    margin-left: 10px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    font-size: 0.75rem;
  }
  .circle {
    border-radius: 50%;
    height: 50px;
    width: 50px;
  }
  .back-link {
    color: #000000; /* Black color for the text */
    text-decoration: none;
  }
  .sidebar {
    margin: 0;
    padding: 0;
  }
  .heading-space {
    margin-top: 20px;
    margin-left: 20px;
    padding: 0px;
    height: 50px;
  }
  .nav-link {
    text-align: left;
  }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    text-align: left;
  }
  .hello-heading {
    margin-top: 0; /* Remove top margin */
  }
  .hide-mobile {
    margin-top: 0px !important;
  }
  .account-order-box {
    width: 100%;
    margin: 0 auto;
    background: #f2f2f2;
    border-radius: 10px;
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.2);
    margin-left: 0; /* Removed margin-left for mobile */
    color: #0a6c90;
    padding: 0px 10px;
  }
  .account-order-box .row {
    margin-bottom: 0px;
    flex-wrap: nowrap;
  }
  .account-order-box h4,
  .account-order-box h5 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 0.7rem; /* Reduced font size */
  }
  .account-order-box h6 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 0.5rem; /* Reduced font size */
  }
  .account-order-box .btn {
    width: 100%;
    font-size: 0.5rem;
    padding: 2px 10px; /* Reduced font size */
    margin-right: 6px;
  }
  .small {
    font-size: 0.5rem; /* Adjust as needed */
  }
  .large {
    font-size: 0.7rem; /* Adjust as needed */
  } 
 
  .yellow-background {
    background-color: yellow;
    padding: 10px 20px;
    border-radius: 12px;
  }
  .text-cyan1 {
    font-size: 1rem; /* Adjust as needed */
  }
  .edit-icon i,
  .delete-icon i {
    font-size: 1rem; /* Large icon size */
    vertical-align: middle; /* Align icon vertically */
  }
  .product-details-para ul li {
    list-style: disc;
    font-size: 0.5rem;
  }
  span.btn-custom {
      font-size: 0.6rem;
      padding: 0.25rem 0.5rem;
    }
  }