* {
  box-sizing: border-box;

  outline: none;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "fontawesome";

  src: url("/assets/fa-solid-900-a4ce2350.woff2");
}

@font-face {
  font-family: "fontawesome-thin";

  src: url("/assets/fa-regular-400-2b7265fb.woff2");
}

@font-face {
  font-family: "fontawesome-brands";

  src: url("/assets/fa-brands-400-465040d1.woff2");
}

@font-face {
  font-family: "Jost";
  font-weight: 200;

  src: url("/assets/Jost-200-Thin-7d4fe2e9.otf");
}

@font-face {
  font-family: "Jost";
  font-weight: 400;

  src: url("/assets/Jost-400-Book-360005b5.otf");
}

@font-face {
  font-family: "Jost";
  font-weight: 600;

  src: url("/assets/Jost-600-Semi-7d72debc.otf");
}

@font-face {
  font-family: "ArcherPro";

  src: url("/assets/ArcherPro-Semibold-032d5453.otf");
}


html { font-size: 10px; }

body {
  /* stylelint-disable color-no-hex,value-keyword-case */
  --slate-0: #0a0b0c;
  --slate-1: #3e4449;
  --slate-2: #74818c;
  --slate-3: #a6b6c4;
  --slate-4: #c9d7e3;
  --slate-5: #e3eaf0;
  --slate-6: #fbfcfd;
  --purple-0: #08080d;
  --purple-1: #23253f;
  --purple-2: #373a5e;
  --purple-3: #5f6188;
  --purple-4: #8a8baf;
  --purple-5: #bdbdd4;
  --purple-6: #f7f8fd;
  --blue-0: #070a10;
  --blue-1: #142b45;
  --blue-2: #0f4c7f;
  --blue-3: #2e71b2;
  --blue-4: #6e9ad3;
  --blue-5: #b2c7e8;
  --blue-6: #f3f6fb;
  --teal-0: #060c0d;
  --teal-1: #0b3336;
  --teal-2: #005c62;
  --teal-3: #04858d;
  --teal-4: #5dadb3;
  --teal-5: #a9d2d5;
  --teal-6: #f2f8f8;
  --green-0: #060e08;
  --green-1: #0b3921;
  --green-2: #006737;
  --green-3: #059456;
  --financial-green: #4BBD6B;
  --green-4: #5eba83;
  --green-5: #aadaba;
  --green-6: #f2f9f4;
  --gold-0: #141008;
  --gold-1: #5d471c;
  --gold-2: #b0832a;
  --gold-3: #eeb545;
  --gold-4: #ffd377;
  --gold-5: #ffe7b5;
  --gold-6: #fffbf4;
  --orange-0: #160c04;
  --orange-1: #633107;
  --orange-2: #ba5700;
  --orange-3: #ff8000;
  --orange-4: #ffaa51;
  --orange-5: #ffd1a0;
  --orange-6: #fff8f1;
  --red-0: #150707;
  --red-1: #59131e;
  --red-2: #a50032;
  --red-3: #e4264f;
  --red-4: #ff6e7b;
  --red-5: #ffb3b5;
  --red-6: #fff4f3;
  --pink-0: #15080f;
  --pink-1: #600e41;
  --pink-2: #b40077;
  --pink-3: #f700a8;
  --pink-4: #ff6bca;
  --pink-5: #ffb5e3;
  --pink-6: #fff4fa;
  --white: var(--purple-6);
  --black: var(--purple-0); /* #2C2C31; */
  --light-gray: rgb(0 0 0 / 10%);
  --gray: rgb(0 0 0 / 55%);
  --very-light-red: var(--red-6);
  --light-red: var(--red-5); /* #e995a7; */
  --red: var(--red-3);
  --dark-red: var(--red-1);
  --pink: var(--pink-3);
  --orange: var(--orange-3);
  --very-light-yellow: var(--gold-6);
  --light-yellow: var(--gold-4);
  --yellow: var(--gold-3);
  --green: var(--green-3);
  --purple: var(--purple-2);
  --dark-purple: var(--purple-1);
  --light-blue: var(--slate-3);
  --very-light-blue: var(--blue-6);
  --blue: var(--blue-3);
  --dark-blue: var(--blue-1);

  /* TODO: Remove these and update color ramps. */
  --bright-blue-2: #CBE0FB;
  --bold-blue-3: #4094F7;
  --bright-fuschia-3:  #FF337D;
  --bright-coral-3: #ff5665;
  --bright-orange-3: #ff7e21;
  --bright-tangerine-3: #ff9a29;
  --bright-dandelion-3: #ffc000;
  --bright-lime-3: #6fc700;
  --bright-teal-3: #07b1c9;
  --bright-denim-3: #0b7fc5;
  --bright-purple-3: #9150dc;
  --muted-purple-1: #64428c;
  --muted-indigo-1: #4a4e8d;

  /* For the global alert notifications */
  --global-alert--warning: #E75300;
  --global-alert--error: #D23C53;
  --global-alert--default: #30334F;
  --global-alert-gradient--error: linear-gradient(180deg, #E4264F -22.92%, #A50032 150%);
  --global-alert-gradient--warning: linear-gradient(180deg, #FF8000 -22.92%, #BA5700 150%);
  --global-alert-gradient--success: linear-gradient(180deg, #808682 -22.92%, #178535 150);
  --global-alert-gradient--default: linear-gradient(180deg, #363A5D -22.92%, #202338 150%);
  --elevation-0: 0 0 0 1px rgb(0 0 0 / 8%);
  --elevation-2: 0 0 0 1px rgb(0 0 0 / 1%), 0 2px 3px rgb(0 0 0 / 10%);
  --elevation-4: 0 0 0 1px rgb(0 0 0 / 1%), 0 4px 6px rgb(0 0 0 / 10%);
  --elevation-6: 0 0 0 1px rgb(0 0 0 / 1%), 0 6px 9px rgb(0 0 0 / 10%);
  --elevation-12: 0 0 0 1px rgb(0 0 0 / 1%), 0 12px 18px 1px rgb(0 0 0 / 10%);
  --gradient: linear-gradient(-33deg, var(--red), 40%, var(--blue));
  --orange-gradient: linear-gradient(134deg, #F700A8 0%, #FF8000 84%, #FF8000 100%);
  --graph-paper-background: linear-gradient(to right, #e3eaf088 1px, transparent 1px), linear-gradient(to bottom, #e3eaf088 1px, transparent 1px);
  --stars-bg: radial-gradient(circle at 110px 40px, white 3px, transparent 3px, transparent),
  radial-gradient(circle at 130px 90px, white 1px, transparent 2px, transparent),
  radial-gradient(circle at 90px 60px, white 2px, transparent 2px, transparent),
  radial-gradient(circle at 40px 40px, white 1px, transparent 1px, transparent);
  --card-gradient: linear-gradient(
    -8deg,
    rgb(0 0 0 / 20%) 0%,
    rgb(0 0 0 / 20%) 33%,
    rgb(0 0 0 / 10%) calc(33% + 1px),
    rgb(0 0 0 / 10%) calc(66% + 1px),
    rgb(0 0 0 / 0%) calc(66% + 1px),
    transparent
  );
  --font-stack: "Jost", -apple-system, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, fira sans, ubuntu,oxygen, oxygen sans, cantarell, droid sans, apple color emoji, segoe ui emoji, segoe ui emoji, segoe ui symbol, lucida grande, helvetica, arial, sans-serif, "fontawesome";
  --sans-stack: var(--font-stack);
  --serif-stack: "ArcherPro", serif, "fontawesome";
  --paper-texture: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
  /* stylelint-enable color-no-hex,value-keyword-case */

  --nav-height: 5.6rem;
  --footer-height: 4.2rem;
  position: absolute;
  overflow: auto;

  inset: 0;

  background: transparent;
  background-color: var(--white);

  margin: 0;

  color: var(--black);
  font-family: var(--font-stack);
  font-size: 1.4rem;

  -webkit-font-smoothing: antialiased;

  touch-action: manipulation;
}

*::before, *::after {
  font-family: "Jost", "fontawesome", var(--font-stack);
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  overflow: hidden;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;
  border: 0;

  clip: rect(0,0,0,0);
}

.u-sans-serif {
  font-family: var(--font-stack);
}

.u-serif {
  font-family: var(--serif-stack);
}

hr.flex {
  opacity: 0%;

  flex-grow: 0;
}

/* input, textarea, [contentEditable=true], [draggable=true], label {
  -webkit-app-region: no-drag !important;
  -webkit-user-select: auto !important;
} */

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

data {
  font-family: var(--serif-stack);
  font-variant: tabular-nums;
}

:where(input[type='text'], input[type='tel'], input[type='email'], input[type='password']) {
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;

  width: 100%;
  max-width: 38rem;
  height: 3.6rem;

  box-shadow: none;

  margin-bottom: 1.8rem;
  padding: 0 0.8rem;
  border: 1px solid var(--slate-3);
  border-radius: 4px;

  font: inherit;
  font-size: 1.8rem;
  line-height: 1.2;
  white-space: pre;

  transition: border-color .18s, box-shadow .18s;

  text-decoration: none;
}

input[type='text']:hover, input[type='tel']:hover, input[type='email']:hover, input[type='password']:hover,
input[type='text']:focus, input[type='tel']:focus, input[type='email']:focus, input[type='password']:focus {
  box-shadow: var(--elevation-2);

  border-color: var(--blue-3);
}

select {
  -webkit-appearance: none;
  appearance: none;

  height: 3.6rem;
  min-height: 3.4rem;
  max-height: 3.6rem;

  background: white;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23909eb2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-position: center right 8px;
    background-size: 0.9rem;

  margin-bottom: 0.8rem;
  padding: 0 3.2rem 0 0.8rem;
  padding-right: 2.4rem;
  border: 1px solid var(--slate-3);
  border-radius: 4px;

  font-family: var(--sans-stack);
  font-size: 1.6rem;
  line-height: 1.2;

  transition: border-color .18s ease-in-out;

  background-repeat: no-repeat;
}

select.select--small {
  cursor: pointer;

  height: 2.4rem;

  margin-left: 0.8rem;

  font-size: 1.4rem;

  border-color: var(--light-blue);
}

select:hover,
select:focus {
  box-shadow: var(--elevation-2);

  border-color: var(--blue);
}

input.input--small {
  height: 2.8rem;
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
}

a {
  box-shadow: inset 0 0 0 0 currentColor;

  color: var(--blue-3);
  font-weight: 700;

  transition: box-shadow .18s ease-in-out;

  text-decoration: none;
}

a:hover, a:focus {
  box-shadow: inset 0 -2px 0 0 currentColor;

  color: var(--blue-3);
  font-weight: 700;

  text-decoration: none;
}:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  position: static;
  overflow: auto;
}
body {
  padding-left: 17.6rem;
}

#root .login-form--logged-out, #root .login-form__spinner {
  margin: auto;
  top: 50vh;
  transform: translate(-50%, -50%);
  position: absolute;
  left: calc(50% + 9rem);
}

#root .login-form--logged-in {
  position: fixed;
  z-index: 999;
  left: 0.8rem;
  bottom: 0.8rem;
  transform: scale(calc(18 / 24));
  transform-origin: 0 100%;
  width: calc(24rem - 2.2rem);
}

.datum-color-string   { --datum-color: var(--datum-color-string);   }

.datum-color-enum     { --datum-color: var(--datum-color-enum);     }

.datum-color-boolean  { --datum-color: var(--datum-color-boolean);  }

.datum-color-int      { --datum-color: var(--datum-color-int);      }

.datum-color-float    { --datum-color: var(--datum-color-float);    }

.datum-color-date     { --datum-color: var(--datum-color-date);     }

.datum-color-blob     { --datum-color: var(--datum-color-blob);     }

.datum-color-geometry { --datum-color: var(--datum-color-geometry); }

.datum-color-null     { --datum-color: var(--datum-color-null);     }

.datum-color-any     { --datum-color: var(--datum-color-any);     }

body {
  --datum-color-string: var(--green-3);
  --datum-color-enum: var(--purple-3);
  --datum-color-boolean: var(--blue-3);
  --datum-color-int: var(--red-3);
  --datum-color-float: var(--gold-3);
  --datum-color-date: var(--pink-2);
  --datum-color-blob: var(--teal-3);
  --datum-color-geometry: var(--orange-3);
  --datum-color-null: var(--slate-3);
  --datum-color-any: var(--slate-3);
}

#root {
  width: 100%;

  margin: 0;
  padding: 0;

  text-align: center;
}

.header {
  position: relative;
  z-index: 1;
}

.main {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  z-index: 0;

  flex-flow: row;
}

.nav {
  position: fixed;
  z-index: 999;
  overflow: hidden;

  width: 18rem;

  /* border-right: 1px solid var(--slate-3); */
  height: 100vh;
  top: 0;
  left: 0;

  /* background-color: var(--blue-3); */
  /* background-color: var(--purple-2); */
  background-color: var(--bold-blue-3);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 1%), 6px 0 9px rgb(0 0 0 / 10%);

  padding: 1.8rem 0;
  padding-top: 14rem;
}

.nav .logo {
  position: absolute;

  top: 6.4rem;
  left: 0;
  right: 0;

  transform: translateY(-50%);
}

.nav::before {
  content: "";
  position: absolute;

  width: 80rem;
  height: 80rem;
  left: 50%;
  bottom: 100%;

  background-color: white;

  border-radius: 50%;

  transform: translate(-50%, 14rem);
}

.nav__menu {
  display: flex;
  list-style: none;

  width: 100%;

  margin: 1.8rem 0;
  padding: 0;

  flex-flow: column;
  gap: 0;
  height: 100%;
  padding-bottom: 6.2rem;
}

.nav__menu-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100%;

  text-align: left;

  flex-flow: row;
}

.nav__menu-item--mapping a::before {
  content: "\f764";
  margin-right: 0.8rem;

  /* content: "\e003"; */
  font-family: "fontawesome";
}

.nav__menu-item--flash a::before {
  content: "\f7d4";
  margin-right: 0.8rem;
  font-family: "fontawesome";
}

.nav__menu-item--catalist {
  display: flex;
  gap: 0.4rem;
  flex-flow: column;
  padding: 0.8rem;
  margin-top: auto;
}
.nav__menu-item--catalist * {
  width: 100% !important;
  margin: 0 !important;
}

.login-form__user-card-preview {
  min-width: unset !important;
}

.nav__menu .nav__menu-item--catalist button {
  background-color: white !important;
  color: var(--bold-blue-3) !important;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.2rem;
  border-radius: 0.4rem;
}

