@charset "UTF-8";
.digit {
  display: inline-block;
  height: 1.2em;
  width: 0.59em;
  overflow: hidden;
}
.digit.comma {
  width: 0.3em;
  overflow: hidden;
}

.digit:first-child {
  border-left: none;
}

.digit-holder {
  line-height: 1.3em;
  padding: 0;
  margin-top: 0.2em;
  overflow: hidden;
}
.digit-holder.digit-thousand {
  --num-digits: 4;
  --digits-translation: calc(var(--num-digits) * -1.2em);
}
.digit-holder.digit-thousand.active {
  -webkit-animation: slide 2.5s ease;
  animation: slide 2.5s ease;
}
.digit-holder.digit-hundred {
  --num-digits: 4;
  --digits-translation: calc(var(--num-digits) * -1.2em);
  line-height: 1.3em;
}
.digit-holder.digit-hundred.active {
  -webkit-animation: slide 2.5s ease-out;
  animation: slide 2.5s ease-out;
}
.digit-holder.digit-ten {
  --num-digits: 4;
  --digits-translation: calc(var(--num-digits) * -1.2em);
  line-height: 1.3em;
}
.digit-holder.digit-ten.active {
  -webkit-animation: slide 2.5s ease-in-out;
  animation: slide 2.5s ease-in-out;
}
.digit-holder.digit-one {
  --digits-translation: calc(var(--num-digits, 0) * -1.2em);
  line-height: 1.3em;
}
.digit-holder.digit-one.active {
  -webkit-animation: slide 2.5s linear;
  animation: slide 2.5s linear;
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateY(var(--digits-translation));
  }
  /* delay between animations by adding extra transform type with the same value as transform for 100% */
  40% {
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes slide {
  0% {
    transform: translateY(var(--digits-translation));
  }
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes project-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
}

.animated-background--super-dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
}

.animated-background--super-dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
}

.accordian__item {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
  text-transform: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.accordian__item__header {
  padding: 2.8125rem 0 2.8125rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
}
.accordian__item__text {
  flex-grow: 1;
  margin-bottom: 0;
  color: #070A0E;
  margin-right: 1rem;
}
.accordian__item__text--light {
  color: #FFFFFF;
}
.accordian__item__description {
  margin-bottom: 2.8125rem;
  padding-right: 32px;
  color: #657786;
  display: none;
  position: relative;
}
.accordian__item__description.active {
  display: block;
}
.accordian__item__description p:not(:first-child) {
  margin-top: 0.7rem;
}
.accordian__item__description a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.accordian__item__description a:hover {
  border-bottom: 1px solid #00D395;
}
.accordian__item__description ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}
.accordian__item__description ul li {
  margin-bottom: 1rem;
  padding-left: 1.1rem;
}
.accordian__item__description ul li a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.accordian__item__description ul li a:hover {
  border-bottom: 1px solid #00D395;
}
.accordian__item__description ul li:last-child {
  margin-bottom: 0;
}
.accordian__item__description ul li::before {
  content: "•  ";
  color: #00D395;
  position: absolute;
  left: 0;
  margin-top: 0.26rem;
}
.accordian__item__description ol {
  margin-top: 10px;
}
.accordian__item__description ol li::before {
  content: "";
}
.accordian__item__description--light {
  color: #AAB8C1;
}
.accordian__item:hover {
  border-bottom: 1px solid #00D395;
}
.accordian__plus {
  height: 2rem;
  width: 2rem;
  position: relative;
  flex-shrink: 0;
}
.accordian__plus span {
  position: absolute;
  transition: 0.3s;
  background: #00D395;
}
.accordian__plus span:first-of-type {
  top: 0%;
  bottom: 0%;
  width: 10%;
  left: 45%;
}
.accordian__plus span:first-of-type.active {
  transform: rotate(90deg);
}
.accordian__plus span:last-of-type {
  left: 0%;
  right: 0%;
  height: 10%;
  top: 45%;
}
.accordian__plus span:last-of-type.active {
  left: 50%;
  right: 50%;
}
.accordian__plus--light span {
  background-color: #FFFFFF;
}
.accordian__plus.active span:first-of-type {
  transform: rotate(90deg);
}
.accordian__plus.active span:last-of-type {
  left: 50%;
  right: 50%;
}

.arrow {
  width: 14px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/compound-components/assets/icn-build-arrows-green.svg");
  margin-right: 8px;
  margin-left: 8px;
}
.arrow.borrow {
  background-image: url("/compound-components/assets/icn-build-arrows-purple.svg");
}
.arrow--dark {
  background-image: url("/compound-components/assets/icn-build-arrows.svg");
}
.arrow--big {
  width: 34px;
  height: 31px;
  background-position: center;
  background-size: 100%;
  transition: all 0.2s ease-in-out;
}

.button,
button,
input[type=submit],
input[type=reset],
input[type=button] {
  display: inline-block;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  padding: 1.2rem 1.6rem;
  text-align: center;
  font-family: inherit;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .button:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=button]:hover,
