.ag-client-flow {
  --ag-flow-duration: 42s;
  --ag-flow-fade: 7%;
  --ag-logo-width: 210px;
  --ag-logo-item-height: 92px;
  --ag-logo-image-width: 150px;
  --ag-logo-image-height: 52px;
  --ag-logo-gap: 18px;
  --ag-logo-pad-top: 10px;
  --ag-logo-pad-right: 16px;
  --ag-logo-pad-bottom: 10px;
  --ag-logo-pad-left: 16px;
  width: 100%;
  min-width: 0;
}

.ag-client-flow__viewport {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--ag-flow-fade),
    #000 calc(100% - var(--ag-flow-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--ag-flow-fade),
    #000 calc(100% - var(--ag-flow-fade)),
    transparent
  );
}

.ag-client-flow__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ag-client-flow__track.is-ready {
  animation: ag-client-marquee-left var(--ag-flow-duration) linear infinite;
}

.ag-client-flow.is-direction-right .ag-client-flow__track {
  transform: translateX(-50%);
}

.ag-client-flow.is-direction-right .ag-client-flow__track.is-ready {
  animation-name: ag-client-marquee-right;
}

.ag-client-flow.is-pause-hover:hover .ag-client-flow__track.is-ready,
.ag-client-flow.is-pause-focus:focus-within .ag-client-flow__track.is-ready {
  animation-play-state: paused;
}

.ag-client-flow.is-editor-preview .ag-client-flow__viewport {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.ag-client-flow.is-editor-preview .ag-client-flow__track,
.ag-client-flow.is-editor-preview .ag-client-flow__track.is-ready {
  animation: none;
  transform: none;
}

.ag-client-flow__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ag-logo-gap);
  margin: 0;
  padding: 0 var(--ag-logo-gap) 0 0;
  list-style: none;
}

.ag-client-flow__item {
  display: grid;
  place-items: center;
  flex: 0 0 var(--ag-logo-width);
  width: var(--ag-logo-width);
  height: var(--ag-logo-item-height);
  margin: 0;
  padding: var(--ag-logo-pad-top) var(--ag-logo-pad-right) var(--ag-logo-pad-bottom) var(--ag-logo-pad-left);
}

.ag-client-flow__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.ag-client-flow__media {
  display: grid;
  place-items: center;
  width: min(100%, var(--ag-logo-image-width));
  height: var(--ag-logo-image-height);
  overflow: visible;
}

.ag-client-flow__link:focus-visible {
  outline: 2px solid #1f365c;
  outline-offset: 4px;
}

.ag-client-flow__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: translateY(var(--ag-logo-offset-y, 0px)) scale(var(--ag-logo-scale, 1));
  transform-origin: center;
}

@keyframes ag-client-marquee-left {
  to {
    transform: translateX(-50%);
  }
}

@keyframes ag-client-marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .ag-client-flow {
    --ag-logo-width: 162px;
    --ag-logo-item-height: 84px;
    --ag-logo-image-width: 126px;
    --ag-logo-image-height: 46px;
    --ag-logo-gap: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ag-client-flow__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ag-client-flow__track,
  .ag-client-flow__track.is-ready,
  .ag-client-flow.is-direction-right .ag-client-flow__track {
    animation: none;
    transform: none;
  }

  .ag-client-flow__group[aria-hidden="true"] {
    display: none;
  }
}