/* CSS Variables [All pages] */


/* ------------------------- Variables - Sizes, Animations Etc. ------------------------------------------- */

:root {
  
  /* Animations */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-default-double: 1.2s; /* Double of default */
  --duration-default-onehalf: 0.9s; /* One & Half of default */
  --duration-default: 0.6s;
  --duration-default-half: 0.3s; /* Half of default */
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --duration-default-quarter: 0.15s; /* Quarter of default */
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
  --cubic-bounce: linear(0,0.5737 7.6%,0.8382 11.87%,0.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,0.9995 46.99%,0.9872 51.63%,0.9842 58.77%,1.0011 81.26%,1);
}

/* Tablet */
@media screen and (max-width: 991px) {
    :root {
      
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --btn-height: 3em;
    --padding-xl: 10em;
    --padding-l: 7.5em;
    --padding-m: 5em;
    --padding-s: 3.75em;
    --container-padding: 0.625em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}
/* ------------------------- Container -------------------------  */

/* Desktop */
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--size-container);
    padding: 0 var(--container-padding);
  }
  
  .container.is--m {
    max-width: calc(var(--size-container) * 0.825);
  }
  
  .container.is--sm {
    max-width: calc(var(--size-container) * 0.65);
  }
  
  .container.is--s {
    max-width: calc(var(--size-container) * 0.5);
  }
}
  
/* Tablet & Mobile */
@media screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 var(--container-padding);
  }
  
  .container.is--md-m {
    padding: 0 var(--gap-m);
  }
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 850; 
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
  
  .dash {
    --size-container-ideal: 1072;
    --size-container-min: 840px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; 
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
  
  .dash {
    --size-container-ideal: 420;
  }
}


/* ------------------------- Dashboard ------------------------------------------- */

main {
    /* Sizes */
  --dash-side-width: 19em;
  --dash-col-width: calc(((99.99vw - (var(--dash-side-width) + 4em)) / var(--dash-columns)) - (var(--dash-col-gap) * ((var(--dash-columns) - 1) / var(--dash-columns))));
  --dash-col-width-half: calc(((99.99vw - (var(--dash-side-width) + 4em)) / (var(--dash-columns) * 2)) - (var(--dash-col-gap) * (((var(--dash-columns) * 2) - 1) / (var(--dash-columns) * 2))));
  --dash-columns: 3;
  --dash-col-gap: 1.5em;
  --dash-content-width: calc(100vw - (var(--dash-side-width) + var(--dash-col-width) + 5.5em)); /* 3 columns */
}

/* Desktop */
@media screen and (min-width: 768px) and (max-width: 1500px) {main[data-barba-namespace="icons"] {--dash-columns: 2.5;}}
@media screen and (min-width: 1908px) {main {--dash-columns: 4;} main[data-barba-namespace="resource"] {--dash-columns: 3;} main[data-barba-namespace="icons"] {--dash-columns: 4;}}
@media screen and (min-width: 2276px) {main {--dash-columns: 5;} main[data-barba-namespace="resource"] {--dash-columns: 4;} main[data-barba-namespace="icons"] {--dash-columns: 4.5;}}
@media screen and (min-width: 2400px) {main[data-barba-namespace="icons"] {--dash-columns: 5;}}
@media screen and (min-width: 2550px) {main[data-barba-namespace="icons"] {--dash-columns: 6;}}

/* Dashboard collapsed */
body[data-dash-collapsed="true"],
body[data-dash-collapsed="true"] main {
  --dash-side-width: var(--dash-side-width-collapsed);
}

