@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --font-sanserif:"Roboto",  "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; 
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-size-normal:1em;
  --font-size-h1:2em;
  --color-background:#e8e8e8;
  --color-menu-bg:#fff;
  --color-menu-bg:#458fb4;
  --color-element-bg:#fff;
  --radius-xs: .125rem;
    --radius-lg: .5rem;
    --radius-none:0;
  --menu-shadow: inset 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  --element-shadow: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
}

.font-sans {
      font-family: var(--font-sanserif);
      font-weight: var(--font-weight-300);
}

.has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant=inset]) {
background: linear-gradient(45deg, #8ec5fc 0.000%, #8dd3ff 25.000%, #a1d8ff 50.000%, #c1d2ff 75.000%, #e0c3ff 100.000%);
background: var(--color-menu-bg);

}

.bg-sidebar {
 background: none;
}

.bg-background {
    background-color: var(--color-background);
}

main {
  border-radius: unset;
  margin: unset;
  -webkit-box-shadow: inset 1rem 0 0.5rem -0.5rem rgba(47, 43, 61, 0.12); 
  box-shadow: --menu-shadow;
}

.data-\[active\=true\]\:font-medium[data-active=true] {
    font-weight: var(--font-weight-400);
}


.group\/menu-item{
  font-size: var( --font-size-normal);
  /*
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
*/
}

#app .group\/menu-item span{
  font-size: var(--font-size-normal);
}



.group\/menu-item>a{
/* margin-inline: .75rem; */
}

.group\/menu-item svg{
  /* display: none; */
}


header{
   background-color: var(--color-element-bg);
   margin: 1em;
   border-radius: .375rem;
       box-shadow: var(--element-shadow);
}


.rounded-xl{
  border-radius: var(--radius-lg);
}
.p-6{
  background-color: var(--color-element-bg);
}


.text-xl{
  font-size: var(--font-size-h1);
  font-weight: var(  --font-weight-300)  ;
}