input[type=button]:focus {
  outline: 0;
}
.button.main,
button.main,
input[type=submit].main,
input[type=reset].main,
input[type=button].main {
  background-color: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
.button.main:hover,
button.main:hover,
input[type=submit].main:hover,
input[type=reset].main:hover,
input[type=button].main:hover {
  text-decoration: none;
}
.button.main:hover, .button.main:active, .button.main:focus,
button.main:hover,
button.main:active,
button.main:focus,
input[type=submit].main:hover,
input[type=submit].main:active,
input[type=submit].main:focus,
input[type=reset].main:hover,
input[type=reset].main:active,
input[type=reset].main:focus,
input[type=button].main:hover,
input[type=button].main:active,
input[type=button].main:focus {
  background: #00ba83;
  border-color: #00ba83;
}
.button.main.pending,
button.main.pending,
input[type=submit].main.pending,
input[type=reset].main.pending,
input[type=button].main.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #00D395 40%, #3affc5 50%, #00D395 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.borrow,
button.borrow,
input[type=submit].borrow,
input[type=reset].borrow,
input[type=button].borrow {
  background-color: #9669ED;
  color: #FFFFFF;
  border-color: #9669ED;
}
.button.borrow:hover,
button.borrow:hover,
input[type=submit].borrow:hover,
input[type=reset].borrow:hover,
input[type=button].borrow:hover {
  text-decoration: none;
}
.button.borrow:hover, .button.borrow:active, .button.borrow:focus,
button.borrow:hover,
button.borrow:active,
button.borrow:focus,
input[type=submit].borrow:hover,
input[type=submit].borrow:active,
input[type=submit].borrow:focus,
input[type=reset].borrow:hover,
input[type=reset].borrow:active,
input[type=reset].borrow:focus,
input[type=button].borrow:hover,
input[type=button].borrow:active,
input[type=button].borrow:focus {
  background: #8652ea;
  border-color: #8652ea;
}
.button.borrow.pending,
button.borrow.pending,
input[type=submit].borrow.pending,
input[type=reset].borrow.pending,
input[type=button].borrow.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #9669ED 40%, #d6c4f8 50%, #9669ED 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.neutral,
button.neutral,
input[type=submit].neutral,
input[type=reset].neutral,
input[type=button].neutral {
  background-color: #546E7A;
  color: #FFFFFF;
  border-color: #546E7A;
}
.button.neutral:hover,
button.neutral:hover,
input[type=submit].neutral:hover,
input[type=reset].neutral:hover,
input[type=button].neutral:hover {
  text-decoration: none;
}
.button.neutral:hover, .button.neutral:active, .button.neutral:focus,
button.neutral:hover,
button.neutral:active,
button.neutral:focus,
input[type=submit].neutral:hover,
input[type=submit].neutral:active,
input[type=submit].neutral:focus,
input[type=reset].neutral:hover,
input[type=reset].neutral:active,
input[type=reset].neutral:focus,
input[type=button].neutral:hover,
input[type=button].neutral:active,
input[type=button].neutral:focus {
  background: #4a606b;
  border-color: #4a606b;
}
.button.neutral.pending,
button.neutral.pending,
input[type=submit].neutral.pending,
input[type=reset].neutral.pending,
input[type=button].neutral.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #546E7A 40%, #87a1ad 50%, #546E7A 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.hollow,
button.hollow,
input[type=submit].hollow,
input[type=reset].hollow,
input[type=button].hollow {
  background: none;
  border-color: #546E7A;
  color: #90A4AE;
}
.button.hollow:hover,
button.hollow:hover,
input[type=submit].hollow:hover,
input[type=reset].hollow:hover,
input[type=button].hollow:hover {
  border-color: #90A4AE;
  color: #CFD8DC;
}
.button.dark,
button.dark,
input[type=submit].dark,
input[type=reset].dark,
input[type=button].dark {
  background-color: #141E27;
  color: #FFFFFF;
  border-color: #141E27;
}
.button.dark:hover,
button.dark:hover,
input[type=submit].dark:hover,
input[type=reset].dark:hover,
input[type=button].dark:hover {
  text-decoration: none;
}
.button.dark:hover, .button.dark:active, .button.dark:focus,
button.dark:hover,
button.dark:active,
button.dark:focus,
input[type=submit].dark:hover,
input[type=submit].dark:active,
input[type=submit].dark:focus,
input[type=reset].dark:hover,
input[type=reset].dark:active,
input[type=reset].dark:focus,
input[type=button].dark:hover,
input[type=button].dark:active,
input[type=button].dark:focus {
  background: #0b1116;
  border-color: #0b1116;
}
.button.dark.pending,
button.dark.pending,
input[type=submit].dark.pending,
input[type=reset].dark.pending,
input[type=button].dark.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #141E27 40%, #37526a 50%, #141E27 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.outline-main,
button.outline-main,
input[type=submit].outline-main,
input[type=reset].outline-main,
input[type=button].outline-main {
  border-color: #00D395;
  color: #00D395;
}
.button.outline-main:hover,
button.outline-main:hover,
input[type=submit].outline-main:hover,
input[type=reset].outline-main:hover,
input[type=button].outline-main:hover {
  background: #f2fdfa;
  color: #00a071;
}
.button.outline-main.pending,
button.outline-main.pending,
input[type=submit].outline-main.pending,
input[type=reset].outline-main.pending,
input[type=button].outline-main.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #F9FAFB 40%, white 50%, #F9FAFB 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.outline-borrow,
button.outline-borrow,
input[type=submit].outline-borrow,
input[type=reset].outline-borrow,
input[type=button].outline-borrow {
  border-color: #9669ED;
  color: #9669ED;
}
.button.outline-borrow:hover,
button.outline-borrow:hover,
input[type=submit].outline-borrow:hover,
input[type=reset].outline-borrow:hover,
input[type=button].outline-borrow:hover {
  background: #faf8fe;
  color: #763be8;
}
.button.outline-borrow.pending,
button.outline-borrow.pending,
input[type=submit].outline-borrow.pending,
input[type=reset].outline-borrow.pending,
input[type=button].outline-borrow.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #F9FAFB 40%, white 50%, #F9FAFB 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.outline-neutral,
button.outline-neutral,
input[type=submit].outline-neutral,
input[type=reset].outline-neutral,
input[type=button].outline-neutral {
  border-color: #546E7A;
  color: #546E7A;
}
.button.outline-neutral:hover,
button.outline-neutral:hover,
input[type=submit].outline-neutral:hover,
input[type=reset].outline-neutral:hover,
input[type=button].outline-neutral:hover {
  background: #f6f8f8;
  color: #3f535c;
}
.button.outline-neutral.pending,
button.outline-neutral.pending,
input[type=submit].outline-neutral.pending,
input[type=reset].outline-neutral.pending,
input[type=button].outline-neutral.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #F9FAFB 40%, white 50%, #F9FAFB 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.outline-dark,
button.outline-dark,
input[type=submit].outline-dark,
input[type=reset].outline-dark,
input[type=button].outline-dark {
  border-color: #141E27;
  color: #141E27;
}
.button.outline-dark:hover,
button.outline-dark:hover,
input[type=submit].outline-dark:hover,
input[type=reset].outline-dark:hover,
input[type=button].outline-dark:hover {
  background: #f3f4f4;
  color: #030405;
}
.button.outline-dark.pending,
button.outline-dark.pending,
input[type=submit].outline-dark.pending,
input[type=reset].outline-dark.pending,
input[type=button].outline-dark.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #F9FAFB 40%, white 50%, #F9FAFB 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button.dark-blue,
button.dark-blue,
input[type=submit].dark-blue,
input[type=reset].dark-blue,
input[type=button].dark-blue {
  background-color: #627eea;
  color: #FFFFFF;
  border-color: #627eea;
}
.button.dark-blue:hover,
button.dark-blue:hover,
input[type=submit].dark-blue:hover,
input[type=reset].dark-blue:hover,
input[type=button].dark-blue:hover {
  text-decoration: none;
}
.button.dark-blue:hover, .button.dark-blue:active, .button.dark-blue:focus,
button.dark-blue:hover,
button.dark-blue:active,
button.dark-blue:focus,
input[type=submit].dark-blue:hover,
input[type=submit].dark-blue:active,
input[type=submit].dark-blue:focus,
input[type=reset].dark-blue:hover,
input[type=reset].dark-blue:active,
input[type=reset].dark-blue:focus,
input[type=button].dark-blue:hover,
input[type=button].dark-blue:active,
input[type=button].dark-blue:focus {
  background: #4c6ce7;
  border-color: #4c6ce7;
}
.button.dark-blue.pending,
button.dark-blue.pending,
input[type=submit].dark-blue.pending,
input[type=reset].dark-blue.pending,
input[type=button].dark-blue.pending {
  border-color: transparent;
  background: linear-gradient(120deg, #627eea 40%, #bcc8f6 50%, #627eea 60%);
  background-size: 300%;
  animation: AnimationName 2s linear infinite;
  cursor: default;
}
@keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button:disabled,
button:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
input[type=button]:disabled {
  background: #CCD6DD !important;
  border-color: #CCD6DD !important;
  color: #FFFFFF !important;
}
.button.max,
button.max,
input[type=submit].max,
input[type=reset].max,
input[type=button].max {
  border: none;
  text-align: right;
  padding: 0 1.33rem 0 0;
  color: #ACBBC2;
  background: none;
}
.button.max:hover,
button.max:hover,
input[type=submit].max:hover,
input[type=reset].max:hover,
input[type=button].max:hover {
  color: #141E27;
}

.button.long-text {
  padding: 1.2rem 0.2rem;
}

.button + .button {
  margin-left: 0.665rem;
}

.connecting-ring {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 88px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  background-size: 88px;
  background-repeat: no-repeat;
  background-position: center;
  background: #00D395;
  border-color: #00D395;
}
.connecting-ring--for-borrowing {
  background: #9669ED;
  border-color: #9669ED;
}
.connecting-ring--error {
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100px;
  background-color: transparent;
  border-color: transparent;
  background-image: url(/compound-components/assets/icn-ledger-error-no-bkg.svg);
}

.connecting-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 88.63%;
  height: 88.63%;
  margin: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  margin: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dot-indicator {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  display: inline-block;
}
.dot-indicator.red {
  background-color: #F35454;
}
.dot-indicator.yellow {
  background-color: #FFD24A;
}
.dot-indicator.green {
  background-color: #00D395;
}
.dot-indicator.kovan {
  background-color: #6C58F6;
}
.dot-indicator.rinkeby {
  background-color: #EEC55C;
}
.dot-indicator.goerli {
  background-color: #5197EB;
}
.dot-indicator.ropsten {
  background-color: #EC598D;
}

.dropdown {
  --dropdownHeight: 3rem;
  --dropdownWidth: 7.75rem;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.dropdown--full {
  --dropdownHeight: 58px;
  --dropdownWidth: 100%;
}
.dropdown--big {
  --dropdownHeight: 4.5rem;
  --dropdownWidth: 17.75rem;
}
.dropdown--currency {
  --dropdownHeight: 1.25rem;
  --dropdownWidth: 76px;
}
@media (max-width: 40em) {
  .dropdown--currency {
    --dropdownHeight: 2.2rem;
    --dropdownWidth: 70px;
  }
}
.dropdown--language {
  --dropdownHeight: 36px;
  --dropdownWidth: 110px;
}
@media (max-width: 40em) {
  .dropdown--language {
    --dropdownHeight: 40px;
    --dropdownWidth: 110px;
  }
}
.dropdown--network {
  --dropdownHeight: 36px;
  --dropdownWidth: 100px;
}
.dropdown__selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #070A0E;
  padding: 0.75rem;
  border-radius: 3px;
  width: var(--dropdownWidth);
  height: var(--dropdownHeight);
}
.dropdown__selected::after {
  content: "";
  width: 6px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/compound-components/assets/icn_updown.png);
}
.dropdown__selected--dark2 {
  background-color: #141E27;
}
.dropdown__selected--light-1 {
  background-color: #FFFFFF;
  border: 0.5px solid #eff0f1;
}
.dropdown__selected--language {
  align-items: center;
  justify-content: flex-end;
  background-color: transparent;
  margin-right: -0.75rem;
  padding-left: 0;
}
.dropdown__selected--language::after {
  width: 0;
  height: 0;
  background-image: none;
}
@media (max-width: 40em) {
  .dropdown__selected--language {
    justify-content: space-between;
    margin-right: 0rem;
    margin-left: 0rem;
    padding-right: 0;
  }
}
.dropdown__selected--light {
  background-color: #fff;
  border-color: #CCD6DD;
  border-style: solid;
  border-width: 1px;
  border-radius: 0;
}
.dropdown__selected--light::after {
  content: "";
  width: 15px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/compound-components/assets/icn-dropdown-closed.svg);
}
.dropdown__selected--light.active::after {
  background-image: url(/compound-components/assets/icn-dropdown-open.svg);
  transition: all 0.2s ease-in-out;
}
.dropdown__selected--light.chosen p {
  color: #141E27;
}
.dropdown__selected--light--borrow::after {
  background-image: url(/compound-components/assets/icn-dropdown-closed-purple.svg);
}
.dropdown__selected--light--borrow.active::after {
  background-image: url(/compound-components/assets/icn-dropdown-open-purple.svg);
}
.dropdown p {
  flex: 1;
  margin-left: 0.6875rem;
  line-height: 14px;
  color: #CCD6DD;
}
.dropdown__options {
  position: absolute;
  background-color: #070A0E;
  border-radius: 3px;
  margin-top: 0.45rem;
  width: var(--dropdownWidth);
  height: var(--dropdownHeight);
  max-height: 0;
  top: var(--dropdownHeight);
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.25s ease, opacity 0.5s linear;
  z-index: 20;
}
.dropdown__options.active {
  visibility: visible;
  height: auto;
  min-height: var(--dropdownHeight);
  max-height: calc(var(--dropdownHeight) * 5.52);
  opacity: 1;
  transition: opacity 0.2s linear;
  overflow-y: scroll;
  transform: translateY(0);
  animation: bounce 0.3s ease;
}
.dropdown__options--footer {
  height: 0;
  background-color: #ffffff;
  margin-top: 0;
  top: auto;
  bottom: 2rem;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.15);
  border-radius: 4px;
}
.dropdown__options--network {
  height: 0;
  margin-top: 0;
  top: auto;
  bottom: 2.5rem;
  border-radius: 4px;
}
@media (max-width: 40em) {
  .dropdown__options--network {
    bottom: 3.5rem;
  }
}
.dropdown__options--light {
  background-color: #fff;
  border-color: #CCD6DD;
  border-style: solid;
  border-width: 1px;
}
@keyframes bounce {
  0% {
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.dropdown__option {
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 0.75rem;
  width: 100%;
  height: var(--dropdownHeight);
  opacity: 0;
}
.dropdown__option:hover {
  background-color: #10161f;
}
.active > .dropdown__option {
  opacity: 1;
  transition: opacity 0.25s linear;
}
.dropdown__option p[class*=align-right] {
  text-align: right;
}
.dropdown__option--light:hover {
  background-color: #F9FAFB;
}
.dropdown__option--light:hover p {
  color: #00D395;
}
.dropdown__option--light-no-hover-text:hover {
  background-color: #F9FAFB;
}
.dropdown__option--darktext p {
  color: #070A0E;
}
.dropdown__option--divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown__option--divider:last-child {
  border-bottom: none;
}
.dropdown__option--dark2 {
  background-color: #141E27;
}
.dropdown__option--dark2:hover {
  background-color: #141E27;
}
.dropdown__option--language {
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
}
.dropdown__option--language:hover {
  background-color: transparent;
  color: #00D395;
}
@media (max-width: 40em) {
  .dropdown__option--language {
    justify-content: space-between;
    padding-left: 0;
  }
}

.hamburger {
  position: relative;
  z-index: 25;
  user-select: none;
}
.hamburger span {
  display: block;
  margin-left: auto;
  width: 20px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #FFFFFF;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.hamburger.active span {
  opacity: 1;
  transform: rotate(45deg) translate(0, 2px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(1px, -5px);
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
}

.animated-background--super-dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
}

.icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
}
.icon--small {
  width: 1.5625rem;
  height: 1.5625rem;
}
.icon--large {
  width: 3.375rem;
  height: 3.375rem;
  min-width: 3.375rem;
  min-height: 3.375rem;
}
.icon--FEI {
  background-image: url("/compound-components/assets/asset_FEI.svg");
}
.icon--AAVE {
  background-image: url("/compound-components/assets/asset_AAVE.svg");
}
.icon--BAT {
  background-image: url("/compound-components/assets/asset_BAT.svg");
}
.icon--CASH {
  background-image: url("/compound-components/assets/asset_CASH--green.svg");
}
.icon--CASH--dark {
  background-image: url("/compound-components/assets/asset_CASH--white.svg");
}
.icon--COMP {
  background-image: url("/compound-components/assets/asset_COMP.svg");
}
.icon--DAI {
  background-image: url("/compound-components/assets/asset_DAI.svg");
}
.icon--ETH, .icon--WETH {
  background-image: url("/compound-components/assets/asset_ETH.svg");
}
.icon--LINK {
  background-image: url("/compound-components/assets/asset_LINK.svg");
}
.icon--MKR {
  background-image: url("/compound-components/assets/asset_MKR.svg");
}
.icon--REP {
  background-image: url("/compound-components/assets/asset_REP.svg");
}
.icon--SAI {
  background-image: url("/compound-components/assets/asset_SAI.svg");
}
.icon--SUSHI {
  background-image: url("/compound-components/assets/asset_SUSHI.svg");
}
.icon--TUSD {
  background-image: url("/compound-components/assets/asset_TUSD.svg");
}
.icon--UNI {
  background-image: url("/compound-components/assets/asset_UNI.svg");
}
.icon--USDC {
  background-image: url("/compound-components/assets/asset_USDC.svg");
}
.icon--USDP {
  background-image: url("/compound-components/assets/asset_USDP.svg");
}
.icon--USDT {
  background-image: url("/compound-components/assets/asset_USDT.svg");
}
.icon--WBTC, .icon--WBTC2 {
  background-image: url("/compound-components/assets/asset_BTC.svg");
}
.icon--YFI {
  background-image: url("/compound-components/assets/asset_YFI.svg");
}
.icon--ZRX {
  background-image: url("/compound-components/assets/asset_ZRX.svg");
}
.icon--coinbase {
  background-image: url("/compound-components/assets/icn-coinbase-wallet.svg");
}
.icon--ledger {
  background-image: url("/compound-components/assets/icn-ledger.svg");
}
.icon--metamask {
  background-image: url("/compound-components/assets/icn-metamask.svg");
}

input {
  border: none;
  border-radius: 5px;
  outline: 0;
  width: 100%;
  padding: 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #141E27;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

input::placeholder {
  font-weight: 400;
  color: #ACBBC2;
  padding-right: 1.6rem;
}

.input-action-panel {
  position: relative;
  width: 25.5rem;
}
.input-action-panel [class*=col] {
  padding: 0 0;
}
.input-action-panel.legacy-panel {
  background: #F9FAFB;
}
.input-action-panel.legacy-panel .icon, .input-action-panel.legacy-panel .asset {
  display: inline-block;
}
.input-action-panel.legacy-panel .header .icon, .input-action-panel.legacy-panel .header .asset {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0.5rem;
  transform: translateY(25%);
}
@media (max-width: 40em) {
  .input-action-panel.legacy-panel .header .title {
    top: 0.665rem;
  }
  .input-action-panel.legacy-panel .header .title .icon, .input-action-panel.legacy-panel .header .title .asset {
    margin-top: -0.665rem;
  }
}
.input-action-panel .center-icon {
  width: 4.75rem;
  height: 4.75rem;
}
.input-action-panel .tab-group {
  width: 100%;
}
.input-action-panel .tab-group .tab-group__option {
  font-size: 0.75rem;
  margin-left: 0;
  text-align: center;
  text-transform: uppercase;
  width: 50%;
}
.input-action-panel .tab-group .tab-group__line {
  background-color: rgba(170, 184, 193, 0.1);
  height: 1px;
  margin-top: -1px;
}
.input-action-panel p {
  margin-top: 1.25rem;
  color: #AAB8C1;
}
.input-action-panel p.small {
  font-size: 12px;
}
.input-action-panel .description {
  color: #AAB8C1;
  text-align: center;
}
.input-action-panel .enable-asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3.5rem 1.75rem 3.5rem 1.75rem;
}
.input-action-panel .enable-asset.extra-bottom-margin {
  margin-bottom: 7rem;
}
.input-action-panel .enable-asset .ctoken {
  background-repeat: no-repeat;
}
.input-action-panel .enable-asset .etherscan-button {
  width: 22rem;
  position: absolute;
  left: 1.75rem;
  bottom: 0.875rem;
}
.input-action-panel .input {
  position: relative;
}
.input-action-panel .input button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.input-action-panel input {
  width: 22rem;
  height: 82px;
  margin: 32px 1.75rem 30px 1.75rem;
  background: #F9FAFB;
  font-size: 2.625rem;
  font-weight: 500;
  text-align: center;
  color: #141E27;
}
.input-action-panel input.supply {
  caret-color: #00D395;
}
.input-action-panel input.borrow {
  caret-color: #9669ED;
}
.input-action-panel .max {
  display: block;
  padding: 4.2rem 1.75rem 4.875rem 0.875rem;
  text-align: center;
  width: auto;
  background: #F9FAFB;
}
.input-action-panel .info {
  background: #FFFFFF;
  padding-bottom: 9rem;
}
.input-action-panel .form {
  padding: 2.25rem 1.75rem 0 1.75rem;
}
.input-action-panel .form .label-link label {
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.input-action-panel .form .label-link .line-icon {
  margin-left: 0.5rem;
}
.input-action-panel .form .label-link:hover label {
  color: #00D395;
}
.input-action-panel .form .label-link:hover .line-icon {
  background-image: url("/compound-components/assets/icn-external-link-green.svg");
}
.input-action-panel .form .row {
  margin-left: 0;
  margin-right: 0;
}
.input-action-panel .form:nth-of-type(2) {
  padding-top: 1.75rem;
}
.input-action-panel .calculation .icon {
  margin-top: -0.3rem;
  margin-bottom: -0.45rem;
  margin-right: 0.5rem;
}
.input-action-panel .calculation:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.input-action-panel .market-bar {
  margin: -0.75rem 1.75rem 0 1.75rem;
}
.input-action-panel .market-bar .bar {
  width: 22rem;
  background: rgba(40, 49, 55, 0.1);
  border-radius: 100px;
}
.input-action-panel .market-bar .fill {
  border-radius: 100px;
}
.input-action-panel .submit-button {
  width: 22rem;
  position: absolute;
  bottom: 3.9375rem;
  left: 1.75rem;
}
.input-action-panel .faucet-link {
  position: absolute;
  bottom: 0.875rem;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 40em) {
  .input-action-panel .faucet-link {
    bottom: 0;
  }
}
.input-action-panel .bottom-note {
  position: absolute;
  bottom: 1.75rem;
  left: 1.75rem;
  right: 1.75rem;
}
.input-action-panel .bottom-note .calculation {
  padding: 0;
  margin: 0;
}
.input-action-panel .bottom-note .calculation:last-of-type {
  margin: 0;
}
@media (max-width: 40em) {
  .input-action-panel .bottom-note {
    bottom: 0.875rem;
  }
}
@media (max-width: 40em) {
  .input-action-panel {
    width: 100%;
  }
  .input-action-panel.panel {
    width: 100%;
    border-radius: 3px;
  }
  .input-action-panel input {
    width: 100%;
    padding: 3.225rem 1.33rem 3.225rem 1.33rem;
    margin: 0;
  }
  .input-action-panel .max {
    margin: 0.125rem 0 0.125rem 0;
    padding: 0 1.33rem 0.665rem;
  }
  .input-action-panel .action-button {
    width: 100%;
    padding: 1.75rem;
  }
  .input-action-panel .action-button .submit-button {
    width: 100%;
    position: static;
  }
  .input-action-panel .info {
    padding-bottom: 1.75rem;
  }
  .input-action-panel .info .etherscan-button {
    width: 100%;
    position: static;
    padding: 0 1.75rem 0 1.75rem;
  }
  .input-action-panel .info .etherscan-button .submit-button {
    width: 100%;
    position: static;
  }
  .input-action-panel .enable-asset {
    margin-top: 3.125rem;
    margin-bottom: 1.33rem;
  }
  .input-action-panel .enable-asset.extra-bottom-margin {
    margin-bottom: 4.8125rem;
  }
  .input-action-panel .enable-asset .etherscan-button {
    width: auto;
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    bottom: 0.875rem;
  }
  .input-action-panel .action-selector .button {
    height: auto;
  }
  .input-action-panel .market-bar .bar {
    width: 100%;
  }
}

.line-icon {
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 17px;
  height: 17px;
}
.line-icon--copy {
  background-image: url("/compound-components/assets/icn-copy.svg");
}
.line-icon--copy:hover {
  background-image: url("/compound-components/assets/icn-copy-green.svg");
}
.line-icon--copy--blue:hover {
  background-image: url("/compound-components/assets/icn-copy-blue.svg");
}
.line-icon--external-link {
  background-image: url("/compound-components/assets/icn-external-link.svg");
}
.line-icon--external-link:hover {
  background-image: url("/compound-components/assets/icn-external-link-green.svg");
}
.line-icon--external-link--gray {
  background-image: url("/compound-components/assets/icn-external-link-gray.svg");
}
.line-icon--external-link--green {
  background-image: url("/compound-components/assets/icn-external-link-green.svg");
}
.line-icon--external-link--black {
  background-image: url("/compound-components/assets/icn-external-link-black.svg");
}
.line-icon--complete {
  background-image: url("/compound-components/assets/icn-complete.svg");
}
.line-icon--edit {
  height: 30px;
  width: 30px;
  background-image: url("/compound-components/assets/icn-edit.svg");
}
.line-icon--plus {
  height: 30px;
  width: 30px;
  background-image: url("/compound-components/assets/icn-plus.svg");
}
.line-icon--small {
  width: 12px;
  height: 12px;
}

.mobile-header {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-content: center;
  margin: 0 auto;
  padding-top: 7.98rem;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow: scroll;
  opacity: 0;
  background-color: #070A0E;
  -webkit-font-smoothing: antialiased;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.3s ease-in;
}
.mobile-header.active {
  transform: none;
  opacity: 1;
}
.mobile-header.light, .mobile-header.header--light {
  background-color: #FFFFFF;
}
.mobile-header.light li, .mobile-header.header--light li {
  color: #141E27;
  background-color: #FFFFFF;
}
.mobile-header .links {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-header ul {
  list-style-type: none;
  width: 100%;
  padding-left: 0px;
  background-color: transparent;
  margin-bottom: 0;
}
.mobile-header li {
  display: flex;
  background-color: transparent;
  width: 100%;
  padding-top: 22px;
  padding-bottom: 22px;
  color: #FFFFFF;
}
.mobile-header li p {
  margin: 0 auto;
}
.mobile-header .dapp, .mobile-header .header__button {
  margin-bottom: 55px;
  margin-left: 42px;
  margin-right: 42px;
  padding-top: 23px !important;
  padding-bottom: 23px !important;
}

.cover {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.cover.clear {
  background: rgba(0, 0, 0, 0);
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.modal [class*=container] {
  z-index: 2;
}
.modal .container {
  max-height: 95%;
  margin-top: 1.33rem;
  margin-bottom: 1.33rem;
  overflow-y: auto;
}
@media (max-width: 40em) {
  .modal .container {
    width: 95%;
  }
  .modal .container .title {
    top: 0.665rem;
  }
  .modal .container .close-x {
    top: 0.2216666667rem;
  }
  .modal .container .copy {
    margin: 1.33rem;
  }
  .modal .container .form {
    padding: 0 1.33rem 1.33rem;
  }
}
.modal .legacy-panel {
  margin: 0;
}
.modal .legacy-panel .header {
  position: relative;
}
@media (min-width: 60em) {
  .modal .legacy-panel .header {
    padding: 1.995rem;
  }
}
.modal .legacy-panel .header .back-arrow {
  z-index: 3;
  position: absolute;
  bottom: 1.33rem;
  left: 1.33rem;
}
.modal .legacy-panel .header .back-arrow button {
  background-color: transparent;
  background-image: url("/compound-components/assets/icn-arrow-back-dark.svg");
  background-size: 100% 100%;
  border: 0;
  padding: 0.5rem 1rem;
}
.modal .legacy-panel .header .title {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  bottom: 0.76rem;
  right: 1.33rem;
}
@media (min-width: 60em) {
  .modal .legacy-panel .header .title {
    bottom: 1.33rem;
    right: 1.33rem;
  }
}
.modal .legacy-panel .header .close-x {
  position: absolute;
  bottom: 0.76rem;
  right: 0.665rem;
}
@media (min-width: 60em) {
  .modal .legacy-panel .header .close-x {
    bottom: 1.33rem;
    right: 1.33rem;
  }
}
.modal .legacy-panel .header .close-x button {
  background-color: transparent;
  background-image: url("/compound-components/assets/icon_close_x.svg");
  background-size: 100% 100%;
  border: 0;
  padding: 0.5rem 1rem;
}
.modal .legacy-panel .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.66rem 0;
}
.modal .legacy-panel .copy p {
  font-size: 1rem;
}
@media (min-width: 60em) {
  .modal .legacy-panel .copy {
    font-size: 16px;
  }
}
.modal .legacy-panel .copy .icon {
  height: 3rem;
  width: 3rem;
  margin: 0 0 0.6rem 0;
}
.modal .legacy-panel .available {
  color: #141E27;
}
.modal .legacy-panel .form {
  padding: 0 3.99rem 2.66rem;
}
.modal .actions {
  margin: 1.33rem 1.33rem;
}

.panel {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
  border-radius: 4px;
  margin-bottom: 1.33rem;
}
.panel--dark {
  background: #141E27;
}
.panel--dark .panel__header {
  border-bottom: 1px solid #070A0E;
}
.panel--dark .panel__header h4 {
  color: #ffffff;
}
.panel--dark .panel__labels {
  background: #141E27;
  border-bottom: 1px solid #070A0E;
}
.panel__header {
  display: flex;
  flex-flow: inherit;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.panel__header h4 {
  margin: 0;
}
.panel__labels {
  display: flex;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
}
.panel__labels > div:first-child {
  padding-left: 0;
}
.panel__labels > div:last-child {
  padding-right: 0;
}
.panel__labels--no-header {
  border-radius: 4px 4px 0 0;
}
.panel__section {
  border-top: 1px solid #070A0E;
}
.panel__section--row-dividers > div {
  border-right: 1px solid #070A0E;
}
.panel__section--row-dividers > div:last-child {
  border-right: none;
}
.panel__section__content {
  padding: 1rem 1.75rem;
}
.panel__footer {
  padding: 1.145rem 1.9375rem;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
  display: flex;
  justify-content: center;
  color: #050f19;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.panel__footer:hover {
  color: #00D395;
}
.panel__footer--disabled {
  color: #CCD6DD;
  user-select: none;
}
.panel__footer--disabled:hover {
  color: #CCD6DD;
  cursor: initial;
}
.panel__pager {
  padding: 2rem 1.9375rem;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #050f19;
}
@media (min-width: 60em) {
  .panel__pager {
    padding: 1.145rem 1.9375rem;
  }
}
.panel__pager__previous {
  position: absolute;
  left: 1.75rem;
}
.panel__pager__previous::before {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  margin-right: 0.665rem;
}
.panel__pager__previous label {
  text-transform: uppercase;
  color: #141E27;
  font-weight: 500;
  cursor: pointer;
}
.panel__pager__previous:hover {
  color: #00D395;
}
.panel__pager__previous:hover label {
  color: #00D395;
}
.panel__pager__indicator {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.panel__pager__indicator__text {
  color: #b8c2cc;
  padding: 0 0.5rem;
}
.panel__pager__indicator__text--active {
  color: #141E27;
}
.panel__pager__next {
  position: absolute;
  right: 1.75rem;
}
.panel__pager__next::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  transform: rotate(45deg);
  margin-left: 0.665rem;
}
.panel__pager__next label {
  text-transform: uppercase;
  color: #141E27;
  font-weight: 500;
  cursor: pointer;
}
.panel__pager__next:hover {
  color: #00D395;
}
.panel__pager__next:hover label {
  color: #00D395;
}

.legacy-panel {
  background: #FFFFFF;
  border: 1px solid #F9FAFB;
  border-radius: 3px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.33rem;
}
.legacy-panel .header {
  display: flex;
  flex-flow: inherit;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.33rem 1.995rem;
  font-size: 1.1rem;
}
.legacy-panel .header label {
  margin: 0;
}
.legacy-panel .header h4,
.legacy-panel .header h3 {
  margin: 0;
}
.legacy-panel .labels {
  display: flex;
  border-bottom: 1px solid #CCD6DD;
  padding: 1rem 1.33rem 1rem;
}
.legacy-panel .content {
  padding: 0 1.995rem;
}
.legacy-panel .content .text-largest {
  margin: 1.995rem 0;
}
.legacy-panel .content p {
  text-align: center;
  color: #546E7A;
}
.legacy-panel .content .demi.row {
  padding: 1.33rem 0 1.995rem;
}
.legacy-panel .calculation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #CCD6DD;
  padding: 1.33rem 0;
}
.legacy-panel .calculation .description {
  color: #90A4AE;
}
.legacy-panel .calculation:last-of-type {
  border-bottom: none;
  margin-bottom: 1rem;
}

.connecting-ring {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 88px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  background-size: 88px;
  background-repeat: no-repeat;
  background-position: center;
  background: #00D395;
  border-color: #00D395;
}
.connecting-ring--for-borrowing {
  background: #9669ED;
  border-color: #9669ED;
}
.connecting-ring--error {
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100px;
  background-color: transparent;
  border-color: transparent;
  background-image: url(/compound-components/assets/icn-ledger-error-no-bkg.svg);
}

.connecting-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 88.63%;
  height: 88.63%;
  margin: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  margin: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.connect-wallet h2 {
  color: #141E27;
}
.connect-wallet h3 {
  color: #141E27;
}
.connect-wallet h4 {
  color: #141E27;
}
.connect-wallet p {
  color: #657786;
}
.connect-wallet p {
  color: #657786;
}
.connect-wallet p[class*=center-text] {
  text-align: center;
}
.connect-wallet h4 {
  margin-top: 1em;
  margin-bottom: 0.25em;
}
.connect-wallet a {
  text-decoration: none;
  text-transform: none;
}
.connect-wallet .container-small {
  min-width: 30em;
  max-width: 30em;
}
.connect-wallet .legacy-panel .header {
  border-bottom: none;
  height: 48px;
}
.connect-wallet .legacy-panel .header .back-arrow {
  display: flex;
  align-items: center;
}
.connect-wallet .legacy-panel .header .back-arrow .icon {
  background-image: url(/compound-components/assets/icn-arrow-back-dark.svg);
  width: 1.5rem;
  opacity: 0.7;
}
.connect-wallet .legacy-panel .header .back-arrow:hover .icon {
  opacity: 1;
}
.connect-wallet .connect-wallet-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0.665rem;
  padding-right: 0.665rem;
  padding-bottom: 1.33rem;
}
.connect-wallet .connect-wallet-copy--small-top {
  margin-top: -1.33rem;
}
.connect-wallet .connect-wallet-copy__mark {
  width: 78px;
  height: 78px;
  background-image: url(/compound-components/assets/compound-mark.svg);
  background-size: 50%;
  background-position: center;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.07);
  background-repeat: no-repeat;
  border-radius: 100px;
}
.connect-wallet .connect-wallet-copy__mark--error {
  background-image: url(/compound-components/assets/icn-ledger-error-no-bkg.svg);
}
.connect-wallet .connect-wallet-copy__no-panel-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.connect-wallet .connect-wallet-copy__no-panel-header h3 {
  margin-bottom: 0;
}
.connect-wallet .connect-wallet-copy__back-arrow-holder {
  width: 100%;
  height: 16px;
  padding-top: 1.33rem;
  padding-bottom: 1.33rem;
}
.connect-wallet .connect-wallet-copy__back-arrow-holder__back-arrow {
  cursor: pointer;
  height: 16px;
  width: 16px;
  background-image: url(/compound-components/assets/icn-arrow-back-dark.svg);
  opacity: 0.7;
}
.connect-wallet .connect-wallet-copy__back-arrow-holder__back-arrow:hover {
  opacity: 1;
}
.connect-wallet .connect-wallet-copy--show-border {
  width: 380px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding-left: 1.33rem;
  padding-right: 1.33rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
}
.connect-wallet .connect-wallet-copy div.dropdown .line {
  margin: 0;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light p:nth-of-type(1) {
  color: #141E27;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light p:only-child {
  color: #657786;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light:hover p {
  color: #00D395;
}
.connect-wallet .connect-wallet-copy div.bullet-points p {
  margin-top: 1.33rem;
  padding-left: 40px;
  padding-right: 40px;
}
.connect-wallet .connect-wallet-copy button {
  width: 17.75rem;
  margin-bottom: 64px;
}
.connect-wallet .connect-wallet-icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
}
.connect-wallet .connect-wallet-icon--coinbase {
  background-image: url(/compound-components/assets/icn-coinbase-wallet.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--ledger {
  background-image: url(/compound-components/assets/icn-ledger.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--metamask {
  background-image: url(/compound-components/assets/icn-metamask.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--tally {
  background-image: url(/compound-components/assets/icn-tally.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--wallet-connect {
  background-image: url(/compound-components/assets/icn-wallet-connect.svg);
  margin: 0;
}
.connect-wallet .connect-choices {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.connect-wallet .connect-item {
  width: 380px;
  height: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 38px;
  padding-right: 38px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-radius: 2px;
  transition: box-shadow 0.3s ease-in-out;
}
.connect-wallet .connect-item--box-border {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 0.3125rem;
}
.connect-wallet .connect-item .arrow {
  height: 25px;
  width: 25px;
  margin: 0;
}
:hover > .connect-wallet .connect-item .arrow, .connect-wallet .connect-item .arrow:hover {
  -webkit-transform: none;
  transform: none;
}
.connect-wallet .connect-item:hover {
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
}
.connect-wallet .connect-item:hover .connect-item-text {
  color: #141E27;
}
.connect-wallet .connect-item .connect-item-text {
  flex-grow: 1;
  margin-left: 20px;
  margin-bottom: 0;
}
.connect-wallet .connect-item .connect-item-text > * {
  pointer-events: auto;
}
.connect-wallet .line {
  height: 1px;
  margin-left: 38px;
  margin-right: 38px;
  background: #AAB8C1;
  opacity: 0.3;
}
.connect-wallet .connecting-ring {
  margin-top: 66px;
  margin-bottom: 96px;
}
.connect-wallet .dropdown:nth-of-type(1) {
  margin-top: 1em;
  margin-bottom: 0.4em;
}
.connect-wallet .dropdown:nth-of-type(2) {
  margin-bottom: 2em;
}
.connect-wallet .terms-agreement p {
  color: #AAB8C1;
}
.connect-wallet .terms-agreement p.small {
  font-size: 12px;
}
.connect-wallet .terms-agreement a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.connect-wallet .terms-agreement a:hover {
  border-bottom: 1px solid #00D395;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
}

.animated-background--super-dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
}

.panel {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
  border-radius: 4px;
  margin-bottom: 1.33rem;
}
.panel--dark {
  background: #141E27;
}
.panel--dark .panel__header {
  border-bottom: 1px solid #070A0E;
}
.panel--dark .panel__header h4 {
  color: #ffffff;
}
.panel--dark .panel__labels {
  background: #141E27;
  border-bottom: 1px solid #070A0E;
}
.panel__header {
  display: flex;
  flex-flow: inherit;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.panel__header h4 {
  margin: 0;
}
.panel__labels {
  display: flex;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
}
.panel__labels > div:first-child {
  padding-left: 0;
}
.panel__labels > div:last-child {
  padding-right: 0;
}
.panel__labels--no-header {
  border-radius: 4px 4px 0 0;
}
.panel__section {
  border-top: 1px solid #070A0E;
}
.panel__section--row-dividers > div {
  border-right: 1px solid #070A0E;
}
.panel__section--row-dividers > div:last-child {
  border-right: none;
}
.panel__section__content {
  padding: 1rem 1.75rem;
}
.panel__footer {
  padding: 1.145rem 1.9375rem;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
  display: flex;
  justify-content: center;
  color: #050f19;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.panel__footer:hover {
  color: #00D395;
}
.panel__footer--disabled {
  color: #CCD6DD;
  user-select: none;
}
.panel__footer--disabled:hover {
  color: #CCD6DD;
  cursor: initial;
}
.panel__pager {
  padding: 2rem 1.9375rem;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #050f19;
}
@media (min-width: 60em) {
  .panel__pager {
    padding: 1.145rem 1.9375rem;
  }
}
.panel__pager__previous {
  position: absolute;
  left: 1.75rem;
}
.panel__pager__previous::before {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  margin-right: 0.665rem;
}
.panel__pager__previous label {
  text-transform: uppercase;
  color: #141E27;
  font-weight: 500;
  cursor: pointer;
}
.panel__pager__previous:hover {
  color: #00D395;
}
.panel__pager__previous:hover label {
  color: #00D395;
}
.panel__pager__indicator {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.panel__pager__indicator__text {
  color: #b8c2cc;
  padding: 0 0.5rem;
}
.panel__pager__indicator__text--active {
  color: #141E27;
}
.panel__pager__next {
  position: absolute;
  right: 1.75rem;
}
.panel__pager__next::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  transform: rotate(45deg);
  margin-left: 0.665rem;
}
.panel__pager__next label {
  text-transform: uppercase;
  color: #141E27;
  font-weight: 500;
  cursor: pointer;
}
.panel__pager__next:hover {
  color: #00D395;
}
.panel__pager__next:hover label {
  color: #00D395;
}

.legacy-panel {
  background: #FFFFFF;
  border: 1px solid #F9FAFB;
  border-radius: 3px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.33rem;
}
.legacy-panel .header {
  display: flex;
  flex-flow: inherit;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.33rem 1.995rem;
  font-size: 1.1rem;
}
.legacy-panel .header label {
  margin: 0;
}
.legacy-panel .header h4,
.legacy-panel .header h3 {
  margin: 0;
}
.legacy-panel .labels {
  display: flex;
  border-bottom: 1px solid #CCD6DD;
  padding: 1rem 1.33rem 1rem;
}
.legacy-panel .content {
  padding: 0 1.995rem;
}
.legacy-panel .content .text-largest {
  margin: 1.995rem 0;
}
.legacy-panel .content p {
  text-align: center;
  color: #546E7A;
}
.legacy-panel .content .demi.row {
  padding: 1.33rem 0 1.995rem;
}
.legacy-panel .calculation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #CCD6DD;
  padding: 1.33rem 0;
}
.legacy-panel .calculation .description {
  color: #90A4AE;
}
.legacy-panel .calculation:last-of-type {
  border-bottom: none;
  margin-bottom: 1rem;
}

.asset-list .icon {
  width: 2.25rem;
  height: 2.25rem;
}
.asset-list .icon--loading {
  width: 2.25rem;
  height: 2.25rem;
}
.asset-list .ctoken {
  width: 2.25rem;
  height: 2.25rem;
}

.asset {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.75rem;
  border-left: 2px solid transparent;
  padding-left: 1.625rem;
  text-transform: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: none;
}
.asset:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
.asset:hover {
  background: inherit;
}
.asset--dark {
  background: #141E27;
  border-bottom: 1px solid #070A0E;
}
.asset--dark:hover {
  border-left: 2px solid transparent;
  background: rgba(20, 30, 39, 0.98);
}
.asset--dark .balance {
  color: #ffffff;
}
.asset--dark .balance .label {
  padding-bottom: 4px;
}
.asset--no-hover {
  border-left: none;
  cursor: auto;
}
.asset--no-hover:hover {
  border-left: none;
}
.asset:last-child {
  border-bottom: none;
  border-radius: 0 0 3px 3px;
}
.asset--loading:hover {
  border-left: 2px solid transparent;
}
.asset:nth-of-type(4n + 2) .name--loading {
  width: 7.1875rem;
}
.asset:nth-of-type(4n + 3) .name--loading {
  width: 5.1875rem;
}
.asset:nth-of-type(4n + 4) .name--loading {
  width: 9.1875rem;
}
.asset:nth-of-type(4n + 5) .name--loading {
  width: 6.1875rem;
}

.identity {
  display: flex;
  align-items: center;
}
.identity .icon {
  margin-right: 1rem;
}
.identity .ctoken {
  margin-right: 1rem;
}
.identity .symbol {
  margin-left: 1rem;
  color: #ACBBC2;
}
.identity .symbol--loading {
  height: 0.75rem;
  width: 2.375rem;
}

.name--loading {
  height: 1rem;
  width: 4.1875rem;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .icon--loading, .identity .symbol--loading, .name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
}

.animated-background--super-dark {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
}

.docs {
  background-color: #F9FAFB;
  position: relative;
}
.docs section,
.docs section#supply {
  padding: 4rem 0 0 0;
}
.docs h4,
.docs h3.subsection {
  padding: 3rem 0 0 0;
}
.docs b {
  line-height: 1.5;
}
.docs .endpoint {
  display: inline-flex;
  margin-top: 1.5rem;
}
.docs .endpoint h4 {
  margin-right: 1rem;
  padding-top: 0;
  margin-bottom: 0;
}
.docs__main-navigation {
  background-color: #FFFFFF;
  height: 4.3125rem;
  border-top: 1px solid rgba(204, 214, 221, 0.5);
  border-bottom: 1px solid rgba(204, 214, 221, 0.5);
  padding: 10px 10px;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 19;
  user-select: none;
}
.docs__main-navigation__content {
  width: 100%;
  display: flex;
  z-index: 19;
  justify-content: space-between;
  user-select: none;
}
@media (min-width: 40em) {
  .docs__main-navigation__content {
    justify-content: flex-start;
  }
}
.docs__main-navigation__content a {
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.3rem 0;
  display: none;
}
@media (min-width: 40em) {
  .docs__main-navigation__content a {
    display: block;
  }
  .docs__main-navigation__content a:not(:first-child) {
    margin-left: 3.0625rem;
  }
}
.docs__main-navigation__content a.active {
  display: block;
  transition: padding 0.2s ease;
}
@media (min-width: 40em) {
  .docs__main-navigation__content a.active {
    border-bottom: 1px solid #141E27;
  }
}
.docs__main-navigation__content a.active:hover {
  border-bottom-color: #00D395;
}
.docs__main-navigation__content .chevron-container {
  user-select: none;
  background-color: #FFFFFF;
  justify-content: center;
  padding: 0;
  margin: 0px -2.33rem 0px 0px;
  width: 44px;
  height: 24px;
  display: flex;
}
@media (min-width: 40em) {
  .docs__main-navigation__content .chevron-container {
    display: none;
  }
}
.docs__main-navigation__content--mobile {
  position: absolute;
  display: none;
  flex-direction: column;
  align-content: center;
  margin: 0 auto;
  top: 4.25rem;
  left: 0px;
  width: 100%;
  height: auto;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  background-color: #FFFFFF;
  color: #141E27;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.3s ease-in;
  user-select: none;
}
.docs__main-navigation__content--mobile.active {
  opacity: 1;
  display: flex;
}
.docs__main-navigation__content--mobile a {
  font-weight: 400;
  letter-spacing: 0;
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 2.33rem;
  border-bottom: 1px solid rgba(204, 214, 221, 0.5);
  user-select: none;
}
.docs__main-navigation.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
}
.docs .fixed + .docs {
  margin-top: 4.3125rem;
}
.docs__main-section::after {
  content: "";
  background-color: #FFFFFF;
  position: absolute;
  left: 100%;
  margin-left: -1.33rem;
  top: 0;
  width: 100vw;
  height: 100%;
}
.docs__main-section .docs__content {
  position: relative;
  background-color: #FFFFFF;
  padding-bottom: 10rem;
}
@media (min-width: 40em) {
  .docs__main-section .docs__content {
    display: block;
    padding-left: 7rem;
  }
}
.docs__main-section--no-side-navigation::after {
  background-color: #F9FAFB;
}
.docs__main-section--no-side-navigation .docs__content {
  background-color: #F9FAFB;
  padding-left: calc(1.33rem / 2);
}
.docs__main-section--no-side-navigation .docs__content--no-padding {
  padding-left: 0;
}
.docs__content a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.docs__content a:hover {
  border-bottom: 1px solid #00D395;
}
.docs__content .ul-container {
  position: relative;
  padding: 0;
}
.docs__content .ul-container ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}
.docs__content .ul-container ul li {
  margin-bottom: 1rem;
  padding-left: 1.1rem;
}
.docs__content .ul-container ul li a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.docs__content .ul-container ul li a:hover {
  border-bottom: 1px solid #00D395;
}
.docs__content .ul-container ul li:last-child {
  margin-bottom: 0;
}
.docs__content .ul-container ul li::before {
  content: "•  ";
  color: #00D395;
  position: absolute;
  left: 0;
  margin-top: 0.26rem;
}
.docs__content .ul-container ol {
  margin-top: 10px;
}
.docs__content .ul-container ol li::before {
  content: "";
}
.docs__content .ul-container ul li {
  margin-bottom: 0.5rem;
  color: #657786;
}
.docs__content .ul-container ul li::before {
  margin-top: 0;
}
.docs__content ol li {
  margin-bottom: 1rem;
  padding-left: 1.1rem;
  color: #657786;
}
.docs__content ol li::before {
  margin-top: 0;
}
.docs sup {
  display: inline-block;
  font-size: 0.7rem;
}
.docs sup p {
  display: inline-block;
}
.docs ul {
  line-height: 1.5;
}
.docs .subheader {
  margin-top: 0.55rem;
}
.docs p {
  color: #657786;
}
.docs p + p {
  margin-top: 1.5rem;
}
.docs p.optional::after {
  content: "optional";
  border-radius: 3px;
  border: 1px solid #0DAEF3;
  color: #0DAEF3;
  padding: 0.3rem;
  font-size: 12px;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}
.docs p.notice {
  border: 1px solid #FFD24A;
  border-radius: 3px;
  padding: 0.5rem 0.8866666667rem;
  font-size: 0.9rem;
  color: #546E7A;
}
.docs p + .build-item {
  margin-top: 1.5rem;
}
.docs .build-item {
  border-bottom: none !important;
}
.docs img {
  padding: 40px;
  max-width: 100%;
}
.docs .indent-li,
.docs .indent-li::before {
  margin-left: 40px;
}
.docs__side-navigation {
  padding-right: 0 !important;
  display: none;
}
@media (min-width: 40em) {
  .docs__side-navigation {
    display: block;
  }
}
.docs__side-navigation__content {
  display: flex;
  flex-direction: column;
  top: 0;
  margin-top: 3rem;
  bottom: auto;
}
.docs__side-navigation__content .subsection,
.docs__side-navigation__content .section {
  margin-bottom: 0.5625rem;
  color: #141E27;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.25rem 0;
}
.docs__side-navigation__content .subsection.active,
.docs__side-navigation__content .section.active {
  color: #00D395;
  border-right: 2px solid #00D395;
}
.docs__side-navigation__content .subsection:hover,
.docs__side-navigation__content .section:hover {
  color: #00D395;
}
.docs__side-navigation__content .subsection {
  color: #AAB8C1;
}
.docs__side-navigation.fixed .docs__side-navigation__content {
  position: fixed;
  top: 0;
  margin-top: 7.3125rem;
  bottom: auto;
  width: 19.503rem;
  z-index: 30;
}
.docs__side-navigation.fixed--bottom .docs__side-navigation__content {
  bottom: 0;
  margin-top: 0;
  width: 19.503rem;
  position: absolute;
  top: auto;
  bottom: 0;
  margin-top: 7.3125rem;
  margin-bottom: 7.3125rem;
}
.docs table {
  display: block;
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  overflow-x: scroll;
  line-height: 1.5rem;
  padding: 0;
}
.docs table th {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.01rem;
  color: #CCD6DD;
}
.docs table th,
.docs table td {
  padding: 1rem 0;
}
.docs table tr {
  border-bottom: 1px solid #CCD6DD;
}
.docs table tr > td:last-child {
  color: #657786;
  width: 100%;
}
.docs table.networks-table {
  padding: 2.0625rem;
}
.docs table.networks-table th,
.docs table.networks-table td {
  padding: 1rem 0;
}
.docs table.networks-table th:not(:first-child),
.docs table.networks-table td:not(:first-child) {
  padding-left: 1rem;
}
.docs table.networks-table th:last-child,
.docs table.networks-table td:last-child {
  padding-left: 4rem;
  width: 100%;
}
.docs table.networks-table td:last-child {
  color: #141E27;
}
.docs table.networks-table thead tr {
  border-bottom: 1px solid #CCD6DD;
}
.docs table.networks-table tr {
  border-bottom: none;
}
.docs table.networks-table tr:last-child td {
  padding-bottom: 0;
}

body,
html {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

[class*=container] {
  margin: 0 auto;
  padding-right: 1.33rem;
  padding-left: 1.33rem;
}

.container-small {
  max-width: 40em;
}

.container {
  position: relative;
  max-width: 66rem;
}

.container-large {
  position: relative;
  max-width: 82em;
}

.row {
  display: flex;
  flex-flow: row wrap;
  margin-right: -0.665rem;
  margin-left: -0.665rem;
}
.row.align-middle {
  align-items: center;
}
.row.align-bottom {
  align-items: flex-end;
}
.row.align-stretch {
  align-items: stretch;
}
.row.align-left {
  justify-content: flex-start;
}
.row.align-center {
  justify-content: center;
}
.row.align-right {
  justify-content: flex-end;
}
.row.align-between {
  justify-content: space-between;
}
.row.reverse {
  flex-wrap: wrap-reverse;
}

[class*=col] {
  flex-basis: 100%;
  padding: 0 0.665rem;
}

.col-xs-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-xs-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-xs-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-xs-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-xs-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 40em) {
  html,
body {
    font-size: 14px;
  }

  .col-sm-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-auto {
    flex-basis: auto;
  }
}
@media (min-width: 60em) {
  html,
body {
    font-size: 15px;
  }

  .col-md-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-auto {
    flex-basis: auto;
  }
}
@media (min-width: 82em) {
  html,
body {
    font-size: 16px;
  }

  .col-lg-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-auto {
    flex-basis: auto;
  }
}
@font-face {
  font-family: "Haas Grot Disp R";
  src: url("/compound-components/fonts/NeueHaasGrotDispRound-55Roman.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Disp R";
  src: url("/compound-components/fonts/NeueHaasGrotDispRound-65Medium.otf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/compound-components/fonts/NeueHaasGrotTextRound-55Roman.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/compound-components/fonts/NeueHaasGrotTextRound-65Medium.otf");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/compound-components/fonts/NeueHaasGrotTextRound-75Bold.otf");
  font-style: bold;
  font-weight: 700;
}
body {
  font-family: "Haas Grot Text R", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #141E27;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 1em 0;
  text-rendering: optimizelegibility;
  font-weight: 500;
}

h1 {
  font-family: "Haas Grot Disp R";
  font-style: normal;
  font-size: 2.462rem;
  line-height: 3.231rem;
}
@media (min-width: 60em) {
  h1 {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}

h2 {
  font-family: "Haas Grot Disp R";
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.5rem;
}

h3 {
  font-family: "Haas Grot Disp R";
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 2.1rem;
  letter-spacing: 0;
}

h4 {
  font-family: "Haas Grot Disp R";
  font-weight: 700;
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1.75rem;
  letter-spacing: 0;
}
@media (min-width: 60em) {
  h4 {
    font-size: 1.1rem;
  }
}

h5 {
  font-family: "Haas Grot Disp R";
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1.75rem;
  letter-spacing: 0;
}
@media (min-width: 60em) {
  h5 {
    font-size: 1.1rem;
  }
}

p {
  font-family: "Haas Grot Text R";
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  margin: 0px;
}
p.small {
  font-size: 12px;
}
p.p--2 {
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1;
}

pre {
  padding: 1.75rem 1.33rem;
  font-size: 1rem;
  line-height: 1.25;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  border-radius: 3px;
  counter-reset: line;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.line-numbers {
  background-color: #00D395;
  height: 100%;
  opacity: 0.1;
  width: 3.4375rem;
}

code {
  background-color: #FFFFFF;
}
code .token {
  color: #AAB8C1;
}
code .token.keyword {
  color: #9669ED;
}
code .token.function {
  color: #00D395;
}
code .token.argument {
  color: #141E27;
}
code .token.string {
  color: #0DAEF3;
}
code .code-line {
  counter-increment: line;
  padding-left: 1.43rem;
}
code .code-line:before {
  margin-right: 2rem;
  color: #00D395;
  content: counter(line);
  -webkit-user-select: none;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.label,
label {
  cursor: inherit;
  font-family: "Haas Grot Text R";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #AAB8C1;
}
.label.big,
label.big {
  font-family: "Haas Grot Disp R";
  font-weight: 500;
  font-style: normal;
  font-size: 2rem;
}
.label.medium,
label.medium {
  font-family: "Haas Grot Disp R";
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
}
.label.dark,
label.dark {
  color: #657786;
}
.label.supply,
label.supply {
  color: #00D395;
}
.label.borrow,
label.borrow {
  color: #9669ED;
}
.label.treasury,
label.treasury {
  color: #0DAEF3;
}

a {
  color: inherit;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: 0;
}

a:active,
a:hover {
  color: #00D395;
  outline: 0;
  text-decoration: none;
}

.text-small {
  font-size: 0.8em;
}

.text-large {
  font-size: 1.2em;
}

.text-largest {
  font-size: 1.4em;
}

.null {
  color: #CFD8DC;
}

.headline {
  font-size: 1.39rem;
  font-weight: 300;
  color: #ffffff;
  margin-top: 0.7rem;
}

.italic {
  font-style: italic;
}

.elmsh {
  color: #9aaab1;
  background: #F9FAFB;
  font-size: 0.9em;
  overflow-x: scroll;
}

.elmsh-hl {
  background: #fffbdd;
}

.elmsh-add {
  background: #eaffea;
}

.elmsh-del {
  background: #ffecec;
}

.elmsh-comm {
  color: #969896;
}

.elmsh1 {
  color: #0DAEF3;
}

.elmsh2 {
  color: #0DAEF3;
}

.elmsh3 {
  color: #9669ED;
}

.elmsh4 {
  color: #9669ED;
}

.elmsh5 {
  color: #00D395;
}

.elmsh6 {
  color: #005cc5;
}

.elmsh7 {
  color: #070A0E;
}

.inline-code {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: small;
  color: #141E27;
  background-color: #F9FAFB;
  padding: 0.2rem;
}

.elmsh-line:before {
  content: attr(data-elmsh-lc);
  display: inline-block;
  text-align: right;
  width: 40px;
  padding: 0 20px 0 0;
  opacity: 0.3;
}

.styled-svg {
  height: 100%;
  width: 100%;
}
.styled-svg__holder {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  min-height: 2.375rem;
  cursor: pointer;
  margin: 0 0 0 0.75rem;
  --styled-svg-bg-color: #FFFFFF;
  --styled-svg-hover-bg-color: #00D395;
  --styled-svg-border-color: rgba(7, 10, 14, 0.05);
  --styled-svg-hover-border-color: #00D395;
  --styled-svg-path-color: #070A0E;
  --styled-svg-hover-path-color: #FFFFFF;
}
[class$="--dark"] .styled-svg__holder {
  --styled-svg-bg-color: #070A0E;
  --styled-svg-border-color: #070A0E;
  --styled-svg-path-color: #FFFFFF;
}
[class$="--credit"] .styled-svg__holder {
  --styled-svg-hover-bg-color: #9669ED;
  --styled-svg-hover-border-color: #9669ED;
}
[class$="--no-hover"] .styled-svg__holder {
  --styled-svg-hover-bg-color: var(--styled-svg-bg-color);
  --styled-svg-hover-border-color: var(--styled-svg-border-color);
  --styled-svg-hover-path-color: var(--styled-svg-path-color);
}
.styled-svg__holder:hover .styled-svg--upload__background, .styled-svg__holder:hover .styled-svg--download__background, .styled-svg__holder:hover .styled-svg--transfer__background {
  fill: var(--styled-svg-hover-bg-color);
}
.styled-svg__holder:hover .styled-svg--upload__border, .styled-svg__holder:hover .styled-svg--download__border, .styled-svg__holder:hover .styled-svg--transfer__border {
  stroke: var(--styled-svg-hover-border-color);
}
.styled-svg__holder:hover .styled-svg--upload__path, .styled-svg__holder:hover .styled-svg--download__path, .styled-svg__holder:hover .styled-svg--transfer__path {
  fill: var(--styled-svg-hover-path-color);
}
.styled-svg--upload > *, .styled-svg--download > *, .styled-svg--transfer > * {
  transition: fill 0.2s ease-in, stroke 0.2s ease-in;
}
.styled-svg--upload__background, .styled-svg--download__background, .styled-svg--transfer__background {
  fill: var(--styled-svg-bg-color);
}
.styled-svg--upload__border, .styled-svg--download__border, .styled-svg--transfer__border {
  stroke: var(--styled-svg-border-color);
}
.styled-svg--upload__path, .styled-svg--download__path, .styled-svg--transfer__path {
  fill: var(--styled-svg-path-color);
}

.action-panel {
  position: relative;
  width: 25.5rem;
  --color--highlight: #045385;
}
.action-panel--wide {
  width: 30rem;
}
@media (max-width: 40em) {
  .action-panel--wide {
    width: 25.5rem;
  }
}
.action-panel--auto-width {
  width: auto;
}
.action-panel .header {
  background: #FFFFFF;
}
.action-panel .header--has-input {
  background: #F9FAFB;
}
.action-panel .header .title {
  font-style: normal;
  font-weight: bold;
  font-size: 0.875rem;
}
@media (max-width: 40em) {
  .action-panel .header .title {
    top: 0.665rem;
  }
}
.action-panel__text {
  color: #AAB8C1;
  font-style: normal;
  font-weight: normal;
  font-size: 0.6875rem;
  line-height: 1.6;
  max-width: 80%;
}
.action-panel__input-view {
  background: #F9FAFB;
  border-bottom: 1px solid rgba(170, 184, 193, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875rem 0 0.875rem 0;
  position: relative;
  width: 100%;
}
.action-panel__input-view__invisible {
  align-items: center;
  background: transparent;
  color: transparent;
  display: flex;
  justify-content: center;
  font-size: 2.625rem;
  font-weight: 500;
  position: absolute;
  text-align: center;
  width: 22rem;
  height: 82px;
  pointer-events: none;
}
.action-panel__input-view__invisible .icon {
  height: 2.1875rem;
  width: 2.1875rem;
  min-height: 2.1875rem;
  min-width: 2.1875rem;
}
.action-panel__input-view__invisible #action-input-box--invisible {
  min-width: 1.75rem;
}
.action-panel__input-view__input {
  width: 22rem;
  height: 82px;
  background: #F9FAFB;
  font-size: 2.625rem;
  font-weight: 500;
  text-align: center;
  color: #141E27;
  caret-color: var(--color--highlight);
  text-indent: 10px;
}
.action-panel__input-view__input::placeholder {
  padding: 0;
}
.action-panel__input-view__input--outlined {
  width: 20.5rem;
  height: 50px;
  border: 1px solid #CCD6DD;
  border-radius: 4px;
}
.action-panel__input-view__text-dark {
  background: #F9FAFB;
  color: #141E27;
  font-style: normal;
  font-weight: normal;
  font-size: 0.6875rem;
  padding: 0 0 1.875rem 0.875rem;
  line-height: 1.6;
  max-width: 100%;
}
.action-panel__input-view__text-dark--bold {
  font-style: bold;
  font-weight: bold;
  padding: 2.875rem 0 0.875rem 0.875rem;
}
.action-panel__input-view__grey-section {
  background: #F9FAFB;
  max-width: 100%;
}
.action-panel__create-view-user-content {
  background-color: #F9FAFB;
  padding: 1.125rem 2.25rem;
  width: 100%;
}
.action-panel__create-view-user-content__text-dark {
  background: #F9FAFB;
  color: #141E27;
  font-style: normal;
  font-weight: normal;
  font-size: 0.6875rem;
  padding: 0 0 0.875rem 0.875rem;
  line-height: 1.6;
  max-width: 100%;
}
.action-panel__create-view-user-content__text-dark--bold {
  font-style: bold;
  font-weight: bold;
}
.action-panel__deposit-funds-content {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  width: 100%;
}
.action-panel__deposit-funds-content__qrcode {
  height: 9rem;
  width: 9rem;
  margin-top: -0.8rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.45rem;
}
.action-panel__deposit-funds-content__description {
  color: #141E27;
  font-style: normal;
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 1.2rem;
}
.action-panel__deposit-funds-content__description--bold {
  font-weight: 700;
}
.action-panel__deposit-funds-content__description--small {
  font-size: 0.625rem;
  font-weight: normal;
  margin-top: 0.625rem;
}
.action-panel__deposit-funds-content__description:nth-child(1) {
  margin-bottom: 1rem;
}
.action-panel__deposit-funds-content__description:nth-child(2) {
  margin-top: 1rem;
}
.action-panel__deposit-funds-content__description:only-child {
  margin-bottom: 0;
}
.action-panel__deposit-funds-content__description:not(:first-child) {
  margin-top: 1rem;
}
.action-panel__details-view {
  background-color: #FFFFFF;
  padding: 2.5rem;
  width: 100%;
}
.action-panel__details-view__section {
  display: flex;
  flex-direction: column;
}
.action-panel__details-view__section__header {
  color: #657786;
  font-style: normal;
  font-weight: normal;
  font-size: 0.625rem;
}
.action-panel__details-view__section__header--uppercase {
  text-transform: uppercase;
}
.action-panel__details-view__section__label {
  color: #657786;
}
.action-panel__details-view__section__row {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  width: 100%;
}
.action-panel__details-view__section__row__label, .action-panel__details-view__section__row__value {
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
}
.action-panel__details-view__section__row__value-section {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.action-panel__details-view__section__row__value {
  align-items: center;
  color: #141E27;
  display: flex;
  justify-content: flex-end;
}
.action-panel__details-view__section__row__value + .action-panel__details-view__section__row__value::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/compound-components/assets/icn-build-arrows-green.svg");
  width: 10px;
  height: 8px;
  margin-bottom: 1px;
  margin-right: 8px;
  margin-left: 8px;
}
.action-panel__details-view__section__row:not(:last-of-type) {
  border-bottom: 1px solid #eceff1;
}
.action-panel__details-view__section__description {
  font-weight: 400;
  font-size: 0.875rem;
  color: #AAB8C1;
  margin-top: 1rem;
}
.action-panel__details-view__section__description__link {
  text-transform: none;
  font-weight: 400;
  font-size: 0.875rem;
  color: #00D395;
}
.action-panel__details-view__section + .action-panel__details-view__section {
  margin-top: 1rem;
}
.action-panel__details-view__section + .action-panel__details-view__section--extra-space {
  margin-top: 1.875rem;
}
.action-panel__details-view__meter-section {
  align-items: center;
  display: flex;
  margin-top: 0.75rem;
}
.action-panel__details-view__meter-section__label {
  color: #141E27;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  text-align: right;
  width: 3.5rem;
}
.action-panel__details-view__meter-section__meter {
  width: 100%;
  height: 8px;
  background-color: rgba(20, 30, 39, 0.1);
  border-radius: 8px;
}
.action-panel__details-view__meter-section__meter__fill {
  background-color: #00D395;
  border-radius: 8px;
  height: 8px;
  transition: width 0.25s ease;
  max-width: 100%;
}
.action-panel__details-view__meter-section__meter__fill--red {
  background-color: #F35454;
}
.action-panel__details-view__meter-section__meter__fill--yellow {
  background-color: #FFD24A;
}
.action-panel__action-view {
  padding: 0 2.25rem 1.9rem 2.25rem;
}
.action-panel__action-view__enable-asset-text-view {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.action-panel__action-view__button,
.action-panel__action-view button {
  color: #FFFFFF;
  background-color: var(--color--highlight);
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
  border-radius: 4px;
  border: none;
  letter-spacing: normal;
  text-transform: none;
  width: 100%;
}
.action-panel__transaction-view {
  align-items: center;
  background: #F9FAFB;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 19.75rem;
  width: 100%;
}
.action-panel__transaction-view__loader {
  margin-top: 1.25rem;
}
.action-panel__transaction-view__helper-text {
  margin-top: 1.25rem;
}

.button--marketing {
  align-items: center;
  background-color: transparent;
  border: 1px solid #FFFFFF;
  border-radius: 3px;
  color: #FFFFFF;
  display: inline-flex;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: bold;
  height: 3rem;
  justify-content: center;
  letter-spacing: 0;
  padding: 0 2rem;
  text-transform: none;
  transition: all 0.2s ease-in-out;
}
.button--marketing:hover {
  background-color: #045385;
  border-color: #045385;
  color: #FFFFFF;
}
.button--account {
  align-items: center;
  background-color: transparent;
  border: 1px solid #045385;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
  box-sizing: border-box;
  border-radius: 4px;
  color: #045385;
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.2s ease-in-out;
  width: 100%;
}
.button--account:hover {
  background-color: #045385;
  border-color: #045385;
  color: #FFFFFF;
}

.checkbox {
  display: flex;
  align-items: center;
  position: relative;
}
.checkbox__box {
  opacity: 0;
  position: absolute;
  width: auto;
}
.checkbox__box:checked + .checkbox__label:before {
  background: #0DAEF3;
  border-color: #0DAEF3;
}
.checkbox__box:focus + .checkbox__label:before {
  box-shadow: none;
}
.checkbox__label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  color: #070A0E;
}
.checkbox__label::before {
  content: "";
  display: inline-block;
  margin-right: 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #FFFFFF;
  border-radius: 0.25rem;
  border: 1px solid #657786;
}
.checkbox:hover .checkbox__label::before {
  background: #0DAEF3;
  border-color: #0DAEF3;
}
.checkbox:disabled + .checkbox__label {
  color: #657786;
  cursor: auto;
}
.checkbox:disabled + .checkbox__label:before {
  box-shadow: none;
  background: #F9FAFB;
}
.checkbox__box:checked + .checkbox__label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: #FFFFFF;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 #FFFFFF, 4px 0 0 #FFFFFF, 4px -2px 0 #FFFFFF, 4px -4px 0 #FFFFFF, 4px -6px 0 #FFFFFF, 4px -8px 0 #FFFFFF;
  transform: rotate(45deg);
}

.dashboard-form {
  background: #141E27;
}
.dashboard-form .dashboard-form-header-logo {
  display: block;
  background-image: url(/images/logos/treasury-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 127px;
  height: 27px;
  position: relative;
  margin: 3.5rem auto 4.375rem auto;
}
.dashboard-form .dashboard-form-modal {
  position: relative;
  border-radius: 4px;
  background-color: #f2f2f2;
  padding: 3.25rem 4.625rem 2.875rem 4.625rem;
  margin: auto;
  max-width: 480px;
  background-color: #FFFFFF;
}
.dashboard-form .dashboard-form-modal input {
  width: 100%;
  padding: 12px;
  border: 1px solid #CCD6DD;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none;
  /* remove underline from anchors */
}
.dashboard-form .dashboard-form-modal input:hover {
  opacity: 1;
}
.dashboard-form .dashboard-form-modal a {
  color: #657786;
  text-transform: none;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2em;
  letter-spacing: 0;
}
.dashboard-form .dashboard-form-modal a:hover {
  text-decoration: none;
  color: #045385;
}
.dashboard-form .dashboard-form-modal__invalid-content {
  display: flex;
  align-items: center;
  height: 52px;
  margin-top: -8px;
}
.dashboard-form .dashboard-form-modal__invalid-content__icon {
  display: inline-block;
  height: 17px;
  width: 17px;
  background-image: url(/images/icons/icn-error-small.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.dashboard-form .dashboard-form-modal__invalid-content__text {
  color: #DF5F67;
  margin-left: 8px;
  margin-top: 3px;
}
.dashboard-form .dashboard-form-modal .dashboard-form-button {
  background-color: #045385;
  color: #FFFFFF;
  border: none;
  height: 3.225rem;
  width: 100%;
  text-transform: none;
}
.dashboard-form .dashboard-form-modal .dashboard-form-button:hover, .dashboard-form .dashboard-form-modal .dashboard-form-button:focus {
  background-color: #0d64c8;
}
.dashboard-form .dashboard-form-modal .dashboard-form-button__loading-spinner {
  display: inline-block;
  position: absolute;
  border-radius: 100px;
  margin-top: -8px;
  padding: 8px;
  border: 5px solid transparent;
  animation: dashboard-form-circle 1s ease-in-out infinite;
  border-top: 5px solid #FFFFFF;
}
.dashboard-form .dashboard-form-modal .dashboard-form-button__loading-spinner:nth-child(1) {
  animation-delay: -0.15s;
}

@keyframes dashboard-form-circle {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(335deg);
  }
}
.dropdown--reports {
  --dropdownHeight: 3.125rem;
  --dropdownWidth: 100%;
}
.dropdown--settings {
  --dropdownHeight: 4.5rem;
  --dropdownWidth: 100%;
}
.dropdown__selected--reports {
  border-radius: 3px;
  padding: 1rem;
}
.dropdown__selected--reports label {
  color: #070A0E;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}
.dropdown__selected--settings {
  border-color: rgba(0, 0, 0, 0.05);
  padding-left: 1.33rem;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
}
.dropdown__selected--settings label {
  color: #045385;
}
.dropdown__selected--settings::after {
  background-image: url(/images/icons/icn-dropdown-light-closed.svg);
}
.dropdown__selected--settings.active::after {
  background-image: url(/images/icons/icn-dropdown-light-open.svg);
  transition: all 0.2s ease-in-out;
}
.dropdown__selected--funds {
  cursor: auto;
}
.dropdown__selected--funds label {
  color: #070A0E;
}
.dropdown__selected--funds::after {
  content: none;
}
.dropdown__selected--select {
  cursor: pointer;
  justify-content: flex-start;
}
.dropdown__selected--select label {
  font-size: 1rem;
}
.dropdown__selected--select .icon {
  margin-right: 0.5rem;
}
.dropdown__selected--select:hover {
  background-color: #F9FAFB;
}
.dropdown__selected--disabled {
  cursor: auto;
}
.dropdown__selected--disabled label {
  color: #657786;
}
.dropdown__selected--disabled:hover {
  background-color: inherit;
}
.dropdown__option--right-align {
  justify-content: flex-end;
}
.dropdown__option--reports {
  padding: 1rem;
}
.dropdown__option--reports label {
  font-size: 1rem;
  font-weight: 500;
}
.dropdown__option--reports:not(:last-of-type) {
  border-bottom: 0.5px solid #CCD6DD;
}
.dropdown__option--reports:hover {
  background-color: #045385;
}
.dropdown__option--reports:hover label {
  color: #FFFFFF;
}
.dropdown__option--treasury label {
  color: #FFFFFF;
}
.dropdown__option--treasury:hover {
  background-color: #2a4b62;
}
.dropdown__option--treasury:not(:last-of-type) {
  border-bottom: 1px solid #141E27;
}
.dropdown__option--funds:not(:last-of-type) {
  border-bottom: 0.5px solid #eff0f1;
}
.dropdown__option--funds:hover {
  background-color: #045385;
}
.dropdown__option--funds:hover label {
  color: #FFFFFF;
}
.dropdown__options--treasury {
  background-color: #223D50;
  width: 8rem;
  --extraMargins: calc(100% - 8rem);
  margin-left: calc(var(--extraMargins) / 2);
}
.dropdown__options--autowidth {
  background-color: #223D50;
  width: max-content;
  left: 50%;
}
.dropdown__options--autowidth.active {
  transform: translateX(-50%);
  animation: autowidth-bounce 0.3s ease;
}
.dropdown__options--settings {
  padding-left: 1.33rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

@keyframes autowidth-bounce {
  0% {
    transform: translate(-50%, -3px);
  }
  30% {
    transform: translate(-50%, 2px);
  }
  85% {
    transform: translate(-50%, -1px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
.elm-datepicker--container {
  position: relative;
  border: 1px solid #CCD6DD;
  border-radius: 3px;
  padding-right: 0;
  padding-left: 0;
}

.elm-datepicker--input {
  font-weight: 500;
}

.elm-datepicker--input:focus {
  outline: 0;
}

.elm-datepicker--picker {
  width: calc(100% + 2rem);
  position: absolute;
  border: 1px solid #CCD6DD;
  border-radius: 3px;
  z-index: 10;
  background-color: white;
  margin-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
}

.elm-datepicker--picker-header,
.elm-datepicker--weekdays {
  background: #FFFFFF;
}

.elm-datepicker--picker-header {
  display: flex;
  align-items: center;
}

.elm-datepicker--prev-container,
.elm-datepicker--next-container {
  flex: 0 1 auto;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.elm-datepicker--month-container {
  flex: 1 1 auto;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.elm-datepicker--month {
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

.elm-datepicker--year {
  font-size: 1.1rem;
  font-weight: 600;
}

.elm-datepicker--prev {
  display: block;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/images/icons/icn-datepicker-arrow.svg");
  width: 24px;
  height: 14px;
  padding: 0;
  transform: rotate(180deg);
}

.elm-datepicker--next {
  display: block;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/images/icons/icn-datepicker-arrow.svg");
  width: 24px;
  height: 14px;
  padding: 0;
}

.elm-datepicker--table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0.8em;
  margin-bottom: 1rem;
}
.elm-datepicker--table td {
  width: 2em;
  height: 2em;
  text-align: center;
}

.elm-datepicker--dow {
  color: #657786;
  border-bottom: 1px solid #CCC;
  cursor: default;
}

.elm-datepicker--day {
  cursor: pointer;
  border: 1px solid #CCD6DD;
  color: #657786;
}
.elm-datepicker--day:hover {
  color: #FFFFFF;
  background: #045385;
}

.elm-datepicker--disabled {
  cursor: default;
  color: #DDD;
}
.elm-datepicker--disabled:hover {
  background: inherit;
}

.elm-datepicker--picked {
  color: white;
  background: #045385;
}
.elm-datepicker--picked:hover {
  background: #045385;
}

.elm-datepicker--today {
  font-weight: bold;
}

.elm-datepicker--other-month {
  color: #AAA;
}
.elm-datepicker--other-month.elm-datepicker--disabled {
  color: #EEE;
}
.elm-datepicker--other-month.elm-datepicker--picked {
  color: white;
}

.footer {
  padding: 1.33rem 0;
  background: #070A0E;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  padding: 31px 0 31px;
  border-bottom: 1px solid #141E27;
}
.footer__top .icon {
  height: 3rem;
  width: 3rem;
}
.footer__top .icon--TREASURY {
  border-radius: 0;
  background-image: url(/images/logos/treasury-mark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
}
.footer__top .icon--COMPOUND {
  border-radius: 0;
  background-image: url(/images/logos/compound-mark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
}
.footer__top .links-holder {
  justify-content: end;
  padding-right: 1rem;
  gap: 2rem;
}
.footer__top .links-holder a {
  text-transform: none;
  color: #657786;
  font-weight: 400;
  font-size: 0.8125rem;
}
.footer__top .links-holder a:hover {
  color: #00D395;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.33rem;
  color: #ACBBC2;
  font-size: 0.9rem;
  padding-top: 8px;
  padding-bottom: 8px;
}
.footer__bottom label:first-of-type {
  color: #657786;
}
.footer__bottom__social-icons {
  display: flex;
  align-items: center;
}
.footer .links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.footer .links p {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1.2em;
}
.footer .links a {
  color: #657786;
  text-transform: none;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2em;
  letter-spacing: 0;
}
.footer .links a:hover {
  text-decoration: none;
  color: #045385;
}
.footer .links label {
  color: #657786;
  text-transform: none;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2em;
}
.footer .icn {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 0.9975rem;
  height: 0.9975rem;
  margin-left: 0.9975rem;
}
.footer .icn--linkedin {
  background-image: url(/images/icons/icn-linkedin-dark-grey.svg);
}
.footer .icn--medium {
  background-image: url(/compound-components/assets/icn-medium-dark-grey.svg);
}
.footer .icn--substack {
  background-image: url(/images/icons/icn-substack-dark-grey.svg);
}
.footer .icn--twitter {
  background-image: url(/compound-components/assets/icn-twitter-dark-grey.svg);
}

.funding-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #045385;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
  border-radius: 4px;
  border: none;
  width: 100%;
  padding: 1.2rem 1.6rem;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
}
.funding-button:hover {
  background-color: #0d64c8;
}
.funding-button__text {
  flex-grow: 1;
  color: #FFFFFF;
  text-transform: uppercase;
}
.funding-button__icon {
  display: flex;
  flex-grow: 0;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  height: 20px;
  width: 20px;
}
.funding-button__icon--deposit {
  background-image: url(/images/icons/btn-deposit-arrow.svg);
}
.funding-button__icon--withdraw {
  background-image: url(/images/icons/btn-withdraw-arrow.svg);
}
.funding-button--loading {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.funding-button__loading-spinner {
  border-radius: 100px;
  padding: 8px;
  border: 5px solid transparent;
  animation: dashboard-form-circle 1s ease-in-out infinite;
  border-top: 5px solid #FFFFFF;
}
.funding-button__loading-spinner .funding-button {
  padding: 0 1.6rem;
}

.funding-button + .funding-button {
  margin-top: 0.665rem;
}

.funds-step-card {
  position: relative;
  width: 100%;
}
.funds-step-card__header {
  display: flex;
  justify-content: center;
}
.funds-step-card__header__number {
  margin-right: -6px;
}
.funds-step-card__header__number__border {
  height: 50px;
  width: 50px;
  border-radius: 100px;
  border: 5px solid #223d50;
}
.funds-step-card__header__number__text {
  height: 42px;
  width: 42px;
  background-color: #FFFFFF;
  color: #0f161d;
  text-align: center;
  line-height: 42px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 100px;
  border: 1px solid #005cc5;
  margin-left: 4px;
  margin-top: -46px;
}
@media (min-width: 40em) {
  .funds-step-card__header__number__text {
    font-size: 0.75rem;
  }
}
.funds-step-card__header__icon {
  margin-left: -6px;
}
.funds-step-card__header__icon__border {
  height: 50px;
  width: 50px;
  border-radius: 100px;
  border: 5px solid #223d50;
}
.funds-step-card__header__icon__image {
  height: 42px;
  width: 42px;
  border-radius: 100px;
  margin-left: 4px;
  margin-top: -46px;
  background-image: url("/images/icons/icn-fund-client.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.funds-step-card__header__icon__image--borrow {
  background-image: url("/images/icons/icn-fund-borrow-client.svg");
}
.funds-step-card__header__icon__image--treasury {
  background-image: url("/images/icons/icn-fund-treasury.svg");
}
.funds-step-card__header__icon__image--protocol {
  background-image: url("/images/icons/icn-fund-protocol.svg");
}
.funds-step-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  padding-top: calc(2rem + 12px);
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #CCD6DD;
  box-shadow: 0px 2px 14px rgba(16, 21, 24, 0.06);
  margin-top: -25px;
}
.funds-step-card__content__title {
  color: #121b23;
  font-weight: 600;
  text-align: center;
}
.funds-step-card__content__subtitle {
  color: #657786;
  margin-top: 0.25rem;
  text-align: center;
}
.funds-step-card__content__links {
  width: 100%;
  margin-top: 1.875rem;
}
.funds-step-card__content__links .call-to-action {
  margin-right: -1rem;
  margin-top: 1rem;
  justify-content: space-between;
}
.funds-step-card__divider {
  display: flex;
  justify-content: center;
  height: 8rem;
  width: 100%;
}
.funds-step-card__divider.mobile-only {
  display: flex;
}
.funds-step-card__divider__image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 2.5rem;
}
.funds-step-card__divider__image + .funds-step-card__divider__image {
  margin-left: 2rem;
}
.funds-step-card__divider__image--usd {
  background-image: url("/images/icons/icn-arrow-usd-vertical.svg");
}
.funds-step-card__divider__image--usdc {
  background-image: url("/images/icons/icn-arrow-usdc-vertical.svg");
}
.funds-step-card__divider__image--usd-usdc {
  background-image: url("/images/icons/icn-arrow-usd-usdc-vertical.svg");
}
.funds-step-card__divider__image--eth {
  background-image: url("/images/icons/icn-arrow-eth-vertical.svg");
}
@media (min-width: 40em) {
  .funds-step-card__divider {
    flex-direction: column;
    margin-top: 24px;
    height: 6.75rem;
    align-items: center;
  }
  .funds-step-card__divider.mobile-only {
    display: none;
  }
  .funds-step-card__divider__image {
    aspect-ratio: 72/24;
    width: 100%;
    height: initial;
    background-size: cover;
  }
  .funds-step-card__divider__image--usd {
    background-image: url("/images/icons/icn-arrow-usd.svg");
  }
  .funds-step-card__divider__image--usdc {
    background-image: url("/images/icons/icn-arrow-usdc.svg");
  }
  .funds-step-card__divider__image--eth {
    background-image: url("/images/icons/icn-arrow-eth.svg");
  }
  .funds-step-card__divider__image + .funds-step-card__divider__image {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.header {
  background: #141E27;
  padding: 1rem 0;
}
@media (min-width: 40em) {
  .header__button.mobile-hide {
    display: inline-flex;
  }
}
.header--marketing {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.header--marketing .row {
  height: 3rem;
}
.header--marketing .header__links a {
  color: #FFFFFF;
}
.header--marketing .header__links a:hover {
  color: #00D395;
}
.header--marketing .header__links a:hover.active {
  border-bottom: 1px solid #00D395;
}
.header__brand {
  display: inline-block;
  background-image: url(/images/logos/compound-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  position: relative;
  width: 127px;
  height: 27px;
  z-index: 101;
}
.header__links a {
  color: #AAB8C1;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  margin: 0 calc(1.33rem / 2);
}
.header__links a.active {
  color: #FFFFFF;
  padding: 0.3rem 0;
  border-bottom: 1px solid #FFFFFF;
  transition: padding 0.2s ease;
}
.header__links a:hover {
  color: #FFFFFF;
  text-decoration: none;
  padding-bottom: 0.5rem;
}
.header__pill-dropdown {
  display: inline-block;
}
.header__pill-dropdown .dropdown {
  display: inline-block;
}
.header__pill-dropdown .organization-info {
  display: inline-block;
  background-color: #223D50;
  border-radius: 100px;
  display: flex;
  align-items: center;
  height: 3rem;
}
.header__pill-dropdown .organization-info__section {
  display: flex;
  flex-direction: column;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.header__pill-dropdown .organization-info__section__name {
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  color: #FFFFFF;
}
.header__pill-dropdown .organization-info__section__vault {
  font-size: 0.6875rem;
  line-height: 1;
  color: #CCD6DD;
  margin-top: 0.3rem;
}
.header__pill-dropdown .organization-info__logo {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}
.header__pill-dropdown .organization-info__logo--vault {
  height: 2.5rem;
  background-image: url(/images/icons/icn-vault.svg);
  border-radius: unset;
  color: #FFFFFF;
  text-align: center;
  line-height: 2.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.header--light {
  background: #F9FAFB;
}
.header--light .header__brand {
  background-image: url(/images/logos/treasury-logo-light.svg);
}
.header--light .header__links a {
  color: #AAB8C1;
}
.header--light .header__links a.active {
  color: #045385;
  border-bottom: 1px solid #045385;
}
.header--light .header__links a:hover {
  color: #045385;
}
.header--light .header__pill-dropdown .organization-info {
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
}
.header--light .header__pill-dropdown .organization-info__section__name {
  color: #141E27;
}
.header--light .header__pill-dropdown .organization-info__section__vault {
  color: #AAB8C1;
}
.header--light .header__pill-dropdown .organization-info__logo--vault {
  color: #070A0E;
}
.header--light .header__pill-dropdown .dropdown__options {
  background-color: #FFFFFF;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
.header--light .header__pill-dropdown .dropdown__option label {
  color: #070A0E;
}
.header--light .header__pill-dropdown .dropdown__option:hover {
  background-color: #f2f2f2;
}
.header--light .header__pill-dropdown .dropdown__option:not(:last-of-type) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.header--light .hamburger {
  background-color: transparent;
}
.header--light .hamburger span {
  background-color: #070A0E;
}
.header--docs {
  background-color: #FFFFFF;
}
.header--docs .row {
  height: 3rem;
}
.header--docs .button {
  background-color: #FFFFFF;
  border-color: #045385;
  color: #045385;
}
@media (min-width: 40em) {
  .header--docs .button.mobile-hide {
    display: inline-flex;
  }
}

.header__pill-dropdown + .header__pill-dropdown {
  margin-left: 0.665rem;
}

.hero {
  position: relative;
}
.hero__background {
  background: linear-gradient(111.98deg, #121b23 42.8%, #192734 97.98%);
  top: 0;
  left: 0;
  right: 0;
  height: 43.1215rem;
  position: absolute;
}
.hero__background::after {
  content: "";
  background-image: url("/images/header-dots.svg");
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.icon--bank {
  border-radius: 0;
  background-image: url(/images/icons/icn-bank.svg);
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
}
.icon--xsmall {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
}
.icon--caret {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/compound-components/assets/icn-drop-down-dark.svg);
  border-radius: 0;
  margin-left: 6px;
  transition: all 0.2s ease-in-out;
  transform: rotate(180deg);
}
.icon--caret--active {
  transform: rotate(0deg);
}

.pill-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid #FFFFFF;
  background-color: #152029;
  border-radius: 100px;
  height: 3rem;
  padding: 0 1.25rem;
}
.pill-button__text {
  display: inline-block;
  color: #FFFFFF;
  text-transform: none;
  text-align: center;
  line-height: 3rem;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: normal;
}
.pill-button__image {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  height: 10px;
  width: 14px;
  background-image: url(/images/icons/icn-btn-arrow.svg);
  margin-left: 0.75rem;
}
.pill-button:hover {
  background-color: #045385;
  border-color: #045385;
  color: #FFFFFF;
}
.pill-button--blue {
  background-color: #045385;
  border-color: #045385;
}
.pill-button--blue:hover {
  background-color: #0d64c8;
}
.pill-button--transparent {
  background-color: transparent;
}

.settings-panel-row {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.settings-panel-row--hoverable {
  cursor: pointer;
}
.settings-panel-row--hoverable::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  position: absolute;
  right: 2rem;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  border-color: #CCD6DD;
  transform: rotate(45deg);
  transition: all 0.2s ease-in-out;
}
.settings-panel-row--hoverable:hover {
  background-color: #F9FAFB;
}
.settings-panel-row [class*=col] {
  padding: 1.25rem 1.75rem;
}
.settings-panel-row__title {
  color: #070A0E;
  margin-bottom: 0.25rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.settings-panel-row__title--notice {
  margin-left: 0.25rem;
  color: #AAB8C1;
}
.settings-panel-row__sub-title {
  color: #657786;
  font-weight: 500;
}
.settings-panel-row__sub-title--bold {
  color: #657786;
  font-weight: 700;
}
.settings-panel-row__image {
  display: flex;
  align-items: center;
}
.settings-panel-row__image__logo {
  height: 2.75rem;
  width: 2.75rem;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
}
.settings-panel-row__image__description {
  display: inline;
  padding-left: 1.25rem;
  padding-right: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  align-content: center;
}
.settings-panel-row__button {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.settings-panel-row--empty .settings-panel-row__title {
  color: #AAB8C1;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
.settings-panel-row--empty .settings-panel-row__sub-title {
  color: #AAB8C1;
  text-align: center;
  margin-bottom: 1.5rem;
}
@media (max-width: 40em) {
  .settings-panel-row {
    max-width: 100vw;
  }
  .settings-panel-row::after {
    right: 1.33rem;
  }
  .settings-panel-row [class*=col] {
    padding-left: 1.33rem;
    padding-right: 1.33rem;
  }
}

.settings-modal {
  background: #FFFFFF;
  border: 1px solid #F9FAFB;
  border-radius: 3px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  width: 42.74rem;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}
.settings-modal__header {
  display: flex;
  position: relative;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.25rem;
}
.settings-modal__header__title {
  flex-grow: 1;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.75rem;
  text-align: center;
  margin-right: -1.875rem;
}
.settings-modal__header__close-x {
  margin-left: auto;
  margin-right: 0;
}
.settings-modal__header__close-x button {
  background-color: transparent;
  background-image: url("/compound-components/assets/icon_close_x.svg");
  background-size: 100% 100%;
  border: 0;
  padding: 0.5rem 1rem;
}
.settings-modal__content {
  padding-bottom: 2.5rem;
}
.settings-modal__content__row {
  display: flex;
  flex-flow: row wrap;
  padding: 1.25rem 2.5rem 0 2.5rem;
}
.settings-modal__content__row [class*=col]:first-of-type {
  padding-left: 0;
}
.settings-modal__content__row [class*=col]:last-of-type {
  padding-right: 0;
}
.settings-modal__content__row__title {
  color: #657786;
}
.settings-modal__content__row__disabled-text-box {
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: #F9FAFB;
  border-radius: 4px;
  color: #AAB8C1;
  overflow-wrap: anywhere;
}
.settings-modal__content__row__disabled-text-box--has-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-modal__content__row__input-box {
  display: block;
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: #F9FAFB;
  border-radius: 4px;
  color: #141E27;
  overflow-wrap: anywhere;
  border: 1px solid #CCD6DD;
  border-radius: 4px;
  font-size: 1.125rem;
  font-weight: 500;
}
.settings-modal__content__row__input-box::placeholder {
  color: #AAB8C1;
}
.settings-modal__content__row__image {
  display: flex;
  align-items: center;
}
.settings-modal__content__row__image__logo {
  height: 1.25rem;
  width: 0.75rem;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
}
.settings-modal__content__row__image__logo--eth {
  background-image: url("/images/icons/icn-network-eth.svg");
  background-size: 100% 100%;
}
.settings-modal__content__row__image__description {
  display: inline;
  padding-left: 0.75rem;
  align-content: center;
}
.settings-modal__content__error {
  padding-top: 2rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  color: #F35454;
}
.settings-modal__content__button {
  margin: 2.5rem 2.5rem 0 2.5rem;
}
@media (max-width: 40em) {
  .settings-modal {
    margin-bottom: 0;
    border-radius: 0;
  }
}

.treasury-panel {
  margin-left: auto;
  margin-right: auto;
}
.treasury-panel__content-row {
  display: flex;
  flex-flow: row wrap;
}
.treasury-panel__content-row--hoverable:hover {
  background-color: #F9FAFB;
}
.treasury-panel__content-row [class*=col] {
  padding: 1rem 1.75rem;
}
.treasury-panel__content-row__split-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.treasury-panel__content-row__split-row > [class*=col] {
  padding: 0.5rem 0 1rem 0;
}
.treasury-panel__content-row__title {
  color: #657786;
}
.treasury-panel__content-row__datepicker {
  margin-top: 0.5rem;
}
.treasury-panel__content-row__disabled-text-box {
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: #F9FAFB;
  border-radius: 3px;
  color: #657786;
}
.treasury-panel__content-row__disabled-text-box .row {
  margin-left: 0;
  margin-right: 0;
}
.treasury-panel__content-row__users-row {
  display: flex;
  flex-flow: row wrap;
  height: 4rem;
}
.treasury-panel__content-row__resend-activation-email-btn {
  display: flex;
  margin-top: 0.5rem;
  padding: 1rem 0rem;
  border-radius: 3px;
  color: #045385;
  cursor: pointer;
}
.treasury-panel__content-row__resend-activation-email-btn p {
  line-height: 1;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
.treasury-panel__content-row__resend-activation-email-btn span {
  margin-left: 0.5rem;
  transition: transform 0.2s ease-in-out;
}
.treasury-panel__content-row__resend-activation-email-btn .arrow {
  width: 1rem;
  height: 1rem;
}
.treasury-panel__content-row__resend-activation-email-btn:hover p {
  border-bottom: 1px solid #045385;
}
.treasury-panel__content-row__resend-activation-email-btn:hover span {
  transform: translateX(5px);
}
.treasury-panel__content-row__resend-activation-email-btn--disabled {
  color: #657786;
}
.treasury-panel__content-row__detail-line-container {
  flex-flow: row wrap;
  display: flex;
  padding: 0;
}
.treasury-panel__content-row__dot {
  height: 0.5rem;
  width: 0.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}
.treasury-panel__content-row__dot--expired {
  background: #F35454;
}
.treasury-panel__content-row__dot--pending {
  background: #FFD24A;
}
.treasury-panel__content-row__description {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.treasury-panel__content-row__image {
  height: 3.75rem;
  width: 3.75rem;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  margin-top: 0.5rem;
}
.treasury-panel__content-row__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}
.treasury-panel__content-row__empty__text {
  color: #657786;
}
.treasury-panel__content-row:last-of-type {
  padding-bottom: 1rem;
}
.treasury-panel__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}

.bar-graph {
  --bar-color: #2F3F4E;
  --bar-color-hover: #2F3F4E;
}
.bar-graph #treasuryGradient {
  --color-stop-1: #005cc5;
  --color-stop-2: #005cc5;
}
.bar-graph--treasury {
  --bar-color-hover: #005cc5;
}
.bar-graph--treasury .bar-graph__bar rect {
  fill: var(--bar-color);
}
.bar-graph--treasury .bar-graph__bar rect.transparent-bar {
  fill: #00000000;
}
.bar-graph__bar--active {
  --bar-color: var(--bar-color-hover);
}
.bar-graph__bar rect.transparent-bar {
  fill: #00000000;
}
.bar-graph__active-hover {
  pointer-events: none;
}
.bar-graph__active-hover text {
  fill: #657786;
  text-transform: uppercase;
  font-size: 0.625rem;
}
.bar-graph__active-hover text.highlight {
  fill: #FFFFFF;
}

.funding-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #045385;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
  border-radius: 4px;
  border: none;
  width: 100%;
  padding: 1.2rem 1.6rem;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
}
.funding-button:hover {
  background-color: #0d64c8;
}
.funding-button__text {
  flex-grow: 1;
  color: #FFFFFF;
  text-transform: uppercase;
}
.funding-button__icon {
  display: flex;
  flex-grow: 0;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  height: 20px;
  width: 20px;
}
.funding-button__icon--deposit {
  background-image: url(/images/icons/btn-deposit-arrow.svg);
}
.funding-button__icon--withdraw {
  background-image: url(/images/icons/btn-withdraw-arrow.svg);
}
.funding-button--loading {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.funding-button__loading-spinner {
  border-radius: 100px;
  padding: 8px;
  border: 5px solid transparent;
  animation: dashboard-form-circle 1s ease-in-out infinite;
  border-top: 5px solid #FFFFFF;
}
.funding-button__loading-spinner .funding-button {
  padding: 0 1.6rem;
}

.funding-button + .funding-button {
  margin-top: 0.665rem;
}

#dashboard {
  padding-bottom: 4rem;
}
#dashboard section.hero {
  background: #141E27;
  margin-bottom: -3.75rem;
  padding: 1.2635rem 0 4.655rem;
}
#dashboard .balance-totals-section {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.375rem;
  width: 100%;
}
#dashboard .balance-totals-section .headline {
  font-weight: 700;
  font-size: 2.5rem;
}
#dashboard .balance-totals-section__graph {
  width: 100%;
  padding-top: 2.5rem;
}
#dashboard .asset [class*=col] {
  padding: 0;
}
#dashboard .asset--no-hover {
  border-left: none;
  cursor: auto;
}
#dashboard .asset--no-hover:hover {
  border-left: none;
}
#dashboard .asset .balance .subtitle {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9em;
  color: #ACBBC2;
  white-space: pre;
}
#dashboard .asset .balance--row {
  display: flex;
}
#dashboard .funding-section {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}
#dashboard .funding-section__totals-row {
  display: flex;
  flex-direction: column;
  margin-top: 1.75rem;
}
#dashboard .funding-section__totals-row:first-child {
  margin-top: 0;
}
#dashboard .funding-section__totals-row__title {
  color: #90A4AE;
}
#dashboard .funding-section__totals-row__value {
  margin-top: 0.375rem;
  font-weight: 600;
  font-size: 1.125rem;
}
#dashboard .date-column {
  width: 2.2rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#dashboard .date-column .day {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}
#dashboard .balance-history-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 29px;
  height: 29px;
}
#dashboard .balance-history-icon--deposit {
  background-image: url(/images/icons/icn-deposit-arrow.svg);
}
#dashboard .balance-history-icon--withdraw {
  background-image: url(/images/icons/icn-withdraw-arrow.svg);
}
#dashboard .balance-history-icon--withdraw-pending {
  background-image: url(/images/icons/icn-withdraw-pending-arrow.svg);
}
#dashboard .balance-history-icon--withdraw-rejected {
  background-image: url(/images/icons/icn-withdraw-rejected-arrow.svg);
}
#dashboard .status-pill {
  width: 67px;
  height: 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dashboard .pending {
  background-color: #FFEDD9;
  color: #FF871F;
}
#dashboard .rejected {
  background-color: #FFEBEC;
  color: #C22730;
}
#dashboard .action-panel .dropdown {
  margin-top: 0.75rem;
}
#dashboard .action-panel__details-view__section__row__label {
  color: #141E27;
  font-weight: 600;
}
#dashboard .panel__section__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16em;
  color: #657786;
}
#dashboard .p2 {
  font-family: Haas Grot Text R;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: center;
}

#marketing-docs .docs__main-navigation__content a:hover {
  color: #045385;
  border-bottom-color: #045385;
}
#marketing-docs p {
  color: #141E27;
}
#marketing-docs p a {
  color: #045385;
}
#marketing-docs p a:hover {
  border-bottom-color: #045385;
}
#marketing-docs .docs__side-navigation__content .section.active {
  color: #045385;
  border-right-color: #045385;
}
#marketing-docs .docs__side-navigation__content .section:hover {
  color: #045385;
}
#marketing-docs .docs__content a:hover {
  border-bottom-color: #045385;
}
#marketing-docs .docs__content .ul-container ul li::before {
  color: #045385;
}
#marketing-docs .docs__content--no-bottom-padding {
  padding-bottom: 0;
}