.nav__menu-item input {
  cursor: pointer;
  position: absolute;
  opacity: 0%;
  z-index: 2;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.nav__menu-item a, .nav__menu-item button {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 0;

  width: calc(100% - 1.8rem);
  height: 4.8rem;

  margin: 0;
  padding: 0 1.8rem;
  border: none;

  color: white;
  font-size: 1.8rem;
  font-weight: 700;
}

.nav__menu-item progress {
  position: absolute;
  z-index: 1;

  height: 2.4rem;
  left: 1.8rem;
  bottom: 50%;
  right: 0.8rem;

  box-shadow: inset 0 0 0 6px white, inset 0 0 0 7px var(--slate-3);

  color: currentColor;

  transform: translateY(50%);
}

.nav__menu-item a:hover, .nav__menu-item a:active {
  box-shadow: unset;
}

.nav__menu-item:first-child button {
  justify-content: center;

  background-color: white;

  margin: 0.8rem;
  border-radius: 0.4rem;

  color: var(--bold-blue-3);
  text-align: center;
}

.nav__menu-item:first-child button::before {
  content: "\f357";
  margin-left: -0.8rem;
  margin-right: 0.8rem;
}

.file-nav {
  position: sticky;
  top: 0;
  flex-flow: column;

  display: flex;
  list-style: none;
  align-items: flex-start;
  justify-content: flex-start;
}

.file-list {
  display: flex;
  list-style: none;
  align-items: flex-start;
  justify-content: flex-start;

  /* overflow: auto; */
  z-index: 998;

  width: 24rem;
  min-width: 24rem;
  height: fit-content;

  margin: 0;
  padding: 5.6rem 0.8rem 0.8rem 0;

  transform: translateX(0);
  transition: transform .28s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  flex-flow: column;
  gap: 0.8rem;
}

.file-list .progress-spinner {
  margin: 1.8rem auto;
  color: var(--bold-blue-3);
}

.file-list__search {
  position: fixed;
  top: 0.8rem;
  z-index: 999999999999999;
  left: 18rem;
  font-size: 1.6rem;
  padding: 0.8rem 0.8rem 0.8rem 1rem;
  border-radius: 0 0.4rem 0.4rem 0;
  border: none;
  box-shadow: var(--elevation-0), var(--elevation-0), var(--elevation-2), 0 -1.8rem 0 0 var(--blue-6);
  width: 23.6rem;
  font-family: var(--sans-stack);
}

@keyframes float {
	0% {
		transform: translateX(1.8rem);
	}
	18% {
		transform: translateX(1.8rem);
	}
	24% {
		transform: translateX(1.3rem);
	}
	26% {
		transform: translateX(3.2rem);
	}
	28% {
		transform: translateX(1.5rem);
	}
	30% {
		transform: translateX(1.8rem);
	}
	100% {
		transform: translateX(1.8rem);
	}
}

.file-list .flow {
  transition: transform .18s ease-in-out, opacity .18s ease-in-out;

  transition-delay: calc(.025s * var(--idx));
}

.file-list--draggable .flow.flow--mapped {
  transform: translateX(1.8rem);
}

.file-list--draggable .flow.flow--unmapped {
  pointer-events: none;
  opacity: 33%;
  box-shadow: none;
}

.file-list--draggable .flow.flow--unmapped button {
  box-shadow: none !important;
}

.drag-hint .file-list--draggable .flow--mapped {
	animation: float 6s ease-in-out infinite;
  animation-delay: calc(.025s * var(--idx));
}

.file-list--draggable .file__link {
  box-shadow: var(--elevation-2) !important;
}

.flow {
  position: relative;

  width: 24rem;
  height: 5.8rem;
  min-height: 5.8rem;
  max-height: 5.8rem;

  margin: 0;
  padding: 0;
  border-radius: 0.4rem;
}

.flow:hover {
  z-index: 9;
}

.file__link {
  user-select: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 auto;

  width: 100%;
  height: 100%;

  background-color: white;
  box-shadow: none !important;

  padding: 0.8rem 0.8rem 0.8rem 1.2rem;
  border: 1px solid var(--slate-3);
  border-radius: 0.4rem;

  transition: border .18s ease-in-out, box-shadow .18s ease-in-out;

  flex-flow: column;
  gap: 0.4rem;
  touch-action: none;
}

.file__link:hover, .file__link:focus-within {
  box-shadow: var(--elevation-4);

  border-color: var(--bold-blue-3);
}


.flow.flow--active .file__link {
  box-shadow: 0 0 0 3px var(--bold-blue-3), var(--elevation-4);

  border-color: var(--bold-blue-3);
}

.file-panel__header {
  padding: 0.8rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 24rem 15rem;
  width: 100%;
  align-items: flex-start;

  margin: 0;

  flex-flow: row;
  gap: 1.8rem;
  height: 8.2rem;
}

.file-panel__header .text-input {
  width: 100%;
  max-width: unset;
}

.file__header {
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin: 0;

  flex-flow: row;
  gap: 1.8rem;
}

.file__timestamp {
  position: relative;
  display: inline-block;

  margin: 0;
  padding: 0;

  color: var(--slate-2);
  font-size: 1.2rem;
  white-space: pre;
}

.file__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 1.8rem;

  background-color: var(--bold-blue-3);

  padding: 0 1.2rem;
  border-radius: 2.4rem;

  color: white;
  font-family: var(--sans-stack);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: unset;
}

.file__chip--bigquery {
  background-color: var(--bold-blue-3);
}

.file__chip--excel {
  background-color: var(--green-3);
}

.file__chip--csv {
  background-color: var(--orange-3);
}

.file__chip--geojson, .file__chip--geo {
  background-color: var(--red-3);
}

.file__chip--parquet {
  background-color: var(--purple-3);
}

.file-panel {
  position: sticky;
  background: white;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-grow: 1;

  width: fit-content;
  top: 0;

  margin: 0;

  flex-flow: row;
  flex-wrap: wrap;
}

.file__name {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;

  width: 100%;
  max-width: 100rem;

  margin: 0;

  color: var(--slate-0);
  text-align: left;
  font-size: 1.6rem;
  white-space: pre;
}

.file__name:empty {
  display: none;
}

.file__header .file__name-input, .file__header .file__name-input input {
  width: 100%;
  max-width: unset !important;
}

.progress-button {
  min-width: 18rem;
  font-weight: 700 !important;
  white-space: pre;
}

.delete-button {
  margin: 0 !important;
}

.file-panel .stepper {
  max-width: 68rem;
  margin: 1.8rem auto 2.4rem;
}


.vega-embed {
  margin: 0 auto;
}

.file__pivot {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
}.login-form {
  --line-height: 4.8rem;
  position: relative;
  display: flex;

  width: 100%;
  max-width: 42rem;
  height: 16.2rem;

  background-color: transparent;

  margin: 0.8rem 0;
  padding: calc(var(--line-height) + 0.8rem) 0 0;
  border: 0;

  transition: height .28s ease-in-out, padding .28s ease-in-out;

  flex-flow: column;
}

.login-form.login-form--logged-in.login-form--has-password {
  height: 4.8rem;
  padding: 4.8rem 0 0;
}

.login-form.login-form--logged-in.login-form--missing-password {
  height: 10.4rem;
}

.login-form.login-form--logged-in.login-form__user-card--verify {
  height: 16.2rem;
}

.login-form .text-input {
  --height: var(--line-height) !important;
  transition: opacity .18s ease-in-out;
}

.login-form .text-input__input {
  width: 100%;
  max-width: unset;

  outline: none !important;
  margin: 0;
  padding: 0 1.2rem;
}

.login-form .text-input__label {
  padding: 0 1.2rem;
}

.login-form .login-form__input {
  --height: 4.8rem !important;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}


.login-form__logo {
  width: 20.5rem;
  height: 4.8rem;

  margin-bottom: 0.2rem;

  object-fit: cover;
  object-position: top center;
}

.login-form__subtitle {
  margin: 0 0 12rem;

  color: var(--slate-0);
  font-family: var(--serif-stack);
  font-size: 2.18rem;
  font-weight: 800;
}

.login-form__label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 1.8rem;

  margin: 0;

  text-align: left;
  font-family: var(--serif-stack);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.8rem;

  transition: opacity .18s ease-in-out, color .18s ease-in-out;
}

.login-form__label--error {
  color: var(--red-3) !important;
}

.login-form__secondary-btn.login-form__label--password {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  width: fit-content;
  height: 0;
  bottom: var(--line-height);
  right: 0;

  background: white;

  margin: 0 0.8rem -0.1rem auto;
  padding: 0 0.8rem 0.1rem;

  font-size: 1.2rem;

  transition: opacity .18s ease-in-out;
}

.login-form__register {
  margin: 0;
}

.login-form__splash {
  pointer-events: none;
  position: fixed;
  display: none;
  opacity: 55%;
  z-index: -1;

  width: calc(100vw - 52rem + 6.4rem);
  height: calc(100vh + 6.4rem);
  top: -3.2rem;
  bottom: -3.2rem;
  right: -3.2rem;

  border: -3.2rem;

  filter: blur(8);
}

.login input {
  height: 4.2rem;
}

.login-form__form {
  display: contents;
}

.login-form__profile {
  width: 100%;
  max-width: 38rem;
}

.login-form__user-card {
  box-sizing: content-box;
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 9;
  overflow: visible;

  width: 100%;
  max-width: unset;
  height: 4.8rem;
  min-height: 4.8rem;
  top: 0;

  background-clip: content-box;

  margin: -0.8rem 0 0;
  padding: 0.8rem 0 0;
  border-radius: 0.4rem;

  transform: translate3d(0, 0, 0);
  transition: box-shadow .18s ease-in-out, height .18s ease-in-out;

  flex-flow: column;
}

.login-form__user-card::before {
  content: "";
  box-sizing: border-box;
  position: absolute;

  inset: 0.8rem 0 0;
  height: calc(100% - 0.8rem);

  background-color: white;
  box-shadow: none;

  border-radius: .4rem;
}

.login-form__user-card .text-input {
  pointer-events: all;
  position: absolute;
  opacity: 100%;

  top: 0.8rem;

  transition: opacity .18s ease-in-out, visibility 0s 0s ease-in-out;

  visibility: visible;
}

.login-form__user-card--verify .text-input {
  opacity: 0%;
}

.login-form__user-card-preview {
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  opacity: 0%;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  height: 4.8rem;
  min-height: 4.8rem;
  top: 0.8rem;
  left: 0;

  background: white;
  box-shadow: 0 0 0 1px var(--slate-3);

  margin: 0;
  padding-left: 4.8rem;
  padding-right: 7.2rem;
  border-radius: 4px;

  transition: opacity .18s ease-in-out, visibility 0s 0.28s ease-in-out;

  flex-flow: column;
  gap: 2px;
  visibility: hidden;
}

.login-form__user-card--logged-in .text-input {
  pointer-events: none;
  opacity: 0%;

  transition: opacity .18s ease-in-out, visibility 0s 0.18s ease-in-out;

  visibility: hidden;
}

.login-form__user-card--logged-in ~ .login-form__options {
  pointer-events: none;
  opacity: 0%;

  transform: translateY(-100%);
  transition: opacity .18s ease-in-out, transform .18s ease-in-out, visibility 0s 0.18s ease-in-out;
}

.login-form--logged-in:not(.login-form--verify) .login-form__user-card-preview {
  pointer-events: all;
  opacity: 100%;

  transition: opacity .18s ease-in-out, visibility 0s 0s ease-in-out;

  visibility: visible;
}

.login-form .login-form__user-card--verify {
  height: calc(16.2rem);
  transition: box-shadow .18s ease-in-out, height .28s ease-in-out;
}

.login-form__user-image {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.6rem;
  height: 3.6rem;
  top: 50%;
  left: 0.8rem;

  background: var(--bold-blue-3);

  margin: 0 0 0 -0.2rem;
  border: 1px solid var(--bold-blue-3);
  border-radius: 50%;

  color: white;
  font-size: 1.4rem;
  font-weight: 700;

  transform: translateY(-50%);
}

.login-form__user-name {
  position: relative;
  z-index: 2;
  text-overflow: ellipsis;

  width: 100%;
  top: 2px;

  background: transparent;

  margin: -0.2rem -0.6rem 0;
  padding: 0.1rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;

  font-size: 1.6rem;
  line-height: 1;

  transition: border-color .18s ease-in-out, box-shadow .18s ease-in-out, background-color .18s ease-in-out;

}

.login-form__user-name::placeholder {
  color: var(--slate-4);
}

.login-form__user-name:hover, .login-form__user-name:focus {
  z-index: 2;

  background: white;
  box-shadow: var(--elevation-2);

  border-color: var(--blue-3);
}

.login-form__user-email {
  pointer-events: none;
  position: relative;
  display: block;
  z-index: 1;
  text-overflow: ellipsis;

  width: 100%;
  height: 1.4rem;
  min-height: 1.4rem;
  top: -3px;

  margin: 0 0 -1px;

  color: var(--slate-2);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.login-form__button {
  --background-color: var(--bold-blue-3);
  user-select: none;
  position: relative;
  z-index: 2;

  width: calc(100% - 13.2rem);
  height: 4.8rem;

  background-color: var(--background-color);

  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0.4rem;

  color: white;
  font-size: 1.6rem;
  font-weight: 700;
  white-space: pre;

  transition: background-color .18s ease-in-out, outline .18s ease-in-out, width .18s ease-in-out, opacity .18s ease-in-out;
}

.login-form__button--hidden {
  pointer-events: none;
  z-index: 0;
}

.login-form__button--error {
  --background-color: var(--red-4)
}

.login-form__button:focus {
  outline: 2px solid var(--background-color);

  outline-offset: 2px;
}

.login-form__button--magic {
  position: absolute;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 1;

  width: 100%;

  background: transparent;

  margin: auto;

  color: var(--blue-3);
  text-align: left;
  font-family: var(--serif-stack);
  font-size: 1.3rem;
  font-weight: 700;
  white-space: pre;
  text-transform: uppercase;

  transform-origin: calc(100% - (13.2rem / 2)) calc(100% - 2.4rem);
  transition: transform .18s ease-in-out;

  gap: 0;

  grid-template-columns: 1fr 0.8rem 2.6rem 9.8rem;
}

@keyframes floating {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(2px, 2px); }
  100%   { transform: translate(0, 0); }
}

@keyframes floating-reverse {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(2px, -3px); }
  100%   { transform: translate(0, 0); }
}

.login-form__button--magic:hover, .login-form__button--magic:focus {
  outline: none;
  transform: scale(1.08);
}

.login-form__button--magic::before {
  content: "\f890";
  z-index: 1;

  margin-right: 0.8rem;

  font-family: "fontawesome";
  font-size: 1.8rem;

  transition: transform .18s ease-in-out, color .18s ease-in-out;

  grid-column: 3;
}

.login-form__button--magic:hover::before, .login-form__button--magic:focus::before {
  color: var(--gold-3);
  transform: rotate(18deg) scale(1.3) translate(1px, -12px);
  transform-origin: 50% 50%;
}

.login-form__button--sent::before {
  content: '\f058';

  padding-right: 0.5rem;

  color: white;
  font-family: 'fontawesome';
}

.login-form__password {
  position: relative;
  display: flex;
  align-items: flex-end;
  z-index: 0;


  width: 100%;
  height: var(--line-height);

  padding: 0;
  border: 0;

  transition: height .18s ease-in-out, transform .18s ease-in-out, opacity .18s ease-in-out, visibility 0s 0s ease-in-out;

  flex-flow: row;
  gap: 0.8rem;
}

.login-form__password input {
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;

  width: 100%;
  max-width: 38rem;
  height: 3.6rem;

  margin-bottom: 1.8rem;
  padding: 0 0.8rem;
  border-radius: 4px;

  font: inherit;
  font-family: var(--serif-stack); /* For good sized dots in the input */
  font-size: 1.8rem;
  line-height: 1.2;
  white-space: pre;

  transition: border-color .28s;

  letter-spacing: 2px;
  text-decoration: none;
}

.login-form__password--signed-in.login-form__password--has-password {
  pointer-events: none;
  opacity: 0%;

  transform: translateY(calc(-100% - 0.8rem));
  transition: height .18s ease-in-out, opacity .18s ease-in-out, .18s ease-in-out, visibility 0s 0.18s ease-in-out;
}

.login-form__password--signed-in .text-input {
  margin-bottom: 0;
}

.login-form__password .login-form__button {
  pointer-events: none;
  box-sizing: border-box;
  opacity: 0%;

  width: auto;
  max-width: 0;

  background-clip: padding-box;

  margin-left: -0.8rem;
  padding: 0;

  transition: width .18s ease-in-out, opacity .18s ease-in-out, visibility 0s 0.18s ease-in-out;

  flex-shrink: 1;
  visibility: hidden;
}

.login-form--logged-in .login-form__password--missing-password .login-form__button {
  pointer-events: all;
  opacity: 100%;

  max-width: 8.2rem;

  margin: 0;
  padding: 0 1.8rem;

  transition: max-width .18s ease-in-out, opacity .18s ease-in-out, visibility 0s 0s ease-in-out;

  visibility: visible;
}

