@charset "UTF-8";
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  align-items: center;
  width: 100%;
  transition: transform 0.6s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);
}

@supports (transform-style: preserve-3d) {
  .carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
    transform: translate3d(0, 0, 0);
  }
}
.carousel-item-next,
.active.carousel-item-right {
  transform: translateX(100%);
}

@supports (transform-style: preserve-3d) {
  .carousel-item-next,
.active.carousel-item-right {
    transform: translate3d(100%, 0, 0);
  }
}
.carousel-item-prev,
.active.carousel-item-left {
  transform: translateX(-100%);
}

@supports (transform-style: preserve-3d) {
  .carousel-item-prev,
.active.carousel-item-left {
    transform: translate3d(-100%, 0, 0);
  }
}
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators li::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators li::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators .active {
  background-color: #fff;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.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);
  }
}

@-webkit-keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

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

.animated-background--dark {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #borrow-overview .headline--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #interface-container .panel .asset .progress-holder--loading, #interface-container .panel .text-right .balance--loading, .proposal__content__description__title--loading, .name--loading, .identity .symbol--loading, .icon--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #borrow-overview .headline--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
  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 #6563D6;
}
.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: #6563D6;
  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 #6563D6;
}
.accordian__item__description ul li:last-child {
  margin-bottom: 0;
}
.accordian__item__description ul li::before {
  content: "•  ";
  color: #6563D6;
  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 #6563D6;
}
.accordian__plus {
  height: 2rem;
  width: 2rem;
  position: relative;
  flex-shrink: 0;
}
.accordian__plus span {
  position: absolute;
  transition: 0.3s;
  background: #6563D6;
}
.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%;
}

.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: #6563D6;
  color: #FFFFFF;
  border-color: #6563D6;
}
.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: #514fd1;
  border-color: #514fd1;
}
.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, #6563D6 40%, #b5b4eb 50%, #6563D6 60%);
  background-size: 300%;
  -webkit-animation: AnimationName 2s linear infinite;
          animation: AnimationName 2s linear infinite;
  cursor: default;
}
@-webkit-keyframes AnimationName {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@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: #A34CAE;
  color: #FFFFFF;
  border-color: #A34CAE;
}
.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: #92449c;
  border-color: #92449c;
}
.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, #A34CAE 40%, #c891cf 50%, #A34CAE 60%);
  background-size: 300%;
  -webkit-animation: AnimationName 2s linear infinite;
          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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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: #6563D6;
  color: #6563D6;
}
.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: #f7f7fd;
  color: #3d3bcb;
}
.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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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: #A34CAE;
  color: #A34CAE;
}
.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: #faf6fb;
  color: #823c8b;
}
.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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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%;
  -webkit-animation: AnimationName 2s linear infinite;
          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;
}

.chevron::before {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  left: 0px;
  position: relative;
  top: 5px;
  transform: rotate(135deg);
  vertical-align: top;
  width: 8px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.chevron.active::before {
  transform: rotate(-45deg);
}

.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: #6563D6;
  border-color: #6563D6;
}
.connecting-ring--for-borrowing {
  background: #A34CAE;
  border-color: #A34CAE;
}
.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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

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

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

@-webkit-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@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/lever.png);
  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: #6563D6;
}
.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--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 {
  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: #6563D6;
  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 #6563D6;
}

.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: #6563D6;
  border-color: #6563D6;
}
.connecting-ring--for-borrowing {
  background: #A34CAE;
  border-color: #A34CAE;
}
.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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ctoken {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  background-image: url("../../compound-components/assets/ctoken_blank.svg");
  width: 3.375rem;
  height: 3.375rem;
}
.ctoken--small {
  width: 26px;
  height: 26px;
}
.ctoken--cAAVE {
  background-image: url("../../compound-components/assets/ctoken_aave_product.svg");
}
.ctoken--cBAT {
  background-image: url("../../compound-components/assets/ctoken_bat_product.svg");
}
.ctoken--cCOMP {
  background-image: url("../../compound-components/assets/ctoken_comp_product.svg");
}
.ctoken--cDAI {
  background-image: url("../../compound-components/assets/ctoken_dai_product.svg");
}
.ctoken--cETH {
  background-image: url("../../compound-components/assets/polygon-token.svg");
}
.ctoken--cLINK {
  background-image: url("../../compound-components/assets/ctoken_link_product.svg");
}
.ctoken--cMKR {
  background-image: url("../../compound-components/assets/ctoken_mkr_product.svg");
}
.ctoken--cREP {
  background-image: url("../../compound-components/assets/ctoken_rep_product.svg");
}
.ctoken--cSAI {
  background-image: url("../../compound-components/assets/ctoken_sai_product.svg");
}
.ctoken--cSUSHI {
  background-image: url("../../compound-components/assets/ctoken_sushi_product.svg");
}
.ctoken--cTUSD {
  background-image: url("../../compound-components/assets/ctoken_tusd_product.svg");
}
.ctoken--cUNI {
  background-image: url("../../compound-components/assets/ctoken_uni_product.svg");
}
.ctoken--cUSDC {
  background-image: url("../../compound-components/assets/ctoken_usdc_product.svg");
}
.ctoken--cUSDP {
  background-image: url("../../compound-components/assets/ctoken_usdp_product.svg");
}
.ctoken--cUSDT {
  background-image: url("../../compound-components/assets/ctoken_usdt_product.svg");
}
.ctoken--cWBTC {
  background-image: url("../../compound-components/assets/ctoken_wbtc_product.svg");
}
.ctoken--cWBTC2 {
  background-image: url("../../compound-components/assets/ctoken_wbtc_product.svg");
}
.ctoken--cYFI {
  background-image: url("../../compound-components/assets/ctoken_yfi_product.svg");
}
.ctoken--cZRX {
  background-image: url("../../compound-components/assets/ctoken_zrx_product.svg");
}

.dropdown {
  --dropdownHeight: 3rem;
  --dropdownWidth: 7.75rem;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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 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);
  -webkit-animation: bounce 0.3s ease;
          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;
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
@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: #6563D6;
}
.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: #6563D6;
}
@media (max-width: 40em) {
  .dropdown__option--language {
    justify-content: space-between;
    padding-left: 0;
  }
}

.dot-indicator {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  display: inline-block;
}
.dot-indicator.red {
  background-color: #e74694;
}
.dot-indicator.yellow {
  background-color: #FFD24A;
}
.dot-indicator.green {
  background-color: #6563D6;
}
.dot-indicator.kovan {
  background-color: #6C58F6;
}
.dot-indicator.rinkeby {
  background-color: #EEC55C;
}
.dot-indicator.goerli {
  background-color: #5197EB;
}
.dot-indicator.ropsten {
  background-color: #EC598D;
}

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

.animated-background--dark {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #borrow-overview .headline--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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--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--MATIC {
  background-image: url("../../compound-components/assets/polygon-token.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");
}

.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: #6563D6;
  border-color: #6563D6;
}
.connecting-ring--for-borrowing {
  background: #A34CAE;
  border-color: #A34CAE;
}
.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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader {
  position: absolute;
  height: 2.635rem;
  width: 2.635rem;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
}
.loader.active {
  display: block;
}

.spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background: #6563D6;
  border-color: #6563D6;
}
.spinner::after {
  content: "";
  box-sizing: border-box;
  display: block;
  width: 70%;
  height: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.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;
}

.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: #6563D6;
}
.panel__footer--disabled {
  color: #CCD6DD;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
}
.panel__pager__previous:hover label {
  color: #6563D6;
}
.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: #6563D6;
}
.panel__pager__next:hover label {
  color: #6563D6;
}

.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;
}

.parallax {
  display: block;
  height: auto;
  position: relative;
  width: auto;
}
.parallax__content {
  height: auto;
  transform: perspective(1600px);
  transform-style: preserve-3d;
  transition: all 0.4s ease;
  width: 100%;
}
.parallax__content:before {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.parallax__front {
  align-items: center;
  color: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all 0.4s ease;
  width: 100%;
  z-index: 1;
}
.parallax__top-left {
  height: 50%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  z-index: 300;
  cursor: pointer;
}
.parallax__top-left:hover ~ .parallax__content {
  transform: perspective(1600px) rotateX(-5deg) rotateY(5deg);
}
.parallax__top-left:hover ~ .parallax__content:before {
  background: linear-gradient(135deg, rgba(101, 119, 134, 0.05) 0%, rgba(101, 119, 134, 0) 50%);
}
.parallax__top-left:hover ~ .parallax__content .parallax__front {
  transform: translate3d(-0.1px, -0.1px, 16px);
}
.parallax__top-right {
  height: 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 300;
  cursor: pointer;
}
.parallax__top-right:hover ~ .parallax__content {
  transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg);
}
.parallax__top-right:hover ~ .parallax__content:before {
  background: linear-gradient(-135deg, rgba(101, 119, 134, 0.05) 0%, rgba(101, 119, 134, 0) 50%);
}
.parallax__top-right:hover ~ .parallax__content .parallax__front {
  transform: translate3d(-0.1px, -0.1px, 16px);
}
.parallax__bottom-left {
  bottom: 0;
  height: 50%;
  left: 0;
  position: absolute;
  width: 50%;
  z-index: 300;
  cursor: pointer;
}
.parallax__bottom-left:hover ~ .parallax__content {
  transform: perspective(1600px) rotateX(5deg) rotateY(5deg);
}
.parallax__bottom-left:hover ~ .parallax__content:before {
  background: linear-gradient(45deg, rgba(101, 119, 134, 0.05) 0%, rgba(101, 119, 134, 0) 50%);
}
.parallax__bottom-left:hover ~ .parallax__content .parallax__front {
  transform: translate3d(-0.1px, -0.1px, 16px);
}
.parallax__bottom-right {
  bottom: 0;
  height: 50%;
  position: absolute;
  right: 0;
  width: 50%;
  z-index: 300;
  cursor: pointer;
}
.parallax__bottom-right:hover ~ .parallax__content {
  transform: perspective(1600px) rotateX(5deg) rotateY(-5deg);
}
.parallax__bottom-right:hover ~ .parallax__content:before {
  background: linear-gradient(-45deg, rgba(101, 119, 134, 0.05) 0%, rgba(101, 119, 134, 0) 50%);
}
.parallax__bottom-right:hover ~ .parallax__content .parallax__front {
  transform: translate3d(-0.1px, -0.1px, 16px);
}

