form.ui-filterable {
 margin-bottom:0;
 margin-left:4px;
}
.ui-filterable-sortedby-buttons {
 cursor:pointer;
 float:left;
 margin:-2px -2px -4px -2px;
}
.ui-filterable-sortedby-buttons .ui-btn-icon-notext {
 background-color:rgba(111,172,213,0.2);
 background-position:1px 2px;
 border:1px outset #888;
 border-radius:2px;
 display:inline-block;
 height:21px;
 margin-left:-2px;
 margin-right:2px;
 margin-top:2px;
 width:18px;
}
.ui-filterable-sortedby-buttons .ui-btn-icon-notext:hover {
 background-color:rgba(128,255,255,0.2);
}
.ui-filterable-sortedby-buttons .ui-btn-icon-notext::after {
 background-color:transparent;	
 margin-left:0;			
}
.ui-icon-sort-alpha {
 background-image:url('images/sort.png') !important;
 background-position:-18px center !important;
}
.ui-icon-sort-numeric {
 background-image:url('images/sort.png') !important;
 background-position:-54px center !important;
}
.ui-input-search {
 border-color:#666;
 overflow-y:hidden;
}
.ui-input-search {		
 xborder-radius:2px 0 0 2px;
 xborder-right-width:0;
 margin:0;
}
.ui-input-search:after {
 width:16px;	
}
.ui-input-search input {
 /* .ui-filterable-sortedby-buttons .ui-btn-icon-notext = 18px + 2px + 1x = 21px
  * font-size is 16px (1em).  line-height = 21px/16px
  */
 line-height:1.3125;
 min-height:inherit;
 padding:0 0 0 1.75em;
 xwidth:calc(100% - 2px);
}
.ui-input-search .ui-input-clear.ui-btn-icon-notext:after {
 background-size:0.5em;
 background-position:4px 4px;
 height:16px;
 margin-top:-7px;       
 margin-top:-8px;       
 width:16px;
}

.ui-input-search.ui-input-has-clear {
 padding-right:0;
}

.notallowed,
.notallowed input,
.notallowed table {
 cursor:not-allowed !important;
}

#svgcontainer svg {
 visibility:hidden;
}

#modal {
 background-color:rgba(0,0,0,0.4);
 background-image:url('images/blur.svg');
 xbottom:0;
 height:100%;
 xleft:0;
 position:absolute;
 xright:0;
 xtop:0;
 visibility:hidden;
 width:100%;
 z-index:9999;
}
#modal .detail {
 background-color:rgb(255,245,230);
 border:2px solid #444;
 border-radius:10px;
 height:15em;
 margin:0 auto;
 padding:1em;
 position:relative;
 width:22em;
}
#modal .detail.over::before,
#modal .detail.under::after {
 font-size:0.6em;
 left:calc(50% - 0.5em);
 position:absolute;
}
#modal .detail.over::before {
 content:"\25b2";
 top:0.6em;
}
#modal .detail.under::after {
 bottom:0;
 content:"\25bc";
}
#modal .detail.hasDescr {
 height:22em;
 height:20em;
 width:80%;
 max-width:40%;
}
#modal .content {
 color:#333;
 cursor:default;
 height:100%;
 overflow:auto;
 position:relative;
}
#modal .content .logo {
 float:right;
 margin:0 0 0.5em 0.5em;
 width:96px;
}
#modal .content .o85 .logo {
 opacity:0.85;
}
#modal .content .s64 .logo {
 width:64px;
}
#modal .content .s80 .logo {
 width:80px;
}
#modal .content .s112 .logo {
 width:112px;
}
#modal .content .s128 .logo {
 width:128px;
}
#modal .content .s160 .logo {
 width:160px;
}
#modal .content .lm-64 .logo {
 margin-left:-64px;
}
#modal .content .lm-80 .logo {
 margin-left:-80px;
}
#modal .content .lm-96 .logo {
 margin-left:-96px;
}
#modal .content .lm-112 .logo {
 margin-left:-112px;
}
#modal .content .lm-128 .logo {
 margin-left:-128px;
}
#modal .content .lm-160 .logo {
 margin-left:-160px;
}
#modal .content .tm-075 .logo {
 margin-top:0.75em;
}
#modal .content .tm-100 .logo {
 margin-top:1em;
}
#modal .content .tm-125 .logo {
 margin-top:1.25em;
}
#modal .content .tm-175 .logo {
 margin-top:1.75em;
}
#modal .content h1 {
 color:#222;
 font-size:1.2em;
 margin:0;
}
#modal .content .booth {
 margin-bottom:1em;
}
#modal .content .descr {
 margin:1em 0;
}
#modal .content .other {
 margin-top:1em;
}
#modal .content .cover {
 height:100%;
 position:absolute;
 width:100%;
 z-index:1;
}
#modal .content .other {
 position:relative;
 z-index:2;
}
NO #modal .content > * {
 overflow-x:hidden;
}
.modal > * {
 -webkit-filter:blur(0.4px);
 filter:url('images/blur.svg#gaussian_blur');
 filter:blur(0.4px);
}
#modal {
 filter:none;
}

