/*
	License

	This work is licensed under the Creative Commons Attribution 4.0 International License.
	To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

	Author:		@vir2alexport
	Date:		Feb 10 2023 
	License:	https://creativecommons.org/licenses/by/4.0/legalcode
*/

BODY{
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;
}
UL{
	font-size:15pt;
}
HEADER{
	position:fixed;
	width:100%;
	height:50px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	background:white;
	border-bottom:solid 1px black;
	z-index:5;
}
	SECTION.ads{
		width:30%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
		.ads A{
			padding:6px;
			color:#fff;
			background:#800080;
			text-decoration:none;
		}
		.ads A:hover{
			color:gold;
		}
	SECTION.logo{
		width:40%;
		font-size:20pt;
		color:#800080;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
	SECTION#settings{
		width:30%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		-webkit-transition-duration: .5s;
		   -moz-transition-duration: .5s;
			 -o-transition-duration: .5s;
				transition-duration: .5s;
	}
MAIN{
	position:relative;
	top:50px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	z-index:1;
}
	CANVAS {
		position:relative;
		z-index:2;
	}
	.canvasMain, .canvasCross {
		position:absolute;
		top:70px;
		left:0;
	}
	#coords {
		position:absolute;
		bottom:0;
		left:22px;
	}
SECTION{
	margin:0;
}
FIELDSET.field{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	background:#ddd;
}
FIELDSET.field > DIV{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	margin:0px 2px 0px 2px;
}
FIELDSET.field DIV.field-right DIV{
	
}
FIELDSET.field DIV.field-right BUTTON{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height:100%;
}
FIELDSET.field LABEL{
	margin-left:2px;
}
FIELDSET.field BUTTON{
	
}
FIELDSET.field SUP{
	cursor:default;
	color:white;
	background:#0000ff;
	font-size:8pt;
	font-weight:bold;
	margin-left:2px;
	padding:0 3px 0 3px;
	-webkit-border-radius: 10px 10px 10px 0px;    
			border-radius: 10px 10px 10px 0px; 
		 -ms-border-radius:10px 10px 10px 0px;
		-moz-border-radius:10px 10px 10px 0px;
	  -khtml-border-radius:10px 10px 10px 0px;
}
FIELDSET.field SUP:active:after {
    position:absolute;
	content:attr(title);
    padding:5px;
    font-size:10pt;
	background: blue;
	-webkit-border-radius: 0px 10px 10px 10px;    
			border-radius: 0px 10px 10px 10px; 
		 -ms-border-radius:0px 10px 10px 10px;
		-moz-border-radius:0px 10px 10px 10px;
	  -khtml-border-radius:0px 10px 10px 10px;
}
FOOTER{
	position:relative;
	margin-top:90px;
	padding:1%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	color:blue;
	background:#fff;
	z-index:4;
}
/*____________________________________________________________________________*/
.show{
	top:0;
	opacity:1;
	display:block;
	transition:all 500ms;
}
.hide{
	top:150%;
	opacity:0;
	display:none;
	transition:all 500ms;
}
.loader {
	position:fixed;
	top:50%;
	left:45%;
	width:50px;
	height:50px;
	z-index:20;
	border: 5px solid #FFF;
	border-bottom-color: #800080;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
.smloader {
	position:fixed;
	top:50%;
	left:45%;
	width:50px;
	height:50px;
	z-index:20;
	border: 5px solid #FFF;
	border-bottom-color: #800080;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/*____________________________________________________________________________*/
.sortable {
	flex:auto;
	clear:both;
	border-collapse:collapse;
}
	.td-canvas{
		margin-top:3px;
		
	}
.loading{
	float:left;
	font-size:20pt;
	color:blue;
	text-align:center;
}
TD, TH {
	border:1px solid #000;
	border-left:none;
	border-right:none;
	padding:0 8px 0 8px;
}
TH{
	border-top:none;
}
TR TD:nth-child(1){
	padding:0;
	white-space:nowrap;
}
TBODY TR:hover {
	background-color:#ffe;
}
THEAD TH {
	text-align:center;
	color:#aaa;
	background:#ddd;
}
TH.up, TH.down {
	color:gold;
	background:#000;
	cursor:pointer;
}
TBODY TR:nth-child(2n+1) TD {
	background:#eee;
}
TBODY TR:nth-child(2n) TD {
	background:#fff;
}
TD BUTTON {
	border:none;
}
TD BUTTON:hover {
	background:yellow;
}
BUTTON{
	padding:0;
}
/*____________________________________________________________________________*/

/*____________________________________________________________________________*/

/*____________________________________________________________________________*/
DIV#dialog{
	position: fixed;
	width:100%;
	height:100%;
	margin:0;
	display: flex; 
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	background:#fff;
	box-shadow: 0 2px 4px #0003;
	-webkit-border-radius: 6px 6px 6px 6px;    
			border-radius: 6px 6px 6px 6px; 
		 -ms-border-radius:6px 6px 6px 6px;
		-moz-border-radius:6px 6px 6px 6px;
	  -khtml-border-radius:6px 6px 6px 6px;
	z-index:10;
}
	.dialog-title{
		width:100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		font-size:20px;
		font-weight:600;
		border-bottom:1px solid #eee;
	}
		.title-text{
			padding:17px;
		}
			SPAN.relays-list{
				cursor:default;
			}
				.server-marker{
					color: #FFFFFF;
				}
				.chosen-marker{
					color: #00FF00;
				}
				.free-marker{
					color: #800080;
				}
				.paid-marker{
					color: #ffd700;
				}
				.chosen-marker:hover{
					color: #AAFFAA;
				}
				.free-marker:hover{
					color: #DD00AA;
				}
				.paid-marker:hover{
					color: #FFFF00;
				}
		.data-right{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: stretch;
			align-content: stretch;
			
		}
		.data-right{
			font-size:9pt;
			font-weight:normal;
		}
		.data-right DIV LABEL, UL LABEL{
			font-size:9pt;
			font-weight:bold;
			
		}
		.data-right DIV{
			background:#eee;
		}
		.data-right DIV.datachunk{
			height:30px;
			margin:2px;
			padding:2px;
			background:#fff;
			border:1px solid #eee;
			overflow: hidden;
			transition-delay: all 0s ease 1s;
		}
/*______________________________________________________________________________
									MENU
______________________________________________________________________________*/	
		UL LABEL {
			color:#fff;
		}
		.data-right UL{
			list-style:none;
			margin:2px;
			padding:2px;
			background:crimson;
			border:1px solid #eee;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: stretch;
			align-content: stretch;
			cursor:default;
		}
		
			.data-right UL > LI{
				margin:2px;
				padding:2px;
				-webkit-transition-duration: .5s;
				   -moz-transition-duration: .5s;
					 -o-transition-duration: .5s;
						transition-duration: .5s;
			}
			
			.data-right UL LI UL{
				position:absolute;
				list-style:none;
				margin:2px;
				padding:2px;
				background:#fff;
				font-size:9pt;
				font-weight:normal;
				visibility:hidden;
				opacity: 0;
				-khtml-opacity:0;
				-moz-opacity:0;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;
				align-content: stretch;
				overflow:auto;
				-webkit-transition-duration: .8s;
				   -moz-transition-duration: .8s;
					 -o-transition-duration: .8s;
						transition-duration: .8s;
				z-index:20;
			}
			.data-right UL LI:hover UL{
				visibility:visible;
				opacity: 1;
				-khtml-opacity:1;
				-moz-opacity:1;
				
			}
				.data-right UL > LI > UL > LI{
					background:#eee;
				-webkit-transition-duration: .3s;
				   -moz-transition-duration: .3s;
					 -o-transition-duration: .3s;
						transition-duration: .3s;
				}
				.data-right UL > LI > UL > LI.paid-data {
					background:gold;
				}
			
/*______________________________________________________________________________
									END MENU
______________________________________________________________________________*/
		.title-close{
			margin:10px;
			padding:10px 13px 10px 13px;
			cursor:default;
			font-size:14px;
		}
		.title-close:hover{
			background: #EFF1F4;
		}
	#dialog-main{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: stretch;
		align-items: stretch;
		align-content: stretch;
		width: 100%;
		/*
		height:100%;
		overflow:hidden;
		*/
		z-index:17;
	}
	.chart{
		
	}
	.console{
		
	}
	.uptime{
		
	}
	.map{
		background:blue;
	}
		#inmain{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			-webkit-transition-duration: .5s;
			   -moz-transition-duration: .5s;
				 -o-transition-duration: .5s;
					transition-duration: .5s;
			z-index:13;
		}
			SVG#world-map{
				position:relative;
				top:0;
				left:0;
				z-index:14;
			}
				CIRCLE{
					-webkit-transition-duration: .5s;
					   -moz-transition-duration: .5s;
						 -o-transition-duration: .5s;
							transition-duration: .5s;
				}
				CIRCLE.server-marker{
					fill: #EEEEEE;
				}
				CIRCLE.chosen-marker{
					fill: #00FF00;
				}
				CIRCLE.free-marker{
					fill: #800080;
				}
				CIRCLE.paid-marker{
					fill: #ffd700;
				}
				CIRCLE.chosen-marker:hover{
					fill: #AAFFAA;
				}
				CIRCLE.free-marker:hover{
					fill: #DD00AA;
				}
				CIRCLE.paid-marker:hover{
					fill: #FFFF00;
				}
				CIRCLE.server-marker:hover{
					fill: #FFFFFF;
				}
		#whitebar, #toolbar{
			position:fixed;
			left:0;
			bottom:0;
			width:100%;
			height:18px;
		}
		#whitebar{
			opacity: 0.8;
			-khtml-opacity:.80;
			-moz-opacity:.80;
			-ms-filter:”alpha(opacity=80)”;
			filter: alpha(opacity=80);
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
			background:#666;
			z-index:15;
		}
		#toolbar{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: stretch;
			align-items: stretch;
			align-content: stretch;
			z-index:16;
		}
			#toolbar DIV{
				float:left;
				width:18%;
				padding:0 10px 0 10px;
			}
/*____________________________________________________________________________*/

/*____________________________________________________________________________*/
.div-scanned{
	margin-right:2px;
}
	.online-counter{
		color:green;
	}
	.offline-counter{
		color:crimson;
	}
	.scanned-counter{
		color:#000;
	}
	.total-counter{
		color:black;
	}
	/*			*/
	.online-counter:active:after, .offline-counter:active:after, .scanned-counter:active:after, .total-counter:active:after {
		position:absolute;
		content:attr(title);
		padding:5px;
		font-size:10pt;
		background: blue;
		color:#fff;
		-webkit-border-radius: 0px 10px 10px 10px;    
				border-radius: 0px 10px 10px 10px; 
			 -ms-border-radius:0px 10px 10px 10px;
			-moz-border-radius:0px 10px 10px 10px;
		  -khtml-border-radius:0px 10px 10px 10px;
	}
.div-btns{
	
}
/*____________________________________________________________________________*/
/*____________________________________________________________________________*/
/*____________________________________________________________________________*/