@media screen and (min-width: 1700px) {[data-dash-collapsed="true"] main {--dash-columns: 4;} [data-dash-collapsed="true"] main[data-barba-namespace="resource"] {--dash-columns: 3;} [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {--dash-columns: 3.5;}}
@media screen and (min-width: 2068px) {[data-dash-collapsed="true"] main {--dash-columns: 5;} [data-dash-collapsed="true"] main[data-barba-namespace="resource"] {--dash-columns: 4;} [data-dash-collapsed="true"] main[data-barba-namespace="icons"] {--dash-columns: 4;}}
@media screen and (min-width: 2220px) {[data-dash-collapsed="true"] main[data-barba-namespace="icons"] {--dash-columns: 5;}}
@media screen and (min-width: 2370px) {[data-dash-collapsed="true"] main[data-barba-namespace="icons"] {--dash-columns: 6;}}



/* Tablet */
@media screen and (max-width: 991px) {
  main {
    /* Sizes */
    --dash-col-width: calc(((99.99vw - 2em) / var(--dash-columns)) - (var(--dash-col-gap) * ((var(--dash-columns) - 1) / var(--dash-columns))));
    --dash-col-width-half: calc(((99.99vw - 2em) / (var(--dash-columns) * 2)) - (var(--dash-col-gap) * (((var(--dash-columns) * 2) - 1) / (var(--dash-columns) * 2))));
    --dash-hero-height-top-shrinked: calc(1.625em + 2em + 2em);
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  main {
    /* Sizes */
    --dash-columns: 1;
    --dash-col-gap: 1em;
    --dash-top-height: 5.5em;
    --dash-hero-height-top: 8em;
  }
  
  [data-dash-collapsed="true"] main {--dash-columns: 1;} main[data-barba-namespace="icons"] {--dash-columns: 1;}
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  main {}
}

/* ------------------------- Variables - Colors ------------------------------------------- */

:root {
  /* Colors (not changing with Dark/Light Theme) */
  --color-ignore-neutral-100: #ffffff;
  --color-ignore-neutral-200: #F4F4F4;
  --color-ignore-neutral-300: #EAEAEA;
  --color-ignore-neutral-400: #E1E1E1;
  --color-ignore-neutral-450: #D8D8D8;
  --color-ignore-neutral-475: #B8B8B8;
  --color-ignore-neutral-500: #817F7F;
  --color-ignore-neutral-525: #4F4C4C;
  --color-ignore-neutral-550: #393636;
  --color-ignore-neutral-600: #312E2E;
  --color-ignore-neutral-700: #2A2727;
  --color-ignore-neutral-800: #201D1D;
  --color-ignore-neutral-900: #151313;
  --color-ignore-neutral-950: #000000;
  --color-ignore-white: var(--color-ignore-neutral-100);
  --color-ignore-light: var(--color-ignore-neutral-200);
  --color-ignore-dark: var(--color-ignore-neutral-800);
  --color-ignore-black: var(--color-ignore-neutral-950);
  
  --color-ignore-rgb-dark: 32, 29, 29;
  --color-ignore-rgb-light: 249, 249, 249;
  --color-ignore-rgb-black: 0, 0, 0;
  --color-ignore-rgb-white: 255, 255, 255;
  

  /* Colors Theme */
  --color-neutral-100: var(--color-ignore-neutral-100);
  --color-neutral-200: var(--color-ignore-neutral-200);
  --color-neutral-300: var(--color-ignore-neutral-300);
  --color-neutral-400: var(--color-ignore-neutral-400);
  --color-neutral-450: var(--color-ignore-neutral-450);
  --color-neutral-475: var(--color-ignore-neutral-475);
  --color-neutral-500: var(--color-ignore-neutral-500);
  --color-neutral-525: var(--color-ignore-neutral-525);
  --color-neutral-550: var(--color-ignore-neutral-550);
  --color-neutral-600: var(--color-ignore-neutral-600);
  --color-neutral-700: var(--color-ignore-neutral-700);
  --color-neutral-800: var(--color-ignore-neutral-800);
  --color-neutral-900: var(--color-ignore-neutral-900);
  --color-neutral-950: var(--color-ignore-neutral-950);
  --color-white: var(--color-ignore-neutral-100);
  --color-light: var(--color-ignore-neutral-200);
  --color-dark: var(--color-ignore-neutral-800);
  --color-black: var(--color-ignore-neutral-950);
  
  
  /* RGB Colors, for transparent RGBA */
  --color-rgb-dark: var(--color-ignore-rgb-dark);
  --color-rgb-light: var(--color-ignore-rgb-light);
  --color-rgb-black: var(--color-ignore-rgb-black);
  --color-rgb-white: var(--color-ignore-rgb-white);
  --color-rgb-gray: 129, 127, 127;
  --color-rgb-tint: 40, 40, 40;
}


/* Dashboard Theme Dark */
[data-dash-theme="dark"] {
  /* Colors */
  --color-neutral-100: var(--color-ignore-neutral-900);
  --color-neutral-200: var(--color-ignore-neutral-800);
  --color-neutral-300: var(--color-ignore-neutral-700);
  --color-neutral-400: var(--color-ignore-neutral-600);
  --color-neutral-450: var(--color-ignore-neutral-550);
  --color-neutral-475: var(--color-ignore-neutral-525);
  --color-neutral-500: var(--color-ignore-neutral-500);
  --color-neutral-525: var(--color-ignore-neutral-475);
  --color-neutral-550: var(--color-ignore-neutral-450);
  --color-neutral-600: var(--color-ignore-neutral-400);
  --color-neutral-700: var(--color-ignore-neutral-300);
  --color-neutral-800: var(--color-ignore-neutral-200);
  --color-neutral-900: var(--color-ignore-neutral-100);
  --color-white: var(--color-ignore-neutral-900);
  --color-light: var(--color-ignore-neutral-800);
  --color-dark: var(--color-ignore-neutral-200);
  --color-black: var(--color-ignore-neutral-100);
  --color-saved: var(--color-ignore-saved-dark);
  
  /* RGB Colors, for transparent RGBA */
  --color-rgb-dark: var(--color-ignore-rgb-light);
  --color-rgb-light: var(--color-ignore-rgb-dark);
  --color-rgb-black: var(--color-ignore-rgb-white);
  --color-rgb-white: var(--color-ignore-rgb-black);
  --color-rgb-tint: 222, 210, 210;
}