* {
  font-family: var(--font-default);
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: Inter UI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
*:focus {
  outline: none;
}
*::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
*::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
*::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
*::-webkit-scrollbar-thumb:active {
  background: #000000;
}
*::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
*::-webkit-scrollbar-track:hover {
  background: #666666;
}
*::-webkit-scrollbar-track:active {
  background: #333333;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

body, app-root {
  height: 100%;
}

.highlight {
  color: var(--accent-500);
}

:root {
  --bg-main: var(--color-white);
  --bg-secondary: var(--color-white);
  --border-radius-xxs: 4px;
  --border-radius-xs: 9px;
  --border-radius-sm: 15px;
  --border-radius-md: 20px;
  --border-radius-lg: 25px;
  --border-radius-xl: 35px;
  --border-radius-xxl: 60px;
  --border-radius-full: 100%;
  --border-radius-v3-media: 14px;
  --color-v3-pink: 250, 18, 227;
  --color-v3-red: 240, 2, 80, 1;
  --color-v3-red-rgb: 240, 2, 80;
  --color-v3-orange: 255, 98, 33;
  --color-v3-yellow: 255, 215, 0;
  --color-v3-green: 33, 200, 40;
  --color-v3-light-blue: 64, 221, 255;
  --color-v3-blue: 31, 124, 255;
  --color-v3-dark-blue: 44, 42, 65;
  --color-v3-purple: 118, 18, 250;
  --color-v3-purple-0: 73, 1, 170;
  --color-v3-purple-1: 85, 0, 199;
  --color-v3-purple-2: 106, 6, 239;
  --color-v3-purple-3: 128, 32, 255;
  --color-v3-purple-4: 137, 47, 255;
  --color-v3-black: 0, 0, 0;
  --color-v3-black-0: 7, 12, 28;
  --color-v3-black-1: 10, 17, 40;
  --color-v3-black-2: 13, 21, 48;
  --color-v3-black-3: 15, 25, 61;
  --color-v3-black-4: 21, 34, 79;
  --color-v3-black-5: 44, 64, 133;
  --color-v3-grey: 36, 34, 62;
  --color-v3-grey-0: 81, 75, 129;
  --color-v3-grey-1: 127, 118, 179;
  --color-v3-grey-2: 182, 174, 224;
  --color-v3-grey-3: 189, 189, 220;
  --color-v3-grey-4: 206, 206, 234;
  --color-v3-grey-5: 241, 241, 249;
  --color-v3-grey-6: 248, 242, 255;
  --color-v3-white: 255, 255, 255;
  --color-v3-white-0: 248, 248, 252;
  --color-v3-white-1: 241, 241, 249;
  --color-v3-white-2: 233, 233, 246;
  --color-v3-white-3: 242, 232, 255;
  --color-v3-white-4: 234, 218, 253;
  --color-gradient-primary: linear-gradient(83deg, rgba(var(--color-v3-light-blue)) -5%, rgba(var(--color-v3-purple)) 51%, rgba(var(--color-v3-pink)) 125%);
  --color-gradient-purple-1: linear-gradient(29deg, rgba(var(--color-v3-purple)) 26%, rgba(var(--color-v3-pink)) 161%);
  --color-gradient-purple-2: linear-gradient(133deg, rgba(var(--color-v3-purple)) 16%, rgba(var(--color-v3-pink)) 136%);
  --color-gradient-blue-1: linear-gradient(21deg, rgba(var(--color-v3-blue)) 33%, rgba(var(--color-v3-light-blue)) 129%);
  --color-gradient-blue-2: linear-gradient(147deg, rgba(var(--color-v3-blue)) 14%, rgba(var(--color-v3-light-blue)) 103%);
  --color-gradient-blue-purple-1: linear-gradient(159deg, rgba(var(--color-v3-purple)) 7%, rgba(var(--color-v3-light-blue)) 96%);
  --color-gradient-blue-purple-2: linear-gradient(331deg, rgba(var(--color-v3-purple)) -6%, rgba(var(--color-v3-light-blue)) 107%);
  --color-gradient-orange-pink-1: linear-gradient(201deg, rgba(var(--color-v3-pink)) -34%, rgba(var(--color-v3-orange)) 81%);
  --color-gradient-orange-pink-2: linear-gradient(323deg, rgba(var(--color-v3-pink)) -45%, rgba(var(--color-v3-orange)) 106%);
  --color-gradient-dark-purple-1: linear-gradient(340deg, rgba(var(--color-v3-pink)) -75%, #101f52 94%);
  --color-gradient-dark-purple-2: linear-gradient(136deg, rgba(var(--color-v3-pink)) -76%, #101f52 85%);
  --color-gradient-white-1: linear-gradient(164deg, rgba(var(--color-v3-white-0)) 4%, rgba(var(--color-v3-white)) 89%);
  --color-button-primary-text: (var(--color-v3-white));
  --color-button-primary-background: linear-gradient(263deg, rgba(var(--color-v3-pink)) -35%, rgba(var(--color-v3-purple)) 41%, #12d0fa 135%);
  --color-button-primary-background-hover: linear-gradient(261deg, #831778 -65%, #7612fa -22%, #12d0fa 135%);
  --color-button-secondary-text: (var(--color-v3-purple));
  --color-button-secondary-background: 248, 243, 255;
  --color-button-secondary-background-hover: 239, 228, 255;
  --color-button-tertiary-text: 81, 75, 129;
  --color-button-tertiary-background: var(--color-v3-grey-5);
  --color-button-tertiary-background-hover: 230, 230, 249;
  --color-button-other-text: var(--color-v3-white);
  --color-button-other-background: 0, 0, 0, 0.15;
  --color-grey: 51, 51, 51;
  --color-grey-0: 41, 45, 52;
  --color-grey-1: 124, 130, 141;
  --color-grey-2: 185, 190, 199;
  --color-grey-3: 233, 235, 240;
  --color-grey-4: 250, 251, 252;
  --color-white: 255, 255, 255;
  --color-black: var(--color-grey-0);
  --color-shadow: 16, 30, 54, 0.1;
  --color-shadow-1: 16, 30, 54, 0.06;
  --color-pink-1: 253, 113, 175;
  --color-pink-2: 255, 241, 247;
  --color-pink-3: 255, 248, 251;
  --color-pink-neon: 255, 11, 229;
  --color-pink: var(--color-pink-1);
  --color-pink-shadow-1: var(--color-pink-1), 0.1;
  --color-pink-shadow-2: var(--color-pink-1), 0.2;
  --color-pink-shadow: var(--color-pink-shadow-1);
  --color-blue-1: 73, 204, 249;
  --color-blue-2: 229, 248, 254;
  --color-blue-3: 237, 250, 254;
  --color-blue-neon: 69, 196, 249;
  --color-blue: var(--color-blue-1);
  --color-blue-shadow-1: var(--color-blue-1), 0.1;
  --color-blue-shadow-2: var(--color-blue-1), 0.2;
  --color-blue-shadow: var(--color-blue-shadow-1);
  --color-green-1: 0, 184, 132;
  --color-green-2: 228, 248, 242;
  --color-green-3: 240, 251, 248;
  --color-green: var(--color-green-1);
  --color-green-shadow-1: var(--color-green-1), 0.1;
  --color-green-shadow-2: var(--color-green-1), 0.2;
  --color-green-shadow: var(--color-green-shadow-1);
  --color-mint-1: 104, 238, 190;
  --color-mint: var(--color-mint);
  --color-purple-1: 123, 104, 238;
  --color-purple-2: 242, 240, 253;
  --color-purple-3: 248, 247, 254;
  --color-purple-neon: 137, 32, 254;
  --color-purple: var(--color-purple-1);
  --color-purple-shadow-1: var(--color-purple-1), 0.1;
  --color-purple-shadow-2: var(--color-purple-1), 0.2;
  --color-purple-shadow-4: var(--color-purple-1), 0.4;
  --color-purple-shadow-5: var(--color-purple-1), 0.5;
  --color-purple-shadow: var(--color-purple-shadow-1);
  --color-violet-1: 155, 81, 224;
  --color-violet-2: 241, 230, 251;
  --color-violet-3: 245, 238, 252;
  --color-violet: var(--color-violet-1);
  --color-violet-shadow-1: var(--color-violet-1), 0.1;
  --color-violet-shadow-2: var(--color-violet-1), 0.2;
  --color-violet-shadow: var(--color-violet-shadow-1);
  --color-yellow-1: 255, 200, 0;
  --color-yellow-2: 255, 250, 230;
  --color-yellow-3: 255, 250, 230;
  --color-yellow-neon: 255, 200, 1;
  --color-yellow: var(--color-yellow-1);
  --color-yellow-shadow-1: var(--color-yellow-1), 0.1;
  --color-yellow-shadow-2: var(--color-yellow-1), 0.1;
  --color-yellow-shadow: var(--color-yellow-shadow-1);
  --color-gradient-cyan-accent-primary-1: 97, 255, 255;
  --color-gradient-cyan-accent-light-1: var(--color-white), 0.1;
  --color-gradient-cyan-accent-lightest-1: linear-gradient(45deg, #45c4f9 -0.01%, #7d09ff 50.33%, #ff0be5), linear-gradient(180deg, #fff8fb, rgba(255, 248, 251, 0));
  --color-gradient-cyan-accent-shadow-1: var(--color-shadow);
  --color-red-1: 253, 113, 113;
  --color-success-1: 0, 136, 68;
  --color-success-2: 235, 245, 240;
  --color-success: var(--color-success-1);
  --color-warning-1: 248, 174, 0;
  --color-warning-2: 254, 249, 235;
  --color-warning: var(--color-warning-1);
  --color-error-1: 211, 61, 68;
  --color-error-2: 252, 239, 240;
  --color-error-3: 224, 79, 68;
  --color-error: var(--color-error-1);
  --color-brand-clickup: var(--color-purple-1);
  --color-brand-facebook: 59, 89, 152;
  --color-brand-instagram: 195, 42, 163;
  --color-brand-linkedin: 0, 119, 181;
  --color-brand-twitter: 29, 161, 242;
  --color-brand-youtube: 255, 0, 0;
  --color-main-bg: var(--color-white);
  --color-main-text: var(--color-grey-0);
  --color-main-link: var(--color-brand-clickup);
  --color-bg: var(--color-white);
  --color-text: var(--color-grey-0);
  --color-link: var(--color-brand-clickup);
  --color-compare-green: 0, 184, 132;
  --color-compare-yellow: 255, 200, 0;
  --color-compare-red: 253, 113, 113;
  --color-compare-blue: 0, 121, 191;
  --color-compare-dark-blue: 0, 48, 89;
  --color-compare-lime-green: 72, 184, 98;
  --easing-natural: cubic-bezier(0.5,0,0.5,1);
  --easing-bounce: cubic-bezier(0.175,0.885,0.32,1.275);
  --easing-in: cubic-bezier(0.895,0.03,0.685,0.22);
  --easing-out: cubic-bezier(0.165,0.84,0.44,1);
  --easing-in-out: cubic-bezier(0.445,0.05,0.55,0.95);
  --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif;
  --font-axiforma: Axiforma;
  --font-default: var(--font-axiforma), var(--font-fallback);
  --shadow-xs: 0 4px 12px;
  --shadow-sm: 0 10px 25px;
  --shadow-md: 0 20px 60px;
  --shadow-lg: 0 16px 78px;
  --shadow-xl: 0 34px 54px;
  --size-1: 0.063rem;
  --size-2: 0.125rem;
  --size-3: 0.188rem;
  --size-4: 0.25rem;
  --size-5: 0.313rem;
  --size-6: 0.375rem;
  --size-7: 0.438rem;
  --size-8: 0.5rem;
  --size-9: 0.563rem;
  --size-10: 0.625rem;
  --size-11: 0.688rem;
  --size-12: 0.75rem;
  --size-13: 0.8125rem;
  --size-14: 0.875rem;
  --size-15: 0.938rem;
  --size-16: 1rem;
  --size-17: 1.0625rem;
  --size-18: 1.125rem;
  --size-19: 1.188rem;
  --size-20: 1.25rem;
  --size-21: 1.313rem;
  --size-22: 1.375rem;
  --size-23: 1.438rem;
  --size-24: 1.5rem;
  --size-25: 1.563rem;
  --size-26: 1.625rem;
  --size-27: 1.688rem;
  --size-28: 1.75rem;
  --size-29: 1.8125rem;
  --size-30: 1.875rem;
  --size-32: 2rem;
  --size-35: 2.188rem;
  --size-38: 2.375rem;
  --size-39: 2.438rem;
  --size-40: 2.5rem;
  --size-44: 2.6875rem;
  --size-46: 2.875rem;
  --size-48: 3rem;
  --size-50: 3.125rem;
  --size-55: 3.4375rem;
  --size-70: 4.375rem;
  --size-xl: var(--size-50);
  --size-hero-heading: var(--size-48);
  --size-hero-subheading: ;
  --size-content-subheading: var(--size-12);
  --size-content-xl: var(--size-48);
  --size-content-lg: var(--size-38);
  --size-content-default: var(--size-14);
  --size-label: var(--size-content-subheading);
  --size-v3-container: 1160px;
  --size-v3-homepage-container: var(--size-v3-container);
  --spacing-1: 10px;
  --spacing-2: 20px;
  --spacing-3: 30px;
  --spacing-4: 40px;
  --spacing-5: 50px;
  --spacing-6: 60px;
  --spacing-7: 70px;
  --spacing-8: 80px;
  --spacing-9: 90px;
  --spacing-10: 100px;
  --spacing-11: 110px;
  --spacing-12: 120px;
  --spacing-13: 130px;
  --spacing-14: 140px;
  --spacing-15: 150px;
  --spacing-block-between-containers: var(--spacing-5);
  --spacing-block-container: var(--spacing-10);
  --spacing-block-container-no-background: var(--spacing-15);
  --spacing-inline-container: var(--spacing-13);
  --spacing-desktop-padding-gutter: 40px;
  --spacing-mobile-padding-gutter: 20px;
  --transition-long: 0.5s var(--easing-natural);
  --transition-short: 0.25s var(--easing-natural);
  --transition-long-bounce: 0.5s var(--easing-bounce);
  --transition-short-bounce: 0.25s var(--easing-bounce);
  --gradient-bg: linear-gradient(352deg, #5037E7 6.96%, #EB00FF 107.25%);
  --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif;
  --font-axiforma: Axiforma;
  --font-default: var(--font-axiforma), var(--font-fallback);
  --primary-500: rgb(43, 48, 59);
  --primary-800: rgb(33, 37, 45);
  --dark: rgb(12, 11, 11);
  --accent-500: rgb(58, 78, 255);
  --accent-50: rgb(211, 238, 255);
  --second-500: rgb(255, 138, 72);
  --error-500: rgb(203, 72, 72);
  --gray-65: rgb(215, 215, 215);
  --gray-75: rgb(230, 230, 230);
  --gray-50: rgb(250, 250, 250);
  --green-50: rgb(19, 207, 104);
  --warn-50: rgb(231, 175, 21);
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --sm: 16px;
  --md: 24px;
  --lg: 40px;
  --default-border-radius: 4px;
  --sidebar-size: 250px;
  --header-controlled-height: 72px;
  --list-results-controlled-width: 15vw;
  --border: 1px solid var(--gray-65);
  --transition: all .25s ease-in-out;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  min-height: var(--header-controlled-height);
}
@media only screen and (max-width: 992px) {
  nav {
    flex-direction: column;
    gap: 8px;
  }
}
nav .header-controller {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  width: 100%;
}

nav .logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  border: 1px solid rgba(var(--color-v3-grey-4));
  margin: 16px 0;
  padding: 8px;
  border-radius: 14px;
  background: white;
}
@media only screen and (max-width: 992px) {
  nav .logo-container {
    margin: 16px 0 0 0;
  }
}
nav .logo-container .logo-text-content {
  display: flex;
  align-items: center;
}
nav .logo-container svg {
  width: 22px;
  height: 22px;
}
nav .logo-container .logo-letter {
  font-weight: 800;
  font-size: 23px;
}
nav .logo-container .logo-message {
  border-left: 1px solid rgba(var(--color-v3-grey-4));
  padding-left: 8px;
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 1px;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

main > nav, main > section {
  flex: 1 auto;
}

main > nav {
  max-height: 80px;
}


section {
  display: flex;
}

section .content {
  flex: 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  max-width: 50%;
}

section .content .block {
  min-width: 150px;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(var(--color-v3-grey-4));
  border-radius: 4px;
  position: relative;
  z-index: 1;
  background: white;
}

section .content .block .head {
  background: var(--accent-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  gap: 8px;
  border-radius: 4px;
}

section .content .block ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

section .content .block ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(var(--color-v3-grey), .08);
  padding: 8px;
  position: relative;
  border-radius: 4px;
}

section .content .block ul button {
  background: var(--accent-500);
  color: white;
  padding: 8px;
  font-weight: bold;
}

section .content .block ul li button {
  background: rgba(var(--color-v3-red));
  color: white;
  padding: 8px;
  font-weight: bold;
}

section .content .block ul li:nth-child(even) {
  background: rgba(var(--color-v3-grey), .25);
}

section .content .block ul li.key:before {
  content: 'KEY';
  font-weight: bold;
  font-size: 11px;
  margin: 0 8px 0 0;
}

button {
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button i {
  font-size: 9px;
  pointer-events: none; 
}

/*
  button:hover {
    transition: var(--transition);
    background: rgba(var(--color-v3-orange));
    color: var(--primary-500);
  }
*/

.code, .sql {
  flex: 1 auto;
  min-height: 80vh;
  max-width: 50%;
}

.code {
  background-color: var(--primary-500);
  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 16px;
  border-radius: 8px;
  white-space: pre; /* mantém o espaçamento do JSON */
  overflow-x: auto; /* scroll horizontal se necessário */
  max-height: 80vh;
  border: 1px solid var(--primary-500);
}

.sql {
  background-color: var(--primary-500);;
  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 16px;
  border-radius: 8px;
  white-space: pre; /* mantém o espaçamento do JSON */
  overflow-x: auto; /* scroll horizontal se necessário */
  max-height: 80vh;
  border: 1px solid var(--primary-500);;
}

.key-btn {
  position: absolute;
  left: -35px;
  background: var(--primary-500) !important;
}

.relation-select {
  padding: 10px;
  border: 1px solid;
  border: 1px solid rgba(var(--color-v3-grey-4));
  border-radius: 4px;
}