@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;
  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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@keyframes slide {
  0% {
    transform: translateY(var(--digits-translation));
  }
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes project-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

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

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

.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: #00D395;
  border-color: #00D395;
}
.connecting-ring--for-borrowing {
  background: #9669ED;
  border-color: #9669ED;
}
.connecting-ring--error {
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100px;
  background-color: transparent;
  border-color: transparent;
  background-image: url(../images/icn-ledger-error-no-bkg.svg);
}

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

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

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

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

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.connect-wallet h2 {
  color: #141E27;
}
.connect-wallet h3 {
  color: #141E27;
}
.connect-wallet h4 {
  color: #141E27;
}
.connect-wallet p {
  color: #657786;
}
.connect-wallet p {
  color: #657786;
}
.connect-wallet p[class*=center-text] {
  text-align: center;
}
.connect-wallet h4 {
  margin-top: 1em;
  margin-bottom: 0.25em;
}
.connect-wallet a {
  text-decoration: none;
  text-transform: none;
}
.connect-wallet .container-small {
  min-width: 30em;
  max-width: 30em;
}
.connect-wallet .legacy-panel .header {
  border-bottom: none;
  height: 48px;
}
.connect-wallet .legacy-panel .header .back-arrow {
  display: flex;
  align-items: center;
}
.connect-wallet .legacy-panel .header .back-arrow .icon {
  background-image: url(../images/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(../images/compound-mark.svg);
  background-size: 50%;
  background-position: center;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.07);
  background-repeat: no-repeat;
  border-radius: 100px;
}
.connect-wallet .connect-wallet-copy__mark--error {
  background-image: url(../images/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(../images/icn-arrow-back-dark.svg);
  opacity: 0.7;
}
.connect-wallet .connect-wallet-copy__back-arrow-holder__back-arrow:hover {
  opacity: 1;
}
.connect-wallet .connect-wallet-copy--show-border {
  width: 380px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding-left: 1.33rem;
  padding-right: 1.33rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
}
.connect-wallet .connect-wallet-copy div.dropdown .line {
  margin: 0;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light p:nth-of-type(1) {
  color: #141E27;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light p:only-child {
  color: #657786;
}
.connect-wallet .connect-wallet-copy div.dropdown__option--light:hover p {
  color: #00D395;
}
.connect-wallet .connect-wallet-copy div.bullet-points p {
  margin-top: 1.33rem;
  padding-left: 40px;
  padding-right: 40px;
}
.connect-wallet .connect-wallet-copy button {
  width: 17.75rem;
  margin-bottom: 64px;
}
.connect-wallet .connect-wallet-icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
}
.connect-wallet .connect-wallet-icon--coinbase {
  background-image: url(../images/icn-coinbase-wallet.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--ledger {
  background-image: url(../images/icn-ledger.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--metamask {
  background-image: url(../images/icn-metamask.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--tally {
  background-image: url(../images/icn-tally.svg);
  margin: 0;
}
.connect-wallet .connect-wallet-icon--wallet-connect {
  background-image: url(../images/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: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
.connect-wallet .terms-agreement a:hover {
  border-bottom: 1px solid #00D395;
}

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

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

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

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

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

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

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

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

.dropdown {
  --dropdownHeight: 3rem;
  --dropdownWidth: 7.75rem;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-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(../images/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(../images/icn-dropdown-closed.svg);
}
.dropdown__selected--light.active::after {
  background-image: url(../images/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(../images/icn-dropdown-closed-purple.svg);
}
.dropdown__selected--light--borrow.active::after {
  background-image: url(../images/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);
  animation: bounce 0.3s ease;
}
.dropdown__options--footer {
  height: 0;
  background-color: #ffffff;
  margin-top: 0;
  top: auto;
  bottom: 2rem;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.15);
  border-radius: 4px;
}
.dropdown__options--network {
  height: 0;
  margin-top: 0;
  top: auto;
  bottom: 2.5rem;
  border-radius: 4px;
}
@media (max-width: 40em) {
  .dropdown__options--network {
    bottom: 3.5rem;
  }
}
.dropdown__options--light {
  background-color: #fff;
  border-color: #CCD6DD;
  border-style: solid;
  border-width: 1px;
}
@keyframes bounce {
  0% {
    transform: translateY(-3px);
  }
  30% {
    transform: translateY(2px);
  }
  85% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.dropdown__option {
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 0.75rem;
  width: 100%;
  height: var(--dropdownHeight);
  opacity: 0;
}
.dropdown__option:hover {
  background-color: #10161f;
}
.active > .dropdown__option {
  opacity: 1;
  transition: opacity 0.25s linear;
}
.dropdown__option p[class*=align-right] {
  text-align: right;
}
.dropdown__option--light:hover {
  background-color: #F9FAFB;
}
.dropdown__option--light:hover p {
  color: #00D395;
}
.dropdown__option--light-no-hover-text:hover {
  background-color: #F9FAFB;
}
.dropdown__option--darktext p {
  color: #070A0E;
}
.dropdown__option--divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown__option--divider:last-child {
  border-bottom: none;
}
.dropdown__option--dark2 {
  background-color: #141E27;
}
.dropdown__option--dark2:hover {
  background-color: #141E27;
}
.dropdown__option--language {
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
}
.dropdown__option--language:hover {
  background-color: transparent;
  color: #00D395;
}
@media (max-width: 40em) {
  .dropdown__option--language {
    justify-content: space-between;
    padding-left: 0;
  }
}

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

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

.icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
}
.icon--small {
  width: 1.5625rem;
  height: 1.5625rem;
}
.icon--large {
  width: 3.375rem;
  height: 3.375rem;
  min-width: 3.375rem;
  min-height: 3.375rem;
}
.icon--FEI {
  background-image: url("../images/asset_FEI.svg");
}
.icon--AAVE {
  background-image: url("../images/asset_AAVE.svg");
}
.icon--BAT {
  background-image: url("../images/asset_BAT.svg");
}
.icon--CASH {
  background-image: url("../images/asset_CASH--green.svg");
}
.icon--CASH--dark {
  background-image: url("../images/asset_CASH--white.svg");
}
.icon--COMP {
  background-image: url("../images/asset_COMP.svg");
}
.icon--DAI {
  background-image: url("../images/asset_DAI.svg");
}
.icon--ETH, .icon--WETH {
  background-image: url("../images/asset_ETH.svg");
}
.icon--LINK {
  background-image: url("../images/asset_LINK.svg");
}
.icon--MKR {
  background-image: url("../images/asset_MKR.svg");
}
.icon--REP {
  background-image: url("../images/asset_REP.svg");
}
.icon--SAI {
  background-image: url("../images/asset_SAI.svg");
}
.icon--SUSHI {
  background-image: url("../images/asset_SUSHI.svg");
}
.icon--TUSD {
  background-image: url("../images/asset_TUSD.svg");
}
.icon--UNI {
  background-image: url("../images/asset_UNI.svg");
}
.icon--USDC {
  background-image: url("../images/asset_USDC.svg");
}
.icon--USDP {
  background-image: url("../images/asset_USDP.svg");
}
.icon--USDT {
  background-image: url("../images/asset_USDT.svg");
}
.icon--WBTC, .icon--WBTC2 {
  background-image: url("../images/asset_BTC.svg");
}
.icon--YFI {
  background-image: url("../images/asset_YFI.svg");
}
.icon--ZRX {
  background-image: url("../images/asset_ZRX.svg");
}
.icon--coinbase {
  background-image: url("../images/icn-coinbase-wallet.svg");
}
.icon--ledger {
  background-image: url("../images/icn-ledger.svg");
}
.icon--metamask {
  background-image: url("../images/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: #00D395;
  border-color: #00D395;
}
.connecting-ring--for-borrowing {
  background: #9669ED;
  border-color: #9669ED;
}
.connecting-ring--error {
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100px;
  background-color: transparent;
  border-color: transparent;
  background-image: url(../images/icn-ledger-error-no-bkg.svg);
}

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

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

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

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

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.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: #00D395;
  border-color: #00D395;
}
.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%;
  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("../images/icn-copy.svg");
}
.line-icon--copy:hover {
  background-image: url("../images/icn-copy-green.svg");
}
.line-icon--copy--blue:hover {
  background-image: url("../images/icn-copy-blue.svg");
}
.line-icon--external-link {
  background-image: url("../images/icn-external-link.svg");
}
.line-icon--external-link:hover {
  background-image: url("../images/icn-external-link-green.svg");
}
.line-icon--external-link--gray {
  background-image: url("../images/icn-external-link-gray.svg");
}
.line-icon--external-link--green {
  background-image: url("../images/icn-external-link-green.svg");
}
.line-icon--external-link--black {
  background-image: url("../images/icn-external-link-black.svg");
}
.line-icon--complete {
  background-image: url("../images/icn-complete.svg");
}
.line-icon--edit {
  height: 30px;
  width: 30px;
  background-image: url("../images/icn-edit.svg");
}
.line-icon--plus {
  height: 30px;
  width: 30px;
  background-image: url("../images/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("../images/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("../images/icon_close_x.svg");
  background-size: 100% 100%;
  border: 0;
  padding: 0.5rem 1rem;
}
.modal .legacy-panel .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.66rem 0;
}
.modal .legacy-panel .copy p {
  font-size: 1rem;
}
@media (min-width: 60em) {
  .modal .legacy-panel .copy {
    font-size: 16px;
  }
}
.modal .legacy-panel .copy .icon {
  height: 3rem;
  width: 3rem;
  margin: 0 0 0.6rem 0;
}
.modal .legacy-panel .available {
  color: #141E27;
}
.modal .legacy-panel .form {
  padding: 0 3.99rem 2.66rem;
}
.modal .actions {
  margin: 1.33rem 1.33rem;
}

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

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

.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);
  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: #F35454;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #00D395;
}

.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: #9669ED;
  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;
  animation: pulsing-animation 2s infinite;
  border-radius: 50%;
}

@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: #00D395;
}
.tab-group__option--active--large--green::after {
  background: #00D395;
}
.tab-group__option--active--large--purple {
  color: #9669ED;
}
.tab-group__option--active--large--purple::after {
  background: #9669ED;
}
.tab-group__option--active--green {
  color: #00D395;
  border-color: #00D395;
}
.tab-group__option--active--purple {
  color: #9669ED;
  border-color: #9669ED;
}
.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: #00D395;
  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, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .name--loading, .identity .symbol--loading, .icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

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

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

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

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

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .icon--loading, .identity .symbol--loading, .name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .col-lg-auto {
    flex-basis: auto;
  }
}
.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(../images/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::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: #F35454;
  color: #FFFFFF;
}
.alert.vote {
  font-size: 14px;
  background-color: #141E27;
  padding: 1.33rem;
}
.alert a {
  color: #00D395;
  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: #00D395;
  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;
          user-select: none;
  font-size: 0.9rem;
  line-height: 1.25;
}

.market-bar {
  font-size: 0.9rem;
  margin-top: 1rem;
}
.market-bar.supply {
  color: #00D395;
}
.market-bar.supply .bar {
  background: #D4F6EC;
}
.market-bar.supply .fill {
  background: #00D395;
}
.market-bar.borrow {
  color: #9669ED;
}
.market-bar.borrow .bar {
  background: #EAE1FB;
}
.market-bar.borrow .fill {
  background: #9669ED;
}
.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: #00D395;
}

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

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: #00D395;
}
@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: #00D395;
}
footer .dapp {
  color: #00D395;
  border-color: #00D395;
  border-radius: 6.25rem;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  height: 3rem;
  width: 5.8rem;
  padding: 1rem 1.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
footer .dapp:hover {
  background-color: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
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: #00D395;
}
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 .alert {
  margin-top: -1rem;
  margin-bottom: 1rem;
}
header .alert a {
  margin-left: 0.2rem;
}
header .alert--inline::after {
  content: "";
  width: 0;
  margin: 0;
}
header .brand {
  background-image: url(../images/compound-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  width: 127px;
  height: 27px;
}
header .text-center a {
  margin: 0 0.665rem;
  color: #FFFFFF;
  letter-spacing: 1px;
}
header .text-center a.active {
  color: #00D395;
  padding: 0.3rem 0;
  border-bottom: 1px solid #00D395;
  transition: padding 0.2s ease;
}
header .text-center a:hover {
  color: #00D395;
  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;
          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 #select-currency {
  padding-right: 0.25rem;
}
header.light {
  background: #FFFFFF;
}
header.light .brand {
  background-image: url(../images/compound-logo-dark.svg);
}
header.light .text-center a {
  color: #141E27;
}
header.light .text-center a.active {
  color: #00D395;
  padding: 0.3rem 0;
  border-bottom: 1px solid #00D395;
  transition: padding 0.2s ease;
}
header.light .text-center a:hover {
  color: #00D395;
  text-decoration: none;
  padding-bottom: 0.5rem;
}
header.light .hamburger span {
  background-color: #070A0E;
}
header.light #account {
  background: #F9FAFB;
  color: #141E27;
}
header.light #account:hover {
  color: #00D395;
}
header.light #account.active {
  border-bottom: 2px solid #00D395;
}
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;
}
header .mobile-header .button, header .mobile-header .hollow {
  border-radius: unset;
}
header.landing .logo {
  z-index: 25;
}
header.landing .links a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
header.landing .dapp {
  color: #00D395;
  border-color: #00D395;
  border-radius: 6.25rem;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  height: 3rem;
  width: 5.8rem;
}
header.landing .dapp:hover {
  background-color: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
@media (max-width: 40em) {
  header.landing .hamburger {
    display: block;
  }
  header.landing .dapp {
    border-radius: unset;
    height: unset;
    width: unset;
  }
}

header.dapp #connect-wallet {
  border-radius: 3px;
  margin-left: 1.33rem;
  padding: 0.665rem;
  color: #00D395;
  border-color: #00D395;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  text-transform: none;
}
header.dapp #connect-wallet:hover {
  background-color: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
