html, body {

margin: 0px !important;
padding: 0px !important;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
color: #333;
width: 100vw;
height: 100vh;
overflow-x: hidden;

}

body {

.ui-body-c,
.ui-overlay-c,
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a
.ui-panel-wrapper {
  text-shadow:0 0 0 !important;
}

}

*, *:before, *:after {

box-sizing: border-box;

}

a {

&, &:link, &:visited {
  color: rgb(0, 122, 204);
  text-decoration: none;
}
&:hover {
  text-decoration: underline;
}

}

h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1rem; } h4 { font-size: .8rem; } h5 { font-size: .7rem; } h6 { font-size: .6rem; }

.pan-text-lighter {

font-weight: lighter;

}

.pan-layout {

display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
min-height: 500px;
overflow: hidden;
> * {
  transition: all .3s ease-in-out;
}
&-overlay {
  display: var(--pan-overlay-display);
  cursor: pointer;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, .2);
  z-index: 100000;
}
&.pan-menu-open {
  --pan-layout-left-left: 0px;
  --pan-layout-right-left: var(--pan-layout-left-width);
  --pan-layout-right-right: calc(var(--pan-layout-left-width) * -1);
  --pan-overlay-display: block;
}

}