:root,
[data-bs-theme="light"] {
  --bs-nav-link-font-size: 0.7375rem;
  --bg-border-color :#f8f6f6
}
.offcanvas.offcanvas-wide {
  width: 700px !important; /* adjust as needed */
}
.sticky-section {
  position: sticky;
  top: var(--sticky-top, 0px) !important;
  z-index: 1025;
}
.form-control-md {
  min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
  padding: 0.18rem 0.60rem;
  font-size: 0.875rem;  /* ~14px */
  border-radius: var(--bs-border-radius);
}

.form-control-md::file-selector-button {
  padding: 0.32rem 0.75rem;
  margin: -0.32rem -0.75rem;
  margin-inline-end: 0.75rem;
}


/* ===========================% Background_Colors %========================================================== */
.bg-light-primary {
  background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);
  border:var(--bs-primary-border-subtle)
}
.bg-light-secondary {
  background-color: color-mix(in srgb, var(--bs-secondary) 10.4%, transparent);
}
.bg-light-danger {
  background-color: color-mix(in srgb, var(--bs-danger) 10.4%, transparent);
}
.bg-light-success {
  background-color: color-mix(in srgb, var(--bs-success) 10.4%, transparent);
}

.bg-light-info {
  background-color: color-mix(in srgb, var(--bs-info) 10.4%, transparent);
}
.bg-light-warning {
  background-color: color-mix(in srgb, var(--bs-warning) 10.4%, transparent);
}

.card-header {
  padding: 0.5rem var(--bs-card-cap-padding-x);
}
.table_header_border {
 border-bottom:2px solid var(--bs-table-border-color) ;
}
.text-gary-80 {
color:var(--bs-gray-500)
}

.text-royalblue{
color: #1796e3;
}

.text-md {
font-size: 2rem;
}

.text-md-b {
font-weight: normal;
}
.stepper-container {
  position: relative;
}

.timeline-horizontal {
  position: relative;
  padding: 0;
  margin: 0;
}

.timeline-item {
  position: relative;
  flex: 1;
}

.timeline-point {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dee2e6;
  color: #6c757d;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  z-index: 2;
  position: relative;
  padding: 3px;
  transition: all 0.3s ease;
}

.timeline-point.completed {
  background-color: var(--bs-success);
  color: #fff;
  box-shadow: 0 0 5px rgba(25, 135, 84, 0.5);
}