header.dapp .links a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
header.dapp .links a.active {
  color: #00D395;
  padding: 0.3rem 0;
  border-bottom: 1px solid #00D395;
  transition: padding 0.2s ease;
}
header.dapp .links a:hover {
  color: #00D395;
  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;
          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: #00D395;
  border-color: #00D395;
  text-transform: none;
}
@media (min-width: 40em) {
  header.dapp .mobile-links {
    display: none;
  }
}

.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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@keyframes slide {
  0% {
    transform: translateY(var(--digits-translation));
  }
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes project-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .icon--loading, .identity .symbol--loading, .name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

.gov-profile-image {
  display: inline-block;
  position: relative;
  height: 2.75rem;
  width: 2.75rem;
}
.gov-profile-image--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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");
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, #Account-Profile .markets-panel__market-row__market__icon--loading, .proposal__content__description__title--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details__rank--loading, .icon--loading, .identity .symbol--loading, .name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

.delegatee-summary {
  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;
}
.delegatee-summary:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
.delegatee-summary:hover.delegatee-summary--loading {
  border-left: 2px solid transparent;
}
.delegatee-summary--empty {
  justify-content: center;
}
.delegatee-summary > div:first-child {
  padding-left: 0;
}
.delegatee-summary > div:last-child {
  padding-right: 0;
}
.delegatee-summary:nth-of-type(4n + 2) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 20.8125rem;
}
.delegatee-summary:nth-of-type(4n + 3) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 23.8125rem;
}
.delegatee-summary:nth-of-type(4n + 4) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 22.8125rem;
}
.delegatee-summary__details {
  display: flex;
  align-items: center;
}
.delegatee-summary__details__rank-view {
  flex-shrink: 0;
  width: 2rem;
  height: auto;
}
.delegatee-summary__details__rank {
  color: #141E27;
  font-weight: 800;
}
.delegatee-summary__details__rank--loading {
  display: inline-block;
  height: 0.75rem;
  width: 0.65625rem;
}
.delegatee-summary__details__display-name {
  font-size: 0.875rem;
  flex-shrink: 1;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name {
    font-size: 1rem;
  }
}
.delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 24.8125rem;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name--mobile {
    display: none;
  }
}
.delegatee-summary__details .gov-profile-image {
  display: inline-block;
  margin-top: -0.25rem;
  margin-right: 1.33rem;
}
.delegatee-summary__details .gov-profile-image--loading {
  background-image: none;
  border-radius: 50%;
}
.delegatee-summary__votes-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__votes-view__votes--loading {
  height: 1rem;
  width: 35%;
}
.delegatee-summary__vote-weight-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__vote-weight-view__vote-weight--loading {
  height: 1rem;
  width: 30%;
}
.delegatee-summary__proposals-created-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__proposals-created-view__proposals-created--loading {
  height: 1rem;
  width: 15%;
  left: 85%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #FFFFFF;
  flex-wrap: wrap;
}
.page-header__main-section {
  align-self: flex-start;
  width: 65%;
}
.page-header__main-section__back {
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.page-header__main-section__back::before {
  content: "";
  background-image: url(../images/icn-arrow-back-white.svg);
  background-size: 75%;
  background-repeat: no-repeat;
  padding: 0.5rem 1rem 0.4rem 1rem;
}
.page-header__main-section__back__text {
  color: #FFFFFF;
  text-transform: uppercase;
}
.page-header__main-section__back:hover {
  opacity: 1;
}
.page-header__main-section__title {
  margin-top: 1.875rem;
  font-family: "Haas Grot Disp R";
  font-size: 1.75rem;
  font-weight: 700;
}

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

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

.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: #F35454;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #00D395;
}

.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 #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
  color: #9669ED;
}
.proposal__content__description__details__tag--passed {
  border-color: #00D395;
  color: #00D395;
}
.proposal__content__description__details__tag--not-passed {
  border-color: #657786;
  color: #657786;
}
.proposal__content__description__details__tag--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.375rem;
}
.proposal__content__description__details__tag--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
}
.proposal__content__description__details__text__proposal-id--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 1.125rem;
}
.proposal__content__description__details__text__proposal-id--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 0.3125rem;
  height: 0.75rem;
  width: 8.5rem;
}
.proposal__content__description__details__text__time--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #00D395;
}
.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: #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: #00D395;
}
.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: #00D395;
  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%;
  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: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
.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;
}

.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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@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);
  }
}
@media (min-width: 60em) {
  .details-panel {
    padding-right: 0.625rem;
  }
}
.details-panel__action-row {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.33rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: none;
  line-height: 1.3125rem;
  word-break: break-all;
}
.details-panel__action-row__id-and-title-wrapper {
  display: flex;
  width: 100%;
}
.details-panel__action-row__number {
  text-align: left;
  font-weight: bold;
  min-width: 2.5rem;
}
.details-panel__action-row__number--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1rem;
  min-width: 0;
  width: 0.7rem;
}
.details-panel__action-row__letter {
  text-align: left;
  color: #657786;
  min-width: 2.5rem;
  padding-top: 0.75rem;
}
.details-panel__action-row__title-wrapper {
  width: 100%;
}
.details-panel__action-row__subtitle-wrapper {
  background-color: #f0f2f5;
  border-radius: 0.5rem;
  width: 100%;
  padding: 0.75rem;
}
.details-panel__action-row__text {
  text-align: left;
  white-space: pre-wrap;
  width: 100%;
}
.details-panel__action-row__text--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 1.8rem;
  height: 1rem;
  width: 60%;
}
.details-panel__action-row:nth-of-type(2) .details-panel__action-row__title--loading {
  width: 45%;
}
.details-panel__action-row:nth-of-type(3) .details-panel__action-row__title--loading {
  width: 54%;
}
.details-panel__link {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
  overflow-wrap: break-word;
}
.details-panel__link:hover {
  border-bottom: 1px solid #00D395;
}
.details-panel__description {
  padding: 1.75rem;
}
.details-panel__description img {
  width: 100%;
}
.details-panel__description ul {
  list-style: none;
}
.details-panel__description ul li:not(:first-child) {
  margin-top: 0.6rem;
}
.details-panel__description ul li::before {
  content: "•";
  color: #CCD6DD;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.details-panel__description__header {
  font-size: 1rem;
  font-weight: 600;
}
.details-panel__description__header:not(:first-child) {
  margin-top: 1rem;
}
.details-panel__description__paragraph {
  font-size: 0.875rem;
  line-height: 168%;
}
.details-panel__description__paragraph:not(:first-child) {
  margin-top: 1rem;
}
.details-panel__description__paragraph__line {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 100%;
}
.details-panel__description__paragraph__line:not(:first-child) {
  margin-top: 0.595rem;
}
.details-panel__description__paragraph__line:nth-of-type(2), .details-panel__description__paragraph__line:nth-of-type(5) {
  width: 90%;
}
.details-panel__description__paragraph__line:nth-of-type(3) {
  width: 96%;
}
.details-panel__description__paragraph__line:nth-of-type(4) {
  width: 99%;
}
.details-panel__description__paragraph__line:nth-of-type(6) {
  width: 29%;
}

