/* Grey's
#3b3b3b-Dark, 
#969696-Middle, 
#C4C4C4-Light, 
#D8D8D8-Lightest
*/
/* For modern browsers */
body {
	margin: 0; 
	padding: 0.2em;
  overflow-y: scroll;         /* ensures scroll behavior */
  scrollbar-width: none;      /* Firefox */
}
body::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Edge */
}


#menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.2em;
		background-color: #3b3b3b; /* Dark Grey */
		width: 100%;
		position: fixed;
		top: 0px; /* this covers <div id="client-id"> */
		left: 0;
		z-index: 1000;
		}
		#menu button {
			padding: .2em .5em .2em .2em;
			font-size: .9rem;	
			}
		#menu button.active { 
			color:red; 
			}
			
.container-div {
		display:none;
	}
		
.container-div.active {
	display: flex;
	flex-direction: column;
	gap: .5em;
	}


.click-remove {background-image: url("../png/remove.png");}
.click-show {background-image: url("../png/show.png");}
.click-hide {background-image: url("../png/hide.png");}
.click-copy {background-image: url("../png/copy.png");}
.click-map {background-image: url("../png/map.png");}
.click-redo {background-image: url("../png/reset.png");}
.click-add {background-image: url("../png/add.png");}
.click-accuracy {color:blue;}
[class*="click-"] {
    background-size: cover;
    background-color: transparent;
    border: 0;
    height: 1.2em;
    width: 1.2em;
		cursor: pointer;
		margin: 0 0 0 .5em;
	}

button { cursor: pointer; }

input.editable:focus {background-color:Yellow; font-size: 2em;}
input.editable_alternate:focus {background-color:Yellow; font-size: 2em;}