:root{
    --topbar-h: 56px;
    --subbar-h: 56px;
    --alert-h: 0px;

    --top-bg: #0f0f0f;
    --top-fg: #f5f5f5;

    --sub-bg: #f5f5f5;
    --sub-fg: #0f0f0f;

    --side-bg: #212121;
    --side-fg: #f5f5f5;

    --border-w: rgba(255,255,255,.10);
    --border-b: rgba(0,0,0,.10);

    --side-collapsed: 76px;
    --side-expanded: 292px;

    --font-title: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-body: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	
	--font-size-p: 14px;
	
	  --ink-900:#060606;
	  --ink-800:#080808;
	  --ink-700:#0b0b0b;
	  --ink-600:#0e0e0e;
	  --ink-500:#0f0f0f;
	  --ink-400:#272727;
	  --ink-300:#3f3f3f;
	  --ink-200:#575757;
	  --ink-100:#6f6f6f;

	  --pos-900: #0c341d; 
	  --pos-800: #145730; 
	  --pos-700: #1b7a43; 
	  --pos-600: #239d56; 
	  --pos-500: #27ae60; 
	  --pos-400: #3db670; 
	  --pos-300: #68c690; 
	  --pos-200: #93d7b0; 
	  --pos-100: #bee7cf; 

	  --pre-900: #1a003c;
	  --pre-800: #2c0065;
	  --pre-700: #3e008d;
	  --pre-600: #4f00b5;
	  --pre-500: #5800c9;
	  --pre-400: #691ace;
	  --pre-300: #8a4dd9;
	  --pre-200: #ac80e4;
	  --pre-100: #cdb3ef;

	  --tre-900: #341139;
	  --tre-800: #571c60;
	  --tre-700: #7a2786;
	  --tre-600: #9d32ac;
	  --tre-500: #ae38bf;
	  --tre-400: #b64cc5;
	  --tre-300: #c674d2;
	  --tre-200: #d79cdf;
	  --tre-100: #e7c3ec;


	  --ua-900: #493c17;
	  --ua-800: #796526;
	  --ua-700: #a98d35;
	  --ua-600: #dab544;
	  --ua-500: #F2C94C;
	  --ua-400: #f3ce5e;
	  --ua-300: #f6d982;
	  --ua-200: #f9e4a6;
	  --ua-100: #fbefc9;

	  --ext-900: #0a1931;
	  --ext-800: #112b52;
	  --ext-700: #173b72;
	  --ext-600: #1e4d93;
	  --ext-500: #2155A3;
	  --ext-400: #3766ac;
	  --ext-300: #6488bf;
	  --ext-200: #90aad1;
	  --ext-100: #bccce3;

	  --rose-900: #46091e;
	  --rose-800: #750f32;
	  --rose-700: #a31545;
	  --rose-600: #d21b59;
	  --rose-500: #E91E63;
	  --rose-400: #eb3573;
	  --rose-300: #f06292;
	  --rose-200: #f48fb1;
	  --rose-100: #f8bcd0;

	  --orange-900: #492e16;
	  --orange-800: #794d25;
	  --orange-700: #a96b34;
	  --orange-600: #da8a43;
	  --orange-500: #F2994A;
	  --orange-400: #f3a35c;
	  --orange-300: #f6b880;
	  --orange-200: #f9cca5;
	  --orange-100: #fbe0c9;


	  --slate-900:#141414;
	  --slate-800:#171717;
	  --slate-700:#1a1a1a;
	  --slate-600:#1e1e1e;
	  --slate-500:#212121;
	  --slate-400:#373737;
	  --slate-300:#4d4d4d;
	  --slate-200:#646464;
	  --slate-100:#7a7a7a;

	  --ua-white-00: #f5f5f5;
}
  }

  html, body{ height:100%; }
  body{
    font-family: var(--font-body);
    background:#f6f7f9;
    padding-top: calc(var(--topbar-h) + var(--subbar-h) + var(--alert-h));
	font-size: var(--font-size-p);
  }
  h1,h2,h3,h4,h5,h6,.title-font{ font-family: var(--font-title); }
  
  /* ===== SHELL ===== */
  .shell{
    display:flex;
    min-height: calc(100vh - (var(--topbar-h) + var(--subbar-h) + var(--alert-h)));
  }
  
  /* ===== CONTENT ===== */
  .content{
    margin-left: var(--side-collapsed);
    padding: 1rem;
    flex: 1;
    transition: margin-left .24s cubic-bezier(.2,.8,.2,1);
  }
  .sidebar.expanded ~ .content{ margin-left: var(--side-expanded); }
  .content-base {min-height: 90vh; }
  @media( max-width: 576px)
  {
	   .content-base 
	   {
		   width: calc(100% + 6rem);
		   margin-left: -5rem;
	   }
  }
      

  @media (max-width: 991.98px){
    :root{ --side-collapsed: 64px; --side-expanded: 280px; }
    .content{ margin-left: var(--side-collapsed); }
  }

/* Tooltip readability */
  .tooltip-inner{
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 10px;
    padding: .45rem .6rem;
  }

  .ua-loader__content.is-hidden{
    display:none;
  }
  .ua-loader{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:3rem 0;
  }
  .ua-loader__dot{
    width:16px;
    height:16px;
    border-radius:999px;
    background:var(--pre-500);
    animation:ua-loader-bounce 1s ease-in-out infinite;
  }
  .ua-loader__dot:nth-child(2){
    animation-delay:.15s;
    background:var(--pos-500);
  }
  .ua-loader__dot:nth-child(3){
    animation-delay:.3s;
    background:var(--ua-500);
  }
  @keyframes ua-loader-bounce{
    0%, 100%{
      transform:scale(.7);
      opacity:.6;
    }
    50%{
      transform:scale(1.2);
      opacity:1;
    }
  }