#Account-Profile {
  padding-bottom: 10rem;
}
#Account-Profile section.hero {
  padding: 2.66rem 0 7.315rem;
  margin-bottom: -3.81rem;
}
#Account-Profile .account-details {
  min-height: 40.625rem;
}
#Account-Profile .profile-header {
  display: flex;
  align-items: center;
}
#Account-Profile .profile-header__details {
  display: flex;
  flex-direction: column;
  margin-left: 0.625rem;
  justify-content: center;
}
#Account-Profile .profile-header__details__display-name {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.75rem;
}
#Account-Profile .profile-header__details__display-name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: 12rem;
}
#Account-Profile .profile-header__details__display-name .line-icon {
  margin-left: 0.625rem;
}
#Account-Profile .profile-header__details__address {
  margin-top: 0.325rem;
  color: #657786;
  font-size: 0.875rem;
  font-weight: 600;
}
#Account-Profile .profile-header__details__address--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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.1875rem;
  width: 22.875rem;
}
#Account-Profile .profile-header__details__address .line-icon {
  margin-left: 0.625rem;
}
#Account-Profile .rank-pane {
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  box-shadow: 0px 2.33558px 7.00674px rgba(0, 0, 0, 0.06);
  border-radius: 4.67116px;
}
#Account-Profile .rank-pane__text {
  text-transform: uppercase;
}
#Account-Profile .rank-pane__number {
  margin-top: 0.9375rem;
  margin-bottom: 0;
  font-size: 1.375rem;
  color: #ffffff;
}
@media (min-width: 60em) {
  #Account-Profile .holdings-panel {
    padding-right: 0.625rem;
  }
}
#Account-Profile .holdings-panel__holdings__row {
  display: flex;
  flex-direction: column;
  padding: 1.5625rem 1.75rem;
}
#Account-Profile .holdings-panel__holdings__row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#Account-Profile .holdings-panel__holdings__row__votes-label {
  align-items: flex-end;
  align-content: flex-end;
}
#Account-Profile .holdings-panel__holdings__row__votes-label__icon {
  margin-left: 0.75rem;
  margin-right: 0.25rem;
  height: 12px;
  width: 12px;
}
#Account-Profile .holdings-panel__holdings__row__label--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 5.5rem;
}
#Account-Profile .holdings-panel__holdings__row__value {
  margin-top: 0.85rem;
  font-weight: 500;
  font-size: 20px;
  line-height: 124%;
}
#Account-Profile .holdings-panel__holdings__row__value--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.5rem;
  width: 4.5rem;
}
#Account-Profile .holdings-panel__holdings__row__vote-weight {
  margin-top: 0.9rem;
  margin-bottom: 1px;
  width: 100%;
  height: 4px;
  background-color: #f1f3f5;
  border-radius: 4px;
}
#Account-Profile .holdings-panel__holdings__row__vote-weight__fill {
  height: 4px;
  border-radius: 4px;
  background-color: #00D395;
}
#Account-Profile .holdings-panel__holdings__row__vote-weight--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}
#Account-Profile .holdings-panel__holdings__row:nth-of-type(2) .holdings-panel__holdings__row__label--loading {
  width: 2.0655rem;
}
#Account-Profile .holdings-panel__holdings__row:nth-of-type(2) .holdings-panel__holdings__row__value--loading {
  width: 6.6875rem;
}
#Account-Profile .holdings-panel__holdings__row:nth-of-type(3) .holdings-panel__holdings__row__label--loading {
  width: 4.9375rem;
}
#Account-Profile .holdings-panel__holdings__row:nth-of-type(3) .holdings-panel__holdings__row__value--loading {
  width: 7.3125rem;
}
@media (min-width: 60em) {
  #Account-Profile .transactions-panel {
    padding-left: 0.625rem;
  }
}
#Account-Profile .transactions-panel__transaction-row {
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.27rem 1.75rem;
  padding-left: 1.625rem;
  text-transform: none;
}
#Account-Profile .transactions-panel__transaction-row > div:first-child {
  padding-left: 0;
}
#Account-Profile .transactions-panel__transaction-row > div:last-child {
  padding-right: 0;
}
#Account-Profile .transactions-panel__transaction-row--empty {
  justify-content: center;
}
#Account-Profile .transactions-panel__transaction-row:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
#Account-Profile .transactions-panel__transaction-row:hover.transactions-panel__transaction-row--empty, #Account-Profile .transactions-panel__transaction-row:hover.transactions-panel__transaction-row--loading {
  border-left: 2px solid transparent;
}
#Account-Profile .transactions-panel__transaction-row p {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
}
#Account-Profile .transactions-panel__transaction-row__action--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 6rem;
}
#Account-Profile .transactions-panel__transaction-row__action--empty {
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: #CCD6DD;
}
@media (min-width: 60em) {
  #Account-Profile .transactions-panel__transaction-row__time {
    padding-left: 1.75rem;
  }
}
#Account-Profile .transactions-panel__transaction-row__time--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 8.5rem;
}
@media (min-width: 60em) {
  #Account-Profile .transactions-panel__transaction-row__time--loading {
    margin-left: 1.75rem;
  }
}
#Account-Profile .transactions-panel__transaction-row__time--empty {
  color: #CCD6DD;
  font-size: 0.875rem;
  line-height: 0.875rem;
}
#Account-Profile .transactions-panel__transaction-row__delta {
  position: relative;
  display: inline-block;
}
#Account-Profile .transactions-panel__transaction-row__delta--increase::before {
  content: " ";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #00D395;
}
#Account-Profile .transactions-panel__transaction-row__delta--decrease::before {
  content: " ";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #DF5F67;
}
#Account-Profile .transactions-panel__transaction-row__delta--empty {
  color: #CCD6DD;
  display: flex;
  font-size: 0.875rem;
  line-height: 0.875rem;
}
#Account-Profile .transactions-panel__transaction-row__delta--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  display: flex;
  margin-left: auto;
  height: 0.875rem;
  width: 4rem;
}
#Account-Profile .transactions-panel__transaction-row:nth-of-type(2) .transactions-panel__transaction-row__action--loading, #Account-Profile .transactions-panel__transaction-row:nth-of-type(4) .transactions-panel__transaction-row__action--loading {
  width: 7.0655rem;
}
#Account-Profile .transactions-panel__transaction-row:nth-of-type(2) .transactions-panel__transaction-row__time--loading, #Account-Profile .transactions-panel__transaction-row:nth-of-type(4) .transactions-panel__transaction-row__time--loading {
  width: 7.5rem;
}
#Account-Profile .transactions-panel__transaction-row:nth-of-type(2) .transactions-panel__transaction-row__delta--loading, #Account-Profile .transactions-panel__transaction-row:nth-of-type(4) .transactions-panel__transaction-row__delta--loading {
  width: 4.6875rem;
}
@media (min-width: 60em) {
  #Account-Profile .markets-panel {
    padding-left: 0.625rem;
  }
}
#Account-Profile .markets-panel .comp-column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#Account-Profile .markets-panel .comp-column img {
  margin-right: 0.625rem;
}
#Account-Profile .markets-panel__market-row {
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.27rem 1.75rem;
  padding-left: 1.625rem;
  text-transform: none;
}
#Account-Profile .markets-panel__market-row > div:first-child {
  padding-left: 0;
}
#Account-Profile .markets-panel__market-row > div:last-child {
  padding-right: 0;
}
#Account-Profile .markets-panel__market-row--empty {
  justify-content: center;
}
#Account-Profile .markets-panel__market-row p {
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
}
#Account-Profile .markets-panel__market-row__market {
  display: flex;
  align-items: center;
}
#Account-Profile .markets-panel__market-row__market__icon {
  border: 0;
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  min-height: 2.375rem;
  border-radius: 50%;
}
#Account-Profile .markets-panel__market-row__market__icon--loading {
  background-image: none;
  border-radius: 50%;
}
#Account-Profile .markets-panel__market-row__market__text {
  margin-left: 1.125rem;
}
#Account-Profile .markets-panel__market-row__market__text--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 6rem;
}
#Account-Profile .markets-panel__market-row__text--light {
  color: #CCD6DD;
}

.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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@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);
  }
}
.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: #9669ED;
  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;
  animation: pulsing-animation 2s infinite;
  border-radius: 50%;
}

@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 placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, .icon--loading, .identity .symbol--loading, .name--loading, .delegatee-summary__details__rank--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .proposal__content__description__title--loading, #Account-Profile .markets-panel__market-row__market__icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

.delegatee-summary {
  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;
}
.delegatee-summary:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
.delegatee-summary:hover.delegatee-summary--loading {
  border-left: 2px solid transparent;
}
.delegatee-summary--empty {
  justify-content: center;
}
.delegatee-summary > div:first-child {
  padding-left: 0;
}
.delegatee-summary > div:last-child {
  padding-right: 0;
}
.delegatee-summary:nth-of-type(4n + 2) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 20.8125rem;
}
.delegatee-summary:nth-of-type(4n + 3) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 23.8125rem;
}
.delegatee-summary:nth-of-type(4n + 4) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 22.8125rem;
}
.delegatee-summary__details {
  display: flex;
  align-items: center;
}
.delegatee-summary__details__rank-view {
  flex-shrink: 0;
  width: 2rem;
  height: auto;
}
.delegatee-summary__details__rank {
  color: #141E27;
  font-weight: 800;
}
.delegatee-summary__details__rank--loading {
  display: inline-block;
  height: 0.75rem;
  width: 0.65625rem;
}
.delegatee-summary__details__display-name {
  font-size: 0.875rem;
  flex-shrink: 1;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name {
    font-size: 1rem;
  }
}
.delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 24.8125rem;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name--mobile {
    display: none;
  }
}
.delegatee-summary__details .gov-profile-image {
  display: inline-block;
  margin-top: -0.25rem;
  margin-right: 1.33rem;
}
.delegatee-summary__details .gov-profile-image--loading {
  background-image: none;
  border-radius: 50%;
}
.delegatee-summary__votes-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__votes-view__votes--loading {
  height: 1rem;
  width: 35%;
}
.delegatee-summary__vote-weight-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__vote-weight-view__vote-weight--loading {
  height: 1rem;
  width: 30%;
}
.delegatee-summary__proposals-created-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__proposals-created-view__proposals-created--loading {
  height: 1rem;
  width: 15%;
  left: 85%;
}

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

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

.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: #F35454;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #00D395;
}

.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 #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
  color: #9669ED;
}
.proposal__content__description__details__tag--passed {
  border-color: #00D395;
  color: #00D395;
}
.proposal__content__description__details__tag--not-passed {
  border-color: #657786;
  color: #657786;
}
.proposal__content__description__details__tag--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.375rem;
}
.proposal__content__description__details__tag--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
}
.proposal__content__description__details__text__proposal-id--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 1.125rem;
}
.proposal__content__description__details__text__proposal-id--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 0.3125rem;
  height: 0.75rem;
  width: 8.5rem;
}
.proposal__content__description__details__text__time--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #00D395;
}
.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: #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: #00D395;
}
.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: #00D395;
  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%;
  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: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
.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;
}

#Dashboard .hero h2 {
  color: #FFFFFF;
  margin-bottom: 0.52rem;
  padding-top: 5rem;
}
#Dashboard #educational-overview {
  display: flex;
  flex-flow: row wrap;
}
#Dashboard #educational-overview #gov-description {
  max-width: 60%;
  padding: 1.75rem;
}
#Dashboard #educational-overview #gov-description .call-to-action {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#Dashboard #educational-overview #gov-description .call-to-action a {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#Dashboard #educational-overview #gov-description .call-to-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#Dashboard #educational-overview #gov-description .call-to-action:hover a {
  border-bottom: 1px solid #00D395;
}
#Dashboard #educational-overview #gov-description .call-to-action:hover #arrow {
  transform: translateX(5px);
}
@media (max-width: 40em) {
  #Dashboard #educational-overview #gov-description {
    max-width: 100%;
    margin-top: 0;
  }
}
#Dashboard #educational-overview #gov-description h4 {
  margin-bottom: 0.8em;
}
#Dashboard #educational-overview #gov-description p {
  color: #657786;
  font-size: 1.125rem;
  margin-bottom: 1em;
}
@media (min-width: 60em) {
  #Dashboard #educational-overview #gov-description p {
    font-size: 1rem;
  }
}
#Dashboard #educational-overview #gov-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #141E27;
  border-radius: 0 0 4px 4px;
}
@media (min-width: 60em) {
  #Dashboard #educational-overview #gov-image {
    border-radius: 0 4px 4px 0;
  }
}
#Dashboard #educational-overview #gov-image #gov-illo {
  display: block;
  width: 100%;
  height: 166px;
  background-repeat: no-repeat;
  background-image: url("../images/gov-illo.svg");
  background-size: contain;
}
@media (min-width: 60em) {
  #Dashboard #educational-overview #gov-image #gov-illo {
    width: 370px;
  }
}
#Dashboard #dashboard-overview {
  margin-top: 2rem;
  margin-bottom: -0.8rem;
}
#Dashboard #dashboard-overview .legacy-panel {
  margin-bottom: 0.625rem;
}
@media (min-width: 60em) {
  #Dashboard #dashboard-overview .legacy-panel {
    margin-bottom: 0;
  }
}
#Dashboard #dashboard-overview .legacy-panel.dark {
  background: #141E27;
  border: 1px solid #070A0E;
}
#Dashboard #dashboard-overview .legacy-panel .header {
  padding: 1.33rem;
}
#Dashboard #dashboard-overview .legacy-panel .content {
  padding: 1.6rem;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: normal;
  text-transform: none;
  font-size: inherit;
  cursor: pointer;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .comp-remaining-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.62rem;
  width: 50%;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .comp-remaining__bar {
  margin-bottom: 1px;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 211, 149, 0.2);
  border-radius: 4px;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .comp-remaining__bar__fill {
  height: 4px;
  border-radius: 4px;
  background-color: #00D395;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .view-action {
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  margin-left: auto;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .view-action .action-text {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel .view-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel:hover .view-action .action-text {
  border-bottom: 1px solid #00D395;
}
#Dashboard #dashboard-overview .legacy-panel #comp-distribution-panel:hover .view-action #arrow {
  transform: translateX(5px);
}
#Dashboard #dashboard-overview .legacy-panel__label--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: 1rem;
  width: 5.9375rem;
}
#Dashboard #dashboard-overview .headline {
  margin-top: 0;
  margin-bottom: 0.25rem;
}
#Dashboard #dashboard-overview .headline--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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.375rem;
  width: 6.25rem;
}
@media (min-width: 60em) {
  #Dashboard #dashboard-overview > div:first-of-type {
    padding-right: 0.625rem;
  }
}
#Dashboard #dashboard-overview > div:nth-child(2) {
  padding-left: 0.625rem;
  padding-right: 0.3125rem;
}
@media (min-width: 60em) {
  #Dashboard #dashboard-overview > div:nth-child(2) {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}
#Dashboard #dashboard-overview > div:nth-child(2) .headline--loading {
  width: 8.25rem;
}
#Dashboard #dashboard-overview > div:nth-child(3) {
  padding-left: 0.3125rem;
  padding-right: 0.625rem;
}
@media (min-width: 60em) {
  #Dashboard #dashboard-overview > div:nth-child(3) {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}
#Dashboard #dashboard-overview > div:nth-child(3) .headline--loading {
  width: 4.25rem;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, #Comp .markets-panel__market-row__market__icon--loading, .icon--loading, .identity .symbol--loading, .name--loading, .delegatee-summary__details__rank--loading, .delegatee-summary__details__display-name--loading, .delegatee-summary__details .gov-profile-image--loading, .delegatee-summary__votes-view__votes--loading, .delegatee-summary__vote-weight-view__vote-weight--loading, .delegatee-summary__proposals-created-view__proposals-created--loading, .proposal__content__description__title--loading, #Account-Profile .markets-panel__market-row__market__icon--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}

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

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

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

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

.delegatee-summary {
  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;
}
.delegatee-summary:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
.delegatee-summary:hover.delegatee-summary--loading {
  border-left: 2px solid transparent;
}
.delegatee-summary--empty {
  justify-content: center;
}
.delegatee-summary > div:first-child {
  padding-left: 0;
}
.delegatee-summary > div:last-child {
  padding-right: 0;
}
.delegatee-summary:nth-of-type(4n + 2) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 20.8125rem;
}
.delegatee-summary:nth-of-type(4n + 3) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 23.8125rem;
}
.delegatee-summary:nth-of-type(4n + 4) .delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 22.8125rem;
}
.delegatee-summary__details {
  display: flex;
  align-items: center;
}
.delegatee-summary__details__rank-view {
  flex-shrink: 0;
  width: 2rem;
  height: auto;
}
.delegatee-summary__details__rank {
  color: #141E27;
  font-weight: 800;
}
.delegatee-summary__details__rank--loading {
  display: inline-block;
  height: 0.75rem;
  width: 0.65625rem;
}
.delegatee-summary__details__display-name {
  font-size: 0.875rem;
  flex-shrink: 1;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name {
    font-size: 1rem;
  }
}
.delegatee-summary__details__display-name--loading {
  height: 1rem;
  width: 24.8125rem;
}
@media (min-width: 60em) {
  .delegatee-summary__details__display-name--mobile {
    display: none;
  }
}
.delegatee-summary__details .gov-profile-image {
  display: inline-block;
  margin-top: -0.25rem;
  margin-right: 1.33rem;
}
.delegatee-summary__details .gov-profile-image--loading {
  background-image: none;
  border-radius: 50%;
}
.delegatee-summary__votes-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__votes-view__votes--loading {
  height: 1rem;
  width: 35%;
}
.delegatee-summary__vote-weight-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__vote-weight-view__vote-weight--loading {
  height: 1rem;
  width: 30%;
}
.delegatee-summary__proposals-created-view {
  display: flex;
  justify-content: flex-end;
}
.delegatee-summary__proposals-created-view__proposals-created--loading {
  height: 1rem;
  width: 15%;
  left: 85%;
}