.login-form__secondary-btn {
  width: max-content;

  background: transparent;

  padding-left: 0;
  padding-right: 0;
  border: none;

  color: var(--blue-3);
  font-family: var(--sans-stack);
  font-size: 1.2rem;
  font-weight: 700;
  white-space: pre;

  text-decoration: none;
}

.login-form .login-form__code-cancel {
  position: absolute;
  overflow: hidden;

  width: 2.4rem;
  height: 2.4rem;
  top: 0.8rem;
  left: 0.8rem;

  background: transparent;

  padding-left: 0;
  padding-right: 0;
  border: none;

  color: transparent;
  font-family: var(--sans-stack);
  font-size: 0;
  font-weight: 700;
  white-space: pre;

  text-decoration: none;
}

.login-form.login-form--logged-in .login-form__code-cancel {
  width: 1.8rem;
  top: 0.4rem;
  left: 1.2rem;

  color: transparent;
  font-size: 1.3rem;
  font-weight: 800;
  text-indent: -8px;


  transition: color .18s ease-in-out, text-indent .18s ease-in-out;
}

.login-form.login-form--logged-in .login-form__code-cancel:hover {
  width: auto;
  color: var(--red-3);
  text-indent: 0;
}

.login-form.login-form--logged-in .login-form__code-cancel::before {
  position: relative;
  display: inline-block;

  width: 1.8rem;
  top: 1.5px;

  margin-right: 0.4rem;

  color: var(--slate-2);
  font-size: 1.6rem !important;

  transform: rotate(180deg);
  transition: color .18s ease-in-out
}

.login-form.login-form--logged-in .login-form__code-cancel:hover::before {
  content: "\f090";
  color: var(--red-3);
}

.login-form .login-form__code-cancel::before {
  content: "\f00d";

  color: var(--blue-5);
  font-family: 'fontawesome';
  font-size: 1.8rem;

  transition: color .18s ease-in-out;
}

.login-form .login-form__code-cancel:hover::before {
  color: var(--blue-3);
}

.login-form.login-form--logged-in .login-form__code-cancel:hover ~ * {
  pointer-events: none;
  opacity: 25%;
  transition: opacity .18s ease-in-out;
}

.login-form__secondary-btn:hover, .login-form__secondary-btn:focus {
  text-decoration: underline;
}

.login-form__link {
  pointer-events: none;

  color: black;
  font-weight: 400;

  text-decoration: underline
}

.login-form input.login-form__code-input::placeholder {
  color: var(--blue-5);
  font-weight: 400;
  transition: color .18s ease-in-out;
}

.login-form input.login-form__code-input:hover {
  border-color: var(--bold-blue-3);
}

.login-form input.login-form__code-input:focus {
  border-color: var(--bold-blue-3);
  border-width: 2px;
}

.login-form input.login-form__code-input:focus::placeholder {
  color: transparent;
}

.login-form__user-card--unverified > .login-form__sign-out {
  display: none;
}

.login-form__sign-out {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  top: 0;
  right: 0;

  background: transparent;

  margin: 0;
  padding: 1.2rem;
  border: none;

  color: var(--slate-3);
  font-size: 1.3rem;
  font-weight: 400;

  transition: color .18s ease-in-out;
}

.login-form__sign-out:hover, .login-form__sign-out:active {
  color: var(--red-3);
}

.login-form__options {
  pointer-events: all;
  position: relative;
  display: flex;
  opacity: 100%;

  margin: 0.8rem 0 0.2rem; /* force the login form to 15.6rem height to match code input box */
  padding: 0;
  border: none;

  transition: opacity .18s ease-in-out, transform .18s ease-in-out, visibility 0s 0s ease-in-out;

  flex-flow: row;
}

.login-form__code {
  pointer-events: none;
  position: absolute;
  display: flex;
  opacity: 0%;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;
  overflow: hidden;

  width: 100%;
  height: calc(100% - 0.8rem);
  top: 0.8rem;
  left: 0;

  background: white;
  background-color: white;
  box-shadow: var(--elevation-0);

  margin: 0 auto;
  padding: 0.8rem;
  border-radius: 4px;

  transition: opacity .18s ease-in-out, visibility 0s 0.28s ease-in-out;

  flex-flow: column;
  gap: 2px;
  visibility: hidden;

}

.login-form__user-card--verify .login-form__code {
  pointer-events: all;
  opacity: 100%;

  box-shadow: 0 0 0 1px var(--slate-4), var(--elevation-2);

  transition: opacity .18s .18s ease-in-out, visibility 0s 0s ease-in-out;

  visibility: visible;
}

.login-form__code .login-form__code-title {
  width: 100%;

  margin-top: 0.2rem;
  margin-bottom: -0.3rem;

  color: var(--black);
  text-align: center;
  font-family: var(--sans-stack);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;

  transition: opacity .18s ease-in-out;
}

.login-form__code .login-form__warning {
  justify-content: center;

  height: auto;

  padding-bottom: 1.2rem;

  text-align: center;
  line-height: 1;
}

.login-form__label b {
  opacity: 85%;
  overflow: hidden;
  text-overflow: ellipsis;

  margin-bottom: -3px;
  padding-bottom: 2px;

  color: var(--slate-1);
  font-family: var(--serif-stack);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: pre;

  border-bottom: dotted 1px var(--slate-1);
}

.login-form__code .login-form__label {
  justify-content: center;

  width: calc(100% - 1.6rem);
  height: auto;

  color: var(--slate-2);
  text-align: center;
  font-family: var(--serif-stack);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  white-space: pre;

  transition: opacity .18s ease-in-out;
}

.login-form__label--hidden {
  opacity: 0%;
}

.login-form__code-block {
  display: flex;
  justify-content: center;

  margin: 1.8rem 0 0;

  transition: opacity .18s ease-in-out;

  gap: 0.8rem
}

.login-form__code-block .login-form__code-input {
  display: flex;
  align-items: center;

  width: 4.8rem;
  height: 5.4rem;

  margin: 0;

  text-align: center;
  font-size: 3.2rem;
  font-variant-numeric: tabular-nums;
  line-height: 5.2rem;
  text-transform: uppercase;

  transition: border .08s ease-in-out, box-shadow .18s ease-in-out, background-color .08s ease-in-out;

  border-color: var(--bold-blue-3);
  flex-grow: 1;
}


.login-form__code-block input.login-form__code-input:valid {
  background: var(--bold-blue-3);
  color: white !important;

  border-color: var(--bold-blue-3) !important;
}

.login-form__code-block--error .login-form__code-input {
  box-shadow: 0 0 0 0.5px var(--red-3) !important;

  border-color: var(--red-3) !important;
}

.login-form .login-form__code-block--error .login-form__code-input::placeholder {
  opacity: 55%;
  color: var(--red-5);
}

.login-form .login-form__code-loading {
  position: absolute;
  z-index: 100;

  top: calc(50% + 1.4rem);
  left: 50%;

  color: var(--blue-3);

  transform: translate(-50%, -50%);
}

.login-form--verify .login-form__options,
.login-form--verify .login-form__password {
  opacity: 0% !important;
  transition: opacity 0s .28s ease-in-out, visibility 0s .28s ease-in-out, transform 0s .28s ease-in-out !important;

  visibility: hidden !important;
}

.login-form.login-form--loading > :not(.progress-spinner) {
  pointer-events: none;
  user-select: none;
  opacity: 33%;
}

.login-form .login-form__loading {
  pointer-events: none;
  position: absolute;
  opacity: 0%;
  z-index: 10;

  top: 50%;
  left: 50%;

  color: var(--bold-blue-3);

  transform: translate(-50%, -50%);
  transition: opacity .18s ease-in-out;
}

.login-form--loading .login-form__loading {
  opacity: 100%;
}

.login-form__button .login-form__password-loading {
  position: absolute;
  opacity: 0%;
  z-index: 100;

  top: 50%;
  left: 50%;

  color: white;

  transform: translate(-50%, -50%);
  transition: opacity .18s ease-in-out, visibility 0s 0.18s ease-in-out;

  visibility: hidden;
}

.login-form__password--loading .login-form__button {
  pointer-events: none;

  color: transparent;

  transition: opacity .18s ease-in-out, visibility 0s 0s ease-in-out;

  visibility: visible;
}

.login-form .login-form__password--loading .login-form__password-loading {
  position: absolute;
  opacity: 100%;

  visibility: visible;
}

.login-form .login-form__password--loading .text-input {
  pointer-events: none;
  opacity: 55%;
}

.login-form__code-send {
  width: fit-content;

  margin: -0.3rem auto 0;

  color: var(--slate-2);
  text-align: center;
  font-family: var(--serif-stack);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8;
  white-space: pre;

  transition: color .18s ease-in-out, opacity .18s ease-in-out;

  text-decoration: none !important;
}

.login-form__code-send span {
  box-shadow: inset 0 0 0 0 currentColor;

  padding-bottom: 0;

  color: var(--bold-blue-3);
  font-family: var(--sans-stack);
  font-weight: 600;

  transition: box-shadow .18s ease-in-out;
}

.login-form__code-send:hover span,
.login-form__code-send:focus span {
  box-shadow: inset 0 -2px 0 0 currentColor;
}

.login-form__code-send--sent {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--green-3) !important;

  text-decoration: none !important;
}

.login-form__code-send--sent::before {
  content: "\f00c";

  margin-right: 0.4rem;

  font-family: 'fontawesome';
  font-size: 1.4rem;
}

@media (width <= 380px) {
  .login-form__code-block {
    margin: 1.6rem 0 0.8rem;

    gap: 0.4rem
  }
  .login-form__code .login-form__code-title {
    margin-bottom: -0.2rem;
    font-size: 2rem;
  }
  .login-form__code .login-form__label {
    font-size: 1.4rem;
  }
  .login-form .login-form__code-cancel {
    top: 0.2rem;
    left: 0.2rem;
  }
  .login-form__code-block .login-form__code-input {
    width: calc((100% / 6) - (2.8rem / 6));
    min-width: calc((100% / 6) - (2.8rem / 6));
    max-width: calc((100% / 6) - (2.8rem / 6));
    height: auto;

    aspect-ratio: 0.85;
  }
}
.progress-spinner {
  --size: 28;
  --progress: 0;
  --stroke: 4;
  box-sizing: border-box;
  position: relative;
  opacity: 100%;
  z-index: 1;

  width: calc(1px * var(--size));
  height: calc(1px * var(--size));

  background: transparent;

  margin: auto;
  padding: 0;
  border: 0;

  text-align: center;

  transition: opacity .28s;
}

.progress-spinner--small {
  --size: 20;
  --stroke: 2;
}

.progress-spinner--large {
  --size: 38;
  --stroke: 5;
}

.progress-spinner::before {
  content: attr(data-icon);
  position: absolute;
  display: flex;
  opacity: 100%;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  font-family: 'fontawesome';
  font-size: 1.1rem;

  transition: opacity .28s;
}

.progress-spinner::after {
  content: counter(progress);
  position: absolute;
  display: flex;
  opacity: 0%;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  text-align: center;
  font-family: var(--serif-stack);
  font-size: 1.1rem /* width: 100%; */;
  font-weight: 700;
  font-variant-numeric: tabular-nums;

  transition: opacity .28s;

  counter-reset: progress var(--progress);
}

.progress-spinner:hover::before { opacity: 0%; }

.progress-spinner:hover::after { opacity: 100%; }

.progress-spinner--small::before { top: 0; font-size: 1rem; }

.progress-spinner--small::after { font-size: 0.9rem;

 letter-spacing: -1px; }

