/* Universal breakpoints */
.flow-chart-section {
  padding: 40px 0; }
  @media (max-width: 1439px) {
    .flow-chart-section {
      padding: 0 40px 20px; } }

.flow-chart-wrap {
  max-width: calc(100vw - 20px);
  overflow-x: auto;
  /* Scrollbar styles */ }
  .flow-chart-wrap::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    cursor: pointer; }
  .flow-chart-wrap::-webkit-scrollbar-track {
    background: #e8e9ec;
    opacity: 0.7;
    border-radius: 12px; }
  .flow-chart-wrap::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: #62657b; }
  .flow-chart-wrap::-webkit-scrollbar-thumb:hover {
    background: #62657b; }

.arrow-container {
  margin-left: 24px; }
  @media (max-width: 991px) {
    .arrow-container {
      margin-left: 0; } }

.flow-chart-section-heading {
  font-family: "Synchrony Sans", Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38px; }

.flow-chart {
  width: 1440px; }
  .flow-chart-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-gap: 0 10px; }
  .flow-chart-item {
    padding: 24px; }
    .flow-chart-item.-gold {
      background-color: #fbc600;
      color: #3b3d49;
      font-size: 24px; }
    .flow-chart-item.-gray {
      background-color: #3b3d49;
      color: #fbc600;
      font-size: 24px; }
    .flow-chart-item.-basic {
      border: 2px solid #3b3d49;  /*Manisha -fix for safari V16 */
      display: flex;
      justify-content: center;
      flex-direction: column; }
    .flow-chart-item .arrow {
      position: relative;
      margin: auto;
      padding-top: 16px; }
  .flow-chart-heading {
    margin: 0; }
  .flow-chart-copy {
    font-size: 18px;
    text-align: center; }
    .flow-chart-copy.-underlined {
      padding: 0 0 16px; }
      .flow-chart-copy.-underlined::after {
        content: '';
        width: 100%;
        display: block;
        position: relative;
        height: 9px;
        top: 10px;
        background-color: #fbc600; }