.timeline-point.failed {
  background-color: var(--bs-danger);
  color: #fff;
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

.timeline-point.active {
  background-color: var(--bs-info);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(13, 202, 240, 0.5);
}

.timeline-line-horizontal {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #dee2e6;
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Make line green for completed sections */
.timeline-item.completed ~ .timeline-line-horizontal {
  background-color: var(--bs-success);
}

/* Optional: subtle pulse for active step */
.timeline-point.active::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid var(--bs-info);
  animation: pulse 1.5s infinite;
  opacity: 0.6;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}



.text-xxs { font-size: 0.55rem; }       /* 8px */
.text-xs { font-size: 0.75rem; }       /* 12px */
.text-sm { font-size: 0.875rem; }      /* 14px */
.text-base { font-size: 1rem; }        /* 16px */
.text-lg { font-size: 1.125rem; }      /* 18px */
.text-xl { font-size: 1.25rem; }       /* 20px */
.text-2xl { font-size: 1.5rem; }       /* 24px */
.text-3xl { font-size: 1.875rem; }     /* 30px */
.text-4xl { font-size: 2.25rem; }      /* 36px */
.text-5xl { font-size: 3rem; }         /* 48px */
.text-6xl { font-size: 3.75rem; }      /* 60px */
.text-7xl { font-size: 4.5rem; }       /* 72px */
.text-8xl { font-size: 6rem; }         /* 96px */
.text-9xl { font-size: 8rem; }         /* 128px */


/*  */

.w-0     { width: 0px; }
.w-px    { width: 1px; }
.w-1     { width: 0.25rem; }  /* 4px */
.w-2     { width: 0.5rem; }   /* 8px */
.w-3     { width: 0.75rem; }  /* 12px */
.w-4     { width: 1rem; }     /* 16px */
.w-5     { width: 1.25rem; }  /* 20px */
.w-6     { width: 1.5rem; }   /* 24px */
.w-8     { width: 2rem; }     /* 32px */
.w-10    { width: 2.5rem; }   /* 40px */
.w-12    { width: 3rem; }     /* 48px */
.w-16    { width: 4rem; }     /* 64px */
.w-20    { width: 5rem; }     /* 80px */
.w-24    { width: 6rem; }     /* 96px */
.w-32    { width: 8rem; }     /* 128px */
.w-40    { width: 10rem; }    /* 160px */
.w-48    { width: 12rem; }    /* 192px */
.w-56    { width: 14rem; }    /* 224px */
.w-64    { width: 16rem; }    /* 256px */
.w-auto  { width: auto; }
.w-full  { width: 100%; }
.w-screen{ width: 100vw; }
.w-min   { width: min-content; }
.w-max   { width: max-content; }



.h-0     { height: 0px; }
.h-px    { height: 1px; }
.h-1     { height: 0.25rem; }  /* 4px */
.h-2     { height: 0.5rem; }   /* 8px */
.h-3     { height: 0.75rem; }  /* 12px */
.h-4     { height: 1rem; }     /* 16px */
.h-5     { height: 1.25rem; }  /* 20px */
.h-6     { height: 1.5rem; }   /* 24px */
.h-8     { height: 2rem; }     /* 32px */
.h-10    { height: 2.5rem; }   /* 40px */
.h-12    { height: 3rem; }     /* 48px */
.h-16    { height: 4rem; }     /* 64px */
.h-20    { height: 5rem; }     /* 80px */
.h-24    { height: 6rem; }     /* 96px */
.h-32    { height: 8rem; }     /* 128px */
.h-40    { height: 10rem; }    /* 160px */
.h-48    { height: 12rem; }    /* 192px */
.h-56    { height: 14rem; }    /* 224px */
.h-64    { height: 16rem; }    /* 256px */
.h-auto  { height: auto; }
.h-full  { height: 100%; }
.h-screen{ height: 100vh; }
.h-min   { height: min-content; }
.h-max   { height: max-content; }

.vh-50 {
  height: 50vh !important;
}



/* ==========================
   Base Font Sizes (mobile first)
   ========================== */
.text-xxs { font-size: 0.55rem; }   /* 8px */
.text-xs  { font-size: 0.75rem; }   /* 12px */
.text-sm  { font-size: 0.875rem; }  /* 14px */
.text-base{ font-size: 1rem; }      /* 16px */
.text-lg  { font-size: 1.125rem; }  /* 18px */
.text-xl  { font-size: 1.25rem; }   /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 1.875rem; }  /* 30px */
.text-4xl { font-size: 2.25rem; }   /* 36px */
.text-5xl { font-size: 3rem; }      /* 48px */
.text-6xl { font-size: 3.75rem; }   /* 60px */
.text-7xl { font-size: 4.5rem; }    /* 72px */
.text-8xl { font-size: 6rem; }      /* 96px */
.text-9xl { font-size: 8rem; }      /* 128px */

/* ==========================
   Base Heights
   ========================== */
.h-0     { height: 0; }
.h-px    { height: 1px; }
.h-1     { height: 0.25rem; }  /* 4px */
.h-2     { height: 0.5rem; }   /* 8px */
.h-3     { height: 0.75rem; }  /* 12px */
.h-4     { height: 1rem; }     /* 16px */
.h-5     { height: 1.25rem; }  /* 20px */
.h-6     { height: 1.5rem; }   /* 24px */
.h-8     { height: 2rem; }     /* 32px */
.h-10    { height: 2.5rem; }   /* 40px */
.h-12    { height: 3rem; }     /* 48px */
.h-16    { height: 4rem; }     /* 64px */
.h-20    { height: 5rem; }     /* 80px */
.h-24    { height: 6rem; }     /* 96px */
.h-32    { height: 8rem; }     /* 128px */
.h-40    { height: 10rem; }    /* 160px */
.h-48    { height: 12rem; }    /* 192px */
.h-56    { height: 14rem; }    /* 224px */
.h-64    { height: 16rem; }    /* 256px */
.h-70    { height: 20rem; }    /* 256px */
.h-74    { max-height: 35rem; }    /* 256px */
.h-full  { height: 100%; }

