/* 颜色变量定义，与 bootstrap 一致，这些变量也被 bcg-ui-kit 部件库引用 */
* {
    --navbar-bg-color: #1F486D; /* 导航条背景色 */

    --sidebar-link-color: #ddd; /* 边栏菜单链接色（深色背景近乎白色） */
    --sidebar-hover-color: #fff; /* 边栏菜单项 hover 色（深色背景） */
    --sidebar-back-color: #1F486D; /* 边栏背景色（即顶部导航条背景色）  */

    --sidebar-active-color: #428bca; /* 边栏菜单选中当前项色（白底） */
    --sidebar-active-hover-color: #000; /* 边栏菜单选中当前项 hover 色（白底） */

    --title-color: #0032C6; /* 对话框标题色（蓝色） */
    --title-font-size: 18px; /* 对话框标字体尺寸（与 bootstrap 一致） */
    --title-font-weight: normal; /* 对话框标字体粗细 */

    --normal-back-color: transparent; /* 正常背景色（link action） */

    --link-color: rgba(66,139,202,0.66); /* 页面需加框突显的链接 box 颜色（比链接 hover 浅一些） */
    --link-hover-color: #428bca; /* 链接 hover 颜色（与 sidebar 当前项一致） */
    --link-hover-box-color: #ccc; /* 链接 hover 时 box 边框颜色（灰色以突出链接文字） */

    --action-color: #888; /* paging popover 等操作链接文字及框颜色（与 bootstrap 的 btn-default 一致） */
    --action-bg-color: #fff; /* paging popover 等操作链接背景色（白色 一般不定义） */
    --action-hover-color: #000; /* paging popover 等操作链接 hover 颜色 */
    --action-hover-bg-color: #eeeeee; /* paging popover 等操作链接 hover 背景色，比 bootstrap 的 btn-default 的 hover 淡一些 */
    --action-active-color: #e6e6e6; /* paging popover 等操作链接当前项背景（边框）色 */

    --action-opacity: 0.4; /* 图标操作链接不透明级别（一般用于 svg 图标） */
    --action-hover-opacity: 0.75; /* 图标操作链接 hover 不透明级别（一般用于 svg 图标） */

    --option-color: var(--action-color); /* 列表选项颜色，与 select 颜色一致 */
    --option-hover-color: #fff; /* 列表选项 hover 颜色，即 select 的 option 颜色 */
    --option-hover-bg-color: rgba(25,103,210,1); /* 列表选项 hover 背景色，即 select 的 option 颜色 */
    --option-before: '▶ '; /* 列表选项 before 伪元素字符 */
    --option-after: ' '; /* 列表选项 after 伪元素字符 */

    --tools-opacity: 0.33; /* 图标工具链接不透明级别（一般用于 svg 图标） */
    --tools-hover-opacity: 0.66; /* 图标工具链接 hover 不透明级别（一般用于 svg 图标） */

    --table-stripe-color: #f9f9f9; /* 表格条纹颜色（用于 bcg-ui-kit 部件库，与 bootstrap 一致） */
    --table-hover-color: #f2eada; /* 表格当前行背景色 #f2eada 即 象牙色（用于 bcg-ui-kit 部件库，与 bootstrap 一致） */
}