.pie {
  border-radius: 100%;
  height: calc(var(--size, 200) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 200) * 1px);
}
.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
}
.pie__segment:after .pie__segment:before {
  background: var(--bg, #e74c3c);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}
.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 0%;
}
.pie__segment:after {
  opacity: var(--over50, 0);
}

.progress {
  display: flex;
  flex-direction: row;
  flex: 1 1;
  height: 5px;
  max-width: 100%;
  overflow: hidden;
  background-color: rgba(40, 49, 55, 0.1);
  border-radius: 100px;
  margin-top: 1rem;
}
.progress.dark-clear {
  background: rgba(54, 61, 68, 0.5);
}
.progress.thin {
  height: 3px;
}

.progress-bar {
  display: flex;
  background-color: #627eea;
}
.progress-bar:last-of-type {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
.progress-bar.BAT {
  background-color: #ff5000;
}
.progress-bar.DAI {
  background-color: #fab323;
}
.progress-bar.ETH, .progress-bar.WETH {
  background-color: #627eea;
}
.progress-bar.REP {
  background-color: #553580;
}
.progress-bar.SAI {
  background-color: #fab323;
}
.progress-bar.USDC {
  background-color: #2775c9;
}
.progress-bar.USDT {
  background-color: #26a17b;
}
.progress-bar.WBTC, .progress-bar.WBTC2 {
  background-color: #f6941a;
}
.progress-bar.ZRX {
  background-color: #000000;
}
.progress-bar.red {
  background-color: #e74694;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #6563D6;
}

.pulsating-dot {
  display: inline-block;
  flex-shrink: 0;
  border: none;
  background: transparent;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
}
.pulsating-dot::before {
  content: "";
  position: absolute;
  z-index: 10;
  border: none;
  background: #A34CAE;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.pulsating-dot::after {
  /* this is used to create the pulse animation */
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-animation: pulsing-animation 2s infinite;
          animation: pulsing-animation 2s infinite;
  border-radius: 50%;
}

@-webkit-keyframes pulsing-animation {
  0% {
    transform: scale(0);
    box-shadow: inset 0 0 1px 1px rgba(150, 105, 237, 0.8);
  }
  50% {
    box-shadow: inset 0 0 2px 2px rgba(150, 105, 237, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(150, 105, 237, 0);
  }
}

@keyframes pulsing-animation {
  0% {
    transform: scale(0);
    box-shadow: inset 0 0 1px 1px rgba(150, 105, 237, 0.8);
  }
  50% {
    box-shadow: inset 0 0 2px 2px rgba(150, 105, 237, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(150, 105, 237, 0);
  }
}
.separator {
  height: 1px;
  width: 100%;
  background: #CCD6DD;
  opacity: 0.3;
}

.tab-group {
  display: inline-block;
}
.tab-group__line {
  background-color: #CCD6DD;
  height: 2px;
  width: 100%;
  margin-top: -2px;
  z-index: 0;
}
.tab-group__line--dark {
  background-color: #070A0E;
}
.tab-group__options {
  width: 100%;
  display: inline-flex;
  z-index: 1;
}
.tab-group__options--align-between {
  display: flex;
  justify-content: space-between;
}
.tab-group__option {
  cursor: pointer;
  color: #CCD6DD;
  font-size: 1.1rem;
  height: 100%;
  padding: 0.5rem 0;
}
.tab-group__option:not(:first-child) {
  margin-left: 1.5rem;
}
.tab-group__option--grow {
  flex-grow: 1;
  text-align: center;
}
.tab-group__option--landing-grey {
  color: #657786;
}
.tab-group__option--action-modal-grey {
  color: #AAB8C1;
}
.tab-group__option--dark {
  color: #657786;
}
.tab-group__option--active {
  color: #070A0E;
  padding: 0.5rem 0;
  border-bottom: 2px solid #070A0E;
}
.tab-group__option--active--large {
  position: relative;
  padding-bottom: 0.8rem;
  border: none;
}
.tab-group__option--active--large::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #070A0E;
  height: 3px;
  border-radius: 10px 10px 0 0;
}
.tab-group__option--active--large--green {
  color: #6563D6;
}
.tab-group__option--active--large--green::after {
  background: #6563D6;
}
.tab-group__option--active--large--purple {
  color: #A34CAE;
}
.tab-group__option--active--large--purple::after {
  background: #A34CAE;
}
.tab-group__option--active--green {
  color: #6563D6;
  border-color: #6563D6;
}
.tab-group__option--active--purple {
  color: #A34CAE;
  border-color: #A34CAE;
}
.tab-group__option--active--white {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.tooltip {
  position: relative;
}
.tooltip:hover .tooltip__text {
  visibility: visible;
}
.tooltip__text {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #141E27;
  color: #F9FAFB;
  text-align: left;
  border-radius: 4px;
  padding: 1rem;
  position: absolute;
  z-index: 1;
  top: 115%;
  margin-left: 1px;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip__text__headline {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}
.tooltip__text__subtext {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.tooltip__text__subtext--grey {
  color: #AAB8C1;
}
.tooltip__text__link {
  color: #6563D6;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 0.875rem;
  text-transform: none;
}
.tooltip__text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #141E27 transparent;
}
.tooltip__text--left {
  width: 13.125rem;
  top: -25%;
  left: auto;
  right: 0%;
  transform: translate(-40%, -40%);
}
.tooltip__text--left::after {
  content: "";
  position: absolute;
  left: auto;
  right: 0%;
  bottom: 50%;
  margin-top: 0;
  margin-right: -10px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #141E27;
  transform: rotate(1deg);
}
@media (max-width: 40em) {
  .tooltip__text--left {
    top: 0%;
    left: 100%;
    bottom: auto;
    right: auto;
    transform: translate(-25%, -110%);
  }
  .tooltip__text--left::after {
    top: 100%;
    left: 0%;
    bottom: auto;
    right: auto;
    margin-top: -2px;
    margin-right: 0;
    border-color: #141E27 transparent transparent transparent;
  }
}

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

.animated-background--dark {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #borrow-overview .headline--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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: #6563D6;
}
.panel__footer--disabled {
  color: #CCD6DD;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
}
.panel__pager__previous:hover label {
  color: #6563D6;
}
.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: #6563D6;
}
.panel__pager__next:hover label {
  color: #6563D6;
}

.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 #6563D6;
  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, #interface-container .panel .asset .progress-holder--loading, #interface-container .panel .text-right .balance--loading, .proposal__content__description__title--loading, .icon--loading, .identity .symbol--loading, .name--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

.animated-background--dark {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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, #borrow-overview .headline--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.docs__main-navigation__content {
  width: 100%;
  display: flex;
  z-index: 19;
  justify-content: space-between;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
}
.docs__main-navigation__content .chevron-container {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
  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 #6563D6;
}
.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: #6563D6;
  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 #6563D6;
}
.docs__content .ul-container ul li:last-child {
  margin-bottom: 0;
}
.docs__content .ul-container ul li::before {
  content: "•  ";
  color: #6563D6;
  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: #6563D6;
  border-right: 2px solid #6563D6;
}
.docs__side-navigation__content .subsection:hover,
.docs__side-navigation__content .section:hover {
  color: #6563D6;
}
.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;
  }
}
.brand {
  display: inline-block;
  background-image: url(../../images/compound-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 121px;
  height: 27px;
}

.mark {
  display: inline-block;
  background-image: url(../../compound-components/assets/compound-mark.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  width: 29px;
  height: 37px;
}

section.hero {
  background: #070A0E;
  margin-bottom: -3.75rem;
  padding: 1.2635rem 0 7.315rem;
}
section.hero h1 {
  margin: 0;
  padding-top: 3.99rem;
  color: #ffffff;
}

.field {
  display: flex;
  justify-content: space-between;
  padding: 1.33rem;
}
.field label {
  margin: 0;
}
.field .balance {
  text-align: center;
}
.field .subtitle {
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: #ACBBC2;
}

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

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

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

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

button:disabled {
  cursor: default;
}

input:disabled + button {
  display: none;
}

.alert {
  background-color: #070A0E;
  color: #FFFFFF;
  border-bottom: 1px solid #000000;
  padding: 1.33rem;
  text-align: center;
  line-height: 1.5;
  font-size: 0.9em;
}
.alert--dark2 {
  background-color: #141E27;
  color: #FFFFFF;
}
.alert.caution {
  background-color: #e74694;
  color: #FFFFFF;
}
.alert.vote {
  font-size: 14px;
  background-color: #141E27;
  padding: 1.33rem;
}
.alert a {
  color: #6563D6;
  font-size: 14px;
  font-weight: 500;
  margin-left: 0.665rem;
  text-transform: none;
  letter-spacing: 0;
}
.alert a::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 11px;
  margin-left: 6px;
  margin-bottom: -1px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../images/icn-arrow.svg);
  transition: transform 0.2s ease-in-out;
}
.alert a:hover {
  color: #6563D6;
  text-decoration: underline;
}
.alert a:hover::after {
  transform: translateX(5px);
}
.alert a.inline {
  margin-left: 0;
}
.alert a.inline::after {
  content: none;
}
.alert .button {
  margin-left: 1rem;
  padding: 0.2rem 0.9rem;
  text-decoration: none;
}

select {
  width: 100%;
  border: 2px solid #747b7d;
  height: 3rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
}

.checkbox {
  display: flex;
  margin-bottom: 1.33rem;
  touch-action: manipulation;
}
.checkbox input[type=checkbox] {
  width: auto;
  margin: 0 1rem 0 0;
  zoom: 2;
}
.checkbox label {
  display: inline;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 0.9rem;
  line-height: 1.25;
}

.market-bar {
  font-size: 0.9rem;
  margin-top: 1rem;
}
.market-bar.supply {
  color: #6563D6;
}
.market-bar.supply .bar {
  background: #D4F6EC;
}
.market-bar.supply .fill {
  background: #6563D6;
}
.market-bar.borrow {
  color: #A34CAE;
}
.market-bar.borrow .bar {
  background: #EAE1FB;
}
.market-bar.borrow .fill {
  background: #A34CAE;
}
.market-bar label {
  margin: 0;
}
.market-bar .bar {
  width: 100%;
  height: 4px;
  margin-top: 0.5rem;
}
.market-bar .fill {
  height: 4px;
}

#repl .row p {
  margin-left: 30px;
  margin-right: 30px;
  overflow-x: scroll;
}
#repl .row input,
#repl .row button {
  margin-left: 20px;
  margin-bottom: 10px;
}

.build-item {
  border-top: 1px solid #d1d6db;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2rem 0 !important;
  transition: all 0.3s ease-in-out;
}
.build-item label {
  width: 4rem;
}
.build-item .build-item-text {
  flex-grow: 1;
  margin: 0;
  color: #141E27;
}
.build-item .build-item-text > * {
  pointer-events: auto;
}
.build-item:hover .build-item-text {
  color: #6563D6;
}

.dot-indicator {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  display: inline-block;
}
.dot-indicator.red {
  background-color: #e74694;
}
.dot-indicator.yellow {
  background-color: #FFD24A;
}
.dot-indicator.green {
  background-color: #6563D6;
}
.dot-indicator.kovan {
  background-color: #6C58F6;
}
.dot-indicator.rinkeby {
  background-color: #EEC55C;
}
.dot-indicator.goerli {
  background-color: #5197EB;
}
.dot-indicator.ropsten {
  background-color: #EC598D;
}

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 .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 {
  display: flex;
  align-items: center;
}
footer .bottom .social .dropdown--network {
  display: inline-block;
  margin-left: 2.66rem;
}
footer .bottom .social .dropdown--network .dot-indicator {
  margin-right: 8px;
}
footer .bottom .social .dropdown--network label.small {
  color: #ffffff;
  margin-right: 8px;
  font-weight: 500;
}
footer .bottom .social .dropdown--network label.small ::after {
  vertical-align: middle;
}
footer .bottom .social .dropdown--network label.small:hover {
  color: #6563D6;
}
@media (max-width: 40em) {
  footer .bottom .social .dropdown--network {
    margin-left: auto;
    margin-right: 0;
  }
  footer .bottom .social .dropdown--network .dot-indicator {
    margin-right: 0;
  }
}
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: #6563D6;
}
footer .dapp {
  color: #6563D6;
  border-color: #6563D6;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
footer .dapp:hover {
  background-color: #6563D6;
  color: #FFFFFF;
  border-color: #6563D6;
}
footer .icn {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 0.9975rem;
  height: 0.9975rem;
  margin-left: 0.9975rem;
}
footer .icn.discord {
  background-image: url(../../images/icn-discord-dark-grey.svg);
}
footer .icn.github {
  background-image: url(../../images/icn-github-dark-grey.svg);
}
footer .icn.medium {
  background-image: url(../../images/icn-medium-dark-grey.svg);
}
footer .icn.twitter {
  background-image: url(../../images/icn-twitter-dark-grey.svg);
}
@media (max-width: 40em) {
  footer label {
    margin-left: 0.9975rem;
  }
  footer .top {
    padding: 25px 0 25px;
    margin-bottom: 0;
  }
  footer .links-holder {
    margin-left: 0.3325rem;
  }
  footer .links {
    margin-top: 45px;
  }
  footer .links a {
    margin-bottom: 2em;
  }
  footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    margin-top: 0;
  }
  footer .social {
    order: -1;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #141E27;
    margin-bottom: 30px;
  }
  footer .icn {
    width: 20px;
    height: 20px;
    margin-right: 25px;
  }
}