.h-screen{ height: 100vh; }

/* ==========================
   Base Widths
   ========================== */
.w-0     { width: 0; }
.w-px    { width: 1px; }
.w-1     { width: 0.25rem; }
.w-2     { width: 0.5rem; }
.w-3     { width: 0.75rem; }
.w-4     { width: 1rem; }
.w-5     { width: 1.25rem; }
.w-6     { width: 1.5rem; }
.w-8     { width: 2rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-24    { width: 6rem; }
.w-32    { width: 8rem; }
.w-40    { width: 10rem; }
.w-48    { width: 12rem; }
.w-56    { width: 14rem; }
.w-64    { width: 16rem; }
.w-full  { width: 100%; }
.w-screen{ width: 100vw; }

/* ==========================
   Responsive Variants
   ========================== */
@media (min-width: 576px) { /* sm */
  /* Font */
  .text-xxs-sm { font-size: 0.55rem; }
  .text-xs-sm  { font-size: 0.75rem; }
  .text-sm-sm  { font-size: 0.875rem; }
  .text-base-sm{ font-size: 1rem; }
  .text-lg-sm  { font-size: 1.125rem; }
  .text-xl-sm  { font-size: 1.25rem; }
  .text-2xl-sm{ font-size: 1.5rem; }

  /* Height */
  .h-1-sm{ height: 0.25rem; }
  .h-2-sm{ height: 0.5rem; }
  .h-3-sm{ height: 0.75rem; }
  .h-4-sm{ height: 1rem; }
  .h-5-sm{ height: 1.25rem; }
  .h-6-sm{ height: 1.5rem; }
  .h-8-sm{ height: 2rem; }
  .h-10-sm{ height: 2.5rem; }

  /* Width */
  .w-1-sm{ width: 0.25rem; }
  .w-2-sm{ width: 0.5rem; }
  .w-3-sm{ width: 0.75rem; }
  .w-4-sm{ width: 1rem; }
  .w-5-sm{ width: 1.25rem; }
  .w-6-sm{ width: 1.5rem; }
  .w-8-sm{ width: 2rem; }
  .w-10-sm{ width: 2.5rem; }
}

@media (min-width: 768px) { /* md */
  /* Font */
  .text-xxs-md { font-size: 0.55rem; }
  .text-xs-md  { font-size: 0.75rem; }
  .text-sm-md  { font-size: 0.875rem; }
  .text-base-md{ font-size: 1rem; }
  .text-lg-md  { font-size: 1.125rem; }
  .text-xl-md  { font-size: 1.25rem; }
  .text-2xl-md{ font-size: 1.5rem; }

  /* Height */
  .h-1-md{ height: 0.25rem; }
  .h-2-md{ height: 0.5rem; }
  .h-3-md{ height: 0.75rem; }
  .h-4-md{ height: 1rem; }
  .h-5-md{ height: 1.25rem; }
  .h-6-md{ height: 1.5rem; }
  .h-8-md{ height: 2rem; }
  .h-10-md{ height: 2.5rem; }

  /* Width */
  .w-1-md{ width: 0.25rem; }
  .w-2-md{ width: 0.5rem; }
  .w-3-md{ width: 0.75rem; }
  .w-4-md{ width: 1rem; }
  .w-5-md{ width: 1.25rem; }
  .w-6-md{ width: 1.5rem; }
  .w-8-md{ width: 2rem; }
  .w-10-md{ width: 2.5rem; }
}

@media (min-width: 992px) { /* lg */
  /* Font */
  .text-xxs-lg { font-size: 0.55rem; }
  .text-xs-lg  { font-size: 0.75rem; }
  .text-sm-lg  { font-size: 0.875rem; }
  .text-base-lg{ font-size: 1rem; }
  .text-lg-lg  { font-size: 1.125rem; }
  .text-xl-lg  { font-size: 1.25rem; }
  .text-2xl-lg{ font-size: 1.5rem; }

  /* Height */
  .h-1-lg{ height: 0.25rem; }
  .h-2-lg{ height: 0.5rem; }
  .h-3-lg{ height: 0.75rem; }
  .h-4-lg{ height: 1rem; }
  .h-5-lg{ height: 1.25rem; }
  .h-6-lg{ height: 1.5rem; }
  .h-8-lg{ height: 2rem; }
  .h-10-lg{ height: 2.5rem; }

  /* Width */
  .w-1-lg{ width: 0.25rem; }
  .w-2-lg{ width: 0.5rem; }
  .w-3-lg{ width: 0.75rem; }
  .w-4-lg{ width: 1rem; }
  .w-5-lg{ width: 1.25rem; }
  .w-6-lg{ width: 1.5rem; }
  .w-8-lg{ width: 2rem; }
  .w-10-lg{ width: 2.5rem; }
}

@media (min-width: 1200px) { /* xl */
  /* Font */
  .text-xxs-xl { font-size: 0.55rem; }
  .text-xs-xl  { font-size: 0.75rem; }
  .text-sm-xl  { font-size: 0.875rem; }
  .text-base-xl{ font-size: 1rem; }
  .text-lg-xl  { font-size: 1.125rem; }
  .text-xl-xl  { font-size: 1.25rem; }
  .text-2xl-xl{ font-size: 1.5rem; }

  /* Height */
  .h-1-xl{ height: 0.25rem; }
  .h-2-xl{ height: 0.5rem; }
  .h-3-xl{ height: 0.75rem; }
  .h-4-xl{ height: 1rem; }
  .h-5-xl{ height: 1.25rem; }
  .h-6-xl{ height: 1.5rem; }
  .h-8-xl{ height: 2rem; }
  .h-10-xl{ height: 2.5rem; }

  /* Width */
  .w-1-xl{ width: 0.25rem; }
  .w-2-xl{ width: 0.5rem; }
  .w-3-xl{ width: 0.75rem; }
  .w-4-xl{ width: 1rem; }
  .w-5-xl{ width: 1.25rem; }
  .w-6-xl{ width: 1.5rem; }
  .w-8-xl{ width: 2rem; }
  .w-10-xl{ width: 2.5rem; }
}


/* ------------------------Text------------------------- */
@media (min-width: 576px) {
  .fs-sm-1 { font-size: calc(1.3rem + 1.6vw) !important; }
  .fs-sm-2 { font-size: calc(1.2rem + 1.2vw) !important; }
  .fs-sm-3 { font-size: calc(1.1rem + 0.8vw) !important; }
  .fs-sm-4 { font-size: calc(1rem + 0.5vw) !important; }
  .fs-sm-5 { font-size: 1.05rem !important; }
  .fs-sm-6 { font-size: 0.9rem !important; }

  .fs-sm-tiny   { font-size: 72% !important; }
  .fs-sm-big    { font-size: 115% !important; }
  .fs-sm-large  { font-size: 155% !important; }
  .fs-sm-xlarge { font-size: 175% !important; }
  .fs-sm-xxlarge { font-size: calc(1.6rem + 3.5vw) !important; }
}

/* 💻 Medium devices (≥768px) */
@media (min-width: 768px) {
  .fs-md-1 { font-size: calc(1.4125rem + 1.95vw) !important; }
  .fs-md-2 { font-size: calc(1.3625rem + 1.35vw) !important; }
  .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; }
  .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; }
  .fs-md-5 { font-size: 1.125rem !important; }
  .fs-md-6 { font-size: 0.9375rem !important; }

  .fs-md-tiny   { font-size: 70% !important; }
  .fs-md-big    { font-size: 112% !important; }
  .fs-md-large  { font-size: 150% !important; }
  .fs-md-xlarge { font-size: 170% !important; }
  .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
}