:root {
  --re-shell: #f3f4f6;
  --re-sheet: #ffffff;
  --re-ink: #111827;
  --re-muted: #6b7280;
  --re-faint: #9ca3af;
  --re-line: #e5e7eb;
  --re-line-soft: #eef0f3;
  --re-hover: #f9fafb;
  --re-primary: #374151;
  --re-sidebar-bg: #1f2937;
  --re-sidebar-panel: #111827;
  --re-sidebar-text: #f3f4f6;
  --re-sidebar-muted: #d1d5db;
  --re-sidebar-hover: rgba(255, 255, 255, 0.08);
  --re-sidebar-active: rgba(255, 255, 255, 0.12);
  --re-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  --re-icon-lineage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='12' cy='18' r='3'/%3E%3Cpath d='m8.6 8.4 2.8 6.2M15.4 8.4l-2.8 6.2'/%3E%3C/svg%3E");
  --re-icon-tests: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  --re-icon-tables: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E");
  --re-icon-macros: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E");
  --re-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.72l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --re-icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E");
  --re-icon-slack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='2' width='3' height='8' rx='1.5'/%3E%3Crect x='8' y='14' width='3' height='8' rx='1.5'/%3E%3Crect x='14' y='13' width='8' height='3' rx='1.5'/%3E%3Crect x='2' y='8' width='8' height='3' rx='1.5'/%3E%3C/svg%3E");
  --re-icon-docs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
}

html,
body,
#root {
  min-height: 100%;
  background: var(--re-shell) !important;
  color: var(--re-ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#root > div {
  background: var(--re-shell);
}

header[class*="bg-gray-600"] {
  min-height: 56px;
  border-bottom: 1px solid var(--re-line);
  background: rgba(250, 250, 250, 0.9) !important;
  color: var(--re-ink) !important;
  backdrop-filter: blur(12px);
}

aside {
  width: min(248px, 78vw) !important;
  min-width: min(248px, 78vw) !important;
  padding: 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--re-sidebar-bg) !important;
  color: var(--re-sidebar-text) !important;
  gap: 0 !important;
}

aside > a:first-child {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--re-sidebar-text) !important;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.008em;
  text-decoration: none;
  overflow: hidden;
  transition:
    width 260ms cubic-bezier(0.2, 0, 0, 1),
    color 150ms ease,
    gap 260ms cubic-bezier(0.2, 0, 0, 1),
    margin 260ms cubic-bezier(0.2, 0, 0, 1),
    padding 260ms cubic-bezier(0.2, 0, 0, 1);
}