footer.dapp {
  background: #F9FAFB;
  position: relative;
  bottom: 0;
  height: 40px;
  width: 100%;
  padding: 0;
  border-top: 1px solid #CCD6DD;
}
footer.dapp .brand {
  background-image: url(../../images/compound-logo-dark.svg);
}
footer.dapp label {
  font-weight: 500;
  margin-left: 30px;
}
footer.dapp label:first-of-type {
  margin-left: 9px;
}
footer.dapp a {
  text-transform: none;
  letter-spacing: 0;
}
footer.dapp .top {
  display: none;
  border-bottom: none;
}
footer.dapp .bottom {
  height: 100%;
  align-items: center;
  margin-top: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  border-top: none;
}
footer.dapp .bottom label:first-of-type {
  color: #AAB8C1;
}
footer.dapp .bottom a {
  margin-left: 30px;
  font-style: medium;
  font-weight: 500;
  font-size: 12px;
  color: #AAB8C1;
}
footer.dapp .bottom .social {
  padding-top: 0;
}
footer.dapp .bottom .dropdown__option label {
  margin-left: 0;
}
@media (max-width: 40em) {
  footer.dapp .bottom .dropdown__option label {
    margin-left: 9px;
  }
}
footer.dapp .bottom .dropdown__option:hover label.language {
  color: #6563D6;
}
footer.dapp .bottom .icn {
  margin-left: 0.3325rem;
}
footer.dapp .bottom .icn.english {
  background-image: url(../../images/icn-english.svg);
}
footer.dapp .bottom .icn.spanish {
  background-image: url(../../images/icn-spanish.svg);
}
footer.dapp .bottom .icn.chinese {
  background-image: url(../../images/icn-chinese.svg);
}
footer.dapp .bottom .icn.french {
  background-image: url(../../images/icn-french.svg);
}
footer.dapp .bottom .icn.korean {
  background-image: url(../../images/icn-korean.svg);
}
@media (max-width: 40em) {
  footer.dapp .bottom .icn {
    margin-right: 0;
  }
}
footer.dapp .links a {
  margin-left: 30px;
  font-style: medium;
  font-weight: 500;
  font-size: 12px;
  color: #AAB8C1;
}
footer.dapp .links a:hover {
  text-decoration: none;
  color: #CFD8DC;
}
footer.dapp .help {
  display: flex;
  align-items: flex-start;
}
footer.dapp .help label {
  margin-bottom: -2px;
}
@media (max-width: 40em) {
  footer.dapp {
    position: relative;
    bottom: 0;
    height: auto;
    border-top: none;
  }
  footer.dapp .top {
    display: block;
    padding-bottom: 0;
  }
  footer.dapp .bottom {
    align-items: flex-start;
    padding: 24px 0;
    border-top: 1px solid #CCD6DD;
  }
  footer.dapp .bottom a {
    margin-left: 0.665rem;
  }
  footer.dapp .links {
    margin-top: 25px;
  }
  footer.dapp .links a {
    margin-left: 0.665rem;
  }
  footer.dapp .help {
    margin-left: 0.665rem;
  }
  footer.dapp .help label {
    margin-left: 0px;
  }
  footer.dapp .social {
    border-bottom: 1px solid #CCD6DD;
    margin-bottom: 24px;
  }
}

header {
  padding: 1rem 0;
  background: #070A0E;
  min-height: 80px;
}
header.dark-2 {
  background-color: #141E27;
}
header .brand {
  background-image: url(../../images/leverLogo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 200px;
  height: 80px;
  margin-top: 2.8em;
}
header .text-center a {
  margin: 0 0.665rem;
  color: #FFFFFF;
  letter-spacing: 1px;
}
header .text-center a.active {
  color: #6563D6;
  padding: 0.3rem 0;
  border-bottom: 1px solid #6563D6;
  transition: padding 0.2s ease;
}
header .text-center a:hover {
  color: #6563D6;
  text-decoration: none;
  padding-bottom: 0.5rem;
}
header .text-right .button {
  padding: 1rem 1.6rem;
}
header .hamburger {
  display: none;
  position: relative;
  z-index: 25;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
header .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;
}
header .hamburger.active span {
  opacity: 1;
  transform: rotate(45deg) translate(0, 2px);
}
header .hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
header .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(1px, -5px);
}
header .comp-balance {
  background: #141E27;
  border-radius: 3px;
  cursor: pointer;
  padding: 0.43rem 0.665rem;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}
header .comp-balance .icon {
  margin-left: 0.25rem;
  height: 1.25rem;
  width: 1.25rem;
  min-height: 1.25rem;
  min-width: 1.25rem;
}
header .comp-balance:hover {
  background: #1d2b38;
}
header #account {
  background: #141E27;
  border-radius: 3px;
  padding: 0.665rem;
  margin-left: 1.33rem;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}
header #account:hover {
  background: #1d2b38;
}
header #account .icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 12px;
  height: 12px;
  min-width: 0;
  min-height: 0;
  margin-right: 0.665rem;
}
header #account .icon.coinbase {
  background-image: url(../../images/icn-coinbase-wallet-connected.svg);
}
header #account .icon.ledger.light {
  background-image: url(../../images/icn-ledger-connected-light.svg);
}
header #account .icon.ledger.dark {
  background-image: url(../../images/icn-ledger-connected-dark.svg);
}
header #account .icon.metamask {
  background-image: url(../../images/icn-metamask-connected.svg);
}
header #account .icon.lever {
  background-image: url(../../images/icn-lever.svg);
}
header #select-currency {
  padding-right: 0.25rem;
}
header.light {
  background: #FFFFFF;
}
header.light .brand {
  background-image: url(../../images/lever.png);
}
header.light .text-center a {
  color: #141E27;
}
header.light .text-center a.active {
  color: #6563D6;
  padding: 0.3rem 0;
  border-bottom: 1px solid #6563D6;
  transition: padding 0.2s ease;
}
header.light .text-center a:hover {
  color: #6563D6;
  text-decoration: none;
  padding-bottom: 0.5rem;
}
header.light .text-center a.treasury {
  color: #045385;
  border-bottom-color: #045385;
}
header.light .text-center a.treasury:hover {
  color: #045385;
}
header.light .hamburger span {
  background-color: #070A0E;
}
header.light #account {
  background: #F9FAFB;
  color: #141E27;
}
header.light #account:hover {
  color: #6563D6;
}
header.light #account.active {
  border-bottom: 2px solid #6563D6;
}
header .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;
}
header .mobile-header.active {
  transform: none;
  opacity: 1;
}
header .mobile-header.light {
  background-color: #FFFFFF;
}
header .mobile-header.light li {
  color: #141E27;
  background-color: #FFFFFF;
}
header .mobile-header.dark-2 {
  background-color: #141E27;
}
header .mobile-header .links {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .mobile-header ul {
  list-style-type: none;
  width: 100%;
  padding-left: 0px;
  background-color: transparent;
  margin-bottom: 0;
}
header .mobile-header li {
  display: flex;
  background-color: transparent;
  width: 100%;
  padding-top: 22px;
  padding-bottom: 22px;
  color: #FFFFFF;
}
header .mobile-header li p {
  margin: 0 auto;
}
header .mobile-header .dapp {
  margin-bottom: 55px;
  margin-left: 42px;
  margin-right: 42px;
  padding-top: 23px !important;
  padding-bottom: 23px !important;
}
@media (max-width: 40em) {
  header.landing .hamburger {
    display: block;
  }
}
header.landing .logo {
  z-index: 25;
}
header.landing .links a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
header.landing .dapp {
  color: #6563D6;
  border-color: #6563D6;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
header.landing .dapp.treasury {
  border-color: #070A0E;
  color: #070A0E;
}
header.landing .dapp:hover {
  background-color: #6563D6;
  color: #FFFFFF;
  border-color: #6563D6;
}

header.dapp #connect-wallet {
  border-radius: 3px;
  margin-left: 1.33rem;
  padding: 0.665rem;
  color: #6563D6;
  border-color: #6563D6;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  text-transform: none;
}
header.dapp #connect-wallet:hover {
  background-color: #6563D6;
  color: #FFFFFF;
  border-color: #6563D6;
}
header.dapp h3 {
  color: #ffffff;
  margin-top: 1.2em;
}
header.dapp .links a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
header.dapp .links a.active {
  color: #6563D6;
  padding: 0.3rem 0;
  border-bottom: 1px solid #6563D6;
  transition: padding 0.2s ease;
}
header.dapp .links a:hover {
  color: #6563D6;
  text-decoration: none;
  padding-bottom: 0.5rem;
}
header.dapp .actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  min-height: 3rem;
}
header.dapp .actions > * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #CFD8DC;
}
@media (min-width: 40em) {
  header.dapp .actions {
    display: flex;
  }
}
header.dapp .mobile-links {
  display: flex;
  justify-content: flex-end;
}
header.dapp .mobile-links__link {
  border-radius: 3px;
  padding: 0.9975rem !important;
  color: #6563D6;
  border-color: #6563D6;
  text-transform: none;
}
@media (min-width: 40em) {
  header.dapp .mobile-links {
    display: none;
  }
}

.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: #6563D6;
}
.panel__footer--disabled {
  color: #CCD6DD;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
}
.panel__pager__previous:hover label {
  color: #6563D6;
}
.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: #6563D6;
}
.panel__pager__next:hover label {
  color: #6563D6;
}

.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;
}

#approvals {
  margin-top: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#approvals .asset {
  background: none;
  padding: 0 0 1rem 0;
}
#approvals .button {
  padding: 0.4rem 0;
  width: 100%;
}

.liquidate-container {
  padding-top: 2rem;
}
.liquidate-container .header .row {
  width: 100%;
}
.liquidate-container .address {
  overflow: hidden;
  text-overflow: ellipsis;
}
.liquidate-container .account {
  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;
  margin: 0;
  padding: 1.33rem;
  font-size: 0.9em;
  cursor: pointer;
}
.liquidate-container .account:hover {
  border-left: 2px solid #6563D6;
  color: #141E27;
}
.liquidate-container .account.active {
  background: #A34CAE;
  color: #ffffff;
}
.liquidate-container .account:last-child {
  border-radius: 0 0 4px 4px;
}
.liquidate-container .content {
  margin-top: 1.33rem;
  margin-bottom: 1.33rem;
}
.liquidate-container .warning {
  color: #DF5F67;
}
.liquidate-container input {
  border: 1px solid #657786;
  box-sizing: border-box;
}

