html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Verdana;
	font-size: 12px;
	background-color: #a8bf78; /* #a8bf78 #232f3e #111144 */
	overflow-y: hidden; /* prevents tablet reload-on-pulldown behavior */
	overscroll-behavior: contain; /* prevents tablet reload-on-pulldown behavior */
}

#mapGuard {
	position: absolute;
	inset: 0;
	background: transparent;
	touch-action: none;
	width: 100%;
	height: 100%;
	z-index: 11000;
}

#containerBackground {
	display: block;
	background-image: url('../images/background.png');
	background-repeat: repeat;
	background-position: -5px -5px;
  opacity: 0.100;
  width: 100%;
	height: 100%;
  z-index: -1;
}

#containerForeground {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
  width: 100%;
	height: 100%;
  z-index: 100;
	background-image: url('../images/instructions.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#container {
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

#banner {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
}

.banner-title {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 240px;
	height: 50px;
	background-image: url('../images/title.png');
	background-repeat: no-repeat;
	background-position: center;
}

.banner-icon-group {
	float: left;
	margin-top: 4px;
	height: 42px;
	line-height: 42px;
	font-size: 0px;
	text-align: center;
}

.banner-text {
	color: #2e4500;
	font-weight: bold;
	font-style: italic;
	font-size: 22px;
}

#sidebar {
	position: absolute;
	left: 0px;
	top: 50px;
	bottom: 0px;
	width: 235px; /* 235 normally, 615 for sidebar chooser */
	padding-left: 5px;
	padding-right: 0px;
	z-index: 0;
	opacity: 1.0;
	overflow: visible; /* Necessary for resizable handle */
}

#mapWrapper {
	position: absolute;
	left: 240px;
	top: 50px;
	right: 0px;
	bottom: 0px;
	background-color: #f0ede5; /* Doesn't work - needs to be inline style */
	z-index: 1;
}

#mapOverlay {
	position: absolute;
	left: 240px;
	top: 50px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
}

#snoobPreview {
	width:228px;
/*	height:180px;*/
	margin-top: 0px;
	margin-left: 0px;
	background-color: #ffffdd; /* #e9ffba #ffdd88; */
	border-style: solid;
	border-color: #889966; /* #ccaa00 */
	border-width: 1px;
	overflow: hidden;
}

#previewArea {
	padding-top: 25px;
	cursor: pointer; /* pointing hand */
}

#previewText {
	font-size: 10px;
	line-height: 120%;
	margin: 3px;
	white-space: normal; /* normal or nowrap, depending on desired wrapping */
}

input.text {
	width:150px;
	margin: 5px 1px 5px 0px;
}

button.dialog-button {
	width: 90px;
	height: 24px;
	margin-top: 3px;
	margin-bottom: 5px;
	font-family: Verdana;
	font-size: 12px;
}

div.container {
	width: 100%;
	height: 95%;
	margin: 0px;
	border: 1px;
}

div.header {
	padding: 5px 0 5px 5px;
}

div.left {
	float: left;
	width: 240px;
	margin: 0;
	padding-left: 0px;
	line-height:150%;
}

/* Possibly unused */
div.over {
	position: absolute;
	top: 40px;
	left: 90px;
	width: 200px;
	height: 600px;
	margin: 0;
	padding-left: 5px;
	line-height:150%;
	z-index: 99;
}

/* Possibly unused */
div.content {
	margin-left: 155px; /* 10px if using div.over */
	padding: 0px;
}

span.grayed {
	color: #999999;
}

#mapSearch {
	margin-top: 5px; /* Use 5 for controlSize of 26 or 27 */
	background-color: #ffffff;
	padding: 0 5px 0 5px;
	width: 200px;
	height: 25px; /* Use 25 for controlSize of 27, 24 for controlSize of 26 */
	/* font-family: Roboto; */
	font-size: 12px;
	font-weight: 300;
	text-overflow: ellipsis;
	border-width: 2px;
}

div.hidden-content {
	position: absolute;
	top: 0px;
	left: 0px; /* For new html2canvas, dynamically change to -768 */
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	max-width: 1024px; /* Could make this bigger */
	max-height: 1024px;
	opacity: 0.0; /* For new html2canvas, dynamically change to 1.0 */
	z-index: -1;
}

.modal-gwl {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.0); /* Black w/ opacity */
}

.context-menu-icon-checked {
	background-image: url("../images/checked-1.png");
}

.context-menu-icon-semi-checked {
	background-image: url("../images/semi-checked-1.png");
}