.progress-spinner--large::before, .progress-spinner--large::after {
  top: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.progress-ring {
  position: absolute;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-ring--indeterminate {
  animation: progress-ring-infinite 0.48s linear infinite;
}

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

.progress-ring__circle {
  --radius: calc((var(--size) / 2) - (var(--stroke) / 2));
  fill: transparent;

  stroke: currentColor;
  stroke-width: var(--stroke);
  stroke-dasharray: calc(var(--radius) * 2 * 3.14);
  stroke-dashoffset: calc( 1px * (var(--radius) * 2) * 3.14 * (1 - (var(--progress) / 100)));

  transition: stroke-dashoffset 0.35s;

  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  r: var(--radius);
}

.progress-spinner--Infinity::after {
  color: transparent;
}
.text-input {
  --height: 3.6rem;
  position: relative;
  display: flex;

  height: var(--height);
  min-height: var(--height);

  font-size: 1.8rem;
}

.text-input[data-cta]::before {
  content: "\f067" "\00a0" attr(data-cta);
  cursor: pointer;
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  opacity: 100%;
  align-items: center;
  justify-content: center;
  z-index: 1;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: white;

  border: 2px dashed currentColor;
  border-radius: 0.4rem;

  color: var(--slate-3);
  text-align: left;
  font-size: 1.6rem;
  font-weight: 700;

  transition: opacity .18s ease-in-out, color .18s ease-in-out;
}

.text-input[data-cta]:hover::before {
  color: var(--bold-blue-3);
}

.text-input[data-cta]:focus-within::before {
  opacity: 0%;
}

.text-input.text-input--small {
  --height: 3.6rem;
  font-size: 1.6rem;
}

.text-input.text-input--large {
  --height: 4.2rem;
  font-size: 2rem;
}

.text-input .text-input__input {
  width: 100%;
  max-width: unset;
  height: var(--height);
  min-height: var(--height);

  border: 1px solid var(--slate-3);
  border-radius: 0.4rem;
}

.text-input .text-input__input[type=password] {
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- Jost has really small dots that don't look good! */
  font-family: 'Arial';
}

input.text-input__input--warning {
  border: 1px solid var(--red) !important;
}

.text-input--warning {
  display: flex;

  flex-direction: column;
}

.text-input__input::placeholder {
  color: transparent;
}

.text-input__input:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 50%;

  background-color: white;
}

.text-input__input:disabled + .text-input__label {
  opacity: 50%;
}

.text-input:hover .text-input__input:not(:disabled), .text-input__input:focus {
  box-shadow: var(--elevation-2);

  border-color: var(--blue-3) !important;
}

.text-input.text-input--warning .text-input__input:not(:disabled), .text-input__input.text-input--warning:focus {
  border-color: var(--red-3) !important;
}

.text-input__label {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 100%;
  height: var(--height);
  top: 0;
  left: 0;
  bottom: 0;

  padding: 0 0 0 0.9rem;

  color: var(--slate-3);
  font-size: inherit;
  line-height: var(--height);
  white-space: pre;

  transform-origin: 0 0;
  transition: color .13s ease-in-out, transform .18s ease-in-out, font-weight .18s ease-in-out, opacity .18s ease-in-out;
}

.text-input__input:focus + .text-input__label, .text-input__input:not(:placeholder-shown) + .text-input__label {
  color: var(--blue-3);
  font-weight: 700;
  text-shadow: 0 0 12px white;

  transform: scale(.66) translateY(calc(-50% - 0px)) translateX(0.4rem);
}

.text-input__input:focus + .text-input__label, .text-input__input:hover:not(:placeholder-shown) + .text-input__label {
  color: var(--blue-3);
}

.text-input__input + .text-input__label::before {
  content: "";
  position: absolute;
  opacity: 0%;
  z-index: -1;

  width: calc(100% - 0.8rem);
  height: 2px;
  top: 50%;
  left: 0.4rem;

  background-color: white;

  transition: opacity .18s ease-in-out;
}

.text-input--warning .text-input__input:focus + .text-input__label,
.text-input--warning .text-input__input:not(:placeholder-shown) + .text-input__label {
  color: var(--red-3) !important;
}

.text-input__input--warning .text-input__label::before {
  height: 4px !important;
  top: 50% !important;
}

.text-input__input:focus + .text-input__label::before, .text-input__input:not(:placeholder-shown) + .text-input__label::before {
  opacity: 100%;
}

.text-input__warning {
  position: absolute;
  z-index: 1;

  top: -0.8rem;
  right: 0.8rem;

  background-color: transparent;

  padding: 0.2rem 0.4rem;

  color: var(--red);
  font-size: 1.2rem;
  line-height: 1;
}

.text-input__warning::before {
  content: "";
  position: absolute;
  opacity: 100%;
  z-index: -1;

  width: calc(100% + 0rem);
  height: 2px;
  top: calc(50% - 1px);
  left: 0;

  background-color: white;

  transition: opacity .18s ease-in-out;
}
.file-panel__empty {
  display: flex;
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;

  margin: 0;

  color: var(--slate-3);
  text-align: center;
  font-size: 2.8rem;
  line-height: 1;

  flex-flow: column;
}

.file-panel__empty::before {
  content: "\f660";
  font-family: 'fontawesome'; 
  display: flex;

  margin: 0 0 0.8rem;

  font-size: 5.2rem;
}

.file-panel__steps {
  display: grid;
  list-style: none;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: calc(100vh - 8.2rem);

  margin: 0;
  padding: 0;

  grid-template-columns: 100%;
  grid-template-rows: 100%;
}

.file-panel__step {
  pointer-events: none;
  opacity: 0%;
  overflow: auto;
  display: flex;
  flex-flow: column;

  max-height: 0;

  transform: translateY(4.8rem);
  transition: opacity .18s ease-in-out, transform .18s ease-in-out, max-height 0s .18s ease-in-out;

  grid-column: 1;
  grid-row: 1;
}

.file-panel__step {
  pointer-events: all;
  opacity: 100%;

  max-height: 999vh;

  transform: translateY(0);
  transition: opacity .18s ease-in-out, transform .18s ease-in-out, max-height 0s 0s ease-in-out;
}
.clipboard-text {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;

  width: fit-content;
  min-width: 24rem;
  max-width: 100%;

  background-color: white;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='rgb(46, 113, 178)' d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'></path></svg>");
  background-position: 0.7rem 0.5rem;
  background-size: 1.8rem;
  background-clip: padding-box;
  box-shadow: none;

  margin: 0;
  padding: 0.6rem;
  padding-left: 3.2rem;

  /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='rgb(46, 113, 178)' d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'></path></svg>"); */
  /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='rgb(46, 113, 178)' d='M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z'></path></svg>"); */
  border: 2px dashed var(--light-blue);
  border-radius: 4px;

  color: var(--blue-4);
  font-size: 1.4rem;
  white-space: pre;

  transition: color .28s ease-in-out, border-color .28s ease-in-out, box-shadow .28s ease-in-out;

  background-repeat: no-repeat;
}

.clipboard-text--copied {
  text-align: center;
  font-weight: 600;
}

.clipboard-text:hover {
  box-shadow: var(--elevation-2);
  color: var(--blue);

  border-color: var(--blue);
}
.delete-button {
  position: relative;
  display: flex;
  align-items: center;

  max-width: 150px;
  height: 4.2rem;

  margin-bottom: 2.4rem;
}

.delete-button__label {
  pointer-events: none;
  position: absolute;
  opacity: 0%;

  left: 0;
  bottom: -1.4rem;

  color: var(--black);
  font-size: 1.2rem;
  font-weight: 600;
  white-space: pre;

  transition: opacity .15s ease-in-out;
}

.delete-button .delete-button__input {
  max-width: none;

  margin: 0 1.2rem 0 0.2rem;
  padding: 0.6rem 1rem;

  font-weight: 600;
  text-transform: uppercase;

  flex-grow: 1;
  letter-spacing: 3px;
}

.delete-button .delete-button__input::placeholder {
  opacity: 50%;

  color: var(--light-blue);
  text-align: center;

  transform: translateY(-1px);
}

.delete-button__button {
  width: 3.2rem;
  height: 3.2rem;

  background: var(--red);

  border: 0;
  border-radius: 50%;

  color: transparent;
}

.delete-button__button::before {
  content: "Delete";
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  width: 100%;
  height: 100%;
  top: 50%;
  right: 0;

  background: var(--red);
  box-shadow: var(--elevation-2);

  border-radius: 1.2rem;

  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;

  transform: translateY(-50%);
  transition:  width .15s ease-in-out, height .15s ease-in-out, border-radius .15s ease-in-out, color .15s ease-in-out;

  letter-spacing: 1px;
}

button.delete-button__button::after {
  content: "\f1f8";
  position: absolute;
  display: flex;
  opacity: 0%;
  align-items: center;
  justify-content: center;
  z-index: 2;

  width: 3.2rem;
  top: 0;
  bottom: 0;
  right: 0;

  color: white;
  font-family: 'fontawesome';
  font-size: 1.4rem;

  transition: opacity .15s ease-in-out;
}

.delete-button:focus-within button.delete-button__button::before {
  width: 3.2rem;
  height: 3.2rem;

  border-radius: 50%;

  color: transparent;
}

.delete-button:focus-within button.delete-button__button::after {
  opacity: 100%;
}

.delete-button:focus-within .delete-button__label {
  opacity: 100%;
}.transform-step__title {
  cursor: pointer;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  white-space: pre;

  width: 100%;
  height: 5.2rem;
  top: 0;
  left: 0;

  background-color: var(--bold-blue-3);
  box-shadow: 0 0.0rem 0 0 white, -0.8rem 0.0rem 0 0 white, 0.8rem 0.0rem 0 0 white, -0.8rem 0rem 0 0 white, 0.8rem 0rem 0 0 white;

  margin: 0;
  margin-bottom: -2.4rem;
  padding: 0.8rem 0.8rem 0.8rem 0;

  color: white;

  transition: margin .28s ease-in-out;
}

.ingest-button__warning {
  color: var(--red-3);
  text-align: center;
}

.ingest-button__success {
  color: var(--green-2);
  text-align: center;
}

.file-panel__step--transform__warning {
  width: 100%;
}

.transform-step__title--active {
  margin-bottom: 0;
}

.transform-step__title .delete-button {
  margin-left: 1.8rem !important;
}

.transform-step__run-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 2.4rem;

  background-color: transparent;

  margin: 0rem;
  min-width: 7.2rem;
  border: none;

  color: white;
  font-size: 1.6rem;
  font-weight: 700;
}

.transform-step__run-button .progress-spinner,
.transform__run-all .progress-spinner {
  position: absolute;
  top: calc(50% - 1px);
  left: 1.7rem;
  transform: translate(-50%, -50%) scale(0.8);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity .18s ease-in-out;
}

.transform__run-all .progress-spinner {
  left: 3.4rem;
}

.transform__loading .progress-spinner {
  opacity: 1;
}

.transform-step__run-button__errored::before {
  content: '\f057' !important;
  display: inline-block;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  margin-right: 0.8rem;

  font-family: 'fontawesome';

  transform-origin: 50% 50%;
}

.transform-step__run-button__success::before {
  content: '\f058' !important;
  display: inline-block;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  margin-right: 0.8rem;

  font-family: 'fontawesome';

  transform-origin: 50% 50%;
}

.transform-step__run-button::before {
  content: "\f2f9";
  display: inline-block;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  margin-right: 0.8rem;

  font-family: 'fontawesome';

  transform-origin: 50% 50%;
  transition: opacity .18s ease-in-out;
}


.transform-step__view-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent;

  margin: 0;
  border: none;

  color: white;
  font-size: 1.6rem;
  font-weight: 700;
}

.transform-step__view-button::before {
  content: "\f06e";
  content: "\e522";
  display: inline-block;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  margin-right: 0.8rem;

  font-family: 'fontawesome';

  transform-origin: 50% 50%;
}

.transform-step__delete-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent;

  margin: 0;
  border: none;

  color: transparent;
  font-size: 0;
  font-weight: 700;
}

.transform-step__delete-button::before {
  content: "\f1f8";
  color: var(--red-3);
  font-size: 1.4rem;
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0;
  font-family: 'fontawesome';
  transform-origin: 50% 50%;
  background: var(--red-3);
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -0.4rem 0 0.4rem;
}

.transform-step__run-button--running::before {
  transform: rotate(30deg);
}

.transform-step__title::before {
  content: "\f106";
  display: flex;
  align-items: center;
  justify-content: center;

  width: 5.2rem;
  height: 5.2rem;

  transform: rotate(-180deg);
  transition: transform .28s ease-in-out;
}

.transform-step__title--active::before {
  transform: rotate(0deg);
}

/* .transform-step__model .transform-step__title {
  border-radius: 0.8rem 0.8rem 0 0;
} */

.file-panel__ingest-settings {
  max-width: 42rem;
  margin: 4.2rem auto;
  display: flex;
  flex-flow: column;
  width: 100%;
  position: relative;
}

.file-panel__ingest-settings > * {
  transition: opacity .18s ease-in-out;
}

.file-panel__ingest-settings .progress-spinner {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .18s ease-in-out;
}

.file-panel__step--transform__warning {
  display: flex;
  flex-direction: column;
}

.ingest-button {
  height: 4.8rem;
  width: 100%;
  position: relative;
  padding: 0 1.8rem;
  border-radius: 0.4rem;
  background-color: var(--bold-blue-3);
  color: white;
  font-weight: bold;
  font-family: var(--sans-stack);
  border: none;
  font-size: 1.8rem;
  margin-top:0.8rem;
  transition: color .18s ease-in-out;
  box-shadow: var(--elevation-2);
}

.ingest-button::after {
  content: "\f56f";
  font-family: var(--fontawesome);
  margin-left: 1.2rem;
  margin-right: -1.8rem;
  font-size: 1.8rem;
}

.file-panel__ingest-settings--loading > :not(.ingest-button)  {
  opacity: 55%;
  pointer-events: none;
  cursor: wait;
}
.file-panel__ingest-settings--loading > .ingest-button  {
  color: transparent;
  pointer-events: none;
}

.file-panel__ingest-settings--loading .progress-spinner  {
  opacity: 1;
}

.file-panel__step--transform {
  overflow: hidden;
  text-align: left;
  padding-top: 7.2rem;
}

.file-panel__step--map {
  overflow: auto;
  width: 100%;
}

.transform-step {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.transform-step__functions-panel {
  position: absolute;
  z-index: 999;
  overflow: visible;

  width: 68rem;
  height: calc(100% + 2.8rem);
  top: 0;
  bottom: 0;
  right: 0;

  background-color: white;
  box-shadow: var(--elevation-6);

  margin: 0;
  padding: 0 1.8rem;

  transform: translateX(100%);
  transition: transform .28s ease-in-out;
}

.transform-step__functions-panel .data-select {
  overflow: auto;
  height: 100%;
  padding-bottom: 6.2rem;
}

.transform-step__functions-panel-close {
  pointer-events: none;
  position: fixed;
  opacity: 0%;
  z-index: -1;

  width: 100vw;
  height: 100vh;
  top: 0;
  left: calc(-100vw );

  background-color: rgb(0 0 0 / 15%);

  border: none;

  color: transparent;

  transition: opacity .18s ease-in-out;
}

.transform-step__functions-panel::after {
  content: "";
  display: block;
  width: 100%;
}

.transform-step__functions-panel--open {
  transform: translateX(0%);
}

.transform-step__functions-panel--open .transform-step__functions-panel-close {
  pointer-events: all;
  opacity: 100%;
}


.transform__option {
  width: 100%;
  margin: 1rem 0;
  font-size: 1.8rem;
}

.transform__option.transform__option--empty {
  --color: var(--slate-3);
  --hover-color: var(--slate-1);
  cursor: pointer;

  width: 100%;
  height: 3.6rem;

  background-color: transparent;
  background-image: none;

  margin: 1px 0;
  padding: 0;
  border: 2px dashed currentColor;
  border-radius: 0.4rem;

  color: var(--color);
  text-align: center;
  font-size: 2.9rem;
  line-height: 1;

  transition: box-shadow .18s ease-in-out, color .18s ease-in-out;
}

.transform__option.transform__option--empty:hover {
  color: var(--hover-color);
}

.transform__option.transform__option--empty.transform__option--float,
.transform__option.transform__option--empty.transform__option--number {
  --color: var(--gold-4);
  --hover-color: var(--gold-3);
}

.transform__option.transform__option--empty.transform__option--string {
  --color: var(--green-5);
  --hover-color: var(--green-3);
}

.transform__option.transform__option--empty.transform__option--int {
  --color: var(--red-5);
  --hover-color: var(--red-3);
}

.transform__option.transform__option--empty.transform__option--enum {
  --color: var(--purple-5);
  --hover-color: var(--purple-3);
}

.transform__option.transform__option--empty.transform__option--date {
  --color: var(--pink-5);
  --hover-color: var(--pink-2);
}

.transform__option.transform__option--empty.transform__option--boolean {
  --color: var(--blue-5);
  --hover-color: var(--blue-3);
}

.function-list__datum--cast {
  display: flex;
}

.function-list__keyword {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 3.6rem;

  margin: 0;
  padding-top: 2px;

  font-size: 1.4rem;
  font-weight: 700;
}

.transform-step__variables-menu {
  height: 5.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--bold-blue-3);
  color: white;
  padding: 0 1.8rem 0 0;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 999;
  cursor: pointer !important;
  user-select: none;

  font-size: 2rem;
  margin: 0;
  box-shadow: 0 2px 0 0 white;
}

.transform-step__variables-menu::before {
  content: "\f106";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  transform: rotate(-180deg);
  transition: transform .28s ease-in-out;
}

.transform-step__variables-menu--open::before {
  transform: rotate(0deg);
  user-select: none;
}

.transform-step__variables-menu-title {
  font-size: 2rem;
}

.transform-step__add-variable {
  border: none;
  background-color: transparent;
  color: white;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 0 1.8rem 0 4.2rem;
  border: 2px dashed white;
  height: 4.2rem;
  border-radius: 0.4rem;
  box-shadow: var(--elevation-2);
  position: relative;
  margin:  0 -1.3rem 0 auto;
  width: 18.4rem;
  transition: background-color .18s ease-in-out;
}

.transform-step__add-variable:hover {
  background-color: rgba(255,255,255,.15);
}

.transform-step__add-variable::before {
  content: "\f1b3";
  position: absolute;
  width: 4.2rem;
  height: 3.8rem;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: white;
}


.transform-step__variables {
  width: fit-content;
  min-width: 100%;
  overflow: hidden;
  height: 5.2rem;
  transition: height .28s ease-in-out;
  flex: 0 0 auto;
  margin: -0.8rem 0 -1.5rem;
}

.transform-step__variables--closed {
  
}

.transform-step__variables--open {

}

.transform-step__models {
  --property-gap: 1.2rem;
  position: sticky;
  display: flex;
  overflow: auto;
  background: white;
  padding: 0 0.8rem;

  width: 100%;
  height: 100%;
  top: 0;

  border-radius: 0.8rem 0.8rem 0 0;

  flex-flow: column;
  gap: var(--property-gap);
}

.transform-step__models::after {
  content: "";
  z-index: 1;

  height: 100%;

  background: white;
}

.transform-step__model {
  --property-height: 6.8rem;
  pointer-events: none;
  position: relative;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;

  width: 100%;
  height: 0;
  min-height: 0;

  background-color: white;

  transition: min-height .42s ease-in-out;

  border-bottom: 1px solid white;
  flex-flow: column;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: var(--property-gap);
}

.transform-step__model--active, .transform-step__model--variables {
  pointer-events: all;
  min-height: calc(var(--property-count) * (var(--property-height) + var(--property-gap)) + 0.8rem);
}

.transform-step__model--variables {
  padding: 0;
  margin: 0;
  list-style: none;
  min-height: calc(var(--property-count) * (var(--property-height) + var(--property-gap) + 2rem))
}

.transform-step__model--variables:empty::before {
  content: "No Variables";
  width: 100%;
  height: 9.2rem;
  color: var(--slate-3);
  font-size: 1.8rem;
  display: block;
  min-height: 9.8rem;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--serif-stack);
}

.transform-step__variable {
  padding: 0;
  margin: 0;
  border-left: 0.8rem solid var(--bold-blue-3);
  padding: 0.4rem 0 0 0.4rem;
  position: relative;
  border-radius: 0.4rem 0 0 0.4rem;
  overflow: hidden;
}

