html {
  box-sizing: border-box;
  --bg-color-green-hover: #8cad8c;
  --bg-color-green: #779a77;
  --bg-color-red-hover: #d05252;
  --bg-color-red: #bb4343;
  --bg-color-light-blue: #f5f5ff;
  --bg-green-1: #e8efe7;
  --bg-hue: 0;
  --bg-sat: 0%;
  --bg-surface-1: hsl(var(--bg-hue), var(--bg-sat), 100%);
  --bg-surface-2: hsl(var(--bg-hue), var(--bg-sat), 98%);
  --bg-surface-3: hsl(var(--bg-hue), var(--bg-sat), 96%);
  --bg-surface-4: hsl(var(--bg-hue), var(--bg-sat), 94%);
  --bg-surface-5: hsl(var(--bg-hue), var(--bg-sat), 92%);
  --bg-surface-6: hsl(var(--bg-hue), var(--bg-sat), 88%);
  --bg-warm-1: #ffffec;
  --bg-warm-2: #f5f5e2;
  --border-dark: solid 1px #bfbfbf;
  --border-light: solid 1px #dedede;
  --border-medium: solid 1px #ccc;
  --border-xlight: solid 1px #ebebeb;
  --shadow-2: 0 0 .5rem 0 #0000001a;
  --shadow: 0 0 .5rem 0 #0000000d;
  --text-dark: #262626;
  --text-light: #999;
  --text-medium: #666;
  font-size: 62.5%;
}

body {
  height: 100dvh;
  margin: 0;
  font-family: proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

body.ck-inspector-body-expanded, body.ck-inspector-body-collapsed {
  height: calc(100vh - var(--ck-inspector-collapsed-height));
}

#root {
  height: 100%;
  font-size: 1.2rem;
}

.ReactModalPortal {
  font-size: 1.2rem;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}

* {
  text-underline-offset: .25em;
}

@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block;
  background-color: var(--base-color);
  z-index: 1;
  border-radius: .25rem;
  width: 100%;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  line-height: 1 !important;
}

.react-loading-skeleton:after {
  content: " ";
  display: var(--pseudo-element-display);
  height: 100%;
  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  background-color: #fff;
  background-repeat: no-repeat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateX(-100%);
}