Divide the MSB source codes into two repos
[msb/apigateway.git] / apiroute / apiroute-service / src / main / resources / iui-route / css / route.css
-/**
- * Copyright 2016 2015-2016 ZTE, Inc. and others. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- *     Author: Zhaoxing Meng
- *     email: meng.zhaoxing1@zte.com.cn
- */
-body {
-  color: #333;
-  font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;
-  padding: 0px !important;
-  margin: 0px !important;
-  direction: ltr;
-  background-color: #ffffff !important; 
-}
-
-/*.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-    cursor: auto;
-
-    }*/
-.modal-footer {
-    margin-top:0px; 
-  }
-.form-group {
-    margin-bottom: 5px;
-}
-
-.modal-body {
-    padding: 10px;
-}
-
-.row{
-     margin-left: 0px; 
-  margin-right: 0px; 
-}
-
-select {
-  border-width: 1px;
-  padding: 4px 1px;
-  border-radius: 4px;
-}
-
-.navbar {
-  overflow: visible;
-  margin-bottom: 0px;
-
-}
-
-#top-bar, #top-bar small, #top-bar a {
-  text-shadow: 0px -1px 0px #182127;
-  color: #ffffff;
-}
-
-.span12{
-  margin-top:5px;
-}
-
-#title {
-  color: #ffffff;
-  font-weight: bolder;
-}
-
-#top-bar {
-  background-color: #363F45;
-  background-image: -moz-linear-gradient(top, #545d63, #182127);
-  background-image: -ms-linear-gradient(top, #545d63, #182127);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#545d63), to(#182127));
-  background-image: -webkit-linear-gradient(top, #545d63, #182127);
-  background-image: -o-linear-gradient(top, #545d63, #182127);
-  background-image: linear-gradient(top, #545d63, #182127);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#545d63', endColorstr = '#182127', GradientType = 0);
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  height: 55px;
-}
-
-.navbar-inner {
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: #2c2c2c;
-  background-image: -moz-linear-gradient(top, #333333, #222222);
-  background-image: -ms-linear-gradient(top, #333333, #222222);
-  background-image: -o-linear-gradient(top, #333333, #222222);
-  background-image: linear-gradient(top, #333333, #222222);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-}
-
-
-
-.container-fluid {
-  background-color: #fff;
-}
-
-div[data-name="route_zone"]  {
-  background-color: #fff;
-  margin-bottom: 15px;
-}
-
-
-
-p[tooltip], div[tooltip], td[tooltip], span[tooltip]{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space:nowrap; 
-}
-
-.add-route-btn{
-  background: #fff;
-  color: #ccc;
-  height: 115px;
-  margin: 10px;
-  padding-top: 22px;
-  text-align: center;
-  text-decoration: none;
-  width: 130px;
-  border:1px dashed #aaa;
-  float:left;
-
-}
-
-.add-route-btn:hover{
-  color:#3276b1;
-  cursor: pointer;
-}
-
-
-.add-route-btn span {
-  display: block;
-  margin-left:5px;
-  margin-right:5px;
-  margin-top:5px;
-  color: #444;
-}
-
-
-.quick-btn {
-  background: #eee;
-  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;
-  color: #444;
- height: 110px;
-  margin: 10px;
-  padding-top: 1pc;
-  text-align: center;
-  text-decoration: none;
-  width: 120px;
-  float:left;
-
-}
-div[data-name="route_zone"]  .active{
-       color:#fff;
-       background-color:#444;
-       cursor: pointer;
-}
-
-div[data-name="route_zone"] .sparkline .route-valid {
-    color: #62AAF5;
-  }
-
-  div[data-name="route_zone"] .sparkline .route-invalid {
-    color:rgba(128, 128, 128, 0.73);
-  }
-
-div[data-name="route_zone"]  .active .sparkline i{
-    color:#C3DDF4;
-  }
-
-
-
-.quick-btn:hover{
-
-  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;
-  cursor: pointer;
-}
-
-.quick-btn span {
-  display: block;
-  margin-left:5px;
-  margin-right:5px;
-  margin-top:10px;
-
-}
-
-.route-ip{
-         font-size: 12px;
-}
-
-
-.progressList{
-       margin-top: 15px;
-       margin-left:15px;
-       width:90%
-}
-
-.processContent{
-  display: inline-block;margin-right:5px
-}
-
-.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 {
-  background-color: #f6f6f6;
-  border-left-color: #3c8dbc;
-  color: #444;
-}
-
-
-.nav.nav-pills.nav-stacked > li > a {
-  border-top: 0;
-  border-left: 3px solid transparent;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  color: #444;
-  height:46px;
-}
-.nav.nav-pills > li.active > a {
-  font-weight: 600;
-}
-
-.btn-xs {
-  color: #333;
-  font-size: 14px;
-}
-.grey {
-  background-color: #e5e5e5;
-  color: #333;
-}
-.btn-xs, .btn-group-xs>.btn {
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-
-.control-label .required {
-  color: #e02222;
-  font-size: 12px;
-  padding-left: 2px;
-}
-
-.nav>li>a{
-  /*padding:10px 5px;*/
-}
-
-.process-btn button{
-  padding:3px 8px
-}
-
-pre.prettyprint {
-   color:#000;
-   height: 450px;
-}
-
-pre {
-  font: 14px/22px 'courier new';
-  word-break: break-all;
-  word-wrap: break-word;
-  border: 0px;
-  background-color:#fff;
-  padding: 5px 5px;
-}
-
-.atv {
-  color: #114B7E;
-}
-
-
-
-.stats_box {
-  display: inline-block;
-  list-style: none outside none;
-  margin-left: 0;
-  margin-top: 10px;
-  padding: 0;
-    /*float: left;*/
-}
-
-.stats_box .routeDiv{
-  background: #F1F3FA;
-  /* box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc; */
-  display: inline-block;
-  line-height: 18px;
-  margin: 0 10px 10px;
-  padding: 0 8px;
-  float: left;
-  height: 125px;
-  border: 1px solid #E0E0E0;
-  /* border-radius: 10px; */
-}
-
-.routeDiv:hover{
-
- border:1px solid #cfcfcf;
-  cursor: pointer;
-  box-shadow:-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.1);
-    box-shadow:0 5px 20px rgba(0,0,0,0.1);   
-}
-
-
-.sparkline {
- width: 60px;
- border-right: 1px solid #dcdcdc;
-  box-shadow: 1px 0 0 0 #fff;
-  float: left;
-  margin-right: 9pt;
-  padding: 25px 10px 0 4px;
-  line-height: 70px
-}
-
-.table-bordered > thead > tr > th{
-    border-bottom-width: 0;
-}
-
-
-
-.stats_box .stat_text {
-  float: left;
-  font-size: 9pt;
-  padding: 10px 0px 10px 0;
-  text-align: left;
-  width: 120px;
-  position: relative;
-}
-
-.stats_box .stat_text .percent {
-  color: #444;
-  float: right;
-  font-size: 20px;
-  font-weight: 700;
-  position: absolute;
-  right: 0;
-  top: 17px;
-}
-
-.stats_box .stat_text strong {
-  display: block;
-  font-size: 16px
-;  margin-bottom: 10px;
-  margin-top: 5px;
-
-}
-
-.stat_text b{
-  font-weight: 100;
-}
-
-.stat_text  span,.stats_box span{
-  display: block;
-  margin-bottom:5px;
-}
-
-
-
-.stats_box span a{ 
-padding: 0px 6px;
-margin-right:3px;
-  }
-
-
-  
-  span.response_throbber {
-  background-image: url('../img/throbber.gif');
-  width: 128px;
-  height: 16px;
-  display: block;
-  clear: none;
-  float: left;
-  margin-top: 50px;
-}
-
-div.separator div {
-  text-align: center;
-  line-height: 0;
-}
-
-.titlefont {
-  font-size: 16px;
-}
-
-.separator-line {
-  height: 1px;
-  width: 100%;
-  background: #ddd;
-  overflow: hidden;
-  margin-bottom: 15px;
-  margin-top: 6px;
-  opacity: 0.6;
-}
-
-
-
-.serverInput{
-  display: inline;
-  margin-right: 5px;
-}
-
-.apiRouteInput{
-  float:left;
-    margin-right: 10px
-}
-  
-  
-.input-group {
-  position: relative;
-  display: table;
-  border-collapse: separate;
-}
-
- .input-group-btn-vertical {
-  position: relative;
-  white-space: nowrap;
-  width: 10px;
-  vertical-align: middle;
-  display: table-cell;
-}
-
-.input-group-btn-vertical .bootstrap-touchspin-up {
-  border-radius: 0;
-  border-top-right-radius: 4px;
-}
-
-.input-group-btn-vertical>.btn {
-  display: block;
-  float: none;
-  width: 100%;
-  max-width: 100%;
-  padding: 8px 10px;
-  margin-left: -1px;
-  position: relative;
-}
-
-.input-group-btn-vertical i {
-  position: absolute;
-  top: 3px;
-  left: 5px;
-  font-size: 9px;
-  font-weight: 400;
-}
-
-.input-group-btn-vertical .bootstrap-touchspin-down {
-  margin-top: -2px;
-  border-radius: 0;
-  border-bottom-right-radius: 4px;
-}
-
-
-
-.small_btn {
-  padding: 0px 6px;
-  margin-right: 3px;
-}
-
-.item-tip {
-  position: absolute;
-  color: #999999;
-  top: 10px;
-  left: 20px;
-  transition: all linear .2s;
-  background-color: #fff;
-  padding: 0px 3px;
-  font-size: 12px;
-}
-.item-tip-focus {top: -8px;font-size: 12px;color: #428bca;}
-
-.form-input-focus {border-color: #428bca;outline: 0;}
-
-.tip_color {
-    color: #f0ad4e;
-    cursor: help;
-}
-
-.item-tip-none{display: none}
-
-.tipArea{
-  border-bottom: 1px solid #d4d4d4;
-    width: 85%;
-    text-align: center;
-    margin-bottom: 20px;
-    margin-left: 30px;
-    font-weight: bold;
-        position: relative;
-
-}
-
-.tipArea:after, .tipArea:before {
-    border: 10px solid transparent;
-    border-top: 10px solid #fff;
-    width: 0;
-    height: 0;
-    right: 241px;
-    top: 20px;
-    content: ' ';
-    position: absolute;
-}
-
-.tipArea:before {
-    border-top-color: #d4d4d4;
-    left: 230px;
-    top: 21px;
-}
-
-
-.help-block {
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
-
-.form-title {
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-bottom: 10px;
-    margin-left:10px;
-    border-left: 2px solid #5b9bd1;
-    color: #1A78CA;
-    font-size: 16px;
-}
-
-.form-title a{
-      cursor: pointer;
-}
-
-.panel-tools {
-    display: inline-block;
-    float: right;
-    margin-top: 0;
-    padding: 0;
-    position: relative;
-}
-
-.panel-tools a {
-    margin-left: 5px;
-    color: #9d9fa2;
-    cursor: pointer;
-}
-
-.panel-tools  a:hover{
-  color: #34495e;
-  text-decoration: none;
-}
-
-.table-responsive{
-      margin-top: 15px;
-}
-
-.btn-s  {
-    padding: 0px 6px;
-    margin-right: 3px;
-}
-
-
-table.dataTable thead .sorting,
-table.dataTable thead .sorting_asc,
-table.dataTable thead .sorting_desc,
-table.dataTable thead .sorting_asc_disabled,
-table.dataTable thead .sorting_desc_disabled {
-    background: 0 0;
-}
-
-table.dataTable thead .sorting_asc:after {
-    content: "\f0de";
-    float: right;
-    font-family: fontawesome;
-    color:#357ebd;
-}
-
-table.dataTable thead .sorting_desc:after {
-    content: "\f0dd";
-    float: right;
-    font-family: fontawesome;
-    color:#357ebd;
-}
-
-table.dataTable thead .sorting:after {
-    content: "\f0dc";
-    float: right;
-    font-family: fontawesome;
-    color: rgba(50,50,50,.5);
-}
-
-
-.hostTableDiv{
-    height: 100px;
-    overflow: auto;
-  
-  }
-
-.hostTable{
- font-size: 12px;
- margin-bottom: 0px;
-}
-
-.hostTable>thead>tr>th, .hostTable>tbody>tr>th, .hostTable>tfoot>tr>th, .hostTable>thead>tr>td, .hostTable>tbody>tr>td, .hostTable>tfoot>tr>td {
-    padding: 6px;
-   
-}
-
-
-td.details-control {
-    background: url('../img/details_open.png') no-repeat center center;
-    cursor: pointer;
-}
-tr.shown td.details-control {
-    background: url('../img/details_close.png') no-repeat center center;
-}
-
-
-input[type="checkbox"] {
-    -webkit-appearance: none;
-    background: #fff url(../img/checkbox-init.png);
-    height: 18px;
-    vertical-align: middle;
-    width: 18px;
-  margin-bottom:5px;
-  margin-right:5px;
-}
-
-input[type="checkbox"]:checked {
-    -webkit-appearance: none;
-    background: #fff url(../img/checkbox-checked.png);
-    height: 18px;
-    vertical-align: middle;
-    width: 18px;
-}
-
-input[type="checkbox"]:focus,
-input[type="checkbox"]:hover {
-    outline: none;
+/*\r
+ * Copyright (C) 2016 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+  color: #333;\r
+  font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;\r
+  padding: 0px !important;\r
+  margin: 0px !important;\r
+  direction: ltr;\r
+  background-color: #ffffff !important; \r
+}\r
+\r
+/*.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\r
+    cursor: auto;\r
+\r
+    }*/\r
+.modal-footer {\r
+    margin-top:0px; \r
+  }\r
+.form-group {\r
+    margin-bottom: 5px;\r
+}\r
+\r
+.modal-body {\r
+    padding: 10px;\r
+}\r
+\r
+.row{\r
+     margin-left: 0px; \r
+  margin-right: 0px; \r
+}\r
+\r
+select {\r
+  border-width: 1px;\r
+  padding: 4px 1px;\r
+  border-radius: 4px;\r
+}\r
+\r
+.navbar {\r
+  overflow: visible;\r
+  margin-bottom: 0px;\r
+\r
+}\r
+\r
+\r
+\r
+.span12{\r
+  margin-top:5px;\r
+}\r
+\r
+#title {\r
+  color: #ffffff;\r
+  font-weight: bolder;\r
+}\r
+\r
+\r
+\r
+\r
+\r
+\r
+div[data-name="route_zone"]  {\r
+  background-color: #fff;\r
+  margin-bottom: 15px;\r
+}\r
+\r
+\r
+\r
+p[tooltip], div[tooltip], td[tooltip], span[tooltip]{\r
+  overflow: hidden;\r
+  text-overflow: ellipsis;\r
+  white-space:nowrap; \r
+}\r
+\r
+.add-route-btn{\r
+  background: #fff;\r
+  color: #ccc;\r
+  height: 115px;\r
+  margin: 10px;\r
+  padding-top: 22px;\r
+  text-align: center;\r
+  text-decoration: none;\r
+  width: 130px;\r
+  border:1px dashed #aaa;\r
+  float:left;\r
+\r
+}\r
+\r
+.add-route-btn:hover{\r
+  color:#3276b1;\r
+  cursor: pointer;\r
+}\r
+\r
+\r
+.add-route-btn span {\r
+  display: block;\r
+  margin-left:5px;\r
+  margin-right:5px;\r
+  margin-top:5px;\r
+  color: #444;\r
+}\r
+\r
+\r
+.quick-btn {\r
+  background: #eee;\r
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;\r
+  color: #444;\r
+ height: 110px;\r
+  margin: 10px;\r
+  padding-top: 1pc;\r
+  text-align: center;\r
+  text-decoration: none;\r
+  width: 120px;\r
+  float:left;\r
+\r
+}\r
+div[data-name="route_zone"]  .active{\r
+       color:#fff;\r
+       background-color:#444;\r
+       cursor: pointer;\r
+}\r
+\r
+div[data-name="route_zone"] .sparkline .route-valid {\r
+    color: #62AAF5;\r
+  }\r
+\r
+  div[data-name="route_zone"] .sparkline .route-invalid {\r
+    color:rgba(128, 128, 128, 0.73);\r
+  }\r
+\r
+div[data-name="route_zone"]  .active .sparkline i{\r
+    color:#C3DDF4;\r
+  }\r
+\r
+\r
+\r
+.quick-btn:hover{\r
+\r
+  box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;\r
+  cursor: pointer;\r
+}\r
+\r
+.quick-btn span {\r
+  display: block;\r
+  margin-left:5px;\r
+  margin-right:5px;\r
+  margin-top:10px;\r
+\r
+}\r
+\r
+.route-ip{\r
+         font-size: 12px;\r
+}\r
+\r
+\r
+.progressList{\r
+       margin-top: 15px;\r
+       margin-left:15px;\r
+       width:90%\r
+}\r
+\r
+.processContent{\r
+  display: inline-block;margin-right:5px\r
+}\r
+\r
+.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
+  background-color: #f6f6f6;\r
+  border-left-color: #3c8dbc;\r
+  color: #444;\r
+}\r
+\r
+\r
+.nav.nav-pills.nav-stacked > li > a {\r
+  border-top: 0;\r
+  border-left: 3px solid transparent;\r
+  -webkit-border-radius: 0;\r
+  -moz-border-radius: 0;\r
+  border-radius: 0;\r
+  color: #444;\r
+  height:46px;\r
+}\r
+.nav.nav-pills > li.active > a {\r
+  font-weight: 600;\r
+}\r
+\r
+.btn-xs {\r
+  color: #333;\r
+  font-size: 14px;\r
+}\r
+.grey {\r
+  background-color: #e5e5e5;\r
+  color: #333;\r
+}\r
+.btn-xs, .btn-group-xs>.btn {\r
+  padding: 1px 5px;\r
+  font-size: 12px;\r
+  line-height: 1.5;\r
+  border-radius: 3px;\r
+}\r
+\r
+.control-label .required {\r
+  color: #e02222;\r
+  font-size: 12px;\r
+  padding-left: 2px;\r
+}\r
+\r
+.nav>li>a{\r
+  /*padding:10px 5px;*/\r
+}\r
+\r
+.process-btn button{\r
+  padding:3px 8px\r
+}\r
+\r
+pre.prettyprint {\r
+   color:#000;\r
+   height: 450px;\r
+}\r
+\r
+pre {\r
+  font: 14px/22px 'courier new';\r
+  word-break: break-all;\r
+  word-wrap: break-word;\r
+  border: 0px;\r
+  background-color:#fff;\r
+  padding: 5px 5px;\r
+}\r
+\r
+.atv {\r
+  color: #114B7E;\r
+}\r
+\r
+\r
+\r
+.stats_box {\r
+  display: inline-block;\r
+  list-style: none outside none;\r
+  margin-left: 0;\r
+  margin-top: 10px;\r
+  padding: 0;\r
+    /*float: left;*/\r
+}\r
+\r
+.stats_box .routeDiv{\r
+  background: #F1F3FA;\r
+  /* box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc; */\r
+  display: inline-block;\r
+  line-height: 18px;\r
+  margin: 0 10px 10px;\r
+  padding: 0 8px;\r
+  float: left;\r
+  height: 125px;\r
+  border: 1px solid #E0E0E0;\r
+  /* border-radius: 10px; */\r
+}\r
+\r
+.routeDiv:hover{\r
+\r
+ border:1px solid #cfcfcf;\r
+  cursor: pointer;\r
+  box-shadow:-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.1);\r
+    box-shadow:0 5px 20px rgba(0,0,0,0.1);   \r
+}\r
+\r
+\r
+.sparkline {\r
+ width: 60px;\r
+ border-right: 1px solid #dcdcdc;\r
+  box-shadow: 1px 0 0 0 #fff;\r
+  float: left;\r
+  margin-right: 9pt;\r
+  padding: 20px 10px 0 4px;\r
+  line-height: 70px\r
+}\r
+\r
+.table-bordered > thead > tr > th{\r
+    border-bottom-width: 0;\r
+}\r
+\r
+\r
+\r
+.stats_box .stat_text {\r
+  float: left;\r
+  font-size: 9pt;\r
+  padding: 10px 0px 10px 0;\r
+  text-align: left;\r
+  width: 120px;\r
+  position: relative;\r
+}\r
+\r
+.stats_box .stat_text .percent {\r
+  color: #444;\r
+  float: right;\r
+  font-size: 20px;\r
+  font-weight: 700;\r
+  position: absolute;\r
+  right: 0;\r
+  top: 17px;\r
+}\r
+\r
+.stats_box .stat_text strong {\r
+  display: block;\r
+  font-size: 16px\r
+;  margin-bottom: 10px;\r
+  margin-top: 5px;\r
+\r
+}\r
+\r
+.stat_text b{\r
+  font-weight: 100;\r
+}\r
+\r
+.stat_text  span,.stats_box span{\r
+  display: block;\r
+}\r
+\r
+\r
+\r
+.stats_box span a{ \r
+padding: 0px 6px;\r
+margin-right:3px;\r
+  }\r
+\r
+\r
+  \r
+  span.response_throbber {\r
+  background-image: url('../img/throbber.gif');\r
+  width: 128px;\r
+  height: 16px;\r
+  display: block;\r
+  clear: none;\r
+  float: left;\r
+  margin-top: 50px;\r
+}\r
+\r
+div.separator div {\r
+  text-align: center;\r
+  line-height: 0;\r
+}\r
+\r
+.titlefont {\r
+  font-size: 16px;\r
+}\r
+\r
+.separator-line {\r
+  height: 1px;\r
+  width: 100%;\r
+  background: #ddd;\r
+  overflow: hidden;\r
+  margin-bottom: 15px;\r
+  margin-top: 6px;\r
+  opacity: 0.6;\r
+}\r
+\r
+\r
+\r
+.serverInput{\r
+  display: inline;\r
+  margin-right: 5px;\r
+}\r
+\r
+.apiRouteInput{\r
+  float:left;\r
+    margin-right: 10px\r
+}\r
+  \r
+  \r
+.input-group {\r
+  position: relative;\r
+  display: table;\r
+  border-collapse: separate;\r
+}\r
+\r
+ .input-group-btn-vertical {\r
+  position: relative;\r
+  white-space: nowrap;\r
+  width: 10px;\r
+  vertical-align: middle;\r
+  display: table-cell;\r
+}\r
+\r
+.input-group-btn-vertical .bootstrap-touchspin-up {\r
+  border-radius: 0;\r
+  border-top-right-radius: 4px;\r
+}\r
+\r
+.input-group-btn-vertical>.btn {\r
+  display: block;\r
+  float: none;\r
+  width: 100%;\r
+  max-width: 100%;\r
+  padding: 8px 10px;\r
+  margin-left: -1px;\r
+  position: relative;\r
+}\r
+\r
+.input-group-btn-vertical i {\r
+  position: absolute;\r
+  top: 3px;\r
+  left: 5px;\r
+  font-size: 9px;\r
+  font-weight: 400;\r
+}\r
+\r
+.input-group-btn-vertical .bootstrap-touchspin-down {\r
+  margin-top: -2px;\r
+  border-radius: 0;\r
+  border-bottom-right-radius: 4px;\r
+}\r
+\r
+\r
+\r
+.small_btn {\r
+  padding: 0px 6px;\r
+  margin-right: 3px;\r
+}\r
+\r
+.item-tip {\r
+  position: absolute;\r
+  color: #999999;\r
+  top: 10px;\r
+  left: 20px;\r
+  transition: all linear .2s;\r
+  background-color: #fff;\r
+  padding: 0px 3px;\r
+  font-size: 12px;\r
+}\r
+.item-tip-focus {top: -8px;font-size: 12px;color: #428bca;}\r
+\r
+.form-input-focus {border-color: #428bca;outline: 0;}\r
+\r
+.tip_color {\r
+    color: #f0ad4e;\r
+    cursor: help;\r
+}\r
+\r
+.item-tip-none{display: none}\r
+\r
+.tipArea{\r
+  border-bottom: 1px solid #d4d4d4;\r
+    width: 85%;\r
+    text-align: center;\r
+    margin-bottom: 20px;\r
+    margin-left: 30px;\r
+    font-weight: bold;\r
+        position: relative;\r
+\r
+}\r
+\r
+.tipArea:after, .tipArea:before {\r
+    border: 10px solid transparent;\r
+    border-top: 10px solid #fff;\r
+    width: 0;\r
+    height: 0;\r
+    right: 241px;\r
+    top: 20px;\r
+    content: ' ';\r
+    position: absolute;\r
+}\r
+\r
+.tipArea:before {\r
+    border-top-color: #d4d4d4;\r
+    left: 230px;\r
+    top: 21px;\r
+}\r
+\r
+\r
+.help-block {\r
+    margin-top: 5px;\r
+    margin-bottom: 5px;\r
+  }\r
+\r
+.form-title {\r
+    padding-left: 8px;\r
+    padding-right: 8px;\r
+    padding-top: 5px;\r
+    padding-bottom: 5px;\r
+    margin-bottom: 10px;\r
+    margin-left:10px;\r
+    border-left: 2px solid #5b9bd1;\r
+    color: #1A78CA;\r
+    font-size: 16px;\r
+}\r
+\r
+.form-title a{\r
+      cursor: pointer;\r
+}\r
+\r
+.panel-tools {\r
+    display: inline-block;\r
+    float: right;\r
+    margin-top: 0;\r
+    padding: 0;\r
+    position: relative;\r
+}\r
+\r
+.panel-tools a {\r
+    margin-left: 5px;\r
+    color: #9d9fa2;\r
+    cursor: pointer;\r
+}\r
+\r
+.panel-tools  a:hover{\r
+  color: #34495e;\r
+  text-decoration: none;\r
+}\r
+\r
+.table-responsive{\r
+      margin-top: 15px;\r
+}\r
+\r
+.btn-s  {\r
+    padding: 0px 6px;\r
+    margin-right: 3px;\r
+}\r
+\r
+\r
+table.dataTable thead .sorting,\r
+table.dataTable thead .sorting_asc,\r
+table.dataTable thead .sorting_desc,\r
+table.dataTable thead .sorting_asc_disabled,\r
+table.dataTable thead .sorting_desc_disabled {\r
+    background: 0 0;\r
+}\r
+\r
+table.dataTable thead .sorting_asc:after {\r
+    content: "\f0de";\r
+    float: right;\r
+    font-family: fontawesome;\r
+    color:#357ebd;\r
+}\r
+\r
+table.dataTable thead .sorting_desc:after {\r
+    content: "\f0dd";\r
+    float: right;\r
+    font-family: fontawesome;\r
+    color:#357ebd;\r
+}\r
+\r
+table.dataTable thead .sorting:after {\r
+    content: "\f0dc";\r
+    float: right;\r
+    font-family: fontawesome;\r
+    color: rgba(50,50,50,.5);\r
+}\r
+\r
+\r
+.hostTableDiv{\r
+    height: 100px;\r
+    overflow: auto;\r
+  \r
+  }\r
+\r
+.hostTable{\r
+ font-size: 12px;\r
+ margin-bottom: 0px;\r
+}\r
+\r
+.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
+    padding: 6px;\r
+   \r
+}\r
+\r
+\r
+td.details-control {\r
+    background: url('../img/details_open.png') no-repeat center center;\r
+    cursor: pointer;\r
+}\r
+tr.shown td.details-control {\r
+    background: url('../img/details_close.png') no-repeat center center;\r
+}\r
+\r
+\r
+input[type="checkbox"] {\r
+    -webkit-appearance: none;\r
+    background: #fff url(../img/checkbox-init.png);\r
+    height: 18px;\r
+    vertical-align: middle;\r
+    width: 18px;\r
+  margin-bottom:5px;\r
+  margin-right:5px;\r
+}\r
+\r
+input[type="checkbox"]:checked {\r
+    -webkit-appearance: none;\r
+    background: #fff url(../img/checkbox-checked.png);\r
+    height: 18px;\r
+    vertical-align: middle;\r
+    width: 18px;\r
+}\r
+\r
+input[type="checkbox"]:focus,\r
+input[type="checkbox"]:hover {\r
+    outline: none;\r
+}\r
+\r
+.stat_text strong{\r
+    word-wrap: break-word;\r
+    word-break: normal;\r
+}\r
+\r
+\r
+.line_break{\r
+    word-wrap: break-word;\r
+    word-break: normal;\r
+}\r
+\r
+.protocal{\r
+    background-color: #fff;\r
+    border-color: #b2d8b9;\r
+\r
+    border: 1px solid #ccc;\r
+    border-radius: 3px;\r
+    color: #333;\r
+    display: inline-block;\r
+    font-size: 11px;\r
+\r
+    line-height: 99%;\r
+    margin: 0;\r
+    margin-bottom: 10px;\r
+    padding: 2px 5px;\r
+    text-align: center;\r
+    text-decoration: none;\r
+    text-transform: uppercase;\r
+}\r
+\r
+.form-title a:hover{\r
+  text-decoration:none;\r
+\r
 }
\ No newline at end of file