/********内容页**********/
/*顶部选项卡*/
.con-tab {
    list-style: none;
    display: flex;
    background: #f6f9fd;
    width: 100%;
    height: 38px;
}

.con-tab li {
    display: block;
    height: 38px;
    line-height: 38px;
    padding: 0 30px;
    border-radius: 5px 5px 0 0;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}

.con-tab li.active {
    background: #ffffff;
}

.con-tab li.active::after {
    content: " ";
    display: inline-block;
    height: 2px;
    width: 70%;
    background: var(--color-primary); /*用主色*/
    position: absolute;
    left: 15%;
    bottom: 0px;
}

.con-tab li a:hover {
    color: var(--color-primary); /*用主色*/
}
/*内容容器*/
.con-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    background: #fff;/*具体容器来定义白色背景，而不是布局里定义，否则只有少量行时，整个右边都是白色*/
    min-height:300px;/*定义个最小高度，否则没数据时都是灰色不好看*/
}

/**********************************编辑页**********************************/
/*水平对齐(默认实现bootstrap“Horizontal form”效果)*/
.form-horizontal {
    padding: 10px;
    margin-top: 0;
    background-color: #FFFFFF;
}

.form-horizontal .col-sm-2 {
    padding-left: 0px;
    padding-right: 0px;
}

.form-horizontal .col-sm-3 {
    padding-right: 0px;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
    display: flex; /*默认为bootstrap的单行“row”效果*/
    align-items: center; /*直接默认上下居中*/
}

.form-horizontal .form-group label.col-sm-2 {
    font-weight: normal;
    margin-bottom: 0;
    text-align: right;
}

.form-horizontal .form-group label.col-sm-2 b {
    color: #E3393C;
    margin-right: 3px;
    vertical-align: middle;
    display: inline-block;
}

.form-horizontal .form-group input[type=text],
.form-horizontal .form-group input[type=password],
.form-horizontal .form-group select,
.form-horizontal .form-group textarea,
.form-horizontal .form-group .form-file /*不能直接定义file，否则图片上传控件会有干扰*/ {
    border-radius: 0px;
    height: 38px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    display: block;
    width: 100%;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    flex: 1; /*组合框中可以用到*/
}

/*焦点样式*/
.form-horizontal .form-group input[type=text]:focus,
.form-horizontal .form-group input[type=password]:focus,
.form-horizontal .form-group select:focus,
.form-horizontal .form-group textarea:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-horizontal .form-group textarea {
    height: 70px;
}
/*只读和禁用，带上类型别影响提交确定按钮*/
.form-horizontal .form-group input[type=text][disabled], .form-horizontal .form-group input[type=text][readonly] {
    background-color: var(--color-disable);
    border-color: var(--color-border);
    opacity: 1;
}
 
/*单选框列表*/
.form-horizontal .form-group .label-check-group {
    display: flex;
    align-items: center;
}

.form-horizontal .form-group .label-check {
    height: 38px; /*和输入框一样高度*/
    margin: 0 20px 0 0; /*需要覆盖bootstrap的bottom*/
    display: flex;
    align-items: center;
    cursor: pointer;
} 

.form-horizontal .form-group .help-default {
    color: #999999;
    line-height: 38px; /*和输入框一样高度*/
}

.form-horizontal .form-group a {
    cursor: pointer;
}

/*组合框*/
.form-horizontal .form-group .input-group {
    display: flex;
    align-items: stretch; /*上下填满，里面的span就不需要设置高度了*/
}

.form-horizontal .form-group .input-group span {
    display: flex;
    align-items: center; /*span内容上下居中bootstrap标准方法，不要用height+line-height，因为border=1时line-height需要减2很繁琐*/
    padding: 0 10px;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-disable);
    border: 1px solid #ced4da; /*同输入框*/
    box-sizing: border-box;
    font-size: 12px;
    border-radius: 0;
}

.form-horizontal .form-group .input-group .name {
    width: 80px; /*姓名专用*/
    flex: initial; /*如果是input，需清除flex值，80宽度才有效*/
    border-left: 0; /*左边0边框*/
    justify-content: center; /*名字居中*/
}


/*详细页*/
.form-horizontal .form-group .form-control-static {
    min-height: 38px; /*和输入框一样高度*/
    padding-bottom: 0px;
    display: flex;
    align-items: center; /*自己上下居中*/
}

.form-horizontal .form-module { /*模块条*/
    background: #F8F8F8;
    margin-bottom: 20px;
    padding: 0px 20px;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
} 

