.region-highlighted,
.region-help,
.layout-container {
  position: relative;
}

.block-system-breadcrumb-block {
  nav.breadcrumbs {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    width: 100%;
  }

  nav.breadcrumbs_agents {
    position: relative;
    z-index: 2;
  }
}

body.has-top-notification .block-system-breadcrumb-block nav.breadcrumbs {
  transform: translateY(var(--notification-offset, 0px));
}

.region-highlighted,
.region-help {
  padding-top: 48px;
}

.breadcrumbs--background_dark {
  display: block;
  width: 100%;
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;

  ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    list-style: none;
    margin: 42px 0;
    padding-left: 0;
    padding: 0;

    .breadcrumbs__item {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #fff !important;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 16px;
      text-transform: uppercase;
      list-style: none;

      a {
        color: inherit;
        cursor: pointer;
        text-decoration: none;
      }

      .cta_button {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #6f7072;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 16px;
        text-transform: uppercase;

        .btn-transparent-link {
          padding: 0;
        }
      }

      .breadcrumbs__separator {
        color: #fff !important;
        font-size: 1.25rem;
        font-weight: 900;
        margin: 0 8px;
        display: inline-flex;
        align-items: center;
      }
    }

    .breadcrumbs__item:first-child {
      a {
        font-size: 0;
        position: relative;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          width: 18px;
          height: 18px;
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M8.57.653a2.233 2.233 0 0 1 3.157 0l7.426 7.435.085.083a.893.893 0 0 1 .22.486l.006.109v10.321c0 .5-.412.913-.913.913h-5.58a.917.917 0 0 1-.912-.913v-4.32c0-1.006-.67-1.882-1.557-2.032a1.912 1.912 0 0 0-2.264 1.88v4.472c0 .5-.412.913-.913.913H1.746a.917.917 0 0 1-.913-.913V8.766c0-.255.109-.502.305-.672Z' fill='%23FFFFFF' fill-rule='evenodd'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }

    .is-active {
      webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #6f7072;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 16px;
      text-transform: uppercase;
    }
  }
}

.breadcrumbs--background_light {
  display: block;
  width: 100%;
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;

  ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    list-style: none;
    margin: 42px 0;
    padding-left: 0;
    padding: 0;

    .breadcrumbs__item {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #6f7072;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 16px;
      text-transform: uppercase;
      list-style: none;

      a {
        color: inherit;
        cursor: pointer;
        text-decoration: none;
      }

      .cta_button {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #6f7072;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 16px;
        text-transform: uppercase;

        .btn-transparent-link {
          padding: 0;
        }
      }

      .breadcrumbs__separator {
        color: #6f7072;
        font-size: 1.25rem;
        font-weight: 900;
        margin: 0 8px;
        display: inline-flex;
        align-items: center;
      }
    }

    .breadcrumbs__item:first-child {
      a {
        font-size: 0;
        position: relative;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          width: 18px;
          height: 18px;
          background-image: url("../../images/breadcrumb/home-icon.svg");
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }

    .is-active {
      webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #6f7072;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 16px;
      text-transform: uppercase;
    }
  }
}

@media (max-width: 1024px) {

  .region-highlighted,
  .region-help:has(.breadcrumbs) {
    padding-top: 28px;

    .breadcrumbs__items {
      margin: 20px 0 20px 0;
    }
  }
}

@media (min-width: 970px) {
  .breadcrumb {
    .container {
      max-width: 970px !important;
    }
  }

}

@media (min-width: 768px) {
  .breadcrumb {
    .container {
      max-width: 768px !important;
    }
  }

}

@media (max-width: 640px) {
  .breadcrumb {
    container {

      li:last-child,
      :first-child {
        display: none;
      }
    }
  }
}

@media (min-width: 970px) {
  .container {
    max-width: 970px !important;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px !important;
  }
}

@media (max-width: 640px) {
  .breadcrumb {
    container {

      li:last-child,
      :first-child {
        display: none;
      }
    }
  }
}