#Leaderboard section.hero {
  padding: 2.66rem 0 8.815rem;
  margin-bottom: -3.75rem;
}

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

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

.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: #F35454;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #00D395;
}

.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 #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
  color: #9669ED;
}
.proposal__content__description__details__tag--passed {
  border-color: #00D395;
  color: #00D395;
}
.proposal__content__description__details__tag--not-passed {
  border-color: #657786;
  color: #657786;
}
.proposal__content__description__details__tag--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.375rem;
}
.proposal__content__description__details__tag--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
}
.proposal__content__description__details__text__proposal-id--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 1.125rem;
}
.proposal__content__description__details__text__proposal-id--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 0.3125rem;
  height: 0.75rem;
  width: 8.5rem;
}
.proposal__content__description__details__text__time--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #00D395;
}
.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: #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: #00D395;
}
.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: #00D395;
  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%;
  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: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
.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;
}

#ProposalOverview section.hero {
  padding: 2.66rem 0 6.44rem;
  margin-bottom: -3.75rem;
}
#ProposalOverview .proposal-overview__header {
  line-height: 1;
  margin-bottom: 0;
}
#ProposalOverview .proposals-pie-view {
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  box-shadow: 0px 2.33558px 7.00674px rgba(0, 0, 0, 0.06);
  border-radius: 4.67116px;
  margin-top: 1rem;
}
@media (min-width: 60em) {
  #ProposalOverview .proposals-pie-view {
    margin-top: 0;
  }
}
#ProposalOverview .proposal-pie-wrapper {
  display: flex;
  height: 5rem;
  width: 5rem;
  position: relative;
}
#ProposalOverview .proposal-pie-wrapper .proposals-pie-chart {
  height: 5rem;
  width: 5rem;
}
#ProposalOverview .proposal-pie-wrapper .proposal-pie-description {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0.1875rem;
  background-color: #141E27;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}
#ProposalOverview .proposal-pie-wrapper .proposal-pie-description .headline {
  margin-top: 0;
}
#ProposalOverview .proposal-pie-labels {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}
@media (min-width: 60em) {
  #ProposalOverview .proposal-pie-labels {
    margin-left: 2.66rem;
  }
}
#ProposalOverview .proposal-pie-labels label:not(:first-child) {
  margin-top: 0.5625rem;
}
#ProposalOverview .proposal-pie-labels label.active::before {
  display: inline-block;
  vertical-align: -25%;
  content: "";
  height: 14px;
  width: 4px;
  margin-right: 0.625rem;
  background-color: #9669ED;
}
#ProposalOverview .proposal-pie-labels label.passed::before {
  display: inline-block;
  vertical-align: -25%;
  content: "";
  height: 14px;
  width: 4px;
  margin-right: 0.625rem;
  background-color: #00D395;
}
#ProposalOverview .proposal-pie-labels label.failed::before {
  display: inline-block;
  vertical-align: -25%;
  content: "";
  height: 14px;
  width: 4px;
  margin-right: 0.625rem;
  background-color: #657786;
}

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

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

.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: #9669ED;
  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;
  animation: pulsing-animation 2s infinite;
  border-radius: 50%;
}

@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);
  }
}
.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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@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);
  }
}
@media (min-width: 60em) {
  .details-panel {
    padding-right: 0.625rem;
  }
}
.details-panel__action-row {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.33rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: none;
  line-height: 1.3125rem;
  word-break: break-all;
}
.details-panel__action-row__id-and-title-wrapper {
  display: flex;
  width: 100%;
}
.details-panel__action-row__number {
  text-align: left;
  font-weight: bold;
  min-width: 2.5rem;
}
.details-panel__action-row__number--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1rem;
  min-width: 0;
  width: 0.7rem;
}
.details-panel__action-row__letter {
  text-align: left;
  color: #657786;
  min-width: 2.5rem;
  padding-top: 0.75rem;
}
.details-panel__action-row__title-wrapper {
  width: 100%;
}
.details-panel__action-row__subtitle-wrapper {
  background-color: #f0f2f5;
  border-radius: 0.5rem;
  width: 100%;
  padding: 0.75rem;
}
.details-panel__action-row__text {
  text-align: left;
  white-space: pre-wrap;
  width: 100%;
}
.details-panel__action-row__text--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 1.8rem;
  height: 1rem;
  width: 60%;
}
.details-panel__action-row:nth-of-type(2) .details-panel__action-row__title--loading {
  width: 45%;
}
.details-panel__action-row:nth-of-type(3) .details-panel__action-row__title--loading {
  width: 54%;
}
.details-panel__link {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
  overflow-wrap: break-word;
}
.details-panel__link:hover {
  border-bottom: 1px solid #00D395;
}
.details-panel__description {
  padding: 1.75rem;
}
.details-panel__description img {
  width: 100%;
}
.details-panel__description ul {
  list-style: none;
}
.details-panel__description ul li:not(:first-child) {
  margin-top: 0.6rem;
}
.details-panel__description ul li::before {
  content: "•";
  color: #CCD6DD;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.details-panel__description__header {
  font-size: 1rem;
  font-weight: 600;
}
.details-panel__description__header:not(:first-child) {
  margin-top: 1rem;
}
.details-panel__description__paragraph {
  font-size: 0.875rem;
  line-height: 168%;
}
.details-panel__description__paragraph:not(:first-child) {
  margin-top: 1rem;
}
.details-panel__description__paragraph__line {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 100%;
}
.details-panel__description__paragraph__line:not(:first-child) {
  margin-top: 0.595rem;
}
.details-panel__description__paragraph__line:nth-of-type(2), .details-panel__description__paragraph__line:nth-of-type(5) {
  width: 90%;
}
.details-panel__description__paragraph__line:nth-of-type(3) {
  width: 96%;
}
.details-panel__description__paragraph__line:nth-of-type(4) {
  width: 99%;
}
.details-panel__description__paragraph__line:nth-of-type(6) {
  width: 29%;
}

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

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

.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: #F35454;
}
.progress-bar.yellow {
  background-color: #FFD24A;
}
.progress-bar.green {
  background-color: #00D395;
}

.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 #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
  color: #9669ED;
}
.proposal__content__description__details__tag--passed {
  border-color: #00D395;
  color: #00D395;
}
.proposal__content__description__details__tag--not-passed {
  border-color: #657786;
  color: #657786;
}
.proposal__content__description__details__tag--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1.375rem;
}
.proposal__content__description__details__tag--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #9669ED;
}
.proposal__content__description__details__text__proposal-id--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 1.125rem;
}
.proposal__content__description__details__text__proposal-id--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: 0.3125rem;
  height: 0.75rem;
  width: 8.5rem;
}
.proposal__content__description__details__text__time--loading--large {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.118) 18%, rgba(255, 255, 255, 0.1) 33%);
  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: #00D395;
}
.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: #00D395;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: #00D395;
}
.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: #00D395;
  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%;
  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: #00D395;
  color: #FFFFFF;
  border-color: #00D395;
}
.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;
}

