.deployment-banner {
    color: black;
    width: 100%;
    padding: 2px 0;
    text-align: center;
}

/*
===============================================================================
*/
/* arrow line between to stacked dates */
.dates-stacked-arrow {
  position: relative;
  font-variant-numeric: tabular-nums;
}

/* horizontal and vertical line */
.arrow-line {
  position: absolute;
  left: -12px; /* start the arrow from the left of the lower date */
  top: 50%; /* center the arrow vertically relative to the lower date */
  width: 10px; /* horizontal line length */
  height: 50%; /* vertical line length */
  border-top: 1px solid black; /* upper horizontal line */
  border-left: 1px solid black; /* vertical line */
  border-bottom: 1px solid black; /* lower horizontal line */
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  transform: translateY(-50%); /* vertical centering */
}

/* arrowhead on top */
.arrow-line::after {
  content: '';
  position: absolute;
  top: -4px; /* vertical alignment */
  left: 75%; /* horizontal alignment */
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 6px solid black; /* arrowhead */
  border-bottom: 4px solid transparent;
}
/*
===============================================================================
*/