aside > a:first-child::before {
  content: "";
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: url("/archived/re-data/docs/img/logo_circle.svg") center / cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(17, 24, 39, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

aside nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

aside nav + nav {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

aside nav a {
  display: flex !important;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--re-sidebar-muted) !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.0025em;
  line-height: 1;
  padding: 6px 8px !important;
  text-decoration: none !important;
  overflow: hidden;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    gap 260ms cubic-bezier(0.2, 0, 0, 1),
    padding 260ms cubic-bezier(0.2, 0, 0, 1);
}

aside nav a svg,
aside nav a img {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: currentColor;
  opacity: 0.72;
}

aside nav a:hover {
  background: var(--re-sidebar-hover) !important;
  color: var(--re-sidebar-text) !important;
}

aside nav a.active {
  background: var(--re-sidebar-active) !important;
  color: var(--re-sidebar-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-weight: 650;
}

.re-archive-nav-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  opacity: 0.72;
  -webkit-mask: var(--re-icon, var(--re-icon-docs)) center / 15px 15px no-repeat;
  mask: var(--re-icon, var(--re-icon-docs)) center / 15px 15px no-repeat;
}

aside > a:first-child > :not(svg):not(img):not(.re-archive-nav-icon):not(.re-sidebar-toggle),
aside nav a > :not(svg):not(img):not(.re-archive-nav-icon) {
  max-width: 168px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  white-space: nowrap;
  transition:
    max-width 260ms cubic-bezier(0.2, 0, 0, 1),
    opacity 170ms ease 70ms,
    transform 230ms cubic-bezier(0.2, 0, 0, 1);
}

aside nav a[href="#/alerts"] {
  --re-icon: var(--re-icon-alert);
}

aside nav a[href="#/graph"] {
  --re-icon: var(--re-icon-lineage);
}

aside nav a[href="#/tests"] {
  --re-icon: var(--re-icon-tests);
}

aside nav a[href="#/tables"] {
  --re-icon: var(--re-icon-tables);
}

aside nav a[href="#/macros"] {
  --re-icon: var(--re-icon-macros);
}

aside nav a[href="#/settings"] {
  --re-icon: var(--re-icon-settings);
}

aside nav a[href*="github"] {
  --re-icon: var(--re-icon-github);
}

aside nav a[href*="slack"],
aside nav a[href*="getre.io/slack"] {
  --re-icon: var(--re-icon-slack);
}

aside nav a[href*="docs"] {
  --re-icon: var(--re-icon-docs);
}

.re-sidebar-toggle {
  position: fixed !important;
  top: 14px;
  right: auto !important;
  left: 232px;
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border: 1px solid var(--re-line);
  border-radius: 7px;
  background: var(--re-sidebar-panel);
  color: var(--re-sidebar-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    left 260ms cubic-bezier(0.2, 0, 0, 1);
}

.re-sidebar-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.re-sidebar-toggle:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--re-sidebar-text);
}

aside [class*="version"],
aside nav ~ div,
aside p {
  color: rgba(243, 244, 246, 0.5) !important;
  font-size: 11px;
  line-height: 16px;
}

aside .re-archive-version {
  display: block;
  color: rgba(243, 244, 246, 0.52) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 16px !important;
}

main {
  border-top-left-radius: 12px;
  background: var(--re-shell) !important;
  box-shadow: none;
  color: var(--re-ink);
  padding: 44px 52px !important;
}

main h1 {
  margin-bottom: 18px !important;
  color: var(--re-ink);
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em;
  line-height: 30px !important;
}

main h2,
main h3,
main h4 {
  color: var(--re-ink);
  letter-spacing: -0.012em;
}

main input,
main select,
main textarea {
  min-height: 32px;
  border: 1px solid var(--re-line) !important;
  border-radius: 6px !important;
  background: var(--re-sheet) !important;
  box-shadow: none !important;
  color: var(--re-ink) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  outline: none !important;
}

main input:focus,
main select:focus,
main textarea:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

main select {
  width: auto !important;
  min-width: 176px;
}

table {
  overflow: hidden;
  border: 1px solid var(--re-line);
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  background: var(--re-sheet);
  color: var(--re-ink);
  font-size: 12px;
}

thead {
  background: var(--re-shell) !important;
}

th {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--re-line) !important;
  color: var(--re-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  line-height: 16px;
  text-transform: uppercase;
}

td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--re-line-soft) !important;
  color: #3f3f3f !important;
  line-height: 18px;
  vertical-align: top;
}

tbody tr {
  transition: background-color 150ms ease;
}

tbody tr:hover {
  background: var(--re-shell);
}

.bg-white.rounded-md,
.bg-white.rounded-lg,
[class*="shadow"] {
  border: 1px solid var(--re-line) !important;
  border-radius: 10px !important;
  background: var(--re-sheet) !important;
  box-shadow: none !important;
}

.text-gray-600,
.text-gray-700,
.text-gray-800 {
  color: var(--re-muted) !important;
}

main a {
  color: #374151;
}

