@import url("./prompt-icons/iconly.min.css");
@import "./_resets.css"layer(resets);
@import "./_buttons.css"layer(buttons);
@import "./_typography.css"layer(typography);

:root {
    --border-radius: 0;
    --padding-left: 40px;
    --gap-small: 8px;
    --bottom-offset: 20px;
    --active-group-margin-bottom: 2;
    --grey-100: #eaeaea;
    --grey-400: #aaa;
    --grey-600: #808080;
    --dashboard-bg: #f8f8f8;
    --navigation-button-bg-hover: rgba(0, 0, 0, 0.05);
    --navigation-button-bg-active: rgba(0, 0, 0, 0.1);
    --navigation-button-indicator-active: #2a6ecb;
    --button-bg-hover: #EFEFEF;
    /*--button-bg-hover: #f8f8f8;*/


    --black: #2c2c2c;
    --color-white: #fff;
    --color-black: var(--black);
    --color-grey: #808080;
    --color-grey-100: #e3e3e3;
    --color-grey-400: #aaa;
    --color-grey-600: #808080;
    --color-grey-800: #4d4d4d;
    --color-grey-900: #2c2c2c;
    --color-grey-1000: #000;
    --color-grey-1000: #000;
    --color-disabled: #AAAAAA;
    --color-main-accent: #2a6ecb; 
    --color-main-accent-hover: #0846a6;
    --color-main-accent-400: #2a6ecb;
    --color-brand-accent: var(--color-main-accent);
    --color-brand-accent-dark: #0846a6;
    --prompt-colors-accent-1: #4473D4;
    --AccentColor: var(--color-brand-accent-dark) !important;
    --color-text: var(--color-grey-900);
    --active-field-color: #6094FF;
    --sidebar-width: 220px;
    --top-nav-height: 45px;
    --transition: 0.215s ease-out;
    --z-backdrop: 10;
    --z-floating-content: 12;
    --z-context-menu: 14;
    --z-context-menu: 99999;
    accent-color: var(--color-brand-accent);
    /* #region GLOBAL CONFIGS */
    --font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: var(--font-family) !important;
    line-height: 1.5;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-black);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    /* #endregion */
}


/* Import a custom font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family);
}

*, *::before, *::after {
  font-family: inherit;
}


::-webkit-scrollbar {
  --_size: 8px;
  width: var(--_size);
  height: var(--_size);
}

::-webkit-scrollbar-track {
  background: var(--Neutrals-Grey-50, #F4F4F4);
  background: var(--Neutrals-Grey-50, #F4F4F4);
}

::-webkit-scrollbar-thumb {
  background: var(--Neutrals-Grey-200, #D5D5D5);
  border-radius: 12px;
  cursor: grab;
}

.grid-stack>.grid-stack-item>.grid-stack-item-content::-webkit-scrollbar {
  --_size: 0px;
  width: var(--_size);
  height: var(--_size);
}

a {
  cursor: pointer !important;
}

.btwn {
  display: flex;
  justify-content: space-between;
}

.grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-small);
    grid-auto-flow: dense;
    align-content: start;
}

.grid-col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-small);
  grid-column: span 12;
}

.grid-col-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-small);
  grid-column: span 12;
}