body{
	color: #B0BEC5;
}

.dark_highlight{
	color: #002035;
}
.dark_highlight2_bg{
	background-color: #002035;
}
.dark_highlight_bg{
	background-color: #122229;
}
.white_highlight{
	color:#ffffff !important;
}
.white_highlight_bg{
	background-color:#ffffff;
}


.light_blue_bg{
	/* background-color: #F4F7FC; */
	background-color: #E9EDEF;
}
.bright_blue_bg{
	background-color: #FAFEFE;
}



/*Color by Name*/
/*Threat Type*/
.worst{
	color: #ed365a;
	transition: color 0.3s;
	transition-timing-function: ease-in-out;
}
.access_block{
	color: #ed365a;
	transition: color 0.3s;
	transition-timing-function: ease-in-out;
}
.threat_block{
	color: #ed365a;
	transition: color 0.3s;
	transition-timing-function: ease-in-out;
}
.danger{
	color: #ff7600;
	transition: color 0.3s;
	transition-timing-function: ease-in-out;
}
.normal{
	color: #00a882;
	transition: color 0.3s;
	transition-timing-function: ease-in-out;
}




/*legend*/
.circle_legend{
	width: 12px;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	margin-right: 4px;
}



/*DataFlow Circle*/
.reqData{
	color:#004AE4;
	stroke: #004AE4;
	stroke-width: 0.5px;
	transition: fill 0.3s , stroke 0.3s;
	transition-timing-function: ease-in-out;
}
.resData{
	color:#D81B60;
	stroke: #D81B60;
	stroke-width: 0.5px;
	transition: fill 0.3s , stroke 0.3s;
	transition-timing-function: ease-in-out;
}
.particle{
	fill:#1465EF;
}
.reqData_bg{
	background-color: #004AE4;
}
.resData_bg{
	background-color:#D81B60;
}

.flowStroke{
	/* stroke: #ADC9F9; */
	stroke: #d063a0;
	opacity: 0.08;
}
/*Node Type*/
.node_circle{
}
.selected_node{
	stroke: rgba(86,148,255,0);
	stroke-width:3px;
	transition: stroke-width 0.2s;
	animation: stroke_blink 2s infinite;
}
@keyframes stroke_blink {
	0%{stroke: rgba(86,148,255,0.64);}
	50%{stroke: rgba(86,148,255,1);}
	100%{stroke: rgba(86,148,255,0.64);}
}
.user{
	color: #1f4cca;
}
.controller{
	color: #008FFF;
}
.app{
	color: #D0304A;
}
.departure{
	color: #10A02f;
}
.service{
	color: #7d229b;
}
.arrival{
	color: #00a080;
}
.perimeter{
	color: #00C853;
}
.interface{
	color: #f57a6f;
}
.gateway{
	color: #7d229b;
}
.red{
	color:#ed365a;
}
.user_bg{
	background-color: #008FFF;
}
.app_bg{
	background-color: #D0304A;
}
.departure_bg{
	background-color: #10A02f;
}
.service_bg{
	background-color: #7d229b;
}
.arrival_bg{
	background-color: #00a080;
}

/*Node Circle*/
.user_node{
	/*fill: #008FFFFF;	
	stroke:#006FFF;*/
	fill: #1f4cca;
	background-color:#1f4cca;
}

.controller_node{
	fill: #008FFF;
	background-color: #008FFF;
}
.app_node{
	/*fill: #FF7654FF;
	stroke:#FF7600;*/
	fill: #D0304A;
	background-color:#D0304A;

}
.application_node{
	fill: #f57a6f;
	background-color: #f57a6f;
}
.interface_node{
	fill: #f57a6f;
	background-color: #f57a6f;
}

.departure_node{
	fill: #10A02f;
	background-color: #10A02f;

}

.service_node{
	fill: #7d229b;
	background-color: #7d229b;
}
.gateway_node{
	fill: #7d229b;
	background-color: #7d229b;
}

