/*$breakpoint argument choices:
    - phone
    - tab-port
    - tab-land
    - desk
    - big-desktop
    */
body {
  box-sizing: border-box; }

*, ::before, ::after {
  box-sizing: inherit; }

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000; }
  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem; }

.isHidden {
  display: none; }
  @media only screen and (max-width: 37.5em) {
    .isHiddenMobile {
      display: none; } }

body {
  color: #777; }

:root {
  --leftPanel: 150px;
  --negativeLeftPanel: -150px;
  --mobileLeftPanel: 150px;
  --mobileNegativeLeftPanel: -150px; }

.pure-img-responsive {
  max-width: 100%;
  height: auto; }

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
  position: relative;
  left: 0;
  padding-left: 0; }
  #layout.active .menu-link {
    left: var(--leftPanel); }
  #layout.active #menu {
    left: var(--leftPanel);
    width: var(--leftPanel); }

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
  margin-left: var(--negativeLeftPanel);
  /* "#menu" width */
  width: var(--leftPanel);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  /* so the menu or its navicon stays above all content */
  background: #191818;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  #menu a {
    color: #999;
    border: none;
    padding: 0.6em 0 0.6em 0.6em; }
  #menu .pure-menu,
  #menu .pure-menu ul {
    border: none;
    background: transparent; }
  #menu .pure-menu ul,
  #menu .pure-menu .menu-item-divided {
    border-top: 1px solid #333; }
  #menu .pure-menu li a:hover,
  #menu .pure-menu li a:focus {
    background: #333; }
  #menu .pure-menu-selected,
  #menu .pure-menu-heading {
    background: #1f8dd6; }
  #menu .pure-menu-selected a {
    color: #fff; }
  #menu .pure-menu-heading {
    font-size: 110%;
    color: #fff;
    margin: 0; }

/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
  position: fixed;
  display: block;
  /* show this only on small screens */
  top: 0;
  left: 0;
  /* "#menu width" */
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  /* change this value to increase/decrease button size */
  z-index: 10;
  width: min-content;
  height: auto;
  padding: 14px; }
  .menu-link:hover, .menu-link:focus {
    background: #000; }

/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
  .header,
  .content {
    padding-left: 2em;
    padding-right: 2em; }
  #layout {
    padding-left: var(--leftPanel);
    /* left col width "#menu" */
    left: 0; }
  #menu {
    left: var(--leftPanel); }
  .menu-link {
    position: fixed;
    left: var(--leftPanel);
    display: none; }
  #layout.active .menu-link {
    left: var(--leftPanel); } }

@media (max-width: 48em) {
  /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
  #layout.active {
    position: relative;
    left: var(--leftPanel); } }