#Proposal-Detail {
  padding-bottom: 10rem;
}
#Proposal-Detail section.hero {
  padding: 2.66rem 0 6.752rem;
  margin-bottom: -5.001rem;
}
#Proposal-Detail .proposal-details {
  min-height: 60.625rem;
}
@media (min-width: 60em) {
  #Proposal-Detail .votes-panel:first-child {
    padding-right: 0.625rem;
  }
  #Proposal-Detail .votes-panel:last-child {
    padding-left: 0.625rem;
  }
}
#Proposal-Detail .votes-panel__header {
  display: flex;
  flex-direction: column;
  padding-top: 1.33rem;
  padding-bottom: 1.33rem;
}
#Proposal-Detail .votes-panel__header__title-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#Proposal-Detail .votes-panel__header__title-bar h4 {
  line-height: 1;
}
#Proposal-Detail .votes-panel__header__title-bar__percent--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 1rem;
  width: 2rem;
}
#Proposal-Detail .votes-panel__header__vote-bar {
  margin-top: 0.9rem;
  margin-bottom: 1px;
  width: 100%;
  height: 4px;
  background-color: #f1f3f5;
  border-radius: 4px;
}
#Proposal-Detail .votes-panel__header__vote-bar__fill {
  height: 4px;
  border-radius: 4px;
}
#Proposal-Detail .votes-panel__header__vote-bar__fill--for {
  background-color: #00D395;
}
#Proposal-Detail .votes-panel__header__vote-bar__fill--against {
  background-color: #DF5F67;
}
#Proposal-Detail .votes-panel__vote-row {
  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;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.33rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: none;
  justify-content: space-between;
}
#Proposal-Detail .votes-panel__vote-row:hover {
  border-left: 2px solid #00D395;
  color: #141E27;
}
#Proposal-Detail .votes-panel__vote-row:hover.votes-panel__vote-row--empty, #Proposal-Detail .votes-panel__vote-row:hover.votes-panel__vote-row--loading {
  border-left: 2px solid transparent;
}
#Proposal-Detail .votes-panel__vote-row__account--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 6.0625rem;
}
#Proposal-Detail .votes-panel__vote-row__account--empty {
  color: #CCD6DD;
}
#Proposal-Detail .votes-panel__vote-row__votes--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 3.625rem;
}
#Proposal-Detail .votes-panel__vote-row__votes--empty {
  color: #CCD6DD;
}
#Proposal-Detail .votes-panel__vote-row:nth-of-type(2) .votes-panel__vote-row__account--loading {
  width: 5.5rem;
}
#Proposal-Detail .votes-panel__vote-row:nth-of-type(2) .votes-panel__vote-row__votes--loading {
  width: 3rem;
}
#Proposal-Detail .votes-panel__vote-row:nth-of-type(3) .votes-panel__vote-row__account--loading {
  width: 6.5rem;
}
#Proposal-Detail .votes-panel__vote-row:nth-of-type(3) .votes-panel__vote-row__votes--loading {
  width: 2.5rem;
}
@media (min-width: 60em) {
  #Proposal-Detail .history-panel {
    padding-left: 0.625rem;
  }
}
#Proposal-Detail .history-panel__time-line {
  width: 100%;
  margin-top: 3rem;
  padding: 0;
  display: inline-block;
}
#Proposal-Detail .history-panel__time-line__point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
  border-left: 1px dashed rgba(101, 119, 134, 0.3);
  margin: auto;
  margin-left: 2.937rem;
  margin-right: 2.937rem;
  min-height: 50px;
  padding: 0 0 1.5625rem 2rem;
  position: relative;
}
#Proposal-Detail .history-panel__time-line__point--active {
  border-left: 1px dashed rgba(0, 211, 149, 0.3);
}
#Proposal-Detail .history-panel__time-line__point--active::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #00D395;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  left: -12px;
  top: -2px;
}
#Proposal-Detail .history-panel__time-line__point--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);
  left: -2px;
  top: -5px;
}
#Proposal-Detail .history-panel__time-line__point--inactive-succeeded::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  left: -12px;
  top: -2px;
}
#Proposal-Detail .history-panel__time-line__point--inactive-succeeded::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);
  left: -2px;
  top: -5px;
}
#Proposal-Detail .history-panel__time-line__point--failed::before {
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #657786;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  left: -12px;
  top: -2px;
}
#Proposal-Detail .history-panel__time-line__point--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;
  left: -5px;
  top: -7px;
}
#Proposal-Detail .history-panel__time-line__point--loading::before {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  position: absolute;
  transform: translateY(-50%);
  content: " ";
  border-radius: 50%;
  background: #f6f6f6;
  height: 24px;
  width: 24px;
  background-size: 100% 100%;
  left: -12px;
  top: -2px;
}
#Proposal-Detail .history-panel__time-line__point:last-child {
  border-left: 0;
}
#Proposal-Detail .history-panel__time-line__point__content {
  margin-top: -2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media (min-width: 60em) {
  #Proposal-Detail .history-panel__time-line__point__content {
    margin-top: -1.5rem;
  }
}
#Proposal-Detail .history-panel__time-line__point__title {
  font-size: 0.875rem;
  color: #070A0E;
}
#Proposal-Detail .history-panel__time-line__point__title--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 4rem;
}
#Proposal-Detail .history-panel__time-line__point__timestamp {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #AAB8C1;
}
#Proposal-Detail .history-panel__time-line__point__timestamp--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.75rem;
  width: 9.5rem;
}
#Proposal-Detail .proposer-pane {
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0.75rem;
  box-shadow: 0px 2.33558px 7.00674px rgba(0, 0, 0, 0.06);
  border-radius: 4.67116px;
  text-transform: none;
}
#Proposal-Detail .proposer-pane__details {
  align-self: center;
  display: flex;
  flex-direction: column;
  margin-left: 0.625rem;
  justify-content: center;
}
#Proposal-Detail .proposer-pane__details__display-name {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: normal;
  letter-spacing: normal;
  margin-bottom: 3px;
}
#Proposal-Detail .proposer-pane__details__display-name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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;
  width: 5.5rem;
}
#Proposal-Detail .proposer-pane__details__address {
  margin-top: 3px;
  color: #657786;
  font-size: 0.875rem;
  font-weight: normal;
  letter-spacing: normal;
}
#Proposal-Detail .proposer-pane__details__address--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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;
  width: 6rem;
}
#Proposal-Detail .modal .container {
  margin-top: 1.33rem;
  max-height: 80%;
  overflow-y: scroll;
  min-width: 40em;
}
@media (max-width: 40em) {
  #Proposal-Detail .modal .container {
    width: 95%;
    min-width: 0;
  }
}

:root {
  --market-card-width: 17.5rem;
  --market-card-height: 7.75rem;
  --sliding-time: 30s;
}

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

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

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

.arrow {
  width: 17px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/icn-arrow.svg);
  margin-right: 5px;
}
.arrow.big {
  width: 34px;
  height: 32px;
  background-position: center;
  background-size: 100%;
  background-image: url(../images/icn-build-arrows.svg);
  transition: all 0.2s ease-in-out;
}
.arrow.big.green {
  background-image: url(../images/icn-build-arrows-green.svg);
}
:hover > .arrow.big, .arrow.big:hover {
  background-image: url(../images/icn-build-arrows-green.svg);
  transform: translateX(5px);
}

#supply,
#develop {
  padding: 6rem 0;
}

#landing-overview {
  padding: 0;
  background: #070A0E;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#landing-overview.light {
  padding-bottom: 67px;
  background: #FFFFFF;
}
#landing-overview.light h2 {
  color: #141E27;
}
#landing-overview.light h3 {
  color: #141E27;
}
#landing-overview.light h4 {
  color: #141E27;
}
#landing-overview.light p {
  color: #657786;
}
#landing-overview.light .we-are-compound {
  margin-top: 7.5rem;
}
#landing-overview.light .we-are-compound h2 {
  margin-top: 10px;
}
#landing-overview .container-full {
  width: 100%;
}
#landing-overview .compound-data {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 4.875rem;
  padding-left: 0em;
  padding-bottom: 4.875rem;
}
#landing-overview .compound-data .header-line {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#landing-overview .compound-data h1 {
  color: #FFFFFF;
  font-size: 3rem;
  font-weight: 600;
  line-height: 4.0625rem;
  text-align: center;
  margin: 0;
}
#landing-overview .compound-data h1 .totals {
  display: inline-block;
  font-style: medium;
  font-weight: 700;
  color: #00D395;
}
#landing-overview .compound-data h1 .totals--debt {
  color: #9669ED;
}
@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}
#landing-overview .compound-data .market-container {
  width: 100vw;
  overflow: hidden;
  margin: 0 auto;
  padding: 2.5rem 0 0 0;
}
#landing-overview .compound-data .market-container .market-carousel {
  display: flex;
}
#landing-overview .compound-data .market-container .market-carousel .market-panels {
  display: flex;
  gap: 1.25rem;
  animation: carousel var(--sliding-time) linear infinite;
}
#landing-overview .compound-data .market-container .market-carousel .market-panels .market-panel {
  min-width: var(--market-card-width);
}
@media (max-width: 40em) {
  #landing-overview .compound-data .market-container .market-carousel .market-panels {
    animation: none;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 0.5rem;
  }
}
@media (max-width: 40em) {
  #landing-overview .compound-data .market-container .market-carousel .market-panel {
    min-width: 100vw;
  }
  #landing-overview .compound-data .market-container .market-carousel .market-panels + .market-panels {
    display: none;
  }
}
@media (min-width: 2380px) {
  #landing-overview .compound-data .market-container .market-carousel .market-panels {
    animation: none;
    margin: 0 auto;
  }
  #landing-overview .compound-data .market-container .market-carousel .market-panels + .market-panels {
    display: none;
  }
}
#landing-overview .compound-data .market-container .market-carousel .market-panels + .market-panels {
  margin-left: 1.25rem;
}
#landing-overview .compound-data .market-container .market-carousel:hover .market-panels {
  animation-play-state: paused;
}
#landing-overview .compound-data .market-container .market-carousel .loading-market-panel {
  height: 11.3rem;
}
#landing-overview .compound-data .market-container .market-carousel::-webkit-scrollbar {
  display: none;
}
#landing-overview .compound-data .market-container .mask {
  z-index: 1;
  position: relative;
  pointer-events: none;
  top: calc(-1 * 2 * var(--market-card-height));
  width: 100vw;
  height: calc(2 * var(--market-card-height));
  flex-shrink: 0;
  background: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 8.32%, rgba(0, 0, 0, 0) 91.51%, black 100%);
}
#landing-overview .digit {
  width: 0.601em;
}
#landing-overview .digit.comma {
  width: unset;
  overflow: visible;
  padding: 0;
}
#landing-overview .digit-holder {
  overflow: inherit;
}
#landing-overview #dot-grid {
  display: block;
  width: calc(100% - 2.66rem);
  height: 100%;
  background-image: url("../images/pattern-large-dots.svg");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  z-index: -1;
}
@media (max-width: 40em) {
  #landing-overview .compound-data {
    margin-top: 3rem;
  }
  #landing-overview .compound-data h1 {
    font-size: 2rem;
  }
  #landing-overview .compound-data .digit {
    padding: 0;
  }
  #landing-overview #dot-grid {
    background-size: contain;
    width: 26em;
  }
}

#try-compound {
  padding: 0;
  padding-bottom: 90px;
  background: #F9FAFB;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#try-compound h2 {
  color: #141E27;
}
#try-compound h3 {
  color: #141E27;
}
#try-compound h4 {
  color: #141E27;
}
#try-compound p {
  color: #657786;
}
#try-compound .try-compound {
  width: 100%;
}
#try-compound .try-compound__header {
  margin-top: 109px;
}
#try-compound h4 {
  margin-bottom: 0px;
}
#try-compound p {
  margin-bottom: 0px;
}
#try-compound a {
  font-family: "Haas Grot Text R";
  text-transform: none;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
}
#try-compound a:hover {
  text-decoration: none;
}
#try-compound .legacy-panel {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 32px 14px 20px 32px;
  border-style: none;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  transition: box-shadow 0.3s ease-in-out;
}
@media (min-width: 40em) {
  #try-compound .legacy-panel {
    height: 260px;
  }
}
#try-compound .legacy-panel:hover {
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.08);
}
#try-compound .legacy-panel:hover #arrow {
  opacity: 1;
}
#try-compound .legacy-panel:hover .small {
  opacity: 1;
}
#try-compound .projects {
  margin-top: 60px;
  width: 100%;
}
#try-compound .projects .carousel-inner {
  overflow: visible;
}
#try-compound .projects__carousel {
  margin-top: 2.1875rem;
  width: 100%;
  min-height: 52.75rem;
}
#try-compound .projects__carousel__slide {
  min-height: 52.75rem;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.6s, opacity 0.6s linear;
}
#try-compound .projects__carousel__slide--active {
  visibility: visible;
  opacity: 1;
}
#try-compound .icon {
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
#try-compound .icon--anchorage {
  background-image: url(../images/anchorage.jpg);
}
#try-compound .icon--ankr {
  background-image: url(../images/ankr.svg);
}
#try-compound .icon--argent {
  background-image: url(../images/argent.svg);
}
#try-compound .icon--binance {
  background-image: url(../images/binance.svg);
}
#try-compound .icon--bitgo {
  background-image: url(../images/bitgo.svg);
}
#try-compound .icon--bprotocl {
  background-image: url(../images/b-protocol.svg);
}
#try-compound .icon--coinbase {
  background-image: url(../images/coinbase-wallet.svg);
}
#try-compound .icon--coinbase-custody {
  background-image: url(../images/coinbase-custody.svg);
}
#try-compound .icon--cointracker {
  background-image: url(../images/cointracker.svg);
}
#try-compound .icon--cryptotax {
  background-image: url(../images/crypotaxtools.svg);
}
#try-compound .icon--defi-saver {
  background-image: url(../images/defi-saver.svg);
}
#try-compound .icon--ledger {
  background-image: url(../images/ledger.svg);
}
#try-compound .icon--crypto-dot-com {
  background-image: url(../images/crypto-dot-com.svg);
}
#try-compound .icon--eidoo {
  background-image: url(../images/eidoo.png);
}
#try-compound .icon--enzyme {
  background-image: url(../images/enzyme.svg);
}
#try-compound .icon--exodus {
  background-image: url(../images/exodus.svg);
}
#try-compound .icon--fireblocks {
  background-image: url(../images/fireblocks.svg);
}
#try-compound .icon--huobi {
  background-image: url(../images/huobi-wallet.svg);
}
#try-compound .icon--imToken {
  background-image: url(../images/imToken.svg);
}
#try-compound .icon--instadapp {
  background-image: url(../images/instadapp.svg);
}
#try-compound .icon--linen {
  background-image: url(../images/linen.svg);
}
#try-compound .icon--compound-education {
  background-image: url(../images/compound-education.svg);
}
#try-compound .icon--matrixport {
  background-image: url(../images/matrixport.svg);
}
#try-compound .icon--okx {
  background-image: url(../images/okx.svg);
}
#try-compound .icon--pool-together {
  background-image: url(../images/pool-together.svg);
}
#try-compound .icon--comp-vote {
  background-image: url(../images/comp-vote.svg);
}
#try-compound .icon--tokentax {
  background-image: url(../images/tokentax.svg);
}
#try-compound .icon--zapper {
  background-image: url(../images/zapper.png);
}
#try-compound .icon--zerion {
  background-image: url(../images/zerion.svg);
}
#try-compound .project-card-header {
  margin-top: 1.875rem;
  margin-bottom: 10px;
}
#try-compound .project-card-description {
  margin-right: 24px;
}
#try-compound .project-card-try {
  margin-top: auto;
  align-items: center;
  vertical-align: middle;
  margin-top: 11px;
  display: flex;
}
#try-compound .project-card-try #arrow {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#try-compound .project-card-try .small {
  flex-grow: 1;
  color: #00D395;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
}
@media (max-width: 40em) {
  #try-compound #dot-grid-left {
    top: auto;
    bottom: -50px;
    left: -150px;
  }
  #try-compound #dot-grid-right {
    top: 244px;
    right: -126px;
  }
}