.transform-step__variable::before {
  content: "\f1b3";
  font-family: 'fontawesome';
  position: absolute;
  left: -0.6rem;
  top: 0.6rem;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  height: 2.8rem;
}

.transform-step__variable-name {
  height: 3.2rem;
  width: 24rem;
  margin-bottom: 0.8rem;
  background: white;
  color: var(--slate-1);
  font-weight: bold;
  box-shadow: -3.8rem 0 0 4px var(--bold-blue-3), 0 0 0 4px var(--bold-blue-3) !important;
  border-radius: 0.2rem 0.2rem 0 0;
  margin-left: 1.8rem;
  border: none;
}

.transform-step__variable-delete {
  position: absolute;
  top: 0;
  height: 4rem;
  width: 4rem;
  font-size: 0;
  color: transparent;
  background-color: transparent;
  border: none;
}

.transform-step__variable-delete::before {
  content: "\f1f8";
  font-size: 1.6rem;
  color: var(--slate-3);
  transition: color .18s ease-in-out;
}

.transform-step__variable-delete:hover::before {
  color: var(--red-3);
}

.transform-step__model .transform-step__field-value {
  opacity: 0%;
  transition: opacity .28s ease-in-out;
}

.transform-step__model--active .transform-step__field-value {
  opacity: 100%;
}

.transform-step__field-values {
  display: contents;
  list-style: none;

  margin: 0;
  padding: 0;

  flex-flow: column;
  gap: 0.8rem;
}

.transform-step__field-name {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;
}

.transform-step__pivot-columns {
  display: flex;
  list-style: none;
  gap: 0.8rem;
  padding: 0;
}

.transform-step__field-name-type {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--datum-color, var(--slate-3));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);

  margin: 0 0 0 0.4rem;
  padding: 0.2rem 0.8rem;
  border-radius: 0.4rem;

  color: white;
  font-size: 1.2rem;
}

.transform-step__field-name-type::before {
  content: "\f105";
  position: absolute;
  display: none;

  left: -1.4rem;

  color: var(--slate-3);
  font-family: "fontawesome";
  font-size: 1.4rem;
}

.transform-step__pivot-button {
  font-size: 1.6rem;
  margin: 0 0 0 auto;
  font-weight: bold;
  border: none;
  border-radius: 0.4rem;
  background-color: transparent;
  padding: 0.4rem 0.8rem;
  color: white;
  transition: background-color .18s ease-in-out, color .18s ease-in-out;
}

.transform-step__pivot-button::before {
  content: "\f2f1";
  display: inline-block;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  margin-right: 0.8rem;

  font-family: 'fontawesome';

  transform-origin: 50% 50%;
  transition: transform .18s ease-in-out;
}

.transform-step__pivot-button--checked {
  background: white;
  color: var(--bold-blue-3);
}

.transform-step__pivot-button--checked::before {
  transform: rotate(90deg);
}

.transform-step__field-value {
  position: sticky;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  width: fit-content;
  height: 6.8rem;
  min-height: var(--property-height);
  max-height: var(--property-height);
  left: 0;

  padding-left: 1.8rem;

  flex-flow: column;
}

.transform-step__field-value:first-of-type {
  --function-color: var(--blue-2);
  margin-top: -1.1rem;
  background-color: var(--blue-6);
  border-top: 0;
  border-radius: 0 0 0.4rem 0.4rem;
  justify-content: flex-start;
  min-width: 100%;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  transform: translate3d(0, 0, 0);
  will-change: height, min-height;
  padding: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  transition: height .18s ease-in-out, min-height .18s ease-in-out;
}

.transform-step__field-value--visible, .transform-step__field-value:first-of-type:focus-within {
  height: 4.6rem !important;
  min-height: 4.6rem !important;
}

.transform-step__field-value:first-of-type .function-list__bracket-open {
  margin-right: 0.8rem;
}

.transform-step__field-value:first-of-type .function-list__bracket-closed {
  margin-left: auto;
}

.transform-step__field-value:first-of-type .transform-step__field-name {
  text-transform: uppercase;
  background: var(--function-color);
  color: white;
  padding: 0.4rem 0.8rem;
  height: 3.8rem;
  display: flex;
  font-family: var(--serif-stack);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant: all-small-caps tabular-nums;
  white-space: pre;
  position: relative;
  margin-right: 0.8rem;
  margin-bottom: auto;
}

.transform-step__field-value:first-of-type .transform-step__field-name::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 3.8rem;
  height: 100%;
  bottom: 0;
  right: -4.2rem;
  background-color: transparent;
  box-shadow: -0.4rem 0 0 0 var(--function-color), -1rem 0 0 0 var(--function-color), -1.2rem 0 0 0 var(--function-color), -1.4rem 0 0 0 var(--function-color), -1.8rem 0 0 0 var(--function-color), -2.4rem 0 0 0 var(--function-color), -2.8rem 0 0 0 var(--function-color), -3rem 0 0 0 var(--function-color);
  border-radius: 50% / 60%;
}

.transform-step__field-value:first-of-type .transform-step__field-name::before {
  content: "\f2f1";
  margin-left: 0rem;
  margin-right: 0.8rem;
  color: white;
}

.transform-step__field-value:first-of-type::before {
  --shadow-color: white;
  content: "";
  box-sizing: border-box;
  position: absolute;
  display: block;
  z-index: 0;
  width: 100%;
  height: 0.7rem;
  left: 0;
  bottom: -1px;
  background: var(--pill-color);
  box-shadow: 0.4rem 0 0 0 var(--shadow-color), -0.4rem 0 0 0 var(--shadow-color);
  padding: 0 1.2rem 0 0.3rem;
  border-radius: 0 0 0.4rem 0.4rem;
  color: transparent;
  font-family: var(--serif-stack), "fontawesome";
  font-size: 1.2rem;
}

.transform-step__field-value:first-of-type .transform-step__field-name .transform-step__field-name-type {
  position: absolute;
  bottom: -0.6rem;
  left: 0px;
  margin: 0;
  border-radius: 0 0.4rem 0rem 0.4rem;
  font-size: 1.3rem;
  height: 1.3rem;
  box-shadow: none;
  border: none;
  padding: 0 0.8rem;
  font-variant: all-small-caps;
  font-weight: 700;
  font-variant: all-small-caps;
  line-height: 0.7rem;
  white-space: pre;
}

.transform-step__field-value:first-of-type .transform-step__field-name .transform-step__field-name-type::before {
  content: "\e3d6";
  font-family: "fontawesome";
}

.transform-step__field-value:first-of-type .function-list__bracket-closed::before {
  box-sizing: border-box;
  width: 3.8rem;
  height: 3.8rem;
  background-color: transparent;
  box-shadow: 0.8rem 0 0 0 var(--function-color), 1rem 0 0 0 var(--function-color), 1.2rem 0 0 0 var(--function-color), 1.4rem 0 0 0 var(--function-color), 1.6rem 0 0 0 var(--function-color), 1.8rem 0 0 0 var(--function-color), 2rem 0 0 0 var(--function-color), 2.2rem 0 0 0 var(--function-color), 2.4rem 0 0 0 var(--function-color), 2.6rem 0 0 0 var(--function-color), 2.8rem 0 0 0 var(--function-color), 3rem 0 0 0 var(--function-color);
  margin-left: -2rem;
  padding-left: 1.8rem;
  border-radius: 50% / 60%;
}

.function-list__mapping-button {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 3.8rem;

  background-color: transparent;

  padding: 0 1.2rem;
  border: 2px dashed var(--red-3);
  border-radius: 0.4rem;

  color: var(--red-3);
  font-weight: 700;
  white-space: pre;
}

.function-list__mapping-button--complete {
  background-color: var(--green-3);
  border: none;
  color: white;
}

.function-list__mappings h3 {
  margin: 0 0 0.8rem;
}

.function-list__regexp-mappings {
  position: relative;
  display: flex;
  list-style: none;
  overflow: auto;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  flex-flow: column;
  gap: 0;
}

.function-list__regexp-mappings .function-list__mappings-delete {
  color: var(--slate-3);
  border: none;
  padding: 0;
  background-color: transparent;
  transition: color .18s ease-in-out;
  font-size: 0;
}
.function-list__regexp-mappings .function-list__mappings-delete:hover {
  color: var(--red-3);
}

.function-list__regexp-mappings .function-list__mappings-delete::before {
  content: "\f1f8";
  font-size: 1.4rem;
}

.function-list__regexp-help {
  color: transparent;
  font-size: 0;
  height: fit-content;
  margin-bottom: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  box-shadow: none !important;
}

.function-list__regexp-help::before {
  content: "\f05a";
  position: relative;

  color: var(--slate-3);
  font-size: 1.3rem;

  top: -0.4rem;
  left: 0.4rem;

  transition: color .18s ease-in-out;
}

.function-list__regexp-help:hover::before {
  color: var(--slate-0);
  text-decoration: none !important;
}

.function-list__regexp-mappings:not(:last-of-type) {
  margin: 0 0 1.8rem;
}

.function-list__mappings-progress {
  list-style: none;
  overflow: auto;

  width: fit-content;
  min-width: 18rem;
  max-width: unset;
  height: 100%;
  flex-grow: 1;

  margin: 0 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

.function-list__mappings-progress li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;

  height: 4.8rem;
  min-height: 4.8rem;

  margin: 0 0 -1px;
  padding: 0.8rem 0.8rem 0.8rem 3.8rem;
  border: 1px solid var(--slate-4);

  font-family: var(--serif-stack);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  white-space: pre;
}

.function-list__mappings-progress li::before {
  content: "\f111";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.8rem;
  height: 100%;
  left: 0;

  color: var(--slate-4);
  font-family: 'fontawesome';
}

.mapping__value:nth-of-type(2) {
  border-radius: 0.4rem 0.4rem 0 0;
  overflow: hidden;
}

.mapping__value:last-child {
  border-radius: 0 0 0.4rem 0.4rem;
  overflow: hidden;
}

.function-list__regexp-mappings li {
  display: flex;

  /* border-bottom: 0.8rem solid transparent; */
  align-items: center;
  justify-content: space-between;

  height: 4.2rem;

  background-clip: padding-box;

  margin: 0;
  padding: 0 0.8rem;
  border-radius: 0.4rem;

  transition: background-color .18s ease-in-out, box-shadow .18s ease-in-out;

  flex-flow: row;
  gap: 0.8rem;
}

.function-list__regexp-mappings li:hover {
  background-color: var(--slate-5);
  box-shadow: -4px 0 0 0 var(--slate-5), 4px 0 0 0 var(--slate-5);
}

.function-list__regexp-mappings li select,
.function-list__regexp-mappings li .regex-input {
  margin: 0 auto 0 0;
  min-height: 3.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.function-list__regexp-mappings li select {
  height: 100%;
  min-height: unset;
  top: 0;
  max-width: 20rem;
}

.function-list__mappings {
  display: flex;

  width: calc(100vw - 1.6rem);
  height: calc(100vh - 3.6rem - 5.2rem);
  max-width: 82rem;

  padding: 0 1.8rem 1.8rem;

  flex-flow: row;
}

.function-list__mapping-buttons {
  position: sticky;
  display: flex !important;

  min-height: 4.8rem;
  left: 0;
  bottom: 0 !important;
  right: 0;

  gap: 0;
}

.function-list__mapping-buttons button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: -2px 0 0;
  color: inherit;
  font-weight: bold;
  font-family: var(--serif-stack);
  text-align: left;
  font-size: 2rem;
  font-variant-caps: all-small-caps;
  letter-spacing: -1px;
}

.function-list__mappings-progress .function-list__mapping-buttons--regexp {
  margin-bottom: 0.8rem;
  border-radius: 0.4rem;
  border: 2px dashed currentColor;
  color: var(--slate-3);
  transition: color .18s ease-in-out;
}

.function-list__mappings-progress .function-list__mapping-buttons--regexp:hover {
  color: var(--bold-blue-3);
}

.function-list__mappings-progress .function-list__mapping-buttons--regexp::before {
  content: "\2b";
  color: currentColor;
}

.function-list__mappings .function-list__parameter-input--select:first-of-type {
  display: none;
}

.function-list__mapping-button--valid {
  background-color: var(--green-3);
  color: white;
}

.function-list__mapping-button::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* content: "\f121"; */

  /* content: "!"; */
  width: 1.8rem;
  height: 1.8rem;

  margin: 0 0.8rem;
  border: 2px dashed currentColor;
  border-radius: 50%;

  font-size: 1.6rem;
  line-height: 1.8rem;
}

.function-list__mapping-button--valid::before {
  content: "\f058";
}

.transform-step__field-value--required .transform-step__field-name::before {
  content: "*";

  width: 1.6rem;
  height: 0;

  margin-left: -1.6rem;

  color: var(--red-3);
  font-size: 2.4rem;
  line-height: 0;
}

.transform-step__model .function-list__bracket-open,
.transform-step__model .function-list__bracket-closed {
  height: 3.8rem;
  font-size: 3.2rem;
}

.transform-step__model .function-list__bracket-closed {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;

  width: 2.4rem;

  margin-left: -0.2rem;
  border-radius: 0.4rem 0.4rem 0 0;

  text-align: left;
}

.transform-step__model .function-list__bracket-closed::before {
  box-sizing: border-box;

  width: 3.8rem;
  height: 3.8rem;

  background-color: transparent;
  box-shadow: 
    0.8rem 0 0 0 var(--function-color),
    1rem 0 0 0 var(--function-color),
    1.2rem 0 0 0 var(--function-color),
    1.4rem 0 0 0 var(--function-color),
    1.6rem 0 0 0 var(--function-color),
    1.8rem 0 0 0 var(--function-color),
    2rem 0 0 0 var(--function-color),
    2.2rem 0 0 0 var(--function-color),
    2.4rem 0 0 0 var(--function-color),
    2.6rem 0 0 0 var(--function-color),
    2.8rem 0 0 0 var(--function-color),
    3rem 0 0 0 var(--function-color);

  margin-left: -2rem;
  padding-left: 1.8rem;
  border-radius: 50% / 60%;
}

.transform-step__model .function-list__name,
.transform-step__model .function-list__parameter {
  display:flex;
  align-items: center;
  justify-content: center;

  height: 3.8rem;

  line-height: 1;
}

.transform-step__model .function-list__function {
  --function-color: var(--slate-1);
  position: relative;

  width: fit-content;
  height: 4.8rem;
  min-height: 4.8rem;

  background: transparent;
  box-shadow: none;

  border: none;

  transform: none !important;
}

.transform-step__model .function-list__function::before {
  display: none;
}

.transform-step__model .function-list__function .function-list__name::before {
  content: "\f661";

  /* padding-right: 0.8rem; */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.2rem;
  height: 100%;

  margin-right: 0.4rem;
  border-radius: 0.4rem 0 0 0.4rem;

  color: white;
  font-family: 'ArcherPro', 'fontawesome';
  line-height: 3.2rem;
}

.transform-step__model .function-list__function .function-list__name::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 3.8rem;
  height: 100%;
  bottom: 0;
  right: -4.2rem;

  background-color: transparent;
  box-shadow: 
    -0.4rem 0 0 0 var(--function-color), 
    -1rem 0 0 0 var(--function-color), 
    -1.2rem 0 0 0 var(--function-color), 
    -1.4rem 0 0 0 var(--function-color), 
    -1.8rem 0 0 0 var(--function-color), 
    -2.4rem 0 0 0 var(--function-color),
    -2.8rem 0 0 0 var(--function-color),
    -3rem 0 0 0 var(--function-color); 

  border-radius: 50% / 60%;
}

.function-list__name {
  padding-right: 1.4rem !important;
}

.transform-step__model .function-list__name {
  position: relative;
  justify-content: flex-start;
  overflow: visible;
  z-index: 1;

  margin: 0;
  padding-bottom: 0.6rem;
}

