/*======================================================================================================= 
									DOT THREE BUTTON 
=========================================================================================================*/
/*----------------------------------------------------------------------------------
dotv0 = dot vertical: Group Dropdown Menu  
------------------------------------------------------------------------------------*/
.dotv0-button {
	float:left; width:45px; height:45px; position:relative; border: 0px solid blue !important;
	bottom:0; border-radius:50%; margin:auto;
}   

.dotv0-button:after 
{ /*to avoid the parent div's height is 0*/
	content: " "; display:block;  
}

.dotv0-button:hover {
	background: #fff; 
}


.dotv-dropbtn {
	position: absolute;
 	font-size: 2.5rem;
	cursor: pointer; width:100%; height:100%;
	background-color: transparent !important;
	border: 0px solid red !important;
	padding: 7px;  
}


.dotv0-dropbtn {
	position: absolute;
 	font-size: 2.5rem;
	cursor: pointer; width:100%; height:100%;
	background-color: transparent !important;
	border: 0px solid red !important;
	/*
	bottom:0; border-radius:50%; margin:auto;
 	padding-top: 5px;
	*/ 
	padding: 7px;  
}



.dotv0-icons li {
	background: none repeat scroll 0 0 gray; /*dot color*/
	height: 7px;width: 7px;
	line-height: 0;
	list-style: none outside none;
 	margin-top: 3px;
	vertical-align: top;
	border-radius: 50%;
	pointer-events: none;
}


.dotv0-dropdown-right { /*for 3dots align to the right*/
	position: absolute;
	display: inline-block;  
	right: 0.14em;  
}

.dotv0-dropdown-left { /*for 3dots align to the left*/
	position:absolute;
	display: inline-block;
	left: 0; border:0px solid yellow;    
}