/*富文本：公告内容、产品内容*/
.form-horizontal .content-html {
    text-indent: 2em;
    line-height: 2;
    letter-spacing: 1px;
}
.form-horizontal .content-html img {
    max-width: 800px;
}
/***************************************列表********************************/
.search-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 12px;
    background-color: rgb(255, 255, 255);
}

.search-box .form-group {
    margin-right:10px;
    margin-bottom:0px;/*前端查询不超过一行，无需下空隙*/
    display: inline-block;
    position: relative;
}

.search-box .form-group label {
    width: 60px; /*按4个汉字+冒号的宽度*/
    text-align: right;
    margin: 0;
}

.search-box .form-group input[type=text], .search-box .form-group select {
    width: 170px;
    height: 38px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    display: inline-block;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.search-box .form-group input[type=text][readonly], .search-box .form-group select[readonly] {
    cursor: not-allowed;
    opacity: 1;
    background-color: #EEEEEE;
}

.search-box .form-group input[type=text]:focus, .search-box .form-group select:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.search-box .form-group .label-check { 
    display: flex;
    align-items: center;
    width: auto;
}
.search-box button {
    margin-left: 10px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 5px;
}
.search-box .tips {
    font-size: 14px;
    padding: 5px 0;
    display:flex;
    align-items:center;
}
.search-box .tips:before {
    font-size: 18px;
    line-height: 1.2;
    margin-right: 2px;
    color: var(--color-primary);
}

.table {
    margin: 0;
    background-color: rgb(255, 255, 255);
    border: 1px solid #e8e8e8;
}

.table > tbody > tr > td {
    border: 1px solid #e8e8e8;
    vertical-align: middle;
    border-top-color: currentColor;
    border-top-width: 0;
    border-bottom-width: 1px;
    border-top-style: none;
    border-bottom-style: solid;
}

.table > tbody > tr:nth-child(2n+1) {
    background-color: rgb(250, 251, 251);
} 
.table thead tr th {
    border-right: 1px #e8e8e8 solid;
    border-left: 1px #e8e8e8 solid;
    border-bottom: 1px #e8e8e8 solid;
    border-image: none;
    background-color: #f4f4f4;
    height: 40px;
    vertical-align: middle; 
}
.table .btn-a a {
    /*列表后面的操作按钮，如果是click事件，不会加载全局超链接样式，需要单独定义*/
    color: rgb(27, 124, 205);
    padding: 2px 5px 2px 0px;
    transition: 0.2s linear;
    cursor: pointer;
    display: inline-block;
}

.table .btn-a a + a {
    border-left-color: rgb(230, 230, 230);
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 6px;
    padding-right: 5px;
}

.table .btn-a a:hover {
    color: #f59711;
    text-decoration: none;
}
.table td a {
    cursor: pointer;/*购物车里只有一个按钮外面没有套btn-a的情况*/
}

/******************架构图******************/
.xpt-box {
}

.xpt-box .level {
    float: left;
    margin-right: 50px;
}

.xpt-box .level .color {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
}

.xpt-box .level .name {
    width: auto;
    height: 20px;
    line-height: 20px;
    display: block;
    float: left;
    margin-left: 5px;
}
 
.xpt-box .maintb {
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
}

.xpt-box .maintb .nodetb {
    background-color: SlateGray;
    border: 0;
    width: 120px;
    font-size:12px;
    border-collapse: separate;
    border-spacing: 1px;
    margin: 3px 2px;
}

.xpt-box .maintb .zctb {
   width: 120px;
    font-size:12px;
    background-color: #fff;
}

.xpt-box .maintb .zctb .tr1, .xpt-box .maintb .nodetb .tr1 {
    height: 44px;
}

.xpt-box .maintb .zctb .tr2, .xpt-box .maintb .nodetb .tr2 {
    height: 64px;
}

.xpt-box .maintb .zctb .zctd {
    border-top: SlateGray solid 1px;
    background-color: #fff;
    vertical-align: middle;
}

.xpt-box .maintb .zctb .zctd img {
    border: 0;
    height: 64px;
}

.xpt-box .maintb .nodetb td, .lasttr td {
    text-align: center;
}

.xpt-box .maintb .va-b {
    vertical-align: bottom;
}

.xpt-box .maintb .va-m {
    vertical-align: middle;
}

.xpt-box .maintb .bg-f {
    background-color: #fff;
}