.cytoscape-navigator{
	position: fixed;
	border: 1px solid #2b3eef;
	background-color: rgba(201, 205, 242, 0.9);
	z-index: 20;
	width: 15vw;
	height: 15vh;
	bottom: 15px;
	right: 15px;
	overflow: hidden;
	cursor:none!important;
	opacity: 0;
}

.transformRadar {}

.scaleRadarAnim {
  -webkit-animation: scaleanim 2s linear;
  -moz-animation: scaleanim 2s linear;
  -ms-animation: scaleanim 2s linear;
  -o-animation: scaleanim 2s linear;
  animation: scaleanim 2s linear;
	animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
	transform-origin: bottom right;
}

@-webkit-keyframes scaleanim  {
  0% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform:  scale(1);
  }
  100% {
    -ms-transform: scale(1.8);
    -moz-transform:  scale(1.8);
    -webkit-transform:  scale(1.8);
    -o-transform: scale(1.8);
    transform:  scale(1.8):
  }
}

@keyframes scaleanim {
  0% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform:  scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }

}

.NoscaleAnim {
  -webkit-animation: Noscale 2s linear;
  -moz-animation: Noscale 2s linear;
  -ms-animation: Noscale 2s linear;
  -o-animation: Noscale 2s linear;
  animation: Noscale 2s linear;
	animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes Noscale {
	0% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform:  scale(1);
  }
	100% {
	-ms-transform:  scale(.75);
	-moz-transform:  scale(.75);
	-webkit-transform: scale(.75);
	-o-transform: scale(.75);
	transform:  scale(.75);
  }
}

@keyframes Noscale {
	0% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform:  scale(1);
  }
	100% {
	-ms-transform:  scale(.75);
	-moz-transform:  scale(.75);
	-webkit-transform: scale(.75);
	-o-transform: scale(.75);
	transform:  scale(.75);
  }
}

.reverseRadarAnim {
  -webkit-animation: reversescaleanim 2s linear;
  -moz-animation: reversescaleanim 2s linear;
  -ms-animation: reversescaleanim 2s linear;
  -o-animation: reversescaleanim 2s linear;
  animation: reversescaleanim 2s linear;
	animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
	transform-origin: bottom right;
}

@-webkit-keyframes reversescaleanim  {
  100% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform:  scale(1);
  }
  0% {
    -ms-transform: scale(1.8);
    -moz-transform:  scale(1.8);
    -webkit-transform:  scale(1.8);
    -o-transform: scale(1.8);
    transform:  scale(1.8):
  }
}

@keyframes reversescaleanim {
  100% {
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    -webkit-transform:  scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  0% {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }

}




.cytoscape-navigator > img {
	max-width: 100%;
	max-height: 100%;
	/* width: 100%;
	height: 100%; */
	/* cursor:pointer; */
	pointer-events: none;
}

.cytoscape-navigator > canvas{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
	/* cursor:pointer; */
	pointer-events: none;
}


.cytoscape-navigatorView{
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	background-color: rgb(43, 62, 239, 0);
	padding: 0;
	margin: 0;
	/* -moz-opacity: 0.50;
	opacity: 0.50; */
	/* -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50); */
	z-index: 102;
	cursor:none!important;
}

/* radar cursor */
.cytoscape-navigatorOverlay{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 103;
	/* background-color: red; */
	/* margin: 20px; */
	/* cursor:pointer; */
}


.cursor2 {
	position: absolute;
	width: 10px;
	height: 10px;
	/* margin: 0;
	padding: 0; */
	margin-top:  -5px;
	margin-left: -5px;
	pointer-events: none;
	background-color: #2b3eef;
	z-index: 999;
  }

	@media screen and (max-width: 1180px) {

	.transformRadarMobile {}
	.cytoscape-navigator{
		width: 20vw;
		height: 20vh;
		bottom: 10px;
		right:  10px;
	}
	.scaleRadarAnimMob {
	  -webkit-animation: scaleanimMob 2s linear;
	  -moz-animation: scaleanimMob 2s linear;
	  -ms-animation: scaleanimMob 2s linear;
	  -o-animation: scaleanimMob 2s linear;
	  animation: scaleanimMob 2s linear;
		animation-fill-mode: forwards;
	  -webkit-animation-fill-mode: forwards;
		transform-origin: bottom right;
	}

	@-webkit-keyframes scaleanimMob  {
	  0% {
	    -ms-transform:  scale(1);
	    -moz-transform:  scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform:  scale(1);
	  }
	  100% {
	    -ms-transform: scale(1.6);
	    -moz-transform:  scale(1.6);
	    -webkit-transform:  scale(1.6);
	    -o-transform: scale(1.6);
	    transform:  scale(1.6):
	  }
	}


	.NoscaleAnimMob {
	  -webkit-animation: NoscaleMob 2s linear;
	  -moz-animation: NoscaleMob 2s linear;
	  -ms-animation: NoscaleMob 2s linear;
	  -o-animation: NoscaleMob 2s linear;
	  animation: NoscaleMob 2s linear;
		animation-fill-mode: forwards;
	  -webkit-animation-fill-mode: forwards;
	}


	@keyframes NoscaleMob {
		0% {
	    -ms-transform:  scale(1);
	    -moz-transform:  scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform:  scale(1);
	  }
		100% {
		-ms-transform:  scale(.55);
		-moz-transform:  scale(.55);
		-webkit-transform: scale(.55);
		-o-transform: scale(.55);
		transform:  scale(.55);
	  }
	}

	.reverseRadarAnimMob {
	  -webkit-animation: reversescaleanimMobMob 2s linear;
	  -moz-animation: reversescaleanimMob 2s linear;
	  -ms-animation: reversescaleanimMob 2s linear;
	  -o-animation: reversescaleanimMob 2s linear;
	  animation: reversescaleanim 2s linear;
		animation-fill-mode: forwards;
	  -webkit-animation-fill-mode: forwards;
		transform-origin: bottom right;
	}

	@-webkit-keyframes reversescaleanimMob  {
	  100% {
	    -ms-transform:  scale(1);
	    -moz-transform:  scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform:  scale(1);
	  }
	  0% {
	    -ms-transform: scale(1.5);
	    -moz-transform:  scale(1.5);
	    -webkit-transform:  scale(1.5);
	    -o-transform: scale(1.5);
	    transform:  scale(1.5):
	  }
	}

	@keyframes reversescaleanimMob {
	  100% {
	    -ms-transform:  scale(1);
	    -moz-transform:  scale(1);
	    -webkit-transform:  scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	  }
	  0% {
	    -ms-transform: scale(1.5);
	    -moz-transform: scale(1.5);
	    -webkit-transform: scale(1.5);
	    -o-transform: scale(1.5);
	    transform: scale(1.5);
	  }

	}

	.cytoscape-navigatorView{
		background-color: rgb(43, 62, 239, 0.1);
	}


}