.transform__add-output-model {
  cursor: pointer;
  z-index: 999;

  width: 100%;
  height: 5.2rem;
  min-height: 5.2rem;
  max-height: unset;
  top: 0;
  left: 0;

  background-image: none;
  box-shadow: 0 0 0 2px white;

  margin: 0 0 -1rem;
  padding: 0 1.8rem;
  border: 2px dashed currentColor !important;

  color: var(--slate-3);
  text-align: left;
  font-size: 2rem;
  font-weight: 700;

  transition: color .18s ease-in-out, box-shadow .18s ease-in-out;
}

.transform__run-all {
  height: 5.2rem;
  box-shadow: var(--elevation-2);
  color: white;
  font-weight: bold;
  font-size: 1.6rem;
  border: none;
  background: var(--bold-blue-3);
  padding: 0 2.4rem;
  white-space: pre;
  position: relative;
  border-radius: 0.4rem;
}

.transform__loading::before {
  opacity: 0;
}

.transform__run-all::before {
  content: "\f2f9";
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.8rem;
  font-family: 'fontawesome';
  transform-origin: 50% 50%;
}

.transform__run-all--errored::before {
  content: '\f057' !important;
}

.transform__models-menu {
  display: flex;
  flex-flow: row;
  position: sticky;
  height: 5.2rem;
  gap: 0.8rem;
  padding: 0;
  margin: 0 0 -1rem;
  top: 0;
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
  left: 0;
}

.data-preview {
  --data-preview-first-column-width: 14.6rem;
  position: absolute;
  flex-flow: column;
  display: flex;
  list-style: none;
  z-index: 999;
  overflow: auto;
  background-color: white;
  /* box-shadow: var(--elevation-2); */

  width: 100%;
  height: 7.2rem;
  min-height: 7.2rem;
  top: 0;
  left: 0;

  margin: 0 0 -1.2rem;
  padding: 0;
  padding-bottom: 1.8rem;
  border-radius: 0px;

  overflow-y: hidden;
  transition: min-height .28s ease-in-out;
}

.data-preview--expanded {
  overflow-y: auto;
  min-height: calc(100vh - 8.2rem);
}

.data-preview > :not(.transform__source-columns) {
  opacity: 0;
  transition: opacity .18s ease-in-out;
}

.data-preview--expanded > :not(.transform__source-columns) {
  opacity: 1;
}

.transform__add-output-model:hover {
  color: var(--bold-blue-3);
}

/* .transform-step__models::before {
  content: "";
  position: absolute;

  width: calc(100% - 0.8rem);
  height: 0.9rem;
  top: 6.2rem;

  background: white;
} */

.transform__source-columns {
  position: sticky;
  top: 0;
  display: flex;
  list-style: none;
  z-index: 9999;

  width: fit-content;
  min-width: 100%;
  min-height: calc(6.2rem + 1.8rem);
  flex: 0 0 auto;
  top: 0;

  margin: 0 0 -1.2rem;
  padding: 0;
  padding-bottom: 1.8rem;
  border-radius: 0px;

}

.transform__source-columns::after {
  content: "";
  border: 1px solid var(--slate-3);
  box-shadow: var(--elevation-2);
  flex-grow: 1;
}

.transform__source-columns-toggle {
  background-color: transparent;
  border: none;
  font-family: var(--sans-stack);
  font-weight: bold;
  font-size: 1.4rem;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0.4rem 0.8rem 0;
  width: 100%;
  height: 100%;
  gap: 0;
  background: var(--slate-1);
  color: white;
  cursor: pointer !important;
  box-shadow: inset 3.6rem 0 0 0 var(--bold-blue-3), 3.6rem 0.8rem 0 0 var(--bold-blue-3);
}

.transform__source-columns-toggle-title {
  font-weight: bold;
  padding: 0;
  text-transform: uppercase;
  font-family: var(--sans-stack), 'fontawesome';
  font-size: 1.3rem;
  text-align: right;
  color: var(--slate-4);
  width: calc(100% - 2.6rem);
  line-height: 1;
  /* opacity: 0.55; */
  margin: 0.4rem 0rem 0.2rem 0;
}
.transform__source-columns-toggle::before {
  content: "\e522";
  font-family: fontawesome;
  position: absolute;
  left: 0.9rem;
  top: 2rem;
  color: white;
  font-size: 1.6rem;
  transform-origin: 50% 50%;
  transition: color .18s ease-in-out, transform .18s ease-in-out, font-size .18s ease-in-out;
}

.transform__source-columns-toggle::after {
  content: "\f077";
  font-family: fontawesome;
  position: absolute;
  left: 1rem;
  color: white;
  top: calc(50% + 1.4rem);
  transform: translateY(-50%) rotate(180deg);
  transform-origin: 50% 50%;
  transition: color .18s ease-in-out, transform .18s ease-in-out;
}

.transform__source-columns-toggle:hover::after {
  color: white;
  transform: translateY(calc(-50% + 0.4rem)) rotate(180deg);
}

.transform__source-columns-toggle:hover::before {
  color: white;
  transform: scale(1.1) rotate(7deg);
}

.data-preview--expanded .transform__source-columns-toggle::after {
  transform: translateY(calc(-50% - 0.55rem)) rotate(0deg);
  color: white;
  left: 1rem;
}

.data-preview--expanded .transform__source-columns-toggle::before {
  content: "\f077";
  color: white;
  left: 1rem;
  transform: scale(1) rotate(180deg) translateY(-0.55rem);
  font-size: 1.4rem;
}

.transform__source-columns > li:first-child {
  position: sticky;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
  width: var(--data-preview-first-column-width);

  height: 6.2rem;
  left: 0;

  background: white;
  box-shadow: 
    -11rem 0.8rem 0 0 var(--bold-blue-3),
    0 0.8rem 0 0 var(--slate-1),
    0 0.8rem 3px rgba(0,0,0,.55);

  margin: 0 -1px 0 0;
  padding: 0;
  border: none;
  overflow: hidden;
  border-radius: 0 0 0.4rem 0;

  font-size: 1.6rem;
  line-height: 1;
  white-space: pre;

  flex-flow: column;
}

.transform__record-count {
  margin: 0;
  padding: 0;
  line-height: 1.1;

  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
}

.transform__column-count {
  margin: 0;
  padding: 0;
  line-height: 1.1;
  font-size: 1.6rem;
  font-weight: 700;
}

.transform__record-count::after {
  content: "\e474";
  font-size: 1.1rem;
  top: -2px;
  position: relative;
  margin-left: 0.2rem;
  color: white;
  display: inline-block;
  width: 1rem;
  margin-right: -0.2rem;
}

.transform__column-count::after {
  content: "\f0da";
  content: "\e473";
  color: white;
  margin-left: 0.2rem;
  transform: rotate(180deg);
  font-size: 1.1rem;
  top: -1px;
  position: relative;
  display: inline-block;
  width: 1rem;
  margin-right: -0.2rem;
}

.mapping__column-type {
  position: relative;
  display: flex;

  width: fit-content;
  height: 1.6rem;
  min-height: 1.6rem;
  bottom: 0;

  background-color: var(--datum-color);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%);

  margin-bottom: -1.2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;

  color: white;
  font-family: var(--serif-stack);

  /* position: absolute; */
  font-size: 1.1rem;
  line-height: 1.6rem;
  white-space: pre;
}

.mapping__column-type.mapping__column-type--enum::before {
  content: "\e474";
  margin-right: 0.6rem;
  font-family: "fontawesome";
}

.transform__source-column {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  height: 6.2rem;

  background: white;

  margin: 0 -1px 0 0;
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--slate-3);
  box-shadow: var(--elevation-2);

  font-weight: 700;
  white-space: pre;

  transition: background-color .18s ease-in-out, border-color .18s ease-in-out, color .18s ease-in-out;

  flex-flow: column;
}

.transform__source-column::before {
  content: "\f111";
  color: var(--slate-5);
  transition: color .18s ease-in-out;
}

.transform__source-column:hover {
  cursor: pointer;
  z-index: 1;
  background-color: var(--slate-5);
}

.transform__source-column:hover label { cursor: pointer; }

.transform__source-column:hover::before {
  color: var(--slate-4);
}

.transform__source-column.transform__source-column--used {
  z-index: 1;

  background-color: var(--green-3);

  color: white;

  border-color: var(--green-2);
}

.transform__source-column.transform__source-column--ignored {
  z-index: 1;

  background-color: white;

  color: var(--green-5);

  border-color: var(--green-5);
}

.transform__source-column.transform__source-column--used::before {
  content: "\f058";
  color: white;
}

.transform__source-column.transform__source-column--ignored::before {
  content: "\f058";
  color: var(--green-5);
}

.transform__source-column.transform__source-column--ignored .mapping__column-type {
  background-color: white;
  box-shadow: inset 0 0 0 1px var(--green-5);

  color: var(--green-4);
  font-size: 0;
}

.transform__source-column.transform__source-column--ignored .mapping__column-type::before {
  content: "SKIP";

  margin: 0;

  font-family: var(--serif-stack);
  font-size: 1.1rem;
  font-weight: 700;
}

.mapping__column-enum-preview {
  pointer-events: none;
  position: absolute;
  display: grid;
  list-style: none;
  opacity: 0%;
  overflow: auto;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background-color: black;

  padding: 0.8rem;

  color: white;
  font-size: 1.1rem;

  transition: opacity .18s ease-in-out;

  grid-template-columns: auto auto;
}

.mapping__column-type:hover + .mapping__column-enum-preview:not(:empty) {
  opacity: 100%;
}

.mapping__value {
  user-select: none;
  transition: background-color .18s ease-in-out, opacity .18s ease-in-out;
}

.mapping__value:hover {
  cursor: pointer;
  background-color: var(--slate-5);
}

.mapping__value.mapping__value--match {
  pointer-events: none;
  background-color: var(--green-3);
  color: white;
  border-color: var(--green-3);
}

.mapping__value.mapping__value--match:not(:nth-child(2)) {
  box-shadow: inset 0 1px 0 0 white;
}

.mapping__value.mapping__value--dull {
  opacity: 55%;
}



.mapping__value.mapping__value--match::before {
  content: "\f058";
  color: white;
}

.model-transform__tooltip::before {
  content: '\f128';
  opacity: 55%;

  color: black;
  font-size: 1rem;
}

.model-transform__tooltip:hover::before {
  opacity: 100%;
  transition: opacity .18s ease-in-out;
}

.model-transform__tooltip {
  position: absolute;
  cursor: pointer;
  display: flex;
  align-items: center;

  width: fit-content !important;

  padding: 0.8rem 1.2rem;
}

.model-transform__tooltip > * {
  margin: 0 0 1.8rem;
}

.transform-step__run-button:hover .model-transform__tooltip {
  transition-delay: 0.33s;
  visibility: visible;
}.file__histogram {
  display: flex;
  flex-flow: column;
}


.data-preview__table {
  display: block;
  width: 100%;
}

.data-preview tr {
  display: flex;
}

.data-preview td {
  width: 100%;
  display: block;
}

.data-preview td:first-child {
  min-width: var(--data-preview-first-column-width);
  width: var(--data-preview-first-column-width);
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  color: var(--slate-3);
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  left: 2px;
  box-shadow: -2px 0 0 0 white;
  background-color: white;
}

.data-preview thead {
  position: sticky;

  top: 0;

  background-color: white;
  box-shadow: 0 0.1rem 0 0 rgb(0 0 0 / 15%);
}

.data-preview__header {
  position: relative;
  vertical-align: top;

  height: 5.2rem;

  padding: 0.8rem;

  text-align: left;
  font-size: 1.4rem;
  white-space: pre;
}

.data-preview__header--required::before {
  content: "*";
  display: inline-block;

  width: 1.2rem;
  min-width: 1.2rem;

  margin-left: -1.2rem;

  color: var(--red-3);
  text-align: left;
  font-size: 1.8rem;
  line-height: 0;
}

.data-preview__header--primary-key::before {
  content: "\f084";
  position: absolute;
  display: block;

  top: 1rem;
  left: -0.5rem;

  margin: 0 1rem 0 0;

  color: var(--red-3);
  font-family: 'fontawesome';
  font-size: 1.1rem;
  line-height: 1;

  transform: rotate(-45deg);
}

.data-preview__header:first-of-type {
  opacity: 0%;
}

