skyquake/framework/style/core.css

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 @import "./vendor/css-reset-2.0/css-reset.css";
  19 .has-drop-shadow {
  20     box-shadow: 2px 2px rgba(0, 0, 0, .15)
  21 }
  22 em.circle {
  23     border: 1px solid #333;
  24     border-radius: 50%;
  25     display: inline-block;
  26     padding: 0 .225rem
  27 }
  28 @font-face {
  29     font-family: roboto-regular;
  30     src: url(./fonts/Roboto-Regular-webfont.eot);
  31     src: url(./fonts/Roboto-Regular-webfont.eot?#iefix) format('embedded-opentype'), url(./fonts/Roboto-Regular-webfont.woff) format('woff'), url(./fonts/Roboto-Regular-webfont.ttf) format('truetype'), url(./fonts/Roboto-Regular-webfont.svg#robotoregular) format('svg')
  32 }
  33 @font-face {
  34     font-family: roboto-condensed-bold;
  35     src: url(./fonts/RobotoCondensed-Bold-webfont.eot);
  36     src: url(./fonts/RobotoCondensed-Bold-webfont.eot?#iefix) format('embedded-opentype'), url(./fonts/RobotoCondensed-Bold-webfont.woff) format('woff'), url(./fonts/RobotoCondensed-Bold-webfont.ttf) format('truetype'), url(./fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold) format('svg')
  37 }
  38 @font-face {
  39     font-family: roboto-light;
  40     src: url(./fonts/Roboto-Light-webfont.ttf)
  41 }
  42 body {
  43     font-family: roboto-regular, Helvetica, Arial, sans-serif;
  44     line-height: 1.2
  45 }
  46 h1 {
  47     font-size: 1.625rem;
  48     font-weight: 400
  49 }
  50 h2 {
  51     font-size: 1.375rem
  52 }
  53 em.large {
  54     font-size: 1.75rem
  55 }
  56 .all-caps {
  57     font-weight: 700;
  58     text-transform: uppercase
  59 }
  60 .small-caps {
  61     font-size: .6875rem;
  62     font-weight: 700;
  63     text-transform: uppercase
  64 }
  65 .unit {
  66     font-size: .5625rem;
  67     font-weight: 700;
  68     text-transform: uppercase
  69 }
  70 .label {
  71     font-size: .625rem;
  72     font-weight: 700;
  73     text-transform: uppercase
  74 }
  75 body {
  76     background: #f1f1f1;
  77     margin: 0;
  78     padding: 0
  79 }
  80 .flex-row {
  81     display: flex;
  82     flex-direction: row
  83 }
  84 .flex-center {
  85     align-items: center;
  86     display: flex;
  87     justify-content: center
  88 }
  89 .header-app {
  90     background-color: #f1f1f1;
  91     height: 91px;
  92     padding: 20px 0;
  93     position: relative
  94 }
  95 .header-app h1 {
  96     background: url(./img/header-logo.png) no-repeat left center;
  97     height: 51px;
  98     line-height: 51px;
  99     margin-left: 80px;
 100     padding-left: 118px;
 101     position: absolute;
 102     left: 0;
 103     text-transform: uppercase
 104 }
 105 .header-app nav.launchpad-nav {
 106     box-sizing: border-box;
 107     height: 28px;
 108     line-height: 28px;
 109     position: absolute;
 110     right: 80px;
 111     top: 32px
 112 }
 113 .header-app nav.launchpad-nav:before,
 114 .header-app nav.launchpad-nav:after {
 115     content: " ";
 116     display: block
 117 }
 118 .header-app nav.launchpad-nav:after {
 119     clear: both
 120 }
 121 .header-app nav.launchpad-nav a {
 122     border-left: 1px solid #e5e5e5;
 123     display: block;
 124     float: left;
 125     height: 28px;
 126     margin-left: 20px;
 127     padding-left: 20px;
 128     color:black;
 129     text-decoration:none;
 130 }
 131 .header-app nav.launchpad-nav h4 {
 132     display: inline-block;
 133     font-size: 11px;
 134     margin-right: 8px;
 135     text-transform: uppercase
 136 }
 137 .header-app nav.launchpad-nav img {
 138     width: 28px
 139 }
 140 .header-app nav.viewport-nav {
 141     position: absolute;
 142     right: 0
 143 }
 144 .header-app nav.viewport-nav a {
 145     text-decoration: none
 146 }
 147 .header-app nav.viewport-nav h2 {
 148     color: #30baef;
 149     font-size: 100%;
 150     height: 54px;
 151     line-height: 54px;
 152     margin-right: 24px;
 153     padding-right: 55px;
 154     text-transform: uppercase
 155 }
 156 .header-app nav.viewport-nav.top h2 {
 157     background: url(./img/viewport-nav-top.png) no-repeat right center
 158 }
 159 .header-app nav.viewport-nav.right h2 {
 160     background: url(./img/viewport-nav-right.png) no-repeat right center
 161 }
 162 .header-app nav.viewport-nav.bottom h2 {
 163     background: url(./img/viewport-nav-bottom.png) no-repeat right center
 164 }
 165 .header-app nav.viewport-nav.left h2 {
 166     background: url(./img/viewport-nav-left.png) no-repeat right center
 167 }
 168 .header-app nav.viewport-nav.center h2 {
 169     background: url(./img/viewport-nav-center.png) no-repeat right center
 170 }
 171 .app-body {
 172     margin-bottom: 12px
 173 }
 174 .app-body:before,
 175 .app-body:after {
 176     content: " ";
 177     display: block
 178 }
 179 .app-body:after {
 180     clear: both
 181 }
 182 .has-corner-accents {
 183     position: relative
 184 }
 185 .corner-accent {
 186     border: 1px solid #000;
 187     display: block;
 188     height: 4px;
 189     position: absolute;
 190     width: 4px
 191 }
 192 .corner-accent.top {
 193     border-bottom: 0;
 194     top: -1px
 195 }
 196 .corner-accent.right {
 197     border-left: 0;
 198     right: -1px
 199 }
 200 .corner-accent.bottom {
 201     border-top: 0;
 202     bottom: -1px
 203 }
 204 .corner-accent.left {
 205     border-right: 0;
 206     left: -1px
 207 }
 208 .has-diag-corners {
 209     position: relative
 210 }
 211 .has-diag-corners.top:before {
 212     border-left: 149px solid #dadada;
 213     border-top: 134px solid #ccc;
 214     content: '';
 215     position: absolute;
 216     left: 0;
 217     top: 0;
 218     width: 0
 219 }
 220 .has-diag-corners.top:after {
 221     border-right: 149px solid #dadada;
 222     border-top: 134px solid #ccc;
 223     content: '';
 224     position: absolute;
 225     right: 0;
 226     top: 0;
 227     width: 0
 228 }
 229 .has-diag-corners.bottom:before {
 230     border-right: 149px solid #ccc;
 231     border-top: 134px solid #dadada;
 232     content: '';
 233     position: absolute;
 234     left: 0;
 235     top: 0;
 236     width: 0
 237 }
 238 .has-diag-corners.bottom:after {
 239     border-left: 149px solid #ccc;
 240     border-top: 134px solid #dadada;
 241     content: '';
 242     position: absolute;
 243     right: 0;
 244     top: 0;
 245     width: 0
 246 }
 247 .active {
 248     background-color: #00acee!important;
 249     border-color: #00acee!important;
 250     color: #fff!important
 251 }
 252 .active-text {
 253     color: #00acee!important
 254 }
 255 .status-clear {
 256     background: #93cb43!important;
 257     color: #fff
 258 }
 259 .status-clear-text {
 260     color: #93cb43
 261 }
 262 .status-info {
 263     background: #30baef!important;
 264     color: #fff
 265 }
 266 .status-info-text {
 267     color: #30baef
 268 }
 269 .dropdown-set {
 270     align-items: center;
 271     display: flex;
 272     justify-content: center
 273 }
 274 .dropdown {
 275     position: relative
 276 }
 277 .dropdown>a {
 278     background-color: #00acee;
 279     color: #fff;
 280     display: block;
 281     margin: 0 .875rem;
 282     padding: .625rem;
 283     position: relative;
 284     width: 16rem;
 285     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 286 }
 287 .dropdown>a i {
 288     font-size: 1.375rem;
 289     position: absolute;
 290     right: .5rem;
 291     top: .5rem
 292 }
 293 .dropdown>ul {
 294     display: none;
 295     position: absolute;
 296     left: 0;
 297     top: 0
 298 }
 299 .fleet-card {
 300     background-color: rgba(203, 209, 209, .5);
 301     flex: 0 1 48%;
 302     height: 403px;
 303     margin: 12px 0 12px 20px
 304 }
 305 .fleet-card .layout-col.left {
 306     flex: 0 1 69%
 307 }
 308 .fleet-card .layout-col.right {
 309     flex: 0 1 31%
 310 }
 311 .fleet-card-header {
 312     color: #fff
 313 }
 314 .fleet-card-pwr-status {
 315     background-color: #93cb43;
 316     position: relative
 317 }
 318 .fleet-card-pwr-status:before,
 319 .fleet-card-pwr-status:after {
 320     content: " ";
 321     display: block
 322 }
 323 .fleet-card-pwr-status:after {
 324     clear: both
 325 }
 326 .fleet-card-pwr-status a[href] {
 327     display: inline-block;
 328     height: 53px;
 329     width: 89%
 330 }
 331 .fleet-card-pwr-status h2 {
 332     color: #fff;
 333     float: left;
 334     font-size: 16px;
 335     font-weight: 400;
 336     margin: 21px 0 0 24px;
 337     text-transform: uppercase
 338 }
 339 .fleet-card-pwr-status .button-open-viewport {
 340     position: absolute;
 341     right: 12px;
 342     top: 19px;
 343     width: 20px
 344 }
 345 .fleet-card-pwr-btn {
 346     background-color: #333;
 347     box-shadow: 2px 2px rgba(0, 0, 0, .35);
 348     color: #93cb43;
 349     cursor: pointer;
 350     display: inline-block;
 351     float: left;
 352     padding: 12px
 353 }
 354 .fleet-card-env-status {
 355     align-items: center;
 356     background-color: #7cc118;
 357     font-size: 10px;
 358     height: 75px;
 359     display: flex;
 360     justify-content: flex-start
 361 }
 362 .fleet-card-env-status h3 {
 363     font-size: 12px;
 364     text-transform: uppercase
 365 }
 366 .fleet-card-env-status i {
 367     float: left;
 368     font-size: 30px;
 369     margin: 12px
 370 }
 371 .fleet-card-env-status>div {
 372     float: left;
 373     margin-left: 22px
 374 }
 375 .fleet-card-graph {
 376     border: 2px solid rgba(252, 252, 252, .5);
 377     border-right: 0;
 378     border-bottom: 0;
 379     flex: 0 1 50%;
 380     padding: 24px 0;
 381     text-align: center
 382 }
 383 .fleet-card-graph:first-child {
 384     border-left: 0
 385 }
 386 .fleet-card-graph h3 {
 387     font-size: 12px;
 388     font-weight: 700;
 389     text-transform: uppercase
 390 }
 391 .fleet-card-graph img {
 392     margin-top: 18px;
 393     width: 75%
 394 }
 395 .fleet-card-graph-container {
 396     height: 271px
 397 }
 398 .fleet-card-params {
 399     background-color: #e5e5e5;
 400     border-left: 2px solid rgba(252, 252, 252, .5);
 401     font-size: 11px;
 402     text-align: center
 403 }
 404 .fleet-card-params dt {
 405     background-color: #ccc;
 406     padding: 8px 0 4px;
 407     text-transform: uppercase
 408 }
 409 .fleet-card-params dd {
 410     background-color: #ccc;
 411     border-bottom: 2px solid #f1f1f1;
 412     padding: 4px 0 8px
 413 }
 414 .fleet-card-params-detail {
 415     background: #fff;
 416     box-sizing: border-box;
 417     font-size: 11px;
 418     text-align: center
 419 }
 420 .fleet-card-params-detail.sla-panel,
 421 .fleet-card-params-detail.nfvi-panel {
 422     cursor: pointer;
 423     height: 403px;
 424     padding: 0 20px
 425 }
 426 .fleet-card-params-detail h4 {
 427     padding-top: 24px;
 428     text-transform: uppercase
 429 }
 430 .fleet-card-params-detail h4 i {
 431     font-size: 16px;
 432     margin-left: 18px
 433 }
 434 .fleet-card-params-detail li {
 435     border-top: 1px solid #e5e5e5;
 436     margin-top: 20px;
 437     padding-top: 20px
 438 }
 439 .fleet-card-params-detail li:first-child {
 440     border: 0
 441 }
 442 .fleet-card-params-detail.trafgen-panel {
 443     height: 403px;
 444     position: relative
 445 }
 446 .fleet-card-params-detail.trafgen-panel h4 {
 447     padding-top: 24px;
 448     text-transform: uppercase
 449 }
 450 .fleet-card-params-detail.trafgen-panel h4 i {
 451     font-size: 16px;
 452     margin-left: 18px
 453 }
 454 .fleet-card-params-detail.trafgen-panel .slider-container {
 455     font-size: 12px;
 456     padding: 0 50px;
 457     margin-top: 48px;
 458     justify-content: space-between
 459 }
 460 .fleet-card-params-detail.trafgen-panel .slider-vert {
 461     flex: 0 1 25%;
 462     margin: 0
 463 }
 464 .fleet-card-params-detail.trafgen-panel .slider-vert-track {
 465     width: 30px
 466 }
 467 .fleet-card-params-detail.trafgen-panel .slider-vert-header {
 468     font-size: 10px;
 469     margin-bottom: 6px
 470 }
 471 .fleet-card-params-detail.trafgen-panel .slider-vert-start-val {
 472     margin-bottom: 3px
 473 }
 474 .fleet-card-params-detail.trafgen-panel .slider-vert-end-val {
 475     margin-top: 3px
 476 }
 477 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-header {
 478     margin-left: -16px
 479 }
 480 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position {
 481     top: 130px
 482 }
 483 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position.left {
 484     width: 69p
 485 }
 486 .fleet-card-params-detail.trafgen-panel .rate-slider .slider-vert-position {
 487     top: 40px
 488 }
 489 .fleet-card-toggle-set {
 490     border-bottom: 2px solid #f1f1f1;
 491     padding: 18px
 492 }
 493 .fleet-card-toggle-set a[role=button] {
 494     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 495 }
 496 .fleet-card-toggle-set a:last-child {
 497     margin-bottom: 0
 498 }
 499 .fleet-card-actions {
 500     background-color: #ccc;
 501     padding: 22px 18px
 502 }
 503 .fleet-card-actions .button-set {
 504     margin-top: 6px
 505 }
 506 .fleet-card-actions a[role=button] {
 507     display: block;
 508     float: left;
 509     text-align: center;
 510     text-transform: uppercase;
 511     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 512 }
 513 .fleet-card-actions .trafgen-start {
 514     background-color: #333;
 515     color: #fff;
 516     flex: 0 1 80%;
 517     margin-right: 2px;
 518     padding: 8px 0
 519 }
 520 .fleet-card-actions .trafgen-start i {
 521     margin-right: 6px
 522 }
 523 .fleet-card-actions .trafgen-toggle {
 524     background-color: #fff;
 525     color: #333;
 526     flex: 0 1 20%;
 527     padding: 2px 8px 2px 11px;
 528     font-size: 21px
 529 }
 530 .fleet-card-toggle {
 531     background-color: #fff;
 532     box-shadow: 4px 4px #e5e5e5;
 533     color: #30baef;
 534     cursor: pointer;
 535     display: block;
 536     margin-bottom: 12px;
 537     padding: 20px
 538 }
 539 .fleet-card-toggle h4 {
 540     color: #000;
 541     margin-bottom: 6px;
 542     text-transform: uppercase
 543 }
 544 .fleet-card.empty-card {
 545     font-size: 12px;
 546     text-align: center;
 547     text-transform: uppercase
 548 }
 549 .fleet-card.empty-card a {
 550     color: #000;
 551     display: block;
 552     font-weight: 700;
 553     height: 100%;
 554     text-decoration: none;
 555     width: 100%
 556 }
 557 .fleet-card.empty-card a img {
 558     margin-top: 130px
 559 }
 560 .fleet-card.empty-card a p {
 561     margin-top: 24px
 562 }
 563 .navpanel-container {
 564     background-color: #dadada;
 565     box-sizing: border-box;
 566     display: flex;
 567     flex-flow: row wrap
 568 }
 569 .navpanel {
 570     background-color: #ccc;
 571     box-sizing: border-box;
 572     color: #000;
 573     padding: 1.5rem 0;
 574     text-align: center;
 575     text-decoration: none
 576 }
 577 .navpanel.top {
 578     flex: 1 0 100%;
 579     order: 1
 580 }
 581 .navpanel.right {
 582     order: 4
 583 }
 584 .navpanel.bottom {
 585     align-self: baseline;
 586     flex: 0 1 100%;
 587     order: 5
 588 }
 589 .navpanel.left {
 590     order: 2
 591 }
 592 .navpanel.left,
 593 .navpanel.right {
 594     background-color: #dadada;
 595     flex: 0 1 auto;
 596     padding: 0 1.5rem;
 597     width: 148px
 598 }
 599 .mainpanel {
 600     flex: 2 1;
 601     order: 3
 602 }
 603 .progress-bar {
 604     background: #fff;
 605     height: 30px;
 606     line-height: 30px;
 607     padding-right: 12px;
 608     position: relative;
 609     text-align: right
 610 }
 611 .progress-bar span {
 612     background: #30baef;
 613     color: #fff;
 614     display: block;
 615     font-size: .75rem;
 616     height: 30px;
 617     padding: 0 .75em;
 618     position: absolute;
 619     left: 0;
 620     top: 0
 621 }
 622 .config-parent {
 623     cursor: pointer
 624 }
 625 .config-list {
 626     display: block;
 627     margin-left: 10px
 628 }
 629 .config-list.closed {
 630     display: none
 631 }
 632 .slider-container {
 633     text-align: center
 634 }
 635 .slider-vert {
 636     float: left;
 637     width: 42px;
 638     margin-left: 47px!important
 639 }
 640 .slider-vert-header {
 641     font-size: 11px;
 642     margin-bottom: 4px;
 643     text-transform: uppercase;
 644     white-space: nowrap
 645 }
 646 .slider-vert-start-val,
 647 .slider-vert-end-val {
 648     font-size: 14px
 649 }
 650 .slider-vert-track {
 651     border-left: 1px solid #ccc;
 652     border-right: 1px solid #ccc;
 653     height: 200px;
 654     position: relative;
 655     width: 30px
 656 }
 657 .slider-vert-handle {
 658     background-color: #00acee;
 659     box-shadow: 2px 2px rgba(0, 0, 0, .2);
 660     display: inline-block;
 661     height: 16px;
 662     width: 34px
 663 }
 664 .slider-vert-position {
 665     color: #30baef;
 666     font-size: 12px;
 667     position: absolute;
 668     white-space: nowrap!important
 669 }
 670 .slider-vert-position.left {
 671     left: -38px
 672 }
 673 .slider-vert-position.left .slider-vert-handle {
 674     float: right;
 675     margin-left: 6px
 676 }
 677 .slider-vert-position.right {
 678     left: -3px
 679 }
 680 .slider-vert-position.right .slider-vert-handle {
 681     float: left;
 682     margin-right: 6px
 683 }
 684 .slider-toggle {
 685     float: left;
 686     margin: 12px 27px 12px 0;
 687     white-space: nowrap;
 688     width: 43%
 689 }
 690 .slider-toggle:before,
 691 .slider-toggle:after {
 692     content: " ";
 693     display: block
 694 }
 695 .slider-toggle:after {
 696     clear: both
 697 }
 698 .slider-toggle label {
 699     display: block;
 700     font-size: 13px;
 701     margin-bottom: 8px;
 702     text-transform: uppercase
 703 }
 704 .slider-toggle-track {
 705     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 706 }
 707 .slider-toggle-track:before,
 708 .slider-toggle-track:after {
 709     content: " ";
 710     display: block
 711 }
 712 .slider-toggle-track:after {
 713     clear: both
 714 }
 715 .slider-toggle-option {
 716     background-color: #fff;
 717     color: #dadada;
 718     float: left;
 719     font-size: 12px;
 720     margin-top: -4px;
 721     padding: 8px;
 722     text-align: center;
 723     width: 50%
 724 }
 725 a[role=button] {
 726     cursor: pointer
 727 }
 728 .button-action-toggle {
 729     background-color: #333;
 730     box-shadow: 4px 4px #e5e5e5;
 731     color: #fff;
 732     cursor: pointer;
 733     display: block;
 734     padding: 12px 0;
 735     text-align: center;
 736     text-transform: uppercase
 737 }
 738 .button-action-toggle i {
 739     margin-right: 6px
 740 }
 741 .button-half-border {
 742     border: 2px solid #000;
 743     border-top: 0;
 744     box-shadow: 2px 2px rgba(0, 0, 0, .35);
 745     padding: 4px 24px;
 746     position: relative;
 747     font-size: .6875rem;
 748     font-weight: 700;
 749     text-transform: uppercase
 750 }
 751 .button-half-border:before,
 752 .button-half-border:after {
 753     background: #ccc;
 754     content: '';
 755     display: block;
 756     height: 10px;
 757     position: absolute;
 758     top: 0;
 759     width: 4px
 760 }
 761 .button-half-border:before {
 762     left: -4px
 763 }
 764 .button-half-border:after {
 765     right: -4px
 766 }
 767 .step-control {
 768     position: relative;
 769     text-align: center
 770 }
 771 .step-control .step {
 772     cursor: pointer;
 773     display: block;
 774     position: absolute;
 775     top: 0
 776 }
 777 .step-control .step.decrease {
 778     left: 0
 779 }
 780 .step-control .step.increase {
 781     right: 0
 782 }
 783 .toggle-set {
 784     align-items: center;
 785     display: flex;
 786     justify-content: center
 787 }
 788 .toggle-control {
 789     align-content: center;
 790     display: flex;
 791     width: 18.75rem;
 792     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 793 }
 794 .toggle-control>a {
 795     background-color: #fff;
 796     color: #333;
 797     flex: 0 1 9.375rem;
 798     padding: .625rem 0;
 799     align-items: center;
 800     display: flex;
 801     justify-content: center
 802 }
 803 .toggle-control>a.selected {
 804     background-color: #00acee;
 805     color: #fff
 806 }
 807 .splitterContainer {
 808     -webkit-flex: 1;
 809     -moz-flex: 1;
 810     -ms-flex: 1;
 811     flex: 1;
 812     display: flex;
 813     -webkit-flex-direction: column;
 814     -moz-flex-direction: column;
 815     -ms-flex-direction: column;
 816     flex-direction: column
 817 }
 818 .splitterContainer .content {
 819     margin-right: 60px
 820 }
 821 .splitterContainer #handle {
 822     z-index: 3;
 823     position: relative;
 824     cursor: row-resize;
 825     min-height: 20px
 826 }
 827 .splitterContainer .splitter {
 828     height: 32px;
 829     width: 100%;
 830     box-shadow: none;
 831     background-image: none;
 832     align-items: center;
 833     padding: 4px;
 834     border-top: 1px solid #121212;
 835     border-bottom: 1px solid #121212;
 836     background-color: #454545;
 837     z-index: 999
 838 }
 839 .splitterContainer .splitter .adjust {
 840     position: absolute;
 841     right: 0;
 842     top: 0;
 843     margin-top: 5px
 844 }
 845 .splitterContainer .splitter .adjust .splitterButtons {
 846     position: relative;
 847     float: left;
 848     border: 1px solid #fff;
 849     border-radius: 8px;
 850     fill: #fff;
 851     height: 15px;
 852     width: 15px;
 853     cursor: pointer;
 854     color: #fff
 855 }
 856 .splitterContainer .vpane-top {
 857     flex: 1;
 858     overflow-y: scroll
 859 }
 860 .splitterContainer .vpane-bottom {
 861     display: block;
 862     overflow-y: scroll;
 863     padding: 10px;
 864     position: relative
 865 }
 866 .launchpad {
 867     flex-wrap: wrap
 868 }
 869 .create-fleet-header {
 870     color: #00acee;
 871     display: inline-block;
 872     margin: 0 0 20px 24px;
 873     position: relative
 874 }
 875 .create-fleet-header img {
 876     position: absolute;
 877     right: -24px;
 878     bottom: 0;
 879     width: 16px
 880 }
 881 .create-fleet-services,
 882 .create-fleet-pool {
 883     background-color: #e5e5e5
 884 }
 885 .create-fleet>.flex-row {
 886     justify-content: space-around
 887 }
 888 .create-fleet>.flex-row>li {
 889     flex: 0 1 30%
 890 }
 891 .create-fleet>.flex-row>li h3 {
 892     background-color: #fff;
 893     padding: 12px 18px;
 894     text-transform: uppercase
 895 }
 896 .create-fleet .list-fleet-services {
 897     flex-wrap: wrap;
 898     text-align: center;
 899     margin: 24px auto;
 900     width: 90%
 901 }
 902 .create-fleet .list-fleet-services a {
 903     background-color: #fff;
 904     flex: 0 1 32%;
 905     margin: 0 4px 4px 0;
 906     padding: 4px;
 907     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 908 }
 909 .create-fleet .list-fleet-services a h5 {
 910     font-size: 10px;
 911     margin: 5px 0 0 5px;
 912     text-align: left
 913 }
 914 .create-fleet .list-fleet-services a img {
 915     margin-top: 10px;
 916     width: 70%
 917 }
 918 .create-fleet .list-pools {
 919     padding: 24px
 920 }
 921 .create-fleet .list-pools li a {
 922     background-color: #fff;
 923     display: block;
 924     font-size: 12px;
 925     margin-bottom: 24px;
 926     padding: 12px;
 927     text-align: center;
 928     box-shadow: 2px 2px rgba(0, 0, 0, .15)
 929 }
 930 .create-fleet .list-pools li h4 {
 931     text-align: left
 932 }
 933 .create-fleet .list-pools li img {
 934     margin-top: 24px;
 935     width: 65%
 936 }
 937 .create-fleet .parameter-controls {
 938     background-color: #e5e5e5;
 939     padding: 18px 0 18px 24px
 940 }
 941 .create-fleet .parameter-controls:before,
 942 .create-fleet .parameter-controls:after {
 943     content: " ";
 944     display: block
 945 }
 946 .create-fleet .parameter-controls:after {
 947     clear: both
 948 }
 949 .create-fleet .parameter-controls.epa label {
 950     display: block;
 951     float: left;
 952     margin: 6px 0 0
 953 }
 954 .create-fleet .parameter-controls.epa .slider-toggle {
 955     width: 100%
 956 }
 957 .create-fleet .parameter-controls.epa .slider-toggle-track {
 958     float: right;
 959     margin-right: 27px;
 960     width: 43%
 961 }
 962 .create-fleet .parameter-controls.epa .slider-toggle-option {
 963     color: #333
 964 }
 965 .create-fleet .parameter-controls.vmf li {
 966     font-size: 13px;
 967     margin-bottom: 12px
 968 }
 969 .create-fleet .parameter-controls.vmf li:before,
 970 .create-fleet .parameter-controls.vmf li:after {
 971     content: " ";
 972     display: block
 973 }
 974 .create-fleet .parameter-controls.vmf li:after {
 975     clear: both
 976 }
 977 .create-fleet .parameter-controls.vmf label {
 978     display: block;
 979     float: left;
 980     padding: 10px 0 6px;
 981     text-transform: uppercase
 982 }
 983 .create-fleet .parameter-controls.vmf .step-control {
 984     background-color: #fff;
 985     color: #30baef;
 986     float: right;
 987     margin-right: 27px;
 988     padding: 10px 0 6px;
 989     text-align: center;
 990     width: 175px
 991 }
 992 .create-fleet .parameter-controls.vmf .step-control .step {
 993     font-size: 16px;
 994     height: 31px;
 995     width: 31px;
 996     align-items: center;
 997     display: flex;
 998     justify-content: center
 999 }
1000 .create-fleet .parameter-controls.vmf .step-control .step.decrease {
1001     background-color: #ccc;
1002     border-right: 2px solid #e5e5e5;
1003     color: #666
1004 }
1005 .create-fleet .parameter-controls.vmf .step-control .step.increase {
1006     background-color: #fff;
1007     border-left: 2px solid #e5e5e5;
1008     color: #333;
1009     box-shadow: 2px 2px rgba(0, 0, 0, .15)
1010 }
1011 .create-fleet .adv-toggle h4 {
1012     background-color: #fff;
1013     color: #333
1014 }
1015 .create-fleet-params h4 {
1016     background-color: #00acee;
1017     color: #fff;
1018     font-size: 12px;
1019     padding: 6px 22px;
1020     position: relative;
1021     text-transform: uppercase;
1022     box-shadow: 2px 2px rgba(0, 0, 0, .15)
1023 }
1024 .create-fleet-params h4 i {
1025     font-size: 18px;
1026     position: absolute;
1027     right: 12px;
1028     top: 6px
1029 }
1030 .create-fleet-actions {
1031     clear: both;
1032     margin-top: 36px;
1033     text-align: center
1034 }
1035 .create-fleet-actions a {
1036     color: #000;
1037     display: inline-block;
1038     font-size: 12px;
1039     padding: 8px 64px;
1040     text-decoration: none;
1041     text-transform: uppercase;
1042     box-shadow: 2px 2px rgba(0, 0, 0, .15)
1043 }
1044 .create-fleet-actions a.save {
1045     background-color: #fff;
1046     border: 1px solid #ccc;
1047     border-top: 0;
1048     cursor: pointer;
1049     margin-right: 48px
1050 }
1051 .create-fleet-actions a.launch {
1052     background-color: #333;
1053     border: 1px solid #000;
1054     border-top: 0;
1055     color: #fff
1056 }
1057 .create-fleet-actions a.launch:hover,
1058 .create-fleet-actions a.launch:active {
1059     background: #00acee;
1060     color: #fff
1061 }
1062 .viewport-dash {
1063     font-size: .75rem
1064 }
1065 .viewport-dash .mainpanel {
1066     background: #f1f1f1;
1067     border-left: .1875rem solid #c2c2c2;
1068     border-right: .1875rem solid #c2c2c2;
1069     box-sizing: border-box;
1070     padding: 2.25rem
1071 }
1072 .viewport-dash .mainpanel.flex-row {
1073     align-items: flex-start;
1074     flex-wrap: wrap
1075 }
1076 .viewport-dash .mainpanel.flex-row .flex-left {
1077     flex: 0 1 45%
1078 }
1079 .viewport-dash .mainpanel.flex-row .flex-right {
1080     flex: 0 1 55%
1081 }
1082 .viewport-dash .mainpanel.flex-row .flex-right .flex-row {
1083     align-items: stretch;
1084     flex-wrap: wrap
1085 }
1086 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .sla-container {
1087     flex: 0 1 75%
1088 }
1089 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .network-container {
1090     flex: 0 1 25%
1091 }
1092 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .mgmt-container {
1093     flex: 0 1 100%
1094 }
1095 .viewport-dash .mainpanel h2 {
1096     background-color: #fff;
1097     margin-bottom: .125rem;
1098     font-size: .75rem;
1099     padding: 1.125rem;
1100     font-weight: 700;
1101     text-transform: uppercase
1102 }
1103 .viewport-dash .mainpanel table {
1104     text-align: center
1105 }
1106 .viewport-dash .mainpanel table th {
1107     background: #dadada;
1108     padding: .375rem;
1109     font-size: .6875rem;
1110     font-weight: 700;
1111     text-transform: uppercase
1112 }
1113 .viewport-dash .mainpanel table td {
1114     background: #e5e5e5;
1115     border-right: .0625rem solid #e5e5e5;
1116     padding: .5625rem 1.5rem
1117 }
1118 .viewport-dash .mainpanel table td .status-clear-text {
1119     margin-bottom: .75rem
1120 }
1121 .viewport-dash .mano {
1122     margin-bottom: 1.5rem
1123 }
1124 .viewport-dash .mano dl {
1125     align-items: center;
1126     background: #7cc118;
1127     color: #fff
1128 }
1129 .viewport-dash .mano dl:before,
1130 .viewport-dash .mano dl:after {
1131     content: " ";
1132     display: block
1133 }
1134 .viewport-dash .mano dl:after {
1135     clear: both
1136 }
1137 .viewport-dash .mano dl dt,
1138 .viewport-dash .mano dl dd {
1139     display: flex;
1140     padding: .375rem 1.125rem
1141 }
1142 .viewport-dash .mano dl dt {
1143     float: left;
1144     font-size: .6875rem;
1145     font-weight: 700;
1146     text-transform: uppercase
1147 }
1148 .viewport-dash .mano dl dd {
1149     float: right
1150 }
1151 .viewport-dash .mano table {
1152     width: 100%
1153 }
1154 .viewport-dash .mano table td:last-child {
1155     border: 0
1156 }
1157 .viewport-dash .vcs table {
1158     border-collapse: separate;
1159     border-spacing: .0625rem solid;
1160     width: 100%
1161 }
1162 .viewport-dash .vcs table thead th {
1163     background-color: #e5e5e5;
1164     border-right: 1px solid #dadada;
1165     padding: 1.125rem 0
1166 }
1167 .viewport-dash .vcs table thead th:last-child {
1168     border: 0
1169 }
1170 .viewport-dash .vcs table tbody td {
1171     width: 30%;
1172     border-bottom: 1px solid #e5e5e5
1173 }
1174 .viewport-dash .vcs table tbody th {
1175     padding-left: 1.125rem;
1176     text-align: left;
1177     width: 40%
1178 }
1179 .viewport-dash .vcs table tbody tr:nth-child(even) th {
1180     background-color: #e5e5e5
1181 }
1182 .viewport-dash .sla {
1183     flex: 1 1 60%;
1184     flex-wrap: nowrap;
1185     margin: 0 1.5rem
1186 }
1187 .viewport-dash .sla h3 {
1188     font-size: .6875rem;
1189     font-weight: 700;
1190     text-transform: uppercase
1191 }
1192 .viewport-dash .sla .wp-pool-manager {
1193     flex: 0 1 30%
1194 }
1195 .viewport-dash .sla .wp {
1196     background: #dadada;
1197     margin-bottom: .125rem;
1198     padding: .75rem;
1199     text-align: center
1200 }
1201 .viewport-dash .sla .wp h3 {
1202     text-align: left
1203 }
1204 .viewport-dash .sla .wp img {
1205     margin: .875rem 0;
1206     width: 90%
1207 }
1208 .viewport-dash .sla .pool-manager {
1209     background: #dadada;
1210     padding: .6875rem
1211 }
1212 .viewport-dash .sla .pool-manager .progress-bar {
1213     margin: .75rem 0
1214 }
1215 .viewport-dash .sla table.stats {
1216     border-left: 2px solid #f1f1f1;
1217     flex: 0 1 70%;
1218     text-align: left;
1219     width: 70%
1220 }
1221 .viewport-dash .sla table.stats th,
1222 .viewport-dash .sla table.stats td {
1223     border-bottom: 1px solid #f1f1f1;
1224     border-right: 1px solid #f1f1f1;
1225     padding: .375rem;
1226     vertical-align: middle;
1227     width: 50%
1228 }
1229 .viewport-dash .sla table.stats td {
1230     text-align: right
1231 }
1232 .viewport-dash .sla table.stats th {
1233     background: #dadada
1234 }
1235 .viewport-dash .sla table.stats th.alt {
1236     background: #e5e5e5
1237 }
1238 .viewport-dash .network li {
1239     background-color: #dadada;
1240     font-size: 1.625rem;
1241     margin-top: .125rem;
1242     padding: 1.125rem .875rem;
1243     text-align: center
1244 }
1245 .viewport-dash .network li:nth-child(even) {
1246     background-color: #e5e5e5
1247 }
1248 .viewport-dash .network li:last-child {
1249     border: 0
1250 }
1251 .viewport-dash .network li .label {
1252     display: block;
1253     margin-bottom: .6rem
1254 }
1255 .viewport-dash .mgmt {
1256     margin: 1.5rem 0 0 1.5rem
1257 }
1258 .viewport-dash .mgmt:before,
1259 .viewport-dash .mgmt:after {
1260     content: " ";
1261     display: block
1262 }
1263 .viewport-dash .mgmt:after {
1264     clear: both
1265 }
1266 .viewport-dash .mgmt ul {
1267     width: 100%
1268 }
1269 .viewport-dash .mgmt ul:before,
1270 .viewport-dash .mgmt ul:after {
1271     content: " ";
1272     display: block
1273 }
1274 .viewport-dash .mgmt ul:after {
1275     clear: both
1276 }
1277 .viewport-dash .mgmt h2 {
1278     padding: 0
1279 }
1280 .viewport-dash .mgmt li {
1281     background: #dadada;
1282     flex: 1 1 20.5%;
1283     font-size: 1.625rem;
1284     height: 5.938rem;
1285     margin-left: .125rem;
1286     padding: .5rem 0;
1287     text-align: center
1288 }
1289 .viewport-dash .mgmt li:first-child {
1290     background-color: #fff;
1291     flex: 0 1 10%;
1292     align-items: center;
1293     display: flex;
1294     justify-content: center
1295 }
1296 .viewport-dash .mgmt li:nth-child(even) {
1297     background-color: #e5e5e5
1298 }
1299 .viewport-dash .mgmt li .label {
1300     display: block;
1301     margin-bottom: .875rem
1302 }
1303 .viewport-dash .mgmt li .unit {
1304     display: block
1305 }
1306 .viewport-dash .navpanel .service-orch {
1307     display: flex;
1308     align-items: center;
1309     margin-left: 11.88rem
1310 }
1311 .viewport-dash .navpanel .service-orch .button-half-border {
1312     float: left;
1313     margin-right: 7.75rem
1314 }
1315 .viewport-dash .navpanel .service-orch li {
1316     background: #e5e5e5;
1317     float: left;
1318     height: 5.313rem;
1319     padding: .75rem 1.5rem;
1320     position: relative;
1321     margin-right: 1.5rem;
1322     width: 7.75rem;
1323     align-items: center;
1324     display: flex;
1325     justify-content: center;
1326     font-size: .6875rem;
1327     font-weight: 700;
1328     text-transform: uppercase
1329 }
1330 .viewport-dash .navpanel .service-orch li:after {
1331     border-top: 1px solid #333;
1332     content: '';
1333     position: absolute;
1334     right: -24px;
1335     top: 50%;
1336     width: 24px
1337 }
1338 .viewport-dash .navpanel .service-orch li:last-child {
1339     margin: 0
1340 }
1341 .viewport-dash .navpanel .service-orch li:last-child:after {
1342     border: 0
1343 }
1344 .viewport-dash .navpanel .vnf .button-half-border,
1345 .viewport-dash .navpanel .analytics .button-half-border {
1346     margin: 1rem 0 1.5rem
1347 }
1348 .viewport-dash .navpanel .vnf .button-half-border:before,
1349 .viewport-dash .navpanel .analytics .button-half-border:before,
1350 .viewport-dash .navpanel .vnf .button-half-border:after,
1351 .viewport-dash .navpanel .analytics .button-half-border:after {
1352     background: #dadada
1353 }
1354 .viewport-dash .navpanel .vnf dt,
1355 .viewport-dash .navpanel .analytics dt,
1356 .viewport-dash .navpanel .vnf dd,
1357 .viewport-dash .navpanel .analytics dd {
1358     margin-bottom: .1875rem;
1359     padding: .5rem
1360 }
1361 .viewport-dash .navpanel .vnf dt,
1362 .viewport-dash .navpanel .analytics dt {
1363     background: #fff;
1364     font-size: .6875rem;
1365     font-weight: 700;
1366     text-transform: uppercase
1367 }
1368 .viewport-dash .navpanel .vnf dd,
1369 .viewport-dash .navpanel .analytics dd {
1370     background: #ccc;
1371     font-size: 1.375rem
1372 }
1373 .viewport-dash .navpanel .vnf .unit,
1374 .viewport-dash .navpanel .analytics .unit {
1375     display: block;
1376     margin-top: .5rem
1377 }
1378 .viewport-dash .navpanel .vim {
1379     display: flex;
1380     align-items: center;
1381     margin-left: 11.88rem
1382 }
1383 .viewport-dash .navpanel .vim .button-half-border {
1384     float: left;
1385     margin-right: 2.25rem
1386 }
1387 .viewport-dash .navpanel .vim table {
1388     border-collapse: separate;
1389     border-spacing: .125rem;
1390     float: left;
1391     text-align: center
1392 }
1393 .viewport-dash .navpanel .vim table:last-child {
1394     margin-left: 1.5rem
1395 }
1396 .viewport-dash .navpanel .vim table th {
1397     background: #fff;
1398     padding: .5rem .75rem;
1399     text-align: left;
1400     font-size: .6875rem;
1401     font-weight: 700;
1402     text-transform: uppercase
1403 }
1404 .viewport-dash .navpanel .vim table td {
1405     background: #e5e5e5;
1406     font-size: 1.375rem;
1407     padding: .375rem 1rem .375rem
1408 }
1409 .viewport-dash .navpanel .vim table td .label {
1410     display: block;
1411     margin-bottom: .5rem
1412 }
1413 .viewport-so .vpane-bottom {
1414     display: flex
1415 }
1416 .viewport-so .panel-half {
1417     padding: 10px
1418 }
1419 .viewport-vim {
1420     font-size: .75rem
1421 }
1422 .viewport-vim .mainpanel {
1423     background: #f1f1f1;
1424     padding: 1.5rem
1425 }
1426 .viewport-vim .mainpanel .vim-controls {
1427     margin-bottom: 3rem
1428 }
1429 .viewport-vim .mainpanel .vim-controls>* {
1430     flex: 1 1 auto;
1431     justify-content: flex-end
1432 }
1433 .viewport-vim .mainpanel .vim-controls h2 {
1434     margin-top: .375rem
1435 }
1436 .viewport-vim .switch-table-set {
1437     justify-content: space-around;
1438     margin-bottom: 3rem
1439 }
1440 .viewport-vim .switch-table {
1441     flex: 0 1 30%
1442 }
1443 .viewport-vim .switch-table table {
1444     width: 100%
1445 }
1446 .viewport-vim .switch-table th,
1447 .viewport-vim .switch-table td {
1448     border-bottom: 2px solid #f1f1f1;
1449     vertical-align: middle;
1450     padding: .5625rem .875rem
1451 }
1452 .viewport-vim .switch-table th.switch h3 {
1453     background: url(./img/icon-switch.png) no-repeat left top;
1454     height: 1.7rem;
1455     padding-left: 4rem;
1456     padding-top: .55rem
1457 }
1458 .viewport-vim .switch-table th.host {
1459     background: #ccc url(./img/icon-host.png) no-repeat 21px center;
1460     height: 4rem;
1461     padding: 0 1.25rem 0 3.375rem
1462 }
1463 .viewport-vim .switch-table thead th {
1464     background-color: #fff;
1465     font-size: .875rem;
1466     font-weight: 700
1467 }
1468 .viewport-vim .switch-table thead th:last-child {
1469     text-align: left
1470 }
1471 .viewport-vim .switch-table thead th small {
1472     display: block;
1473     font-size: .75rem;
1474     font-weight: 400;
1475     margin-top: .375rem
1476 }
1477 .viewport-vim .switch-table tbody th {
1478     background-color: #ccc;
1479     color: #fff;
1480     padding: .5625rem .875rem .875rem 0
1481 }
1482 .viewport-vim .switch-table tbody td {
1483     background-color: #e5e5e5;
1484     font-size: .625rem
1485 }
1486 .viewport-vim .switch-table tbody td em {
1487     margin-right: .5rem
1488 }
1489 .viewport-vim .switch-table tbody td i {
1490     font-size: .5625rem;
1491     margin-right: .125rem
1492 }
1493 .viewport-vim .switch-table tbody td i.inactive {
1494     color: #ccc
1495 }
1496 .viewport-vim .switch-table tbody tr.selected th {
1497     background-color: #00acee
1498 }
1499 .viewport-vim .switch-table tbody tr.selected td {
1500     background-color: #fff
1501 }
1502 .viewport-vim .switch-table tbody tr.selected td:last-child {
1503     background: #fff url(./img/table-cell-bg.png) repeat-y right top
1504 }
1505 .viewport-vim .vim-legend {
1506     display: inline-flex
1507 }
1508 .viewport-vim .vim-legend div {
1509     background-color: #e5e5e5;
1510     padding: .75rem 1.5rem;
1511     margin-right: .125rem
1512 }
1513 .viewport-vim .vim-legend div:last-of-type {
1514     margin-right: 0
1515 }
1516 .viewport-vim .vim-legend ul {
1517     float: left
1518 }
1519 .viewport-vim .vim-legend ul:first-child {
1520     margin-right: 2.25rem
1521 }
1522 .viewport-vim .vim-legend ol li:first-child {
1523     align-items: center;
1524     background: url(./img/icon-host-sm.png) no-repeat left center;
1525     display: flex;
1526     height: 2.188rem;
1527     margin-bottom: -.5rem;
1528     padding-left: 1.75rem
1529 }
1530 .viewport-vim .vim-legend li {
1531     margin: .75rem 0
1532 }
1533 .viewport-vim .vim-legend li em,
1534 .viewport-vim .vim-legend li i {
1535     margin-right: .75rem
1536 }
1537 .viewport-vim .navpanel.top {
1538     background-color: #ccc;
1539     height: 30px;
1540     padding: 0;
1541     align-items: center;
1542     display: flex;
1543     justify-content: center
1544 }
1545 .viewport-vim .navpanel.top:before {
1546     border-left: 32px solid #dadada;
1547     border-top: 30px solid #ccc
1548 }
1549 .viewport-vim .navpanel.top:after {
1550     border-right: 32px solid #dadada;
1551     border-top: 30px solid #ccc
1552 }
1553 .viewport-vim .navpanel.left,
1554 .viewport-vim .navpanel.right {
1555     background-color: #f1f1f1;
1556     padding: 0;
1557     position: relative;
1558     width: 38px
1559 }
1560 .viewport-vim .navpanel.left .tilt,
1561 .viewport-vim .navpanel.right .tilt {
1562     background-color: #dadada;
1563     height: 100%;
1564     position: absolute;
1565     left: 24px;
1566     top: -2px;
1567     transform: rotate(-2deg);
1568     width: 38px
1569 }
1570 .viewport-vim .navpanel.left .tilt {
1571     left: -24px;
1572     transform: rotate(2deg)
1573 }
1574 .viewport-vnf h2 {
1575     padding-bottom: 2rem
1576 }
1577 .viewport-vnf h3 {
1578     background: #fff;
1579     font-size: .875rem;
1580     padding: 1.125rem;
1581     font-weight: 700;
1582     text-transform: uppercase
1583 }
1584 .viewport-vnf h4 {
1585     font-size: .75rem;
1586     margin-bottom: .5625rem;
1587     font-weight: 700;
1588     text-transform: uppercase
1589 }
1590 .viewport-vnf.navpanel-container {
1591     background-color: #f1f1f1
1592 }
1593 .viewport-vnf .flex-row {
1594     align-items: flex-start;
1595     position: relative;
1596     width: 100%
1597 }
1598 .viewport-vnf .flex-row .link-diagram {
1599     position: absolute;
1600     bottom: -3.813rem;
1601     left: 13.5%
1602 }
1603 .viewport-vnf .flex-row .link-diagram img {
1604     width: 80%
1605 }
1606 .viewport-vnf .mainpanel {
1607     margin: 0 0 5rem 5rem
1608 }
1609 .viewport-vnf .vnf-card {
1610     flex: 0 1 30.5%;
1611     margin-right: 2rem;
1612     background-color: #e5e5e5
1613 }
1614 .viewport-vnf .vnf-card:first-child {
1615     margin-left: 0
1616 }
1617 .viewport-vnf .vnf-card:last-child {
1618     margin-right: 0
1619 }
1620 .viewport-vnf .vnf-card table {
1621     width: 100%
1622 }
1623 .viewport-vnf .vnf-card td {
1624     border-bottom: 2px solid #f1f1f1;
1625     border-right: 2px solid #f1f1f1;
1626     padding: 1.125em 0;
1627     text-align: center;
1628     width: 50%
1629 }
1630 .viewport-vnf .vnf-card td:last-child {
1631     border-right: 0
1632 }
1633 .viewport-vnf .vnf-card td img {
1634     width: 75%
1635 }
1636 .viewport-vnf .vnf-card td small {
1637     display: block;
1638     margin-bottom: 1.5em
1639 }
1640 .viewport-vnf .vnf-card tr:first-child td {
1641     background-color: #e5e5e5
1642 }
1643 .viewport-vnf .vnf-card tr:last-child td {
1644     background-color: #dadada
1645 }
1646 .viewport-vnf .vnf-card>ul {
1647     display: flex;
1648     flex-direction: row;
1649     flex-wrap: nowrap;
1650     width: 99.8%;
1651     border-bottom: 2px solid #f1f1f1
1652 }
1653 .viewport-vnf .vnf-card>ul li {
1654     background-color: #e5e5e5;
1655     flex: 1 1 auto;
1656     margin-right: .125rem;
1657     padding: 1.5em .75em;
1658     text-align: center
1659 }
1660 .viewport-vnf .vnf-card>ul li:first-child {
1661     flex: 0 1 18%
1662 }
1663 .viewport-vnf .vnf-card>ul li:last-child {
1664     margin-right: 0
1665 }
1666 .viewport-vnf .vnf-card>div {
1667     background-color: #dadada;
1668     box-sizing: border-box;
1669     margin-top: .125rem;
1670     padding: .75rem 1.5rem 1.5rem;
1671     text-align: center;
1672     width: 99.8%
1673 }
1674 .viewport-vnf .vnf-card>div .button-action-toggle {
1675     font-size: .75rem
1676 }
1677 .viewport-vnf .vnf-card.vlb .bindings {
1678     padding: 1.125rem 1.5rem
1679 }
1680 .viewport-vnf .vnf-card.vlb .bindings em {
1681     display: block;
1682     margin: 1.063rem 0
1683 }
1684 .viewport-vnf .vnf-card.vlb .bindings img {
1685     width: .75rem
1686 }
1687 .viewport-vnf .navpanel.top,
1688 .viewport-vnf .navpanel.bottom {
1689     background-color: #f1f1f1;
1690     height: 38px;
1691     overflow: hidden;
1692     padding: 0;
1693     position: relative
1694 }
1695 .viewport-vnf .navpanel.top .tilt,
1696 .viewport-vnf .navpanel.bottom .tilt {
1697     background-color: #dadada;
1698     height: 38px;
1699     position: absolute;
1700     left: 0;
1701     top: -25px;
1702     transform: rotate(1.4deg);
1703     width: 100%
1704 }
1705 .viewport-vnf .navpanel.top:before,
1706 .viewport-vnf .navpanel.bottom:before {
1707     border: 0
1708 }
1709 .viewport-vnf .navpanel.top:after {
1710     border-right: 48px solid #ccc;
1711     border-top: 38px solid #dadada
1712 }
1713 .viewport-vnf .navpanel.bottom {
1714     transform: scaleY(-1)
1715 }
1716 .viewport-vnf .navpanel.bottom:after {
1717     border-left: 48px solid #dadada;
1718     border-top: 38px solid #ccc;
1719     transform: scaleY(-1)
1720 }
1721 .viewport-vnf .navpanel.right {
1722     background-color: #ccc;
1723     width: 48px;
1724     align-items: center;
1725     display: flex;
1726     justify-content: center
1727 }
1728 .wag-app>h1 {
1729     height: 63px;
1730     line-height: 51px;
1731     margin-left: 80px;
1732     padding-left: 118px
1733 }
1734 .wag h2 {
1735     padding-bottom: 2rem
1736 }
1737 .wag h3 {
1738     background: #fff;
1739     font-size: .875rem;
1740     padding: 1.125rem;
1741     font-weight: 700;
1742     text-transform: uppercase
1743 }
1744 .wag h4 {
1745     font-size: .75rem;
1746     margin-bottom: .5625rem;
1747     font-weight: 700;
1748     text-transform: uppercase
1749 }
1750 .wag .slider-container {
1751     width: 50%!important;
1752     margin: auto
1753 }
1754 .wag.navpanel-container {
1755     background-color: #f1f1f1
1756 }
1757 .wag .flex-row {
1758     align-items: flex-start;
1759     position: relative;
1760     width: 100%
1761 }
1762 .wag .mainpanel {
1763     margin: 0 5rem 5rem 5rem
1764 }
1765 .wag .wag-outer-container {
1766     display: flex
1767 }
1768 .wag .wag-inner-container {
1769     flex-direction: column;
1770     flex: 3 1 auto
1771 }
1772 .wag .wag-inner-inner-container {
1773     display: flex;
1774     flex: 1 1 auto;
1775     margin-bottom: 40px
1776 }
1777 .wag .wag-inner-inner-container .slider-vert-header {
1778     margin: 105px 0 0 -16px
1779 }
1780 .wag .wag-top-row tbody {
1781     height: 614px
1782 }
1783 .wag .wag-top-row-half tbody {
1784     height: 307px
1785 }
1786 .wag .wag-analytics tbody {
1787     display: flex;
1788     height: 360px
1789 }
1790 .wag .wag-analytics tr,
1791 .wag .wag-top-row tr,
1792 .wag .wag-top-row-half tr {
1793     flex: 1 1 auto
1794 }
1795 .wag .wag-analytics tr:last-child {
1796     flex: 20 1 auto
1797 }
1798 .wag .vnf-card {
1799     flex: 1 1 auto;
1800     margin-right: 2rem
1801 }
1802 .wag .vnf-card:first-child {
1803     margin-left: 0;
1804     flex: 1 1 auto
1805 }
1806 .wag .vnf-card:last-child {
1807     margin-right: 0
1808 }
1809 .wag .vnf-card table {
1810     width: 100%
1811 }
1812 .wag .vnf-card td {
1813     border-bottom: 2px solid #f1f1f1;
1814     border-right: 2px solid #f1f1f1;
1815     padding: 1.125em 0;
1816     text-align: center;
1817     width: 50%
1818 }
1819 .wag .vnf-card td:last-child {
1820     border-right: 0
1821 }
1822 .wag .vnf-card td img {
1823     width: 75%
1824 }
1825 .wag .vnf-card td small {
1826     display: block;
1827     margin-bottom: 1.5em
1828 }
1829 .wag .vnf-card tr:nth-child(even) td {
1830     background-color: #e5e5e5
1831 }
1832 .wag .vnf-card tr:nth-child(odd) td {
1833     background-color: #dadada
1834 }
1835 .wag .vnf-card tr.lighter td {
1836     background-color: #e5e5e5
1837 }
1838 .wag .vnf-card>ul {
1839     display: flex;
1840     flex-direction: row;
1841     flex-wrap: nowrap;
1842     width: 99.8%
1843 }
1844 .wag .vnf-card>ul li {
1845     background-color: #e5e5e5;
1846     flex: 1 1 auto;
1847     margin-right: .125rem;
1848     padding: 1.5em .75em;
1849     text-align: center
1850 }
1851 .wag .vnf-card>ul li:first-child {
1852     flex: 0 1 18%
1853 }
1854 .wag .vnf-card>ul li:last-child {
1855     margin-right: 0
1856 }
1857 .wag .vnf-card>div {
1858     background-color: #dadada;
1859     box-sizing: border-box;
1860     margin-top: .125rem;
1861     padding: .75rem 1.5rem 1.5rem;
1862     text-align: center;
1863     width: 99.8%
1864 }
1865 .wag .vnf-card>div .button-action-toggle {
1866     font-size: .75rem
1867 }
1868 .wag .vnf-card.vlb .bindings {
1869     padding: 1.125rem 1.5rem
1870 }
1871 .wag .vnf-card.vlb .bindings em {
1872     display: block;
1873     margin: 1.063rem 0
1874 }
1875 .wag .vnf-card.vlb .bindings img {
1876     width: .75rem
1877 }
1878 .wag .navpanel.top,
1879 .wag .navpanel.bottom {
1880     background-color: #f1f1f1;
1881     height: 38px;
1882     overflow: hidden;
1883     padding: 0;
1884     position: relative
1885 }
1886 .wag .navpanel.top .tilt,
1887 .wag .navpanel.bottom .tilt {
1888     background-color: #dadada;
1889     height: 38px;
1890     position: absolute;
1891     left: 0;
1892     top: -25px;
1893     transform: rotate(1.4deg);
1894     width: 100%
1895 }
1896 .wag .navpanel.top:before,
1897 .wag .navpanel.bottom:before {
1898     border: 0
1899 }
1900 .wag .navpanel.top:after {
1901     border-right: 48px solid #ccc;
1902     border-top: 38px solid #dadada
1903 }
1904 .wag .navpanel.bottom {
1905     transform: scaleY(-1)
1906 }
1907 .wag .navpanel.bottom:after {
1908     border-left: 48px solid #dadada;
1909     border-top: 38px solid #ccc;
1910     transform: scaleY(-1)
1911 }
1912 .wag .navpanel.right {
1913     background-color: #ccc;
1914     width: 48px;
1915     align-items: center;
1916     display: flex;
1917     justify-content: center
1918 }
1919 .wag #map {
1920     height: 295px
1921 }
1922 .wag .wag-marker {
1923     width: 20px;
1924     height: 20px;
1925     border: 1px solid #088;
1926     border-radius: 10px;
1927     background-color: #0FF;
1928     opacity: .5
1929 }
1930 .viewport-dash {
1931     position: relative
1932 }
1933 .viewport-dash .vim-link {
1934     display: block;
1935     height: 133px;
1936     position: absolute;
1937     bottom: 0;
1938     right: 0;
1939     width: 100%
1940 }
1941 .viewport-dash .vnf-link {
1942     display: block;
1943     height: 100%;
1944     position: absolute;
1945     left: 0;
1946     top: 0;
1947     width: 133px
1948 }
1949 .viewport-dash .so-link {
1950     display: block;
1951     height: 133px;
1952     position: absolute;
1953     top: 0;
1954     right: 0;
1955     width: 100%
1956 }
1957 .viewport-dash .platform-link {
1958     margin-bottom: 20px;
1959     flex: 1 100%
1960 }
1961 .viewport-dash .platform-link .button-half-border:before,
1962 .viewport-dash .platform-link .button-half-border:after {
1963     background: #f1f1f1;
1964     content: '';
1965     display: block;
1966     height: 10px;
1967     position: absolute;
1968     top: 0;
1969     width: 4px
1970 }
1971 .viewport-dash .platform-link a:link {
1972     color: #000;
1973     text-decoration: none
1974 }
1975 .viewport-dash .platform-link a:visited {
1976     color: #000;
1977     text-decoration: none
1978 }
1979 .viewport-dash .platform-link a:hover {
1980     color: #000;
1981     text-decoration: none
1982 }
1983 .viewport-dash .platform-link a:active {
1984     color: #000;
1985     text-decoration: none
1986 }
1987 .viewport-vim {
1988     position: relative
1989 }
1990 .viewport-vim .dash-link {
1991     height: 40px;
1992     position: absolute;
1993     left: 0;
1994     top: 0;
1995     width: 100%
1996 }
1997 .viewport-vnf {
1998     position: relative
1999 }
2000 .viewport-vnf .dash-link {
2001     height: 100%;
2002     position: absolute;
2003     right: 0;
2004     top: 0;
2005     width: 40px
2006 }
2007
2008 .login-cntnr {
2009     width: 100%;
2010     height: 100%;
2011     text-align: center;
2012     font-family: roboto-thin, Helvetica, Arial, sans-serif;
2013     font-size: 20px
2014 }
2015 .login-cntnr .logo {
2016     width: 154px;
2017     height: 102px;
2018     margin-left: auto;
2019     margin-right: auto;
2020     margin-top: 150px;
2021     margin-bottom: 20px;
2022     background-size: 154px 102px;
2023     background-image: url(./img/header-logo.png)
2024 }
2025 .login-cntnr .riftio {
2026     margin-bottom: 40px;
2027     font-size: 1.625rem;
2028     font-weight: 400;
2029 }
2030 .login-cntnr input {
2031     width: 525px;
2032     padding-left: 25px
2033 }
2034 .login-cntnr input,
2035 .login-cntnr .sign-in {
2036     min-width: 0;
2037     width: 550px;
2038     height: 65px;
2039     min-width: auto;
2040     margin-bottom: 40px;
2041     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
2042     font-size: 20px
2043 }
2044 .login-cntnr .sign-in {
2045     display: inline-block;
2046     // height: 45px;
2047     // padding-top: 20px;
2048     -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
2049     -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
2050     box-shadow: 4px 4px 1px 0 #d9d9d9;
2051     background-color: #333;
2052     color: #fff;
2053     text-decoration: none
2054 }
2055 .login-cntnr .create-account {
2056     font-size: 18px;
2057     color: #393939
2058 }
2059 .login-cntnr .create-account a {
2060     font-weight: 700
2061 }
2062