#security-home {
  padding-top: 109px;
  padding-bottom: 45px;
  background: #070A0E;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#security-home .call-to-action {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#security-home .call-to-action a {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#security-home .call-to-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#security-home .call-to-action:hover a {
  border-bottom: 1px solid #00D395;
}
#security-home .call-to-action:hover #arrow {
  transform: translateX(5px);
}
#security-home label {
  margin: 0;
  color: #657786;
}
#security-home h2 {
  color: #F9FAFB;
}
#security-home .container-large {
  width: 82em;
}
#security-home .summary {
  margin-top: 7px;
  padding-right: 170px;
}
#security-home .audits {
  margin-top: 3.75rem;
}
#security-home .audits .security-panel__image {
  margin-bottom: 3rem;
  transform: translateY(20%);
}
#security-home .audits__bug-bounty {
  width: 100%;
  height: 100%;
  display: flex;
}
#security-home .audits__bug-bounty__image-section {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
}
#security-home .audits__bug-bounty__image-section .security-panel__image {
  margin-bottom: 0;
  transform: translateY(0);
}
#security-home .audits__bug-bounty__text-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100%;
  width: 50%;
  padding: 1.875rem;
}
#security-home .audits__bug-bounty__text-section__bounty {
  display: flex;
  margin-bottom: 2.3rem;
}
#security-home .audits__bug-bounty__text-section__bounty__value {
  margin: 0 0.2rem;
}
#security-home .audits__bug-bounty__text-section__bounty p {
  font-size: 0.75rem;
  color: #FFFFFF;
}
#security-home .audits__bug-bounty__text-section__bounty h2 {
  color: #FFFFFF;
}
#security-home .tester-view {
  display: flex;
  flex-direction: column;
  height: 11.375rem;
  background-color: transparent;
  color: #657786;
  justify-content: flex-end;
  align-items: center;
  padding: 1.875rem;
}
#security-home .background-view {
  height: 11.375rem;
  background-color: #121b23;
  width: 100%;
}
#security-home .security-panel {
  margin-bottom: 1.33rem;
}
#security-home .security-panel__content {
  display: flex;
  flex-direction: column;
  height: 11.375rem;
  background-color: transparent;
  color: #657786;
  justify-content: flex-end;
  align-items: center;
  padding: 1.875rem;
}
#security-home .security-panel__content--bug-bounty {
  padding: 0;
  width: 100%;
}
#security-home .security-panel__background {
  background-color: #121b23;
  height: 11.375rem;
  width: 100%;
}
#security-home .security-panel__image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  align-self: center;
}
#security-home .security-panel__image--bug-bounty {
  width: 95%;
  height: 22.435625rem;
  background-size: cover;
  background-image: url(../images/bug-bounty-illo.svg);
}
#security-home .security-panel__image--oz {
  width: 10.625rem;
  height: 1.6875rem;
  background-image: url(../images/oz-logo.svg);
}
#security-home .security-panel__image--tob {
  width: 5.5625rem;
  height: 3.13375rem;
  background-image: url(../images/logo-trail-of-bits.svg);
}
#security-home .security-panel__image--certora {
  width: 8.879375rem;
  height: 2.734375rem;
  background-image: url(../images/certora.svg);
}
#security-home .security-panel__image--gauntlet {
  width: 5.36875rem;
  height: 5.36875rem;
  background-image: url(../images/gauntlet.svg);
}

#cToken-overview {
  background-color: #FFFFFF;
}
#cToken-overview #pattern-header {
  height: 32.5rem;
  margin-top: -4rem;
  background-image: url("../images/pattern-header.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#cToken-overview #cDai {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 8.143rem;
  height: 8.143rem;
  background-image: url("../images/ctoken_dai_product.svg");
  left: 9%;
  top: 21.66rem;
  animation: float 5.5s ease-in-out infinite;
  animation-delay: 0.1s;
}
#cToken-overview #cEth {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 13.629rem;
  height: 13.629rem;
  background-image: url("../images/ctoken_eth_product_1.svg");
  left: 50%;
  top: 13.2rem;
  margin-left: -6.811rem;
  animation: float 6s ease-in-out infinite;
  animation-delay: 0.3s;
}
#cToken-overview #cUsdt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 9.143rem;
  height: 9.143rem;
  background-image: url("../images/ctoken_usdt_product.svg");
  left: 78%;
  top: 16rem;
  animation: float 5s ease-in-out infinite;
  animation-delay: 0.5s;
}
#cToken-overview #cSai {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 8.143rem;
  height: 8.143rem;
  background-image: url("../images/ctoken_sai_product.svg");
  left: 9%;
  top: 27.66rem;
  animation: float 5.5s ease-in-out infinite;
  animation-delay: 0.1s;
}
#cToken-overview #cUsdc {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 6.943rem;
  height: 6.943rem;
  background-image: url("../images/ctoken_usdc_product_1.svg");
  left: 62%;
  top: 24rem;
  animation: float 4.5s ease-in-out infinite;
  animation-delay: 0.4s;
}
#cToken-overview #cWbtc {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  width: 5.943rem;
  height: 5.943rem;
  background-image: url("../images/ctoken_wbtc_product_1.svg");
  left: 25.7%;
  top: 18rem;
  animation: float 4s ease-in-out infinite;
  animation-delay: 0.25s;
}
#cToken-overview #cZrx {
  width: 5.943rem;
  height: 5.943rem;
  background-image: url("../images/ctoken_zrx_product_1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  left: 64%;
  top: 14rem;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.08);
  animation: float 6.2s ease-in infinite;
  animation-delay: 0.35s;
}

#cToken-info {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}
#cToken-info .faq-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;
}
#cToken-info .faq-item .faq-item-header {
  padding: 2.8125rem 0 2.8125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#cToken-info .faq-item .faq-item-text {
  flex-grow: 1;
  margin-bottom: 0;
  color: #070A0E;
}
#cToken-info .faq-item .faq-item-description {
  margin-bottom: 2.8125rem;
  padding-right: 32px;
  color: #AAB8C1;
  display: none;
  position: relative;
}
#cToken-info .faq-item .faq-item-description.active {
  display: block;
}
#cToken-info .faq-item .faq-item-description p:not(:first-child) {
  margin-top: 0.7rem;
}
#cToken-info .faq-item .faq-item-description a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
#cToken-info .faq-item .faq-item-description a:hover {
  border-bottom: 1px solid #00D395;
}
#cToken-info .faq-item .faq-item-description ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}
#cToken-info .faq-item .faq-item-description ul li {
  margin-bottom: 1rem;
  padding-left: 1.1rem;
}
#cToken-info .faq-item .faq-item-description ul li a {
  border-bottom: 1px solid transparent;
  color: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
#cToken-info .faq-item .faq-item-description ul li a:hover {
  border-bottom: 1px solid #00D395;
}
#cToken-info .faq-item .faq-item-description ul li:last-child {
  margin-bottom: 0;
}
#cToken-info .faq-item .faq-item-description ul li::before {
  content: "•  ";
  color: #00D395;
  position: absolute;
  left: 0;
  margin-top: 0.26rem;
}
#cToken-info .faq-item .faq-item-description ol {
  margin-top: 10px;
}
#cToken-info .faq-item .faq-item-description ol li::before {
  content: "";
}
#cToken-info .faq-item:hover {
  border-bottom: 1px solid #00D395;
}
#cToken-info .plus {
  height: 2rem;
  width: 2rem;
  position: relative;
}
#cToken-info .plus span {
  position: absolute;
  transition: 0.3s;
  background: #00D395;
}
#cToken-info .plus span:first-of-type {
  top: 0%;
  bottom: 0%;
  width: 10%;
  left: 45%;
}
#cToken-info .plus span:first-of-type.active {
  transform: rotate(90deg);
}
#cToken-info .plus span:last-of-type {
  left: 0%;
  right: 0%;
  height: 10%;
  top: 45%;
}
#cToken-info .plus span:last-of-type.active {
  left: 50%;
  right: 50%;
}
#cToken-info .plus.active span:first-of-type {
  transform: rotate(90deg);
}
#cToken-info .plus.active span:last-of-type {
  left: 50%;
  right: 50%;
}

#definitions .function,
#error-code .function,
.api .function,
.contract .function {
  margin-top: 2rem;
}
#definitions .function ul,
#error-code .function ul,
.api .function ul,
.contract .function ul {
  line-height: 1.5;
}
#definitions .function ul b,
#error-code .function ul b,
.api .function ul b,
.contract .function ul b {
  color: #141E27;
}
#definitions .function code + p,
#error-code .function code + p,
.api .function code + p,
.contract .function code + p {
  margin-top: 1rem;
}

.contract {
  display: flex;
  align-items: center;
  min-width: 255px;
}
.contract .token-symbol {
  margin-left: 0.5rem;
  min-width: 3.4375rem;
}

.token-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.75rem;
  padding: 0 0.9rem;
  font-size: 10px;
  width: 61px;
  height: 22px;
  border-radius: 100px;
  background-color: #0DAEF3;
  color: #FFFFFF;
  margin-bottom: 1px;
}