#test {
 font-family:BouganBlackSSiBold,sans-serif;
 font-size:4.5px;
 line-height:1;
 margin:-2em 0 0;
 padding:0;
 position:absolute;
 visibility:hidden;
}



html {
 height:100%;
}
body {
 height:100%;
 height:100vh;
 overflow:hidden;
}
body {
 font-family:Arial, Helvetica, sans-serif;
 line-height:1.25;
 margin:0; 
}
#header {
 cursor:default;
 position:relative;
}
#header > .intro {	
 height:100px;		
 padding:13px 0;
}
#header > .detail {	
 border-top:3px groove rgba(128,128,128,0.75);
}
.flex {
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 height:100%;
}
.headerflex {		
}
#event {		
 color:#00F;
 font-weight:bold;
 line-height:1.2;
 xline-height:1.302083333;
 text-align:center;
}
#legend {
 xfloat:right;
 font-size:0.8em;
 line-height:1.5;
 margin-right:-1em;
 position:relative;
 xtext-align:center;
}
#legend > div,
#legend > span > div {	
 display:block;
}
#legend > div > div,
#legend > span > div > div {	
 display:inline-block;
 margin-right:1em;
 white-space:nowrap;
 width:128px;
}
#legend > div > div::before,
#legend > span > div > div::before {
 content:' ';
 display:inline-block;
 height:14px;
 margin:-3px 3px 0 0;
 vertical-align:middle;
 width:14px;
}
#legend .na::before {
 background-color:#AAAAAA;
}
#legend .os::before {
 background-color:#33CC88;
}
#legend .as::before {
 background-color:rgba(51,204,136,0.5);
}
#legend .op::before {
 background-color:#3383CC;
}
#legend .ap::before {
 background-color:rgba(51,131,204,0.5);
}
#logo {
 float:left;
 margin:0 1em;
 height:100%;
}
NO#boothname {
 padding-left:5em;
 text-indent:-5.1em;
}
NO#boothname > span {	
 xbottom:0;
 display:inline-block;
 xfont-weight:normal;
 xheight:calc(1em * 1.2);
}
#boothname > span {	
 line-height:1.2;
 margin-left:1em;
}
#boothname > span > div {	
 display:inline-block;
}
#boothname > span > div.booth {
 font-size:0.8em;
}
#boothname > span > div.name {	
 margin-left:0.5em;
}
#boothname > span > div.available {
 opacity:0.5;
}
#boothname > span > div.occupied {
 color:#0080C0;
}

#dataview {		
 border-top:2px inset rgba(128,128,128,0.75);
 height:calc(
  4*(1em*1.25 + 0.5em)	
  + 1px			
  + 1em*1.3125 + 2px	
  );
}
#dataview > .table {
 cursor:default;
 height:calc(
  100%			
  - 1em*1.3125 - 2px	
  );
 line-height:1.25;
 position:relative;
}
#dataview .th,
#dataview .td {
 padding:0.25em;
 vertical-align:top;
}
#dataview .th {
 background-color:#f0f0f8;
 border-bottom:1px outset #666;
 font-weight:bold;
 text-align:left;
}
#searchlist {
 cursor:pointer;
 display:block;	
 height:calc(
  100%		
  - 1em*1.25	
  - 0.5em	
  - 1px		
  );
 overflow-y:scroll;
}
#searchlist .tr:nth-child(odd) {
 background-color:#DFECFF;
}
#dataview .th:first-child,
#searchlist .td:first-child {
 float:right;
 width:4.2em;
}
.sholds {
 color:rgba(255,140,0,1.0);
}