.arrival_node{
	/*fill: #00A882FF;
	stroke: #10C072;*/
	fill: #00a080;
	background-color: #00a080;

}
.perimeter_node{
	fill: #00C853;
	background-color: #00C853;
}

.source_node{
	background-color:  #95e050;
	fill: #95e050;
}
.destination_node{
	background-color: #00a080;
	fill: #00a080;
}
.block_circle{
	stroke:#fff;
	background-color: #ed365a;
	stroke-width:1.5px;
	fill: #ed365a;
}
.red_circle{
	stroke:#fff;
	background-color: #ed365a;
	stroke-width:1.5px;
	fill: #ed365a;
}
.red_node{
	background-color:#ed365a;
}
/*Tunnel Color based on Flow rate*/
.flow_normal{
	fill: #00C85332;
	stroke: #00C853;
	stroke-width: 0.75px;
}
.flow_bad{
	fill: #FFAB0022;
	stroke: #FFAB00;
	stroke-width: 0.75px;
}
.flow_worst{
	fill: #ed365a32;
	stroke:#ed365a;
	stroke-width: 0.75px;
}
.blockLine{
	stroke-linejoin:"round";
}
.blockText{
	fill:#ed365a;
}
.gauge{
	position: absolute;
	top: calc((92px - 55px)/2 - 4px);
	left: calc((100% - 65px)/2);
}
.needle{
	position: absolute;
	top:calc((92px - 18px)/2 - 13.2px);
	left:calc((100% - 6px)/2);
 	transform-origin: center center;
 	transition: transform 1s cubic-bezier(.75,-0.5,0,1.75);
}
.green_line{
	/* stroke: #00a853; */
	stroke: #0058EE;
	stroke-width: 0.5px;
	fill: none;
}
.green_area{
	/* fill: #00a853; */
	fill: #0058EE;
	opacity: 0.14;
}
.current_point{
	/* stroke: #00a853;
	fill: #00a853; */
	stroke: #0058EE;
	fill: #0058EE;
	animation-name: blink;
  	animation-duration: 1s;
  	animation-fill-mode: forwards;
  	animation-iteration-count: infinite;
}
@keyframes blink {
  0% {opacity: 00.48;}
  50% {opacity: 1;}
  100% {opacity: 0.48;}
}

.grid line {
  stroke: #2F4050;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}
.axis_light line {
  stroke: #2F4050;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.axis_light path {
  stroke: #2F4050;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.axis_light text {
  fill: #2F4050;
}


/*Topology*/
.link{
	stroke: #A5C8DA;
	stroke-width:4px;
	opacity: 0.48;
}
.block_count{
	pointer-events: none;
	fill:#fff;
}
.topology_legend{
	position: absolute;
	background-color: rgba(255,255,255,0.64);
	top:0;
	right:0;
	padding: 12px;
	/*width:calc(100% - 24px);*/
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.node_count{
	pointer-events: none;
}
.topology_zoom_info{
	position: absolute;
	top:0;
	left:0;
	padding: 12px;
}
.topology_tooltip{
	position: absolute;
	top:48px;
	left:16px;
	width: 208px;
	border-style: solid;
	border-width: 0px 0.5px 0.5px 0.5px;
	border-color: #eeeeee;
}
.tooltip_title{
	background-color: #ffffff;
	width: calc(100%);
	padding:6px 12px;
	border-bottom: solid 0.5px #eeeeee;
}
.tooltip_list{
	background-color: #ffffff;
	width: calc(100%);
	padding:6px 12px;
	border-bottom: solid 0.5px #eeeeee;
}

.content_container>.ibox-title{
	min-height: 24px;
	color: #90A4AE;
	background-color: rgba(0,0,0,0) !important;
	border: none !important;
	padding: 12px;
	font-weight: 700;
}

.ibox-content{
	background-color: #002035 !important;
	border: none !important;
}

.content_container{
	background-color: #002035 !important;
	border: solid 0.75px #2F4050 !important;
	border-radius: 2px !important;
	overflow: hidden !important;
	box-shadow: 0px 0px 12px #00000014 !important;
}