:root {
  --w: 10px;
}

#cnt {
	top:0px;left:0px;width:100vw;height:100vh;
	
	overflow:hidden;
	position:absolute;
}
.planet-view {
	
	width:300px;
	height:300px;
	position:absolute;
	top:calc((100vh / 2) - 150px);
	left:calc((100vw / 2) - 150px);
 
}


.h-a { transition: all 0.1s linear; }

.top-left-1 { top:0px;left:0px;position: inherit;width: 1px;height: 5px;background-color:#a6eafc;}
.top-left-2 {top:0px;left:0px;position: inherit;width: 5px;height: 1px;background-color:#a6eafc;}
.bottom-left-1 {bottom: 0px;left:0px;position: inherit;width: 1px;height: 5px;background-color:#a6eafc;}
.bottom-left-2 {bottom: 0px;left:0px;position: inherit;width: 5px;height: 1px;background-color:#a6eafc;}
.top-right-1 { top: 0px;right:0px;position: inherit;width: 1px;height: 5px;background-color:#a6eafc;}
.top-right-2 {top: 0px;right:0px;position: inherit;width: 5px;height: 1px;background-color:#a6eafc;}
.bottom-right-1 {bottom: 0px;right:0px;position: inherit;width: 1px;height: 5px;background-color:#a6eafc;}
.bottom-right-2 {bottom: 0px;right:0px;position: inherit;width: 5px;height: 1px;background-color:#a6eafc;}

.fleet { cursor:hand;cursor:pointer;	}

.fleet:hover .top-left-1 { height:var(--w);top:-2px;left:-2px; } 
.fleet:hover .top-left-2 { width:var(--w);top:-2px;left:-2px; } 
.fleet:hover .bottom-left-1 { height:var(--w);bottom:-2px;left:-2px; } 
.fleet:hover .bottom-left-2 { width:var(--w);bottom:-2px;left:-2px; } 
.fleet:hover .top-right-1 { height:var(--w);top:-2px;right:-2px; } 
.fleet:hover .top-right-2 { width:var(--w);top:-2px;right:-2px; } 
.fleet:hover .bottom-right-1 { height:var(--w);bottom:-2px;right:-2px; } 
.fleet:hover .bottom-right-2 { width:var(--w);bottom:-2px;right:-2px; }

.map-planet { cursor:hand;cursor:pointer; }
.map-m { transition: all 0.5s; transform: scale(1);border:1px solid rgba(24, 108, 137,0.5); }
.map-m-l { transition: all 0.5s; opacity:0;display:none; }

.map-m-l-s { display:block; }
.map-m-s {  }

.map-planet-tooltip {  transition: all 1s; display:none;  }

.map-m-c1 { border:1px solid rgba(0, 209, 100,0.6);opacity:1; }
.map-m-c2 { border:1px solid rgba(24, 108, 137,1);opacity:0.5; }

.map-planet:hover .map-planet-tooltip {   display:block; }
.map-planet:hover .map-m {   transform: scale(1.2); }
.map-planet:hover .map-m-s { border:1px solid #ff4d4d; }
.map-planet:hover .map-m-l { opacity:1; }

.tp { display:none; }
.connect-fleet-tooltip:hover .tp { display:block;  }

.pppo { cursor:hand;cursor:pointer; }
.aaaa { transition: all 0.5s; border:1px solid rgba(0, 209, 100,0.6); }
.pppo:hover .aaaa {  transform: scale(1.2);border:1px solid rgba(0, 209, 100,0.8); }

.atmosphere { z-index:2;box-shadow: 20px -20px 40px -20px rgba(255, 231, 142,0.5);position:absolute;top:0px;left:0px;width:10px;height:10px;border-radius:50%; }
.atmosphere-dark { z-index:2;box-shadow: 0px 0px 20px 0px rgba(27, 39, 53,0.5);position:absolute;top:0px;left:0px;width:10px;height:10px;border-radius:50%; }

.atmosphere-0 { box-shadow: 20px -20px 40px -20px rgba(255, 231, 142,0.5); }

.atmosphere-1 { box-shadow:10px -40px 70px -10px rgba(65, 130, 148 ,0.5); }

.atmosphere-2 { box-shadow:-30px -14px 70px -10px rgba(65, 130, 148 ,0.5); }

.select-planet-name {
	
z-index:3;position:absolute;
width:300px;
display:flex;
align-items: center;
justify-content: flex-end;
left:-348px;top:33px;padding-top:4px;
color: #fff;
    font-family: Rajdhani;
    font-size: 25px;
    text-shadow: 1px 1px 2px black;	
	
}

.l-1 {z-index:3;left:-39px;top:54px;background-color: rgba(255,255,255,0.3);position:absolute;width:15px;height:2px;}
.l-2 {z-index:3;transform: rotate(40deg);left:-30px;top:70px;background-color: rgba(255,255,255,0.3);position:absolute;width:50px;height:2px;}
.l-3 {z-index:3;left:15px;top:88px;background-color: rgba(255,255,255,0.5);position:absolute;width:5px;height:5px;border-radius:50%;} 

.ui-s-button { position:relative;height:18px;width:18px;margin-right:8px;background-color: rgba(57, 72, 105, 0.3); }
.ui-s-button img { height:18px;cursor:hand;cursor:pointer;filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.5));opacity:0.5; }
.ui-s-button:hover img { opacity:1; }

.alert { display:none;position:fixed;top:0px;left:0px;width:100vw;height:100vh;background-color:rgba(0,0,0,0.9);z-index:100; }
.alert-box { width:60%;position:absolute;}

.alert-b-0 { top: 0px;position: inherit;width: 2px;height: 5px;background-color:#a6eafc; }
.alert-b-1 { top: 0px;position: inherit;width: 5px;height: 2px;background-color:#a6eafc; }
.alert-b-2 { top: 8px;left:0px;position: inherit;width: 2px;height: calc(100% - 16px);;background-color:#186c89; }
.alert-b-3 { bottom: 0px;position: inherit;width: 2px;height: 5px;background-color:#a6eafc; }
.alert-b-4 { bottom: 0px;position: inherit;width: 5px;height: 2px;background-color:#a6eafc; }
.alert-b-5 { top: 0px;left:8px;position: inherit;height: 2px;width: calc(100% - 16px);;background-color:#186c89; }
.alert-b-6 { bottom: 0px;left:8px;position: inherit;height: 2px;width: calc(100% - 16px);;background-color:#186c89; }
.alert-b-7 { top: 0px;right:0px;position: inherit;width: 2px;height: 5px;background-color:#a6eafc; }
.alert-b-8 { top: 0px;right:0px;position: inherit;width: 5px;height: 2px;background-color:#a6eafc; }
.alert-b-9 { top: 8px;right:0px;position: inherit;width: 2px;height: calc(100% - 16px);;background-color:#186c89; }
.alert-b-10 { bottom: 0px;right:0px;position: inherit;width: 2px;height: 5px;background-color:#a6eafc; }
.alert-b-11 { bottom: 0px;right:0px;position: inherit;width: 5px;height: 2px;background-color:#a6eafc; }

.alert-c-0 { margin:6px;height:100%;padding: 40px;background-color:rgba(57,72,105,0.3);box-sizing: border-box;display:flex;justify-content:center;align-items:flex-start;color: #a6eafc;font-family: Rajdhani;font-size: 20px;text-shadow: 0px 0px 20px rgba(255,255,255,0.6); }

.alert-0 { filter: hue-rotate(160deg);}
.alert-1 { filter: hue-rotate(310deg);}