.breadcrumb-item + .breadcrumb-item::before {
  font-family: "bootstrap-icons"; }

@media (max-width: 767px) {
  .flex-reverse-container {
    flex-direction: column-reverse; }
    .flex-reverse-container #floating-nav {
      position: static;
      margin: 0; } }

#my_profile_header #not-submitted {
  margin-top: 5rem; }

.flex-reverse-container {
  display: flex;
  column-gap: 30px; }
  .flex-reverse-container .main_content #print-profile {
    text-align: center; }
  .flex-reverse-container .floating-nav-container {
    flex: 0 0 33%; }
    .flex-reverse-container .floating-nav-container #floating-nav {
      position: sticky;
      top: 110px; }
  .flex-reverse-container #floating-nav {
    height: fit-content;
    flex: 0 0 33%;
    margin-bottom: 30px;
    padding: 20px; }
    .flex-reverse-container #floating-nav > h3 {
      margin-top: 15px;
      margin-bottom: 4px; }
    .flex-reverse-container #floating-nav ul {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      list-style: none; }
      .flex-reverse-container #floating-nav ul li {
        position: relative;
        padding-block: 1rem; }
        .flex-reverse-container #floating-nav ul li h3 {
          font-weight: normal; }
        .flex-reverse-container #floating-nav ul li p:last-child {
          margin-bottom: 3px;
          /*added to make up for the visual effect of the bottom margin seeming larger because the p is small in comparison to the h3*/ }
        .flex-reverse-container #floating-nav ul li::after {
          /* The list marker/circle */
          font-family: bootstrap-icons;
          border-radius: 50%;
          color: white;
          position: absolute;
          padding: 4px;
          line-height: 1;
          font-size: 12px;
          content: '\F287';
          color: #88b69a;
          background-color: #88b69a;
          top: calc(30px - 2px);
          left: calc(-28px - 6px - 4px); }
        .flex-reverse-container #floating-nav ul li::before {
          /* Line between markers */
          content: '';
          position: absolute;
          top: 28px;
          left: -28px;
          width: 1px;
          height: 100%;
          background-color: lightgrey; }
        .flex-reverse-container #floating-nav ul li.current-step::after {
          color: #14558F;
          background-color: #14558F; }
        .flex-reverse-container #floating-nav ul li.current-step ~ *::after {
          color: lightgrey;
          background-color: lightgrey; }
        .flex-reverse-container #floating-nav ul li:last-child::before {
          display: none; }