#marketing-home {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
}
#marketing-home .call-to-action {
  display: flex;
  user-select: none;
}
#marketing-home .call-to-action a {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#marketing-home .call-to-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#marketing-home .call-to-action:hover a {
  border-bottom: 1px solid #00D395;
}
#marketing-home .call-to-action:hover #arrow {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}
#marketing-home .label.big {
  font-weight: 400;
}
#marketing-home .hero {
  height: 40rem;
}
#marketing-home .hero-section {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 14.575rem;
  margin-bottom: 6.575rem;
}
#marketing-home .hero-section__info-pane {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#marketing-home .hero-section__info-pane__subheader {
  color: #FFFFFF;
  margin-top: 1.125rem;
  max-width: 48rem;
}
#marketing-home .hero-section__info-pane__description {
  color: #FFFFFF;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 1.25rem;
}
#marketing-home .hero-section__info-pane__description--blue {
  color: #0DAEF3;
}
#marketing-home .hero-section__info-pane__button {
  margin-top: 1rem;
  margin-right: auto;
}
#marketing-home .hero-section__modal-layout {
  display: flex;
  justify-content: flex-end;
}
#marketing-home .hero-section__modal-layout__image {
  aspect-ratio: 462/328;
  width: 32rem;
  background-image: url("/images/treasury-app-modal.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-right: -0.6rem;
}
@media (min-width: 40em) {
  #marketing-home .hero-section {
    margin-top: 14.575rem;
    margin-bottom: 10.575rem;
  }
}

