:root {
  /*--c-grey-950: #070707;*/
  --c-grey-950: #131313;
  /*--c-grey-900: #161616;*/
  --c-grey-900: #222222;
  --c-grey-900-o50: rgba(34, 34, 34, 0.5);
  /*--c-grey-800: #242424;*/
  --c-grey-800: #2f2f2f;
  --c-grey-800-o50: rgba(47, 47, 47, 0.5);
  /*--c-grey-700: #504E52;*/
  --c-grey-700: #59575b;
  --c-grey-700-o50: rgba(89, 87, 91, 0.5);
  --c-grey-500: #8F8C8F;
  --c-grey-400: #bbbbbb;
  --c-grey-300: #E8E8E8;
  --c-grey-200: #f1f1f1;
  /*--c-grey-100: #fdfdfd;*/
  --c-grey-100: #f8f8f8;
  --c-white: #FFFFFF;
  --c-black: #000000;

  --c-red: #F61010;
  --c-red-o10: rgba(246, 16, 16, 0.1);
  --c-red-o25: rgba(246, 16, 16, 0.25);
  --c-red-o50: rgba(246, 16, 16, 0.5);
  --c-green: #73D70F;
  --c-green10: #5cac0c;
  --c-green20: #4a8a0a;
  --c-yellow: #e5c916;
  --c-blue: #007AFF;
  --c-blue10: #0062cc;
  --c-blue20: #004999;
  --c-dark-purple: #3B007E;
  --c-bright-purple: #6F26CB;
  --c-bright-purple-o25: rgba(111, 38, 203, 0.25);
  --c-bright-purple-o50: rgba(111, 38, 203, 0.5);
  --c-light-purple: #9254ff;
  --c-lightest-purple: #b186f8;
  --c-black-purple: #15002D;
  /*--c-black: var(--c-black-purple);*/
  --c-bright-purple-rgb: 111, 38, 203;
  /*--c-focus: #007AFF;*/
  --c-focus: var(--c-light-purple);

  --c-reddit: #FF5700;

  --border-radius: 6px;
  --border-radius-small: 4px;

  --fs-32px: 2rem;
  --fs-24px: 1.5rem;
  --fs-20px: 1.25rem;
  --fs-16px: 1rem;
  --fs-14px: 0.875rem;
  --fs-13px: 0.8125rem;
  --fs-11px: 0.6875rem;
  --fs-9px: 0.5625rem;
}

.light {
  --c-text: var(--c-black);
  --c-text-flipped: var(--c-white);
  --c-text-hover: var(--c-bright-purple);
  --c-text-active: var(--c-grey-800);
  --c-text-disabled: var(--c-grey-500);
  --c-text05: var(--c-grey-500);
  --c-text07: var(--c-grey-500);
  --c-text10: var(--c-grey-400);
  --c-text-input-placeholder: var(--c-grey-800);

  --c-bg00: var(--c-white);
  --c-bg10: var(--c-grey-100);
  --c-bg20: var(--c-grey-200);
  --c-bg20-hover: var(--c-grey-300);
  --c-bg20-active: var(--c-grey-200);
  --c-bg30: var(--c-grey-300);
  --c-bg40: var(--c-grey-500);

  --c-h10: var(--c-grey-200);
  --c-h20: var(--c-grey-300);
  --c-h30: var(--c-grey-500);
  --c-h40: var(--c-grey-700);

  --c-toggle00: var(--c-grey-500);
  --c-toggle10: var(--c-grey-500);

  --c-primary: var(--c-bright-purple);
  --c-primary-solid: var(--c-bright-purple);
  --c-primary-solid-o25: var(--c-bright-purple-o25);
  --c-primary-solid-o50: var(--c-bright-purple-o50);
  --c-primary-contrast: var(--c-bright-purple);
  --c-secondary: var(--c-black);

  --c-success: var(--c-green);
  --c-success-dark: var(--c-green10);
  --c-error: var(--c-red);
  --c-danger: var(--c-red);
  --c-danger-o10: var(--c-red-o10);
  --c-danger-o25: var(--c-red-o25);
  --c-danger-o50: var(--c-red-o50);
  --c-info: var(--c-yellow);

  --c-domain-default-gradient: linear-gradient(var(--c-bg20), var(--c-grey-300));
  --c-domain-high: var(--c-green);
  --c-domain-mid: var(--c-yellow);
  --c-domain-low: var(--c-red);
  --c-domain-not-rated: var(--c-grey-400);

  --range-slider: var(--c-bg30);
  --range-handle-inactive: var(--c-bright-purple);
  --range-handle: var(--c-bright-purple);
  --range-handle-focus: var(--c-bright-purple);

  --modal-overlay-bg: var(--c-grey-800-o50);
}

