﻿@charset "UTF-8";

/** 页面加载过程中，预先屏蔽页面滚动条，因为加载过程是有遮盖层，如果页面内容过多，同时出现遮盖层和滚动条体验差 **/
.cap-overflow-hidden {
    overflow: hidden;
}

/** 页面加载过程中，页面设置透明，不展示页面元素，只显示遮盖层。等页面加载完时，js动态修改为不透明 **/
.cap-container {
    opacity: 0; 
    padding: 0;
}

/** 页面加载过程中，启动遮盖层（项目组如果要修改遮盖层图片，重写此样式即可） **/
.cap-loading {
    position: fixed;
    background: #F5F5F5 url(/cap/rt/c5/common/base/image/loading-big.gif)
        center center no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: 99999;
}

/** 具有有此包裹层样式的组件，重置为行内元素，底部外间距更改为0 **/
.form-group {
    margin-bottom: 0;
    display: inline-block;
}

/** 重置人员、组织弹出框中的输入名称查询快速搜索框组件为块状元素 **/
.choose-popup .form-group {
    display: block;
}

/** 顶部布局上边距间隙设置为5像素 **/
.cap-container > *:first-child{
    margin-top: 5px;
}

/** 底部布局下边距间隙设置为5像素 **/
.cap-container > *:last-child {
    margin-bottom: 5px;
}

/** div布局的外层table默认样式 **/
.fluid-ly {
    table-layout: fixed;
    margin: 0 auto;
    border-collapse: separate;
    background-color: #fff;
}

/** div布局中的行布局默认样式 **/
.fluid-ly .fluid-row {
    height: auto;
    *zoom: 1;
    display: -webkit-flex; /**在webkit内核的浏览器上使用要加前缀**/
    display: flex; /**将对象作为弹性伸缩盒显示**/
}

/** div布局中的行布局清除浮动样式 **/
.fluid-ly .fluid-row:after {
    display: table;
    content: '';
    clear: both;
}

/** div布局中的单元格默认样式 **/
.fluid-ly .fluid-row .fluid-col {
    position: relative;
    padding: 5px;
    float: left;
}

/** 嵌套div布局内层顶部外边距距离设置为0，即不留空隙 **/
.fluid-col>.fluid-ly:first-child {
    margin-top: 0;
}

/** table布局默认样式 **/
.cap-table-fullWidth {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin: 0 auto;
}

/** table布局中的单元格默认样式 **/
.cap-td {
    padding: 5px;
    vertical-align: middle;
}

/** 每一行的第一个单元格左边内边距设置为10像素 **/
.fluid-ly .fluid-row .fluid-col:first-child, .cap-td:first-child{
    padding-left: 10px;
}

/** 每一行的最后一个单元格右边内边距设置为10像素 **/
.fluid-ly .fluid-row .fluid-col:last-child, .cap-td:last-child {
    padding-right: 10px;
}

/** div布局和边框布局，内嵌布局的内边距设置为0像素 **/
.fluid-ly .fluid-row .fluid-col.nested-layout, .div-table-col.nested-layout {
    padding: 0;
}

/** 同一个单元格内的组件，组件间左外边距设置为6像素，浏览器节点间距默认是4像素，所以加起来是10像素 **/
.fluid-col > [class|=c5], [uitype=label] + [uitype=label], [class|=c5] + [uitype=label]{
    margin-left: 6px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
}

/** 单元格第一个组件左外间距设置为0像素 **/
.fluid-col > [class|=c5]:first-child {
    margin-left: 0;
}

/** 开启剩余字体提示语，文本域左外边距设置为0像素 **/
.c5-textarea-wrap .tips ~ .c5-textarea{
    margin-left: 0;
}

/** 重置c5文本域组件内边距 **/
.c5-textarea-wrap textarea{
    padding: 5px 10px;
}

/** 单选框或复选框最后一个选项的标签右外边距设置为0像素 **/
.c5-check label:last-child{
    margin-right: 0;
}

/** c5下拉框、日期、点击输入框、放大镜组件、垂直折叠菜单、树组件编辑区域、标签输入、百分比、星评、滑块、日期范围选择器节点设置为行内块 **/
.c5-pulldown, .c5-datepicker-date, .c5-click-input, .c5-pic-viewer, .c5-accordion, .c5-tree.editable, 
    .c5-tags-input, [uitype=Percent], span[uitype="rate"], div[uitype="slider"], div[uitype="dateRangePicker"] {
    display: inline-block;
}

/** 重置日期、滑块组件内容垂直对齐方式 **/
.c5-datepicker-date, div[uitype="slider"]{
    vertical-align: top;
}

/** 重置附件组件位置及顶部间距 **/
[uitype=atmSep] a>span {
    position: relative;
    top: 5px;
}

/** 重置附件组件，内部iframe设置为隐藏 **/
[uitype=atmSep] a+iframe {
    display: none;
}