#products {
  padding-bottom: 8.8rem;
  background: #F9FAFB;
  position: relative;
}
#products h2 {
  color: #141E27;
}
#products h3 {
  color: #141E27;
}
#products h4 {
  color: #141E27;
}
#products p {
  color: #657786;
}
#products .product-panel {
  margin-bottom: 1.33rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
}
#products .product-panel__content {
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  height: 15.75rem;
  background-color: transparent;
  color: #657786;
  justify-content: center;
  align-items: center;
  padding: 1.875rem;
}
#products .product-panel__background {
  background-color: #FFFFFF;
  height: 15.75rem;
  width: 100%;
}
#products .product-panel__image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-self: center;
}
#products .product-panel__image--compound {
  width: 12rem;
  height: 2.625rem;
  background-image: url(/images/logos/compound-logo-dark.svg);
}
@media (min-width: 40em) {
  #products .product-panel__image--compound {
    width: 16rem;
    height: 3.5rem;
  }
}
#products .product-panel__image--treasury {
  width: 9rem;
  height: 2.148rem;
  background-image: url(/images/logos/treasury-logo-light.svg);
}
@media (min-width: 40em) {
  #products .product-panel__image--treasury {
    width: 12rem;
    height: 2.86255rem;
  }
}
#products .product-panel:hover {
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.08);
}
#products .product-panel:hover.product-no-link {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
}
#products .products-section {
  margin-top: 8.8rem;
}
#products .products-section__cards {
  margin-top: 1.5rem;
}
#products .products-section__cards .product-card__title {
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 0.5625rem;
}
#products .products-section__cards .product-card__timeline {
  color: #AAB8C1;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