.dark, .midnight {
  --c-text: var(--c-white);
  --c-text-flipped: var(--c-black);
  --c-text-hover: var(--c-grey-500);
  --c-text-active: var(--c-grey-300);
  --c-text-disabled: var(--c-grey-500);
  --c-text05: var(--c-grey-400);
  --c-text07: var(--c-grey-500);
  --c-text10: var(--c-grey-700);
  --c-text-input-placeholder: var(--c-grey-300);

  --c-bg00: var(--c-black);
  /*--c-bg05: var(--c-grey-900);*/
  /*--c-bg10: #1A1A1B;*/
  --c-bg10: var(--c-grey-950);
  --c-bg20: var(--c-grey-900);
  --c-bg20-hover: var(--c-grey-800);
  --c-bg20-active: var(--c-grey-900);
  --c-bg30: var(--c-grey-800);
  --c-bg40: var(--c-grey-700);

  --c-h10: var(--c-grey-900);
  --c-h20: var(--c-grey-800);
  --c-h30: var(--c-grey-700);
  --c-h40: var(--c-grey-500);

  --c-toggle00: var(--c-grey-500);
  --c-toggle10: var(--c-grey-500);

  --c-primary: var(--c-light-purple);
  --c-primary-solid: var(--c-bright-purple);
  --c-primary-solid-o25: var(--c-bright-purple-o25);
  --c-primary-solid-o50: var(--c-bright-purple-o50);
  --c-primary-contrast: var(--c-lightest-purple);
  --c-secondary: var(--c-white);

  --c-success: var(--c-green10);
  --c-success-dark: var(--c-green20);
  --c-error: var(--c-red);
  --c-danger: var(--c-red);
  --c-danger-o10: var(--c-red-o10);
  --c-danger-o25: var(--c-red-o25);
  --c-danger-o50: var(--c-red-o50);
  --c-info: var(--c-yellow);

  --c-domain-default-gradient: linear-gradient(var(--c-bg40), var(--c-bg30));
  --c-domain-high: var(--c-green);
  --c-domain-mid: var(--c-yellow);
  --c-domain-low: var(--c-red);
  --c-domain-not-rated: var(--c-grey-900);

  --range-slider: var(--c-h30);
  --range-handle-inactive: var(--c-light-purple);
  --range-handle: var(--c-light-purple);
  --range-handle-focus: var(--c-light-purple);

  --modal-overlay-bg: var(--c-grey-900-o50);
}

.midnight {
  --c-bg10: var(--c-black) !important;
}

.colorblind {
  --c-success: var(--c-blue) !important;
  --c-success-dark: var(--c-blue20) !important;
  --c-domain-high: var(--c-blue); !important;
  --c-domain-mid: var(--c-bright-purple); !important;
  --c-domain-low: var(--c-red); !important;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Two Inter', sans-serif;
}

body {
  background: var(--c-bg00);
  color: var(--c-text);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: 600;
}

h5 {
  font-size: var(--fs-20px);
}

h6 {
  font-size: var(--fs-16px);
}

p {
  padding: 0;
  margin: 0;
}

ul, ol {
  margin: .5rem;
  padding: 0 0 0 1.5rem;
}

body.dark {
  background: var(--c-bg10);
}

* {
  box-sizing: border-box;
}

input:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--c-focus);
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input, select {
  background: var(--c-bg20);
  border: 1px solid var(--c-h20);
  color: var(--c-text);
  appearance: none;
  -moz-appearance: textfield;
}

input::placeholder, select::placeholder {
  color: var(--c-text-input-placeholder)
}

button:hover, a:hover {
  cursor: pointer;
}

.error-outline {
  outline: 2px solid var(--c-error);
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0 2rem;
}

@media (min-width: 400px) {
}

@media (min-width: 576px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 740px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 900px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1100px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }
}

body .svelte-toggle .svelte-toggle--track {
  height: 1em !important;
  width: 2em !important;
}

body .svelte-toggle .svelte-toggle--thumb {
  height: calc(1em - 2px) !important;
  width: calc(1em - 2px) !important;
}

body .svelte-toggle.svelte-toggle--checked .svelte-toggle--thumb {
  left: 1em !important;
}

body .svelte-toggle.svelte-toggle:active .svelte-toggle--thumb {
  box-shadow: 0 0 4px 4px var(--c-focus) !important;
}

body .svelte-toggle.svelte-toggle--checked:active .svelte-toggle--thumb {
  box-shadow: 0 0 4px 4px var(--c-success) !important;
}


body .svelte-toggle.svelte-toggle--checked .svelte-toggle--track {
  background-color: var(--c-success) !important;
}

body .svelte-toggle.svelte-toggle--checked:hover:not(.svelte-toggle--disabled) .svelte-toggle--track {
  background-color: var(--c-success-dark) !important;
}

body .svelte-toggle:hover:not(.svelte-toggle--disabled) .svelte-toggle--track {
  background-color: var(--c-toggle10) !important;
}

.ProseMirror {
  min-height: inherit;
  background: var(--c-bg20);
  border-radius: var(--border-radius);
  padding: 0.5rem;
}

.ProseMirror-focused {
  border: none;
  outline: 2px solid var(--c-focus);
  padding: 0.5rem;
}

.ProseMirror p.is-editor-empty:first-child::before {
  color: var(--c-text-input-placeholder);
  opacity: 0.5;
  content: attr(data-placeholder);
  pointer-events: none;
}

.rangeSlider {
  width: 100%;
}