html   { display: block; position: relative; width: 100%; height: 100%; margin:0; padding: 0; overflow: hidden; }  
body   { display: block; position: relative; width: 100%; height: 100%; margin:0; padding: 0; overflow: hidden; }  

#frameCover  { display: none;  position: absolute; width: 100%;  height: 100%;  z-index: 100; overflow: hidden; pointer-events: auto; background:black; opacity:0.5;}

#frameTop    { display: none;  position: absolute; left: 0; right: 0; height: 4em; z-index: 40; overflow: hidden;  padding:0.5em; pointer-events: auto; }
#frameHead   { display: none;  position: absolute; left: 0; right: 0; height: 3.5em; z-index: 20; overflow: hidden;  padding:0.3333em; pointer-events: auto; }
#frameTools  { display: none;  position: absolute; left: 0; right: 0; height: auto;  z-index: 10; overflow: visible; pointer-events: auto; }
#frameBody   { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; overflow: hidden;  pointer-events: auto; overflow-y: scroll; }
#frameLeft   { display: none;  position: absolute; left: -256px; width: 240px; top: 4em; bottom: 0; z-index: 30; overflow: auto;    pointer-events: auto; }
#frameRight  { display: none;  position: absolute; right: -256px; width: 240px; top: 4em; bottom: 0; z-index: 30; overflow: auto;    pointer-events: auto; }

#blockLogo   { display: block; position: relative; margin:0; overflow: hidden;  height:3em;  line-height:3em; float:left; }
#blockTop    { display: block; position: relative; margin:0; overflow: hidden;  height:3em;  line-height:3em; float:right; }
#blockHead   { display: block; position: relative; margin:0.50em; overflow: hidden;  height:2em;  line-height:2em; font-weight: bold; margin-left: 1em; }
#blockTools  { display: block; position: relative; margin:0.25em; overflow: visible; height:auto; line-height:2em; }
#blockMenu   { display: block; position: relative; margin:0.75em; overflow: auto; }
#blockAux    { display: block; position: relative; margin:0.75em; overflow: auto; }
#blockBody   { display: block; position: relative; padding:0.25em 0 0.25em 0.5em; overflow: visible; background: inherit; }

#frameBody::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

#frameBody::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
  border: 5px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
}

#loginBox {
  position: fixed; 
  display: flex; 
  flex-direction: column;
  left:0; top:0; right:0; bottom:0;
  width: 18em; height:35em; min-height:18em;
  margin: auto; padding:1em;  
  background: #444; 
  border: 1px solid #048; 
  border-radius: 1em;
  text-align: center;
}

#frameHead > i {
  display: inline-block;
  position: relative;
  margin: 0.25em;
  border: none;
  border-radius: 5px;
  padding: 0;
  width: 1.3333333em;
  height: 1.3333333em;
  line-height: 1.3333333em;
  font-size: 1.5em;
  text-align: center;
  box-shadow: none;
  user-select: none;
  cursor: pointer;
}


#frameLeft button {
  display: block;
  margin: 0.25em 0 0.5em;
  width: 100%;
  text-align: left;
}

#popupMenu {
  display: none;
  position: fixed;
  width: auto;
  height: auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: auto;
}

.menuitem {
  display: block;
  padding:8px;
  margin:8px;
  color: inherit;
  cursor:pointer;
  text-decoration: none;
  border-radius: 4px;  
}

.menuitem:hover {
  background: #E0D4C8;
  text-decoration: none;
}

.menuitem.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.menuoption {
  background: #E8E8E8;
  color: black;
  border: 1px solid #909090;
  line-height: 125%;
}

.menuoption>img {
  margin: 0px;
}

.signaled {
  color: #004090;
}



@media (min-width: 864px) {
  #frameLeft   { left: 0px; }
  #frameRight  { right: 0px; }
  #frameHead   { left: 240px; right: 240px; }
  #frameTools  { left: 240px; right: 240px; }
  #frameBody   { left: 240px; right: 240px; }
  #frameHead i { display: none !important; }
}