.context-menu-icon-unchecked {
	background-image: url("../images/unchecked-1.png");
}

.gwl-unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.gwl-semiselectable {
	pointer-events: none;
}

div.icon-group {
	display: block;
	position: relative;
	margin-bottom: 12px;
}

div.icon-row {
	display: block;
	clear: both;
	position: relative;
	margin-left: 0px;
	margin-bottom: 5px;
	height: 42px; /* Floating children don't stretch the parent div.  Sigh. */
	/* overflow: hidden; */ /* This seems to work as well, but not sure how reliable */
	font-size: 0;
}

div.icon-button-32 {
	display: block;
	width: 38px;
	height: 38px;
	background-image: url('../images/icons-32.png');
	background-color: transparent; /* transparent #ccccbb */
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: content-box;
	border: 1px solid transparent; /* transparent #aaaa99 */
	border-radius: 4px;
	margin-right: 5px;
	padding: 1px;
	visibility: hidden;
	pointer-events: auto; /* In case button appears on semiselectable div */
}

/* Cover div used for alternative disabled method */
div.icon-cover-32 {
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	background-color: #a8bf78; /* same as page background */
	border: 1px solid #a8bf78;
	border-radius: 4px;
	opacity: 0.6;
	visibility: hidden;
	padding: 1px;
	z-index: 2;
}

/* Make sure mode buttons have black borders */
div.icon-button-32.mode-button-32 {
	background-color: white;
	border-color: rgba(0,0,0,0.99); /* See 1/15/19 log entry for rationale */
}

/* Use custom look for hover on mode buttons */
@media (hover: hover) {
	div.icon-button-32.mode-button-32:hover {
		background-color: #eebbbb;
		border-color: rgba(0,0,0,0.99);
	}
}

/* No hover (or active, below) for mode buttons when already selected */
@media (hover: hover) {
	div.icon-button-32.mode-button-32.is-selected:hover {
		background-color: #ff0000;
		border-color: rgba(136,0,0,0.99);
	}
}

/* No active (or hover, above) for mode buttons when already selected */
div.icon-button-32.mode-button-32.is-selected:active {
	background-color: #ff0000;
	border-color: rgba(136,0,0,0.99);
}

/* Don't also put .icon-button-32 in here else when both hover and active, this rule wins */
@media (hover: hover) {
	div.no-hover.mode-button-32:hover {
		background-color: white; /* Must match mode-button-32 */
		border-color: rgba(0,0,0,0.99); /* Must match mode-button-32 */
	}
}

#modeToggle {
	margin-left: 20px;
}

@media (hover: hover) {
	div.icon-button-32:hover {
		background-color: rgba(255,255,255,0.3);
		border-color: rgba(221,221,221,0.99);
		cursor: pointer; /* pointing hand */
	}
}

/* Don't also put .icon-button-32 in here else when both hover and active, this rule wins */
@media (hover: hover) {
	div.no-hover:hover {
		background-color: transparent; /* Must match icon-button-32 */
		border-color: transparent; /* Must match icon-button-32 */
	}
}

div.icon-button-32:active {
	background-color: rgba(255,255,255,0.3); /* #a8bf78 */
	border-color: rgba(255,255,255,0.99);
}

/* Don't also put .icon-button-32 in here else when both hover and active, this rule wins */
div.no-hover:active {
	background-color: rgba(255,255,255,0.3); /* #a8bf78 */
	border-color: rgba(255,255,255,0.99);
}

/* We'd like to fake image opacity somehow, but we're settling for button-wide opacity */
div.icon-button-32.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* These need to be the same colors as in icon-button-32 to override non-disabled settings */
@media (hover: hover) {
	div.icon-button-32.is-disabled:hover {
		background-color: #cccccc;
		border-color: rgba(170,170,170,0.99);
	}
}

div.icon-button-32.is-disabled:active {
	background-color: #cccccc;
	border-color: rgba(170,170,170,0.99);
}

div.icon-button-32.is-disabled.disable-hidden {
	opacity: 0.5;
	pointer-events: none;
	visibility: hidden;
}

div.icon-button-32.is-visible {
	visibility: visible;
}

div.icon-button-32.is-hidden {
	visibility: hidden !important;
}

div.icon-button-32.is-selected {
	background-color: #ff0000;
	border-color: rgba(136,0,0,0.99);
}

div.icon-button-32.is-embedded-horizontally {
	margin: 5px 0px 5px 5px; /* If on right side, switch left and right margings */
	visibility: visible; /* Not really clear why we need this, but we do */
}