#svgcontainer {		
 background-color:rgba(255,239,213,0.25);
 border-top:3px groove rgba(128,128,128,0.75);
 cursor:move;
 height:calc(
  100%				
  - 13px - 100px - 13px		
  - 3px				
  - 2*0.8em*1.5 - 1em*1.2	
  - 2px				
  - 1em*1.3125 - 2px		
  - 4*(1em*1.25 + 0.5em) - 1px	
  - 3px				
  );
 overflow:hidden;
 position:relative;
}
#navigation {
 position:absolute;
 z-index:1;
}
#plus {
 cursor:pointer;
 cursor:zoom-in;	
}
#minus {
 cursor:pointer;
 cursor:zoom-out;	
}
#drag, #minus, #plus {
 display:block;
 margin:0.5em 0 0 0.5em;
 opacity:0.5;
 width:32px;
}
#minus:hover, #plus:hover {
 opacity:1;
}
#svgmagnifier {
 position:relative;
 width:100%;
}
svg {
 font-family:BouganBlackSSiBold,sans-serif;
 left:0;
 position:relative;
 top:0;
}
.unselectable {
 -webkit-touch-callout: none; 
 -webkit-user-select: none;   
 -khtml-user-select: none;    
 -moz-user-select: none;      
 -ms-user-select: none;       
 user-select: none;
}
a.web {
 color:#333;
 text-decoration:none;
}


/*
 * screen height >= 560px
 *	taller .intro
 */
@media all and (min-height:560px) {
 #header > .intro {
  height:125px;
  padding:1em 0;
 }
}
/*
 * screen width >= 1024px
 * screen width >= 768px and landscape
 *	move .detail (#legend & #boothname) from underneath .intro to side-by-side
 *		don't float .detail, or messes up float of #legend
 *	stabilize #event with float
 *	.headerflex is .flex but for .detail when .intro & .detail side-by-side
 */
@media all and (min-width:1024px),
       all and (min-width:768px) and (orientation:landscape) {
 #header > .intro {
  float:left;
 }
 #event {
  float:left;
 }
 #header > .detail {
  border-top:0 none rgb(0,0,0);
 }
 .headerflex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height:100%;
 }
 NOMS .headerflex {
  
  
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
 }
}

@media all and (min-width:1024px) and (max-height:559px),
       all and (min-width:768px) and (orientation:landscape) and (max-height:559px) {
 #header > .detail {
  height:100px;		
  padding:13px 0;
 }
}
@media all and (min-width:1024px) and (min-height:560px),
       all and (min-width:768px) and (orientation:landscape) and (min-height:560px) {
 #header > .detail {
  height:125px;		
  padding:1em 0;
 }
}
/*
 * screen width >= 416px and screen height >= 560px
 *	increase #event font size
 *	regardless if .intro & .detail side-by-side or not
 *	height of #event should always fit within .intro given min-width
 */
@media all and (min-width:416px) and (min-height:560px) {
 #event {
  font-size:1.4em;	
 }
}
/*
 * mobile starts with legend in 2x2 grid
 * screen width >= 564px
 *	legend to 4x1 grid (horizontal)
 */
@media all and (min-width:564px) {
 #legend > span > div {
  display:inline-block;
 }
}
/*
 * screen width >= 1024px
 * screen width >= 768px and landscape
 *	float #legend right within .detail
 *		allows left positioning of #boothname against .intro
 *	legend to 1x4 grid (vertical)
 */
@media all and (min-width:1024px),
       all and (min-width:768px) and (orientation:landscape) {
 #legend {
  float:right;
  margin-right:0;
 }
 #legend > span > div {
  display:block;
 }
 #legend > span > div > div {
  display:block;
 }
}
/*
 * screen width >= 1024px
 *	bump logo margin
 */
@media all and (min-width:1024px) {
 #logo {
 margin:0 2em;
 }
}
/*
 * screen width >= 1024px
 * screen width >= 768px and landscape
 *	position absolute #boothname between .intro & .detail
 *		#boothname not fixed width
 *		left position determined by .intro
 *		variable width to right edge of window
 * XXX	not needed if using .headerflex
 * XXX	if not position:absolute, don't float.  breaks #boothname out of container
 */
@media all and (min-width:1024px),
       all and (min-width:768px) and (orientation:landscape) {
 NO #boothname {
  bottom:0;
  position:absolute;
  top:auto;
 }
}
/*
 * screen width >= 1024px
 * screen width >= 768px and landscape
 *	left/right margin to fit between .intro/#legend
 *	allow for up to 2 lines for boothname name
 *		font-size effects height
 */