span.payable {
  content: "payable";
  margin-left: 0.5rem;
  border-radius: 3px;
  border: 1px solid #0DAEF3;
  color: #0DAEF3;
  padding: 0.3rem;
  font-size: 12px;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

.networks-tab-group {
  margin-top: 1.5rem;
}

.networks-carousel {
  margin-top: 1.125rem;
  margin-bottom: 1.125rem;
  border: 1px solid #CCD6DD;
}

.failure-info-header {
  padding-top: 4rem;
}

.contract-address {
  display: flex;
  align-items: center;
}
.contract-address__value {
  min-width: 220px;
}
.contract-address .line-icon {
  margin-left: 1rem;
}
.contract-address a.external-link {
  border-bottom: none;
  padding-bottom: 0;
  line-height: 1rem;
  height: 17px;
}
.contract-address a.external-link:hover {
  border-bottom: none;
}

table.networks-table {
  padding: 2.0625rem;
}
table.networks-table th,
table.networks-table td {
  padding: 1rem 0;
}
table.networks-table th:not(:first-child),
table.networks-table td:not(:first-child) {
  padding-left: 1rem;
}
table.networks-table th:last-child,
table.networks-table td:last-child {
  padding-left: 4rem;
  width: 100%;
}
table.networks-table td:last-child {
  color: #141E27;
}
table.networks-table thead tr {
  border-bottom: 1px solid #CCD6DD;
}
table.networks-table tr {
  border-bottom: none;
}
table.networks-table tr:last-child td {
  padding-bottom: 0;
}
table.token-decimal-table {
  padding-top: 1.375rem;
  line-height: 0.875rem;
  color: #141E27;
  max-width: 80%;
  margin: auto;
  text-align: center;
}
table.token-decimal-table th,
table.token-decimal-table td {
  width: 25%;
}
@media (min-width: 40em) {
  table.token-decimal-table th,
table.token-decimal-table td {
    font-size: 12px;
  }
}
@media (min-width: 60em) {
  table.token-decimal-table th,
table.token-decimal-table td {
    font-size: 14px;
  }
}
@media (min-width: 82em) {
  table.token-decimal-table th,
table.token-decimal-table td {
    font-size: 15px;
  }
}
table.token-decimal-table td:last-child {
  color: #141E27;
}
table.costs-table {
  margin-top: 3.375rem;
  line-height: 0.875rem;
  padding: 0;
}
table.costs-table th,
table.costs-table td {
  padding: 1.15rem 0;
}
table.costs-table th:first-child,
table.costs-table td:first-child {
  min-width: 15em;
}
table.costs-table th:last-child,
table.costs-table td:last-child {
  width: 100%;
}
table.costs-table td:last-child {
  color: #141E27;
}
table.definitions-table {
  line-height: 1.5rem;
  padding: 0;
}
table.definitions-table th,
table.definitions-table td {
  padding: 1rem 0;
}
table.definitions-table tr > td:first-child {
  min-width: 15em;
}
table.definitions-table tr > td:last-child {
  color: #657786;
}
@media (min-width: 40em) {
  table.definitions-table tr > td:last-child {
    padding-right: 8rem;
  }
}
table.key-events-table tr > td:first-child {
  max-width: 420px;
  padding-right: 6rem;
}
table.key-events-table tr > td:last-child {
  color: #657786;
  padding-right: 10rem;
}
table.errors td:first-child {
  min-width: 4em;
}
table.errors td:nth-child(2) {
  min-width: 20rem;
}
table.failure-infos td:first-child {
  min-width: 4em;
}
table.failure-infos td:nth-child(2) {
  width: 100%;
}
table.api-table td:first-child {
  min-width: 4em;
}
table.api-table td:nth-child(2) {
  padding-left: 1.5rem;
  min-width: 19rem;
}
table.api-table td:last-child {
  padding-right: 2rem;
}
table.api-table th:nth-child(2) {
  padding-left: 1.5rem;
}
table.api-table pre {
  background-color: #F9FAFB;
}
table.api-table pre p {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: small;
  color: #141E27;
}

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

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

#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 #00D395;
  color: #141E27;
}
.liquidate-container .account.active {
  background: #9669ED;
  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: #00D395;
  border-color: #00D395;
}
.connecting-ring--for-borrowing {
  background: #9669ED;
  border-color: #9669ED;
}
.connecting-ring--error {
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100px;
  background-color: transparent;
  border-color: transparent;
  background-image: url(../images/icn-ledger-error-no-bkg.svg);
}

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

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

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

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

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

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.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: #00D395;
  border-color: #00D395;
}
.transactions .status.accent-bg.borrow {
  background: #9669ED;
  border-color: #9669ED;
}
.transactions .status.supply {
  background-image: url(../images/icon_arrow_forward.png);
  border-color: #00D395;
}
.transactions .status.withdraw {
  background-image: url(../images/icon_arrow_back.png);
}
.transactions .status.borrow {
  background-image: url(../images/icon_arrow_back.png);
  border-color: #9669ED;
}
.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("../fonts/NeueHaasGrotDispRound-55Roman.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Disp R";
  src: url("../fonts/NeueHaasGrotDispRound-65Medium.otf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("../fonts/NeueHaasGrotTextRound-55Roman.otf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("../fonts/NeueHaasGrotTextRound-65Medium.otf");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Haas Grot Text R";
  src: url("../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;
  hyphens: none;
}

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

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

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

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

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

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

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

a:focus {
  outline: 0;
}

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

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

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

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

.null {
  color: #CFD8DC;
}

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

.italic {
  font-style: italic;
}

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

.elmsh-hl {
  background: #fffbdd;
}

.elmsh-add {
  background: #eaffea;
}

.elmsh-del {
  background: #ffecec;
}

.elmsh-comm {
  color: #969896;
}

.elmsh1 {
  color: #0DAEF3;
}

.elmsh2 {
  color: #0DAEF3;
}

.elmsh3 {
  color: #9669ED;
}

.elmsh4 {
  color: #9669ED;
}

.elmsh5 {
  color: #00D395;
}

.elmsh6 {
  color: #005cc5;
}

.elmsh7 {
  color: #070A0E;
}

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

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

.market-panel {
  background: linear-gradient(180deg, #141e27 0%, rgba(20, 30, 39, 0.45) 100%);
  border: 1px solid #070A0E;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  width: 16.625rem;
  /* Prevents market panel title wrapping around on smaller screens */
}
@media (max-width: 60em) {
  .market-panel {
    width: 20.5rem;
  }
}
.market-panel__info {
  padding: 1.125rem;
}
.market-panel__market {
  align-items: center;
  display: flex;
  color: #FFFFFF;
}
.market-panel__market p {
  font-weight: 700;
  line-height: 1;
  margin-left: 0.75rem;
}
.market-panel__market .icon {
  height: 2.25rem;
  width: 2.25rem;
  min-height: 2.25rem;
  min-width: 2.25rem;
}
.market-panel__market .icon + .icon {
  margin-left: -0.25rem;
}
.market-panel__market__icon + .icon {
  margin-left: -0.25rem;
}
.market-panel__market__icon {
  align-items: center;
  background-color: #00D395;
  border-radius: 50%;
  color: #070A0E;
  display: flex;
  font-weight: 700;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
}
.market-panel__market__network {
  color: #657786;
}
.market-panel__bar-holder {
  align-items: center;
  display: flex;
  margin-top: 0.875rem;
  gap: 0.625rem;
}
.market-panel__bar-holder__text {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  width: 4.2rem;
  text-align: right;
}
.market-panel__bar-holder--collateral {
  padding: 0;
  color: #00D395;
}
.market-panel__bar-holder--collateral .bar__fill {
  background-color: #00D395;
}
.market-panel__bar-holder--debt {
  color: #9669ED;
}
.market-panel__bar-holder--debt .bar__fill {
  background-color: #9669ED;
}
.market-panel .bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #2a3339;
  border-radius: 4px;
}
.market-panel .bar__fill {
  height: 4px;
  border-radius: 4px;
}
.market-panel__buttons {
  border-top: 1px solid #070A0E;
  display: flex;
}
.market-panel__buttons__divider {
  background-color: #070A0E;
  width: 1px;
}
.market-panel__button {
  align-items: center;
  background-color: transparent;
  border: none;
  color: #AAB8C1;
  display: flex;
  justify-content: center;
  letter-spacing: normal;
  font-weight: 700;
  font-size: 0.75rem;
  height: 3.125rem;
  text-transform: capitalize;
  width: 50%;
}
.market-panel__button:hover {
  background-color: #141E27;
  color: #00D395;
}

.gov-profile-image {
  display: inline-block;
  position: relative;
  height: 2.75rem;
  width: 2.75rem;
}
.gov-profile-image--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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");
}

#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 #F35454;
}
#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::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::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::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::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;
}

#Comp .hero {
  padding: 6.035rem 0 7.315rem;
  margin-bottom: -3.81rem;
}
#Comp .hero .container .row {
  margin: 0;
}
#Comp .hero .container .row [class*=col]:first-child {
  padding-left: 0;
}
#Comp .hero .container .row [class*=col]:last-child {
  padding-right: 0;
}
#Comp .comp-details {
  min-height: 40.625rem;
}
#Comp .comp-header {
  display: flex;
  align-items: center;
}
#Comp .comp-header__img {
  height: 3.03125rem;
  width: 3.03125rem;
  border: 0.384098px solid #141e27;
  border-radius: 50%;
}
#Comp .comp-header__img--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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%);
}
#Comp .comp-header__details {
  display: flex;
  flex-direction: column;
  margin-left: 0.625rem;
  justify-content: center;
}
#Comp .comp-header__details__display-name {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 700;
}
#Comp .comp-header__details__display-name--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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: 12rem;
}
#Comp .comp-header__details__display-name .line-icon {
  margin-left: 0.625rem;
}
#Comp .comp-header__details__address {
  margin-top: 0.325rem;
  color: #657786;
  font-size: 0.875rem;
  font-weight: 600;
}
#Comp .comp-header__details__address--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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.1875rem;
  width: 22.875rem;
}
#Comp .comp-header__details__address .line-icon {
  margin-left: 0.625rem;
}
#Comp .comp-dist-view {
  width: 100%;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}
@media (min-width: 60em) {
  #Comp .comp-dist-view {
    margin-top: 0;
  }
}
#Comp .comp-dist-view__details {
  display: flex;
  justify-content: space-between;
}
#Comp .comp-dist-view__details__group {
  display: flex;
  flex-direction: column;
}
#Comp .comp-dist-view__details__group__label {
  color: #657786;
  font-size: 0.75rem;
  font-weight: 600;
}
#Comp .comp-dist-view__details__group__value {
  color: #FFFFFF;
  text-align: left;
}
#Comp .comp-dist-view__bar {
  margin-bottom: 1px;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 211, 149, 0.2);
  border-radius: 4px;
}
#Comp .comp-dist-view__bar__fill {
  height: 4px;
  border-radius: 4px;
  background-color: #00D395;
}
#Comp .comp-markets-panel .panel__labels > div:nth-child(6) {
  padding-right: 0;
}
#Comp .comp-markets-panel .panel__labels .comp-column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#Comp .comp-markets-panel .panel__labels .comp-column img:not(:last-child) {
  margin-right: 0.5rem;
}
#Comp .comp-markets-panel .panel__labels .comp-column label + img {
  margin-left: 0.5rem;
}
#Comp .comp-markets-panel .panel__labels .comp-column.mobile-hide {
  display: none;
}
@media (min-width: 40em) {
  #Comp .comp-markets-panel .panel__labels .comp-column.mobile-hide {
    display: flex;
  }
}
#Comp .faq-section {
  margin-top: 10rem;
}
#Comp .faq-section .faq-header {
  margin-top: 0.375rem;
  margin-bottom: 1.5rem;
  color: #070A0E;
}
#Comp .faq-section .call-to-action {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#Comp .faq-section .call-to-action a {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#Comp .faq-section .call-to-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#Comp .faq-section .call-to-action:hover a {
  border-bottom: 1px solid #00D395;
}
#Comp .faq-section .call-to-action:hover #arrow {
  transform: translateX(5px);
}
#Comp .faqs {
  margin-top: 6rem;
  padding-right: 1.5rem;
}
@media (min-width: 40em) {
  #Comp .faqs {
    margin-top: 0;
  }
}
@media (min-width: 60em) {
  #Comp .markets-panel {
    padding-left: 0.625rem;
  }
}
#Comp .markets-panel__market-row {
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.27rem 1.75rem;
  padding-left: 1.625rem;
  text-transform: none;
}
#Comp .markets-panel__market-row > div:first-child {
  padding-left: 0;
}
#Comp .markets-panel__market-row > div:last-child {
  padding-right: 0;
}
#Comp .markets-panel__market-row--empty {
  justify-content: center;
}
#Comp .markets-panel__market-row__market {
  display: flex;
  align-items: center;
}
#Comp .markets-panel__market-row__market__icon {
  border: 0;
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  min-height: 2.375rem;
  border-radius: 50%;
}
#Comp .markets-panel__market-row__market__icon--loading {
  background-image: none;
  border-radius: 50%;
}
#Comp .markets-panel__market-row__market__text {
  margin-left: 1.125rem;
}
#Comp .markets-panel__market-row__market__text--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 6rem;
}
@media (min-width: 60em) {
  #Comp .markets-panel__market-row__interest {
    padding-left: 1.75rem;
  }
}
#Comp .markets-panel__market-row__interest--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 0.875rem;
  width: 8.5rem;
  margin-left: auto;
}
#Comp .markets-panel__market-row__interest--empty {
  color: #CCD6DD;
  font-size: 0.875rem;
  line-height: 0.875rem;
}
#Comp .markets-panel__market-row__comp--empty {
  color: #CCD6DD;
  font-size: 0.875rem;
  line-height: 0.875rem;
  text-align: right;
}
#Comp .markets-panel__market-row__comp--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: auto;
  height: 0.875rem;
  width: 4rem;
}
#Comp .markets-panel__market-row__total-comp--empty {
  color: #CCD6DD;
  font-size: 0.875rem;
  line-height: 0.875rem;
  text-align: right;
}
#Comp .markets-panel__market-row__total-comp--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  margin-left: auto;
  height: 0.875rem;
  width: 4rem;
}
#Comp .markets-panel__market-row:nth-of-type(2) .transactions-panel__transaction-row__action--loading, #Comp .markets-panel__market-row:nth-of-type(4) .transactions-panel__transaction-row__action--loading {
  width: 7.0655rem;
}
#Comp .markets-panel__market-row:nth-of-type(2) .transactions-panel__transaction-row__time--loading, #Comp .markets-panel__market-row:nth-of-type(4) .transactions-panel__transaction-row__time--loading {
  width: 7.5rem;
}
#Comp .markets-panel__market-row:nth-of-type(2) .transactions-panel__transaction-row__delta--loading, #Comp .markets-panel__market-row:nth-of-type(4) .transactions-panel__transaction-row__delta--loading {
  width: 4.6875rem;
}

