* {
  caret-color: #05e6c4;

  --color-pt-gradient-purple: #4c249f;
  --color-pt-gradient-cyan: #17e1fd;
  --color-pt-gradient-magenta: #ff77e1;
  --color-pt-gradient-yellow: #ffed47;
}

.dark {
  /* Testing a new format */
  /* Importing colors into 'colors' in config */
  /* Rather than importing colors into each use (ex. background, text, etc) */

  --color-almost-transparent: rgba(255, 255, 255, 0.1);

  /* Old format */
  --color-bg-body: #21064e;
  --color-bg-card: #341762;
  --color-bg-card-selected: #43286e;
  --color-bg-card-purple: #4c249f;
  --color-bg-primary: #290b5a;
  --color-bg-secondary: #4c249f;
  --color-bg-tertiary: #493171;
  --color-bg-new-modal: #4c249f;
  --color-bg-default: #341762;
  --color-bg-darkened: #1a083a;
  --color-bg-input: #1a083a;
  --color-bg-inverse: #fff;
  --color-bg-inverse-purple: #fff;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-overlay-white: rgba(255, 255, 255, 0.438);
  --color-bg-black: #111;
  --color-bg-accent-grey-1: rgba(53, 240, 208, 0.1);
  --color-bg-accent-grey-2: #43286e;
  --color-bg-accent-grey-3: #bbb2ce;
  --color-bg-accent-grey-4: #341762;
  --color-bg-accent-grey-5: rgba(69, 101, 255, 0.4);
  --color-bg-accent-grey-6: rgba(53, 240, 208, 0.1);
  --color-bg-highlight-1: #35f0d0;
  --color-bg-highlight-2: #35f0d0;
  --color-bg-highlight-3: #401c94;
  --color-bg-highlight-4: #5af5db;
  --color-bg-highlight-5: #4c1fa0;
  --color-bg-highlight-6: #ff46ed;
  --color-bg-highlight-7: #c00c99;
  --color-bg-highlight-8: #2c0c85;
  --color-bg-highlight-9: #341762;
  --color-bg-new-btn: #35f0d0;
  --color-bg-new-btn-hover: #1ef7d6;
  --color-bg-raspberry: #49195c;
  --color-bg-functional-red: rgba(70, 22, 92, 0.75);
  --color-bg-warning-red: #ff6666;
  --color-bg-red: #e61b1b;
  --color-bg-green: #3ef3d4;
  --color-bg-orange-darkened: rgba(211, 120, 2, 0.171);
  --color-bg-orange: #ff9303;
  --color-bg-teal: #0ea3a4;
  --color-bg-purple: #401c94;
  --color-bg-light-purple-10: rgba(173, 153, 216, 0.1);
  --color-bg-light-purple-70: rgba(110, 77, 179, 1);

  --color-text-accent-1: #cdc5df;
  --color-text-accent-2: #cdc5df;
  --color-text-accent-3: #9f82d7;
  --color-text-accent-4: #9f82d7;
  --color-text-primary: #4c249f;
  --color-text-primary-soft: #6458af;
  --color-text-secondary: #4c249f;
  --color-text-tertiary: #493171;
  --color-text-default: #a472f7;
  --color-text-default-soft: #7458df;
  --color-text-darkened: #341762;
  --color-text-inverse: #fff;
  --color-text-inverse-purple: #fff;
  --color-text-match: #111;
  --color-text-match-purple: #341762;
  --color-text-black: #111;
  --color-text-highlight-1: #1ef7d6;
  --color-text-highlight-2: #35f0d0;
  --color-text-highlight-3: #55f1d7;
  --color-text-highlight-4: #55f1d7;
  --color-text-highlight-6: #ff46ed;
  --color-text-highlight-7: #c00c99;
  --color-text-highlight-9: #35f0d0;
  --color-text-raspberry: #49195c;
  --color-text-functional-red: #ff6666;
  --color-text-red: #e61b1b;
  --color-text-green: #5af5db;
  --color-text-orange: #ff9303;
  --color-text-yellow: #ffcc15;
  --color-text-teal: #049c9c;
  --color-text-purple: #401c94;

  --color-border-body: #290b5a;
  --color-border-accent-1: #bbb2ce;
  --color-border-accent-2: #bbb2ce;
  --color-border-accent-3: #4c249f;
  --color-border-accent-4: #341762;
  --color-border-primary: #3c1a79;
  --color-border-card: #341762;
  --color-border-secondary: #4c249f;
  --color-border-default: #a472f7;
  --color-border-inverse: #fff;
  --color-border-highlight-1: #35f0d0;
  --color-border-highlight-2: #35f0d0;
  --color-border-highlight-3: #35f0d0;
  --color-border-highlight-4: #35f0d0;
  --color-border-highlight-6: #ff46ed;
  --color-border-highlight-7: #c00c99;
  --color-border-highlight-8: #00f5cf;
  --color-border-raspberry: #49195c;
  --color-border-functional-red: #ff6666;
  --color-border-red: #e61b1b;
  --color-border-orange: #ff9303;
  --color-border-green: #3ef3d4;
  --color-border-transparent: rgba(0, 0, 0, 0);
}