@media all and (min-width:1024px),
       all and (min-width:768px) and (orientation:landscape) {
 #boothname > span {
  margin:0 1em;
 }
 #boothname > span > div {
  display:block;
 }
 #boothname > span > div.name {
  margin-left:0;
  height:calc(
   2		
   * 1em	
   * 1.2	
   );
 }
}
/*
 * screen width >= 768px and landscape
 *	slightly larger #boothname booth font size
 *		not enough room for larger name
 */
@media all and (min-width:768px) and (orientation:landscape) {
 #boothname > span > div.booth {
  font-size:0.9em;
 }
}
/*
 * screen width >= 800px and landscape
 *	now enough room
 *	slightly larger #boothname name font size
 *		already increased #boothnname booth font size
 */
@media all and (min-width:800px) and (orientation:landscape) {
 #boothname > span > div.name {
  font-size:1.125em;
 }
}
/*
 * screen width >= 1024px
 *	normal #boothname font sizes
 */
@media all and (min-width:1024px) {
 #boothname > span > div.booth {
  font-size:1em;
 }
 #boothname > span > div.name {
  font-size:1.25em;
 }
}
/*
 * screen width >= 1024px
 * screen width >= 768px and landscape
 *	pull #svgcontainer side-by-side with #dataview
 *	set fixed width #dataview
 *	border between #dataview &# svgcontainer
 */
@media all and (min-width:1024px),
       all and (min-width:768px) and (orientation:landscape) {
 #dataview {
  float:left;
  width:21.2em;
 }
 #svgcontainer {
  border-left:3px groove rgba(128,128,128,0.75);
 }
}
/*
 * screen width >= 1024px and screen height < 560px
 * screen width >= 768px and landscape and screen height < 560px
 *	set height based on compact header size
 */
@media all and (min-width:768px) and (max-height:559px),
       all and (min-width:768px) and (orientation:landscape) and (max-height:559px) {
 #dataview {
  height:calc(
   100%				
   - 13px - 100px - 13px	
   - 2px			
   );
 }
}
/*
 * screen width >= 1024px and screen height >= 560px
 * screen width >= 768px and landscape and screen height >= 560px
 *	set height based on full header size
 */
@media all and (min-width:1024px) and (min-height:560px),
       all and (min-width:768px) and (orientation:landscape) and (min-height:560px) {
 #dataview {
  height:calc(
   100%				
   - 1em - 125px - 1em		
   - 2px			
   );
 }
}
/*
 * screen width >= 564px and screen height < 560px
 *	#legend now 4x1 grid (horizontal)
 */
@media all and (min-width:564px) and (max-height:559px) {
 #svgcontainer {
  height:calc(
   100%				
   - 13px - 100px - 13px	
   - 3px			
   - 0.8em*1.5 - 1em*1.2	
   - 2px			
   - 1em*1.3125 - 2px		
   - 4*(1em*1.25 + 0.5em) - 1px	
   - 3px			
   );
 }
}
/*
 * screen width >= 564px and screen height >= 560px
 *	#legend now 4x1 grid (horizontal)
 */
@media all and (min-width:564px) and (min-height:560px) {
 #svgcontainer {
  height:calc(
   100%				
   - 1em - 125px - 1em		
   - 3px			
   - 0.8em*1.5 - 1em*1.2	
   - 2px			
   - 1em*1.3125 - 2px		
   - 4*(1em*1.25 + 0.5em) - 1px	
   - 3px			
   );
 }
}
/*
 * screen width >= 1024px and screen height < 560px
 * screen width >= 768px and landscape and screen height < 560px
 *	#svgcontainer now remaining screen height under #header
 */
@media all and (min-width:1024px) and (max-height:559px),
       all and (min-width:768px) and (orientation:landscape) and (max-height:559px) {
 #svgcontainer {
  height:calc(
   100%				
   - 13px - 100px - 13px	
   - 3px			
   );
 }
}
/*
 * screen width >= 1024px and screen height >= 560px
 * screen width >= 768px and landscape and screen height >= 560px
 *	#svgcontainer now remaining screen height under #header
 */
@media all and (min-width:1024px) and (min-height:560px),
       all and (min-width:768px) and (orientation:landscape) and (min-height:560px) {
 #svgcontainer {
  height:calc(
   100%				
   - 1em - 125px - 1em		
   - 3px			
   );
 }
}