.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: #6563D6;
  border-color: #6563D6;
}
.connecting-ring--for-borrowing {
  background: #A34CAE;
  border-color: #A34CAE;
}
.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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.transactions .asset {
  display: block;
  font-size: 0.95rem;
  padding: 1.25rem 1.75rem;
}
.transactions .asset .details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.transactions .asset .transaction-error {
  font-size: 0.85rem;
  padding-top: 1rem;
  padding-left: 2.45rem;
}
.transactions .status {
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  margin-right: 1rem;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.transactions .status.accent-bg {
  background: #6563D6;
  border-color: #6563D6;
}
.transactions .status.accent-bg.borrow {
  background: #A34CAE;
  border-color: #A34CAE;
}
.transactions .status.supply {
  background-image: url(../../images/icon_arrow_forward.png);
  border-color: #6563D6;
}
.transactions .status.withdraw {
  background-image: url(../../images/icon_arrow_back.png);
}
.transactions .status.borrow {
  background-image: url(../../images/icon_arrow_back.png);
  border-color: #A34CAE;
}
.transactions .status.repay {
  background-image: url(../../images/icon_arrow_forward.png);
}
.transactions .status.fail {
  background-image: url(../../images/icon_fail.png);
}
.transactions .status.enable {
  background-image: url(../../images/icon_lock_open.png);
}
.transactions .status.success {
  background-image: url(../../images/icon_success.png);
}
.transactions .timestamp {
  color: #ACBBC2;
}
.transactions.failure {
  border-bottom: none;
}
@media (max-width: 40em) {
  .transactions .asset .transaction-error {
    padding-top: 0.5rem;
    padding-left: 2.86rem;
  }
}

@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;
  -ms-hyphens: none;
  hyphens: none;
}

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

code {
  background-color: #FFFFFF;
}
code .token {
  color: #AAB8C1;
}
code .token.keyword {
  color: #A34CAE;
}
code .token.function {
  color: #6563D6;
}
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: #6563D6;
  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: #6563D6;
}
.label.borrow,
label.borrow {
  color: #A34CAE;
}
.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: #6563D6;
  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: #A34CAE;
}

.elmsh4 {
  color: #A34CAE;
}

.elmsh5 {
  color: #6563D6;
}

.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;
}

.mdc-switch {
  display: inline-block;
  position: relative;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786);
  border-color: #018786;
  /* @alternate */
  border-color: var(--mdc-theme-secondary, #018786);
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786);
  border-color: #018786;
  /* @alternate */
  border-color: var(--mdc-theme-secondary, #018786);
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
  background-color: #000;
  border-color: #000;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
  background-color: #fff;
  border-color: #fff;
}

.mdc-switch__native-control {
  /* @noflip */
  left: 0;
  /* @noflip */
  right: initial;
  position: absolute;
  top: 0;
  width: 72px;
  height: 48px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
[dir=rtl] .mdc-switch__native-control, .mdc-switch__native-control[dir=rtl] {
  /* @noflip */
  left: initial;
  /* @noflip */
  right: 0;
}

.mdc-switch__track {
  box-sizing: border-box;
  width: 32px;
  height: 8px;
  border: 1px solid;
  border-radius: 4px;
  opacity: 0.38;
  transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-switch__thumb-underlay {
  /* @noflip */
  left: -20px;
  /* @noflip */
  right: initial;
  display: flex;
  position: absolute;
  top: -20px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transform: translateX(0);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir=rtl] .mdc-switch__thumb-underlay, .mdc-switch__thumb-underlay[dir=rtl] {
  /* @noflip */
  left: initial;
  /* @noflip */
  right: -20px;
}

.mdc-switch__thumb {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 8px solid;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.mdc-switch--checked .mdc-switch__track {
  opacity: 0.54;
}
.mdc-switch--checked .mdc-switch__thumb-underlay {
  transform: translateX(24px);
}
[dir=rtl] .mdc-switch--checked .mdc-switch__thumb-underlay, .mdc-switch--checked .mdc-switch__thumb-underlay[dir=rtl] {
  transform: translateX(-24px);
}
.mdc-switch--checked .mdc-switch__native-control {
  transform: translateX(-24px);
}
[dir=rtl] .mdc-switch--checked .mdc-switch__native-control, .mdc-switch--checked .mdc-switch__native-control[dir=rtl] {
  transform: translateX(24px);
}

.mdc-switch--disabled {
  opacity: 0.38;
  pointer-events: none;
}
.mdc-switch--disabled .mdc-switch__thumb {
  border-width: 1px;
}
.mdc-switch--disabled .mdc-switch__native-control {
  cursor: default;
  pointer-events: none;
}

@-webkit-keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }
  to {
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}

@keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }
  to {
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}
@-webkit-keyframes mdc-ripple-fg-opacity-in {
  from {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
}
@keyframes mdc-ripple-fg-opacity-in {
  from {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
}
@-webkit-keyframes mdc-ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
@keyframes mdc-ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
.mdc-ripple-surface--test-edge-var-bug {
  --mdc-ripple-surface-test-edge-var: 1px solid #000;
  visibility: hidden;
}
.mdc-ripple-surface--test-edge-var-bug::before {
  border: var(--mdc-ripple-surface-test-edge-var);
}

.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::after {
  background-color: #9e9e9e;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover::before {
  opacity: 0.08;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0.24;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.24;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.24;
}

.mdc-switch__thumb-underlay {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
}
.mdc-switch__thumb-underlay::before {
  transition: opacity 15ms linear, background-color 15ms linear;
  z-index: 1;
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded::before {
  transform: scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
  top: 0;
  /* @noflip */
  left: 0;
  transform: scale(0);
  transform-origin: center center;
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded--unbounded::after {
  top: var(--mdc-ripple-top, 0);
  /* @noflip */
  left: var(--mdc-ripple-left, 0);
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-activation::after {
  -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
          animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-deactivation::after {
  -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
          animation: mdc-ripple-fg-opacity-out 150ms;
  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
  top: calc(50% - 50%);
  /* @noflip */
  left: calc(50% - 50%);
  width: 100%;
  height: 100%;
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded::before, .mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
  top: var(--mdc-ripple-top, calc(50% - 50%));
  /* @noflip */
  left: var(--mdc-ripple-left, calc(50% - 50%));
  width: var(--mdc-ripple-fg-size, 100%);
  height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
  width: var(--mdc-ripple-fg-size, 100%);
  height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
  background-color: #018786;
}
@supports not (-ms-ime-align: auto) {
  .mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
}
.mdc-switch__thumb-underlay:hover::before {
  opacity: 0.04;
}
.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before, .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch__thumb-underlay.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.3;
}

.mdc-switch {
  padding-right: 0.665rem;
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
  background-color: #6563D6;
  border-color: #6563D6;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
  background-color: #6563D6;
  border-color: #6563D6;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay::before, .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay::after {
  background-color: #6563D6;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:hover::before {
  opacity: 0.04;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before, .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.3;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
  background-color: #546E7A;
  border-color: #546E7A;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
  background-color: #546E7A;
  border-color: #546E7A;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::after {
  background-color: #546E7A;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover::before {
  opacity: 0.04;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.3;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.3;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
  background-color: #6563D6;
  border-color: #6563D6;
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
  background-color: #6563D6;
  border-color: #6563D6;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
  background-color: #546E7A;
  border-color: #546E7A;
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
  background-color: #546E7A;
  border-color: #546E7A;
}

.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);
  }
}
.claim-comp__modal {
  z-index: 99;
  align-items: flex-start;
}
.claim-comp__modal .legacy-panel {
  margin-top: 9.25rem;
  width: 28.125rem;
  border: none;
  z-index: 100;
}
.claim-comp__modal .legacy-panel .header {
  font-weight: 600;
  font-size: 0.9rem;
}
.claim-comp__modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 22.7125rem;
  padding: 2.875rem 4rem 2rem;
}
.claim-comp__modal__body__claim-comp {
  color: #070A0E;
  line-height: 1;
  font-weight: bold;
  margin-right: 0.625rem;
}
.claim-comp__modal__body .icon {
  width: 4.5rem;
  height: 4.5rem;
}
.claim-comp__modal__body__claim-comp-view {
  display: flex;
}
.claim-comp__modal__body__balance {
  margin: 1rem 0 0 0;
  color: #070A0E;
  font-weight: 600;
  font-size: 1.3125rem;
}
.claim-comp__modal__body__rows {
  margin-top: 1.375rem;
  width: 100%;
}
.claim-comp__modal__body__rows__row {
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}
.claim-comp__modal__body__rows__row__label {
  color: #AAB8C1;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
}
.claim-comp__modal__body__rows__row__value {
  color: #AAB8C1;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
  color: #141E27;
}
.claim-comp__modal__body__rows__row:not(:last-child) {
  border-bottom-color: #eceff1;
}
.claim-comp__modal__body__value {
  color: #AAB8C1;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  margin-top: 0.625rem;
}
.claim-comp__modal__body__title {
  margin-top: 1.375rem;
  color: #070A0E;
}
.claim-comp__modal__body__help {
  color: #AAB8C1;
  margin-top: 1.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
}
.claim-comp__modal__body__button {
  width: 100%;
  margin-top: 1rem;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
.claim-comp__modal__body .connecting-ring {
  margin-top: 2rem;
  width: 4.4375rem;
  height: 4.4375rem;
}
.claim-comp__modal__body__success {
  margin-top: 2rem;
  width: 4.4375rem;
  height: 4.4375rem;
  background-color: #6563D6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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);
  }
}
.proposal-action__modal {
  z-index: 99;
  align-items: flex-start;
  overflow-y: scroll;
}
.proposal-action__modal .legacy-panel {
  margin-top: 9.25rem;
  width: 38.125rem;
  border: none;
  z-index: 100;
}
.proposal-action__modal .legacy-panel .header {
  font-weight: 600;
  font-size: 0.9rem;
}
.proposal-action__modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 22.7125rem;
  padding: 2.875rem 4rem 2rem;
}
.proposal-action__modal__body .__heading {
  align-self: start;
  font-weight: 600;
}
.proposal-action__modal__body .__actions {
  width: 100%;
  overflow-wrap: break-word;
}
.proposal-action__modal__body .__rows {
  margin-top: 1.375rem;
  width: 100%;
}
.proposal-action__modal__body .__rows .__row {
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}
.proposal-action__modal__body .__rows .__row .__label {
  color: #AAB8C1;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
}
.proposal-action__modal__body .__rows .__row .__value {
  color: #AAB8C1;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
  color: #141E27;
  width: 90%;
}
.proposal-action__modal__body .__rows .__row:not(:last-child) {
  border-bottom-color: #eceff1;
}

.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: #6563D6;
  border-color: #6563D6;
}
.connecting-ring--for-borrowing {
  background: #A34CAE;
  border-color: #A34CAE;
}
.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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          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) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.collateral-toggle h4 {
  color: #141E27;
}
.collateral-toggle p {
  color: #AAB8C1;
}
.collateral-toggle p[class*=center-text] {
  text-align: center;
}
.collateral-toggle h4 {
  margin-top: -0.75em;
  margin-bottom: 10px;
}
.collateral-toggle .container-small {
  min-width: 34em;
  max-width: 34em;
}
@media (max-width: 40em) {
  .collateral-toggle .container-small {
    min-width: 30em;
  }
}
.collateral-toggle .legacy-panel .header {
  border-bottom: none;
}
@media (max-width: 40em) {
  .collateral-toggle .legacy-panel .header {
    margin-top: 1.33rem;
  }
}
.collateral-toggle .legacy-panel .enable-asset {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.collateral-toggle .legacy-panel .enable-asset .connecting-ring {
  margin: 40px 0;
}
.collateral-toggle .legacy-panel .enable-asset p {
  margin-bottom: 40px;
}
.collateral-toggle .legacy-panel .enable-asset .submit-button {
  width: 100%;
}
.collateral-toggle .legacy-panel .copy {
  margin-top: 0;
  padding-left: 1.33rem;
  padding-right: 1.33rem;
  padding-bottom: 1.33rem;
  margin-bottom: 0;
}
.collateral-toggle .legacy-panel .copy p {
  margin-bottom: 40px;
}
.collateral-toggle .legacy-panel .copy p a {
  border-bottom: 1px solid transparent;
  color: #6563D6;
  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;
}
.collateral-toggle .legacy-panel .copy p a:hover {
  border-bottom: 1px solid #6563D6;
}
.collateral-toggle .legacy-panel .copy .form {
  width: 100%;
  padding: 0;
}
.collateral-toggle .legacy-panel .copy .form .row {
  margin-left: 0;
  margin-right: 0;
}
.collateral-toggle .legacy-panel .copy .form .calculation:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.collateral-toggle .legacy-panel .copy .form span.description {
  color: #AAB8C1;
}
.collateral-toggle .legacy-panel .copy .arrow {
  width: 14px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../images/icn-build-arrows-green.svg);
  margin-right: 8px;
  margin-left: 8px;
}
.collateral-toggle .legacy-panel .copy .arrow.borrow {
  background-image: url(../../images/icn-build-arrows-purple.svg);
}
.collateral-toggle .legacy-panel .copy .market-bar {
  width: 100%;
  margin-top: -10px;
  margin-bottom: 60px;
}
.collateral-toggle .legacy-panel .copy .market-bar .bar {
  width: 100%;
  background: rgba(40, 49, 55, 0.1);
  border-radius: 100px;
}
.collateral-toggle .legacy-panel .copy .market-bar .fill {
  border-radius: 100px;
}
.collateral-toggle .legacy-panel .copy button {
  width: 100%;
}

