next-ui/css/next-componentized.css

NeXt UI Toolkit npm distribution.

@font-face {
  font-family: 'next-font';
  src: url('../fonts/next-font.eot?-9scffx');
  src: url('../fonts/next-font.eot?#iefix-9scffx') format('embedded-opentype'), url('../fonts/next-font.woff?-9scffx') format('woff'), url('../fonts/next-font.ttf?-9scffx') format('truetype'), url('../fonts/next-font.svg?-9scffx#next-font') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cisco Sans Extra Light";
  src: url('../fonts/cisco/ciscosansextralight-webfont.eot');
  src: url('../fonts/cisco/ciscosansextralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cisco/ciscosansextralight-webfont.woff') format('woff'), url('../fonts/cisco/ciscosansextralight-webfont.ttf') format('truetype'), url('../fonts/cisco/ciscosansextralight-webfont.svg#CiscoSansExtraLight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cisco Sans Reg";
  src: url('../fonts/cisco/ciscosansregular-webfont.eot');
  src: url('../fonts/cisco/ciscosansregular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cisco/ciscosansregular-webfont.woff') format('woff'), url('../fonts/cisco/ciscosansregular-webfont.ttf') format('truetype'), url('../fonts/cisco/ciscosansregular-webfont.svg#CiscoSansReg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.next [class^="n-icon-"],
.next [class*=" n-icon-"] {
  font-family: 'next-font';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-icon-hostgroupbg:before {
  content: "\e64c";
}
.next .n-icon-hostgroup:before {
  content: "\e64d";
}
.next .n-icon-wirelesshost:before {
  content: "\e64e";
}
.next .n-icon-wirelesshostwithborder-30:before {
  content: "\e64f";
}
.next .n-icon-firewallwithboder:before {
  content: "\e649";
}
.next .n-icon-unknowndevicewithborder:before {
  content: "\e64a";
}
.next .n-icon-unlinkwithborder:before {
  content: "\e64b";
}
.next .n-icon-unlinked:before {
  content: "\e646";
}
.next .n-icon-firewall:before {
  content: "\e647";
}
.next .n-icon-firewallbg:before {
  content: "\e648";
}
.next .n-icon-accesspointwithborder:before {
  content: "\e637";
}
.next .n-icon-camerawithborder:before {
  content: "\e638";
}
.next .n-icon-cloudwithborder:before {
  content: "\e639";
}
.next .n-icon-grouplwithborder:before {
  content: "\e63a";
}
.next .n-icon-groupmwithborder:before {
  content: "\e63b";
}
.next .n-icon-groupswithborder:before {
  content: "\e63c";
}
.next .n-icon-hostwithborder:before {
  content: "\e63d";
}
.next .n-icon-ipphonewithborder:before {
  content: "\e63e";
}
.next .n-icon-nexus5000withborder:before {
  content: "\e63f";
}
.next .n-icon-phonewithborder:before {
  content: "\e640";
}
.next .n-icon-routerwithborder:before {
  content: "\e641";
}
.next .n-icon-serverwithborder:before {
  content: "\e642";
}
.next .n-icon-switchwithborder:before {
  content: "\e643";
}
.next .n-icon-unknowndeviceswithborder:before {
  content: "\e644";
}
.next .n-icon-wlcwithborder:before {
  content: "\e645";
}
.next .n-icon-co-worker:before {
  content: "\e634";
}
.next .n-icon-layer:before {
  content: "\e635";
}
.next .n-icon-layout:before {
  content: "\e636";
}
.next .n-icon-cloud:before {
  content: "\e633";
}
.next .n-icon-de-aggregation:before {
  content: "\e632";
}
.next .n-icon-expand:before {
  content: "\e62d";
}
.next .n-icon-collapse:before {
  content: "\e62e";
}
.next .n-icon-groupsbg:before {
  content: "\e62f";
}
.next .n-icon-groupmbg:before {
  content: "\e630";
}
.next .n-icon-grouplbg:before {
  content: "\e631";
}
.next .n-icon-fullscreen:before {
  content: "\e62c";
}
.next .n-icon-movemode:before {
  content: "\e62b";
}
.next .n-icon-RCV:before {
  content: "\e62a";
}
.next .n-icon-PGN:before {
  content: "\e60b";
}
.next .n-icon-co-edit:before {
  content: "\e60c";
}
.next .n-icon-wlc:before {
  content: "\e60f";
}
.next .n-icon-wlcbg:before {
  content: "\e610";
}
.next .n-icon-unknownbg:before {
  content: "\e611";
}
.next .n-icon-unknown:before {
  content: "\e612";
}
.next .n-icon-switch:before {
  content: "\e618";
}
.next .n-icon-switchbg:before {
  content: "\e619";
}
.next .n-icon-serverbg:before {
  content: "\e61a";
}
.next .n-icon-server:before {
  content: "\e61b";
}
.next .n-icon-router:before {
  content: "\e61c";
}
.next .n-icon-routerbg:before {
  content: "\e61d";
}
.next .n-icon-phone:before {
  content: "\e61e";
}
.next .n-icon-phonebg:before {
  content: "\e61f";
}
.next .n-icon-nexus5000:before {
  content: "\e620";
}
.next .n-icon-nexus5000bg:before {
  content: "\e621";
}
.next .n-icon-ipphone:before {
  content: "\e622";
}
.next .n-icon-ipphonebg:before {
  content: "\e623";
}
.next .n-icon-host:before {
  content: "\e624";
}
.next .n-icon-hostbg:before {
  content: "\e625";
}
.next .n-icon-camera:before {
  content: "\e626";
}
.next .n-icon-camerabg:before {
  content: "\e627";
}
.next .n-icon-accesspoint:before {
  content: "\e628";
}
.next .n-icon-accesspointbg:before {
  content: "\e629";
}
.next .n-icon-groups:before {
  content: "\e615";
}
.next .n-icon-groupm2:before {
  content: "\e616";
}
.next .n-icon-groupl:before {
  content: "\e617";
}
.next .n-icon-zoomout-minus:before {
  content: "\e613";
}
.next .n-icon-zoomin-plus:before {
  content: "\e614";
}
.next .n-icon-zoomout:before {
  content: "\e606";
}
.next .n-icon-zoomin:before {
  content: "\e607";
}
.next .n-icon-zoombyselection:before {
  content: "\e608";
}
.next .n-icon-viewsetting:before {
  content: "\e609";
}
.next .n-icon-selectnode:before {
  content: "\e60a";
}
.next .n-icon-fitstage:before {
  content: "\e60d";
}
.next .n-icon-aggregation:before {
  content: "\e60e";
}
.next .n-icon-interface:before {
  content: "\e600";
}
.next .n-icon-router2:before {
  content: "\e601";
}
.next .n-icon-openflow:before {
  content: "\e602";
}
.next .n-icon-BMP:before {
  content: "\e603";
}
.next .n-icon-BGP:before {
  content: "\e604";
}
.next .n-icon-acl:before {
  content: "\e605";
}
.next .n-topology.n-topology-blue {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  -webkit-transition: background 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: background 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-blue:focus {
  outline: 0 none;
}
.next .n-topology.n-topology-blue .n-topology-fit {
  -webkit-transition: all 0.6s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s linear !important;
}
.next .n-topology.n-topology-blue .n-topology-fit .node,
.next .n-topology.n-topology-blue .n-topology-fit .nodeSet,
.next .n-topology.n-topology-blue .n-topology-fit .link,
.next .n-topology.n-topology-blue .n-topology-fit .linkSet {
  -webkit-transition: all 0.9s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.9s linear !important;
}
.next .n-topology.n-topology-blue.n-topology-loading svg,
.next .n-topology.n-topology-blue.n-topology-loading .n-topology-nav {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}
.next .n-topology.n-topology-blue svg {
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.next .n-topology.n-topology-blue text:empty {
  display: none;
}
.next .n-topology.n-topology-blue g {
  pointer-events: all;
}
.next .n-topology.n-topology-blue defs .bg {
  fill: #0386d2;
}
.next .n-topology.n-topology-blue defs .stroke {
  stroke: #0386d2;
}
.next .n-topology.n-topology-blue defs [fill*='#FFFFFF'] {
  fill: #ffffff;
}
.next .n-topology.n-topology-blue .n-svg {
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-blue .fontIcon {
  font-family: 'next-font';
  fill: #0386d2;
  alignment-baseline: central;
  text-anchor: middle;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-blue text {
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-blue .n-topology-icon .fontIcon {
  cursor: pointer;
}
.next .n-topology.n-topology-blue .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-blue .iconBGActive {
  fill: #0386d2;
}
.next .n-topology.n-topology-blue .node:not(.node-selected) .selectedBG {
  display: none;
}
.next .n-topology.n-topology-blue .node .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f2ad4e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .node .dot {
  fill: #0386d2;
}
.next .n-topology.n-topology-blue .node text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #0386d2;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 11px;
}
.next .n-topology.n-topology-blue .node.disable .node-label {
  fill: #ccc !important;
}
.next .n-topology.n-topology-blue .node.disable .showIcon .iconShape {
  fill: #ccc;
}
.next .n-topology.n-topology-blue .node.disable .iconBG.iconBGActive {
  fill: #ccc;
}
.next .n-topology.n-topology-blue .link path,
.next .n-topology.n-topology-blue .link line {
  stroke: #5bc1df;
  stroke-width: 1px;
  fill: none;
  cursor: pointer;
}
.next .n-topology.n-topology-blue .link path.link:hover,
.next .n-topology.n-topology-blue .link line.link:hover {
  stroke: #26a1c5;
}
.next .n-topology.n-topology-blue .link line.link_bg:hover ~ line {
  stroke: #26a1c5 !important;
}
.next .n-topology.n-topology-blue .link .link-label {
  font-family: "Cisco Sans Reg";
  fill: #0386d2;
  font-size: 12px;
}
.next .n-topology.n-topology-blue .link .source-abel {
  font-family: "Cisco Sans Reg";
  fill: #0386d2;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-blue .link .target-label {
  font-family: "Cisco Sans Reg";
  fill: #0386d2;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-blue .link .disable-label {
  fill: #fff;
}
.next .n-topology.n-topology-blue .link .disable-bg {
  fill: #ccc;
}
.next .n-topology.n-topology-blue .link .link_bg {
  stroke: transparent;
}
.next .n-topology.n-topology-blue .link.disable path,
.next .n-topology.n-topology-blue .link.disable line {
  stroke: #ccc !important;
  stroke-width: 1px;
}
.next .n-topology.n-topology-blue .link.disable .link_bg {
  stroke: transparent !important;
}
.next .n-topology.n-topology-blue .link.link-selected path,
.next .n-topology.n-topology-blue .link.link-selected line {
  stroke: #ccc;
  stroke-width: 2px;
}
.next .n-topology.n-topology-blue .nodeset .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f2ad4e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .nodeset .dot {
  fill: #ffffff;
  stroke: #0386d2;
  stroke-width: 1;
}
.next .n-topology.n-topology-blue .nodeset .icon {
  cursor: pointer;
}
.next .n-topology.n-topology-blue .nodeset .bg {
  fill: #0386d2;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .nodeset text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #0386d2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .nodeset.disable {
  opacity: 0.3;
  stroke: #ccc;
}
.next .n-topology.n-topology-blue .nodeset .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-blue .nodeset .iconBGActive {
  fill: #ffffff;
}
.next .n-topology.n-topology-blue .nodeset .iconBGActive ~ .iconShape {
  display: block !important;
}
.next .n-topology.n-topology-blue .nodeset .indicator .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-blue .nodeset .indicator .iconBG:hover {
  fill: #0386d2;
}
.next .n-topology.n-topology-blue .nodeset .indicator .iconShape {
  fill: #0266a0;
}
.next .n-topology.n-topology-blue .group .bg {
  opacity: 0.6;
  stroke-width: 10px;
  stroke-linejoin: round;
}
.next .n-topology.n-topology-blue .group .groupLabel {
  cursor: pointer;
  font-size: 18px;
  font-family: "Cisco Sans Reg";
  text-anchor: middle;
  alignment-baseline: inherit;
}
.next .n-topology.n-topology-blue .group .fontIcon.iconShape {
  fill: #9BB150;
}
.next .n-topology.n-topology-blue .group .nodeSetGroupLabel {
  cursor: pointer;
  font-size: 18px;
  font-family: "Cisco Sans Reg";
  alignment-baseline: inherit;
  fill: #9BB150;
}
.next .n-topology.n-topology-blue .group .groupLabel:hover ~ .bg {
  opacity: 0.7;
}
.next .n-topology.n-topology-blue .group.aggregationGroup .bg {
  stroke-width: 10px;
  stroke-linejoin: round;
  fill: #9BB150;
  stroke: #9BB150;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  /* For Safari 3.1 to 6.0 */
  transition: opacity 0.3s linear;
}
.next .n-topology.n-topology-blue .group.aggregationGroup.fade-active-item {
  opacity: 1;
}
.next .n-topology.n-topology-blue .group.aggregationGroup.fade-active-item .bg {
  opacity: 0.5;
}
.next .n-topology.n-topology-blue .link-set-bg {
  stroke: #5bc1df;
  stroke-width: 2px;
}
.next .n-topology.n-topology-blue .link-set-circle {
  fill: #0386d2;
  stroke: #0386d2;
  stroke-width: 16px;
  stroke-linejoin: round;
}
.next .n-topology.n-topology-blue .link-set-text {
  font-family: "Cisco Sans Reg";
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 12px;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .link-set.disable .link-set-bg {
  stroke: #ccc;
}
.next .n-topology.n-topology-blue .link-set.disable .link-set-circle {
  fill: #ccc;
  stroke: #ccc;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .next .n-topology.n-topology-blue {
    /* Safari only override */
  }
  .next .n-topology.n-topology-blue ::i-block-chrome,
  .next .n-topology.n-topology-blue .link-set-circle {
    stroke-width: 8px !important;
  }
}
.next .n-topology.n-topology-blue .mapPath {
  fill: #d6effe;
  stroke: #ade0fe;
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .mapBoundary {
  fill: none;
  stroke: #ade0fe;
  stroke-width: 1;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .selectionRect {
  stroke: #0386d2;
  fill: #0386d2;
  fill-opacity: 0.1;
  pointer-events: none;
}
.next .n-topology.n-topology-blue-setting {
  max-width: none !important;
}
.next .n-topology.n-topology-blue .aggregationGroup .aggregationText {
  fill: #0386d2;
  font-size: 12px;
}
.next .n-topology.n-topology-blue .aggregationGroup .aggregationRect {
  fill: #0386d2;
  opacity: 0.2;
  stroke: #0386d2;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.next .n-topology.n-topology-blue .layer > * {
  transition: opacity .6s;
}
.next .n-topology.n-topology-blue .layer.fade-layer > *:not(.fade-highlight-item):not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-blue.fade-active-priority.fade-active-occur .layer.fade-layer > .fade-highlight-item:not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-blue.fade-all .layer > *:not(.fade-highlight-item):not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-blue.fade-active-priority.fade-active-occur.fade-all .layer > .fade-highlight-item:not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-blue .n-topology-nav {
  position: absolute;
  top: 0px;
  left: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-blue .n-topology-nav li {
  list-style: none;
  padding: 0px;
}
.next .n-topology.n-topology-blue .n-topology-nav ul {
  padding: 0px;
  margin: 0px;
}
.next .n-topology.n-topology-blue .n-topology-nav span {
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
}
.next .n-topology.n-topology-blue .n-topology-nav > ul {
  padding: 0px;
  margin-top: 30px;
  width: 32px;
}
.next .n-topology.n-topology-blue .n-topology-nav > ul > li {
  display: inline-block;
  list-style: none;
  width: 25px;
  margin-top: 5px;
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode {
  padding: 0px;
  position: relative;
  width: 25px;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode li {
  width: 25px;
  height: 25px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
  background: #eaeaea;
  margin-top: -2px;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode li:hover span {
  color: #0386d2;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode span {
  color: #999999;
  display: inline-block;
  font-size: 18px;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode-selected {
  background: #0386d2 !important;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode-selected span {
  color: #ffffff;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode-selected:hover {
  background: #0386d2 !important;
}
.next .n-topology.n-topology-blue .n-topology-nav-mode-selected:hover span {
  color: #ffffff !important;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom {
  position: relative;
  height: 51px;
  margin-top: 10px !important;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom > span {
  display: inline-block;
  position: absolute;
  text-align: center;
  font-size: 25px;
  color: #999999;
  background: #eaeaea;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-in {
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-in:hover {
  color: #808080;
  background: #d8d8d8;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-out {
  top: 25px;
  left: 0px;
  cursor: pointer;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-out:hover {
  color: #808080;
  background: #d8d8d8;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-selection {
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  color: #999999;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-selection:hover {
  color: #4d4d4d;
}
.next .n-topology.n-topology-blue .n-topology-nav-zoom-selection-selected {
  color: #3fb7fc;
}
.next .n-topology.n-topology-blue .n-topology-nav-fit {
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  color: #999999;
}
.next .n-topology.n-topology-blue .n-topology-nav-fit:hover {
  color: #4d4d4d;
}
.next .n-topology.n-topology-blue .n-topology-nav-agr {
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  font-size: 20px;
  height: 24px;
  color: #999999;
  display: none;
}
.next .n-topology.n-topology-blue .n-topology-nav-agr:hover {
  color: #4d4d4d;
}
@-webkit-keyframes agr-icon-ani {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.next .n-topology.n-topology-blue .n-topology-nav .agr-icon {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: agr-icon-ani;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
  -webkit-transition: 0 none;
  color: #0396eb;
}
.next .n-topology.n-topology-blue .n-topology-nav .agr-text {
  font-size: 10px;
  color: #eaeaea;
  position: absolute;
  left: 10px;
  margin-top: -1px;
  height: 12px;
}
.next .n-topology.n-topology-blue .n-topology-nav-full {
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  color: #999999;
}
.next .n-topology.n-topology-blue .n-topology-nav-full:hover {
  color: #4d4d4d;
}
.next .n-topology.n-topology-blue .n-topology-nav-setting {
  cursor: pointer;
  text-align: center;
  color: #999999;
  line-height: 1;
  -webkit-transition: none 0 !important;
  /* For Safari 3.1 to 6.0 */
  transition: none 0 !important;
}
.next .n-topology.n-topology-blue .n-topology-nav-setting:hover {
  opacity: 1;
  color: #0396eb;
}
.next .n-topology.n-topology-blue .n-topology-nav-setting-icon {
  font-size: 20px;
}
.next .n-topology.n-topology-blue .n-topology-nav-setting-icon-selected {
  color: #0396eb;
}
.next .n-topology.n-topology-blue .n-topology-loading {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.next .n-topology.n-topology-blue .n-topology-loading ul {
  position: absolute;
  left: calc(49.3%);
  top: calc(45.8%);
  display: inline-block;
  text-indent: 2.8em;
}
.next .n-topology.n-topology-blue .n-topology-loading ul li:after,
.next .n-topology.n-topology-blue .n-topology-loading ul:after {
  width: 1.4em;
  height: 1.4em;
  border-radius: 100%;
}
.next .n-topology.n-topology-blue .n-topology-loading ul li:after,
.next .n-topology.n-topology-blue .n-topology-loading ul:after {
  content: "";
  display: block;
}
.next .n-topology.n-topology-blue .n-topology-loading ul:after {
  position: absolute;
  top: 2.8em;
}
.next .n-topology.n-topology-blue .n-topology-loading li {
  position: absolute;
  padding-bottom: 5.6em;
  top: 0;
  left: 0;
  list-style: none;
}
.next .n-topology.n-topology-blue .n-topology-loading li:after {
  background: #0386d2;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -webkit-animation-delay: 0.125s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(1):after {
  -webkit-animation-delay: 0.125s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(2) {
  -webkit-transform: rotate(36deg);
  -webkit-animation-delay: 0.25s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(2):after {
  -webkit-animation-delay: 0.25s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(3) {
  -webkit-transform: rotate(72deg);
  -webkit-animation-delay: 0.375s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(3):after {
  -webkit-animation-delay: 0.375s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(4) {
  -webkit-transform: rotate(108deg);
  -webkit-animation-delay: 0.5s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(4):after {
  -webkit-animation-delay: 0.5s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(5) {
  -webkit-transform: rotate(144deg);
  -webkit-animation-delay: 0.625s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(5):after {
  -webkit-animation-delay: 0.625s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(6) {
  -webkit-transform: rotate(180deg);
  -webkit-animation-delay: 0.75s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(6):after {
  -webkit-animation-delay: 0.75s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(7) {
  -webkit-transform: rotate(216deg);
  -webkit-animation-delay: 0.875s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(7):after {
  -webkit-animation-delay: 0.875s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(8) {
  -webkit-transform: rotate(252deg);
  -webkit-animation-delay: 1s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(8):after {
  -webkit-animation-delay: 1s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(9) {
  -webkit-transform: rotate(288deg);
  -webkit-animation-delay: 1.125s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(9):after {
  -webkit-animation-delay: 1.125s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(10) {
  -webkit-transform: rotate(324deg);
  -webkit-animation-delay: 1.25s;
}
.next .n-topology.n-topology-blue .n-topology-loading li:nth-child(10):after {
  -webkit-animation-delay: 1.25s;
}
.next .n-topology.n-topology-blue .n-topology-loading li {
  -webkit-animation: dotAnimation 2.5s infinite;
}
@-webkit-keyframes dotAnimation {
  0%,
  55%,
  100% {
    padding: 0 0 5.6em 0;
  }
  5%,
  50% {
    padding: 2.8em 0;
  }
}
.next .n-topology.n-topology-blue .n-topology-loading li:after {
  -webkit-animation: dotAnimationTwo 2.5s infinite;
}
@-webkit-keyframes dotAnimationTwo {
  0%,
  55%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  5%,
  50% {
    opacity: .5;
    -webkit-transform: scale(0.5);
  }
}
.next .n-topology.n-topology-dark {
  position: relative;
  overflow: hidden;
  background: #000000;
  -webkit-transition: background 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: background 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-dark:focus {
  outline: 0 none;
}
.next .n-topology.n-topology-dark .n-topology-fit {
  -webkit-transition: all 0.6s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s linear !important;
}
.next .n-topology.n-topology-dark .n-topology-fit .node,
.next .n-topology.n-topology-dark .n-topology-fit .nodeSet,
.next .n-topology.n-topology-dark .n-topology-fit .link,
.next .n-topology.n-topology-dark .n-topology-fit .linkSet {
  -webkit-transition: all 0.9s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.9s linear !important;
}
.next .n-topology.n-topology-dark.n-topology-loading svg,
.next .n-topology.n-topology-dark.n-topology-loading .n-topology-nav {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}
.next .n-topology.n-topology-dark svg {
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.next .n-topology.n-topology-dark text:empty {
  display: none;
}
.next .n-topology.n-topology-dark g {
  pointer-events: all;
}
.next .n-topology.n-topology-dark defs .bg {
  fill: #00a9ff;
}
.next .n-topology.n-topology-dark defs .stroke {
  stroke: #00a9ff;
}
.next .n-topology.n-topology-dark defs [fill*='#FFFFFF'] {
  fill: #000000;
}
.next .n-topology.n-topology-dark .n-svg {
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-dark .fontIcon {
  font-family: 'next-font';
  fill: #00a9ff;
  alignment-baseline: central;
  text-anchor: middle;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-dark text {
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-dark .n-topology-icon .fontIcon {
  cursor: pointer;
}
.next .n-topology.n-topology-dark .iconBG {
  fill: #000000;
}
.next .n-topology.n-topology-dark .iconBGActive {
  fill: #00a9ff;
}
.next .n-topology.n-topology-dark .node:not(.node-selected) .selectedBG {
  display: none;
}
.next .n-topology.n-topology-dark .node .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f7931e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .node .dot {
  fill: #00a9ff;
}
.next .n-topology.n-topology-dark .node text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #00a9ff;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 11px;
}
.next .n-topology.n-topology-dark .node.disable .node-label {
  fill: #ccc !important;
}
.next .n-topology.n-topology-dark .node.disable .showIcon .iconShape {
  fill: #ccc;
}
.next .n-topology.n-topology-dark .node.disable .iconBG.iconBGActive {
  fill: #ccc;
}
.next .n-topology.n-topology-dark .link path,
.next .n-topology.n-topology-dark .link line {
  stroke: #09cadd;
  stroke-width: 1px;
  fill: none;
  cursor: pointer;
}
.next .n-topology.n-topology-dark .link path.link:hover,
.next .n-topology.n-topology-dark .link line.link:hover {
  stroke: #068591;
}
.next .n-topology.n-topology-dark .link line.link_bg:hover ~ line {
  stroke: #068591 !important;
}
.next .n-topology.n-topology-dark .link .link-label {
  font-family: "Cisco Sans Reg";
  fill: #00a9ff;
  font-size: 12px;
}
.next .n-topology.n-topology-dark .link .source-abel {
  font-family: "Cisco Sans Reg";
  fill: #00a9ff;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-dark .link .target-label {
  font-family: "Cisco Sans Reg";
  fill: #00a9ff;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-dark .link .disable-label {
  fill: #fff;
}
.next .n-topology.n-topology-dark .link .disable-bg {
  fill: #ccc;
}
.next .n-topology.n-topology-dark .link .link_bg {
  stroke: transparent;
}
.next .n-topology.n-topology-dark .link.disable path,
.next .n-topology.n-topology-dark .link.disable line {
  stroke: #ccc !important;
  stroke-width: 1px;
}
.next .n-topology.n-topology-dark .link.disable .link_bg {
  stroke: transparent !important;
}
.next .n-topology.n-topology-dark .link.link-selected path,
.next .n-topology.n-topology-dark .link.link-selected line {
  stroke: #ccc;
  stroke-width: 2px;
}
.next .n-topology.n-topology-dark .nodeset .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f7931e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .nodeset .dot {
  fill: #000000;
  stroke: #00a9ff;
  stroke-width: 1;
}
.next .n-topology.n-topology-dark .nodeset .icon {
  cursor: pointer;
}
.next .n-topology.n-topology-dark .nodeset .bg {
  fill: #00a9ff;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .nodeset text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #00a9ff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .nodeset.disable {
  opacity: 0.3;
  stroke: #ccc;
}
.next .n-topology.n-topology-dark .nodeset .iconBG {
  fill: #000000;
}
.next .n-topology.n-topology-dark .nodeset .iconBGActive {
  fill: #000000;
}
.next .n-topology.n-topology-dark .nodeset .iconBGActive ~ .iconShape {
  display: block !important;
}
.next .n-topology.n-topology-dark .nodeset .indicator .iconBG {
  fill: #000000;
}
.next .n-topology.n-topology-dark .nodeset .indicator .iconBG:hover {
  fill: #00a9ff;
}
.next .n-topology.n-topology-dark .nodeset .indicator .iconShape {
  fill: #0087cc;
}
.next .n-topology.n-topology-dark .group .bg {
  opacity: 0.6;
  stroke-width: 10px;
  stroke-linejoin: round;
}
.next .n-topology.n-topology-dark .group .groupLabel {
  cursor: pointer;
  font-size: 18px;
  font-family: "Cisco Sans Reg";
  text-anchor: middle;
  alignment-baseline: inherit;
}
.next .n-topology.n-topology-dark .group .fontIcon.iconShape {
  fill: #9BB150;
}
.next .n-topology.n-topology-dark .group .nodeSetGroupLabel {
  cursor: pointer;
  font-size: 18px;
  font-family: "Cisco Sans Reg";
  alignment-baseline: inherit;
  fill: #9BB150;
}
.next .n-topology.n-topology-dark .group .groupLabel:hover ~ .bg {
  opacity: 0.7;
}
.next .n-topology.n-topology-dark .group.aggregationGroup .bg {
  stroke-width: 10px;
  stroke-linejoin: round;
  fill: #9BB150;
  stroke: #9BB150;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  /* For Safari 3.1 to 6.0 */
  transition: opacity 0.3s linear;
}
.next .n-topology.n-topology-dark .group.aggregationGroup.fade-active-item {
  opacity: 1;
}
.next .n-topology.n-topology-dark .group.aggregationGroup.fade-active-item .bg {
  opacity: 0.5;
}
.next .n-topology.n-topology-dark .link-set-bg {
  stroke: #09cadd;
  stroke-width: 2px;
}
.next .n-topology.n-topology-dark .link-set-circle {
  fill: #00a9ff;
  stroke: #00a9ff;
  stroke-width: 16px;
  stroke-linejoin: round;
}
.next .n-topology.n-topology-dark .link-set-text {
  font-family: "Cisco Sans Reg";
  fill: #000000;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 12px;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .link-set.disable .link-set-bg {
  stroke: #ccc;
}
.next .n-topology.n-topology-dark .link-set.disable .link-set-circle {
  fill: #ccc;
  stroke: #ccc;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .next .n-topology.n-topology-dark {
    /* Safari only override */
  }
  .next .n-topology.n-topology-dark ::i-block-chrome,
  .next .n-topology.n-topology-dark .link-set-circle {
    stroke-width: 8px !important;
  }
}
.next .n-topology.n-topology-dark .mapPath {
  fill: #ffffff;
  stroke: #d6f1ff;
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .mapBoundary {
  fill: none;
  stroke: #d6f1ff;
  stroke-width: 1;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .selectionRect {
  stroke: #00a9ff;
  fill: #00a9ff;
  fill-opacity: 0.1;
  pointer-events: none;
}
.next .n-topology.n-topology-dark-setting {
  max-width: none !important;
}
.next .n-topology.n-topology-dark .aggregationGroup .aggregationText {
  fill: #00a9ff;
  font-size: 12px;
}
.next .n-topology.n-topology-dark .aggregationGroup .aggregationRect {
  fill: #00a9ff;
  opacity: 0.2;
  stroke: #00a9ff;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.next .n-topology.n-topology-dark .layer > * {
  transition: opacity .6s;
}
.next .n-topology.n-topology-dark .layer.fade-layer > *:not(.fade-highlight-item):not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-dark.fade-active-priority.fade-active-occur .layer.fade-layer > .fade-highlight-item:not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-dark.fade-all .layer > *:not(.fade-highlight-item):not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-dark.fade-active-priority.fade-active-occur.fade-all .layer > .fade-highlight-item:not(.fade-active-item) {
  opacity: .2;
}
.next .n-topology.n-topology-dark .n-topology-nav {
  position: absolute;
  top: 0px;
  left: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-dark .n-topology-nav li {
  list-style: none;
  padding: 0px;
}
.next .n-topology.n-topology-dark .n-topology-nav ul {
  padding: 0px;
  margin: 0px;
}
.next .n-topology.n-topology-dark .n-topology-nav span {
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
}
.next .n-topology.n-topology-dark .n-topology-nav > ul {
  padding: 0px;
  margin-top: 30px;
  width: 32px;
}
.next .n-topology.n-topology-dark .n-topology-nav > ul > li {
  display: inline-block;
  list-style: none;
  width: 25px;
  margin-top: 5px;
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode {
  padding: 0px;
  position: relative;
  width: 25px;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode li {
  width: 25px;
  height: 25px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s;
  background: #333333;
  margin-top: -2px;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode li:hover span {
  color: #00a9ff;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode span {
  color: #666666;
  display: inline-block;
  font-size: 18px;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode-selected {
  background: #00a9ff !important;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode-selected span {
  color: #000000;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode-selected:hover {
  background: #00a9ff !important;
}
.next .n-topology.n-topology-dark .n-topology-nav-mode-selected:hover span {
  color: #000000 !important;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom {
  position: relative;
  height: 51px;
  margin-top: 10px !important;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom > span {
  display: inline-block;
  position: absolute;
  text-align: center;
  font-size: 25px;
  color: #666666;
  background: #333333;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-in {
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-in:hover {
  color: #b3b3b3;
  background: #4d4d4d;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-out {
  top: 25px;
  left: 0px;
  cursor: pointer;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-out:hover {
  color: #b3b3b3;
  background: #4d4d4d;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-selection {
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  color: #666666;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-selection:hover {
  color: #b3b3b3;
}
.next .n-topology.n-topology-dark .n-topology-nav-zoom-selection-selected {
  color: #66cbff;
}
.next .n-topology.n-topology-dark .n-topology-nav-fit {
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  color: #666666;
}
.next .n-topology.n-topology-dark .n-topology-nav-fit:hover {
  color: #b3b3b3;
}
.next .n-topology.n-topology-dark .n-topology-nav-agr {
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  font-size: 20px;
  height: 24px;
  color: #666666;
  display: none;
}
.next .n-topology.n-topology-dark .n-topology-nav-agr:hover {
  color: #b3b3b3;
}
@-webkit-keyframes agr-icon-ani {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.next .n-topology.n-topology-dark .n-topology-nav .agr-icon {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: agr-icon-ani;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
  -webkit-transition: 0 none;
  color: #1ab2ff;
}
.next .n-topology.n-topology-dark .n-topology-nav .agr-text {
  font-size: 10px;
  color: #333333;
  position: absolute;
  left: 10px;
  margin-top: -1px;
  height: 12px;
}
.next .n-topology.n-topology-dark .n-topology-nav-full {
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  color: #666666;
}
.next .n-topology.n-topology-dark .n-topology-nav-full:hover {
  color: #b3b3b3;
}
.next .n-topology.n-topology-dark .n-topology-nav-setting {
  cursor: pointer;
  text-align: center;
  color: #666666;
  line-height: 1;
  -webkit-transition: none 0 !important;
  /* For Safari 3.1 to 6.0 */
  transition: none 0 !important;
}
.next .n-topology.n-topology-dark .n-topology-nav-setting:hover {
  opacity: 1;
  color: #1ab2ff;
}
.next .n-topology.n-topology-dark .n-topology-nav-setting-icon {
  font-size: 20px;
}
.next .n-topology.n-topology-dark .n-topology-nav-setting-icon-selected {
  color: #1ab2ff;
}
.next .n-topology.n-topology-dark .n-topology-loading {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.next .n-topology.n-topology-dark .n-topology-loading ul {
  position: absolute;
  left: calc(49.3%);
  top: calc(45.8%);
  display: inline-block;
  text-indent: 2.8em;
}
.next .n-topology.n-topology-dark .n-topology-loading ul li:after,
.next .n-topology.n-topology-dark .n-topology-loading ul:after {
  width: 1.4em;
  height: 1.4em;
  border-radius: 100%;
}
.next .n-topology.n-topology-dark .n-topology-loading ul li:after,
.next .n-topology.n-topology-dark .n-topology-loading ul:after {
  content: "";
  display: block;
}
.next .n-topology.n-topology-dark .n-topology-loading ul:after {
  position: absolute;
  top: 2.8em;
}
.next .n-topology.n-topology-dark .n-topology-loading li {
  position: absolute;
  padding-bottom: 5.6em;
  top: 0;
  left: 0;
  list-style: none;
}
.next .n-topology.n-topology-dark .n-topology-loading li:after {
  background: #00a9ff;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -webkit-animation-delay: 0.125s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(1):after {
  -webkit-animation-delay: 0.125s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(2) {
  -webkit-transform: rotate(36deg);
  -webkit-animation-delay: 0.25s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(2):after {
  -webkit-animation-delay: 0.25s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(3) {
  -webkit-transform: rotate(72deg);
  -webkit-animation-delay: 0.375s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(3):after {
  -webkit-animation-delay: 0.375s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(4) {
  -webkit-transform: rotate(108deg);
  -webkit-animation-delay: 0.5s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(4):after {
  -webkit-animation-delay: 0.5s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(5) {
  -webkit-transform: rotate(144deg);
  -webkit-animation-delay: 0.625s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(5):after {
  -webkit-animation-delay: 0.625s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(6) {
  -webkit-transform: rotate(180deg);
  -webkit-animation-delay: 0.75s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(6):after {
  -webkit-animation-delay: 0.75s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(7) {
  -webkit-transform: rotate(216deg);
  -webkit-animation-delay: 0.875s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(7):after {
  -webkit-animation-delay: 0.875s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(8) {
  -webkit-transform: rotate(252deg);
  -webkit-animation-delay: 1s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(8):after {
  -webkit-animation-delay: 1s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(9) {
  -webkit-transform: rotate(288deg);
  -webkit-animation-delay: 1.125s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(9):after {
  -webkit-animation-delay: 1.125s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(10) {
  -webkit-transform: rotate(324deg);
  -webkit-animation-delay: 1.25s;
}
.next .n-topology.n-topology-dark .n-topology-loading li:nth-child(10):after {
  -webkit-animation-delay: 1.25s;
}
.next .n-topology.n-topology-dark .n-topology-loading li {
  -webkit-animation: dotAnimation 2.5s infinite;
}
@-webkit-keyframes dotAnimation {
  0%,
  55%,
  100% {
    padding: 0 0 5.6em 0;
  }
  5%,
  50% {
    padding: 2.8em 0;
  }
}
.next .n-topology.n-topology-dark .n-topology-loading li:after {
  -webkit-animation: dotAnimationTwo 2.5s infinite;
}
@-webkit-keyframes dotAnimationTwo {
  0%,
  55%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  5%,
  50% {
    opacity: .5;
    -webkit-transform: scale(0.5);
  }
}
.next .n-topology.n-topology-green {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  -webkit-transition: background 0.6s;
  /* For Safari 3.1 to 6.0 */
  transition: background 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-green:focus {
  outline: 0 none;
}
.next .n-topology.n-topology-green .n-topology-fit {
  -webkit-transition: all 0.6s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.6s linear !important;
}
.next .n-topology.n-topology-green .n-topology-fit .node,
.next .n-topology.n-topology-green .n-topology-fit .nodeSet,
.next .n-topology.n-topology-green .n-topology-fit .link,
.next .n-topology.n-topology-green .n-topology-fit .linkSet {
  -webkit-transition: all 0.9s linear !important;
  /* For Safari 3.1 to 6.0 */
  transition: all 0.9s linear !important;
}
.next .n-topology.n-topology-green.n-topology-loading svg,
.next .n-topology.n-topology-green.n-topology-loading .n-topology-nav {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}
.next .n-topology.n-topology-green svg {
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.next .n-topology.n-topology-green text:empty {
  display: none;
}
.next .n-topology.n-topology-green g {
  pointer-events: all;
}
.next .n-topology.n-topology-green defs .bg {
  fill: #26999e;
}
.next .n-topology.n-topology-green defs .stroke {
  stroke: #26999e;
}
.next .n-topology.n-topology-green defs [fill*='#FFFFFF'] {
  fill: #ffffff;
}
.next .n-topology.n-topology-green .n-svg {
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.next .n-topology.n-topology-green .fontIcon {
  font-family: 'next-font';
  fill: #26999e;
  alignment-baseline: central;
  text-anchor: middle;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-green text {
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.next .n-topology.n-topology-green .n-topology-icon .fontIcon {
  cursor: pointer;
}
.next .n-topology.n-topology-green .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-green .iconBGActive {
  fill: #26999e;
}
.next .n-topology.n-topology-green .node:not(.node-selected) .selectedBG {
  display: none;
}
.next .n-topology.n-topology-green .node .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f2ad4e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-green .node .dot {
  fill: #26999e;
}
.next .n-topology.n-topology-green .node text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #26999e;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 11px;
}
.next .n-topology.n-topology-green .node.disable .node-label {
  fill: #ccc !important;
}
.next .n-topology.n-topology-green .node.disable .showIcon .iconShape {
  fill: #ccc;
}
.next .n-topology.n-topology-green .node.disable .iconBG.iconBGActive {
  fill: #ccc;
}
.next .n-topology.n-topology-green .link path,
.next .n-topology.n-topology-green .link line {
  stroke: #5edadd;
  stroke-width: 1px;
  fill: none;
  cursor: pointer;
}
.next .n-topology.n-topology-green .link path.link:hover,
.next .n-topology.n-topology-green .link line.link:hover {
  stroke: #29bfc3;
}
.next .n-topology.n-topology-green .link line.link_bg:hover ~ line {
  stroke: #29bfc3 !important;
}
.next .n-topology.n-topology-green .link .link-label {
  font-family: "Cisco Sans Reg";
  fill: #26999e;
  font-size: 12px;
}
.next .n-topology.n-topology-green .link .source-abel {
  font-family: "Cisco Sans Reg";
  fill: #26999e;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-green .link .target-label {
  font-family: "Cisco Sans Reg";
  fill: #26999e;
  opacity: 0.8;
  font-size: 12px;
}
.next .n-topology.n-topology-green .link .disable-label {
  fill: #fff;
}
.next .n-topology.n-topology-green .link .disable-bg {
  fill: #ccc;
}
.next .n-topology.n-topology-green .link .link_bg {
  stroke: transparent;
}
.next .n-topology.n-topology-green .link.disable path,
.next .n-topology.n-topology-green .link.disable line {
  stroke: #ccc !important;
  stroke-width: 1px;
}
.next .n-topology.n-topology-green .link.disable .link_bg {
  stroke: transparent !important;
}
.next .n-topology.n-topology-green .link.link-selected path,
.next .n-topology.n-topology-green .link.link-selected line {
  stroke: #ccc;
  stroke-width: 2px;
}
.next .n-topology.n-topology-green .nodeset .selectedBG {
  fill: transparent;
  opacity: 0.8;
  stroke: #f2ad4e;
  stroke-width: 3;
  pointer-events: none;
}
.next .n-topology.n-topology-green .nodeset .dot {
  fill: #ffffff;
  stroke: #26999e;
  stroke-width: 1;
}
.next .n-topology.n-topology-green .nodeset .icon {
  cursor: pointer;
}
.next .n-topology.n-topology-green .nodeset .bg {
  fill: #26999e;
  pointer-events: none;
}
.next .n-topology.n-topology-green .nodeset text.node-label {
  font-family: "Cisco Sans Reg";
  fill: #26999e;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}
.next .n-topology.n-topology-green .nodeset.disable {
  opacity: 0.3;
  stroke: #ccc;
}
.next .n-topology.n-topology-green .nodeset .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-green .nodeset .iconBGActive {
  fill: #ffffff;
}
.next .n-topology.n-topology-green .nodeset .iconBGActive ~ .iconShape {
  display: block !important;
}
.next .n-topology.n-topology-green .nodeset .indicator .iconBG {
  fill: #ffffff;
}
.next .n-topology.n-topology-green .nodeset .indicator .iconBG:hover {
  fill: #26999e;
}
.next .n-topology.n-topology-green .nodeset .indicator .iconShape {
  fill: #1c7175;
}
.next .n-topology.n-topology-green .group .bg {
  opacity: 0.6;
  stroke-width: 10px;
  stroke-linejoin: round;
}
.next .n-topology.n-topology-green .group .groupLabel {
  cursor: pointer;
  font-size: 18px;
  font-family: "Cisco Sans Reg";
  text-anchor: middle;
  alignment-baseline: inherit;
}
.next .n-topology.n-topo