div.icon-button-32.is-embedded-vertically {
	margin-left: 5px;
	margin-right: 5px;
	visibility: visible; /* Not really clear why we need this, but we do */
}

div.icon-button-24 {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	background-image: url('../images/icons-24.png');
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	visibility: visible;
}

@media (hover: hover) {
	div.icon-button-24:hover {
		cursor: pointer; /* pointing hand */
	}
}

div.icon-button-24.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

#treeSliderBackground, #treeSlider {
	display: none;
	position: absolute;
	left: 240px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	border-style: solid;
	border-width: 1px;
}

#treeSliderBackground {
	z-index: 1;
	background-color: #98af68;
	border-color: rgba(0, 0, 0, 0.0);
	opacity: 0.4;
	padding-left: 5px;
}

#treeSlider {
	z-index: 2;
	padding-left: 7px;
	padding-top: 6px;
	border-color: rgba(0, 0, 0, 0.2);
}

#treeSliderHandle {
	display: none;
	position: absolute;
	width: 7px;
	height: 50px;
	background-color: white;
	z-index: 3;
	right: -5px;
	top: 50%;
	margin-top: -25px;
	border: 1px solid #788f48;
	background-image: url('../images/handle.png');
	background-repeat: no-repeat;
	background-position: center center;
}

/* Unused */
#treeDialogBackground {
	display: block;
	position: relative;
}

/* Unused */
#treeDialogContent {
	display: block;
	position: relative;
	box-sizing: content-box;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#treeDialog {
	background-color: #a8bf78;
	display: none;
	padding: 3px 5px 5px 5px;
	padding-bottom: 5px
}

#previewTitle {
	font-weight: bold;
}

#previewTitleVariant {
	font-weight: bold;
	font-style: italic;
	color: #aaaaaa;
	cursor: pointer;
}

/* The color is specified in span.fancytree-title, so we have to include that in our selector */
.fancytree-folder-gwl span.fancytree-title  {
	font-weight: bold;
/*	color: #770000;*/
}

.fancytree-folder-count-gwl {
	font-weight: normal;
	color: #aaaaaa;
	display: inline-block;
	visibility: visible;
}

.fancytree-parenthetical-gwl {
	font-weight: normal;
	color: #777777;
	display: inline-block;
	visibility: visible;
	font-style: italic;
}

.fancytree-unparenthetical-gwl {
	color: #bbbbbb;
}

.fancytree-ico-c.fancytree-marked-gwl span.fancytree-icon {
	background-position: -80px -112px;
}

.ui-chooser {
	border: 1px solid #809556 !important; /* Dark green dialog border #677a40 */
	background-color: #a8bf78; /* Same as treeDialog background for corner peek-through */
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

.ui-chooser-titlebar {
	background: #90a260;
	padding: 0.4em 7px !important;
	font-weight: bold;
}

.ui-chooser.ui-dialog {
	padding: 0px;
}

.ui-chooser .ui-button {
	padding: 0px;
}

.ui-chooser input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.ui-chooser .ui-dialog-titlebar {
	border: 0px;
}

.ui-gwl-fixed-button {
	width: 90px;
  box-sizing: border-box;
  margin: 0 1%;
}

.text-overlay-gwl {
	color: #ff0000;
	font-size: 18px;
	text-align: center;
	line-height: 30px;
/*	text-shadow: 0px 0px 4px black;*/
/*	background-color: rgba(255, 255, 255, 0.7);*/
}

.delete-menu-gwl {
	position: absolute;
	background: white;
	padding: 3px;
	color: #666;
	font-weight: bold;
	border: 1px solid #999;
	font-family: sans-serif;
	font-size: 12px;
	box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
	margin-top: -10px;
	margin-left: 10px;
	cursor: pointer;
}

@media (hover: hover) {
	.delete-menu-gwl:hover {
		background: #eee;
	}
}
Is 
/* Add the no-close class to dialog to remove X in upper right corner */
.no-close .ui-dialog-titlebar-close {
	display: none;
}

/* Center the OK/Cancel buttons within dialog */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align: center;
	float: none !important;
} 

.overpassDiv {
	margin-top: 10px;
	text-align: center;
}

.overpassElement {
	margin-bottom: 10px;
	width: 300px;
	height: 27px;
}

/* Change cursor during drag operations */
.ol-dragpan {
    cursor: grabbing !important; /* or cursor: -webkit-grabbing; for older browsers */
}