.dotv0-dropdown-content {
	display: none; clear:both;
	position: relative; float:none; bottom:-5px; left:5px; text-align:left; border:1px solid #ccc; max-height:190px;
  	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w, opacity */
	min-width: 160px;
	overflow: auto;
	z-index: 500;
	font-size: 1.55rem; 
}

   
.dotv0-dropdown-content a {display: block; color: white; padding: 7px 10px;text-decoration: none;}
.dotv0-dropdown-content a:link {color: white; background-color: #333;}
.dotv0-dropdown-content a:hover {color: white; background-color: #666;} /*Important!*/
 
.dotv0-dropdown-content::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.dotv0-dropdown-content::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.dotv0-dropdown-content::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/

.dotv0-circle { /*for mobile*/
	background: none repeat scroll 0 0 gray; /*dot color*/
	height: 7px;
	width: 7px;
	line-height: 0;
	list-style: none outside none;
	margin-right: 10px;
	margin-top: 3px;
	vertical-align: top;
	border-radius: 50%;
	pointer-events: none;
}



/*----------------------------------------------------------------------------------
dotv1 =  dot vertical: Item Dropdown Menu  
------------------------------------------------------------------------------------*/
.dotv1-showLeft { /*dot container*/
	background-color: transparent !important;
	border: 1px solid yellow !important;
	text-shadow: white !important;
	padding:10px;
}

.dotv1-icons li {
	background: none repeat scroll 0 0 gray; /*dot color*/
	height: 7px;width: 7px;
	line-height: 0;
	list-style: none outside none;
	margin-top: 3px;
	vertical-align: top;
	border-radius: 50%;
	pointer-events: none;
}
 
.dotv1-button {
	float:right; 
	width:39px; height:39px; /*the button box size*/ 
	position:relative; 
	border:0px solid blue !important; 
	border-radius:50%; /*bottom:0; margin:auto;*/
}  

.dotv1-button:after 
{ /*to avoid the parent div's height is 0*/
	content: " "; display:block;  
}

.dotv1-button:focus,
.dotv1-button:hover {
  background: #EBEBEB; 
}

.dotv1-dropbtn {
	position: absolute;
 	font-size: 2.5rem;
	cursor: pointer; width:100%; height:100%;
	background-color: transparent !important;
	border: 0px solid red !important;
 	padding: 7px;  
}

 
 
.dotv1-dropdown-right { /*for 3dots align to the right*/
	position: absolute;  
	display: inline-block;  
	right: 0.14em;  border:0px solid yellow !important;
}

.dotv1-dropdown-left { /*for 3dots align to the right*/
	position: absolute;
	display: inline-block;  
	left: 0.14em;  
}


.dotv1-dropdown-content {
	display: none;
	position: absolute; 
	
	/*
	bottom: 50px;
 	right:0;
	 */
	text-align:left; 
	
	border:1px solid #ccc; max-height:190px;
  	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w, opacity */
	min-width: 180px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 500;
	font-size: 1.55rem; 
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.dotv-dropdown-content {
	display: none;
	position: absolute; 
	text-align:left; 
	border:1px solid #ccc; max-height:190px;
  	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w, opacity */
	min-width: 180px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 500;
	font-size: 1.55rem; 
}

.dotv0-show {display: block;}
.dot-show {display: block;}


/*----------------------------------------------------------------------------------
dotv = dot vertical Dropdown Menu  
------------------------------------------------------------------------------------*/
.dotv-show {display: block;}
   
.dotv-dropdown-content a {display: block; color: white; padding: 7px 10px;text-decoration: none;}

.dotv-dropdown-content a:link {color: white; background-color: #333;}
.dotv-dropdown-content a:hover {color: white; background-color: #666;} /*Important!*/
 
.dotv-dropdown-content::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.dotv-dropdown-content::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.dotv-dropdown-content::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/



/*----------------------------------------------------------------------------------
horizontal dotthree button
------------------------------------------------------------------------------------*/
.buttdoth-trigger {
	height:100%; width:100%; /*margin:auto auto;  position:relative;*/
	border: 0px solid red !important;
 	display: flex;
	align-items: center; 
	justify-content: center; cursor:pointer;
}
 
.buttdoth-trigger > span {
	width: 6px; line-height: 6px;
	margin: 2px;
	text-align: center;
	font-size: 5px; border-radius:50%;  
	pointer-events: none; /*Important! to avoid from event trigger. Only trigger the parent object*/
}
 

/*submenu container*/
.buttdoth-dropdown  {
	display: none;
	position: absolute; 
	text-align:left; 
	border:1px solid #ccc; border-radius:7px; 
  	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w, opacity */
	max-height:190px;
	min-width: 180px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 500;
	font-size: 1.55rem;
}

.buttdoth-show {display: block;}

.buttdoth-dropdown a {
	display: none; color: white; padding: 7px 10px; 
	text-decoration: none; line-height:30px; /*IMPORTANT! must used line-height*/
}
.buttdoth-dropdown a.active {display: block; }

.buttdoth-dropdown a:link {color: white; background-color: #333;}
.buttdoth-dropdown a:hover {color: white; background-color: #666;} /*Important!*/
 
.buttdoth-dropdown::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.buttdoth-dropdown::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.buttdoth-dropdown::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/


/*----------------------------------------------------------------------------------
vertical dotthree button (modal page)
------------------------------------------------------------------------------------*/
.buttdotv-trigger2 {
	height:100%; width:100%; /*margin:auto auto;  position:relative;*/
	border:0px solid red !important;
 	display: flex;
	flex-direction: column;
	align-items: center; 
	justify-content: center; cursor:pointer;
}
 
.buttdotv-trigger2 > div {
	width: 6px; line-height: 6px;  
	margin: 2px;
	text-align: center;
	font-size: 5px; border-radius:50%;  
	pointer-events: none; /*Important! to avoid from event trigger. Only trigger the parent object*/
}




/*----------------------------------------------------------------------------------
vertical dotthree button
------------------------------------------------------------------------------------*/
.buttdotv-trigger {
	height:100%; width:100%; /*margin:auto auto;  position:relative;*/
	border: 0px solid red !important;
 	display: flex;
	flex-direction: column;
	align-items: center; 
	justify-content: center; cursor:pointer;
}
 
.buttdotv-trigger > div {
	width: 6px; line-height: 6px;  
	margin: 2px;
	text-align: center;
	font-size: 5px; border-radius:50%;  
	pointer-events: none; /*Important! to avoid from event trigger. Only trigger the parent object*/
}

.dotv3-button {
	float:right; 
	width:39px; height:39px; /*the button box size*/ 
	position:relative; 
	border:1px solid blue !important; 
	border-radius:50%; /*bottom:0; margin:auto;*/
	
}  

.dotv3-button:after 
{ /*to avoid the parent div's height is 0*/
	content: " "; display:block;  
}

.dotv3-button:focus,
.dotv3-button:hover {
  background: #666; 
}

.buttdotv-dropdown {
	display: none;
	position: absolute; 
	text-align:left; 
	border:px solid #ccc; border-radius:7px; 
	/*background-color: rgb(0,0,0);  Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w, opacity */
	max-height:190px;
	min-width: 180px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 500;
	font-size: 1.55rem; 
}

.buttdotv-show {display: block;}

.buttdotv-dropdown a { 
	display: none; color: white; padding: 7px 10px; 
	text-decoration: none; line-height:30px; /*IMPORTANT! must used line-height*/
}
.buttdotv-dropdown a.active {display: block;}

.buttdotv-dropdown a:link {color: white; background-color: #333;}
.buttdotv-dropdown a:hover {color: white; background-color: #666;} /*Important!*/
 
.buttdotv-dropdown::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.buttdotv-dropdown::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.buttdotv-dropdown::-webkit-scrollbar-thumb {background:#666; border-radius: 10px;} /*the moving part*/


/*----------------------------------------------------------------------------------
doth = dot horizontal Dropdown Menu (from left) 
Travel Planner 
------------------------------------------------------------------------------------*/
.doth-dropdown-smart-left {
	display: none; float:none; clear:both;
	position: absolute; top: 35px; 
	left:10px;  /*setting for left or right*/
	text-align:left; border:1px solid #ccc;  
 	background-color: #333; 
	min-width: 180px; 
	 max-height:190px; 
	overflow: auto;
	z-index: 1000;
	font-size: 1.55rem; color: white;
}

 /*
.doth-show {display: block;}must place hereafter the classname 'doth-dropdown-content'*/

.doth-dropdown-smart-left a {display: block; float:none; text-align:left; color: white; padding: 7px 10px; text-decoration: none; width:100%;}
.doth-dropdown-smart-left a:link {color: white; background-color: #333;}
.doth-dropdown-smart-left a:hover {color: white; background-color: #666;} /*Importat!*/
 
.doth-dropdown-smart-left::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.doth-dropdown-smart-left::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.doth-dropdown-smart-left::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/


.doth-dropdown-smart-left .task-remove,
.doth-dropdown-smart-left .task-move0,
.doth-dropdown-smart-left .task-move1,
.doth-dropdown-smart-left .task-move,
.doth-dropdown-smart-left .map-remove
 {
  display: none;
}

.doth-dropdown-smart-left .task-remove.active,
.doth-dropdown-smart-left .task-move0.active,
.doth-dropdown-smart-left .task-move1.active,
.doth-dropdown-smart-left .task-move.active,
.doth-dropdown-smart-left .map-remove.active
 {
  display: inline-block;
}


/*----------------------------------------------------------------------------------
dot horizontal Dropdown Menu (image list edit modal) 
------------------------------------------------------------------------------------*/
.buttdoth-dropdown2 {
	display: none; float:none; clear:both;
	position: absolute; 
	top: 40px; 
	right:10px;   
	text-align:left; border:1px solid #ccc; border-radius:7px;  
 	background-color: #333; 
	min-width: 180px; 
	max-height:190px; 
	overflow: auto;
	z-index: 1000;
	font-size: 1.55rem; 
}

 
.buttdoth-show2 {display: block;} /*must place hereafter the classname 'doth-dropdown-content'*/

.buttdoth-dropdown2 a {display: block; float:none; text-align:left; color: white; padding: 7px 10px; text-decoration: none; width:100%;}
.buttdoth-dropdown2 a:link {color: white; background-color: #333;}
.buttdoth-dropdown2 a:hover {color: white; background-color: #666;} /*Importat!*/
 
.buttdoth-dropdown2::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.buttdoth-dropdown2::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.buttdoth-dropdown2::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/


.buttdoth-dropdown2 .task-remove,
.buttdoth-dropdown2 .task-move0,
.buttdoth-dropdown2 .task-move1,
.buttdoth-dropdown2 .task-move,
.buttdoth-dropdown2 .map-remove
 {
  display: none;
}

.doth-dropdown-smart .task-remove.active,
.doth-dropdown-smart .task-move0.active,
.doth-dropdown-smart .task-move1.active,
.doth-dropdown-smart .task-move.active,
.doth-dropdown-smart .map-remove.active
 {
  display: inline-block;
}




/*----------------------------------------------------------------------------------
Position:: Important1 menu position upward or downward
------------------------------------------------------------------------------------*/
.submenu-upward-left {bottom: 50px; left:20px;} /*position at left towards right*/
.submenu-upward-right {bottom: 50px; right:20px;} /*position at right towards left*/ 

.submenu-downward-left {top: 50px; left:20px;} /*position at left towards right*/
.submenu-downward-right {top: 45px; right:30px;} /*position at right towards left*/

 
/*----------------------------------------------------------------------------------
spare
------------------------------------------------------------------------------------*/
.dotv1-dropdown-content a {display: block; color: white; padding: 7px 10px;text-decoration: none;}
.dotv1-dropdown-content a:link {color: white; background-color: #333;}
.dotv1-dropdown-content a:hover {color: white; background-color: #666;} /*Important!*/
 
.dotv1-dropdown-content::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.dotv1-dropdown-content::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.dotv1-dropdown-content::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/

.dotv1-circle { /*for mobile*/
	background: none repeat scroll 0 0 gray; /*dot color*/
	height: 7px;
	width: 7px;
	line-height: 0;
	list-style: none outside none;
	margin-right: 10px;
	margin-top: 3px;
	vertical-align: top;
	border-radius: 50%;
	pointer-events: none;
}



/*----------------------------------------------------------------------------------
doth = dot horizontal: Category Dropdown Menu  
------------------------------------------------------------------------------------*/
.doth-dropdown {display:inline-block;  position:relative;}  
.doth-dropdown-left {display:block; float:none; clear:left; left: 0; position:relative;}  /*left: 0.14em; *//*option: button position align to the left*/

/*button trigger*/
.buttdoth-trigger2 {
	border: 0px solid red; 
	background-color: #F7F7F7; text-align: center; cursor: pointer; 
	height:30px; 
	width:50px;  
	/*margin-top:5px; */
	padding:2px 2px; /*top bottom, left right*/
	border-radius:5px; z-index:200;/**/
}  
/*
.buttdoth-trigger:hover,
.buttdoth-trigger:focus {background-color: #fff;} the click dot3 container*/


.doth-btn-left {left:0; position: relative; border:0px solid red;}/*option: button margin*/

.doth {
  height: 7px; width: 7px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  pointer-events: none; /*VERY IMPORTANT! to avoid from trigger on the click object*/ 
}

.doth-boxxx { background-color:#FF3; position:relative; text-align: center;}

.doth-dropdown-content {
	display: none; float:none; clear:both;
	position: absolute; top: 35px; 
	left:10px;  /*setting for left or right*/
	text-align:left; border:1px solid #ccc;  
 	background-color: #333; 
	min-width: 180px; max-height:190px;
	overflow: auto;
	z-index: 500;
	font-size: 1.55rem; color: white;
}

 /*
.buttdoth-show {display: block;}must place hereafter the classname 'doth-dropdown-content'*/

.doth-dropdown-content a {display: block; float:none; color: white; padding: 7px 10px; text-decoration: none; width:100%;}
.doth-dropdown-content a:link {color: white; background-color: #333;}
.doth-dropdown-content a:hover {color: white; background-color: #666;} /*Importat!*/
 
.doth-dropdown-content::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.doth-dropdown-content::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.doth-dropdown-content::-webkit-scrollbar-thumb { background:#666; border-radius: 10px;} /*the moving part*/

.dot {
  height: 7px;width: 7px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  pointer-events: none;  
}

.updown-button {border:0px solid red; display:inline-block; height:auto; width:110px; padding:3px; text-align:right; margin-right:20px;}  
 
 
 
/*----------------------------------------------------------------------------------
doth2 = dot horizontal: Category Dropdown Menu  for video player
------------------------------------------------------------------------------------*/
.doth-dropbtn2 {
	border: 0px solid red; 
	background-color: #F7F7F7; text-align: center; cursor: pointer; 
	height:auto; 
	width:60px;  
	padding:7px 2px; /*top bottom, left right*/
	border-radius:5px;
} /*trigger point: button container*/

.doth-dropbtn2:hover,
.doth-dropbtn2:focus {background-color: #ebebeb;} /*the click dot3 container*/
 
.doth2 {
  height: 7px;width: 7px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  pointer-events: none;  
}
 

/*----------------------------------------------------------------------------------
doth3 = dot horizontal: Category Dropdown Menu  for travel planner
------------------------------------------------------------------------------------*/
.doth-dropbtn3 {
	border: 1px solid red; 
	background-color: #F7F7F7; text-align: center; cursor: pointer; 
	height:30px; 
	width:45px;  
	padding:0px 2px; /*top bottom, left right*/
	border-radius:3px; display: inline-block;
} /*trigger point: button container*/

.doth-dropbtn3:hover,
.doth-dropbtn3:focus {background-color: #ebebeb;} /*the click dot3 container*/
 
.doth3 {
  height: 5px; width: 5px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  pointer-events: none;  
}
 

/*----------------------------------------------------------------------------------
dot color
------------------------------------------------------------------------------------*/
.dot-white {background-color: #fff;}
.dot-gray {background-color: #999;}
.dot-darkgray {background-color: #333;}
.dot-black {background-color: #000;}