/** 更多组件左右外边距默认样式 **/
span[uitype=pullback]{
    margin-left: 6px;
    margin-right: 2px;
}

/** 附件字体设置为0 **/
[uitype=atmSep]{
    font-size: 0;
}

/** 标签组件默认样式 **/
label[hasloaded] {
    position: relative;
/*  top: 50%; */
/*  transform: translateY(-50%); */
/*  -ms-transform: translateY(30%); */
/*  vertical-align: super; */
    line-height: 34px;
    margin-bottom: 0;
    font-weight: normal;
}

/** 标签组件右侧星号必填样式 **/
label .text-red {
    position: relative;
    top: 3px;
    padding-right: 2px;
    color: #e50000;
}

/** 重置c5单选框、复选框顶部外边距为6像素 **/
.c5-check .c5-radio, .c5-check .c5-checkbox {
    margin-top: 6px;
}

/** 重置c5单选框、复选框在不显示外边框情况下，图标上边距设置为4像素 **/
.c5-check:not(.is-border) .c5-radio .radio-icon, .c5-check:not(.is-border) .c5-checkbox .checkbox-icon {
    top: 4px;
}

/** 文本模式下，重置组件中的字体垂直对齐方式 **/
.form-control-static {
    vertical-align: middle;
}

/** 重置popup弹出框顶部距离设置为150像素、宽度设置为450像素 **/
.popup-success-bg, .popup-info-bg, .popup-warning-bg, .popup-danger-bg{
    top: 150px!important;
    width: 450px;
}

/** 详情页面中的table布局表单显示边线时，table层样式 **/
.view-form-table-border{
    width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
    border-collapse: separate;
    border-spacing: 0;
    padding: 5px 0;
}

/** 详情页面中的table布局表单显示边线样式 **/
.view-form-table-border td{
    height: 28px;
    padding: 2px 5px !important;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
}

/** 详情页面中的table布局表单每一行第一个单元格左侧显示边框线 **/
.view-form-table-border tr > td:first-child {
    border-left:1px solid #ddd;
}

/** 详情页面中的table布局表单第一行所有单元格顶部显示边框线 **/
.view-form-table-border tr:first-child td {
    border-top:1px solid #ddd;
}

/** 详情页面中的table布局表单左侧标签字体颜色样式 **/
.view-form-table-border tr td:nth-child(odd) span[uitype=Label]{
    color:#333;
}

/** 详情页面中的table布局表单左侧标签字体颜色样式 **/
.table-border-left {
    width:calc(100% - 20px);
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    cursor:pointer;
    background:#f1f1f1;
    border-left:5px solid #0970d5;
}

.cap-table-layout-auto {
    table-layout: auto;
}

/** 详情页面中的div布局表单显示边线时，table层样式 **/
.view-form-div-border{
    margin-left:10px;
    margin-right:10px;
    padding: 5px 0;
}

/** 详情页面中的div布局表单显示边线样式 **/
.view-form-div-border .fluid-col{
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    padding: 0px 5px!important;
}

/** 详情页面中的div布局表单每一行第一个单元格左侧显示边框线 **/
.view-form-div-border .fluid-row > .fluid-col:first-child {
    border-left:1px solid #ddd;
}

/** 详情页面中的div布局表单第一行所有单元格顶部显示边框线 **/
.view-form-div-border .fluid-row:first-child .fluid-col {
    border-top:1px solid #ddd;
}

/** 详情页面中的div布局表单左侧标签字体颜色样式 **/
.view-form-div-border .fluid-row .fluid-col:nth-child(odd) label[uitype=label]{
    color:#666;
}

/** 查询区域外层边框样式 **/
.query-area{
    border: 1px solid #b3c3dc;
    margin: 5px 10px;
    width: calc(100% - 20px)!important;
}

/** 查询区域中的固定和更多区域背景色样式 **/
.query-area .fixed-query-form, .query-area .more-query-form{
    background:#fafafa;
}

/** 查询区域只有按钮区域，即没有固定和更多区域时，按钮区域边框样式 **/
.no-query-area{
    border: 1px solid #b3c3dc;
    margin: 5px 10px;
    padding-top: 0px!important;
    width:calc(100% - 20px)!important;
}

/** 查询区域按钮区域底部边线样式（前提按钮区域放在上面，而固定或更多查询区域放在下面） **/
.btn-nav-border-bottom {
    border-bottom: 1px dashed #ddd;
}

/** 查询区域按钮区域定部边线样式（前提按钮区域放在下面，而固定或更多查询区域放在上面） **/
.btn-nav-border-top {
    border-top: 1px dashed #ddd;
}

/** 边框布局框架样式 **/
.div-table {
    display: table; 
    width: 100%; 
    height: 100%;
}

/** 边框布局中的行布局样式 **/
.div-table-row {
    display: table-row;
}