.data-preview__cell {
  padding: 0.8rem;
  color: var(--datum-color);
  text-align: left;
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  max-width: var(--col-width, 9rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  margin: 0 -1px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 1;
  transition: max-width .18s ease-in-out;
}

.data-preview__cell--empty {
  color: var(--slate-4);
  font-family: var(--sans-stack);
  font-weight: 700;
}
.geojson-viewer {
  position: sticky;
  overflow: hidden;
  left: 0;

  width: 100%;
  display: flex;
  flex-grow: 1;

  margin: 0;
  padding: calc(100% * (9/21)) 0 0;
  border-bottom: 1px solid rgba(0,0,0,.15);
}

.geojson-viewer::before {
  position: absolute;
  opacity: 0%;
  z-index: 998;

  width: 100%;
  height: 100%;
  top: 0;

  /* content: ""; */
  left: 0;

  background-color: white;

  transition: opacity .18s ease-in;
}

.geojson-viewer--loading::before  {
  opacity: 85%;
}

.geojson-viewer .progress-spinner {
  pointer-events: none;
  position: absolute;
  opacity: 0%;
  z-index: 999;

  top: 50%;
  left: 50%;

  color: var(--bold-blue-3);

  transform: translate3d(-50%, -50%, 0);
  transition: opacity .18s ease-in-out;

  transition-delay: 1s;
}

.geojson-viewer--loading .progress-spinner {
  opacity: 100%;

  transition-delay: 0s;
}

.geojson-viewer .turf-editor {
  position: absolute;

  /* pointer-events: none !important; */
  z-index: 0;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  transform: translate3d(0, 0, 0);

  contain: strict;
}

/* TODO: Remove when fixed in aether. */
.geojson-viewer .turf-editor .keyboard-shortcuts {
  align-items: flex-start;
}

.geojson-viewer__map {
  aspect-ratio: 16 / 9;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.geojson-viewer__map > div {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.geojson-viewer__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 1.4rem;
  background-color: rgba(255,255,255,.33);
  backdrop-filter: blur(2px) brightness(1.09);
  pointer-events: none;
  padding: 1.8rem;
  height: 100%;
  min-width: 33%;
  box-shadow: var(--elevation-4); 
  opacity: 0;
  transition: opacity .18s ease-in-out;
  border-right: 1px solid rgba(0,0,0,.15);
  overflow: hidden;
}

.geojson-viewer__label--visible {
  opacity: 1;
}

.geojson-viewer__label dl {
  display: grid;
  grid-template-columns: auto 100%;
  gap: 0.4rem 0.8rem;
  padding: 0;
  margin: 0;
}

.geojson-viewer__label dt {
  font-weight: bold;
  white-space: pre;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.geojson-viewer__label dd {
  margin: 0;
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.geojson-viewer__label dt:first-of-type,
.geojson-viewer__label dd:first-of-type {
  --color: var(--bold-blue-3);
  color: white;
  background-color: var(--color);
  box-shadow: -1.8rem 0 0 0 var(--color), 0.8rem 0 0 0 var(--color);
  height: 2.8rem;
}

.geojson-viewer__label-select {
  z-index: 9;
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  width: 18.2rem;
}

.geojson-viewer .text-input {
  z-index: 9;
  position: absolute;
  top: 5.8rem;
  right: 1.8rem;
  width: 18.2rem;
}

.mapboxgl-ctrl-attrib-button {
  display: none;
}.ingest-settings {
  display: flex;
  flex-flow: column;
  gap: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.ingest-settings fieldset {
  display: flex;
  flex-flow: row;
  gap: 0.8rem;
  border: 1px solid var(--slate-3);
  margin-bottom: -1px;
  padding: 0.8rem;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  min-height: 5.4rem;
}
.ingest-settings fieldset:first-of-type {
  border-radius: 0.4rem 0.4rem 0 0;
}
.ingest-settings fieldset:last-of-type {
  border-radius: 0 0 0.4rem 0.4rem;
}
.ingest-settings fieldset:first-of-type:last-of-type {
  border-radius: 0.4rem;
}

.ingest-settings fieldset label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
  font-size: 1.4rem;
  flex-shrink: 1;
  width: 25%;
}

.ingest-settings--unknown fieldset label {
  width: 100%;
  color: var(--slate-3);
  flex-shrink: unset;
  flex-grow: 1;
  height: 4.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
}

.ingest-settings fieldset select {
  flex-grow: 1;
  margin: 0;
}.modal {
  pointer-events: none;
  position: fixed;
  display: flex;
  opacity: 0%;
  z-index: 9999;
  overflow: visible;

  min-width: min(36rem, calc(100vw - 2.4rem));
  max-width: calc(100vw - 1.8rem);
  height: auto;
  max-height: calc(100vh - 3.6rem);
  top: 50%;
  left: 50%;
  bottom: unset;

  background-color: transparent;
  box-shadow: var(--elevation-12);

  outline: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 1rem;

  /* transform: translate3d(-50%, -50%, 0); */

  transform: translate3d(calc(-50% - var(--left-offset)), calc(-50% - var(--top-offset)), 0) scale(var(--width-ratio), var(--height-ratio));
  transform-origin: 0 0;
  transition: transform .28s ease-in-out, opacity .28s ease-in-out, visibility .28s .28s ease-in-out, top .28s ease-in-out;

  flex-flow: column;
  visibility: hidden;
}

.modal:not(.modal--open) * {
  pointer-events: none !important;
}

.modal--open {
  pointer-events: all;
  opacity: 100%;

  transform: translate3d(-50%, -50%, 0);
  transition: transform .28s ease-in-out, opacity .28s ease-in-out, top .28s ease-in-out;

  visibility: visible;
}

.modal__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 4.8rem;

  background: white;

  margin: 0;
  padding: 0.8rem 1.8rem;
  border-radius: 0.8rem 0.8rem 0 0;

  font-size: 2rem;
}

.modal__content {
  position: relative;
  z-index: 1;
  overflow: auto;

  height: fit-content;
  max-height: calc(100vh - 3.6rem);

  background: white;

  border-radius: 0.8rem;
}

/* .modal > * {
  transform: translate3d(calc(-50% - var(--left-offset)), calc(-50% - var(--top-offset)), 0) scale(var(--width-ratio), var(--height-ratio));
  transform-origin: 0 0;
  transition: transform .28s ease-in-out, opacity .32s ease-in-out, visibility .28s .28s ease-in-out;
}

.modal--open > * {
  transform: translate3d(0, 0, 0) scale(1, 1);
} */

.modal__title + .modal__content {
  border-radius: 0 0 0.8rem 0.8rem;
}

.modal__overlay {
  cursor: initial;
  pointer-events: none;
  position: fixed;
  opacity: 0%;
  z-index: -1;

  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;

  background-color: rgb(0 0 0 / 55%);
  box-shadow: 0 0 0 100vw rgb(0 0 0 / 55%);

  border: none;

  color: transparent;

  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  transition: transform .14s ease-in-out, opacity .14s ease-in-out;

  overflow-y: auto;
}

.modal--open .modal__overlay {
  pointer-events: all;
  opacity: 100%;

  transition: transform .14s ease-in-out, opacity .14s ease-in-out;

  transition-delay: .14s;
}

.modal__overlay--clickable {
  cursor: pointer;
}

.modal__btn-close {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  width: 4.8rem;
  height: 4.8rem;
  top: 0;
  right: 0;

  background: transparent;
  box-shadow: none;

  outline: none;
  padding: 0;
  border: none;

  color: transparent;
  font-size: 0;
}

.modal__btn-close::before {
  content: "\f00d"; /* "times" icon from Font Awesome */
  color: var(--black);
  font-size: 1.8rem;
}
.data-select {
  padding: 0 0.8rem;
}

.data-select__search {
  width: 100%;
  max-width: unset;
  height: 4.8rem;

  margin: 0 0 0.8rem;
  padding: 0.8rem 1.8rem;
  border-radius: 0.4rem;

  font-size: 1.8rem;

  /* border: 1px solid var(--slate-3); */
}

.data-select__title {
  margin: 1.8rem 0 0.4rem;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.function-list {
  --function-color: var(--slate-1);
  box-sizing: border-box;
  display: flex;
  list-style: none;
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;

  padding: 0;

  flex-flow: column;
  gap: 0.8rem;
}

.function-list__function {
  --function-color: var(--pill-color) !important;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;

  width: 100%;
  height: 4.8rem;

  background-color: var(--blue-6);
  box-shadow: var(--elevation-2), inset 0 0 0 1px var(--slate-3);

  padding: 0;
  border-radius: 0.4rem;

  font-size: 1.8rem;

  transition: transform .18s ease-in-out;

  gap: 0.8rem;
}

.datum-list__datum {
  --function-color: var(--pill-color) !important;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;

  width: 100%;
  height: 4.8rem;

  background-color: var(--blue-6);
  box-shadow: var(--elevation-2), inset 0 0 0 1px var(--slate-3);

  padding: 0 0.8rem;
  border-radius: 0.4rem;

  font-family: var(--serif-stack);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant: all-small-caps;

  transition: transform .18s ease-in-out;

  gap: 0.8rem;
}

.function-list__function:hover {
  transform: scale(1.02);
}

.function-list__name {
  cursor: pointer;
  user-select: none;

  background-color: var(--function-color, var(--bold-blue-3));

  margin-right: auto;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem 0.4rem 0 0;

  /* font-weight: 600; */
  color: white;
  font-family: var(--serif-stack);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant: all-small-caps tabular-nums;
  white-space: pre;
}

.function-list__constant {
  cursor: pointer;
  user-select: none;

  background-color: var(--pill-color, var(--bold-blue-3));

  margin-right: auto;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;

  /* font-weight: 600; */
  color: white;
  font-size: 1.8rem;
  white-space: pre;
}

.function-list__function--constant .function-list__name {
  margin-right: 0;
}

.function-list__desc {
  user-select: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;

  width: 4.8rem;
  top: 1px;
  left: 0;
  bottom: 1px;

  background-color: transparent;
  background-clip: content-box;

  margin: 0;
  padding-left: 4.8rem;

  /* opacity: 0; */
  color: transparent;
  text-align: left;
  font-family: var(--sans-stack);
  font-size: 1.6rem;
  font-weight: 400;
  font-variant: none;
  line-height: 1;

  transition: color .18s ease-in-out, background-color .18s ease-in-out, width 0s .18s ease-in-out;
}

.function-list__desc:hover {
  opacity: 100%;

  width: calc(100% - 1px);

  background-color: var(--blue-6);

  border-radius: 0.4rem;

  color: var(--slate-1);

  transition: color .18s ease-in-out, background-color .18s ease-in-out, width 0s 0s ease-in-out;
}

.function-list__bracket-open::before {
  content: "\28";
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  color: var(--slate-3);
  font-family: "fontawesome";
}

.function-list__bracket-closed::before {
  content: "\29";
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  color: var(--slate-3);
  font-family: "fontawesome";
}


.function-list__returns::after {
  content: "\f061";
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  color: var(--slate-3);
  font-family: "fontawesome";
}

.function-list__rest::after {
  content: "\f141";
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  margin-top: 1.8rem;

  color: var(--slate-3);
  font-family: "fontawesome";
}


.datum-list__datum::before {
  content: var(--icon, "\f661");
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.8rem;
  min-width: 2.8rem;
  max-width: 2.8rem;
  height: 100%;

  /* font-family: "fontawesome"; */
  color: var(--slate-3);
  font-family: 'ArcherPro', 'fontawesome';
  line-height: 3.2rem;
}

.datum-list__datum--field::before {
  width: 1.8rem;
  min-width: 1.8rem;
  max-width: 1.8rem;

  padding-left: 0.2rem;
}

.datum-list__datum.datum-list__datum--field .function-list__name, 
.datum-list__datum.datum-list__datum--variable .function-list__name,
.function-list__datum--variable .function-list__name {
  display: block;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;

  height: 3rem;

  border-radius: 0.4rem;

  text-align: left;
  font-size: 1.6rem;
  font-variant: tabular-nums;
  line-height: 2.2rem;

  flex-shrink: 1;
}

.datum-list__datum.datum-list__datum--field::before {
  content: "\e474";
  font-size: 1.8rem;
}

.datum-list__datum--function::before {
  width: 3.2rem;
  min-width: 3.2rem;
  max-width: 3.2rem;
} 

.function-list__desc::before {
  content: "\f661";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.8rem;
  height: 100%;
  left: 0;

  padding-bottom: 1px;

  color: var(--slate-1);
  font-family: "fontawesome";
  font-size: 1.8rem;
}

.function-list__parameter {
  pointer-events: all;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;

  height: 3.8rem;

  background-color: var(--pill-color, var(--purple-3));

  padding: 0 0.8rem;
  border: none;
  border-radius: 0.4rem;

  color: white;
  font-family: var(--serif-stack);
  font-size: 1.6rem;
  font-weight: 800;
  font-variant: all-small-caps;
  text-transform: uppercase;
}

.function-list__datum--column .function-list__parameter {
  font-family: var(--font-stack);
  font-variant: unset;
  text-transform: none;
}


.function-list__parameter-input {
  position: relative;

  width: fit-content;
  height: calc(100% - 0.6rem);

  margin: 0 0 0 0.8rem;
  margin-right: -0.4rem;
  padding: 0 0.8rem;

  color: transparent;
  font-family: var(--serif-stack);
  font-size: 1.6rem;
  white-space: pre;
  text-transform: none;
}

.function-list__parameter .function-list__parameter-checkbox-input {
  position: absolute;
  opacity: 0%;
}

.function-list__parameter-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.2rem;
  height: 3.2rem;

  background-color: white;

  /* opacity: 0.95; */
  /* mix-blend-mode: hard-light; */
  box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 15%), 0 0 0 1px rgb(0 0 0 / 15%);

  margin-right: -0.8rem;
  border-radius: 0.2rem;

  color: var(--slate-3);
  font-family: var(--font-stack);
  font-size: 2rem;
  font-weight: 700;
}

.function-list__parameter-checkbox-input:checked + .function-list__parameter-checkbox-label {
  color: var(--blue-3);
}

.function-list__parameter-input--select {
  padding-right: 3rem;
}

.function-list__parameter-input--date {
  padding-right: 5.8rem;
}

.function-list__parameter-input--int,
.function-list__parameter-input--float {
  padding-right: 3rem;
  font-variant-numeric: tabular-nums;
}

.function-list__parameter input,
.function-list__parameter select {
  position: absolute;

  width: calc(100%);
  max-width: unset;
  height: 3.2rem;
  min-height: unset;
  right: 0;

  background-color: white;

  /* mix-blend-mode: hard-light;
  opacity: 0.9; */
  box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 15%), 0 0 0 1px rgb(0 0 0 / 15%);

  margin: 0;
  padding: 1px 0.8rem 0;
  border: none;
  border-radius: 0.2rem;

  color: var(--black);
  font-family: var(--serif-stack);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.function-list__parameter select:disabled {
  opacity: 100%;

  background-color: transparent;
  background-image: none;
  box-shadow: none;

  padding: 0;

  color: white;
  text-align: center;
}

.transform-step__field-values .function-list__parameter {
  cursor: pointer;
  pointer-events: all;
  white-space: pre;
}

.function-list__constants {
  display: grid;
  list-style: none;

  margin: 0;
  padding: 0;

  gap: 0.8rem;
  grid-template-columns: auto auto auto;
}

.function-list__system {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.8rem;
  grid-template-columns: 1fr 1fr;
}

.function-list__fields {
  display: grid;
  list-style: none;

  margin: 0;
  padding: 0;

  gap: 0.8rem;
  grid-template-columns: calc(50% - 0.4rem) calc(50% - 0.4rem);
}

.function-list__datum--unset {
  --pill-color: var(--slate-4);

  /* background-color: var(--red-3); */
  /* border: none;
  box-shadow: none;
  color: white;
  font-weight: bold;
  display: flex;
  flex-shrink: 0;
  width: fit-content; */
  padding: 0 1.8rem 0.1rem 0.8rem;
}

.function-list__datum--unset::before {
  content: "\f00d";

  /* color: var(--pill-color); */
  position: relative;

  top: 2px;

  /* color: var(--red-3); */
  /* opacity: 0.33; */
  font-size: 2.2rem;
}

.function-list__datum--unset .function-list__constant {
  box-sizing: border-box;

  height: 2.9rem;

  background-color: transparent;

  margin-top: 2px;
  border: 2px dashed currentColor;

  color: var(--pill-color);
  font-weight: 700;
  line-height: 1.6rem;

}

.function-list__datum--empty.function-list__datum--required {
  width: 12rem;
  min-width: 12rem;
}

.function-list__datum--empty.function-list__datum--optional {
  width: 3.8rem;
  min-width: 3.8rem;
  max-width: 3.8rem;
}

.function-list__datum--empty.function-list__datum--optional .transform__option {
  font-size: 0;
}

.function-list__datum--empty.function-list__datum--optional .transform__option::before {
  content: "\f141";
  position: relative;

  top: 0.4rem;

  font-family: "fontawesome";
  font-size: 1.8rem;
}

.function-list__datum--column {
  --pill-color: var(--bold-blue-3);

  /* --icon: "\f866"; */
  --icon: "\e474";
}

.function-list__datum--column .function-list__parameter::before {
  content: var(--icon);
  margin: 0 0.8rem 0 0.4rem;
  font-family: "fontawesome";
}

.function-list__datum--function {
  --pill-color: var(--slate-1) !important;
  --icon: "\f86";
  overflow: visible;
}

.function-list__datum--function[data-args-count="0"] .function-list__bracket-open,
.function-list__datum--function[data-args-count="0"] .function-list__bracket-closed,
.function-list__datum--function[data-args-count="0"] .function-list__name::after {
  display: none !important;
}

.transform-step__model .function-list__datum--function {
  --info-color: var(--slate-3);
  --info-content: "UNKNOWN";
}

.transform-step__model .function-list__datum--function::before {
  --shadow-color: white;
  content: "";
  box-sizing: border-box;
  position: absolute;
  display: block;
  z-index: 1;

  width: 100%;
  height: 0.7rem;
  left: 0;
  bottom: 2px;

  background: var(--info-color);
  box-shadow: 0.4rem 0 0 0 var(--shadow-color), -0.4rem 0 0 0 var(--shadow-color);

  padding: 0 1.2rem 0 0.3rem;
  border-radius: 0 0 0.4rem 0.4rem;

  color: transparent;
  font-family: var(--serif-stack), "fontawesome";
  font-size: 1.2rem;

  /* font-variant: all-small-caps; */
  font-weight: 700;
  font-variant: all-small-caps;
  line-height: 0.7rem;
  white-space: pre;
}

.transform-step__model .function-list__datum--function::after {
  content: var(--info-content);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  height: 0.5rem;
  left: 0;
  bottom: 0.4rem;

  background: var(--info-color);

  padding: 0.4rem 1.2rem 0.4rem 1.4rem;
  border-radius: 0 0.4rem;

  color: white;
  font-family: var(--serif-stack), "fontawesome";
  font-size: 1.3rem;
  font-weight: 700;
  font-variant: all-small-caps;
  line-height: 0;
  white-space: pre;
}

.transform-step__model .function-list__datum--function.function-list__datum--any {
  --info-content: "\e3d6   ANY";
  --info-color: var(--datum-color-any);
}

.transform-step__model .function-list__datum--function.function-list__datum--string {
  --info-content: "\e3d6   STRING";
  --info-color: var(--datum-color-string);
}

.transform-step__model .function-list__datum--function.function-list__datum--enum {
  --info-content: "\e3d6   " attr(data-enum-type) " ENUM";
  --info-color: var(--datum-color-enum);
}

.transform-step__model .function-list__datum--function.function-list__datum--boolean {
  --info-content: "\e3d6   BOOL";
  --info-color: var(--datum-color-boolean);
}

.transform-step__model .function-list__datum--function.function-list__datum--int {
  --info-content: "\e3d6   INT";
  --info-color: var(--datum-color-int);
}

.transform-step__model .function-list__datum--function.function-list__datum--float {
  --info-content: "\e3d6   FLOAT";
  --info-color: var(--datum-color-float);
}

.transform-step__model .function-list__datum--function.function-list__datum--date {
  --info-content: "\e3d6   DATE";
  --info-color: var(--datum-color-date);
}

.transform-step__model .function-list__datum--function.function-list__datum--blob {
  --info-content: "\e3d6   BYTES";
  --info-color: var(--datum-color-blob);
}

.transform-step__model .function-list__datum--function.function-list__datum--geometry {
  --info-content: "\e3d6   GEOMETRY";
  --info-color: var(--datum-color-geometry);
}

.transform-step__model .function-list__datum--function.function-list__datum--null {
  --info-content: "\e3d6   NULL";
  --info-color: var(--datum-color-boolean);
}

.transform-step__model .function-list__datum--function.function-list__datum--variable {
  --info-content: "\f1b3   VARIABLE";
  --info-color: var(--bold-blue-3);
}

.function-list__datum--variable {
  --pill-color: var(--bold-blue-3);
  --icon: "\f1b3";
}


.function-list__datum--variable.function-list__datum--pivot {
  --pill-color: var(--blue-2);
  --icon: "\f2f1";
}

.function-list__datum--variable-missing {
  --pill-color: var(--red-3);
}

.transform-step__field-value .function-list__datum--variable .function-list__parameter::before {
  content: var(--icon);
  margin: 0 0.8rem 0 0.4rem;
  font-family: "fontawesome";
}

.transform-step__field-value .function-list__datum--variable .function-list__parameter {
  font-family: var(--font-stack);
  font-variant: unset;
  text-transform: none;
}

.function-list__datum--string {
  --pill-color: var(--datum-color-string);
  --icon: "\f866";
}

.function-list__datum--unknown {
  --pill-color: var(--datum-color-any);
  --icon: "\f866";
}

.function-list__datum--boolean {
  --pill-color: var(--datum-color-boolean);
  --icon: "\f204";
}

.function-list__datum--int {
  --pill-color: var(--datum-color-int);
  --icon: "123";
}

.datum-list__datum.function-list__datum--int::before {
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.function-list__datum--float {
  --pill-color: var(--datum-color-float);
  --icon: "1/2";
}

.datum-list__datum.function-list__datum--float::before {
  font-size: 2.8rem;
  font-variant-numeric: diagonal-fractions tabular-nums;
}

.function-list__datum--date {
  --pill-color: var(--datum-color-date);

  /* --icon: "\f133"; */
  --icon: "\f133";
}

.datum-list__datum.function-list__datum--date::before {
  font-size: 2rem;
}

.function-list__datum--blob {
  --pill-color: var(--datum-color-blob);
  --icon: "\e33b";
}

.datum-list__datum.function-list__datum--blob::before {
  font-size: 2rem;
}

.function-list__datum--geometry {
  --pill-color: var(--datum-color-geometry);
  --icon: "\f0ac";
}

.function-list__datum--any {
  --pill-color: var(--datum-color-any);
  --icon: "\f0ac";
}

.function-list__datum--enum {
  --pill-color: var(--datum-color-enum);
  --icon: "\f61f";
}

.function-list__datum--null {
  --pill-color: var(--datum-color-null);
  --icon: "\e269";
}

.function-list__datum--null::before {
  padding-top: 2px;
}

.function-list__datum--null .function-list__parameter {
  opacity: 66%;
  width: 12rem;
  font-size: 1.8rem;
}

.datum-list__datum .function-list__parameter {
  height: 3rem;
}

.datum-list__datum:hover {
  transform: scale(1.05)
}

.datum-list__datum.datum-list__datum--field:hover {
  transform: scale(1.03)
}

.datum-list__datum.datum-list__datum--function:hover {
  transform: scale(1.02)
}

.datum-list__datum.datum-list__datum--function .function-list__name {
  --function-color: var(--slate-1);
  border-radius: 0.4rem;
}.regex-input {
  display: flex;

  height: 2.8rem;

  font-family: monospace;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.8rem;
  white-space: pre;

  gap: 0.4rem;
}

.regex-input * { margin: 0; height: fit-content; }

.regex-input .regex:empty { width: 5ch; }

.regex-input .regex:empty::before { content: "regex"; color: var(--slate-3); font-family: monospace; }

.regex       { cursor: text; }

/* stylelint-disable color-no-hex */
.regex b     {color: #0707ee;} /* metasequence */
.regex i     {color: #1db000;} /* char class */
.regex i b   {color: #007a09;} /* char class: metasequence */
.regex i u   {color: #007a09;} /* char class: range-hyphen */
.regex b.g1  {color: #ec9b00;} /* group: depth 1 */
.regex b.g2  {color: #9d6400;} /* group: depth 2 */
.regex b.g3  {color: #c24699;} /* group: depth 3 */
.regex b.g4  {color: #00909d;} /* group: depth 4 */
.regex b.g5  {color: #81009d;} /* group: depth 5 */
.regex b.err {color: #d50000;} /* error */
.regex b, .regex i, .regex u {font-weight: 400;
/* stylelint-enable color-no-hex */

 font-style: normal; text-decoration: none;}
.file-panel__step--load {
  overflow: auto;
  flex: 0 0 auto;
  max-width: 80vw;
  width: 80vw;
  max-height: calc(100vh - 3.8rem);
  height: 100vh;
}

.file-panel__step--load .progress-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--slate-3);
  transform: translate(-50%, -50%);
}

.output-preview__menu {
  margin: 0;
  position: sticky;
  left: 0px;
  top: 0;
  background-color: white;
  z-index: 1;
  width: 100%;
}

.output-preview__menu h2 {
  margin: 1.8rem 0 0;
}

.output-preview__menu select {
  margin-right: 0.8rem;
}

.output-preview {
  display: table;
}

.output-preview tr {
  display: table-row;
}

.output-preview td {
  width: 100%;
  display: table-cell;
}

.output-preview td:first-child {
  min-width: var(--data-preview-first-column-width);
  width: var(--data-preview-first-column-width);
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  color: var(--slate-3);
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  left: 2px;
  box-shadow: -2px 0 0 0 white;
  background-color: white;
}

.output-preview thead {
  position: sticky;
  z-index: 999;
  top: 9.2rem;

  background-color: white;
  box-shadow: 0 0.1rem 0 0 rgb(0 0 0 / 15%);
}

.output-preview__header {
  position: relative;
  vertical-align: top;

  height: 5.2rem;

  padding: 0.8rem;

  text-align: left;
  font-size: 1.4rem;
  white-space: pre;
}

.output-preview__header--required::before {
  content: "*";
  display: inline-block;

  width: 1.2rem;
  min-width: 1.2rem;

  margin-left: -1.2rem;

  color: var(--red-3);
  text-align: left;
  font-size: 1.8rem;
  line-height: 0;
}

.output-preview__header--primary-key::before {
  content: "\f084";
  position: absolute;
  display: block;

  top: 1rem;
  left: -0.5rem;

  margin: 0 1rem 0 0;

  color: var(--red-3);
  font-family: 'fontawesome';
  font-size: 1.1rem;
  line-height: 1;

  transform: rotate(-45deg);
}

.output-preview__header:first-of-type {
  opacity: 0%;
}

.output-preview__cell {
  padding: 0.8rem;
  color: var(--datum-color);
  text-align: left;
  font-family: var(--serif-stack);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  margin: 0 -1px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 1;
  transition: max-width .18s ease-in-out;
}

.output-preview__cell--empty {
  color: var(--slate-4);
  font-family: var(--sans-stack);
  font-weight: 700;
}.saved-templates__modal, .saved-templates__modal .modal__content {
  height: 52rem;
}

.saved-mapping__button {
  background-color: var(--bold-blue-3);

  padding: 0 1.8rem;
  border: none;
  border-radius: 0.4rem;

  color: white;
  font-size: 1.6rem;
  font-weight: 700;
  white-space: pre;
}


.saved-templates__button {
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  width: 5.2rem;
  min-width: 5.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: var(--slate-3);
  gap: 0.4rem;
}

.saved-templates__button::before {
  content: "\f0c7";
  font-family: 'fontawesome';
  font-size: 2.4rem;
}

.saved-templates {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 0;
  max-height: 50vh;
  width: 48rem;
  margin: 0;
}

.saved-templates__template {
  display: flex;
  flex-flow: row;
  gap: 0.8rem;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--serif-stack);
  white-space: pre;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.8rem;
  min-height: 4.8rem;
}

.saved-templates__template:nth-of-type(2n) {
  background-color: var(--slate-5);
}

.saved-templates__load {
  margin-left: auto;
  background: var(--bold-blue-3);
  height: 4.2rem;
  border: none;
  border-radius: 0.4rem;
  height: 3.2rem;
  padding: 0 1.8rem;
  font-size: 1.6rem;
  color: white;
  font-weight: bold;
  font-family: var(--sans-stack);
}

.saved-templates__delete {
  font-size: 0;
  color: transparent;
  background-color: transparent;
  border: none;
  width: 1.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.saved-templates__delete::before {
  content: "\f1f8";
  color: var(--slate-3);
  font-size: 1.4rem;
  transition: color .18s ease-in-out;
}

.saved-templates__delete:hover::before {
  color: var(--red-3);
}

.saved-templates__save-form {
  position: sticky;
  top: 0px;
  height: 5.2rem;
  padding: 0 1.8rem 0 0.8rem;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  background-color: white;
  box-shadow: 0 0 0 1px white;
}

.saved-templates__name {
  font-size: 1.8rem;
  padding: 0.8rem 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--slate-2);
  box-shadow: var(--elevation-2);
  flex-grow: 1;
  height: 4.2rem;
}

.saved-templates__save-button {
  background-color: var(--bold-blue-3);

  padding: 0 3rem;
  border: none;
  border-radius: 0.4rem;

  color: white;
  font-size: 1.6rem;
  font-weight: 700;
  white-space: pre;
  height: 4.2rem;
}.load-dashboard {
  position: sticky;
  width: 100%;
  top: 0;
  overflow: auto;
  max-height: 100vh;
  padding-bottom: 1.8rem;
}

.load-dashboard__nav {
  display: flex;

  width: fit-content;

  margin: 1.8rem auto;

  gap: 0.8rem;
}

.load-dashboard__input-files {
  position: relative;
  display: flex;
  list-style: none;

  width: 38rem;

  margin: auto;
  padding: 0;

  flex-flow: column;
  gap: 1.8rem;
}

.load-dashboard__input-files .file__link {
  gap: 0;
}

.load-dashboard__input-file {
  user-select: none;
  position: absolute;

  width: 100%;
  height: 9.2rem;
  min-height: 9.2rem;
  top: 0;

  background-color: white;

  /* border: 1px solid var(--slate-3); */
  box-shadow: var(--elevation-2);

  border-radius: 0.4rem;

  transition: border-color .18s ease-in-out;
}

.load-dashboard__input-file:hover {
  border-color: var(--bold-blue-3);
}

.load-dashboard__new-input-file {
  user-select: none;
  position: absolute;

  width: 100%;
  height: 9.2rem;
  left: 0;
  bottom: 0;

  background-color: transparent;
  background-image: linear-gradient(0deg, transparent 90%, rgb(0 0 0 / 1.5%)), linear-gradient(180deg, transparent 90%, rgb(0 0 0 / 1.5%));

  border: 2px dashed var(--slate-4);
  border-radius: 0.4rem;

  color: var(--slate-4);
  font-size: 1.8rem;
  font-weight: 700;

  transition: border-color .18s ease-in-out, color .18s ease-in-out;
}

.load-dashboard__new-input-file::before {
  content: "\f33d";
  margin-right: 0.8rem;

  /* font-size: 1.4rem; */
  color: currentColor;
}

.load-dashboard__new-input-file:hover {
  color: var(--bold-blue-3);

  border-color: var(--bold-blue-3)
}

.file__models {
  position: absolute;
  right: 0.8rem;
  left: 0.8rem;
  bottom: -0.2rem;
  height: 2.8rem;
  height: 2.8rem;
}

.file__models--invalid {
  color: var(--slate-3);
}

.file__type-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 8.2rem;
  height: 2.4rem;
  top: -1.2rem;
  left: 50%;

  background-color: var(--blue-3);
  box-shadow: var(--elevation-2);

  padding: 0 1.4rem;
  border: 1px solid var(--blue-2);
  border-radius: 1.2rem;

  color: white;
  font-weight: 700;

  transform: translateX(-50%);
  transition: transform .18s ease-in-out;
}

.file__type-button:hover {
  transform: translateX(-50%) scale(1.05);
}

.file__type-button--update {
  background-color: var(--green-3);
  border: 1px solid var(--green-2);
}

.file__type-button--upsert {
  background-color: var(--orange-3);
  border: 1px solid var(--orange-2);
}

.file__type-button--merge {
  background-color: var(--teal-3);
  border: 1px solid var(--teal-2);
}

.file__delete-button {
  position: absolute;
  display: flex;
  opacity: 0%;
  align-items: center;
  justify-content: flex-start;
  z-index: -1;
  overflow: hidden;

  width: 2.8rem;
  height: 2.8rem;
  top: 1.8rem;
  left: calc(100% - 0rem);

  background-color: var(--red-5);
  box-shadow: 0 0 0 2px white;

  padding: 0;
  border: 1px solid var(--red-4);
  border-radius: 0 1.4rem 1.4rem 0;

  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  white-space: pre;

  transform: translateY(-50%) translateX(-100%);
  transition: transform .18s ease-in-out, width .18s ease-in-out, opacity .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out;

  flex-flow: row;
}

.file__delete-button::before {
  content: "\f00d";;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 2.8rem;
  height: 2.8rem;

  margin: 1px 0 0 -1px;

  font-size: 1.6rem;
  line-height: 0;
}

.file__link:hover .file__delete-button {
  opacity: 100%;

  background-color: var(--red-5);

  transform: translateY(-50%) translateX(-0.4rem);

  border-color: var(--red-5);
}

.file__link:hover .file__delete-button:hover {
  opacity: 100%;

  width: 8.4rem;

  background-color: var(--red-3);

  border-color: var(--red-2);
}/* stylelint-disable unit-disallowed-list */
.logo {
  --color: var(--slate-0);
  display: flex;
  opacity: 85%;

  margin: 0;

  color: var(--slate-0);
  font-size: 4.2rem;

  flex-flow: column;
  gap: 0;
}

.logo__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;

  color: currentColor;
  font-family: "fontawesome", var(--sans-stack);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;

  flex-flow: row;
}

.logo__title::before {
  content: "N";
  display: inline;

  margin-top: -0.02em;
  margin-right: -0.02em;

  font-family: var(--sans-stack);
  font-size: calc(1em * 1.25);
  line-height: 1em;
}

.logo__title::after {
  content: "VA";
  display: inline;

  margin-top: -0.02em;
  margin-left: -0.02em;

  font-family: var(--sans-stack);
  font-size: calc(1em * 1.25);
  line-height: 1em;
}

.logo__sub-title {
  width: fit-content;

  box-shadow: inset 0 -0.2em 0 0 currentColor;

  margin: 0 auto;

  font-size: 0.4em;
  font-weight: 700;
  text-transform: uppercase;
}

.logo__sub-title span {
  display: block;

  font-family: var(--serif-stack);
  font-size: 0.75em;
  text-transform: none;
}
/* stylelint-enable unit-disallowed-list */