.gov-profile-image {
  display: inline-block;
  position: relative;
  height: 2.75rem;
  width: 2.75rem;
}
.gov-profile-image--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
}
.gov-profile-image--small {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
}
.gov-profile-image--large {
  height: 3.03125rem;
  width: 3.03125rem;
}
.gov-profile-image__raw-image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  border: 0;
  border-image-width: 0;
  border-radius: 50%;
  background-color: #F9FAFB;
  background-blend-mode: multiply;
}
.gov-profile-image__proposer-icon {
  position: absolute;
  height: 1rem;
  width: 1rem;
  background-size: 100% 100%;
  border: 0;
  border-image-width: 0;
  background-image: url("../../images/icon-propose-dark.svg");
  right: 0;
  bottom: 0;
  margin-right: -0.1rem;
  margin-bottom: -0.1rem;
}
.gov-profile-image__proposer-icon--small {
  height: 0.65rem;
  width: 0.65rem;
}
.gov-profile-image__proposer-icon--light {
  background-image: url("../../images/icon-propose-light.svg");
}

.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: #6563D6;
}
.panel__footer--disabled {
  color: #CCD6DD;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: #6563D6;
}
.panel__pager__previous:hover label {
  color: #6563D6;
}
.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: #6563D6;
}
.panel__pager__next:hover label {
  color: #6563D6;
}

.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;
}

.progress {
  display: flex;
  flex-direction: row;
  flex: 1 1;
  height: 5px;
  max-width: 100%;
  overflow: hidden;
  background-color: rgba(40, 49, 55, 0.1);
  border-radius: 100px;
  margin-top: 1rem;
}
.progress.dark-clear {
  background: rgba(54, 61, 68, 0.5);
}
.progress.thin {
  height: 3px;
}

.progress-bar {
  display: flex;
  background-color: #627eea;
}
.progress-bar:last-of-type {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
.progress-bar.BAT {
  background-color: #ff5000;
}
.progress-bar.DAI {
  background-color: #fab323;
}
.progress-bar.ETH, .progress-bar.WETH {
  background-color: #627eea;
}
.progress-bar.REP {
  background-color: #553580;
}
.progress-bar.SAI {
  background-color: #fab323;
}
.progress-bar.USDC {
  background-color: #2775c9;
}
.progress-bar.USDT {
  background-color: #26a17b;
}
.progress-bar.WBTC, .progress-bar.WBTC2 {
  background-color: #f6941a;
}
.progress-bar.ZRX {
  background-color: #000000;
}
.progress-bar.red {
  background-color: #e74694;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #6563D6;
}

.proposal {
  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;
  justify-content: space-between;
}
.proposal:hover {
  border-left: 2px solid #6563D6;
  color: #141E27;
}
.proposal:hover.proposal--loading, .proposal:hover.proposal--empty-vote, .proposal:hover.proposal--empty {
  border-left: 2px solid transparent;
}
.proposal--empty {
  justify-content: center;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.proposal--empty-vote {
  height: 5.625rem;
}
.proposal__content {
  display: flex;
  align-items: center;
  width: 63%;
}
.proposal__content--header {
  width: 100%;
}
.proposal__content--empty {
  font-size: 0.875rem;
  color: #CCD6DD;
}
@media (min-width: 60em) {
  .proposal__content {
    width: 28.75rem;
  }
  .proposal__content--header {
    width: 38.75rem;
  }
}
.proposal__content__pulsating-dot {
  margin-left: 4px;
  margin-right: 1.33rem;
}
.proposal__content__description {
  display: flex;
  flex-direction: column;
}
.proposal__content__description__title {
  font-family: Haas Grot Text R;
  font-style: normal;
  font-weight: normal;
  font-size: 1.125rem;
  line-height: 1.35;
  color: #070A0E;
}
.proposal__content__description__title--header {
  font-family: "Haas Grot Disp R";
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
}
.proposal__content__description__title--header--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 1.75rem;
  width: 20.1rem;
}
.proposal__content__description__title--loading {
  height: 1.125rem;
  width: 17.5rem;
}
.proposal__content__description__details {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-top: 0.5625rem;
}
.proposal__content__description__details--large {
  font-size: 0.875rem;
}
.proposal__content__description__details__tag {
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem 0;
  color: #657786;
  width: 4.25rem;
  text-align: center;
}
.proposal__content__description__details__tag--active {
  border-color: #A34CAE;
  color: #A34CAE;
}
.proposal__content__description__details__tag--passed {
  border-color: #6563D6;
  color: #6563D6;
}
.proposal__content__description__details__tag--not-passed {
  border-color: #657786;
  color: #657786;
}
.proposal__content__description__details__tag--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.375rem;
}
.proposal__content__description__details__tag--loading--large {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 1.5rem;
}
.proposal__content__description__details__text {
  font-style: normal;
  font-weight: 600;
  color: #AAB8C1;
  margin-left: 0.625rem;
  display: flex;
}
.proposal__content__description__details__text span:not(:first-child) {
  margin-left: 0.3125rem;
}
.proposal__content__description__details__text--active {
  color: #A34CAE;
}
.proposal__content__description__details__text__proposal-id--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 1.125rem;
}
.proposal__content__description__details__text__proposal-id--loading--large {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 0.875rem;
}
.proposal__content__description__details__text__separator--loading {
  color: #f0f0f0;
}
.proposal__content__description__details__text__separator--loading--large {
  color: rgba(255, 255, 255, 0.1);
}
.proposal__content__description__details__text__time--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 0.3125rem;
  height: 0.75rem;
  width: 8.5rem;
}
.proposal__content__description__details__text__time--loading--large {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 0.875rem;
}
.proposal__active-votes {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 1.5rem;
}
@media (min-width: 60em) {
  .proposal__active-votes {
    margin-top: 0;
    width: 18.125rem;
    height: 2.8125rem;
  }
}
.proposal__active-votes__row {
  display: flex;
  align-items: center;
}
.proposal__active-votes__row__value {
  min-width: 2.75rem;
  font-size: 0.75rem;
  color: #070A0E;
  margin-left: 0.725rem;
}
.proposal__active-votes__row__vote-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #f1f3f5;
  border-radius: 4px;
}
.proposal__active-votes__row__vote-bar__fill {
  height: 4px;
  border-radius: 4px;
}
.proposal__active-votes__row__vote-bar__fill--for {
  background-color: #6563D6;
}
.proposal__active-votes__row__vote-bar__fill--against {
  background-color: #DF5F67;
}
.proposal__current-state-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 2.4375rem;
  margin-top: 0.4rem;
}
@media (min-width: 60em) {
  .proposal__current-state-view {
    flex-direction: row;
    margin: 0;
    width: 9.125rem;
  }
}
@media (min-width: 82em) {
  .proposal__current-state-view {
    width: 18.125rem;
  }
}
.proposal__current-state-view__state {
  display: flex;
  position: relative;
  align-items: center;
  align-content: center;
  flex-direction: column;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state {
    flex-direction: row;
    align-content: flex-start;
    min-width: 5.875rem;
  }
}
.proposal__current-state-view__state--active::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #6563D6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state--active::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__current-state-view__state--active::after {
  content: " ";
  display: block;
  width: 4.8px;
  height: 9.6px;
  border: solid white;
  border-width: 0 1.6px 1.6px 0;
  position: absolute;
  margin-top: -3.2px;
  transform: rotate(45deg);
  top: 2px;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state--active::after {
    left: -2px;
    top: 3px;
  }
}
.proposal__current-state-view__state--failed::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state--failed::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__current-state-view__state--failed::after {
  content: " ";
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -5px;
  background-image: url(../../images/icn-x.svg);
  z-index: 1;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 60em) {
  .proposal__current-state-view__state--failed::after {
    left: 0%;
    top: 1px;
  }
}
.proposal__current-state-view__state--loading::before {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #f6f6f6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state--loading::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__current-state-view__state__text {
  font-size: 0.875rem;
  line-height: 1;
  padding-top: 2rem;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state__text {
    padding-top: 0;
    padding-left: 2rem;
  }
}
.proposal__current-state-view__state__text--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  margin-top: 2rem;
  width: 3.5rem;
}
@media (min-width: 60em) {
  .proposal__current-state-view__state__text--loading {
    margin-top: 0;
    margin-left: 2rem;
  }
}
.proposal__receipt-votes {
  width: 12.75rem;
  margin-right: 2rem;
}
.proposal__receipt-votes__row__vote-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #f1f3f5;
  border-radius: 4px;
}
.proposal__receipt-votes__row__vote-bar__fill {
  height: 4px;
  border-radius: 4px;
}
.proposal__receipt-votes__row__vote-bar__fill--for {
  background-color: #6563D6;
}
.proposal__receipt-votes__row__vote-bar__fill--against {
  background-color: #DF5F67;
}
.proposal__receipt-votes__row:not(:first-child) {
  margin-top: 1rem;
}
.proposal__receipt-support {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  margin-top: 0.4rem;
  width: 4.4rem;
}
@media (min-width: 60em) {
  .proposal__receipt-support {
    flex-direction: row;
    margin-top: 0;
    margin-left: 1rem;
    height: 2.4rem;
    min-width: 6rem;
  }
}
.proposal__receipt-support--for::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #6563D6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__receipt-support--for::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__receipt-support--for::after {
  content: " ";
  display: block;
  width: 4.8px;
  height: 9.6px;
  border: solid white;
  border-width: 0 1.6px 1.6px 0;
  position: absolute;
  margin-top: -3.2px;
  transform: rotate(45deg);
  top: 2px;
}
@media (min-width: 60em) {
  .proposal__receipt-support--for::after {
    left: -2px;
    top: 3px;
  }
}
.proposal__receipt-support--against::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #DF5F67;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__receipt-support--against::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__receipt-support--against::after {
  content: " ";
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -5px;
  background-image: url(../../images/icn-x.svg);
  z-index: 1;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 60em) {
  .proposal__receipt-support--against::after {
    left: 0%;
    top: 1px;
  }
}
.proposal__receipt-support--no-vote::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__receipt-support--no-vote::before {
    transform: translate(0%, -50%);
    left: -12px;
    top: 6px;
  }
}
.proposal__receipt-support--no-vote::after {
  content: " ";
  display: block;
  width: 8.47px;
  height: 1.6px;
  background-color: #ffffff;
  position: absolute;
  margin-top: -3.2px;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 60em) {
  .proposal__receipt-support--no-vote::after {
    left: 0%;
    top: 8px;
  }
}
.proposal__receipt-support--pending-vote::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(-50%, -30%);
  left: 50%;
}
@media (min-width: 60em) {
  .proposal__receipt-support--pending-vote::before {
    transform: translate(0%, -50%);
    left: 0px;
    top: 18px;
  }
}
.proposal__receipt-support--pending-vote::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  left: 18px;
  top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