#products .products-section__cards .product-card__description {
  color: #657786;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  width: 90%;
}
#products .products-section__cards .product-card .call-to-action {
  margin-bottom: 1.25rem;
}
#products .products-section__cards .product-card .call-to-action .arrow {
  width: 17px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/images/icons/icn-arrow.svg);
  margin-right: 5px;
  transition: all 0.2s ease-in-out;
}
#products .products-section__cards .product-card .call-to-action:hover .arrow {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}

#investors {
  padding-bottom: 8.8rem;
  background: #141E27;
  position: relative;
}
#investors h2 {
  color: #141E27;
}
#investors h3 {
  color: #141E27;
}
#investors h4 {
  color: #141E27;
}
#investors p {
  color: #657786;
}
#investors .investor-header__subheader {
  color: white;
}
#investors .investor-panel {
  margin-bottom: 1.33rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
}
#investors .investor-panel__content {
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  height: 11.375rem;
  background-color: transparent;
  color: #657786;
  justify-content: center;
  align-items: center;
  padding: 1.875rem;
}
#investors .investor-panel__background {
  background-color: #1D2833;
  height: 11.375rem;
  width: 100%;
}
#investors .investor-panel__image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  align-self: center;
}
#investors .investor-panel__image--a16z {
  width: 5.125rem;
  height: 2rem;
  background-image: url(/images/a16z-dark.svg);
}
#investors .investor-panel__image--bain {
  width: 9.375rem;
  height: 2.3125rem;
  background-image: url(/images/bain-capital-dark.svg);
}
#investors .investor-panel__image--coinbase {
  width: 8.0175rem;
  height: 1.970625rem;
  background-image: url(/images/coinbase-dark.svg);
}
#investors .investor-panel__image--paradigm {
  width: 9.34375rem;
  height: 2.2025rem;
  background-image: url(/images/paradigm-dark.svg);
}
#investors .investor-panel__image--polychain {
  width: 7.151875rem;
  height: 2.475625rem;
  background-image: url(/images/polychain-dark.svg);
}
#investors .investor-panel__image--dragonfly {
  width: 7.393125rem;
  height: 2.41rem;
  background-image: url(/images/dragonfly-capital-dark.svg);
}
#investors .investor-panel:hover {
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.08);
}
#investors .investors-section {
  margin-top: 8.8rem;
}
#investors .investors-section__cards {
  margin-top: 2rem;
}