button {
  border-radius: 6px;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

html.re-sidebar-collapsed aside {
  width: 58px !important;
  min-width: 58px !important;
  padding: 12px 8px !important;
}

html.re-sidebar-collapsed aside > a:first-child {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  gap: 0;
  margin-bottom: 18px;
  padding: 0;
  color: transparent !important;
  font-size: 0;
}

html.re-sidebar-collapsed aside > a:first-child > :not(svg):not(img):not(.re-archive-nav-icon):not(.re-sidebar-toggle),
html.re-sidebar-collapsed aside nav a > :not(svg):not(img):not(.re-archive-nav-icon) {
  max-width: 0;
  opacity: 0;
  transform: translateX(-5px);
  transition:
    max-width 250ms cubic-bezier(0.2, 0, 0, 1),
    opacity 120ms ease,
    transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

html.re-sidebar-collapsed aside > a:first-child::before {
  margin: 0;
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

html.re-sidebar-collapsed aside nav a {
  justify-content: center;
  gap: 0;
  padding-right: 0 !important;
  padding-left: 0 !important;
  color: transparent !important;
  font-size: 0;
}

html.re-sidebar-collapsed aside nav a svg,
html.re-sidebar-collapsed aside nav a img,
html.re-sidebar-collapsed .re-archive-nav-icon {
  color: var(--re-sidebar-muted);
  opacity: 0.86;
}

html.re-sidebar-collapsed aside nav a.active svg,
html.re-sidebar-collapsed aside nav a.active img,
html.re-sidebar-collapsed aside nav a.active .re-archive-nav-icon {
  color: var(--re-sidebar-text);
}

html.re-sidebar-collapsed aside nav + nav {
  padding-top: 10px;
}

html.re-sidebar-collapsed aside [class*="version"],
html.re-sidebar-collapsed aside nav ~ div,
html.re-sidebar-collapsed aside p {
  display: none !important;
}

html.re-sidebar-collapsed .re-sidebar-toggle {
  left: 45px;
  right: auto !important;
  background: var(--re-sidebar-panel);
}

html.re-sidebar-collapsed main {
  border-top-left-radius: 12px;
}

@media (min-width: 768px) {
  aside {
    position: relative !important;
    transition:
      width 260ms cubic-bezier(0.2, 0, 0, 1),
      min-width 260ms cubic-bezier(0.2, 0, 0, 1),
      padding 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  .re-sidebar-toggle {
    position: fixed !important;
    top: 14px;
    right: auto !important;
    left: 232px;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--re-line);
    border-radius: 7px;
    background: var(--re-sidebar-panel);
    color: var(--re-sidebar-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      left 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  .re-sidebar-toggle:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--re-sidebar-text);
  }

  html.re-sidebar-collapsed aside {
    width: 58px !important;
    min-width: 58px !important;
    padding: 12px 8px !important;
  }

  html.re-sidebar-collapsed aside > a:first-child {
    width: 100%;
    min-height: 34px;
    justify-content: center;
    gap: 0;
    margin-bottom: 18px;
    padding: 0;
    color: transparent !important;
    font-size: 0;
  }

  html.re-sidebar-collapsed aside > a:first-child::before {
    margin: 0;
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  html.re-sidebar-collapsed aside nav a {
    justify-content: center;
    gap: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
    color: transparent !important;
    font-size: 0;
  }

  html.re-sidebar-collapsed aside nav a svg,
  html.re-sidebar-collapsed aside nav a img,
  html.re-sidebar-collapsed .re-archive-nav-icon {
    color: var(--re-sidebar-muted);
    opacity: 0.86;
  }

  html.re-sidebar-collapsed aside nav a.active svg,
  html.re-sidebar-collapsed aside nav a.active img,
  html.re-sidebar-collapsed aside nav a.active .re-archive-nav-icon {
    color: var(--re-sidebar-text);
  }

  html.re-sidebar-collapsed aside nav + nav {
    padding-top: 10px;
  }

  html.re-sidebar-collapsed aside [class*="version"],
  html.re-sidebar-collapsed aside nav ~ div,
  html.re-sidebar-collapsed aside p {
    display: none !important;
  }

  html.re-sidebar-collapsed .re-sidebar-toggle {
    left: 45px;
    right: auto !important;
    background: var(--re-sidebar-panel);
  }

  html.re-sidebar-collapsed main {
    border-top-left-radius: 12px;
  }
}

@media (max-width: 767px) {
  main {
    border-top-left-radius: 0;
    padding: 28px 18px !important;
  }

  aside {
    width: min(280px, 82vw) !important;
    min-width: min(280px, 82vw) !important;
  }

  .re-sidebar-toggle,
  html.re-sidebar-collapsed .re-sidebar-toggle {
    right: 16px !important;
    left: auto;
  }

  main h1 {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}