@media (min-width: 60em) {
  .proposal__receipt-support--pending-vote::after {
    left: 3px;
    top: 9px;
  }
}
.proposal__receipt-support--view-only {
  width: 4.3rem;
}
.proposal__receipt-support--view-only .proposal__receipt-support__text {
  padding-top: 0;
}
@media (min-width: 60em) {
  .proposal__receipt-support--view-only {
    width: 4rem;
  }
  .proposal__receipt-support--view-only .proposal__receipt-support__text {
    padding-left: 0;
    margin-left: -0.75rem;
  }
}
.proposal__receipt-support__text {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #AAB8C1;
  padding-top: 2rem;
}
@media (min-width: 60em) {
  .proposal__receipt-support__text {
    padding-top: 0;
    padding-left: 2.5rem;
  }
}
.proposal__receipt-support__text--empty {
  font-size: 0.875rem;
  color: #CCD6DD;
}
.proposal__queue-actions-button {
  width: 7rem;
  height: 2.4rem;
  line-height: 2.4rem;
  padding: 0;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.15s linear, border-color 0.15s linear, background-color 0.15s linear;
}
.proposal__queue-actions-button:hover {
  background-color: #6563D6;
  color: #FFFFFF;
  border-color: #6563D6;
}
.proposal__queue-execute-button {
  width: 7rem;
  height: 2.4rem;
  line-height: 2.4rem;
  padding: 0;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
}

#Admin {
  padding-top: 45px;
  padding-bottom: 200px;
  background: #F9FAFB;
  color: #070A0E;
}
#Admin section {
  padding: 4rem 0 0 0;
}
#Admin h3 {
  margin-bottom: 1rem;
}
#Admin label {
  color: #070A0E;
}
#Admin .has-error {
  border: 1px solid #e74694;
}
#Admin .data-arg {
  word-break: break-all;
}
#Admin .action-modal__background {
  z-index: 10;
  max-height: 650px;
  width: 30rem;
  overflow-x: hidden;
  overflow-y: scroll;
}
#Admin .action-modal__input-group {
  display: flex;
  flex-direction: column;
}
#Admin .action-modal__input-group:not(:first-child) {
  margin-top: 1.725rem;
}
#Admin .action-modal__input-group__dropdown {
  width: 100%;
}
#Admin .action-modal__input-group__dropdown__option {
  color: #070A0E;
}
#Admin .action-modal__input-group__dropdown__option p {
  color: #070A0E;
}
#Admin .action-modal__input-group__input {
  margin-top: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  border-radius: 4px;
  font-weight: 400;
  min-height: 3.5rem;
}
#Admin .action-modal__input-group__input::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__input:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__input::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__text-area {
  margin-top: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  border-radius: 4px;
  font-weight: 400;
  min-height: 3.5rem;
  padding: 1rem;
  width: 100%;
  height: 14rem;
  font-size: 1rem;
  font-family: "Haas Grot Text R";
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
  resize: none;
}
#Admin .action-modal__input-group__text-area::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__text-area:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__text-area::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .action-modal__input-group__text-area:focus {
  outline: none;
}
#Admin .action-modal__body {
  max-width: 30rem;
  min-height: 425px;
  overflow-y: auto;
}
#Admin .action-modal__step1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 425px;
  padding: 2.5rem;
  width: 100%;
}
#Admin .action-modal__step2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 425px;
  padding: 2.5rem;
  width: 100%;
}
#Admin .action-modal__action-button {
  margin-top: 1.725rem;
}
#Admin .submit-proposal {
  display: flex;
  justify-content: center;
}
@media (min-width: 40em) {
  #Admin .description-section {
    padding-right: 2.3rem;
  }
}
#Admin .description-section__input {
  margin-top: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  border-radius: 4px;
  font-weight: 400;
  min-height: 3.5rem;
}
#Admin .description-section__input::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__input:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__input::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__text-area {
  margin-top: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  border-radius: 4px;
  font-weight: 400;
  min-height: 3.5rem;
  padding: 1rem;
  width: 100%;
  height: 14rem;
  font-size: 1rem;
  font-family: "Haas Grot Text R";
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
  resize: none;
}
#Admin .description-section__text-area::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__text-area:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__text-area::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Admin .description-section__text-area:focus {
  outline: none;
}
#Admin .description-section__subsection {
  margin-top: 1.725rem;
}
@media (min-width: 40em) {
  #Admin .actions-section {
    padding-left: 2.3rem;
  }
}
#Admin .actions-section__list {
  margin-top: 3.2rem;
}
#Admin .actions-section__action {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  min-height: 3.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
  margin-bottom: 0.75rem;
  word-break: break-all;
}
#Admin .actions-section__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
  min-height: 3.5rem;
  text-align: left;
  text-transform: none;
  width: 100%;
  letter-spacing: 0;
}

.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);
  }
}
#Vote .hero {
  margin-bottom: -3.72rem;
  padding-bottom: 4.315rem;
}
#Vote .hero .headline {
  font-size: 1.6rem;
}
#Vote .balance-suffix {
  color: #CCD6DD;
}
#Vote .balance-suffix--dark {
  color: #657786;
}
#Vote .vote__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 8.75rem;
}
#Vote .vote__header__label--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 0.75rem;
  width: 2.1rem;
}
#Vote .vote__header__value--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          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%);
  height: 1.6rem;
  width: 6.5625rem;
}
#Vote .vote__header__value--no-governance {
  height: 1.6rem;
  width: 6.5625rem;
}
#Vote .vote__details {
  min-height: 40.625rem;
}
#Vote .vote__modal {
  z-index: 99;
  align-items: flex-start;
  overflow: scroll;
}
#Vote .vote__modal .legacy-panel {
  margin-top: 9.25rem;
  width: 28.125rem;
  border: none;
  z-index: 100;
}
#Vote .vote__modal .legacy-panel .header {
  font-weight: 600;
  font-size: 0.9rem;
}
#Vote .vote__modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 22.7125rem;
  padding: 2.875rem 1rem 1rem 1rem;
}
#Vote .vote__modal__body--selecting-vote-type {
  padding: 2.875rem 3.25rem 2rem 3.25rem;
}
#Vote .vote__modal__body--selecting-vote-type__title {
  color: #070A0E;
  line-height: 1;
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
#Vote .vote__modal__body--selecting-vote-type__label-header {
  align-self: flex-start;
  font-size: 0.875rem;
  margin-top: 1.75rem;
}
#Vote .vote__modal__body--selecting-vote-type .tally-card-view {
  cursor: pointer;
  margin-bottom: 0.625rem;
  width: 100%;
}
#Vote .vote__modal__body--selecting-vote-type .tally-card-view:hover {
  box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
}
#Vote .vote__modal__body__text-area {
  margin-top: 0.625rem;
  margin-top: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  border-radius: 4px;
  font-weight: 400;
  min-height: 3.5rem;
  padding: 1rem;
  width: 100%;
  height: 7.65rem;
  font-size: 0.875rem;
  font-family: "Haas Grot Text R";
  font-style: normal;
  line-height: 163%;
  letter-spacing: 0;
  resize: none;
}
#Vote .vote__modal__body__text-area::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__text-area:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__text-area::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__text-area:focus {
  outline: none;
}
#Vote .vote__modal__body--delegate-modal {
  padding: 0;
  align-items: flex-start;
  min-height: unset;
}
#Vote .vote__modal__body__paragraph-text {
  color: #AAB8C1;
  font-size: 0.8rem;
  line-height: 1.25rem;
}
#Vote .vote__modal__body__delegate-option {
  display: flex;
  padding: 2.5625rem;
  width: 100%;
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.3 ease-in-out;
}
#Vote .vote__modal__body__delegate-option::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  transform: rotate(-135deg);
  position: absolute;
  top: 2.85rem;
  right: 2.3625rem;
  border-color: #CCD6DD;
  transform: rotate(45deg);
  transition: all 0.2s ease-in-out;
}
#Vote .vote__modal__body__delegate-option.vote__modal__body__delegate-option--disabled {
  cursor: auto;
}
#Vote .vote__modal__body__delegate-option.vote__modal__body__delegate-option--disabled::after {
  display: none;
}
#Vote .vote__modal__body__delegate-option.vote__modal__body__delegate-option--disabled:hover {
  border-color: transparent;
}
#Vote .vote__modal__body__delegate-option.vote__modal__body__delegate-option--disabled:hover::after {
  display: none;
}
#Vote .vote__modal__body__delegate-option:hover {
  border-color: #6563D6;
}
#Vote .vote__modal__body__delegate-option:hover::after {
  transform: rotate(45deg) translate(5px, -5px);
  border-color: #6563D6;
}
#Vote .vote__modal__body__delegate-option__icon {
  flex-shrink: 0;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 50%;
}
#Vote .vote__modal__body__delegate-option__text-view {
  display: flex;
  flex-direction: column;
  margin-left: 1.1rem;
  max-width: 15.6875rem;
}
#Vote .vote__modal__body__delegate-option__text-view__title {
  line-height: 1;
}
#Vote .vote__modal__body__delegate-option__text-view__title--active::after {
  content: "Active";
  color: #6563D6;
  font-size: 0.625rem;
  line-height: 0.75rem;
  margin-left: 0.75rem;
}
#Vote .vote__modal__body__delegate-option__text-view__description {
  margin-top: 0.8rem;
}
#Vote .vote__modal__body__delegate-option:not(:first-child) {
  border-top: 1px solid #f1f3f5;
}
#Vote .vote__modal__body__delegate-voting {
  width: 100%;
  padding: 2.5625rem 3.125rem;
}
#Vote .vote__modal__body__delegate-voting__description {
  margin-top: 0.9rem;
}
#Vote .vote__modal__body__delegate-voting__input-view {
  height: 7.3125rem;
  margin-top: 1.3rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__label-view {
  display: flex;
  justify-content: space-between;
}
#Vote .vote__modal__body__delegate-voting__input-view__label {
  line-height: 1;
  font-size: 0.875;
  font-weight: 500;
}
#Vote .vote__modal__body__delegate-voting__input-view__link {
  align-self: end;
  text-transform: none;
  margin-bottom: 0;
  letter-spacing: 0;
  font-weight: normal;
  color: #6563D6;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#Vote .vote__modal__body__delegate-voting__input-view__link:hover {
  border-bottom: 1px solid #6563D6;
}
#Vote .vote__modal__body__delegate-voting__input-view__input {
  margin-top: 1rem;
  background-color: #FFFFFF;
  border: 1px solid #f1f3f5;
  border-radius: 4px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  height: 3.5rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__input::-moz-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__input:-ms-input-placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__input::placeholder {
  color: #AAB8C1;
  font-size: 0.875rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-options {
  width: 100%;
  background: #ffffff;
  border: 1px solid #f1f3f5;
  box-shadow: 0px 12px 32px rgba(17, 51, 85, 0.06);
  border-radius: 4px;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option {
  display: flex;
  align-content: center;
  align-items: center;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #f1f3f5;
  padding: 0 1.125rem;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option .gov-profile-image {
  align-self: center;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option__details {
  display: flex;
  height: 2.125rem;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 1.5625rem;
  flex-grow: 1;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option__details__display-name {
  flex-shrink: 1;
  flex-grow: 0;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: #070A0E;
  margin: 0;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option__details__vote-weight {
  flex-shrink: 1;
  flex-grow: 0;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #AAB8C1;
  margin: 0;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.125rem;
  color: #070A0E;
}
#Vote .vote__modal__body__delegate-voting__input-view__delegate-option-footer:hover {
  color: #6563D6;
}
#Vote .vote__modal__body__delegate-voting__input-view__help-text {
  margin-top: 0.3rem;
  display: flex;
  font-size: 0.75rem;
  color: #AAB8C1;
  padding-left: 1rem;
  position: relative;
}
#Vote .vote__modal__body__delegate-voting__input-view__help-text--valid::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #6563D6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  height: 8px;
  width: 8px;
  left: 0;
  top: 50%;
  transform: translateY(-57%);
}
#Vote .vote__modal__body__delegate-voting__input-view__help-text--invalid::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #DF5F67;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  height: 8px;
  width: 8px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#Vote .vote__modal__body__delegate-voting__button {
  width: 100%;
  margin-top: 1.75rem;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
#Vote .vote__modal__body__votes {
  color: #070A0E;
  line-height: 1;
  font-weight: bold;
  margin-right: 0.625rem;
}
#Vote .vote__modal__body__tooltip {
  position: relative;
}
#Vote .vote__modal__body__tooltip:hover .vote__modal__body__tooltip__text {
  visibility: visible;
}
#Vote .vote__modal__body__tooltip__text {
  visibility: hidden;
  width: 214px;
  background-color: #141E27;
  color: #F9FAFB;
  text-align: left;
  border-radius: 4px;
  padding: 1rem;
  position: absolute;
  z-index: 1;
  top: 150%;
  margin-left: 1px;
  transform: translateX(-50%);
}
#Vote .vote__modal__body__tooltip__text__question {
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1rem;
}
#Vote .vote__modal__body__tooltip__text__answer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
#Vote .vote__modal__body__tooltip__text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #141E27 transparent;
}
#Vote .vote__modal__body__votes-view {
  display: flex;
}
#Vote .vote__modal__body__votes-view__button {
  width: 100%;
  margin-top: 1.75rem;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
