/*
 * ==========================================================
 * Bahon Connect
 * Feasibility Sticky - Current FR Stage V1
 * ==========================================================
 */

.fr-current-stage-v1 {
  box-sizing: border-box;

  margin-top: 10px;
  padding: 10px 12px 9px;

  border: 1px solid #d8e3ec;
  border-left: 3px solid #2f7edb;
  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #fbfdff 0%,
      #f5f9fd 100%
    );

  color: #263d55;
}


.fr-current-stage-v1--warning {
  border-left-color: #d99a16;

  background:
    linear-gradient(
      135deg,
      #fffdf7 0%,
      #fff9ea 100%
    );
}


.fr-current-stage-v1--success {
  border-left-color: #168447;

  background:
    linear-gradient(
      135deg,
      #f8fdf9 0%,
      #eef9f1 100%
    );
}


.fr-current-stage-v1--danger {
  border-left-color: #c83b3b;

  background:
    linear-gradient(
      135deg,
      #fffafa 0%,
      #fff1f1 100%
    );
}


.fr-current-stage-v1__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;
}


.fr-current-stage-v1__label {
  color: #60778d;

  font-size: 10px;
  line-height: 1;

  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}


.fr-current-stage-v1__badge {
  display: inline-flex;
  align-items: center;

  min-height: 20px;

  padding: 3px 7px;

  border-radius: 999px;

  background: #e9f2fb;
  color: #285f90;

  font-size: 9px;
  line-height: 1;

  font-weight: 800;

  white-space: nowrap;
}


.fr-current-stage-v1--warning
.fr-current-stage-v1__badge {
  background: #fff0c8;
  color: #94630a;
}


.fr-current-stage-v1--success
.fr-current-stage-v1__badge {
  background: #dff5e7;
  color: #176d3a;
}


.fr-current-stage-v1--danger
.fr-current-stage-v1__badge {
  background: #fde2e2;
  color: #9c2929;
}


.fr-current-stage-v1__current {
  display: flex;
  align-items: flex-start;

  gap: 8px;
}


.fr-current-stage-v1__dot {
  flex: 0 0 auto;

  width: 9px;
  height: 9px;

  margin-top: 4px;

  border-radius: 50%;

  background: #2f7edb;

  box-shadow:
    0 0 0 4px rgba(47,126,219,.10);
}


.fr-current-stage-v1--warning
.fr-current-stage-v1__dot {
  background: #d99a16;

  box-shadow:
    0 0 0 4px rgba(217,154,22,.11);
}


.fr-current-stage-v1--success
.fr-current-stage-v1__dot {
  background: #168447;

  box-shadow:
    0 0 0 4px rgba(22,132,71,.10);
}


.fr-current-stage-v1--danger
.fr-current-stage-v1__dot {
  background: #c83b3b;

  box-shadow:
    0 0 0 4px rgba(200,59,59,.10);
}


.fr-current-stage-v1__stage {
  display: block;

  margin: 0 0 2px;

  color: #20384f;

  font-size: 13px;
  line-height: 1.15;

  font-weight: 800;
}


.fr-current-stage-v1__detail {
  display: block;

  color: #667b8e;

  font-size: 10.5px;
  line-height: 1.3;
}


/* ==========================================================
   MINI LIFECYCLE
   ========================================================== */

.fr-current-stage-v1__flow {
  display: flex;
  align-items: center;

  gap: 4px;

  margin-top: 9px;
  padding-top: 8px;

  border-top: 1px solid #e1e9f0;

  overflow: hidden;
}


.fr-current-stage-v1__step {
  display: inline-flex;
  align-items: center;

  min-width: 0;

  padding: 3px 5px;

  border-radius: 5px;

  color: #8797a5;

  font-size: 8.5px;
  line-height: 1;

  font-weight: 700;

  white-space: nowrap;
}


.fr-current-stage-v1__step.is-current {
  background: #e8f2fc;
  color: #1767a8;

  font-weight: 850;
}


.fr-current-stage-v1--warning
.fr-current-stage-v1__step.is-current {
  background: #fff0c8;
  color: #95640a;
}


.fr-current-stage-v1--success
.fr-current-stage-v1__step.is-current {
  background: #dff5e7;
  color: #176d3a;
}


.fr-current-stage-v1--danger
.fr-current-stage-v1__step.is-current {
  background: #fde2e2;
  color: #9c2929;
}


.fr-current-stage-v1__arrow {
  flex: 0 0 auto;

  color: #aebbc6;

  font-size: 8px;
}


/*
 * Keep the card compact inside the existing 3-column sticky.
 */

.bc-management-col-v133
.fr-current-stage-v1 {
  width: 100%;
}


/* Smaller screen */

@media (max-width: 1000px) {

  .fr-current-stage-v1__flow {
    flex-wrap: wrap;
  }

}