@import url(https://www.diag-r.app/static/styles/module/typo.desktop.css);
   @import url(https://www.diag-r.app/static/styles/module/color-scheme.surface.css);
   @import url(https://www.diag-r.app/static/styles/module/color-scheme.color.css);
   :root { 
      /*Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.*/
      --sharp-easing:cubic-bezier(0.4, 0.0, 0.6, 1); --easing-standard:cubic-bezier(.2,0,0,1);
      --easing-legacy:cubic-bezier(.4,0,.2,1);     --decelerate-legacy:cubic-bezier(0,0,.2,1);   --accelerate-legacy:cubic-bezier(.4,0,1,1);
      --easing-emphasized:cubic-bezier(.2,0,0,1);  --decelerate-emphasized:cubic-bezier(.05,.7,.1,1);   --accelerate-emphasized:cubic-bezier(.3,0,.8,.15);
      --shadow-0:0 0 1px 0 rgba(0,0,0,.15), 0 0 2px 1px rgba(0,0,0,.08);   --shadow-1:0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
      --shadow-2:0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);   --shadow-3:0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 
      --shadow-4:0 0 1px 0 rgba(0,0,0,.45), 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 
      
      margin:0; padding:0; background-color:var(--surface-dim); font:var(--bodyM); letter-spacing:normal; color:var(--on-surface-alt); fill:var(--on-surface-alt); border-color:var(--outline-alt);
   }

   /* -- Clear user agent style -- */
   html, body, div, p, span, footer, header, main, section, article, aside, figure, strong, a, img, sup, ol, ul, li, canvas, svg, button, input, textarea, select { 
      -webkit-appearance:initial; appearance:initial; margin:unset; margin-block:unset; margin-inline:unset; padding:unset; padding-block:unset; padding-inline:unset; 
      outline:unset; border:unset; font:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit; color:inherit; fill:inherit; user-select:none; box-sizing:border-box; }

   h1, h2, h3, h4, h5, h6 { -webkit-appearance:unset; appearance:unset; margin-block:0; margin-inline:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   h1 { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); }
   h2 { font:var(--titleL); letter-spacing:var(--titleL-spacing); }
   h3 { font:var(--titleM); letter-spacing:var(--titleM-spacing); }
   h4 { font:var(--titleS); letter-spacing:var(--titleS-spacing); }
   h5 { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   ol, ul { list-style:none; }
   :any-link, a, [onclick], button { cursor:pointer; }
   :any-link, a { text-decoration:none; color:inherit; }
   :focus-visible { -webkit-appearance:initial; appearance:initial; }
   b, strong { font:inherit; font-weight:600; font-family:inherit; font-size:inherit; font-style:inherit; }
   strong { text-decoration:underline; }
   kbd { display:inline-block; padding:6px 8px; margin-inline:4px; font-family:monospace; font-weight:700; line-height:1; white-space:nowrap; color:var(--on-container); background-color:#eeeeee; border:1px solid #b4b4b4; border-radius:4px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; }
   img:not[src] { opacity:0; }

   /****************   scrollbar   ****************/
   ::-webkit-scrollbar{ width:16px; outline:6px solid var(--surface-container-high); outline-offset:-6px; background-color:var(--surface-container-highest); transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   ::-webkit-scrollbar:hover{ background-color:var(--surface-container); outline-color:var(--surface-container-high); }
   ::-webkit-scrollbar-thumb{ background-color:var(--surface); outline:7.5px solid var(--surface-container-high); outline-offset:-6px; box-shadow:none; border-radius:8px; transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   :hover::-webkit-scrollbar-thumb { background-color:var(--surface); outline-width:7.5px; outline-offset:-6px; }
   ::-webkit-scrollbar-thumb:hover { background-color:var(--surface); outline-width:5.5px; outline-offset:-4px; }
   ::-webkit-scrollbar-thumb:active { background-color:var(--surface); outline-width:4.5px; outline-offset:-3px; }
   @media only screen and (max-width:599px) { ::-webkit-scrollbar { display:none; } }

/************************************************************************************************************************************************************************************************/
/************************************************************************************************************************************************************************************************/

   /************ html: surface-container | main: surface ****************/                 
   body { --display-width:100vw; position:relative; overscroll-behavior:contain; height:100%; max-height:100vh; min-width:360px; max-width:var(--display-width); overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch;  }
   [role="document"] { height:100%; max-height:100vh; background-color:var(--surface-container-high);  position:relative; z-index:1; contain:content; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; overflow-y:scroll; }

   :is(body,[role="document"]) > header { contain:content; position:sticky; flex:none; height:64px; top:0; padding-inline:4px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; transition:height 200ms var(--easing-emphasized), padding 250ms var(--easing-emphasized); }
   :is(body,[role="document"]) > main { contain:content; position:relative; flex:1; padding-inline:8px; margin-inline:16px; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
   @media only screen and (max-width:599px) { :is(body,[role="document"]) > main { padding-inline:8px; margin-inline:0; } }

   .container { background-color:var(--surface); color:var(--on-surface-alt); fill:var(--on-surface-alt); border:1.5px solid var(--outline-alt); }

   .toolbar { contain:content; position:absolute; z-index:10; inset:auto 24px 16px auto; flex:none; max-width:420px; height:64px; padding:8px; border-radius:999px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; column-gap:4px; transform-origin:bottom right; }
   .toolbar { background-color:var(--surface-bright); box-shadow:var(--shadow-3); outline:1px solid var(--outline-alt); }
   .toolbar { transition:opacity 125ms var(--easing-emphasized), transform 250ms var(--decelerate-emphasized), max-width 400ms var(--decelerate-emphasized), height 400ms var(--decelerate-emphasized); }
   .toolbar[aria-hidden] { opacity:0; max-width:0; height:0; transform:translateY(36px); }
   .toolbar[aria-hidden] { transition:opacity 150ms var(--easing-emphasized) 50ms, transform 200ms var(--easing-emphasized) 150ms, max-width 300ms var(--easing-emphasized), height 300ms var(--easing-emphasized); }
   

   [data-svg]:empty { opacity:0; }
   [data-svg]:not(button) { user-select:none; contain:content; position:relative; flex:none; width:var(--svg-size); height:var(--svg-size); padding:0; margin:0; }
   [data-svg]:not(button).icon { --svg-size:24px; width:40px; height:40px; }
   [data-svg]:not(button) > svg { pointer-events:none; position:absolute; inset:0; display:block; width:var(--svg-size); height:var(--svg-size); margin:auto; padding:0; fill:inherit; stroke:none; background-color:transparent; background:none; border:none; transition:fill 150ms var(--easing-emphasized); }

/************************************************************************************   buttons :: generic   ************************************************************************************/
/************************************************************************************************************************************************************************************************/
   button, [role=button] { user-select:none; position:relative; flex:none; height:var(--height-btn); width:fit-content; padding-inline:var(--padding-btn); display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border-radius:var(--corner-btn); box-sizing:content-box; background-clip:padding-box; border:max(0px,calc((48px - var(--height-btn)) / 2)) solid transparent; font:var(--font-btn); letter-spacing:var(--font-spacing-btn); white-space:nowrap; gap:var(--spacer); }
   button, [role=button] { background-color:var(--bg-color); color:var(--color); fill:var(--color); outline:var(--outline-width) var(--outline-style) var(--outline-color); outline-offset:min(0px,calc(((var(--height-btn) - 48px) / 2) - 1px)); }
   button, [role=button] { transition-property:opacity, fill, background, color, width, height, padding, margin, border, outline; transition-duration:150ms; transition-timing-function:var(--easing-emphasized); }
   button > svg { pointer-events:none; display:block; width:var(--svg-size); height:var(--svg-size); padding:0; fill:inherit; stroke:none; background:none; border:none; transition:fill 150ms var(--easing-emphasized); }

   /** Size  **/  button, button.small { --height-btn:40px; --outline-width:1px; --padding-btn:16px; --svg-size:20px; --spacer:8px; --font-btn:var(--labelL); --font-spacing-btn:var(--labelL-spacing); }
                  button.medium { --height-btn:56px; --outline-width:1.5px; --padding-btn:24px; --svg-size:24px; --spacer:8px; --font-btn:var(--titleM); --font-spacing-btn:var(--titleM-spacing); outline-width:1.5px!important; outline-offset:-1.5px!important; }
                  button.large { --height-btn:96px; --outline-width:2px; --padding-btn:48px; --svg-size:32px; --spacer:12px; --font-btn:var(--headlineS); --font-spacing-btn:var(--headlineS-spacing); outline-width:2px!important; outline-offset:-2px!important; }
                  button.xlarge { --height-btn:136px; --outline-width:2.5px; --padding-btn:64px; --svg-size:40px; --spacer:16px; --font-btn:var(--headlineL); --font-spacing-btn:var(--headlineL-spacing); outline-width:2.5px!important; outline-offset:-2.5px!important; }

   /** Shape **/  button, button.round { --corner-btn:999px; }
                  button.square { --corner-btn:12px; }  button.square.medium { --corner-btn:16px; }  button.square:is(.large,.xlarge) { --corner-btn:28px; }
                  button.icon { width:var(--height-btn); aspect-ratio:1; --padding-btn:unset; --corner-btn:50%; }

   /** Style **/  button { --bg-color:var(--surface-container-low); --color:var(--on-surface-variant); --outline-color:var(--outline); --outline-style:solid; }
                  button.icon { justify-content:center; --bg-color:transparent; --color:var(--on-surface-variant); --outline-style:none; }
                  button.filled { --bg-color:var(--primary); --color:var(--on-primary); --outline-style:none; }
                  button.tonal { --bg-color:var(--secondary-container); --color:var(--on-secondary-container); --outline-style:none; }
                  button.tonal.tertiary { --bg-color:var(--tertiary-container); --color:var(--on-tertiary-container); }
                  button.tonal-variant { --bg-color:var(--surface-container-variant-low); --color:var(--on-surface-variant); --outline-style:none; }
                  button.text { --bg-color:transparent; --color:var(--primary); --outline-style:none;  }
                  button.outlined { --bg-color:transparent; --color:var(--on-surface-variant); --outline-color:var(--outline-variant); --outline-style:solid; }
                  button.outlined-primary { --color:var(--primary-container); --outline-color:var(--primary-container); --outline-width:1.5px; }
                  /*button.outlined.tertiary { --color:var(--inverse-tertiary); --outline-color:var(--inverse-tertiary); }*/
                  button.outlined-primary:is(:hover,:active,[aria-selected]) { --color:white; --bg-color:var(--outline-color); }

/* =======================----->>>   dialog   <<<-----======================= */
   .scrim { position:fixed; contain:content; inset:0; opacity:0; pointer-events:none; z-index:10; width:0; height:0; margin:auto; padding:0; backdrop-filter:blur(1px) contrast(60%) brightness(40%); 
                  transition:backdrop-filter 125ms var(--easing-emphasized) 125ms, opacity 75ms var(--easing-emphasized) 225ms, width 25ms var(--easing-emphasized) 300ms, height 25ms var(--easing-emphasized) 300ms; }
   .scrim:not([aria-hidden]) { pointer-events:all; opacity:1; z-index:10; width:100dvw; height:100dvh; transition:opacity 125ms var(--easing-emphasized), backdrop-filter 175ms var(--easing-emphasized); }
   .scrim:not([aria-hidden]) + [role=dialog] { z-index:11; pointer-events:all; transform:translateY(-5dvh); height:var(--dialog-height); padding:24px; 
                                                         transition:opacity 150ms var(--easing-emphasized) 100ms, transform 400ms var(--easing-emphasized) 100ms, height 350ms var(--sharp-easing) 125ms, padding 350ms var(--sharp-easing) 125ms; }
   body:has(.scrim:not([aria-hidden])) [role=document] { opacity:.38; transition:opacity 125ms var(--easing-emphasized); }
   [role=dialog] { font:var(--bodyL); z-index:11; pointer-events:none; position:absolute; inset:0; transform-origin:top; transform:translateY(calc(-50dvh - 50%)); min-width:280px; width:var(--dialog-width); max-width:600px; height:0; padding:0; margin:auto; contain:content; flex:none; display:block; border-radius:28px; background-color:var(--surface-container); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; row-gap:16px; 
                     transition:opacity 75ms var(--easing-emphasized) 200ms, transform 250ms var(--easing-emphasized), height 150ms var(--easing-emphasized), padding 100ms var(--easing-emphasized); }
   [role=dialog] > [data-svg] { flex:none; width:36px; height:36px; }
   [role=dialog] > [data-svg] > svg { width:36px; height:36px; }
   [role=dialog] > .headline { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); text-align:center; }
   [role=dialog] > .text { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   [role=dialog] > .text > div:not(:first-child) { margin-block:16px 0; }
   [role=dialog] > form { margin-inline:24px; }
   [role=dialog] > .buttons { padding-block:8px 0; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:8px; }
   [role=dialog] > #shortcuts { margin-inline:auto; margin-block:16px auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; row-gap:16px; }
   [role=dialog] > #shortcuts > li { height:32px; }

   /**************   snackBar   **************/
   .snackbar { contain:content; position:fixed; z-index:8; bottom:-48px; left:16px; right:16px; border-radius:4px; transform:translateY(0px); width:auto; max-width:560px; height:0; opacity:0; padding-inline:16px 8px; overflow:hidden; background:var(--inverse-surface); color:var(--inverse-on-surface); font:var(--bodyM); letter-spacing:var(--bodyM-spacing); line-height:48px; box-shadow:var(--shadow-3); will-change:transform, opacity, height; transition:transform 300ms var(--easing-emphasized), opacity 150ms var(--easing-emphasized), height 150ms var(--easing-emphasized); }
   .snackbar:not([inert])[aria-expanded=true] { height:48px; opacity:1; transform:translateY(-96px); }
   .snackbar[aria-expanded=false] { height:0; opacity:0; transform:translateY(0px); }