#Vote .vote__modal__body__title {
  margin-top: 1.375rem;
  color: #070A0E;
}
#Vote .vote__modal__body__help {
  color: #AAB8C1;
  margin-top: 1.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
}
#Vote .vote__modal__body__button {
  width: 100%;
  margin-top: 3rem;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
#Vote .vote__modal__body .connecting-ring {
  margin-top: 2rem;
  width: 4.4375rem;
  height: 4.4375rem;
}
#Vote .vote__modal__body__success {
  margin-top: 2rem;
  width: 4.4375rem;
  height: 4.4375rem;
  background-color: #6563D6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#Vote .wallet-panel__data__row {
  display: flex;
  flex-direction: column;
  padding: 1.5625rem 1.75rem;
}
#Vote .wallet-panel__data__row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#Vote .wallet-panel__data__row__setup-icon {
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../../images/setup_voting.svg");
}
#Vote .wallet-panel__data__row__setup-title {
  font-family: Haas Grot Text R;
  font-style: normal;
  font-weight: normal;
  font-size: 1.125rem;
  line-height: 1.35;
  color: #070A0E;
}
#Vote .wallet-panel__data__row__setup-description {
  font-size: 0.9rem;
  font-weight: 500;
  color: #AAB8C1;
  line-height: 1.25rem;
  margin-top: 0.85rem;
}
#Vote .wallet-panel__data__row__setup-description a {
  border-bottom: 1px solid transparent;
  color: #6563D6;
  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;
}
#Vote .wallet-panel__data__row__setup-description a:hover {
  border-bottom: 1px solid #6563D6;
}
#Vote .wallet-panel__data__row__setup-description a {
  font-size: 0.9rem;
  margin-left: 0.1rem;
}
#Vote .wallet-panel__data__row__with-icon {
  display: flex;
  align-content: center;
  margin-top: 0.85rem;
}
#Vote .wallet-panel__data__row__with-icon .wallet-panel__data__row__value {
  line-height: 1;
  margin-top: 0;
}
#Vote .wallet-panel__data__row__with-icon .gov-profile-image {
  align-self: center;
  margin-top: -0.5rem;
  margin-right: 0.5rem;
}
#Vote .wallet-panel__data__row__action {
  margin-left: auto;
}
#Vote .wallet-panel__data__row__action a {
  border-bottom: 1px solid transparent;
  color: #6563D6;
  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;
}
#Vote .wallet-panel__data__row__action a:hover {
  border-bottom: 1px solid #6563D6;
}
#Vote .wallet-panel__data__row__action a {
  font-weight: 600;
}
#Vote .wallet-panel__data__row__comp {
  margin-left: 0.625rem;
  height: 1.25rem;
  width: 1.25rem;
}
#Vote .wallet-panel__data__row__label--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 5.5rem;
}
#Vote .wallet-panel__data__row__value {
  margin-top: 0.85rem;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25rem;
  position: relative;
}
#Vote .wallet-panel__data__row__value--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.25rem;
  width: 4.5rem;
}
#Vote .wallet-panel__data__row__value--option-link {
  margin-left: 0.5rem;
}
#Vote .wallet-panel__data__row__value--pending {
  padding-left: 2.25rem;
  text-transform: uppercase;
  font-size: 0.725rem;
  letter-spacing: 0.1rem;
}
#Vote .wallet-panel__data__row__value--pending::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  transform: translate(0%, -50%);
  left: 0px;
  top: 10px;
}
#Vote .wallet-panel__data__row__value--pending::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 1px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
#Vote .wallet-panel__data__row__value--pending--green::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #6563D6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
}
#Vote .wallet-panel__data__row__vote-weight {
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
  width: 100%;
  height: 4px;
  background-color: #f1f3f5;
  border-radius: 4px;
}
#Vote .wallet-panel__data__row__vote-weight__separator {
  color: #AAB8C1;
}
#Vote .wallet-panel__data__row__vote-weight__tooltip {
  color: #AAB8C1;
}
#Vote .wallet-panel__data__row__vote-weight__fill {
  height: 4px;
  border-radius: 4px;
  background-color: #6563D6;
}
#Vote .wallet-panel__data__row__vote-weight--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}
#Vote .wallet-panel__data__row__button {
  margin-top: 1.875rem;
  letter-spacing: 0;
  line-height: 1;
  color: #6563D6;
  background: none;
  border-color: #6563D6;
  text-transform: none;
  transition: color 0.15s linear, border-color 0.15s linear, background-color 0.15s linear;
}
#Vote .wallet-panel__data__row__button--pending {
  cursor: auto;
  color: #657786;
  border-color: #657786;
}
#Vote .wallet-panel__data__row__button--undelegated {
  color: #FFFFFF;
  background: #6563D6;
  border-color: #6563D6;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
#Vote .wallet-panel__data__row__button--loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
          animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 3.4rem;
  border-color: #f6f6f6;
}
#Vote .wallet-panel__data__row__button:hover {
  background-color: #6563D6;
  color: #FFFFFF;
}
#Vote .wallet-panel__data__row__button__text {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
}
#Vote .wallet-panel__data__row:nth-of-type(2) .wallet-panel__data__row__label--loading {
  width: 2.0655rem;
}
#Vote .wallet-panel__data__row:nth-of-type(2) .wallet-panel__data__row__value--loading {
  width: 6.6875rem;
}
#Vote .wallet-panel__data__row:nth-of-type(3) .wallet-panel__data__row__label--loading {
  width: 4.9375rem;
}
#Vote .wallet-panel__data__row:nth-of-type(3) .wallet-panel__data__row__value--loading {
  width: 7.3125rem;
}
#Vote .proposals-panel .proposal__content__pulsating-dot {
  display: none;
}
#Vote .proposals-panel__labels__action {
  padding-right: 0.75rem;
}
@media (min-width: 60em) {
  #Vote .proposals-panel__labels__action {
    padding-right: 7.75rem;
  }
}
#Vote .proposals-panel .proposal__current-state-view {
  margin-right: 1rem;
}
@media (min-width: 60em) {
  #Vote .proposals-panel .proposal__current-state-view {
    margin-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 82em) {
  #Vote .proposals-panel .proposal__current-state-view {
    padding-left: 5rem;
  }
}
#Vote .proposals-panel .vote-proposal {
  display: flex;
  flex-direction: column;
}
#Vote .proposals-panel .vote-proposal__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
#Vote .proposals-panel .vote-proposal__top__buttons {
  display: flex;
  flex-direction: flex-end;
}
#Vote .proposals-panel .vote-proposal__bottom {
  margin-top: 1rem;
  width: 100%;
  --card-padding: 0.3125rem;
}
#Vote .proposals-panel .vote-proposal__bottom .row {
  margin-left: calc(-1 * var(--card-padding));
  margin-right: calc(-1 * var(--card-padding));
}
#Vote .proposals-panel .vote-proposal__bottom .row [class^=col] {
  padding: 0 var(--card-padding);
}
#Vote .tally-card {
  background: #FFFFFF;
  border: 1px solid rgba(20, 30, 39, 0.05);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 1.125rem;
  width: 100%;
  --card-color: #AAB8C1;
}
#Vote .tally-card--vote-receipt {
  border: 2px solid var(--card-color);
}
#Vote .tally-card--for {
  --card-color: #6563D6;
}
#Vote .tally-card--against {
  --card-color: #DF5F67;
}
#Vote .tally-card__details {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
#Vote .tally-card__details__label, #Vote .tally-card__details__value {
  color: #657786;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1;
}
#Vote .tally-card__details__label {
  color: #141E27;
}
#Vote .tally-card__meter {
  width: 100%;
  height: 4px;
  background-color: rgba(20, 30, 39, 0.05);
  border-radius: 8px;
  margin-top: 0.5625rem;
}
#Vote .tally-card__meter__fill {
  border-radius: 8px;
  height: 4px;
  max-width: 100%;
  background-color: var(--card-color);
}
#Vote .create-proposal-panel {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 1.55rem;
}
#Vote .create-proposal-panel__button {
  margin-top: 1rem;
  width: 100%;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}

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

