discovery-ui/src/main/resources/iui/microservices/css/route.css

   1 /**\r
   2  * Copyright 2016 ZTE, Inc. and others.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *     http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 body {\r
  17   color: #333;\r
  18   font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;\r
  19   padding: 0px !important;\r
  20   margin: 0px !important;\r
  21   direction: ltr;\r
  22   background-color: #fff !important; \r
  23 }\r
  24 \r
  25 a {\r
  26   \r
  27     text-decoration: none;\r
  28    cursor: pointer; \r
  29 }\r
  30 \r
  31 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\r
  32     cursor: auto;\r
  33 \r
  34     }\r
  35 .modal-footer {\r
  36     margin-top:0px; \r
  37   }\r
  38 .form-group {\r
  39     margin-bottom: 5px;\r
  40 }\r
  41 \r
  42 .modal-body {\r
  43     padding: 10px;\r
  44 }\r
  45 \r
  46 .row{\r
  47      margin-left: 0px; \r
  48   margin-right: 0px; \r
  49 }\r
  50 \r
  51 select {\r
  52   border-width: 1px;\r
  53   padding: 4px 1px;\r
  54   border-radius: 4px;\r
  55 }\r
  56 \r
  57 .navbar {\r
  58   overflow: visible;\r
  59   margin-bottom: 0px;\r
  60 \r
  61 }\r
  62 \r
  63 \r
  64 .span12{\r
  65   margin-top:10px;\r
  66 }\r
  67 \r
  68 #title {\r
  69   color: #ffffff;\r
  70   font-weight: bolder;\r
  71 }\r
  72 \r
  73 \r
  74 div[data-name="route_zone"]  {\r
  75   background-color: #fff;\r
  76   margin-bottom: 15px;\r
  77 }\r
  78 \r
  79 \r
  80 \r
  81 p[tooltip], div[tooltip], td[tooltip], span[tooltip]{\r
  82   overflow: hidden;\r
  83   text-overflow: ellipsis;\r
  84   white-space:nowrap; \r
  85 }\r
  86 \r
  87 .add-route-btn{\r
  88   background: #fff;\r
  89   color: #ccc;\r
  90   height: 115px;\r
  91   margin: 10px;\r
  92   padding-top: 22px;\r
  93   text-align: center;\r
  94   text-decoration: none;\r
  95   width: 130px;\r
  96   border:1px dashed #aaa;\r
  97   float:left;\r
  98 \r
  99 }\r
 100 \r
 101 .add-route-btn:hover{\r
 102   color:#3276b1;\r
 103   cursor: pointer;\r
 104 }\r
 105 \r
 106 \r
 107 .add-route-btn span {\r
 108   display: block;\r
 109   margin-left:5px;\r
 110   margin-right:5px;\r
 111   margin-top:5px;\r
 112   color: #444;\r
 113 }\r
 114 \r
 115 \r
 116 .quick-btn {\r
 117   background: #eee;\r
 118   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;\r
 119   color: #444;\r
 120  height: 110px;\r
 121   margin: 10px;\r
 122   padding-top: 1pc;\r
 123   text-align: center;\r
 124   text-decoration: none;\r
 125   width: 120px;\r
 126   float:left;\r
 127 \r
 128 }\r
 129 div[data-name="route_zone"]  .active{\r
 130         color:#fff;\r
 131         background-color:#444;\r
 132         cursor: pointer;\r
 133 }\r
 134 \r
 135 div[data-name="route_zone"] .sparkline .route-valid {\r
 136     color:#3276b1;\r
 137   }\r
 138 \r
 139   div[data-name="route_zone"] .sparkline .route-invalid {\r
 140     color:rgba(128, 128, 128, 0.73);\r
 141   }\r
 142 \r
 143 div[data-name="route_zone"]  .active .sparkline i{\r
 144     color:#C3DDF4;\r
 145   }\r
 146 \r
 147 \r
 148 \r
 149 .quick-btn:hover{\r
 150 \r
 151   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;\r
 152   cursor: pointer;\r
 153 }\r
 154 \r
 155 .quick-btn span {\r
 156   display: block;\r
 157   margin-left:5px;\r
 158   margin-right:5px;\r
 159   margin-top:10px;\r
 160 \r
 161 }\r
 162 \r
 163 .route-ip{\r
 164           font-size: 12px;\r
 165 }\r
 166 \r
 167 \r
 168 .progressList{\r
 169         margin-top: 15px;\r
 170         margin-left:15px;\r
 171         width:90%\r
 172 }\r
 173 \r
 174 .processContent{\r
 175   display: inline-block;margin-right:5px\r
 176 }\r
 177 \r
 178 .nav.nav-pills.nav-stacked > li.active > a, .nav.nav-pills.nav-stacked > li.active > a:hover,.nav.nav-pills.nav-stacked > li > a:hover {\r
 179   background-color: #f6f6f6;\r
 180   border-left-color: #3c8dbc;\r
 181   color: #444;\r
 182 }\r
 183 \r
 184 \r
 185 .nav.nav-pills.nav-stacked > li > a {\r
 186   border-top: 0;\r
 187   border-left: 3px solid transparent;\r
 188   -webkit-border-radius: 0;\r
 189   -moz-border-radius: 0;\r
 190   border-radius: 0;\r
 191   color: #444;\r
 192   height:46px;\r
 193 }\r
 194 .nav.nav-pills > li.active > a {\r
 195   font-weight: 600;\r
 196 }\r
 197 \r
 198 .btn-xs {\r
 199   color: #333;\r
 200   font-size: 14px;\r
 201 }\r
 202 .grey {\r
 203   background-color: #e5e5e5;\r
 204   color: #333;\r
 205 }\r
 206 .btn-xs, .btn-group-xs>.btn {\r
 207   padding: 1px 5px;\r
 208   font-size: 12px;\r
 209   line-height: 1.5;\r
 210   border-radius: 3px;\r
 211 }\r
 212 \r
 213 .control-label .required {\r
 214   color: #e02222;\r
 215   font-size: 12px;\r
 216   padding-left: 2px;\r
 217 }\r
 218 \r
 219 .nav>li>a{\r
 220   /*padding:10px 5px;*/\r
 221 }\r
 222 \r
 223 .process-btn button{\r
 224   padding:3px 8px\r
 225 }\r
 226 \r
 227 pre.prettyprint {\r
 228    color:#000;\r
 229    height: 450px;\r
 230 }\r
 231 \r
 232 pre {\r
 233   font: 14px/22px 'courier new';\r
 234   word-break: break-all;\r
 235   word-wrap: break-word;\r
 236   border: 0px;\r
 237   background-color:#fff;\r
 238   padding: 5px 5px;\r
 239 }\r
 240 \r
 241 .atv {\r
 242   color: #114B7E;\r
 243 }\r
 244 \r
 245 \r
 246 \r
 247 .stats_box {\r
 248   display: inline-block;\r
 249   list-style: none outside none;\r
 250   margin-left: 0;\r
 251   margin-top: 10px;\r
 252   padding: 0;\r
 253     /*float: left;*/\r
 254 }\r
 255 \r
 256 .stats_box .routeDiv{\r
 257   background: #eee;\r
 258   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;\r
 259   display: inline-block;\r
 260   line-height: 18px;\r
 261   margin: 0 10px 10px;\r
 262   padding: 0 8px;\r
 263   float: left;\r
 264   height: 125px;\r
 265 }\r
 266 \r
 267 .routeDiv:hover{\r
 268 \r
 269   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;\r
 270   cursor: pointer;\r
 271 }\r
 272 \r
 273 \r
 274 .sparkline {\r
 275  width: 60px;\r
 276  border-right: 1px solid #dcdcdc;\r
 277   box-shadow: 1px 0 0 0 #fff;\r
 278   float: left;\r
 279   margin-right: 9pt;\r
 280   padding: 25px 10px 0 4px;\r
 281   line-height: 70px\r
 282 }\r
 283 \r
 284 \r
 285 \r
 286 \r
 287 \r
 288 .stats_box .stat_text {\r
 289   float: left;\r
 290   font-size: 9pt;\r
 291   padding: 10px 0px 10px 0;\r
 292   text-align: left;\r
 293   width: 120px;\r
 294   position: relative;\r
 295 }\r
 296 \r
 297 .stats_box .stat_text .percent {\r
 298   color: #444;\r
 299   float: right;\r
 300   font-size: 20px;\r
 301   font-weight: 700;\r
 302   position: absolute;\r
 303   right: 0;\r
 304   top: 17px;\r
 305 }\r
 306 \r
 307 .stats_box .stat_text strong {\r
 308   display: block;\r
 309   font-size: 16px;\r
 310   margin-bottom: 10px;\r
 311   margin-top: 5px;\r
 312 \r
 313 }\r
 314 \r
 315 .stat_text  span,.stats_box span{\r
 316   display: block;\r
 317   margin-bottom:5px;\r
 318 }\r
 319 \r
 320 \r
 321 \r
 322 .stats_box span a{ \r
 323 padding: 0px 6px;\r
 324 margin-right:3px;\r
 325   }\r
 326 \r
 327 \r
 328   \r
 329   span.response_throbber {\r
 330   background-image: url('../img/throbber.gif');\r
 331   width: 128px;\r
 332   height: 16px;\r
 333   display: block;\r
 334   clear: none;\r
 335   float: left;\r
 336   margin-top: 50px;\r
 337 }\r
 338 \r
 339 div.separator div {\r
 340   text-align: center;\r
 341   line-height: 0;\r
 342 }\r
 343 \r
 344 .titlefont {\r
 345   font-size: 16px;\r
 346 }\r
 347 \r
 348 .separator-line {\r
 349   height: 1px;\r
 350   width: 100%;\r
 351   background: #ddd;\r
 352   overflow: hidden;\r
 353   margin-bottom: 15px;\r
 354   margin-top: 6px;\r
 355   opacity: 0.6;\r
 356 }\r
 357 \r
 358 \r
 359 \r
 360 .serverInput{\r
 361   display: inline;\r
 362   margin-right: 5px;\r
 363 }\r
 364 \r
 365 .apiRouteInput{\r
 366   float:left;\r
 367     margin-right: 10px\r
 368 }\r
 369   \r
 370   \r
 371 .input-group {\r
 372   position: relative;\r
 373   display: table;\r
 374   border-collapse: separate;\r
 375 }\r
 376 \r
 377  .input-group-btn-vertical {\r
 378   position: relative;\r
 379   white-space: nowrap;\r
 380   width: 10px;\r
 381   vertical-align: middle;\r
 382   display: table-cell;\r
 383 }\r
 384 \r
 385 .input-group-btn-vertical .bootstrap-touchspin-up {\r
 386   border-radius: 0;\r
 387   border-top-right-radius: 4px;\r
 388 }\r
 389 \r
 390 .input-group-btn-vertical>.btn {\r
 391   display: block;\r
 392   float: none;\r
 393   width: 100%;\r
 394   max-width: 100%;\r
 395   padding: 8px 10px;\r
 396   margin-left: -1px;\r
 397   position: relative;\r
 398 }\r
 399 \r
 400 .input-group-btn-vertical i {\r
 401   position: absolute;\r
 402   top: 3px;\r
 403   left: 5px;\r
 404   font-size: 9px;\r
 405   font-weight: 400;\r
 406 }\r
 407 \r
 408 .input-group-btn-vertical .bootstrap-touchspin-down {\r
 409   margin-top: -2px;\r
 410   border-radius: 0;\r
 411   border-bottom-right-radius: 4px;\r
 412 }\r
 413 \r
 414 \r
 415 \r
 416 .small_btn {\r
 417   padding: 0px 6px;\r
 418   margin-right: 3px;\r
 419 }\r
 420 \r
 421 .item-tip {\r
 422   position: absolute;\r
 423   color: #999999;\r
 424   top: 10px;\r
 425   left: 20px;\r
 426   transition: all linear .2s;\r
 427   background-color: #fff;\r
 428   padding: 0px 3px;\r
 429   font-size: 12px;\r
 430 }\r
 431 .item-tip-focus {top: -8px;font-size: 12px;color: #428bca;}\r
 432 \r
 433 .form-input-focus {border-color: #428bca;outline: 0;}\r
 434 \r
 435 .tip_color {\r
 436     color: #f0ad4e;\r
 437     cursor: help;\r
 438 }\r
 439 \r
 440 .item-tip-none{display: none}\r
 441 \r
 442 .tipArea{\r
 443   border-bottom: 1px solid #d4d4d4;\r
 444     width: 85%;\r
 445     text-align: center;\r
 446     margin-bottom: 20px;\r
 447     margin-left: 30px;\r
 448     font-weight: bold;\r
 449         position: relative;\r
 450 \r
 451 }\r
 452 \r
 453 .tipArea:after, .tipArea:before {\r
 454     border: 10px solid transparent;\r
 455     border-top: 10px solid #fff;\r
 456     width: 0;\r
 457     height: 0;\r
 458     right: 241px;\r
 459     top: 20px;\r
 460     content: ' ';\r
 461     position: absolute;\r
 462 }\r
 463 \r
 464 .tipArea:before {\r
 465     border-top-color: #d4d4d4;\r
 466     left: 230px;\r
 467     top: 21px;\r
 468 }\r
 469 \r
 470 \r
 471 .help-block {\r
 472     margin-top: 5px;\r
 473     margin-bottom: 5px;\r
 474   }\r
 475 \r
 476 .form-title {\r
 477     padding-left: 8px;\r
 478     padding-right: 8px;\r
 479     padding-top: 5px;\r
 480     padding-bottom: 5px;\r
 481     margin-bottom: 10px;\r
 482     margin-left:10px;\r
 483     border-left: 2px solid #5b9bd1;\r
 484     color: #1A78CA;\r
 485     font-size: 16px;\r
 486     margin-top: 10px;\r
 487 }\r
 488 \r
 489 .form-title a{\r
 490       cursor: pointer;\r
 491 }\r
 492 \r
 493 .panel-tools {\r
 494     display: inline-block;\r
 495     float: right;\r
 496     margin-top: 0;\r
 497     padding: 0;\r
 498     position: relative;\r
 499 }\r
 500 \r
 501 .panel-tools a {\r
 502     margin-left: 5px;\r
 503     color: #9d9fa2;\r
 504     cursor: pointer;\r
 505 }\r
 506 \r
 507 .panel-tools  a:hover{\r
 508   color: #34495e;\r
 509   text-decoration: none;\r
 510 }\r
 511 \r
 512 .table-responsive{\r
 513       margin-top: 15px;\r
 514 }\r
 515 \r
 516 .btn-s  {\r
 517     padding: 0px 6px;\r
 518     margin-right: 3px;\r
 519 }\r
 520 \r
 521 \r
 522 table.dataTable thead .sorting,\r
 523 table.dataTable thead .sorting_asc,\r
 524 table.dataTable thead .sorting_desc,\r
 525 table.dataTable thead .sorting_asc_disabled,\r
 526 table.dataTable thead .sorting_desc_disabled {\r
 527     background: 0 0;\r
 528 }\r
 529 \r
 530 table.dataTable thead .sorting_asc:after {\r
 531     content: "\f0de";\r
 532     float: right;\r
 533     font-family: fontawesome;\r
 534     color:#357ebd;\r
 535 }\r
 536 \r
 537 table.dataTable thead .sorting_desc:after {\r
 538     content: "\f0dd";\r
 539     float: right;\r
 540     font-family: fontawesome;\r
 541     color:#357ebd;\r
 542 }\r
 543 \r
 544 table.dataTable thead .sorting:after {\r
 545     content: "\f0dc";\r
 546     float: right;\r
 547     font-family: fontawesome;\r
 548     color: rgba(50,50,50,.5);\r
 549 }\r
 550 \r
 551 \r
 552 .hostTableDiv{\r
 553     height: 100px;\r
 554     overflow: auto;\r
 555   \r
 556   }\r
 557 \r
 558 .hostTable{\r
 559  font-size: 12px;\r
 560  margin-bottom: 0px;\r
 561 }\r
 562 \r
 563 .detailTable{\r
 564  font-size: 12px;\r
 565  margin-bottom: 0px;\r
 566 }\r
 567 \r
 568 .hostTable>thead>tr>th, .hostTable>tbody>tr>th, .hostTable>tfoot>tr>th, .hostTable>thead>tr>td, .hostTable>tbody>tr>td, .hostTable>tfoot>tr>td {\r
 569     padding: 6px;\r
 570    \r
 571 }\r
 572 \r
 573 .searchDiv{\r
 574    padding-top: 25px;\r
 575     padding-bottom: 15px;   \r
 576      margin: 0 auto;\r
 577     width: 700px;\r
 578 }\r
 579 \r
 580 \r
 581 .searchTitle {\r
 582     float: left;\r
 583 }\r
 584 \r
 585 .searchTitle i{\r
 586     font-size: 28px;\r
 587     color: #A7A6A6;\r
 588     margin-top:2px;\r
 589 }\r
 590 \r
 591 .searchInput{\r
 592   float:left;width:450px;margin-right:10px;margin-left:10px\r
 593 }\r
 594 \r
 595 \r
 596 td.details-control {\r
 597     background: url('../img/details_open.png') no-repeat center center;\r
 598     cursor: pointer;\r
 599 }\r
 600 tr.shown td.details-control {\r
 601     background: url('../img/details_close.png') no-repeat center center;\r
 602 }\r
 603 \r
 604 .table-bordered > thead > tr > th{\r
 605     border-bottom-width: 0;\r
 606 }\r
 607 \r
 608 .label, label {\r
 609     font-weight: 400;\r
 610 }\r
 611 \r
 612 .submBtn {\r
 613     text-align: center;\r
 614 }\r
 615 \r
 616 .roleConfirm {\r
 617     margin-top: 25px;\r
 618 }\r
 619 \r
 620 \r
 621 /*button*/\r
 622 \r
 623 .btn {\r
 624 \r
 625     letter-spacing: 1px;\r
 626 }\r
 627 \r
 628 .btnGroup{\r
 629   margin-bottom: 10px;\r
 630 }\r
 631 \r
 632 .btnGroup .btn {\r
 633     margin-right: 15px;\r
 634 }\r
 635 \r
 636 .pagination-panel .btn {\r
 637     min-width: 4px;\r
 638 }\r
 639 \r
 640 .btn.dropdown-toggle,\r
 641 .btn-group .btn.dropdown-toggle,\r
 642 .btn:hover,\r
 643 .btn:disabled,\r
 644 .btn[disabled],\r
 645 .btn:focus,\r
 646 .btn:active,\r
 647 .btn.active {\r
 648     outline: none !important;\r
 649     background-image: none !important;\r
 650     filter: none;\r
 651     -webkit-box-shadow: none;\r
 652     -moz-box-shadow: none;\r
 653     box-shadow: none;\r
 654     text-shadow: none;\r
 655 }\r
 656 .btn-xs:hover{\r
 657 text-decoration:none ;\r
 658 }\r
 659 \r
 660 .grey {\r
 661     background-color: #e5e5e5;\r
 662     color: #333;\r
 663         width: 80px;\r
 664 }\r
 665 \r
 666 .grey:hover {\r
 667     background-color: #d8d8d8;\r
 668     color: #333;\r
 669 }\r
 670 .blue1 {\r
 671     background-color: #5b9bd1;\r
 672     color: #fff;\r
 673         width: 80px;\r
 674 }\r
 675 \r
 676 .blue1:hover {\r
 677     background-color: #487ca9;\r
 678     color: #fff;\r
 679 }\r
 680 /*radius*/\r
 681 \r
 682 .radius_l {\r
 683     border-radius: 20px;\r
 684 }\r
 685 \r
 686 .radius_m {\r
 687     border-radius: 8px;\r
 688 }\r
 689 \r
 690 .radius_s {\r
 691     border-radius: 3px;\r
 692 }\r
 693 \r
 694 table.table-bordered thead .subHead th{\r
 695   border-top-width:1px;\r
 696   border-right-width:1px;\r
 697 \r
 698 }\r
 699 \r
 700   .hostTable th{\r
 701     text-align: center;\r
 702   }  \r
 703 \r
 704   .nodebtn{\r
 705     width:30px;padding: 0px 6px;\r
 706   }\r
 707 \r
 708   .modal-dialog h3 {\r
 709     font-size: 18px;\r
 710 \r
 711     margin-top: 10px;\r
 712     margin-bottom: 0px;\r
 713 }\r
 714 \r
 715 .btn .caret {\r
 716     margin-right: 5px;\r
 717 }\r
 718 \r
 719 .white {\r
 720     background-color: #fff;\r
 721     border: 1px solid #ddd;\r
 722     color: #333;\r
 723 }\r
 724 \r
 725 .white:hover{\r
 726     color: #333;\r
 727     background-color: #ebebeb;\r
 728     border-color: #adadad;\r
 729 }\r
 730 \r
 731 .blueactive {\r
 732     color: #ffffff !important;\r
 733     background-color: #5b9bd1;\r
 734 }\r
 735 \r
 736 .blueactive:hover {\r
 737     color: #ffffff !important;\r
 738     background-color: #4d85b4 !important;\r
 739 }\r
 740 .borderBottom {\r
 741     border-bottom: 4px solid !important;\r
 742     border-top: 0px solid !important;\r
 743 }\r
 744 \r
 745 .spinner {\r
 746     width: 120px;\r
 747     margin-top: 5px;\r
 748 }\r
 749 \r
 750 .spinner .form-control {\r
 751     height: 26px !important;\r
 752 }\r
 753 \r
 754 \r
 755 .input-group-btn-vertical {\r
 756     position: relative;\r
 757     white-space: nowrap;\r
 758     width: 1%;\r
 759     vertical-align: middle;\r
 760     display: table-cell;\r
 761 }\r
 762 \r
 763 .input-group-btn-vertical > .btn {\r
 764     display: block;\r
 765     float: none;\r
 766     width: 100%;\r
 767     max-width: 100%;\r
 768     padding: 6px;\r
 769     margin-left: -1px;\r
 770     position: relative;\r
 771     border-radius: 0;\r
 772 }\r
 773 \r
 774 .input-group-btn-vertical > .btn {\r
 775     min-width: 20px;\r
 776 }\r
 777 \r
 778 .input-group-btn-vertical > .btn:first-child {\r
 779     border-top-right-radius: 4px;\r
 780 }\r
 781 \r
 782 .input-group-btn-vertical > .btn:last-child {\r
 783     margin-top: -2px;\r
 784     border-bottom-right-radius: 4px;\r
 785 }\r
 786 \r
 787 .input-group-btn-vertical i {\r
 788     position: absolute;\r
 789     top: -2px;\r
 790     left: 5px;\r
 791 }\r
 792 \r
 793 input[type="checkbox"] {\r
 794     -webkit-appearance: none;\r
 795     background: #fff url(../img/checkbox-init.png);\r
 796     height: 18px;\r
 797     vertical-align: middle;\r
 798     width: 18px;\r
 799   margin-bottom:5px;\r
 800   margin-right:5px;\r
 801 }\r
 802 \r
 803 input[type="checkbox"]:checked {\r
 804     -webkit-appearance: none;\r
 805     background: #fff url(../img/checkbox-checked.png);\r
 806     height: 18px;\r
 807     vertical-align: middle;\r
 808     width: 18px;\r
 809 }\r
 810 \r
 811 input[type="checkbox"]:focus,\r
 812 input[type="checkbox"]:hover {\r
 813     outline: none;\r
 814 }\r
 815 \r
 816 .note.note-sysOut {\r
 817     background-color: #f5f8fd;\r
 818     border-color: #8bb4e7;\r
 819     color: #010407;\r
 820 }\r
 821 .note {\r
 822     margin: 0 0 20px;\r
 823     padding: 15px 30px 15px 15px;\r
 824     border-left: 5px solid #eee;\r
 825     border-radius: 0 4px 4px 0;\r
 826 }\r
 827 \r
 828 .note.note-sysIn {\r
 829    background-color: #F1F9EE;\r
 830     border-color: #5cb85c;\r
 831     color: #000;\r
 832 }\r
 833 \r
 834 h4.block {\r
 835     padding-top: 5px;\r
 836     padding-bottom: 5px;\r
 837     font-size:16px;\r
 838 \r
 839 }\r
 840 \r
 841 .note-sysOut .block{\r
 842      color: #327ad5; \r
 843 }\r
 844 \r
 845 .note-sysIn .block{\r
 846      color: #589258; \r
 847 }\r
 848 \r
 849 .note br{\r
 850   line-height:1.8;\r
 851 }\r
 852 \r
 853 .note  span{\r
 854     border-radius: 0!important;\r
 855     font-size: 13px!important;\r
 856     font-weight: 300;\r
 857     height: 18px;\r
 858     color: #fff;\r
 859     padding: 2px 6px;\r
 860 \r
 861     text-shadow: none!important;\r
 862     text-align: center;\r
 863     vertical-align: middle;\r
 864     line-height: 1;\r
 865     white-space: nowrap;\r
 866     display: inline-block;\r
 867     min-width: 10px;\r
 868 }\r
 869 \r
 870 .note-sysOut span{\r
 871   background-color: #639EE8;\r
 872      \r
 873 }\r
 874 \r
 875 .note-sysIn span{\r
 876   background-color: #5cb85c;\r
 877      \r
 878 }\r
 879 \r
 880 .label-visualRange{\r
 881     border-radius: 0!important;\r
 882     font-size: 13px!important;\r
 883     font-weight: 300;\r
 884     height: 20px;\r
 885     color: #fff;\r
 886     padding: 3px 6px;\r
 887     margin-left: 15px; \r
 888     text-shadow: none!important;\r
 889     text-align: center;\r
 890     vertical-align: middle;\r
 891     line-height: 1;\r
 892     white-space: nowrap;\r
 893     display: inline-block;\r
 894     min-width: 10px;\r
 895 }\r
 896 .label-sysOut{\r
 897       background-color: #639EE8;\r
 898 }\r
 899 \r
 900 .label-sysIn{\r
 901       background-color: #5cb85c;\r
 902 }\r