.light {
  /* Testing a new format */
  /* Importing colors into 'colors' */
  /* Rather than importing colors into each use (ex. background, text, etc) */

  --color-almost-transparent: rgba(255, 255, 255, 0.1);

  /* Old format */
  --color-bg-body: #f5f5f5;
  --color-bg-card: #fff;
  --color-bg-card-transparent: #ffffff00;
  --color-bg-card-selected: #fff;
  --color-bg-card-purple: rgba(173, 153, 216, 0.1);
  --color-bg-primary: #fff;
  --color-bg-secondary: #35f0d0;
  --color-bg-tertiary: #f2edfe;
  --color-bg-new-modal: #fff;
  --color-bg-default: #f7f7f7;
  --color-bg-darkened: #e9e9e9;
  --color-bg-input: #fff;
  --color-bg-inverse: #21064e;
  --color-bg-inverse-purple: #4c249f;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-overlay-white: rgba(204, 201, 201, 0.521);
  --color-bg-black: #111;
  --color-bg-accent-grey-1: #f6f2ff;
  --color-bg-accent-grey-2: #f6f2ff;
  --color-bg-accent-grey-3: #f6f2ff;
  --color-bg-accent-grey-4: #f6f2ff;
  --color-bg-accent-grey-5: #f6f2ff;
  --color-bg-accent-grey-6: #f6f2ff;
  --color-bg-highlight-1: #4c249f;
  --color-bg-highlight-2: #7f51d1;
  --color-bg-highlight-3: #4c249f;
  --color-bg-highlight-4: #5c29c2;
  --color-bg-highlight-5: #f9f9f9;
  --color-bg-highlight-6: #ff46ed;
  --color-bg-highlight-7: #c00c99;
  --color-bg-highlight-8: #f9f9f9;
  --color-bg-highlight-9: #341762;
  --color-bg-new-btn: #35f0d0;
  --color-bg-new-btn-hover: #1ef7d6;
  --color-bg-raspberry: #49195c;
  --color-bg-functional-red: rgba(255, 100, 100, 0.15);
  --color-bg-red: #e61b1b;
  --color-bg-green: #1ef7d6;
  --color-bg-orange: #ff9303;
  --color-bg-orange-darkened: rgba(233, 166, 79, 0.1);
  --color-bg-teal: #0ea3a4;
  --color-bg-purple: #4c249f;
  --color-bg-light-purple-10: rgba(173, 153, 216, 0.1);
  --color-bg-light-purple-70: rgba(110, 77, 179, 1);

  --color-text-accent-1: #7665ac;
  --color-text-accent-2: #4c249f;
  --color-text-accent-3: #a5a0b3;
  --color-text-accent-4: #9f82d7;
  --color-text-primary: #4c249f;
  --color-text-primary-soft: #d9d9d9;
  --color-text-secondary: #35f0d0;
  --color-text-tertiary: #493171;
  --color-text-default: #4c249f;
  --color-text-default-soft: #946fdf;
  --color-text-darkened: #341762;
  --color-text-inverse: #21064e;
  --color-text-inverse-purple: #21064e;
  --color-text-match: #fff;
  --color-text-match-purple: #fff;
  --color-text-black: #111;
  --color-text-highlight-1: #4c249f;
  --color-text-highlight-2: #7f51d1;
  --color-text-highlight-3: #3857ee;
  --color-text-highlight-4: #fff;
  --color-text-highlight-6: #ff46ed;
  --color-text-highlight-7: #c00c99;
  --color-text-highlight-9: #35f0d0;
  --color-text-raspberry: #49195c;
  --color-text-functional-red: #ff6666;
  --color-text-red: #f76363;
  --color-text-green: #0ea3a4;
  --color-text-orange: #ff9303;
  --color-text-yellow: #ffcc15;
  --color-text-teal: #049c9c;
  --color-text-purple: #401c94;

  --color-border-body: #fff;
  --color-border-accent-1: #bbb2ce;
  --color-border-accent-2: #4c249f;
  --color-border-accent-3: #666;
  --color-border-accent-4: #f2edfe;
  --color-border-primary: #3c1a79;
  --color-border-card: #bbb2ce;
  --color-border-secondary: #35f0d0;
  --color-border-default: #4c249f;
  --color-border-inverse: #4c249f;
  --color-border-green: #1ef7d6;
  --color-border-highlight-1: #4c249f;
  --color-border-highlight-2: #7f51d1;
  --color-border-highlight-3: #4c249f;
  --color-border-highlight-4: #5c29c2;
  --color-border-highlight-5: #5c29c2;
  --color-border-highlight-6: #ff46ed;
  --color-border-highlight-7: #c00c99;
  --color-border-highlight-8: #00f5cf;
  --color-border-raspberry: #49195c;
  --color-border-functional-red: #ff6666;
  --color-border-red: #e61b1b;
  --color-border-orange: #ff9303;
  --color-border-green: #3ef3d4;
  --color-border-transparent: rgba(0, 0, 0, 0);
}

