body { margin-top: 1px; }
canvas { touch-action: none; }
.alertOv { 
	position:fixed; 
	z-index:1; 
	left:40%; 
	top:170px; 
	padding:1px; 
	border-radius: 5px;
	border:2px solid #aaccaa; 
	z-index: 99;
}
.alertBox {top:7px; left:40px; background-color:#fff; center;padding:4px;}
.totop {
	background-color:rgba(228,250,228,1.0);
	width:99.8%;
	text-align: center; 
	padding:3px; 
	display:inline-block; 
	white-space: nowrap; 
	box-sizing: border-box;
	cursor: grab; 
	user-select: none;
	color:#000;
	touch-action: none;
}
.tobot {
	background-color:rgba(218,235,218,1.0);
	width:99.3%;
	text-align: center; 
	padding:3px; 
	display:inline-block; 
	white-space: nowrap; 
}		
.psizer { position: absolute; right: 0; bottom: 0;
	width: 18px; height: 18px; cursor: nwse-resize; background:
	linear-gradient(135deg, transparent 50%, rgba(0,0,0,.12) 60%); 
}
.imgw { overflow:hidden; box-sizing: border-box; display:inline-block; position: relative; }
.imgt { overflow:scroll; box-sizing: border-box; display:inline-block; position: relative; }
.canva { display:block; max-width:none; max-height:none; z-index:0;  position: relative;  }

.tmain { margin-top:1px; /*max-width:100%; width: -webkit-fill-available; */ }
.upt { text-align:center; height:25px; padding-top: 3px;
  border-radius:9px; display:inline-block;margin-left:5px; 
}
.icn { margin-right:3px; border-radius: 4px; width:32px; height:30px; position: relative; display: inline-block;} 
.icn:hover { background:#204218; } 

.imod { margin-right:3px; border-radius: 6px; border:2px solid rgba(70,70,70,0.7);  
		color:#fff;background-color:rgba(30,30,30,0.7); 
		cursor: pointer;display:inline-block; height:26px; text-align:center; }
.selmod { margin-right:3px; border-radius: 6px; border:2px solid #2C2; height:28px; color:#ffc;
		display:inline-block; background-color:rgba(80,80,210,0.7); text-align:center; }
.imod:hover { border:2px solid #3BB;  border:2px solid rgba(40,150,190,0.8); }

.parent {
	display:flex;  
}
.parent.stacked {
  flex-direction: column;
}
.parent.stacked {
  flex-direction: column;
}
.serClass {
  margin:0px;padding:0px;		
  -webkit-user-select: none;  -moz-user-select: none;
  -ms-user-select: none;  user-select: none;  
}
.upic {
  padding-left:2px; padding-top:2px;
  vertical-align:middle; 
  margin-right:4px; 
}
.langDiv {width:56px; color:#2f2; background:#7f7f7f; cursor: pointer;
	text-align:center; height:30px;	border-radius:14px; display:inline-block;
	overflow: hidden;
}
.langExp {
    transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, box-shadow .3s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10);
}
.lngIt {display:block; width:80x; color:#fff; margin:6px;}
.lngSet {display:block; color:#ff3;  background:#666; border-radius:8px;}

::-webkit-scrollbar {background-color: #a0a0b0;
  background-clip: content-box; 
  width:10px;    
  border-radius: 6px;   
}
::-webkit-scrollbar-thumb {
  background: #8080b0;
  border-radius: 6px;  
  width:10px;  
}
.modal-load { 
	font-size: 115%; font-weight:300; font-family:Inter;
	position: fixed; z-index: 99; left: 60px; top: 90px; 
	border-radius: 6px; padding: 3px;
	background-color: rgba(80,85,85,0.6); color: white;
}
.modal-cell { border-radius: 6px;
	padding: 4px; width: 370px; background-color: transparent;
	border:2px solid #bbb; border-radius: 6px;
	background-color:rgba(120,125,125,0.32); 
}
input[type="file"] { display: none; }
.custom-file {
	display: flex;
	justify-content: center; 
	align-items: center; 
	text-align:center;
	cursor: pointer;
	color: white;
	font-family: Inter;
}
.custom-file:hover {color: #ffa;}

.bottom-ctrl {
  position: fixed; z-index: 1; left: 50px; bottom: 40px; 
  border:2px solid #bbb; border-radius: 6px;
  font-size: 110%;
  padding: 5px;
  background-color: #555;
  height: 45px; 
}
#info {color:#eee; font-family:Arial; font-weight:normal;}

.synchro_btn { 
  position: absolute;
  height: 25px;
  width: 60px;
  font-size: 130%;
  font-weight:700;
  display: none; 
  position: fixed;
  z-index: 20; left: 700px; top: 5px; 
  border:1px solid #bbb;
  border-radius: 6px;
  padding: 2px;
  opacity: 0.8;
  background-color: rgba(140,145,95,0.6);
  color: rgba(172,255,172,1.0);
}
.synchro_btn:hover { opacity: 1.0; }

/* Custom scrollbar */
.scrbar {
  position:absolute; right:6px; 
  top:5px; z-index:10;	
  bottom: 7px; width:14px;
  background: #444; border-radius: 4px;
  touch-action: none;
}
.thumb-hit{
  position:absolute;
  top:0; right:0;
  width:30px;
  height:38px;
  transform: translate(6px, -2px);
  touch-action: none;
  z-index: 99;       
  background: transparent;
}
.thumb{
  position:absolute; left:50%; top:50%;
  width:14px; height:40px;
  transform: translate(-50%, -50%);
  background:#8a8; border-radius:7px;
  cursor:pointer; transition: background .1.5s;
  pointer-events: none;
}
.thumb:hover {
  background: #9c9;
}
.fmbut {
	width: calc(100% - 10px); background: #343434;
	border-radius:8px; border:2px solid #8888ee;
	color:#ffd; margin:5px; padding:6px;
}
.fmbut:hover {color:#ff4;}
.fmbox {
	position:fixed; z-index:4; 
	left:10px;
	top:44px; padding:5px; 
	border-radius: 5px; border:2px solid #88aa88;
	background: #252525;
}
.meabox {
	position:fixed; z-index:444; 
	left:144px;
	top:44px; padding:5px; 
	border-radius: 5px; border:2px solid #88aa88;
	background: #252525;
}
.rbox {
	border-radius: 7px; border:2px solid #88aa88; padding:4px; margin: 4px;
}
.icn-wrap{
 margin-left:2px; 	
 position: relative;
 display: inline-block;
}
.custom-tooltip {
  position: absolute; 
  top: 38px; left: -70%; 
  transform: translateX(-50%, -100%);
  background: #ffb; color: #000;
  padding: 6px 10px; border-radius: 4px;
  font-size: 14px; white-space: nowrap;
  opacity: 0; 
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 999;
}
.custom-tooltip.show {
  opacity: 1;
}
.landm {
  position:absolute;	
  z-index: 99;
  width:8px;
  height:8px;
  border:2px solid #3cf;
  border-radius: 3px;  
  touch-action: none;
  user-select: none;    
  cursor:move;
}
.landm:hover {
  border:2px solid #5df;
}

.delMea {
 position:absolute; z-index:99; left:10px; top:43px; 
}
#delMeaPopup {
 position:absolute; z-index:90; 
 left:12px; top:80px; padding:8px; 
 border-radius: 5px; border:2px solid #88aa88;
 background: #353252;	
 cursor: pointer;
 color:#FF0; 
}

#delMeaSingle,#delMeaAll {
  background: #455;
  margin:3px;
}

#delMeaSingle:hover,#delMeaAll:hover {
  color:#FFA; 
  background: #229922;
}
.mulIcn {
  position:absolute; z-index:90; bottom:1px; 	
  left: 50%; 
  transform: translateX(-50%); 
}
.bclose {
 position:absolute; 
 right:1px; 
 top:1px; 
 border:1px solid #7b7; 
 border-radius:3px;
 cursor:pointer;
 background:#ded;
 font-weight:200;"	
}
.bclose:hover {
  border:1px solid #db7; 
  background:#fff;
}

#DropMenu { 
position:fixed;
right:8px;
top:50px;
width:155px;
border:2px solid #aaccaa;align:right;
z-index:998;
border-radius:5px;
background-color:rgba(78,80,28,0.9);
padding:4px;
}
.emoa{
color:#ff2;
border-bottom:2px solid #aaccaa;
}
.emob{
color:#ff2;
border-bottom:2px solid #aaccaa;
background-color: #556050;
}

.emtr{ 
  border:3px solid #aca; 
  border-radius:4px; 
  background-color: #55555f;  
}