.fbu-dashboard {
  align-items: stretch;
  width: 100vw;
  padding: 0rem var(--x);
  --x: calc((100vw - var(--max-width)) / 2);
  height: 30rem;
  align-content: flex-start;
  flex-direction: row;
  overflow-x: auto;
}

.fbu-dashboard figure.horizontal-bar {
  height: fit-content;
  width: 100%;
  overflow-x: visible;
  flex-direction: column;
  margin: .5rem;
}

  .fbu-dashboard .item.details {
    box-shadow: var(--float-close);
    border: 1px solid var(--color);
    border-radius: .5rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: .5rem;
    background: var(--compare-more);
    overflow: hidden;
  }
  .fbu-dashboard .title {
    padding: 0.5rem;
    color: var(--compare);
    font-weight: 500;
    height: -webkit-fill-available;
    background-color: var(--color);
    align-items: center;
    width: 100%;
  }

/*===================================================
 Horizontal Bar Graph
==================================================*/

  .fbu-dashboard .horizontal-bar .graph-line {
    background: repeating-linear-gradient( to right, #ddd, #ddd 1px, #fff 1px, #fff 5% );
    width: 100%;
    flex-direction: column;
    padding: 1rem 0;
  }

@keyframes fill {
  0% {
    width: 0;
  }
}

.fbu-dashboard .horizontal-bar {
  position: relative;
}
  .fbu-dashboard .horizontal-bar::before {
    content: "";
    height: 100%;
    width: 3px;
    background-color: var(--contrast);
    position: absolute;
    left: var(--percentComplete);
  }

  .fbu-dashboard .horizontal-bar .issued {
    background-image: linear-gradient(90deg, var(--color),var(--color-lt));
  }

  .fbu-dashboard .horizontal-bar .received {
    background-image: linear-gradient(90deg, var(--color-dark), var(--color-med));
  }

  .fbu-dashboard .horizontal-bar .graph-line span {
    position: relative;
    height: 2rem;
    padding: .5rem;
    align-items: center;
    color: white;
    font-weight: 400;
    animation: fill 1s ease-out forwards;
    /* border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem; */
  }

  .fbu-dashboard .horizontal-bar .horizontal-line {
    width: 100%;
    align-items: center;
  }

  .fbu-dashboard .horizontal-bar .title {
    font-size: 1rem;
    font-weight: 300;
    padding: 1rem;
    text-transform: uppercase;
    width: 22.5%;
    flex-shrink: 0;
    justify-content: flex-end;
    letter-spacing: .02rem;
  }

.fbu-dashboard .account-number {
  padding: .5rem;
  width: 100%;
  color: var(--contrast-less);
}

.fbu-dashboard .info {
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  padding: 1rem .5rem;
}

  .fbu-dashboard .info span {
    margin: .125rem .5rem;
  }

    .fbu-dashboard .info span:nth-of-type(odd) {
      text-transform: uppercase;
      margin-top: .5rem;
    }

    .fbu-dashboard .info span:nth-of-type(even) {
      font-weight: 600;
      margin-bottom: .5rem;
    }

.fbu-dashboard .focus {
  flex-direction: column;
  align-items: center;
  margin: 1rem 2rem;
}

  .fbu-dashboard .focus .number {
    font-size: 4rem;
    font-weight: 800;
    display: inline;
  }

  .fbu-dashboard .focus sup {
    display: inline;
    font-weight: 400;
    font-size: 2rem;
    margin-left: -1ch;
  }


.fbu-dashboard figure.vertical-bar {
  height: 100%;
  width: fit-content;
  overflow-x: visible;
  flex-direction: column;
  margin: .5rem;
}

.fbu-dashboard .vertical-bar .graph-line {
  background: repeating-linear-gradient( to top, #ddd, #ddd 1px, #fff 1px, #fff 5% );
  height: 100%;
  flex-direction: row;
  padding: 0 1rem;
  align-items: flex-end;
  border-top: 1px solid #ddd;
}

@keyframes fillVert {
  0% {
    height: 0;
  }
}

.fbu-dashboard .vertical-bar {
  position: relative;
  height: 350px;
  width: min-content;
}

  .fbu-dashboard .vertical-bar::before {
    content: "";
    width: 100%;
    height: 3px;
    background-color: var(--contrast);
    position: absolute;
    bottom: var(--percentComplete);
  }

  .fbu-dashboard .vertical-bar .issued {
    background-image: linear-gradient(0deg, var(--color),var(--color-lt));
  }

  .fbu-dashboard .vertical-bar .received {
    background-image: linear-gradient(0deg, var(--color-dark), var(--color-med));
  }

  .fbu-dashboard .vertical-bar .graph-line span {
    position: relative;
    width: 2rem;
    padding: .5rem;
    align-items: center;
    color: white;
    font-weight: 400;
    animation: fillVert 1s ease-out forwards;
    /* border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem; */
  }

  .fbu-dashboard .vertical-bar .vertical-line {
    height: 100%;
  }

  .fbu-dashboard .vertical-bar .title {
    font-size: 1rem;
    font-weight: 300;
    padding: 1rem;
    text-transform: uppercase;
    width: 22.5%;
    flex-shrink: 0;
    justify-content: flex-end;
    letter-spacing: .02rem;
  }

  .fbu-dashboard .sub-title {
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: .25rem 0;
  }
.fbu-dashboard h2 {
  font-size: 2em;
  margin-bottom: 1em;
  color: var(--contrast);
  flex-direction: column;
  font-weight: 500;
}

  .fbu-dashboard h2::before {
    content: "";
    background: var(--color-lt);
    height: 0.75rem;
    width: 12.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }


.fbu-dashboard .item.half-card .label {
  padding: 0.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fbu-dashboard .item {
  max-width: calc(var(--max-width) / 4);
  box-shadow: var(--float-close);
  border: 1px solid var(--color);
  border-radius: 0.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem;
  background: var(--compare-more);
  overflow: hidden;
  width: calc(100% / 4 - 1rem);
  flex-shrink: 0;
  height: calc(100% - 1rem);
}

.fbu-dashboard .item:not(.item.toolkit, .item.toolkit + .item) {
  cursor: pointer;
}

.fbu-dashboard .item.toolkit {
  justify-content: flex-start;
  padding: 1rem;
  border-color: transparent;
  height: calc(100% - 1rem);
  position: relative;
}

.fbu-dashboard .item.toolkit select {
    width: 100%;
    padding: .25rem;
    margin: .25rem 0;
    border: 2px solid transparent;
    border-bottom-color: var(--color);
  }

  .fbu-dashboard .item.toolkit .back {
    align-self: flex-start;
    align-items: center;
    cursor: pointer;
  }

  .fbu-dashboard  .item.toolkit .back img {
      width: 1.5rem;
      transform: translateX(-0.25rem);
      filter: invert(100%) brightness(200%);
    }

    .fbu-dashboard  .item.toolkit .back .img-container {
      border-radius: var(--circle);
      background-color: var(--contrast);
      margin-right: 1rem;
      padding: 0.25rem;
      transform: rotate(180deg);
    }

    .fbu-dashboard .item.toolkit .back:hover .img-container {
      background-color: var(--color);
    }

    .fbu-dashboard .item.toolkit .back:hover {
      color: var(--color);
    }


    .fbu-dashboard .item.toolkit > label {
    width: 100%;
    margin: 1rem 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .01rem;
    font-weight: 300;
  }

  .fbu-dashboard .status {
    text-transform: uppercase;
    letter-spacing: .01rem;
    font-weight: 300;
  }

.fbu-dashboard .overview {
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  padding-right: 0.5rem;
}
.fbu-dashboard .quick-info {
  align-items: center;
}

.fbu-dashboard .item.half-card {
  align-self: flex-start;
  height: calc(50% - 1rem);
  /* margin: 0; */
  cursor: pointer;
}


/*
  THIRD Party Fix Start
*/

.WMBSC[b-ym8nfzch4d] .slick-initialized .slick-slide {
  display: flex !important;
  max-height: 480px;
  min-height: 462px;
}

.WMBSC[b-ym8nfzch4d] .slick-initialized .slick-slide:first-of-type {
    min-height: 462px;
  }



 .extra.slick-slide,
 .slick-track,
.slick-list.draggable {
  display: flex !important;
}

.slick-list.draggable {
  overflow: visible !important;
}


.slick-slide {
  height: unset !important;
}
/*
  THIRD Party Fix End
*/

@media screen and (max-width: 480px) {

  .fbu-dashboard .item {
    width: unset;
  }
}