#press {
  padding-top: 7.25rem;
  padding-bottom: 7.25rem;
  background: #F9FAFB;
  display: flex;
  position: relative;
}
#press h2 {
  color: #141E27;
}
#press h3 {
  color: #141E27;
}
#press h4 {
  color: #141E27;
}
#press p {
  color: #657786;
}
#press .press-header {
  padding-right: 6.25rem;
}
#press .press-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  text-transform: none;
}
#press .press-item img {
  width: 64px;
}
#press .press-item .title-section {
  flex-grow: 1;
  margin-left: 3.5rem;
}
#press .press-item .title-section .title {
  text-transform: capitalize;
}
#press .press-item:hover .title {
  color: #045385;
}

#login .forgot-password-link {
  display: block;
  padding-top: 0.5rem;
  float: right;
}

#reports {
  background-color: #F9FAFB;
}
#reports .page-title {
  padding-top: 1rem;
  text-align: center;
}
#reports .dropdown--reports {
  margin-top: 0.5rem;
}

#account-details {
  background-color: #F9FAFB;
  padding-bottom: 4.25rem;
}
#account-details .need-help-text {
  color: #657786;
  text-align: center;
  line-height: 1.2;
}
#account-details .settings-navigation {
  background-color: #F9FAFB;
  position: relative;
  margin-top: 3rem;
}
#account-details .settings-navigation__sub-title {
  color: #657786;
  margin-bottom: 0;
}
#account-details .settings-navigation__content {
  display: flex;
  flex-direction: column;
  top: 0;
  margin-top: 2rem;
  bottom: auto;
}
#account-details .settings-navigation__content .section {
  color: #141E27;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 1px solid #CCD6DD;
}
#account-details .settings-navigation__content .section.active {
  color: #045385;
  border-left: 2px solid #045385;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  padding-left: calc(1rem - 2px);
}
#account-details .settings-navigation__content .section:hover {
  color: #045385;
}
#account-details .settings-main__back {
  display: inline-block;
  position: relative;
  padding-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.1rem;
  color: #0c7cc2;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}
