#ss88_NodeQuery h2 { margin-top:0; padding-top:0; font-size:14px; font-weight: 500; }
#ss88_NodeQuery.welcome-panel { padding:10px 0; width: 24.2%; transition: width 2s, height 4s; }
#ss88_NodeQuery.welcome-panel.loaded { width:100%; }
#ss88_NodeQuery .welcome-panel-content { margin:0; padding:0 5%; max-width:100%!important; }
#ss88_NodeQuery.welcome-panel.loaded .welcome-panel-content { padding:0 1%; }

.ss88_nq_server { width:18%; margin-right:2%; float:left; position:relative; }

.ss88_nq_server h5 { font-size:12px; text-align:center; font-weight:500; }

#ss88_NodeQuery .bar-wrap { padding:8px; }
#ss88_NodeQuery .bar-main-container {
  margin: 10px auto;
  width: 100%;
  height: 35px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.71);
}

#ss88_NodeQuery .nq-bar-percentage {
  float: left;
  background: rgba(0,0,0,0.13);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 0px;
  width: 14%;
  height: 16px;
  text-align: center;
  font-size: 10px;
  line-height: 17px;
}

#ss88_NodeQuery .bar-container {
  float: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background: rgba(0,0,0,0.13);
  width: 82%;
  margin: 6px 0px;
  overflow: hidden;
}

#ss88_NodeQuery .bar {
  float: left;
  background: #38B1CC;
  height: 100%;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

/* COLORS */
#ss88_NodeQuery .azure   { background: rgba(56, 177, 204, 0.35); }
.emerald { background: #2CB299; }
.violet  { background: #8E5D9F; }
.yellow  { background: #EFC32F; }
.red     { background: #E44C41; }

#ss88_NodeQuery .ss88_vw_keys { height:auto; }
#ss88_NodeQuery .ss88_vw_keys li { float:left; padding:0 10px; font-size:10px; color:white; border-radius:5px; margin-right:10px; }
#ss88_NodeQuery .ss88_vw_keys li a { color:white; }
#ss88_NodeQuery .ss88_vw_keys li.clear { float: none; padding: 0; margin: 0; }
#ss88_NodeQuery .ss88_vw_keys li:nth-child(3) { margin-right:0; }

.ss88_nq_offline { display:none; }
.ss88_nq_offline.inactive {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.74);
	font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    line-height: 30px;
    color: red;
	font-weight: 500;
	display:block;
}

.ss88_vw_form_nq input { padding:10px; width:100%; margin-bottom:10px; display: block; }
.ss88_vw_form_nq input:focus { border-color:grey; }

.ss88_vw_form_nq .btn {
	border : solid 0px #638a00;
	border-radius : 3px;
	box-shadow : 0px 2px 2px rgba(0,0,0,0.4);
	font-size : 15px;
	color : #ffffff;
	padding: 10px 17px;
    width: auto;
	background : #96c300;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96c300), color-stop(100%,#648c00));
	background : -webkit-linear-gradient(top, #96c300 0%, #648c00 100%);
	background : linear-gradient(top, #96c300 0%, #648c00 100%);
	margin:auto;
	cursor:pointer;
}

#ss88_NodeQuery .k2 { width: 225px; margin: auto; margin-top: 30px; clear: both; padding-top: 10px;}

.ss88_spinner {
  width: 100%;
  height: 80%;
  background: rgba(255, 255, 255, 0.66);
  position: absolute;
  top:0;
  left:0;
  display:none;
}

.double-bounce1, .double-bounce2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 31%;
  left: 43%;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 13px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}



@media screen and (max-width: 1400px) {
	.ss88_nq_server { width:31.3%; }
}
@media screen and (max-width: 900px) {
	.ss88_nq_server { width:48%; }
}
@media screen and (max-width: 500px) {
	.ss88_nq_server { width:100%; }
}