#Governance {
  padding-top: 45px;
  padding-bottom: 100px;
  background: #F9FAFB;
}
#Governance .governance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}
#Governance .governance-header h2 {
  margin-bottom: 0;
}
#Governance .governance-header__button {
  height: 3.5rem;
}
#Governance .vote-action-section {
  display: flex;
}
#Governance .open-vote-modal {
  margin-top: 1rem;
  color: #00D395;
  align-self: center;
  border-color: #00D395;
  width: 12.5rem;
}
#Governance .vote-modal .vote-actions {
  display: flex;
  justify-content: space-between;
}
#Governance .vote-modal .vote-actions__button {
  display: inline-block;
  border-radius: 3px;
  border-style: solid;
  padding: 1.2rem 1.6rem;
  text-align: center;
  min-width: 11rem;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s linear;
}
#Governance .vote-modal .vote-actions__button:not(:first-child) {
  margin-left: 1rem;
}
#Governance .vote-modal .vote-actions__button--for {
  background-color: #00D395;
}
#Governance .vote-modal .vote-actions__button--against {
  background-color: #DF5F67;
}
#Governance section {
  padding: 4rem 0 0 0;
}
#Governance .proposal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.8rem;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 3px rgba(16, 21, 24, 0.09);
  border-radius: 4px;
}
#Governance .proposal-card--empty {
  padding: 1rem;
  font-size: 0.875rem;
  color: #657786;
}
#Governance .proposal-card__vote-data {
  display: flex;
  align-items: center;
}
#Governance .proposal-card__vote-data:not(:first-child) {
  margin-top: 0.6875rem;
}
#Governance .proposal-card__vote-percent {
  margin-left: 1rem;
  text-align: right;
}
#Governance .proposal-card__vote-percent--for {
  color: #00D395;
}
#Governance .proposal-card__vote-percent--against {
  color: #DF5F67;
}
#Governance .proposal-card__vote-bar {
  width: 100%;
  height: 8px;
  background-color: #F1F3F5;
  border-radius: 8px;
  max-width: 12.5rem;
}
#Governance .proposal-card__vote-bar__fill {
  height: 8px;
  border-radius: 8px;
}
#Governance .proposal-card__vote-bar__fill--for {
  background-color: #00D395;
}
#Governance .proposal-card__vote-bar__fill--against {
  background-color: #DF5F67;
}
#Governance .proposal-card__action-row {
  width: 100%;
  border-top: 1px solid #CCD6DD;
  padding-top: 0.875rem;
}
#Governance .proposal-card__action-row:not(:last-child) {
  padding-bottom: 0.875rem;
}
#Governance .proposal-card__header {
  box-sizing: border-box;
  width: 100%;
}
#Governance .proposal-card__header-text {
  word-break: break-all;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #070A0E;
  margin: 0;
  max-width: 100%;
}
#Governance .proposal-card__subheader {
  display: inline-block;
  word-break: break-all;
  max-width: 100%;
  font-size: 0.875rem;
  margin-top: 0.626rem;
  color: #657786;
}
#Governance .proposal-card__action-subheader {
  display: inline-block;
  word-break: break-all;
  max-width: 100%;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  color: #657786;
}
#Governance .proposal-card__action-header {
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #070A0E;
  margin: 0;
  max-width: 100%;
}
#Governance .proposal-card__number {
  font-size: 0.875rem;
  color: #00D395;
  font-weight: 600;
}
#Governance .proposal-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 1;
}
#Governance .proposal-card:not(:first-child) {
  margin-top: 1.5rem;
}
#Governance .proposal-card__time {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  color: #00D395;
  font-size: 0.875rem;
  margin: 1.25rem 0;
  padding: 0;
}
#Governance .proposal-card__time > *:first-child {
  margin-right: 11px;
}
#Governance .proposal-card__data {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-content: center;
}
#Governance .proposal-card__data:not(:first-child) {
  padding-top: 0.6rem;
}
#Governance .proposal-card__data:not(:last-child) {
  padding-bottom: 0.6rem;
}
#Governance .proposal-card__data__label {
  flex: 1 1;
  font-size: 10px;
  line-height: 12px;
  color: #AAB8C1;
}
#Governance .proposal-card__data__value {
  word-break: break-all;
  text-align: right;
  font-size: 10px;
  line-height: 12px;
  color: #657786;
  max-width: 80%;
}

#Prices .call-to-action {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#Prices .call-to-action a {
  color: #00D395;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}
#Prices .call-to-action #arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}
#Prices .call-to-action:hover a {
  border-bottom: 1px solid #00D395;
}
#Prices .call-to-action:hover #arrow {
  transform: translateX(5px);
}
#Prices .hero {
  padding: 6.035rem 0 7.315rem;
  margin-bottom: -3.81rem;
}
#Prices .hero .header-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#Prices .hero .header-view__header-line {
  display: flex;
  align-items: center;
}
#Prices .hero .header-view__header-line a {
  margin-left: 0.75rem;
}
#Prices .hero .header-view__header {
  color: #FFFFFF;
  margin: 0;
}
#Prices .hero .header-view__subheader {
  margin-top: 1.5rem;
  color: #AAB8C1;
  max-width: 42rem;
  text-align: center;
}
#Prices .hero .header-view .call-to-action {
  margin-top: 1rem;
}
#Prices .prices-card {
  background-color: #141E27;
  box-shadow: 0px 2px 4px rgba(16, 21, 24, 0.05);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin-bottom: 1.25rem;
}
#Prices .prices-card__text-section {
  min-height: 5.0625rem;
}
#Prices .prices-card__text-section > *:not(:first-child) {
  margin-top: 0.75rem;
}
#Prices .prices-card__text {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1;
  margin: 0;
}
#Prices .prices-card__subtext-section {
  display: flex;
  margin-right: -1.25rem;
}
#Prices .prices-card__subtext-section .prices-card__text + .prices-card__subtext {
  align-self: flex-end;
  margin-bottom: 0.125rem;
  margin-left: 0.75rem;
}
#Prices .prices-card__subtext {
  color: #AAB8C1;
  font-weight: normal;
  font-size: 0.8125rem;
  line-height: 1;
  margin: 0;
}
#Prices .prices-card__subtext--red {
  color: #e17157;
}
#Prices .prices-card__subtext--green {
  color: #00D395;
}
#Prices .prices-card__icon {
  align-self: center;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  margin-top: 2rem;
}
#Prices .section-header {
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: 1.25rem;
}
#Prices .prices {
  background-color: #070A0E;
  padding-bottom: 4.5rem;
}
#Prices .reporters {
  background-color: #070A0E;
}
#Prices .faq-section {
  padding-top: 7rem;
  background-color: #070A0E;
}
#Prices .faq-section .faq-header {
  margin-top: 0.375rem;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
}
#Prices .faqs {
  margin-top: 6rem;
  padding-right: 1.5rem;
}
@media (min-width: 40em) {
  #Prices .faqs {
    margin-top: 0;
  }
}
#Prices.choose {
  background: #070A0E;
}
#Prices.choose .prices-card {
  height: 92%;
  cursor: pointer;
  border: 2px solid transparent;
  padding-bottom: 1rem;
}
#Prices.choose .prices-card.selectable:hover {
  border: solid 2px #F9FAFB;
}
#Prices.choose .prices-card.selectable.selected {
  border: solid 2px #00D395;
}
#Prices.choose .row {
  align-items: stretch;
}
#Prices.choose .prices-card__text-section {
  min-height: auto;
}
#Prices.choose .prices-card__icon {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#Prices.choose .prices-card__reporter-item {
  padding-top: 0.5rem;
}
#Prices.choose .prices-card__reporter-item__line {
  margin-top: 0.5rem;
  background-color: #070A0E;
  height: 1px;
  margin-left: -2.2rem;
  margin-right: -2.2rem;
}
#Prices.choose .prices-card__reporter-item [class*=col] {
  padding: 0;
}
#Prices.choose .prices-card__reporter-item:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
#Prices.choose .prices-card__reporter-item:last-of-type .prices-card__reporter-item__line {
  margin-top: 0;
  height: 0;
}
#Prices .transactions {
  background-color: #070A0E;
  padding-bottom: 4.5rem;
  color: #FFFFFF;
}

.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 {
  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 {
  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 {
  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 {
  animation: slide 2.5s linear;
}
@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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  background: linear-gradient(to right, rgba(20, 30, 39, 0.7) 8%, #141e27 18%, rgba(20, 30, 39, 0.7) 33%);
  height: 0.75rem;
  width: 2.1rem;
}
#Vote .vote__header__value--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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::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: #00D395;
}
#Vote .vote__modal__body__delegate-option:hover::after {
  transform: rotate(45deg) translate(5px, -5px);
  border-color: #00D395;
}
#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: #00D395;
  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: #00D395;
  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 #00D395;
}
#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::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: #00D395;
}
#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: #00D395;
  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: #00D395;
  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: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
#Vote .wallet-panel__data__row__setup-description a:hover {
  border-bottom: 1px solid #00D395;
}
#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: #00D395;
  font-family: "Haas Grot Text R";
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  padding-bottom: 0.02rem;
  margin: 0px;
  text-decoration: none;
  text-transform: none;
}
#Vote .wallet-panel__data__row__action a:hover {
  border-bottom: 1px solid #00D395;
}
#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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  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%;
  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: #00D395;
  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: #00D395;
}
#Vote .wallet-panel__data__row__vote-weight--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
}
#Vote .wallet-panel__data__row__button {
  margin-top: 1.875rem;
  letter-spacing: 0;
  line-height: 1;
  color: #00D395;
  background: none;
  border-color: #00D395;
  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: #00D395;
  border-color: #00D395;
  box-shadow: 0px 8px 16px rgba(17, 51, 85, 0.08);
}
#Vote .wallet-panel__data__row__button--loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 3.4rem;
  border-color: #f6f6f6;
}
#Vote .wallet-panel__data__row__button:hover {
  background-color: #00D395;
  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: #00D395;
}
#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%;
}

@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;
  }
}
.icon--USDCe,
.icon--USDbC {
  background-image: url(../images/asset_USDC_1.svg);
}

.icon--ETH {
  background-image: url(../images/asset_ETH.svg);
}

.icon--WETH {
  background-image: url(../images/asset_WETH.svg);
}

.icon--MATIC {
  background-image: url(../images/asset_MATIC.svg);
}

.icon--ARBITRUM {
  background-image: url(../images/asset_ARBITRUM.svg);
}

.icon--BASE {
  background-image: url(../images/asset_BASE.svg);
}

.icon--OPTIMISM {
  background-image: url(../images/asset_OPTIMISM.svg);
}

.icon--SCROLL {
  background-image: url(../images/asset_SCROLL.svg);
}

.icon--V2 {
  background-image: url(../images/asset_V2.svg);
}


/*# sourceMappingURL=landing.18cf64ad.chunk.css.map*/