#account-details .settings-main__back:before {
  content: "";
  background: url(/images/icons/icn-blue-back-arrow.svg);
  position: absolute;
  top: 2px;
  left: 0px;
  width: 8px;
  height: 8px;
}
#account-details .settings-main__back:hover {
  border-bottom: 1px solid #0c7cc2;
}
#account-details .connecting-ring {
  background: #045385;
  border-color: #045385;
}
#account-details .delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 29px;
  height: 29px;
  background-image: url(/images/icons/icn-delete.svg);
  margin: 0.5rem 0 0 auto;
  cursor: pointer;
}
#account-details .delete-button:hover {
  background-image: url(/images/icons/icn-delete-hvr.svg);
}
#account-details .treasury-panel {
  border: 1px solid rgba(0, 0, 0, 0.05);
}
#account-details .panel__header {
  justify-content: unset;
}
#account-details .panel__header h4:nth-child(2) {
  color: #AAB8C1;
  margin-left: 0.5rem;
}
@media (max-width: 40em) {
  #account-details .container-large {
    padding-left: 0;
    padding-right: 0;
  }
  #account-details .settings-navigation {
    padding-left: 1.33rem;
  }
  #account-details .dropdown {
    margin-bottom: 1rem;
  }
  #account-details .dropdown .settings-navigation__content {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  #account-details .settings-main__back {
    margin-left: 0;
  }
  #account-details .panel__header {
    padding-left: 1.33rem;
  }
}

#line {
  height: 1px;
  width: 100%;
  background: #657786;
  opacity: 0.3;
}

#dot-grid-left {
  display: block;
  width: 318px;
  height: 332px;
  background-image: url("/images/pattern-dots.svg");
  background-size: cover;
  position: absolute;
  top: 446px;
  left: -150px;
  z-index: -1;
}

#dot-grid-right {
  display: block;
  width: 318px;
  height: 332px;
  background-image: url("/images/pattern-dots.svg");
  background-size: cover;
  position: absolute;
  top: -45px;
  right: -130px;
  z-index: -1;
}

#marketing-team {
  display: flex;
  flex-direction: column;
}
#marketing-team .hero {
  height: 40rem;
}
#marketing-team .hero-section {
  display: flex;
  flex-direction: column;
  margin-top: 14.575rem;
  width: 100%;
}
#marketing-team .hero-section__subheader {
  color: #FFFFFF;
  margin-top: 1.125rem;
  max-width: 48rem;
}

#jobs {
  background: #141E27;
  padding-top: 128px;
  padding-bottom: 146px;
}
#jobs h2 {
  color: #FFFFFF;
  margin: 0;
}
#jobs .jobs {
  margin-top: 78px;
}
#jobs .job-item {
  display: flex;
  align-items: center;
  padding-top: 45px;
  padding-bottom: 45px;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
#jobs .job-item .job-details-section {
  display: flex;
  align-items: flex-start;
}
#jobs .job-item .job-title {
  color: #FFFFFF;
  margin: 0px;
}
#jobs .job-item .job-location {
  color: #657786;
  margin-left: 15px;
  margin-bottom: 0px;
  opacity: 0.5;
}
#jobs .job-item .arrow {
  background-image: url("/images/icons/icn-build-arrows-green.svg");
  height: 2rem;
  margin-left: auto;
  width: 2.125rem;
  transition: all 0.2s ease-in-out;
}
#jobs .job-item:hover .job-title {
  color: #00D395;
}
#jobs .job-item:hover .arrow {
  transform: translateX(5px);
}
@media (max-width: 40em) {
  #jobs .job-item .job-details-section {
    flex-direction: column;
    align-items: flex-start;
  }
  #jobs .job-item .job-location {
    margin-left: 0px;
  }
}

#team {
  padding: 0;
  padding-bottom: 116px;
  background: #F9FAFB;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#team h2 {
  color: #141E27;
}
#team h3 {
  color: #141E27;
}
#team h4 {
  color: #141E27;
}
#team p {
  color: #657786;
}
#team .team {
  display: flex;
  flex-direction: column;
}
#team .team__description {
  margin-top: 5.7rem;
  max-width: 40rem;
}
#team .team__title {
  margin-top: 8.8rem;
  margin-bottom: 0px;
}
#team .members {
  position: relative;
  margin-top: 60px;
}
#team .legacy-panel {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 32px 14px 20px 32px;
  border-style: none;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  transition: box-shadow 0.3s ease-in-out;
  cursor: default;
  padding: 30px;
}
@media (min-width: 40em) {
  #team .legacy-panel {
    height: 260px;
  }
}
#team .legacy-panel:hover {
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.08);
}
@media (min-width: 40em) {
  #team .legacy-panel {
    height: 310px;
  }
}
#team .legacy-panel:hover {
  box-shadow: inherit;
}
#team .member-img {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
#team .name {
  margin-top: 25px;
  margin-bottom: 0px;
}
#team .title {
  margin-top: 8px;
  text-transform: uppercase;
  margin-bottom: 0px;
}
#team .description {
  margin-top: 15px;
}
@media (max-width: 40em) {
  #team #dot-grid-left {
    top: auto;
    bottom: -50px;
    left: -150px;
  }
  #team #dot-grid-right {
    top: 124px;
    right: -126px;
  }
}

#marketing-thesis {
  /* Box sizing rules */
  /* Remove default margin */
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  /* Set core root defaults */
  /* Set core body defaults */
  /* A elements that don't have a class get default styles */
  /* Make images easier to work with */
  /* Inherit fonts for inputs and buttons */
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  background-color: #0f171f;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
#marketing-thesis *,
#marketing-thesis *::before,
#marketing-thesis *::after {
  box-sizing: border-box;
}
#marketing-thesis body,
#marketing-thesis h1,
#marketing-thesis h2,
#marketing-thesis h3,
#marketing-thesis h4,
#marketing-thesis p,
#marketing-thesis figure,
#marketing-thesis blockquote,
#marketing-thesis dl,
#marketing-thesis dd {
  margin: 0;
}
#marketing-thesis ul[role=list],
#marketing-thesis ol[role=list] {
  list-style: none;
}
#marketing-thesis html:focus-within {
  scroll-behavior: smooth;
}
#marketing-thesis body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
#marketing-thesis a:not([class]) {
  text-decoration-skip-ink: auto;
}
#marketing-thesis img,
#marketing-thesis picture {
  max-width: 100%;
  display: block;
}
#marketing-thesis input,
#marketing-thesis button,
#marketing-thesis textarea,
#marketing-thesis select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  #marketing-thesis html:focus-within {
    scroll-behavior: auto;
  }
  #marketing-thesis *,
