:root {
	--viewTables:block;
	--viewCircles:none;
	--viewText:block;
	--viewUtilities:block;
	--viewLobby:block;
	--viewLower:block;
  
	--tableColor:#7c7cff;
	--tableStroke:#313188;
}


body {
	font-family:'Arial', sans-serif;
	margin:0;
	padding:0;
	width:100%;
	position:absolute;
}

#header {
	display:block;  
	text-align:center;
	background-color:white;
	color: #ff893f;
	margin-bottom:5px;
}

svg text {
  font-family:'Courier', monospace;
}

svg {
  width:100%;
  transform:scale(0.9);
  border:solid 2px black;
  box-sizing:border-box;
  /*height:500px;*/
}

text.legend {
	font-weight:bold;
	font-size:14px;
}

text.legend.smallLegend {
	font-size:10px;
}

text.legend.medLegend {
	font-size:12px;
}

circle.tableLabel {
  fill:#fff;
  stroke:#000;
  stroke-width:0.5;
}

text.tableLabel {
  font-weight:bold;
  font-size:24px; /*7px*/
}

use[id^="table"] {
  stroke-width:0.2;
  fill:var(--tableColor);
  stroke:var(--tableStroke);
}

path#footPath {
  stroke:black;
  stroke-width:2;
  fill:none;
}

.tableMarker {
  opacity:1;
  display:var(--viewTables);
}

/* Both the Text and Circle */
.tableLabel {
  display:none;
}

.tableLabel.circle {
  display:var(--viewCircles);
}

.tableLabel.text {
  display:var(--viewText);
  opacity:0.8;
}

text.tableLabel.smaller {
  font-size:14px; /*5px*/
  
}

.text.tableLabel.smallest {
  font-size:12px;
}

text.roomName {
  font-size:7px;
  font-weight:bold;
}

circle.roomCircle {
  fill:#aaa;
  opacity:0.4;
}

/*
#mapControls {
  
  left:2%;
  padding:5px;
  background-color:#aaa;
}

#mapControls div {
  padding:5px 8px;
  font-weight:bold;
  background-color:#fdfdfd;
  border:solid 1px black;
  margin:8px;
  font-family:'Arial', sans-serif;
}

#mapControls div:hover {
  background-color:#7c7cff;
  color:white;
  
}
*/

#vendorListing {
	/*display:block; */
	position: fixed;
	bottom: 10px;
	left: 2%;
	width: 300px;
	border: solid 1px black;
	background-color: white;
	padding: 10px 2px 5px;
	z-index: 60;
	font-size:20px;
}


#vendorTarget {
	width:unset;
	float:left;
	height:80vh;
	padding:20px 20px 40px;
	overflow-y:auto;
	overflow-x:hidden;
	box-sizing:border-box;
	background-color:white;
	border:solid 1px black;
	margin-top:20px;
	margin-bottom:140px;
	
}	

#vendorTarget.mini {
	overflow-y:scroll;
}


#vendorListing.collapsed {
	height:20px;
	overflow:hidden;
}

#vendorListing.collapsed #puClose {
	content: '+';
}			


.listRow {
	position:relative;
	display:inline-block;
	padding:5px 0 5px 5px;
	width:100%;
}

.listRow .vendorListNames {
	font-size:80%;
	padding:5px 5px 5px 15px;
}

.listRow .vendorListDetails {
	display:block;
	padding:5px 5px 5px 15px;
	width:70%;
	white-space:break-spaces;
}

.listLeft {
	float:left;
}

.listRight {
	float:right;
}	

.listRight.link {
	color:blue;
	text-decoration:underline;
	cursor:pointer;
}

.listRow:nth-of-type(even) {
	background-color: #e2e2e2;
}

.listRow:before {
	content: ". . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
	width: 0;
	display: inline-block;
}

.listRow {
white-space: nowrap;
position: relative;
overflow: hidden;
}

.listRight, .listLeft {
	position:relative;
}

.listLeft {
	background-color:white;
	padding-right:1em;
	font-size:140%;
}

.listRight
 {
	background-color:white;
	padding-left:1em;
	padding-right:0.5em;
}

.listRow:nth-of-type(even) .listLeft,
.listRow:nth-of-type(even) .listRight {
	background-color:#e2e2e2;
}

.listRight {
	z-index:1;
	font-size:120%;
}

#vendorListControls  {		
	margin:8px auto;
	padding:8px 15px;
	background-color:#d1d1ff; 
	clear:both;
	font-size:130%;
}

#vendorListControls div {
	display:inline-block;
	margin:8px;
}

#vendorListControls select {
	font-size:19px;
	padding:3px 8px;
}

#vendorListControls select option {
	padding:2px 0 2px 8px;
}

.ui-autocomplete-category {
	font-weight: bold;
	padding: .2em .4em;
	margin: .8em 0 .2em;
	line-height: 1.5;
  }


.tagHeader {
	font-weight: bold;
	padding-left: 0;
	font-size: 140%;
	margin-top:25px;
}

.taggedVendor {
	padding: 5px 20px;
	cursor: pointer;
}




/* CARRY FROM  SCRIPTUS */
#map svg {
	width:100%;
	height:90%;
}


#popUpCard, #otherPopUpCard {
	display:none; 
	width: 90%; 
	background-color:white; 
	position:fixed; 
	top:5px; /* for smaller screen */
	/*left:5%;*/
	z-index:100;
	padding:10px;
	border: solid 2px #333;
	box-sizing: border-box;
	max-height: 80vh;
	overflow-y: scroll;
	box-shadow: #00000099 0px 10px 15px 3px;
}



#puContent {
	/*overflow:scroll;*/
}

#puClose {
	position:absolute;
	right:0;
	top:0;
	cursor:pointer;
	font-size:110%;
	padding:15px;
	color:white;
	background-color:#444;
}

#puClose:hover {
	cursor:pointer;
}

.popUpVendor {
	padding: 3px;
	box-sizing: border-box;
	width: 98%;
	margin: 10px;
}

.popUpHeader {
	color: #ffffff;
	font-size: 150%;
	font-weight: bold;
	background-color: #ff893f;
	display: inline-block;
	padding: 5px 8px;
}

.popUpTables {
	margin-top:5px;
	padding-left:20px;

}

.popUpFilters {
	overflow:auto;
	margin: 15px 0;
}

.filterItem, .filterButton {
	padding: 3px 5px;
	width: fit-content;
	border: solid red 1px;
	border-left-width: 5px;
	margin: 5px;
	float: left;
	color:black;
	background-color:white;
	box-sizing:border-box;
}

.filterButton {
	border-left-width:10px;
}

.transactionItem {
	padding:3px;
}


.filterButton.active {
	color:white;
	background-color:red;
	
}

.filterButton.active::after {
	content: "       x";
}

.cardBody {
	margin:10px;
	/*border:solid 2px lightblue; */
	padding:5px;
}

.copy {
	display:inline-block;
}

.highlight {
	display:inline-block;
	float:right;
}

#gCoffeeTea, #gNoEntry, #gDividers,
#gOneWay, #gTwoWays {
	display:none;
}



/* 
	Slider styles
*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}