/** 边框布局中的单元格布局样式 **/
.div-table-col {
    display: table-cell;
    padding: 5px;
    vertical-align: top;
}

/** 左右边框布局中的左侧单元格布局样式 **/
.div-table-left-col{
    padding: 10px;
}

/** 边框布局中的代码块组件外层外边距重置为-5像素 **/
.div-table-col > [uitype=codeArea] {
    margin: -5px
}

/* 嵌套在边框布局中的其他布局，嵌套布局顶部内编辑重置为5像素 */
.div-table-col.nested-layout {
    padding-top: 5px;
}

/** 边直接放在画布外层的边框布局，外边距设置为0像素 **/
.cap-container > .div-table {
    margin: 0;
}

/** 左右边框布局，对于左侧固定区域和右侧固定区域默认宽度样式 **/
.div-table .left-col, .div-table .right-col{
    width: 280px;
}

/** 上下边框布局，对于上部固定区域和下部固定区域默认高度样式 **/
.div-table .top-col, .div-table .bottom-col{
    height: 200px;
}

/** 上下边框布局，上部固定区域下边框边线样式 **/
.div-table .top-col{
    border-bottom: 1px solid #dddddd;
}

/** 上下边框布局，下部固定区域上边框边线样式 **/
.div-table .bottom-col{
    border-top: 1px solid #dddddd;
}

/** 左右边框布局，左侧固定区域右边框边线样式 **/
.div-table .left-col{
    border-right: 1px solid #dddddd;
}

/** 左右边框布局，右侧固定区域左边框边线样式 **/
.div-table .right-col{
    border-left: 1px solid #dddddd;
}

/** 标签组件面板使用了iframe布局，标签组件面板所在的父容器样式 **/
.tab-iframe {
    padding-bottom: 0!important;    
}

/** 区域固定，不随滚动条滚动，在树编辑移动弹出的选择页面，确定按钮要用此样式 **/
.fixedClass {
    position: fixed!important;
    background: #fff;
    width: 100%!important;
    z-index: 999999!important;
    top: 0!important;
    left: 0!important;
    box-sizing: border-box!important;
    padding:10px 10px 0px 0px!important;
}

/** 鼠标显示手势图标 **/
.cursor-pointer {
    cursor: pointer;
}

/** 树形界面模板场景-》左侧面板上的标题样式 **/
.tree-edit-page-title {
    font-size: 16px;
    font-weight: 700!important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/** 树形界面模板场景-》左侧面板导航嵌入的div布局单元格样式 **/
.edit-tree-btn-nav .fluid-row .fluid-col {
    padding: 5px 10px 0 10px;
}

/** 重置滑块组件在水平模式下的样式 **/
div[uitype="slider"] .horizontal, div[uitype="slider"] .default {
    margin-left: 10px;
    line-height: 34px;
    height: 34px;
    vertical-align: middle;
}

/** 重置滑块组件在垂直模式下的样式 **/
div[uitype="slider"] .vertical {
    margin-bottom: 10px;
    vertical-align: middle;
}

/** 重置滑块组件外边距上下间距设置为15像素 **/
.c5-slider .slider-runway {
    margin: 15px 0;
}

/** 重置滑块组件在垂直模式下的外边距左右间距设置为15像素 **/
.c5-slider.vertical .slider-runway {
    margin: 0 15px;
}

/** 重置c5 内部的ul和ol元素节点的样式，外内间距设置为0像素 **/
.cap-ul-list, .cap-ol-list {
    margin: 0;
    padding: 0;
}

/** 页面标题字体样式 **/
label.page-title {
    font-size: 16px;
    font-weight: 700;
}

/** 栅格布局行布局样式 **/
.grid-system-container .grid-system-row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

/** 栅格布局单元格布局样式 **/
.grid-system-container .grid-system-row .grid-system-col {
    padding: 5px;
}

/** padding为0的公共样式（使用代码块组件，代码块组件使用iframe，子页面的body和div.cap-container需添加此样式） **/
.cap-padding-0 {
	padding: 0;
}

/** 使用代码块组件，代码块组件使用iframe，代码块组件父容器需要添加此此样式 **/
.fluid-ly .fluid-row .fluid-col.cap-codearea-ui-parent-node, .cap-table-fullWidth tbody tr .cap-td.cap-codearea-ui-parent-node, .grid-system-container .grid-system-row .grid-system-col.cap-codearea-ui-parent-node {
	padding: 0px 0px 5px;
}

/** 表格附件列链接渲染 **/
div.div-atm > a, div.div-atm > a.txtbtn_href{
	cursor: pointer;
}

/** div布局中的block样式 **/
.fluid-ly .cap-display-block{
	display: block;
}

/** 快速表单布局中span类型的代码块样式 **/
.span-code-area-with-form{
	display: inline-block;
	margin-top: 10px;
}

/** 快速表单布局中div类型的代码块样式 **/
.div-code-area-with-form{
	padding-top: 10px;
}