.white { color:#ffffff; }
.red { color:#D90000; }
.gray { color:#808080; }
.grey { color:#808080; }
.silver { color:#C0C0C0; }
.brown { color:#8C8C00; }
.orange { color:#FF8000; }
.green { color:#006600; }
.blue { color:#0032C6; }
.yellow { color:yellow; }
.purple { color:purple; }
.greenyellow { color:greenyellow; }
.black { color:#000000; }

.left {text-align:left;}
.center {text-align:center; margin-left:auto; margin-right:auto;}
.middle {vertical-align: middle!important;}
.right {text-align:right;}
.nowrap {white-space:nowrap;}
.normal {font-weight:normal;}
.pointer {cursor:pointer;}
.new { color:#D90000; }
.noborder {border:0!important;}
.popover { max-width:222px;}
.popover-content { padding: 9px 10px; }

.short { WIDTH: 156px!important }     /* date 输入框最小宽度 */
.short2 { WIDTH: 55px!important }
.long { WIDTH: 260px }
.long2 { WIDTH: 360px }
.long3 { WIDTH: 580px }
.long4 { WIDTH: 880px }

.modal-title { /* 对话框标题 */
    color: var(--title-color);
    font-weight: normal;
}

.table tbody tr th {
    vertical-align: middle;
}
label {font-weight: normal;}

/* WEB.bindTooltip() 对应提示框样式 */
.myTooltip {position:absolute;display:none;z-index:9900000;outline:none;margin:3px;padding:5px;border-width:1px;border-style:solid;border-radius:5px;-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;}
.myTooltip {background-color:#ffffff;border-color:#95B8E7;color:gray;word-wrap:break-word;font-size:12px;line-height:19px;text-align:left;min-width:160px;}

/* 普通 link 链接：文字前后缀以中括号替代下划线作为超链接标记，focus/hover时中括号变暗以突出文字 */
a.link {
    color: var(--link-color);
    border: 0px;
    border-radius: 4px;
    text-decoration: none !important;
    padding-right: 2px;
    cursor: pointer;
}

    a.link:focus, a.link:hover {
        color: var(--link-hover-color) !important;
        text-decoration: none;
        border-width: 0;
        outline: none;
    }

    a.link::before {
        content: "[ ";
    }

    a.link::after {
        content: " ]";
    }

    a.link:focus::before,
    a.link:focus::after,
    a.link:hover::before,
    a.link:hover::after {
        color: var(--link-hover-box-color);
    }

/* 加框，效果类似 bootstrap 的小号 btn */
a.action {
    border: 1px solid var(--action-color);
    border-radius: 4px;
}

/* 加框，无底色，比 button 小一些 */
span.action {
    color: var(--action-color);
    background-color: var(--normal-back-color);
    border: 1px solid var(--action-color);
    border-radius: 4px;
    line-height: 1.42857;
    white-space: nowrap;
    text-decoration: none;
    padding: 2px 8px;
}

    span.action:focus, /* 操作 focus 要求 span 设置 tabindex 属性 */
    span.action:hover {
        color: var(--action-hover-color);
        border-color: var(--action-color);
        background-color: var(--action-hover-bg-color);
        border-radius: 4px;
        cursor: pointer;
    }

/* 不加框，纯 svg 图片点击弹框， */
.svg-action {
    opacity: var(--action-opacity);
    cursor: pointer;
}

    .svg-action:hover {
        opacity: var(--action-hover-opacity);
    }

/* popover table panel 的 link 链接：普通文字显示，当 hover 时左右显示框线，与普通链接前后加 [ ] 视觉相似   */
.panel a.link,
.table a.link,
.popover a.link {
    color: var(--action-color);
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
}
    .panel a.link:focus,
    .panel a.link:hover,
    .table a.link:focus,
    .table a.link:hover,
    .popover a.link:focus,
    .popover a.link:hover {
        color: var(--link-hover-color) !important;
        background-color: var(--normal-back-color);
        text-decoration: none;
        border-color: var(--link-hover-box-color);
        border-radius: 4px;
        border-width: 0 1px 0 1px;
        border-style: solid;
        outline: none;
    }

/* popover table panel 的 action 操作链接：普通文字显示，当 hover 时才显示成按钮形式 */
.panel a.action,
.table a.action,
.popover a.action {
    color: var(--action-color);
    background-color: var(--normal-back-color);
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 2px 8px;
    cursor: pointer;
}
    .panel a.action:focus,
    .panel a.action:hover,
    .table a.action:focus,
    .table a.action:hover,
    .popover a.action:focus,
    .popover a.action:hover {
        color: var(--action-hover-color);
        background-color: var(--action-hover-bg-color);
        border: 1px solid #adadad;
        border-radius: 4px;
        outline: none;
    }

.panel a.link::before,
.table a.link::before,
.popover a.link::before {
    content: none;
}

.panel a.link::after,
.table a.link::after,
.popover a.link::after {
    content: none;
}

/* 列表多选项：借鉴下拉 select 的内置 option 样式（蓝底） */
.option {
    padding: 5px 3px;
    color: var(--option-color);
    cursor: pointer;
}

    .option::before {
        content: var(--option-before);
    }

    .option::after {
        content: var(--option-after);
    }

    .option *:focus, .option *:hover { /* 只改变内部文字的颜色，前后附加 before after 的颜色不变 */
        color: var(--option-hover-color);
        background-color: var(--option-hover-bg-color);
        outline: none;
    }


/* 组按钮样式：参考分页组件样式，用于实时波形图的 大、中、小 按钮组*/
.btn-group {
    color: var(--action-color);
    background-color: #fff;
    background-image: none;
    border-color: #ccc;
    box-shadow: none!important;
    outline: 0!important;
}

    .btn-group:focus,
    .btn-group:hover {
        color: var(--action-hover-color)!important;
    }

    .btn-group:not(.active):focus,
    .btn-group:not(.active):hover {
        background-color: var(--action-hover-bg-color);
    }

    .btn-group.active {
        background-color: var(--action-active-color)!important;
    }
    .btn-group.active:focus {
        background-color: var(--action-active-color)!important;
    }
    .btn-group.active:hover {
        background-color: var(--action-active-color)!important;
    }

/* 图标操作按钮（编辑、配置、菜单、关闭等 svg 按钮） */
.action-button {
	width: 24px;
	height: 24px;
    padding: 1px;
    margin-left: 4px;   /* 多个操作按钮之间的间距 */
}

/* 操作 svg 图标（Dialog & PanelBox 的编辑、配置、菜单、关闭、添加等 svg 图标） */
.action-icon {
	width: 20px;
	height: 20px;
    padding: 0px;
	opacity: var(--action-opacity);     /* 变模糊 */
}

    .action-icon:hover, 
    .action-icon:focus {
	    opacity: var(--action-hover-opacity);   /* 变清晰 */
    }

/* 图标操作按钮组放置在右上角（弹出对话框右上角的菜单、关闭等按钮组） */
.action-icon-group {
    position:absolute;
    top:16px;
    right:20px;
}


/* svg 图标（通过 style 的 mask-image 指定个性化的 svg 图标） */
.svg-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: currentColor;
}
.svg-icon.small {
    width:14px;
    height:14px;
}
.svg-icon.large {
    width:24px;
    height:24px;
}

/* 打印 */
@media print{
    .noprint { display:none }       /* 样式带 noprint 的不打印，如操作按钮等 */
    .print { display:inline-block!important; }    /* 样式带 print 的输出，在 screen 可能不显示 */
    a[href]:after { content:none !important;}     /* 链接不打印 */
} 

/*
 * 纯CSS实现超长文字轮播（文字走马灯）效果 https://www.cnblogs.com/LumenCallisto/p/15588874.html
 */

.marquee {
  overflow: hidden;
}

.wardPatrol .marquee .marquee-wrap {
  width: 100%;
  animation: wardPatrol-marquee-wrap 20s infinite linear;
}
@keyframes wardPatrol-marquee-wrap {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.wardPatrol .marquee .marquee-content {
  float: left;
  text-wrap:none;
  white-space: nowrap;
  min-width: 100%;
  animation: wardPatrol-marquee-content 20s infinite linear;
}
@keyframes wardPatrol-marquee-content {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.main-title {
    width:100%;
    height:40px;
    padding:0 10px 0 10px;
}

.sub-title {
    height:28px;
    padding:3px 10px;
    text-align: right;
    color: white;
    background-color:grey;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding: 0px 10px 5px 10px;
}
@media (min-width: 768px) {
  .main {
    padding-left: 120px;
    padding-right: 72px;    /* 右侧为 popover 多留空*/
  }
}
.main .page-header {
  margin-top: 0;
}

.row.action { padding:4px 16px 16px 16px; }

/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

/* 顶部导航样式 */

.navbar-blue {
  background-color: var(--navbar-bg-color);
  border-color: #e7e7e7;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
.navbar-blue .navbar-brand {
  color: #EEE;
}
.navbar-blue .navbar-brand:hover,
.navbar-blue .navbar-brand:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-blue .navbar-text {
  color: #ccc;
}
.navbar-blue .navbar-nav > li > a {
  color: #ccc;
}
.navbar-blue .navbar-nav > li > a:hover,
.navbar-blue .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-blue .navbar-nav > li .red {
  color: red;
}

.navbar-blue .navbar-nav > .active > a,
.navbar-blue .navbar-nav > .active > a:hover,
.navbar-blue .navbar-nav > .active > a:focus {
  color: #ccc;
  background-color: #e7e7e7;
}
.navbar-blue .navbar-nav > .disabled > a,
.navbar-blue .navbar-nav > .disabled > a:hover,
.navbar-blue .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-blue .navbar-toggle {
  border-color: #ddd;
}
.navbar-blue .navbar-toggle:hover,
.navbar-blue .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-blue .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-blue .navbar-collapse,
.navbar-blue .navbar-form {
  border-color: #e7e7e7;
}
.navbar-blue .navbar-nav > .open > a,
.navbar-blue .navbar-nav > .open > a:hover,
.navbar-blue .navbar-nav > .open > a:focus {
  color: #ccc;
  background-color: #e7e7e7;
}
@media (max-width: 767px) {
  .navbar-blue .navbar-nav .open .popover > li > a {
    color: #EEE;
  }
  .navbar-blue .navbar-nav .open .popover > li > a:hover,
  .navbar-blue .navbar-nav .open .popover > li > a:focus {
    color: #ccc;
    background-color: transparent;
  }
  .navbar-blue .navbar-nav .open .popover > .active > a,
  .navbar-blue .navbar-nav .open .popover > .active > a:hover,
  .navbar-blue .navbar-nav .open .popover > .active > a:focus {
    color: #ccc;
    background-color: #e7e7e7;
  }
  .navbar-blue .navbar-nav .open .popover > .disabled > a,
  .navbar-blue .navbar-nav .open .popover > .disabled > a:hover,
  .navbar-blue .navbar-nav .open .popover > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.navbar-blue .navbar-link {
  color: #EEE;
}
.navbar-blue .navbar-link:hover {
  color: #ccc;
}
.navbar-blue .btn-link {
  color: #EEE;
}
.navbar-blue .btn-link:hover,
.navbar-blue .btn-link:focus {
  color: #ccc;
}
.navbar-blue .btn-link[disabled]:hover,
fieldset[disabled] .navbar-blue .btn-link:hover,
.navbar-blue .btn-link[disabled]:focus,
fieldset[disabled] .navbar-blue .btn-link:focus {
  color: #ccc;
}



/* 块状列表 */
.ul-block{ list-style:none;}
.ul-block li{ display:inline-block; margin:0 5px 5px 0; padding:5px 10px; background:#e7e7e7;}


/* 列表标签导航 */
.list-head-tab{ font-size:16px; margin-bottom:10px; }
.list-head-tab > li.active > a {  color:#000;  }
.list-head-tab a{ color:#999; }


/* 图表对话框 */ 
.ct-list label{ width:120px; text-align:right; }


/* 一览表 */

#ClientListTarget [class^="col-xs-"] { padding:3px; min-width:208px; }
#ClientListTarget .panel{ margin-bottom:0px; }

.panel-default .glp{ color: #999; } 
.panel-primary .glp{ color: #FFF; } 
.panel-primary .glp{ color: #FFF;} 
.panel-success .glp{ color: #3c763d;} 
.panel-info .glp{ color: #31708f;} 
.panel-warning .glp{ color: #8a6d3b;} 
.panel-danger .glp{ color: #a94442; } 
 
.panel-body-ul {
   margin:0;
   padding:0;
}
.panel-body-ul li {
   list-style:none;
   margin:0;
   padding:0 0 0 10px;
}

.li-sp{  
    font-size:12px;
    color:#666666;
    line-height:25px;
}

/* 详细 */
.left-ul{ list-style:none; margin:0; padding:0; padding-top:10px; }
.left-ul li{  }
.left-ul li a{ display:block; padding:0 20px; line-height:32px; }
.left-ul li a:hover{ text-decoration:none; background:#428bca; color:#FFFFFF; }
.left-ul li a span{ padding:0 10px; float:right; }

/* 实时波形图 大、中、小 按钮组 */
div.chart_y_scale {
    position: absolute;
    right: 20px;
    z-index: 999;
    padding-left:5px;
    top: -1px;
}