#marketing-thesis *::before,
#marketing-thesis *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: "Haas Grot Disp R";
  src: url("/fonts/NeueHaasGrotDispRound-55Roman.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Disp R";
  src: url("/fonts/NeueHaasGrotDispRound-65Medium.otf");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/fonts/NeueHaasGrotTextRound-55Roman.otf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/fonts/NeueHaasGrotTextRound-65Medium.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("/fonts/NeueHaasGrotTextRound-75Bold.otf");
  font-style: bold;
  font-weight: 700;
}
#marketing-thesis html {
  font-size: 16px;
}
#marketing-thesis body {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 2rem;
  --heading-font-weight: 500;
  --heading-line-height: 3.25rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 2rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 3.25rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 1.25rem;
  --body-font-weight: 400;
  --body-line-height: 1.75rem;
  --body-paragraph: 1rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 1.25rem;
  --body-font-weight--link: 500;
  --body-line-height--link: 1.75rem;
  --body-paragraph--link: 1rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0.8125rem;
  --meta-font-weight: 500;
  --meta-line-height: 1.25rem;
  --meta-paragraph: 0.5rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0.8125rem;
  --label-font-weight: 500;
  --label-line-height: 1.125rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0.75rem;
  --label-font-weight--secondary: 400;
  --label-line-height--secondary: 1rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis .L0 {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 2.5rem;
  --heading-font-weight: 500;
  --heading-line-height: 3.25rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 2.5rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 3.25rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 0rem;
  --body-font-weight: normal;
  --body-line-height: 0rem;
  --body-paragraph: 0rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 0rem;
  --body-font-weight--link: normal;
  --body-line-height--link: 0rem;
  --body-paragraph--link: 0rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0rem;
  --meta-font-weight: normal;
  --meta-line-height: 0rem;
  --meta-paragraph: 0rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0rem;
  --label-font-weight: normal;
  --label-line-height: 0rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0rem;
  --label-font-weight--secondary: normal;
  --label-line-height--secondary: 0rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis .L1 {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 2rem;
  --heading-font-weight: 500;
  --heading-line-height: 3.25rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 2rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 3.25rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 1.25rem;
  --body-font-weight: 400;
  --body-line-height: 1.75rem;
  --body-paragraph: 1rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 1.25rem;
  --body-font-weight--link: 500;
  --body-line-height--link: 1.75rem;
  --body-paragraph--link: 1rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0.8125rem;
  --meta-font-weight: 500;
  --meta-line-height: 1.25rem;
  --meta-paragraph: 0.5rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0.8125rem;
  --label-font-weight: 500;
  --label-line-height: 1.125rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0.75rem;
  --label-font-weight--secondary: 400;
  --label-line-height--secondary: 1rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis .L2 {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 1.5rem;
  --heading-font-weight: 500;
  --heading-line-height: 1.75rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 1.5rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 1.75rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 1.0625rem;
  --body-font-weight: 400;
  --body-line-height: 1.5rem;
  --body-paragraph: 0.75rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 1.0625rem;
  --body-font-weight--link: 500;
  --body-line-height--link: 1.5rem;
  --body-paragraph--link: 0.75rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0.8125rem;
  --meta-font-weight: 400;
  --meta-line-height: 1.25rem;
  --meta-paragraph: 0.5rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0.6875rem;
  --label-font-weight: 500;
  --label-line-height: 1rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0.6875rem;
  --label-font-weight--secondary: 400;
  --label-line-height--secondary: 1rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis .L3 {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 1.3125rem;
  --heading-font-weight: 500;
  --heading-line-height: 1.5rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 1.3125rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 1.5rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 0.9375rem;
  --body-font-weight: 400;
  --body-line-height: 1.25rem;
  --body-paragraph: 0.5rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 0.9375rem;
  --body-font-weight--link: 500;
  --body-line-height--link: 1.25rem;
  --body-paragraph--link: 0.5rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0.6875rem;
  --meta-font-weight: 500;
  --meta-line-height: 1rem;
  --meta-paragraph: 0.5rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0rem;
  --label-font-weight: normal;
  --label-line-height: 0rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0rem;
  --label-font-weight--secondary: normal;
  --label-line-height--secondary: 0rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis .L4 {
  --heading-font-family: Haas Grot Disp R;
  --heading-font-size: 1.0625rem;
  --heading-font-weight: 500;
  --heading-line-height: 1.25rem;
  --heading-paragraph: 0rem;
  --heading-font-family--emphasized: Haas Grot Disp R;
  --heading-font-size--emphasized: 1.0625rem;
  --heading-font-weight--emphasized: 600;
  --heading-line-height--emphasized: 1.25rem;
  --heading-paragraph--emphasized: 0rem;
  --body-font-family: Haas Grot Text R;
  --body-font-size: 0.8125rem;
  --body-font-weight: 400;
  --body-line-height: 1.125rem;
  --body-paragraph: 0.5rem;
  --body-font-family--link: Haas Grot Text R;
  --body-font-size--link: 0.8125rem;
  --body-font-weight--link: 500;
  --body-line-height--link: 1.125rem;
  --body-paragraph--link: 0.5rem;
  --meta-font-family: Haas Grot Text R;
  --meta-font-size: 0.6875rem;
  --meta-font-weight: 400;
  --meta-line-height: 1rem;
  --meta-paragraph: 0.5rem;
  --label-font-family: Haas Grot Text R;
  --label-font-size: 0rem;
  --label-font-weight: normal;
  --label-line-height: 0rem;
  --label-paragraph: 0rem;
  --label-font-family--secondary: Haas Grot Text R;
  --label-font-size--secondary: 0rem;
  --label-font-weight--secondary: normal;
  --label-line-height--secondary: 0rem;
  --label-paragraph--secondary: 0rem;
}
#marketing-thesis h1,
#marketing-thesis h2,
#marketing-thesis h3,
#marketing-thesis h4,
#marketing-thesis h5,
#marketing-thesis .heading {
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
}
#marketing-thesis h1 + h1,
#marketing-thesis h1 + h2,
#marketing-thesis h1 + h3,
#marketing-thesis h1 + h4,
#marketing-thesis h1 + h5,
#marketing-thesis h1 + .heading,
#marketing-thesis h2 + h1,
#marketing-thesis h2 + h2,
#marketing-thesis h2 + h3,
#marketing-thesis h2 + h4,
#marketing-thesis h2 + h5,
#marketing-thesis h2 + .heading,
#marketing-thesis h3 + h1,
#marketing-thesis h3 + h2,
#marketing-thesis h3 + h3,
#marketing-thesis h3 + h4,
#marketing-thesis h3 + h5,
#marketing-thesis h3 + .heading,
#marketing-thesis h4 + h1,
#marketing-thesis h4 + h2,
#marketing-thesis h4 + h3,
#marketing-thesis h4 + h4,
#marketing-thesis h4 + h5,
#marketing-thesis h4 + .heading,
#marketing-thesis h5 + h1,
#marketing-thesis h5 + h2,
#marketing-thesis h5 + h3,
#marketing-thesis h5 + h4,
#marketing-thesis h5 + h5,
#marketing-thesis h5 + .heading,
#marketing-thesis .heading + h1,
#marketing-thesis .heading + h2,
#marketing-thesis .heading + h3,
#marketing-thesis .heading + h4,
#marketing-thesis .heading + h5,
#marketing-thesis .heading + .heading {
  margin-top: var(--heading-paragraph);
}
#marketing-thesis h1--emphasized,
#marketing-thesis h2--emphasized,
#marketing-thesis h3--emphasized,
#marketing-thesis h4--emphasized,
#marketing-thesis h5--emphasized,
#marketing-thesis .heading--emphasized {
  font-family: var(--heading-font-family--emphasized);
  font-size: var(--heading-font-size--emphasized);
  font-weight: var(--heading-font-weight--emphasized);
  line-height: var(--heading-line-height--emphasized);
}
#marketing-thesis .heading--emphasized + .heading--emphasized {
  margin-top: var(--heading-paragraph--emphasized);
}
#marketing-thesis p,
#marketing-thesis .body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}
#marketing-thesis p--link,
#marketing-thesis .body--link {
  font-family: var(--body-font-family--link);
  font-size: var(--body-font-size--link);
  font-weight: var(--body-font-weight--link);
  line-height: var(--body-line-height--link);
}
#marketing-thesis .body + .body {
  margin-top: var(--body-paragraph);
}
#marketing-thesis .body--link + .body--link {
  margin-top: var(--body-paragraph--link);
}
#marketing-thesis .meta {
  font-family: var(--meta-font-family);
  font-size: var(--meta-font-size);
  font-weight: var(--meta-font-weight);
  line-height: var(--meta-line-height);
}
#marketing-thesis .meta + .meta {
  margin-top: var(--meta-paragraph);
}
#marketing-thesis label,
#marketing-thesis .label {
  font-family: var(--label-font-family);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  line-height: var(--label-line-height);
}
#marketing-thesis label + label,
#marketing-thesis label + .label,
#marketing-thesis .label + label,
#marketing-thesis .label + .label {
  margin-top: var(--label-paragraph);
}
#marketing-thesis label--secondary,
#marketing-thesis .label--secondary {
  font-family: var(--label-font-family--secondary);
  font-size: var(--label-font-size--secondary);
  font-weight: var(--label-font-weight--secondary);
  line-height: var(--label-line-height--secondary);
}
#marketing-thesis label--secondary + label--secondary,
#marketing-thesis label--secondary + .label--secondary,
#marketing-thesis .label--secondary + label--secondary,
#marketing-thesis .label--secondary + .label--secondary {
  margin-top: var(--label-paragraph--secondary);
}
#marketing-thesis a {
  letter-spacing: 0px;
}
#marketing-thesis a:hover {
  color: #045385;
}
#marketing-thesis .padded {
  display: block;
  padding: 2rem;
}
#marketing-thesis .guttered {
  width: 95%;
}
@media (min-width: 768px) {
  #marketing-thesis .guttered {
    width: 720px;
  }
}
@media (min-width: 992px) {
  #marketing-thesis .guttered {
    width: 960px;
  }
}
@media (min-width: 1230px) {
  #marketing-thesis .guttered {
    width: 1140px;
  }
}
#marketing-thesis .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: auto;
  margin-top: 6rem;
}
@media (min-width: 768px) {
  #marketing-thesis .video-container:first-child {
    margin-top: 50px;
  }
}
#marketing-thesis .thesis-player {
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#marketing-thesis .hero {
  margin: 10rem auto 5rem auto;
  text-align: center;
}
#marketing-thesis .hero .flex-and-gap {
  justify-content: center;
  margin: 15px;
}
#marketing-thesis .hero__thesis-logo {
  display: block;
  width: 50%;
  height: auto;
  margin: auto;
}
#marketing-thesis .hero .mission-statement {
  margin: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 700px;
  width: 90%;
  text-align: center;
  color: #6d7e8f;
}
@media (max-width: 576px) {
  #marketing-thesis .hero {
    margin: 5rem 0;
  }
}
#marketing-thesis .left-side-drip {
  float: left;
  color: #516070;
  transform-origin: left;
  transform: translateY(500%) rotate(-90deg);
}
#marketing-thesis .left-side-drip p {
  color: #516070;
}
#marketing-thesis .left-side-drip .long-gray-line {
  transform: translateY(-500%) translateX(120%);
}
#marketing-thesis .right-side-drip {
  float: right;
  color: #516070;
  transform-origin: right;
  transform: rotate(90deg);
}
#marketing-thesis .right-side-drip p {
  color: #516070;
  text-align: right;
}
#marketing-thesis .right-side-drip .long-gray-line {
  transform: translateY(300%) translateX(120%);
  margin: 0;
  width: 170px;
}
#marketing-thesis .long-gray-line {
  height: 1px;
  border: 1px solid rgba(245, 247, 250, 0.1);
}
#marketing-thesis .gradient-bg {
  background: linear-gradient(111.98deg, #121b23 42.8%, #192734 97.98%);
}
#marketing-thesis .hidden {
  display: none;
}
#marketing-thesis .all-episodes {
  margin: auto;
  margin-top: 4rem;
  padding-bottom: 6rem;
}
#marketing-thesis .all-episodes .year-of-shows {
  padding-bottom: 4rem;
}
#marketing-thesis .all-episodes .episode-year {
  display: flex;
  color: #6d7e8f;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
}
#marketing-thesis .all-episodes .episode-year p {
  margin-right: 10px;
}
#marketing-thesis .all-episodes .episode-year .long-gray-line {
  flex-basis: 100%;
  margin: auto;
}
#marketing-thesis .all-episodes .cards-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  width: 100%;
}
@media (max-width: 768px) {
  #marketing-thesis .all-episodes .cards-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  #marketing-thesis .all-episodes .cards-list {
    grid-template-columns: 1fr;
  }
}
#marketing-thesis .all-episodes .thumbnail-card {
  background-color: #1d2833;
  border-radius: 10px;
  margin: 0;
  margin-top: 15px;
}
#marketing-thesis .all-episodes .thumbnail-card:hover {
  box-shadow: 4px 4px 11px rgba(0, 0, 0, 0.4);
}
#marketing-thesis .all-episodes .thumbnail-card__episode-number {
  margin: 1rem;
  display: block;
  color: #00aaff;
}
#marketing-thesis .all-episodes .thumbnail-card__title {
  color: #ffffff;
  margin: 1rem;
  display: block;
  text-transform: none;
  height: 4rem;
}
#marketing-thesis .all-episodes .thumbnail-card img {
  border-radius: 10px 10px 0 0;
  display: block;
  width: 100%;
}
#marketing-thesis .listen-on-links {
  flex-wrap: wrap;
}
#marketing-thesis .listen-on-links .listen-on-title {
  width: 100%;
  font-family: "Haas Grot Text R";
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
}
#marketing-thesis .listen-on-links .spotify {
  background-image: url("/images/thesis-distribution/spotify.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
}
#marketing-thesis .listen-on-links .youtube {
  background-image: url("/images/thesis-distribution/youtube.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 52px;
  height: 38px;
}
#marketing-thesis .listen-on-links .apple {
  background-image: url("/images/thesis-distribution/apple.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 33px;
  height: 33px;
}
@media (max-width: 520px) {
  #marketing-thesis .episode-info {
    flex-direction: column;
  }
}
#marketing-thesis .episode-info {
  display: flex;
  margin: auto;
  margin-bottom: 120px;
  gap: 30px;
}
#marketing-thesis .episode-info .about-or-transcript {
  flex-basis: 60%;
  gap: 10px;
}
#marketing-thesis .episode-info .about-or-transcript h1 {
  margin: 0 0 1rem 0;
}
#marketing-thesis .episode-info .about-or-transcript .transcript-line {
  margin-top: 1em;
}
#marketing-thesis .episode-info .about-or-transcript__airing-info {
  gap: 15px;
  margin-bottom: 1rem;
}
#marketing-thesis .episode-info .about-or-transcript__airing-info * {
  flex-basis: 10%;
}
#marketing-thesis .episode-info .about-or-transcript__buttons {
  margin-bottom: 2em;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  gap: 15px;
}
#marketing-thesis .episode-info .about-or-transcript__buttons .active {
  color: #00aaff;
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 0.5rem;
}
#marketing-thesis .episode-info .about-or-transcript__buttons * {
  flex-basis: 10%;
}
#marketing-thesis .episode-info .about-or-transcript__buttons *:hover {
  color: #045385;
}
#marketing-thesis .gray-title {
  font-weight: 500;
  font-size: 11px;
  line-height: 145%;
  text-transform: uppercase;
  color: #8b9cad;
}
#marketing-thesis .flex-and-gap {
  display: flex;
  gap: 10px;
  align-items: center;
}
#marketing-thesis .bios {
  flex-basis: 30%;
  display: flex;
  gap: 22px;
  flex-direction: column;
}
#marketing-thesis .thesis-bio {
  display: flex;
  gap: 22px 22px;
}
#marketing-thesis .thesis-bio img {
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
#marketing-thesis .thesis-bio .name-and-bio__name {
  /* Heading 4 Emphasized */
  margin-bottom: 4px;
}
#marketing-thesis .thesis-bio .name-and-bio__titles-and-such {
  /* Meta 3 */
  font-family: "Haas Grot Disp R";
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: #6d7e8f;
}
#marketing-thesis .checker-bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px;
  width: 100%;
}
#marketing-thesis .checker-bg:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("/images/checker-vector.svg");
  background-size: cover;
  opacity: 0.25;
}
#marketing-thesis .inbound-email-grabber {
  /* get above the background image after for opacity hack  */
  z-index: 1;
  width: 50%;
}
@media (max-width: 768px) {
  #marketing-thesis .inbound-email-grabber {
    width: 80%;
  }
}
#marketing-thesis .inbound-email-grabber h1 {
  margin: auto;
  max-width: 600px;
  margin-bottom: 60px;
}
#marketing-thesis .inbound-email-grabber .email-form {
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
  max-width: 700px;
}
#marketing-thesis .inbound-email-grabber .input-padder {
  flex-basis: 80%;
  border-radius: 16px;
  padding: 10px;
  background-color: #1d2833;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#marketing-thesis .inbound-email-grabber input {
  background-color: #17212B;
  border: 1.5px solid #F5F7FA26;
  color: #ffffff;
}
#marketing-thesis .inbound-email-grabber input.error {
  border-color: #F54E59;
}
#marketing-thesis .inbound-email-grabber input.error + .status-symbol {
  background-image: url("/images/icons/error-exclamation.svg");
  background-size: cover;
  width: 1em;
  height: 1em;
  right: 1.5em;
  position: absolute;
}
#marketing-thesis .inbound-email-grabber input:focus {
  border-color: #00AAFF;
}
#marketing-thesis .inbound-email-grabber input.success {
  border-color: #00D395;
}
#marketing-thesis .inbound-email-grabber input.success + .status-symbol {
  background-image: url("/images/icons/checkmark.svg");
  background-size: cover;
  width: 1em;
  height: 1em;
  right: 1.5em;
  position: absolute;
}
#marketing-thesis .inbound-email-grabber .pill-button {
  background-color: #00D395;
  border-color: #00D395;
  color: #FFFFFF;
  text-transform: none;
}
#marketing-thesis .inbound-email-grabber .pill-button:hover {
  background-color: #28e0a9;
  box-shadow: 4px 4px 11px rgba(0, 0, 0, 0.4);
}
#marketing-thesis .inbound-email-grabber h1 {
  text-align: center;
  color: #ffffff;
  font-family: "Haas Grot Disp R";
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
}
#marketing-thesis .inbound-email-grabber input {
  border-radius: 8px;
}

#main {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
#main > div:not(.alert) {
  flex-grow: 1;
}

body {
  background: #FFFFFF;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

.root-holder {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.mobile-hide {
  display: none;
}
@media (min-width: 40em) {
  .mobile-hide {
    display: unset;
  }
}

.mobile-only {
  display: block;
}
@media (min-width: 40em) {
  .mobile-only {
    display: none;
  }
}

.hideable {
  animation: bounceFade 0.3s ease;
  transition: opacity 0.2s linear;
}
@keyframes bounceFade {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal {
  align-items: flex-start;
}
.modal .container {
  margin-top: 6.5rem;
}

/*# sourceMappingURL=main.css.map */


/*# sourceMappingURL=app.eded4731.chunk.css.map*/