#main {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
#main > div:not(.alert) {
  flex-grow: 1;
}
#main > div:not(.alert) > :last-child:not(.docs__main-section, .legacy-panel, .call-to-action-section) {
  padding-bottom: 10rem;
}

.mobile-only {
  display: none;
}

.banner {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  padding: 1.618rem 1.995rem;
  font-size: 0.9rem;
  color: #CFD8DC;
  background: #141E27;
  border-radius: 3px;
}
.banner .description {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
}
.banner .button {
  padding: 0.8rem 1rem;
  font-weight: 700;
  margin-left: 0.532rem;
}
.banner .button.large {
  flex-basis: 41%;
}

#borrow-interface-root .hero {
  margin-bottom: -3.8125rem;
}
#borrow-interface-root .panel-label {
  padding-left: 1rem;
  padding-bottom: 1rem;
}
#borrow-interface-root .panel-label .dropdown-icon {
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../../compound-components/assets/icn-drop-down-light.svg);
  margin-left: 6px;
  transition: all 0.2s ease-in-out;
  transform: rotate(180deg);
}
#borrow-interface-root .panel-label .dropdown-icon.active {
  transform: rotate(0deg);
}
#borrow-interface-root .panel.hideable {
  -webkit-animation: bounceFade 0.3s ease;
          animation: bounceFade 0.3s ease;
  transition: opacity 0.2s linear;
}
@-webkit-keyframes bounceFade {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounceFade {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#borrow-interface-root .market-bar.red {
  color: #e74694;
}
#borrow-interface-root .market-bar.red .fill {
  background: #e74694;
}
#borrow-interface-root .market-bar.yellow {
  color: #FFD24A;
}
#borrow-interface-root .market-bar.yellow .fill {
  background: #FFD24A;
}
#borrow-interface-root .market-bar.green {
  color: #6563D6;
}
#borrow-interface-root .market-bar.green .fill {
  background: #6563D6;
}
#borrow-interface-root .modal .container {
  max-height: 95%;
  margin-top: 1.33rem;
  margin-bottom: 1.33rem;
  overflow-y: auto;
}
#borrow-interface-root .popover {
  display: inline-block;
  position: absolute;
  width: 240px;
  background-color: #657786;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
  padding: 10px;
  transition: opacity 0.2s, visibility 0.2s;
  --triangle-height: 8px;
}
#borrow-interface-root .popover::before {
  left: calc(50% - var(--triangle-height) / 2);
  top: calc(var(--triangle-height) * -0.5);
  transform: rotate(135deg);
  content: "";
  position: absolute;
  background-color: inherit;
  border: inherit;
  width: var(--triangle-height);
  height: var(--triangle-height);
  -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
}
#borrow-interface-root .popover p {
  color: #F9FAFB;
  font-size: 12px;
}
#borrow-interface-root .popover .dot-indicator {
  margin-left: 5px;
  margin-top: 7px;
  margin-right: 5px;
}

#borrow-overview .mobile-only {
  display: none;
}
@media (max-width: 40em) {
  #borrow-overview .mobile-only {
    display: flex;
  }
}
#borrow-overview .mobile-only .balance {
  margin-left: 1.33rem;
}
#borrow-overview .mobile-only .balance .headline:first-of-type {
  margin-bottom: 1.33rem;
}
#borrow-overview .balance-totals {
  position: relative;
  max-width: 60em;
  margin: 0 auto;
}
@media (max-width: 40em) {
  #borrow-overview .balance-totals {
    margin: 0 1.33rem;
  }
}
#borrow-overview .headline {
  font-size: 1.6rem;
}
#borrow-overview .headline--loading {
  height: 2.1rem;
  width: 11.25rem;
  transform: translateX(58%);
}
@media (max-width: 40em) {
  #borrow-overview .headline--loading {
    transform: translateX(0);
  }
}
#borrow-overview .digit {
  width: 0.6em;
}
#borrow-overview .digit.comma {
  overflow: hidden;
  width: 0.28em;
}
#borrow-overview .digit.one {
  width: 0.62em;
}
#borrow-overview .digit.decimals {
  color: #657786;
}
#borrow-overview .digit-container {
  margin-top: 0em;
  padding-right: 0;
  padding-left: 0;
}
#borrow-overview .net-apy-wrapper {
  height: 140px;
  width: 140px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 40em) {
  #borrow-overview .net-apy-wrapper {
    height: 120px;
    width: 120px;
  }
}
#borrow-overview .net-apy-wrapper .net-apy-description {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0.1875rem;
  background-color: #070A0E;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}
#borrow-overview .net-apy-wrapper .net-apy-description label {
  text-align: center;
  color: #657786;
}
#borrow-overview .net-apy-wrapper .net-apy-description .headline--loading {
  height: 1.75rem;
  width: 4rem;
  transform: translateX(0);
}
#borrow-overview .net-apy-wrapper .net-apy-description.active {
  background-color: rgba(20, 30, 39, 0.98);
}
#borrow-overview .net-apy-wrapper .net-apy-description.active label {
  color: #ffffff;
}
#borrow-overview .net-apy-wrapper .net-apy-description.active .headline {
  color: #F9FAFB;
  font-size: 12px;
  text-align: center;
}
#borrow-overview .limit-bar {
  display: flex;
  margin-top: 3.25rem;
}
#borrow-overview .limit-bar .progress-bar-wrapper {
  position: relative;
  flex: 1 1;
}
#borrow-overview .limit-bar .progress-bar-hover-space {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10px;
  margin-top: 1rem;
}
#borrow-overview .limit-bar label {
  color: #657786;
  margin-top: 0.7rem;
  margin-right: 0.625rem;
}
#borrow-overview .limit-bar label:last-of-type {
  margin-right: 0;
  margin-left: 0.625rem;
}
#borrow-overview .limit-bar .progress-bar-percent-label {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#borrow-overview .limit-bar .progress-bar-percent-label div {
  min-width: 1%;
  max-width: 99%;
}
#borrow-overview .limit-bar .progress-bar-percent-label div p {
  position: relative;
  float: right;
  margin-right: -0.7rem;
  color: #ffffff;
  padding: 0.3rem 0.3rem 0.25rem 0.25rem;
  background-color: #070A0E;
}
@media (max-width: 40em) {
  #borrow-overview .limit-bar .progress-bar-percent-label div p {
    padding: 0.2rem 0.3rem 0rem 0.25rem;
  }
}
@media (max-width: 40em) {
  #borrow-overview .limit-bar .progress-bar-percent-label div {
    min-width: 5%;
  }
}

#interface-container {
  --alertHeight: 0px;
  min-height: calc(100vh - 82px - 23rem + 34px - var(--alertHeight));
}
#interface-container.alert-small {
  --alertHeight: 65px;
}
#interface-container.alert-large {
  --alertHeight: 86px;
}
#interface-container .identity .balance {
  flex: 1 1;
  margin-right: 0.25rem;
  overflow: hidden;
}
#interface-container .balance > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#interface-container .balance .subtitle {
  display: block;
  margin-top: 9px;
  color: #AAB8C1;
  font-size: 0.9em;
}
#interface-container .balance .subtitle.mobile-only {
  display: none;
}
@media (max-width: 40em) {
  #interface-container .balance .subtitle.mobile-only {
    display: block;
  }
}
#interface-container .panel .text-right .balance--loading {
  height: 1.25rem;
  width: 55%;
  transform: translateX(85%);
}
#interface-container .panel .asset .progress-holder--loading {
  position: relative;
  height: 1rem;
  width: 60%;
  right: 0;
  transform: translateX(65%);
}
#interface-container .transactions .asset {
  display: block;
}
@media (max-width: 40em) {
  #interface-container {
    padding-top: 0.75em;
  }
  #interface-container .legacy-panel .header {
    padding: 1.2rem 1rem;
  }
}

#collateral-pane [class*=col] {
  padding: 0 0;
}

#borrowing-pane [class*=col] {
  padding: 0 0;
}
#borrowing-pane .assets .progress {
  display: flex;
  flex-direction: row;
  height: 5px;
  width: 1.5rem;
  max-width: 1.5rem;
  overflow: hidden;
  background-color: rgba(40, 49, 55, 0.1);
  border-radius: 100px;
  margin-top: 0.3rem;
}
#borrowing-pane .assets .progress-holder {
  display: flex;
  justify-content: flex-end;
}
#borrowing-pane .assets .progress-bar {
  display: flex;
  background-color: #6563D6;
  border-radius: 100px;
}
#borrowing-pane .assets .progress + span {
  min-width: 1.5rem;
  margin-left: 0.3125rem;
}
@media (max-width: 40em) {
  #borrowing-pane {
    width: 100%;
  }
}

#terms h2 {
  color: #FFFFFF;
  margin-top: 0.35rem;
}
#terms h3 {
  color: #141E27;
}
#terms h4 {
  color: #141E27;
}
#terms p {
  color: #657786;
  margin-top: 1rem;
}
#terms ol {
  color: #657786;
}
#terms .hero {
  padding-top: 90px;
  padding-bottom: 109px;
}
#terms .hero p {
  color: #AAB8C1;
}
#terms #terms-items {
  padding-top: 81px;
  padding-bottom: 109px;
}
#terms .term-item {
  margin-top: 52px;
}

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

.liquidate-container {
  margin: 0 0;
}

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

  .mobile-only {
    display: block;
  }
  .mobile-only.logo {
    display: block;
  }

  .container-large {
    padding-right: 0.8866666667rem;
    padding-left: 0.8866666667rem;
  }

  .container {
    padding-right: 0.8866666667rem;
    padding-left: 0.8866666667rem;
  }

  .container-small {
    padding-right: 0.8866666667rem;
    padding-left: 0.8866666667rem;
  }

  .legacy-panel .header {
    font-size: 1.2rem;
    padding-top: 1.33rem;
    padding-bottom: 1.33rem;
  }
  .legacy-panel .header,
.legacy-panel .content {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
  .legacy-panel .labels,
.legacy-panel .asset {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  #terms .hero {
    padding-right: 0.665rem;
    padding-left: 0.665rem;
  }
  #terms #terms-items {
    padding-right: 0.665rem;
    padding-left: 0.665rem;
  }

  .banner {
    display: block;
    margin-top: 1.33rem;
    padding: 1.33rem 0.75rem 0.75rem;
  }
  .banner .description {
    display: block;
    margin-bottom: 1.33rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.1;
  }
  .banner .button.large {
    margin: 0;
    width: 100%;
  }

  .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;
  }

  .button {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
}


/*# sourceMappingURL=dapp.bbbff79e.chunk.css.map*/