.dark .purple-radial-gradient {
  background: radial-gradient(rgba(76, 36, 159, 0.7) 0, rgba(76, 36, 159, 0) 70%);
}

.light .purple-radial-gradient {
  background: radial-gradient(rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 70%);
}

.dark .pool-gradient-1 {
  background: linear-gradient(334deg, #4c249f 28%, rgba(255, 119, 225, 0.9) 164%), #290b5a;
}

.light .pool-gradient-1 {
  background: linear-gradient(72deg, #4c249f 28%, rgba(236, 71, 201, 1) 164%);
}

.dark .pool-gradient-2 {
  background: linear-gradient(34deg, #361070 28%, #60237c 100%);
}

.light .pool-gradient-2 {
  background: linear-gradient(34deg, #361070 28%, #60237c 100%);
}

.pool-gradient-3 {
  background: linear-gradient(60deg, #17e1fd 10%, #ff77e1 50%, #fff177);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-bg-input) inset !important;
  -webkit-text-fill-color: var(--color-text-inverse) !important;
}

.theme-toggler--light,
.theme-toggler--dark {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.theme-toggler {
  @apply bg-darkened;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  color: #9f7aea;
  height: 28px;
  border-radius: 100px;
  width: 89px;
}

@screen sm {
  .theme-toggler {
    height: 24px;
    width: 74px;
  }
}

.toggle {
  color: #9f7aea;
  height: 24px;
  border-radius: 100px;
  position: absolute;
  top: 2px;
  width: 50%;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(124, 107, 107, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(5%);
}

@screen sm {
  .toggle {
    height: 20px;
  }
}

.dark .toggle {
  @apply bg-secondary;
  transform: translateX(95%);
}

.theme-toggler:hover .toggle {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.dark .theme-toggler .theme-toggler--light {
  @apply text-highlight-2;
  opacity: 0.7;
}

.dark .theme-toggler .theme-toggler--dark {
  @apply text-highlight-2;
}

.light .theme-toggler:hover .theme-toggler--light {
  @apply text-orange;
}

.light .theme-toggler:hover .theme-toggler--dark {
  color: #300e69;
}

.dark .theme-toggler:hover .theme-toggler--light {
  @apply text-white;
  opacity: 1;
}

.dark .theme-toggler:hover .theme-toggler--dark {
  @apply text-orange;
}

.theme-toggler--names {
  margin: 0 8px 0 7px;
  padding-top: 6px;
}

@screen sm {
  .theme-toggler--names {
    margin: 0 3px 0 2px;
    padding-top: 6px;
  }
}

.light .nav--account-transactions-button:hover {
  @apply bg-green text-white;
}

.light .nav--account-transactions-button:hover div,
.light .nav--account-transactions-button:hover .nav--account-transactions-button__address {
  @apply bg-green text-white;
}

.light .light--no-gutter {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.light .light--no-gutter th:first-child,
.light .light--no-gutter th:last-child,
.light .light--no-gutter td:first-child,
.light .light--no-gutter td:last-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}