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