.headPanel {
    background: var(--backColor);
    height: 50px;
    line-height: 50px;
    position: static;
    left: 0px;
    top: 0px;
    right: 0px;
    z-index: -100;
}

.mainTitleBar {
    width: 250px;
    position: relative;
    line-height: 50px;
    float: left;
    user-select: none;
}

.appTitle {
    font-size: 16px;
    color: white;
    float: left;
    margin-left: 10px;
}

#leftNavBar {
    width: 250px;
    background-color: #F6F6F6;
}

#userInfoPanel {
    background-color: var(--backColor);
    height: 160px;
    color: white;
    position: relative;
}

#userIconBar {
    padding: 10px 10px 10px 10px;
    text-align: center;
}

#userIconVerBar {
    text-align: center;
    display: none;
}

.me-UserLogo {
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    cursor: pointer;
}

.me-UserLogo:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.me-UserLogo.lg {
    width: 70px;
    height: 70px;
    border-radius: 35px;
}

#companyNameLabel {
    font-size: 14px;
    cursor: pointer;
    line-height: 20px;
    font-weight: bold;
    margin-top: 10px;
}

#userNameLabel {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

#userMessageBar {
    height: 35px;
    line-height: 35px;
    /*border-top: 1px dotted white;*/
}

#userMessageBar .messageItem {
    width: 33.33%;
    height: 33px;
    line-height: 33px;
    text-align: center;
    float: left;
}

.userMessageLabel {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    line-height: 20px;
    cursor: pointer;
    display: none;
}

.userMessageLabelText {
    margin-left: 5px;
}

.userMessageLabel:hover {
    text-decoration: underline;
}

#mainContainBackground {
    height: 160px;
    background-color: var(--backColor);
}


.tabClose {
    display: inline-block;
    width: 20px;
    text-align: right;
    color: #999;
}

.titleIconButton {
    height: 26px;
    width: 26px;
    line-height: 26px;
    border-radius: 13px 13px;
    text-align: center;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin-top: 5px;
    transition: all .55s ease;
}

.titleIconButton:hover {
    background-color: rgba(0, 0, 0, 0.4);
}


.moduleTypeItem {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 10px 0px 10px;
    cursor: pointer;
    border-left: 3px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.moduleTypeItem:hover, .moduleTypeItem.active {
    background-color: rgba(0,0,0,0.1);
    box-shadow: 5px 5px 10px #f0f0f0;
}

.moduleTypeItem.active {
    font-weight: bold;
}

.moduleTypeItem .icon {
    margin-right: 10px;
}

.moduleTypeItem .expandButton {
    width: 20px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    float: right;
    text-align: center;
}

#projectPanel {
    padding: 10px 0px;
    line-height: 30px;
    height: 50px;
    user-select: none;
    overflow: hidden;
}

#projectList {
    overflow-y: auto;
    height: calc(100% - 160px);
}

.projectItem_New {
    color: white;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    padding: 0px 20px;
    border-radius: 5px 5px;
    transition: all .3s ease;
}

.projectItem_New.active {
    background-color: rgba(255, 255, 255, 0.3);
}

#moduleListPanel {
    background-color: #F0F5F4;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px 20px;
}

#moduleListPanel.locked {
    display: block !important;
    width: 100%;
}

.moduleItem {
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    border-left: 4px solid transparent;
    cursor: pointer;
    user-select: none;
}

.moduleItem.active {
    background-color: white;
    border-left: 4px solid var(--textColor);
}

.moduleItem:hover {
    background-color: var(--gridSelectedColor);
    border-left: 4px solid var(--borderColor);
}

.moduleItem:hover.active {
    background-color: var(--hoverSelectedColor);
    border-left: 4px solid var(--borderColor);
}

.moduleItem.active {
    color: var(--textColor);
}

.moduleTypeBar.me-TabControl {
    text-align: center;
}

.moduleTypeBar.me-TabControl .me-TabItem {
    display: inline-block;
    float: none;
}

.moduleTypeBar.me-TabControl .me-TabItem {
    color: white;
}

.moduleViewTitlePanel {
    line-height: 40px;
    border-bottom: 1px solid #eee;
}

.moduleViewTitlePanel >.moduleViewTitle {
    font-size: 16px;
    font-weight: bold;
}


.moduleViewOveriewPanel {
    background-color: #ececec;
    padding: 10px 20px;
    line-height: 25px;
}

#moduleContentPanel {
    position: fixed;
    left: 250px;
    top: 50px;
    right: 20px;
    bottom: 0px;
    background-color: var(--backColor);
}

#moduleContent {
    overflow-y: auto;
    overflow-x: auto;
    background-color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 10px;
    padding-top: 0px;
    height: 100%;
    position: relative;
}

#mainLayout {
    background-color: #F6F6F6;
}

#globalSearchEdit {
    width: 200px;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 10px;
}

#globalSearchInput {
    border: 0px solid transparent;
    border-radius: 3px 3px;
    background-color: rgba(255, 255, 255, 0.6);
}

/* #globalSearchInput:focus { */
/*     background-color: white; */
/* } */
/* */
/* #globalSearchInput::-moz-placeholder, */
/* #globalSearchInput::-webkit-input-placeholder, */
/* #globalSearchInput:-ms-input-placeholder { */
/*     color: white !important; */
/* } */


.leftPanelExpandButton {
    width: 20px;
    position: fixed;
    left: 230px;
    bottom: 70px;
    cursor: pointer;
}

.leftPanelExpandButton .clicker {
    height: 50px;
    display: block;
    width: 20px;
    line-height: 50px;
    text-align: center;
    background-color: white;
}

.leftPanelExpandButton:before {
    content: '';
    width: 0px;
    height: 0px;
    display: block;
    border-right: 20px solid white;
    border-top: 20px solid transparent;
}

.leftPanelExpandButton:after {
    content: '';
    width: 0px;
    height: 0px;
    display: block;
    border-right: 20px solid white;
    border-bottom: 20px solid transparent;
}

/*面板收起后其它控件处理*/
.leftPanelClosed #leftNavBar {
    width: 50px;
}

.leftPanelClosed #leftNavBar #companyNameLabel,
.leftPanelClosed #leftNavBar #userNameLabel,
.leftPanelClosed #leftNavBar .moduleTypeItemText,
.leftPanelClosed #leftNavBar .userMessageLabel,
.leftPanelClosed #leftNavBar .moduleTypeItem .expandButton,
.leftPanelClosed .moduleItem,
.leftPanelClosed #userMessageBar {
    display: none;
}

.leftPanelClosed .userMessageLabel {
    display: block;
}

.leftPanelClosed #leftNavBar .moduleTypeItem {
    text-overflow: inherit;
    text-align: center;
}

.leftPanelClosed #leftNavBar .me-UserLogo {
    width: 32px;
    height: 32px;
    border-radius: 16px;
}

.leftPanelClosed #moduleContentPanel {
    left: 50px;
}

.leftPanelClosed .leftPanelExpandButton {
    left: 30px;
}

.leftPanelClosed #userIconVerBar {
    display: block;
}

.leftPanelClosed #mesoftLogo {
    margin-left: 50px;
}

.leftPanelClosed #userInfoPanel {
    height: 200px;
}

.leftPanelClosed #userInfoPanel, .leftPanelClosed #mainContainBackground {
    height: 200px;
}

.leftPanelClosed #leftNavBar:hover {
    background-color: #efefef;
    cursor: pointer;
}

#moreMenu {
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 101;
    box-sizing: border-box;
    padding: 20px;
    display: none;
}

#moreMenu .btnClose {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 16px;
}

#moreMenu .btnClose:hover {
    background-color: #ececec;
}

#modulePopup {
    display: none;
    width: 255px;
    position: relative;
    z-index: 9000;
}

#modulePopup #modulePopupSpliter {
    position: absolute;
    width: 5px;
    top: 0px;
    right: 200px;
}

#modulePopup #modulePopupTitle {
    height: 50px;
    width: 100%;
    line-height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background-color: #F6F6F6;
}

#modulePopup .moduleName {
    width: 198px;
    line-height: 50px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

#modulePopup .moduleName .moduleLabel .moduleIcon {
    margin-right: 10px;
}


#modulePopup .moduleName .moduleLabel
{
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding-left: 10px;
    position: relative;
}

#modulePopup .moduleName .moduleLabel:after
{
    content: '\f106';
    display: block;
    position: absolute;
    right: 10px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    margin-left: 5px;
}

#modulePopup .moduleName.expended .moduleLabel:after 
{
    content: '\f107';
}

#modulePopup #moduleItemList {
    width: 200px;
    min-height: 35px;
    max-height: calc(100vh - 250px);
    position: absolute;
    right: 0px;
    background-color: #F6F6F6;
    border: 1px solid #ddd;
    border-radius: 6px 6px;
    overflow-y: auto;
}

#modulePopup #moduleItemList .popModuleItem {
    line-height: 50px;
    height: 50px;
    padding: 0px 0px 0px 35px;
    cursor: pointer;
    border-right: 4px solid transparent;
    font-weight: normal;
    display: none;
}

#modulePopup .moduleName.expended .popModuleItem
{
    display: block !important;
}

#modulePopup #moduleItemList .popModuleItem:hover, #modulePopup #moduleItemList .popModuleItem.active {
    background-color: rgba(0, 0, 0, 0.05);
}

#modulePopup #moduleItemList .popModuleItem.active {
    background-color: rgba(0, 0, 0, 0.1);
}


/****子模块*********/

#moduleListTitle {
    margin-top: 0px;
    height: 50px;
    line-height: 50px;
    color: rgb(85, 85, 85);
    font-size: 1.20rem;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
    user-select: none;
    background-color: white;
    width: calc(100% + 50px);
    margin-left: -25px;
    box-sizing: border-box;
    padding: 0px 25px;
}

/* 列表查询面板浮动风格 */
#queryParamPanel.floatQueryParamPanel {
    min-height: 88px;
    height: auto;
    bottom: auto;
    position: absolute;
    border: 1px solid #e7e7e7;
    border-radius: 5px 5px;
    z-index: 501;
}

/* 箭头指示 */
#queryParamPanel.floatQueryParamPanel:after {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 8px solid white;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: block;
    position: absolute;
    right: 18px;
    top: -8px;
}

#queryParamPanel.floatQueryParamPanel .me-DockDialogTitle {
    margin-top: 10px;
}

#queryParamPanel .me-DockDialogTitle .btnFloat {
    float: right;
    margin-right: 10px;
    font-size: 14px;
    font-weight: normal;
}

#queryParamPanel.floatQueryParamPanel .me-EditContainer {
    float: left;
    width: 150px;
    margin-right: 20px;
}

#queryParamPanel.floatQueryParamPanel .me-DockDialogContent {
    height: 80px;
    margin-right: 200px;
}

#queryParamPanel.floatQueryParamPanel .me-DockDialogContent #floatToolBar {
    position: absolute;
    right: 10px;
    top: 0px;
    color: #777;
}

#queryParamPanel.floatQueryParamPanel .me-DockDialogButtonPanel {
    display: none;
}

#searchEditGroup #quickSearchEdit:not(:focus) {
    border: 1px solid transparent;
    box-shadow: none;
    background-color: var(--grayBackColor);
}

#floatSearchBtnPanel {
    position: absolute;
    right: 20px;
    bottom: 10px;
    height: 34px;
    line-height: 34px;
}

.me-DockDialogButtonPanel .btnQuery {
    margin-top: 18px;
}

#floatSearchBtnPanel .btnQuery {
    margin-top: 0px;
    margin-left: 20px;
}

/* #searchEditGroup #quickSearchEdit:hover, */
/* #searchEditGroup #quickSearchEdit:focus{ */
/*     background-color: white; */
/*     --border: 1px solid rgb(204, 204, 204); */
/*     --box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset; */
/*     border: def */
/*     box-shadow: inherit; */
/* } */

#moduleTitlePanel {
    font-size: 14px;
    line-height: 50px;
    height: 50px;
    background-color: #f5f5f5;
    width: calc(100% + 50px);
    margin-left: -25px;
    padding: 0px 25px;
}

#moduleEditButtonBar {
    box-sizing: border-box;
    padding: 0px 0px;
    margin-top: 10px;
    background-color: white;
    height: 45px;
    line-height: 45px;
}

#moduleEditButtonBar.me-Shadow {
    padding: 0px 25px;
}

#backButton {
    width: 100px;
    margin-right: 15px;
}

#backButton:hover {
    color: var(--textColor);
}

#moduleName {
    margin-left: 15px;
    font-weight: bold;
}

#buttonToolBar {
    background-color: #f5f5f5;
    margin-left: -20px;
    margin-right: -20px;
    padding: 10px 20px 5px 20px;
    border-bottom: 1px solid rgb(234, 237, 241);    
}

#buttonToolBar .btn {
    margin-top: -5px !important;
}


/*模块表格操作按钮只有鼠标移入才显示*/
#dataGrid1 > tbody > tr .me-SpeedButton {
    display: none;
}

#dataGrid1 > tbody > tr:hover .me-SpeedButton {
    display: inline-block;
    height: 24px;
}

/*屏保 */
#screenSave {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
    background-color: #434A54;
}

#screenSaveTime {
    font-size: 40px;
    color: white;
    line-height: 100px;
    height: 100px;
    width: 400px;
    font-size: 80px;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 5px #999;
}

reportchart {
    min-height: 200px;
    display: block;
}




body, html {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    line-height: 25px;
    color: #555;

    --normalTextColor: #555;
    --grayBorderColor: #ccc;
    --lightGrayBorderColor: #eee;
}

/**********************************************/

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
    background-color: #ececec;
    padding: 0px 2px;
}

::-webkit-scrollbar-track {
    /*background: #ececec;*/
    background: white;
}

::-webkit-scrollbar-thumb {
    /*background-color: #ccc;*/
    background-color: #efefef;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}


/**********************************************/

/*模块标题，蓝字中等大小*/
.me-ModuleHeadText {
    color: #0384ce;
    font-size: 16px;
    line-height: 30px;
}

/*面板块标题的字体*/
.me-PanelHeadText {
    color: #333333;
    font-size: 14px;
    line-height: 25px;
}

/*掩码文本字体*/
.me-MaskText {
    color: white;
    background-color: #FC6E51;
}

/**********************************************/

/*使用当前主题颜色作文本颜色 */
.me-TextColorTheme {
    color: var(--backColor);
}

/*正常情况下的文字颜色*/
.me-TextColorBlack {
    color: rgb(85, 85, 85) !important;
}

/*蓝色字体*/
.me-TextColorBlue {
    color: #0384ce;
}

/**亮蓝色字体，类似于超链接*/
.me-TextColorLightBlue {
    color: rgb(0, 193, 222);
}

/*紫色字体*/
.me-TextColorPurple {
    color: #967ADC;
}

/*灰色字体*/
.me-TextColorGray {
    color: #999;
}

/*浅灰色字体*/
.me-TextColorLightGray {
    color: #ccc;
}

/*绿色字体*/
.me-TextColorGreen {
    color: #390;
}

/*橙色字体*/
.me-TextColorOrangle {
    color: #F90 !important;
}

/*红色字体*/
.me-TextColorRed {
    color: #FC6E51;
}

/*黄色字体*/
.me-TextColorYellow {
    color: #F39C12;
}

/*高亮字体颜色*/
mark {
    background-color: #FC6E51;
    color: white;
    font-weight: normal;
    border-radius: 3px 3px;
}

/*避免 mark 嵌套时，边界很宽*/
mark mark {
    padding: 0px;
}

/**********************************************/

/*左对齐*/
.me-TextAlignLeft {
    text-align: left;
}

/*居中对齐*/
.me-TextAlignCenter {
    text-align: center;
}

/*左对齐*/
.me-TextAlignRight {
    text-align: right;
}

/**********************************************/

/*文本显示省略号*/
.me-TextEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*粗体显示*/
.me-TextBold {
    font-weight: bold;
}

/*斜体显示*/
.me-TextItalic {
    font-style: italic;
}

/*下划线*/
.me-TextUnderLine {
    text-decoration: underline;
}

/*去除全部风格*/
.me-TextStyleNormal {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/**********************************************/

/*正常文本大小*/
.me-TextSizeNormal {
    font-size: 12px;
}

/*稍大字体*/
.me-TextSizeBigger {
    font-size: 16px;
    line-height: 36px;
}

/*最大字体*/
.me-TextSizeBiggest {
    font-size: 18px;
    line-height: 40px;
}

/**********************************************/

/*黑色背景*/
.me-BackgroundBlack {
    background-color: #373d41;
}

/*灰色背景*/
.me-BackgroundGray {
    background-color: #F6F6F6;
}

/**深灰色背景*/
.me-BackgroundDeepGray {
    background-color: rgba(235, 235, 235, 1);
}

/*红色背景*/
.me-BackgroundRed {
    background-color: rgba(255, 110, 81, 0.1);
}

/*绿色背景*/
.me-BackgroundGreen {
    background-color: rgba(140, 193, 82, 0.1);
}

/*蓝色背景*/
.me-BackgroundBlue {
    background-color: rgba(79, 193, 233, 0.1);
}

/**********************************************/

/*上边界*/
.me-GraySolidLine-Top {
    border-top: 1px solid #ccc;
}

/*上边界*/
.me-GrayDottedLine-Top {
    border-top: 1px dotted #ccc;
}

/*下边界*/
.me-GraySolidLine-Bottom {
    border-bottom: 1px Solid #ccc;
}

/*下边界*/
.me-GrayDottedLine-Bottom {
    border-bottom: 1px dotted #ccc;
}


/**********************************************/

/*20像素行高*/
.me-LineHeight20 {
    line-height: 20px;
}

/*30像素行高*/
.me-LineHeight30 {
    line-height: 30px;
}

/*40像素行高*/
.me-LineHeight40 {
    line-height: 30px;
}


/**********************************************/

/*手型指示器*/
.me-CursorPointer {
    cursor: pointer;
}


/**********************************************/

/* 占满剩余高度，由 JS 去处理 */
.me-FillHeight {

}
body {
    --textColor: #31A2F8;
}

/*带标题的分割条*/
.me-TitleRow {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #ccc;
    font-weight: bold;
    font-size: 1.15rem;
    /*color: #ccc;*/
    min-height: 20px;
    clear: both;
}

/* 带行高的静态文本 */
.me-StaticText {
    line-height: 25px;
    height: 25px;
    /*user-select: none;*/
}

/*分割线*/
.me-SpliteLine {
    height: 10px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
}

/* 帮助提示符号，请配合 fa 类使用*/
.me-HelpIcon {
    cursor: pointer;
    color: #0384ce;
}

.me-HelpIcon:before {
    content: "\f059";
}

/* 帮助提示符号，请配合 fa 类使用，请放置在 position: relacitve 容器里面*/
.me-HelpIconOnEditRight {
    cursor: pointer;
    color: #0384ce;
    position: absolute;
    top: 12px;
    right: 2px;
}

.me-HelpIconOnEditRight:before {
    content: "\f059";
}


/* 帮助提示符号，请配合 fa 类使用，请放置在 position: relacitve 容器里面*/
.me-HelpIconOnLabelRight {
    cursor: pointer;
    position: absolute;
    top: 11px;
    right: -12px;
    color: #ccc;
}

.me-HelpIconOnLabelRight:hover {
    color: #0384ce;
}

.me-HelpIconOnLabelRight:before {
    content: "\f059";
}

/**********************************************/

/*编辑器容器*/
.me-EditContainer {
    line-height: 35px;
    /*overflow: visible;*/
    margin-bottom: 0.6rem;
    position: relative;
}

/*编辑器容器下的标签*/
.me-EditContainer .me-Label {
    display: inline-block;
    min-height: 18px;
    width: 90px;
    text-align: right;
    margin-right: 15px;
    margin-top: 2px;
    padding-right: 3px;
    color: #555;
    font-weight: normal;
    float: left;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 34px;
    position: relative;
    /*user-select: none;*/
}

/*编辑器容器下的编辑器*/
.me-EditContainer .me-Edit {
    width: calc(100% - 110px);
    line-height: 33px;
    display: inline-block;
    position: relative;
}

/*编辑器设置为非空*/
.me-EditContainer.me-NotNull .me-Label {
    
}
.me-EditContainer.me-NotNull .me-Label:before {
    content: "* ";
    color: #ea4c89;
}

/*任意地方可以使用的非空标识*/
.me-NotNullLabel:before {
    content: "* ";
    color: #ea4c89;
}

/*如果屏幕宽度小于 1280，则将标题显示在上方*/
@media(max-width: 1280px) {


    .me-EditContainer.me-SmartEditContainer {
        margin-bottom: 10px;
    }

    .me-SmartEditContainer .me-Label {
        display: block;
        line-height: 18px;
        text-align: left;
        width: auto;
    }

    .me-SmartEditContainer .me-Edit {
        width: 100%;
        display: block;
    }

    .me-HelpIconOnLabelRight {
        top: 4px;
    }
}

/**手动指明标签在上面，比如搜索面板*/
.me-EditContainer.me-LabelOnTop {
    margin-bottom: 10px;
}

.me-EditContainer.me-LabelOnTop .me-Label {
    margin-bottom: 5px;
}

.me-EditContainer.me-LabelOnTop .me-HelpIconOnLabelRight {
    top: 4px;
}

.me-EditContainer.me-LabelOnTop .me-Label {
    display: block;
    line-height: 18px;
    text-align: left;
    width: auto;
}

.me-EditContainer.me-LabelOnTop .me-Edit {
    width: 100%;
    display: block;
    clear: both;
}

/* 标签行右边的超链接按钮 */
.me-EditContainer >.pull-right.me-LinkButton {
    line-height: normal;
}

/*视图用的文本显示控件*/
.me-TextContainer {
    height: 30px;
    line-height: 30px;
    overflow-y: hidden;
}

/*编辑器容器下的标签*/
.me-TextContainer .me-Label {
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 5px;
    margin-top: 2px;
    padding-right: 3px;
    color: #999;
    font-weight: normal;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*标签后面添加：号*/
.me-TextContainer .me-Label:after {
    content: "：";
}

/*静态文字，可能放容器里面*/
.me-TextContainer .me-StaticText {
    line-height: 30px;
    width: calc(100% - 100px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    color: #555;
    /*user-select: auto;*/
}

/**长文本，用于显示备注等带换行的信息*/
.me-TextContainer.me-LongText {
    height: inherit;
    overflow-y: inherit;
}

.me-TextContainer.me-LongText .me-StaticText {
    overflow: inherit;
}

.me-TextContainer.me-LabelOnTop {
    height: auto;
    margin-bottom: 15px;
}

.me-TextContainer.me-LabelOnTop .me-Label {
    width: auto;
    display: block;
    float: none;
    text-align: left;
}

.me-TextContainer.me-LabelOnTop .me-StaticText {
    width: auto;
    display: block;
    float: none;
    text-align: left;
    margin-top: -10px;
}

/**********************************************/
/*下划线编辑器风格*/
.me_SearchEdit {
    border: none;
    border-bottom: 1px solid rgb(221, 221, 221);
    /*box-shadow: 0px 0px*/
}


/**********************************************/

/*设置按钮宽度*/
.me-Button {
    min-width: 90px;
}

/*平时不显示边框的按钮*/
.me-SpeedButton {
    min-width: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
    padding: 0px 0.36rem;
    user-select: none;
}

/*按钮焦点风格*/
.me-SpeedButton:hover, .me-SpeedButton.active {
    background-color: rgba(50, 50, 50, 0.2);
    border-radius: 3px 3px;
}

/* 设置按钮颜色为主题色 */
.me-SpeedButton.me-ThemeColor, .me-SpeedTextButton.me-ThemeColor {
    color: var(--textColor);
}

/*带文本的不显示边框的按钮*/
.me-SpeedTextButton {
    min-width: 50px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
    padding: 0px 6px;
}

/*带文本的不显示边框的按钮焦点风格*/
.me-SpeedTextButton:hover, .me-SpeedTextButton.active {
    background-color: rgba(50, 50, 50, 0.2);
    border-radius: 3px 3px;
}

/*去除按钮超链接鼠标上面的下划线*/
a.me-SpeedTextButton:hover {
    text-decoration: none;
}


/* 超链接风格按钮*/
.me-LinkButton {
    color: rgb(0, 193, 222);
    cursor: pointer;
    /*user-select: none;*/
}

.me-LinkButton[disabled] {
    color: #999;
    cursor: default;
}

/*灰色超链接按钮*/
.me-LinkButton.grayButton {
    color: #999;
}

/*黑色超链接按钮*/
.me-LinkButton.blackButton {
    color: rgb(85, 85 ,85);
}

/*红色超链接按钮*/
.me-LinkButton.redButton {
    color: #FC6E51;
}

/*灰色超链接按钮焦点风格*/
.me-LinkButton.grayButton:hover, .me-LinkButton.blackButton:hover, .me-LinkButton.redButton:hover {
    color: rgb(0, 193, 222);
}


.me-LinkButton + .me-LinkButton {
    margin-left: 10px;
}

/* 超链接风格按钮焦点风格*/
.me-LinkButton:hover {
    text-decoration: underline;
}

.me-LinkButton[disabled]:hover {
    text-decoration: none;
}

/*单元格内按钮*/
td .me-SpeedButton {
    margin-top: -5px;
}

/*单元格内只有移到行上才可见的按钮*/
tr > td > .me-SpeedButton.me-HoverShow, tr > td > .me-LinkButton.me-HoverShow, tr > td > .me-SpeedTextButton.me-HoverShow, tr > td > .me-ButtonSplite.me-HoverShow {
    display: none;
}

tr:hover td .me-SpeedButton.me-HoverShow, .me-GridSelectedRow .me-SpeedButton.me-HoverShow,
tr:hover td .me-SpeedTextButton.me-HoverShow, .me-GridSelectedRow .me-SpeedTextButton.me-HoverShow,
tr:hover td .me-LinkButton.me-HoverShow, .me-GridSelectedRow .me-LinkButton.me-HoverShow,
tr:hover td .me-ButtonSplite.me-HoverShow, .me-GridSelectedRow .me-ButtonSplite.me-HoverShow
{ 
    display: inline-block;
}

/*单元格内的超链接字体颜色控制*/
tr > td.me-TextColorBlock > .me-LinkButton {
    color: rgb(85, 85, 85);
}

tr > td.me-TextColorBlue > .me-LinkButton {
    color: #0384ce;
}

tr > td.me-TextColorLightBlue > .me-LinkButton {
    color: rgb(0, 193, 222);
}

tr > td.me-TextColorPurple > .me-LinkButton {
    color: #967ADC;
}

tr > td.me-TextColorGray > .me-LinkButton {
    color: #999;
}

tr > td.me-TextColorLightGray > .me-LinkButton {
    color: #ccc;
}

tr > td.me-TextColorGreen > .me-LinkButton {
    color: #390;
}

tr > td.me-TextColorOrangle > .me-LinkButton {
    color: #F90;
}

tr > td.me-TextColorRed > .me-LinkButton {
    color: #FC6E51;
}

tr > td.me-TextColorYellow > .me-LinkButton {
    color: #F39C12;
}


/* 返回按钮统一风格 */
.me-BackButton {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    margin-left: 20px; /**图标用*/
    color: #555;
}

/* 前面添加图标 */
.me-BackButton:before {
    content: "\f053";
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    position: absolute;
    left: -20px;
    top: 3px;
    width: 20px;
}

/*按钮分隔*/
.me-ButtonSplite {
    display: inline-block;
    width: 1px;
    height: 100%;
    margin: 0px 5px;
}

.me-ButtonSplite:after {
    content: "|";
    color: #ccc;
}

/**********************************************/

.me-ButtonGroup {
    line-height: 34px;
    height: 34px;
    padding: 0px 1px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/*拉伸占用全部宽度*/
.me-ButtonGroup.autoSize {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.me-ButtonGroup .me-Button {
    height: 34px;
    min-width: auto;
    box-sizing: border-box;
    padding: 0px 20px;
    position: relative;
    text-align: center;
    border: 1px solid #ccc;
    float: left;
    margin-left: -1px;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
}

.me-ButtonGroup .me-Button:first-child {
    border-top-left-radius: 3px 3px;
    border-bottom-left-radius: 3px 3px;
}

.me-ButtonGroup .me-Button:last-child {
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 3px 3px;
}

.me-ButtonGroup .me-Button:last-child:after {
    border-top-right-radius: 0px 2px;
}

.me-ButtonGroup.autoSize .me-Button {
    display: table-cell;
    float: none;
    width: 1%;
}

.me-ButtonGroup .me-Button:hover {
    background-color: #ececec;
}

.me-ButtonGroup .me-Button:last-child {
    border-right: 1px solid #ccc;
}

.me-ButtonGroup .me-Button.active {
    border: 1px solid #0384ce;
    color: #0384ce;
    z-index: 1;
}

.me-ButtonGroup .me-Button.active:after {
    /*content: '\f00c';*/
    content: '\f336';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    line-height: 10px;
    color: white;
    background-color: #0384ce;
    text-align: center;
    right: 0px;
    top: 0px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Duotone';
    font-weight: 400;
    font-size: 12px;

}

.me-ButtonGroup.fixWidth .me-Button {
    min-width: 90px;
}

.me-ButtonGroup[disabled] .me-Button, .me-ButtonGroup[disabled] .me-Button.active,
.me-ButtonGroup[readonly] .me-Button, .me-ButtonGroup[readonly] .me-Button.active,
.me-ButtonGroup .me-Button[disabled], .me-ButtonGroup .me-Button[disabled].active, 
.me-ButtonGroup .me-Button[readonly], .me-ButtonGroup .me-Button[readonly].active {
    cursor: default;
    background-color: #f5f5f6;
    border-color: #ccc;
    color: inherit;
    cursor: not-allowed;
}

.me-ButtonGroup[disabled] .me-Button.active:after, .me-ButtonGroup .me-Button[disabled].active:after, .me-ButtonGroup .me-Button[readonly].active:after {
    background-color: #ccc;
}

/**********************************************/

/* 按钮面板，用于放置快捷按钮和一些标签文字*/
.me-ButtonPanel {
    /*height: 30px;*/
    line-height: 40px;
    user-select: none;
}

/*如果在面板放置标准按钮，则设置间距*/
.me-ButtonPanel .me-Button, .me-ButtonPanel .btn {
    margin: 5px 0px;
}

/** 面板上放置输入组 */
.me-ButtonPanel .input-group input, .me-ButtonPanel .input-group .btn {
    height: 32px !important;
}

.me-ButtonPanel .me-CheckBox {
    height: 30px;
    line-height: 30px;
    margin-bottom: 0px;
}

.me-ButtonPanel .input-group >.input-group-btn >.btn {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: -1px;
}

/*******************/
.meReportDateRangeContainer {
    vertical-align:middle; 
    line-height: 34px;
}

/**********************************************/
/*布局容器，参考 EasyUI，但使用 class 而不是 data-options 来实现*/
.me-Layout {
    position: relative;
}

/*指明本容器在布局左面，占满所有高度*/
.me-Layout .me-LayoutLeft {
    position: absolute;
}

/*指明本容器在布局左面，占满所有高度*/
.me-Layout .me-LayoutRight {
    position: absolute;
}

/*指明本容器在布局上面，占满所有高度*/
.me-Layout .me-LayoutTop {
    position: absolute;
}

/*指明本容器在布局下面，占满所有高度*/
.me-Layout .me-LayoutBottom {
    position: absolute;
}

/*指明本容器在布局主区域，占满其余的所有高度和宽度*/
.me-Layout .me-LayoutContent {
    position: absolute;
}

/*指明本容器在布局的正中间，会实现居中和水平居中对齐*/
.me-Layout .me-LayoutCenter {
    position: absolute;
}

/**********************************************/
/*带阴影的卡片，可以卡片内放置任意内容，卡片本身可以作为选择项*/
.me-Card {
    float: left;
    min-width: 150px;
    min-height: 50px;
    background-color: #fff;
    margin-top: 30px;
    padding: 30px 16px;
    -webkit-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px;
    -moz-background-clip: padding;
    border-radius: 3px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 7px 20px -10px rgba(171,171,171,.7);
    box-shadow: 0 7px 20px -10px rgba(171,171,171,.7);
    -webkit-transition: all .55s ease;
    transition: all .55s ease;
    margin: 10px 0px 0px 10px;
}

.me-Card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 50px -12px rgba(171, 171, 171, .9);
}

/**********************************************/

.me-imageSelect {
    width: 100%;
    min-height: 50px;
    background-color: #ececec;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: table;
    position: relative;
}

.me-imageSelect:hover {
    border: 1px solid var(--backColor);
    box-shadow: 0 0px 8px var(--middleColor);
}

.me-imageSelect .emptyText {
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.me-imageSelect.readonly {
    cursor: default;
}

.me-imageSelect.hasImage {
    cursor: zoom-in;
}

.me-imageSelect .closeBtn {
    position: absolute;
    right: 0px;
    top: 0px;
    margin-top: 0px;
    display: none;
    text-shadow: 0px 0px 5px white;
}

.me-imageSelect:hover .closeBtn {
    display: block;
}

.me-imageSelect.readonly .closeBtn {
    display: none;
}

.me-imageSelect >.me-btnMobile {
    font-size: 14px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 15px 15px;
    z-index: 1;
}

.me-imageSelect >.me-btnMobile:hover {
    background-color: var(--middleColor);
    color: white;
    box-shadow: 0px 0px 5px 5px #ddd;
}

.me-imageSelect >.me-btnMobile.active {
    background-color: var(--backColor);
    color: white;
    box-shadow: 0px 0px 5px 5px #ddd;
}

.me-imageSelect >.qrCode {
    width: 200px;
    height: 200px;
    position: absolute;
    left: calc((100% - 200px) / 2);
    top: calc((100% - 120px) / 2);
    overflow-x: visible;
    text-align: center;

}

/**********************************************/

/*元素自动处于页面上方，即使滚动也可以*/
.me-FixOnTop {
    z-index: 90;
}

/*滚动时显示阴影*/
.me-FixOnTop.me-Shadow {
    box-shadow: 0 2px 5px 3px gray;
    box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05);
}

/**元素自动处于页面下方，即使滚动也可以*/
.me-FixOnBottom {
    z-index: 90;
    /*position: absolute;*/
    /*bottom: 0px;
    left: 0px;*/
    width: 100%;
}

.me-FixOnBottom.me-Shadow {
    position: absolute;
    left: 0px;
    box-shadow: 0 6px 50px 5px rgba(40, 120, 255, 0.1), 0 16px 100px 2px rgba(0, 0, 0, 0.05);
}


/**********************************************/

/*实现从“XX”至"XX"类型的控件*/
.me-EditFromToContainer {
    line-height: 34px;
}

/*编辑器*/
.me-EditFromToContainer .me-FromEdit, .me-EditFromToContainer .me-ToEdit {
    float: left;
    width: calc(50% - 15px);
}

/*到XX标签*/
.me-EditFromToContainer .me-ToLabel {
    width: 30px;
    text-align: center;
    float: left;
}

/**没有中间的至标签，中间只占5像素*/
.me-EditFromToContainer.notToLabel {
    line-height: 35px;
}

/*编辑器*/
.me-EditFromToContainer.notToLabel .me-FromEdit, .me-EditFromToContainer.notToLabel .me-ToEdit {
    float: left;
    width: calc(50% - 3px);
}

/*到XX标签*/
.me-EditFromToContainer.notToLabel .me-ToLabel {
    width: 6px;
    height: 35px;
    text-align: center;
    float: left;
    display: inline-block;
}


/**********************************************/
/*页签控件*/
.me-TabControl {
    line-height: 45px;
    height: 45px;
    padding-bottom: 1px;
    box-sizing: border-box;
    user-select: none;
}

/*标签项*/
.me-TabControl .me-TabItem {
    float: left;
    padding: 0px 15px;
    /*margin: 0px 10px;*/
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
    height: 44px;
    margin-right: 2px;
    position: relative;
    user-select: none;
}

/*页签后面添加 | 分隔线*/
.me-TabControl .me-TabItem:after {
    content: "|";
    color: #ccc;
    position: relative;
    right: -15px;
}

/**最后一个不显示 | */
.me-TabControl .me-TabItem:last-of-type:after {
    content: "";
}

/**在页签上放置按钮*/
.me-TabControl .me-SpeedTextButton {
    margin-top: 15px;
}

/**关闭按钮*/
.me-TabControl .me-TabItem > .me-CloseBtn {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    /* color: #999; */
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.me-TabControl .me-TabItem > .me-CloseBtn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    /* border-radius: 10px 10px; */
}

.me-TabControl .me-TabItem > .me-CloseBtn:after {
    content: "\f00d";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
}

/*第二种风格*/
.me-TabControl.me-TabButtonStyle {
    border-bottom: 2px solid #ececec;
}

.me-TabControl.me-TabButtonStyle .me-TabItem {
    height: 38px;
    line-height: 38px;
}

.me-TabControl.me-TabButtonStyle .me-TabItem:after {
    content: "";
}

/*第三种风格*/
.me-TabControl.me-TabTabStyle {
    border-bottom: 2px solid #ececec;
}

.me-TabControl.me-TabTabStyle .me-TabItem {
    height: 34px;
    line-height: 34px;
    background-color: #FBFAF8;
    border: 1px solid #ddd;
    margin-right: -1px;
    margin-top: 11px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.me-TabControl.me-TabTabStyle .me-TabItem:after {
    content: "";
}

/*当前标签或激活*/
.me-TabControl .me-TabItem:hover, .me-TabControl .me-Active {
    /*border-bottom: 2px solid rgb(0, 193, 222);*/
    color: rgb(0, 193, 222);
}

.me-TabControl.me-TabButtonStyle .me-TabItem:hover, .me-TabControl.me-TabButtonStyle .me-TabItem.me-Active {
    border: 0px;
    background-color: rgb(0, 193, 222);
    border-radius: 5px 5px;
    color: white;
}

.me-TabControl.me-TabTabStyle .me-TabItem.me-Active {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 2px solid #00a2ca;
    border-bottom: 3px solid white;
    background-color: white;
    height: 38px;
    line-height: 38px;
    margin-top: 7px;
}

.me-TabControl.me-TabTabStyle .me-TabItem:hover {
    background-color: white;
    border-bottom: 1px solid #ddd;
}

.me-TabControl.me-TabTabStyle .me-TabItem.me-Active:hover {
    border-bottom: 3px solid white;
}

.me-TabControl input {
    margin-top: 5px;
}

.me-TabControl .input-group-sm input.form-control {
    height: 30px;
}

.me-TabControl> .input-group> .input-group-sm> .input-group-btn {
    margin-top: 2px;
}

.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 1rem;
    line-height: 1.5;
}

.me-TabControl > .me-HelpIcon {
    padding-top: 20px;
    margin-left: 20px;
}

/**********************************************/
/*消息红点*/
.me-NotifyPoint {
    background-color: #E74C3C;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    z-index: 10;
}

/*点数字显示的消息红点*/
.me-NotifyNumberPoint {
    content: '';
    position: relative;
    display: inline-block;
    background-color: #E74C3C;
    font-size: 12px;
    padding: 2px 2px;
    border-radius: 2px;
    line-height: 12px;
    min-width: 20px;
    font-family: Arial;
    font-weight: normal;
    color: white;
    z-index: 10;
    -webkit-transform: scale(0.8);
}

.me-NumLabel {
    position: relative;
    color: transparent;
    margin-left: 3px;
    margin-right: 6px;
    font-size: 12px;
    padding: 2px 4px 2px 2px;
    -webkit-transform: scale(0.8);
}

.me-NumLabel >.val {
    position: absolute;
    top: -5px;
    left: 0px;
    background-color: #E74C3C;
    font-size: 12px;
    padding: 2px 4px 2px 2px;
    border-radius: 2px;
    line-height: 12px;
    min-width: 20px;
    font-family: Arial;
    font-weight: normal;
    color: white;
    -webkit-transform: scale(0.8);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.me-TabItem .me-NumLabel >.val {
    background-color: var(--grayBorderColor);
}

.me-TabItem.me-Active .me-NumLabel >.val {
    background-color: var(--textColor);
}

/**********************************************/

/*常用带阴影面板*/
.me-Panel {
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    min-height: 40px;
    margin-bottom: 10px;
}

/*默认风格面板标题*/
.me-PanelTitle {
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f6;
    padding: 0px 10px;
}

.me-PanelTitleMoveing {
    cursor: move;
}

/*蓝色标题*/
.me-PanelTitle-Blue {
    background-color: rgb(0, 193, 222);
    color: white;
}

/**面板内容区*/
.me-PanelContent {
    min-height: 50px;
    padding: 15px 15px 15px 15px;
    background-color: white;
}


/**********************************************/

/*表格控件*/
.me-GridTable {
    outline-width: 0px;
    table-layout: fixed;
}

.me-GridTable > thead > tr > th {
    vertical-align: middle;
    background-color: #FFF;
    position: relative;
    height: 25px;
    line-height: 25px;
}

.me-GridTableGrayHeader > thead > tr > th {
    background-color: #F6F6F6;
}

.me-GridTable td {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**灰色单元格*/
.me-GridTable .me-GrayCell {
    background-color: #F6F6F6;
}

/**可排序的头*/
.me-GridOrderHead {
    cursor: pointer;
}

.me-GridOrderHead:hover {
    background-color: #e6e6e6;
}

/*顺排序*/
.me-GridHeadOrderAsc:after {
    content: "\f0d8";
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
}

/*顺排序*/
.me-GridHeadOrderDesc:after {
    content: "\f0d7";
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
}

/*原表格汇总行*/
.me-GridTable tfoot, .me-GridTable tfoot tr {
    background-color: transparent;
    font-weight: bold;
    height: 34px;
    line-height: 34px;
    color: transparent !important;
}

/*动态创建的固定汇总行*/
.me-FixFootGridDiv {
    height: 35px;
    line-height: 35px;
    background-color: #ececec;
}

/*固定列滚动后显示阴影*/
.me-GridFixShadow {
    box-shadow: 3px -1px 10px -3px rgba(0, 0, 0, 0.5);
}

/*加载更多行*/
.me-GridLoadMore {
    background-color: rgb(0, 193, 222);
    color: white;
    height: 41px;
}

.me-GridLoadMore:hover {
    background-color: rgba(0, 193, 222, 0.6);
}

/*加载更多文本*/
.me-GridLoadMore .loadMoreText {
    position: absolute;
    left: 10px;
}

/*列改变宽度对象*/
.me-GridColumnResizer {
    display: inline-block;
    width: 5px;
    background-color: transparent;
    cursor: col-resize;
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

/*去除表格标题底下的线*/
.table>thead>tr>th {
    border-bottom: 0px solid gray;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*列表当前选中行（如参照窗口）*/
/*移入*/
.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
    box-shadow: 0px 0px 15px #ccc;
    background-color: white;
}
/*选中*/
.me-GridSelectedRow {
    background-color: #f5f5f5;
    box-shadow: 0px 0px 15px var(--backColor) !important;
    background-color: white;
    z-index: 1;
}

/*
  单元格下的只读编辑框
*/
.me-GridTable select:disabled, .me-GridTable input:disabled {
    background-color: rgb(234, 237, 241);
}

.me-GridTable .emptyLinkButton {
    display: inline-block;
}

/**********************************************/
/*表格内编辑控件*/
/*设置单元格风格*/
.me-EditableCell {
    padding: 0px !important;
}

.table td {
    line-height: 24px !important; /*38px;*/
}

.table.table-condensed td {
    line-height: 20px;
}

/*设置单元格内编辑器*/
.me-EditableCell input, .me-EditableCell select {
    border: 0px;
    width: 100%;
    line-height: 33px;
    padding: 2px 5px;
    height: 38px;
}

/*设置单元格内编辑器*/
.table-condensed .me-EditableCell input, .me-EditableCell select {
    border: 0px;
    width: 100%;
    line-height: 29px;
    padding: 2px 5px;
    height: 28px;
}

.me-EditableCell select {
    height: 38px;
}

.table-condensed .me-EditableCell select {
    height: 28px;
}

/*设置单元格内带按钮编辑器风格*/
.me-EditableCell .input-group {
    height: 38px;
}

/*设置单元格内带按钮编辑器风格*/
.table-condensed .me-EditableCell .input-group {
    height: 28px;
}

.me-EditableCell .input-group .form-control {
    height: 38px;
}

.table-condensed .me-EditableCell .input-group .form-control {
    height: 28px;
}

.me-EditableCell .input-group .btn {
    border: none;
}

.table-condensed .me-EditableCell .me-SpeedButton {
    margin-top: 2px;
}

.table .me-EditableCell .me-SpeedButton {
    margin-top: 2px;
}

.table .me-EditableCell .me-SpeedButton:first-child {
    margin-left: 4px;
}

.table .me-EditableCell .me-CheckBox {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 4px;
}

.table-condensed .me-EditableCell .me-CheckBox {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.table .me-LinkButton {
    line-height: 24px;
}

.row .me-LinkButton {
    /*line-height: 34px;*/
    line-height: inherit;
}

/**********************************************/

/*无边框编辑控件*/
.me-NoBorderEdit {
    border: 0px;
    outline: none;
    box-shadow: none;
}

/**********************************************/
/*弹出对话框*/
.me-Dialog {
    position: fixed;
    background-color: white;
    box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05);
    border-radius: 3px 3px;
}

/*对话框Mask层*/
.me-DialogMask {
    position: fixed;
    background-color: rgba(14, 23, 38, 0.25);
}

/*对话框标题*/
.me-Dialog .me-DialogHead {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    padding: 0px 10px;
    font-size: 16px;
    user-select: none;
}

/*对话框内容区域*/
.me-Dialog .me-DialogContent {
    height: calc(100% - 100px);  /* 头50 + 尾50*/
    overflow-y: hidden;
}

/*对话框按钮区*/
.me-Dialog .me-DialogToolbar {
    height: 50px;
    line-height: 46px;
    border-top: 1px solid #ccc;
    padding: 0px 10px;
    text-align: right;
    user-select: none;
    position: relative;
}

/*改变大小元素*/
.me-Dialog .me-DialogResizer {
    /*background-color: red;*/
    width: 15px;
    height: 15px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    cursor: nw-resize;
}

/*指定对话框为全屏状态*/
.me-DialogFullScreen {}

/*弹出面板*/
.me-PopupDiv {
    background-color: white;
    border: 1px solid #ccc;
    z-index: 991;
    /*box-shadow: 3px 3px 5px #cdcdcd;*/
    box-shadow: 0 0 16px rgba(0,0,0,.1);
    min-height: 50px;
    position: fixed;
}

.me-PopupDivMask {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 990;
}

/*对话框默认边界*/
.me-DialogPadding {
    padding: 15px;
    overflow-x: hidden;
}

.me-DialogPadding_x2 {
    padding: 30px;
    overflow-x: hidden;
}

.me-DialogPadding_x3 {
    padding: 45px;
    overflow-x: hidden;
}

/*则边栏式对话框*/
.me-DockDialog {
    display: none;
    position: fixed;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    background-color: white;
    z-index: 501;
    box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05);
}

/*则边栏式对话框背景*/
.me-DockDialogMask {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    background-color: #0E1726;
    opacity: 0.25;
    z-index: 500;
    display: none;
}

/*则边栏式对话框右上角关闭按钮*/
.me-DockDialog .me-DockDialogCloseButton {
    color: #777;
    float: right;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.me-DockDialog .me-DockDialogCloseButton:hover {
    color: white;
    background-color: rgb(232, 20, 13);
}


/*则边栏式对话框内容面板*/
.me-DockDialog .me-DockDialogTitle {
    padding: 0px 0px 0px 20px;
    height: 40px;
    line-height: 40px;
    font-size: 17px;
    user-select: none;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

/*侧边栏式对话框右上角自定义按钮*/
.me-DockDialog .me-DockDialogTitleButton {
    color: #777;
    float: right;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.me-DockDialog .me-DockDialogTitleButton:hover {
    background-color: #ccc;
    color: white;
}

/*则边栏式对话框内容面板*/
.me-DockDialog .me-DockDialogContent {
    height: calc(100% - 140px);
    padding: 10px 20px;
}

/*则边栏式对话框按钮面板*/
.me-DockDialog .me-DockDialogButtonPanel {
    height: 70px;
    line-height: 70px;
    /* box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1); */
    /* text-align: center; */
    border-top: 1px solid #e7e7e7;
    padding: 0px 20px;
}


/*非模态拉出面板*/
.me-DockUnmodelDialog {
    display: none;
    position: fixed;
    right: 30px;
    top: 60px;
    bottom: 10px;
    border-radius: 12px;
    background-color: white;
    z-index: 501;
    box-shadow: 0 6px 30px 5px rgba(40, 120, 255, 0.1), 0 16px 34px 2px rgba(0, 0, 0, 0.05);
}

.me-DockUnmodelDialog > .content {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
}

.me-DockUnmodelDialog > .content > .closeBtn {
    width: 22px;
    position: absolute;
    left: -22px;
    bottom: 70px;
    cursor: pointer;
}

.me-DockUnmodelDialog > .content > .closeBtn .clicker {
    height: 30px;
    display: block;
    width: 22px;
    line-height: 30px;
    text-align: center;
    background-color: var(--backColor);
    color: white;
    box-shadow: -7px 0px 10px -2px rgba(0, 0, 0, 0.02);
    border-left: 1px solid #ececec;
}

.me-DockUnmodelDialog > .content > .closeBtn:before {
    content: '';
    width: 0px;
    height: 0px;
    display: block;
    border-right: 22px solid var(--backColor);
    border-top: 22px solid transparent;
}

.me-DockUnmodelDialog > .content > .closeBtn:after {
    content: '';
    width: 0px;
    height: 0px;
    display: block;
    border-right: 22px solid var(--backColor);
    border-bottom: 22px solid transparent;
}

.me-DockUnmodelDialog > .content > .buttonPanel {
    height: 55px;
    line-height: 50px;
    border-top: 1px solid var(--grayBorderColor);
    position: sticky;
    bottom: 0px;
    text-align: center;
    background-color: white;
    z-index: 2;
}


/*浮动弹出框*/
.me-PopupSearchMask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 999;
}

/*浮动掩层不处理鼠标事件*/
.me-PopupSearchMask.noMouseEvent {
    pointer-events: none;
}

.me-PopupSearch {
    width: 200px;
    height: 35px;
    background-color: white;
    box-shadow: 0px 0px 20px #ccc;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1000;
}

.me-PopupSearch .container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px;
}

.me-PopupSearch .container:after {
    width: 0px;
    height: 0px;
    border-bottom: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    right: 10px;
    top: -8px;
}

.me-PopupSearch.rightBottom .container:after {
    left: 10px;
    right: auto;
}

.me-PopupSearch input {
    width: calc(100% - 30px);
    height: 100%;
    border: 0px solid transparent;
    box-sizing: border-box;
    padding: 0px 10px;
    outline-width: 0px;
}

.me-PopupControlContainer {
    position: fixed;
    box-shadow: 0px 0px 20px #999;
    background-color: white;
    z-index: 1000;
    border-radius: 5px 5px;
    position: relative;
}

.me-PopupControlContainer .top {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 8px solid white;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: block;
    position: absolute;
}

.me-PopupControlContainer .left {
    content: '';
    width: 0px;
    height: 0px;
    border-right: 8px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    position: absolute;
}

.me-PopupControlContainer .right {
    content: '';
    width: 0px;
    height: 0px;
    border-left: 8px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    position: absolute;
}

.me-PopupControlContainer .bottom {
    content: '';
    width: 0px;
    height: 0px;
    border-top: 8px solid white;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: block;
    position: absolute;
}

.me-PopupControl {
    position: fixed;
    display: block;
    z-index: 1001;
}

/**********************************************/
/*目录树控件*/
.me-Tree {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

/*父节点*/
.me-TreeNodeContainer {
    padding-left: 20px;
}

/*目录树节点*/
.me-TreeNode {
    line-height: 24px;
    cursor: pointer;
    list-style-type: none;
    user-select: none;
}

/*目录树节点文本*/
.me-TreeNode .me-TreeNodeLabel {
    width: auto; /*calc(100% - 25px);*/
    display: inline-block;
    padding: 1px 3px;
}

.me-TreeNode .me-TreeNodeLabel:hover .me-TreeNodeText {
    text-decoration: underline;
}

.me-TreeNodeText {
    padding: 2px 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*目录树节点选中*/
.me-TreeNode .me-TreeNodeSelected .me-TreeNodeText {
    background-color: rgb(0, 193, 222);
    color: white;
}


/*目录树节点展开/收起图标*/
.me-TreeNodeExpendedIcon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    margin-right: 3px;
    display: inline-block;
}

.me-TreeNodeExpendedIcon:after {
    content: "\f0c8";
    font-weight: 900;
    color: transparent;
}

/*展开*/
.me-TreeNodeExpended > .me-TreeNodeExpendedIcon:after {
    content: "\f146";
    font-weight: 100;
    color: gray;
}

/*折叠*/
.me-TreeNodeUnexpended > .me-TreeNodeExpendedIcon:after {
    content: "\f0fe";
    font-weight: 100;
    color: gray;
}

/*未展开的隐藏*/
.me-TreeNodeUnexpended > .me-TreeNodeContainer {
    display: none;
}

/*多选框容器*/
.me-TreeNodeCheckIcon {
    width: 14px;
    height: 14px;
    line-height: 20px;
    text-align: center;
    margin-right: 3px;
    display: inline-block;
    border: 1px solid #999;
    position: relative;
    transition: all .55s ease;
}

/**多选框容器鼠标显示背景色*/
.me-TreeNodeCheckIcon:hover {
    background-color: rgba(0, 193, 222, 0.5);
}

/*目录树勾选项下的图标默认不显示*/
.me-TreeNodeCheckIcon > span {
    display: none;
}


/**目录树节点选中*/
.me-TreeNodeChecked > span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

/*半选中状态*/
.me-TreeNodeCheckIcon.me-TreeNodeGrayChecked {
    background-color: #ccc;
}

/*半选中状态显示勾*/
.me-TreeNodeCheckIcon.me-TreeNodeGrayChecked > span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}


/**********************************************/
/* 附件控件文件名标 */

.me-AttachmentContainer:focus-within {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.me-AttachmentTableFileName {
    cursor: pointer;
}

.me-AttachmentTableFileName:hover {
    color: #0384ce;
    text-decoration: underline;
}

.me-AttachmentFileItem {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0px 10px 10px 0px;
    cursor: pointer;
}

.me-AttachmentFileItem:hover {
    background-color: rgb(247, 247, 247);
}

.me-AttachmentFileItem .me-AttachmentFileItemIcon {
    height: 70px;
    text-align: center;
    color: #ddd;
    padding-top: 20px;
}

.me-AttachmentFileItem .me-AttachmentFileItemLabel {
    height: 30px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-AttachmentCardAddFile {
    border: 1px dashed #ddd;
    /*text-align: center;
    color: #ddd;*/
}

.me-AttachmentContainer .moveHandler
{
    cursor: move;
    user-select: none;
}


/**********************************************/
/* 图片显示窗口 */

.me-Image {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 2px;
    border: 1px solid #ddd;
    transition: border-color .3s ease;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    cursor: zoom-in;
}

.me-Image:hover {
    border: 1px solid #5bc0de;
}

.me-ImagePlus {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 2px;
    border: 1px dashed #ccc;
    transition: border-color .3s ease;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 24px;
    line-height: 75px;
    color: #ddd;
    text-align: center;
}

.me-ImagePlus:hover {
    color: #5bc0de;
    border: 1px dashed #5bc0de;
}

.me-PictureForm {
    background-color: rgba(0, 0, 0, 0.85098);
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 2px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    width: 400px;
    height: 300px;
    position: fixed;
    z-index: 1000;
    overflow: hidden;
}

.me-PictureFormToolBar {
    height: 40px;
    width: 100%;
    line-height: 40px;
    position: absolute;
    color: white;
    text-align: right;
}

.me-PictureFormToolButton {
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
}


.me-PictureFormToolButton:hover {
    color: white;
}

.me-PictureFormCloseButton {
    background-color: rgba(0, 0, 0, .5);
    color: white;
}

.me-PictureFormCloseButton:hover {
    background-color: #ff4545;
}

.me-PictureFormBottomFoot {
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 2px;
    text-align: center;
}

.me-PictureFormBottomToolBar {
    background-color: rgba(0, 0, 0, .5);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    /*min-width: 150px;*/
    margin: 0px auto;
    display:inline-block;
}

.me-PictureFormImg {
    display: none;
    max-width: 100%;
    max-height: 100%;
}

/**********************************************/
/* Select 控件 */

.me-Select {
    
}

.me-SelectMask {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 990;
}

.me-SelectDropDown {
    /*width: 200px;*/
    width: auto;
    height: 400px;
    background-color: white;
    border: 1px solid #cccccc;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 2px 8px #ddd;
}

.me-SelectDropDown.popUp {
    border-bottom: 1px solid transparent;
}

.me-SelectDropDown.popDown {
    border-top: 1px solid transparent;
}

.me-SelectItem {
    height: 26px;
    line-height: 26px;
    padding: 0px 13px;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

.me-SelectItem:hover {
    background-color: rgb(0, 193, 222);
    color: white;
}

.me-SelectItem.selected {
    background-color: rgb(0, 193, 222);
    color: white;
}

.me-SelectItem .historyTag {
    float: right;
    color: #ddd;
    line-height: 26px;
    font-size: 12px;
}

.me-SelectNewItem {
    height: 35px;
    line-height: 35px;
    padding: 0px 13px;
    user-select: none;
    white-space: nowrap;
    text-align: right;
    background: white;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    border-top: 1px solid #ccc;
}


.me-SelectRemarkItem {
    height: 30px;
    line-height: 30px;
    padding: 0px 13px;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    color: #ccc;
    font-weight: bold;
    margin-top: 10px;
}

.me-SelectRemarkItem:first-child {
    margin-top: 0px;
}

.me-SelectSplitItem {
    height: 2px;
    line-height: 10px;
    padding: 0px 13px;
    cursor: default;
    user-select: none;
    margin-bottom: 10px;
    padding: 0px 10px;
}

.me-SelectSplitItem:after {
    content: '';
    height: 2px;
    border-bottom: 1px solid #ececec;
    display: block;
}

.me-SelectItem.me-SelectSubItem {
    position: relative;
    /* height: 25px; */
    /* line-height: 25px; */
    /* display: block; */
}

.me-SelectItem.me-SelectSubItem:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 0px;
    display: inline-block;
    width: 10px;
    height: 13px;
    /* background-color: red; */
    border: 1px dotted #ccc;
    border-style: none none dotted dotted;
}

.me-SelectItem.me-SelectSubItem:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    display: inline-block;
    width: 10px;
    height: 12px;
    /* background-color: blue; */
    border: 1px dotted #ccc;
    border-style: none none none dotted;
}

.me-SelectItem.me-SelectSubItem.level1:last-of-type:after,
.me-SelectItem.me-SelectSubItem.level2:last-of-type:after,
.me-SelectItem.me-SelectSubItem.level3:last-of-type:after,
.me-SelectItem.me-SelectSubItem.level4:last-of-type:after,
.me-SelectItem.me-SelectSubItem.level5:last-of-type:after {
    border-left: none;
}

.me-SelectItem.me-SelectSubItem.level1 span {
    margin-left: 15px;
}

.me-SelectItem.me-SelectSubItem.level2 span {
    margin-left: 25px;
}

.me-SelectItem.me-SelectSubItem.level2:before,
.me-SelectItem.me-SelectSubItem.level2:after{
    left: 25px;
}

.me-SelectItem.me-SelectSubItem.level3 span {
    margin-left: 35px;
}

.me-SelectItem.me-SelectSubItem.level3:before,
.me-SelectItem.me-SelectSubItem.level3:after{
    left: 35px;
}

.me-SelectItem.me-SelectSubItem.level4 span {
    margin-left: 45px;
}

.me-SelectItem.me-SelectSubItem.level4:before,
.me-SelectItem.me-SelectSubItem.level4:after{
    left: 45px;
}

.me-SelectItem.me-SelectSubItem.level5 span {
    margin-left: 55px;
}

.me-SelectItem.me-SelectSubItem.level5:before,
.me-SelectItem.me-SelectSubItem.level5:after{
    left: 55px;
}

.me-SelectEdit {
    outline: none;
    border: 0px solid transparent;
    position: fixed;
    padding-left: 10px;
    cursor: default;
}

input::-webkit-input-placeholder
{
    color: #ccc !important;
}

input::-moz-placeholder
{
    color: #ccc !important;
}

input:-moz-placeholder
{
    color: #ccc !important;
}

input:-ms-input-placeholder
{
    color: #ccc !important;
}

.me-MultiSelect, .me-MultiSelect[readonly] {
    cursor: default;
    background-color: white;
}

.me-MultiSelect, .me-MultiSelect.readonly {
    background-color: #eee;
}

.me-SelectDropDown >.toolBar {
    height: 40px;
    width: 100%;
    line-height: 40px;
    background-color: #efefef;
    border-bottom: 1px solid #dddddd;
    padding: 0px 5px 0px 13px;
    position: absolute;
    z-index: 1;
    top: 0px;
    cursor: pointer;
    user-select: none;
}

.me-SelectDropDown >.toolBar:hover {
    background-color: #e0e0e0;
}

/**********************************************/
/* 用户头像控件 */
.me-UserLogo {
    width: 40px;
    height: 40px;
    line-height: 40px;
    /* background-color: rgb(234, 237, 241); */
    background-image: url(../lib/meui/images/avatar_man.png);
    background-position: center;
    background-size: cover;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    display: inline-block;
    border-radius: 20px;
}

/*女性头像*/
.me-UserLogo.gril {
    background-image: url(../lib/meui/images/avatar_girl.png);
}

/*头像尺寸*/
.me-UserLogo.sm {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    border-radius: 16px;
}

.me-UserLogo.lg {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    border-radius: 30px;
}

.me-UserLogo.mx {
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 32px;
    border-radius: 45px;
}

/*方型头像*/
.me-UserLogo.square {
    border-radius: 5px;
}


/*用户信息面板*/
.me-userInfo {
    width: 350px;
    height: 150px;
    padding: 10px;
    display: none;
}

.me-userInfo >.userLogoPanel {
    width: 100px;
    height: 100%;
    float: left;
    margin-right: 10px;
}

.me-userInfo >div >.userName {
    font-size: 16px;
    color: var(--textColor);
    margin-bottom: 5px;
}

.me-userInfo > div >.userNamePinYin {
    font-size: 12px;
    /*color: rgb(85, 85, 85);*/
    margin-bottom: 5px;
}

.me-userInfo >.departName {
    line-height: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.me-userInfo >.otherInfo {
    padding-left: 105px;
}

/**********************************************/
/* 用户标签控件 */

.me-UserLabel {
    cursor: default;
}

.me-UserLabel.style1 {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.me-UserLabel.style2 {
    text-decoration: underline;
}

.me-UserLabel.style3 {
    color: var(--textColor);
}

.me-UserLabel.style3:hover {
    text-decoration: underline;
}

/**********************************************/
/* 列表图标*/

.me-StatusIcon {
    margin-right: 5px;
}

.me-StatusIcon:last-child {
    margin-right: 0px;
}

/*图标因为状态的原因不显示，但位置还是要保留*/
.me-StatusIcon.hideIcon:before {
    color: transparent;
    display: inline-block;
}

/**********************************************/
/* CheckBox 和 RadioButton*/

.me-CheckBox {
    display: inline-block;
    cursor: pointer;
    line-height: 34px;
    transition: all .55s ease;
    margin-right: 10px;
    vertical-align: middle;
    /*user-select: none;*/
}

.me-CheckBox input[type=checkbox] {
    display: none;
}

.me-CheckBox .me-Clicker {
    float: left;
    line-height: normal;
    padding-top: 9px;
}

.me-CheckBox .me-Clicker:after {
    color: #ccc;
    width: 19px;
    height: 19px;
    content: "\f0c8";
    font-weight: 900;
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    vertical-align: middle;
}

.me-CheckBox input:checked + .me-Clicker:after {
    color: rgb(0, 193, 222);
    content: "\f14a";
    font-weight: 900;
}

.me-CheckBox input[disabled]:checked + .me-Clicker:after {
    color: #ccc;
    cursor: default;
}

.me-CellCheckBox {
    text-align: center;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.me-CellCheckBox.unchecked:before {
    content: "\f0c8";
    font-weight: 900;
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4em;
    color: rgb(204, 204, 204);
    top: 1px;
    position: absolute;
}

.me-CellCheckBox.checked:before {
    content: "\f14a";
    font-weight: 900;
    display: inline-block;
    font: normal normal 900 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4em;
    position: absolute;
    top: 1px;
}

.me-CellCheckBox .me-CellCheckBoxLabel {
    margin-left: 20px;
}

.me-CheckBox.me-CellCheckBox {
    margin-right: 0px;
    height: auto;
    line-height: normal;
}

td .me-CellCheckBox {
    line-height: unset;
}

/**文本方式显示的 ChckBox*/
.me-TextCheckBox {
    height: 2rem;
    line-height: 2rem;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 25px;
}

/*带鼠标移入灰底风格*/
.me-TextCheckBox.hover:hover {
    background-color: #EFEFEF;
}

.me-TextCheckBox.unchecked:before {
    line-height: 2rem;
    content: "\f0c8";
    font-weight: 900;
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4rem;
    color: rgb(204, 204, 204);
    top: calc((100% - 1.4rem) / 2);
    left: 0px;
    margin-right: 10px;
    width: 15px;
    vertical-align: middle;
    position: absolute;
}

.me-TextCheckBox.checked:before {
    line-height: 2rem;
    content: "\f14a";
    display: inline-block;
    font: normal normal 900 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4em;
    top: calc((100% - 1.4rem) / 2);
    left: 0px;
    margin-right: 10px;
    color: var(--backColor);
    width: 15px;
    vertical-align: middle;
    position: absolute;
}

.me-TextCheckBox.disabled.unchecked:before {
    font-weight: 900;
}

.me-TextCheckBox.disabled.checked:before {
    color: rgb(204, 204, 204);
}


.me-RadioButton {
    display: inline-block;
    cursor: pointer;
    line-height: 33px;
    transition: all .55s ease;
    margin-right: 10px;
    vertical-align: middle;
    /*user-select: none;*/
}

.me-RadioButton input[type=radio] {
    display: none;
}

.me-RadioButton .me-Clicker {
    float: left;
}

.me-RadioButton .me-Clicker:after {
    color: #ccc;
    width: 14px;
    height: 16px;
    display: inline-block;
    content: "\f111";
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    font-size: 1.4em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    vertical-align: middle;
}

.me-RadioButton input:checked + .me-Clicker:after {
    color: rgb(0, 193, 222);
    content: "\f192";
}


/*表格下的控件*/
.me-GridTable .me-CheckBox, .me-GridTable .me-RadioButton {
    line-height: 18px;
}

/*单元格下面的文本标识控件*/
td .me-CellTextTag {
    font-size: 12px;
    min-width: 55px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0px 10px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    cursor: default;
}

/*无数据*/
td .me-CellTextTag.none {
    color: #ccc;
    border-color: #eee;
}

/*无数据-反转颜色*/
td .me-CellTextTag.none.inverse {
    color: #555;
    background-color: #eee;
}

/*黑色标识*/
td .me-CellTextTag.done {
    color: #555;
    border-color: #555;
}

/*黑色标识-反转颜色*/
td .me-CellTextTag.done.inverse {
    color: white;
    background-color: #555;
}

/*蓝色标识*/
td .me-CellTextTag.primary {
    color: #1565AC;
    border-color: #1565AC;
}

/*蓝色标识-反转颜色*/
td .me-CellTextTag.primary.inverse {
    color: white;
    background-color: #1565AC;
}

/*绿色标识*/
td .me-CellTextTag.success {
    color: #390;
    border-color: #390;
}

/*绿色标识-反转颜色*/
td .me-CellTextTag.success.inverse {
    color: white;
    background-color: #390;
}

/*红色标识*/
td .me-CellTextTag.danger {
    color: #FC6E51;
    border-color: #FC6E51;
}

/*红色标识-反转颜色*/
td .me-CellTextTag.danger.inverse {
    color: white;
    background-color: #FC6E51;
}

/*橙色标识*/
td .me-CellTextTag.warn {
    color: #F90;
    border-color: #F90;
}

/*橙色标识-反转颜色*/
td .me-CellTextTag.warn.inverse {
    color: white;
    background-color: #F90;
}

/**********************************************/
/* 模板编辑控件 */
.me-TemplateEditor {
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
}

.me-TemplateEditor .editor {
    height: calc(100% - 30px);
    line-height: 25px;
    outline: 0;
    box-sizing: border-box;
    padding: 10px;
    -webkit-user-modify: read-write-plaintext-only !important;
    overflow-y: auto;
}

.me-TemplateEditor .footer {
    background-color: #f8f8f8;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    padding: 0px 10px;
    text-align: right;
    user-select: none;
    font-size: 12px;
}

.me-TemplateEditor .footer >.me-LinkButton >.fa {
    margin-right: 2px;
}

.me-TemplateEditor .macro {
    -webkit-user-modify: read-only;
    /*font-weight: bold;
    text-decoration: underline;*/
    cursor: default;
    background-color: var(--backColor);
    color: white;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    padding: 0px 5px;
    margin: 0px 2px;
    border-radius: 3px 3px;
    /*user-select: none;*/
}

.me-TemplateEditor .macro:hover {
    background-color: var(--middleColor);
}

.me-TemplateEditor:focus-within {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

/**********************************************/
/* 报告单编辑控件 */

.cke_chrome {
    border-radius: 3px 3px !important;
}

.me-ReportTemplateEdit {
    min-height: 200px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
    outline: 0;
    position: relative;
}

.me-ReportTemplateEdit > .editor {
    height: calc(100% - 30px);
    line-height: 25px;
    outline: 0;
    box-sizing: border-box;
    padding: 20px;
    -webkit-user-modify: read-write-plaintext-only !important;
    overflow-y: auto;
}

.me-ReportTemplateEdit > .toolbar {
    color: #484848;
    background-color: #f8f8f8;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    padding: 0px 5px;
    user-select: none;
    font-size: 12px;
    position: absolute;
    left: 1030px;
    top: 0px;
}

.me-ReportTemplateEdit .cke_chrome {
    border: 0px;
}

.me-ReportTemplateEdit > .toolbar >.me-SpeedButton {
    border-radius: 0px;
    border: 1px solid transparent;
}

.me-ReportTemplateEdit > .toolbar >.me-SpeedButton:hover {
    border: 1px #bcbcbc solid;
    background-color: #e5e5e5;
}

.me-ReportTemplateEdit:focus-within {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.me-ReportTemplateChart {
    -webkit-user-modify: read-only;
    width: 100%;
    border: 1px solid #555;
    cursor: auto;
    margin: 10px 0px;
    padding: 15px;
    display: inline-block;
    position: relative;
    transition: all .1s ease;
}

.me-ReportTemplateChart > .reportName {
    font-size: 18px;
    color: #999;
    line-height: 40px;
    pointer-events: none;
    user-select: none;
    text-align: center;
}

.me-ReportTemplateChart > .btnRemove {
    position: absolute;
    right: 7px;
    top: 5px;
}

.me-ReportTemplateChart > .btnParams {
    position: absolute;
    right: 35px;
    top: 5px;
}

.me-ReportTemplateChart:focus {
    background-color: #5D9CEC;
}

.me-ReportTemplateChart:focus, .me-ReportTemplateChart:focus >.reportName {
    color: white;
}

.me-ReportTemplateChart > .chartDemo {
    height: 250px;
    pointer-events: none;
    user-select: none;
}

.me-ReportTemplateChart > .chartDemo.pie {
    background: url(/images/reporttemplateedit/pie-chart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.me-ReportTemplateChart > .chartDemo.line {
    background: url(/images/reporttemplateedit/line-chart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.me-ReportTemplateChart > .chartDemo.bar {
    background: url(/images/reporttemplateedit/bar-chart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.me-ReportTemplateMacro {
    -webkit-user-modify: read-only;
    cursor: default;
    display: inline-block;
    padding: 0px 55px 0px 5px;
    margin: 0px 5px;
    border-radius: 3px 3px;
    transition: all .1s ease;
    position: relative;
    text-decoration-style: double;
    text-decoration-color: var(--backColor);
    text-decoration-line: underline;
    cursor: pointer;
}

.me-ReportTemplateMacro:focus {
    background-color: #5D9CEC;
    color: white;
}

.me-ReportTemplateMacro > .btnRemove {
    position: absolute;
    right: 7px;
    top: 0px;
}

.me-ReportTemplateMacro > .btnParams {
    position: absolute;
    right: 25px;
    top: 0px;
}

.me-ReportTemplateTable {
    -webkit-user-modify: read-only;
    width: 100%;
    border: 1px solid #555;
    cursor: auto;
    margin: 10px 0px;
    padding: 15px;
    display: inline-block;
    position: relative;
    transition: all .1s ease;
}

.me-ReportTemplateTable > .reportName {
    font-size: 18px;
    color: #999;
    line-height: 40px;
    pointer-events: none;
    user-select: none;
    text-align: center;
}

.me-ReportTemplateTable > .btnRemove {
    position: absolute;
    right: 5px;
    top: 5px;
}

.me-ReportTemplateTable > .btnParams {
    position: absolute;
    right: 35px;
    top: 5px;
}

.me-ReportTemplateTable:focus {
    background-color: #5D9CEC;
}

.me-ReportTemplateTable:focus, .me-ReportTemplateTable:focus >.reportName {
    color: white;
}

.me-ReportTemplateTable > .tableDemo {
    background: url(/images/reporttemplateedit/table-demo.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    height: 190px;
    pointer-events: none;
    user-select: none;
}

.me-ReportTemplateLoop {
    border: 1px solid #555;
    min-height: 250px;
    outline: 0;
    position: relative;
    z-index: 1;
}

.me-ReportTemplateLoop > .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #999;
    pointer-events: none;
    user-select: none;
    border-bottom: 1px dashed #ccc;
    padding: 0px 10px;
}

.me-ReportTemplateLoop > .btnRemove {
    position: absolute;
    right: 7px;
    top: 5px;
}

.me-ReportTemplateLoop > .content {
    height: 100%;
    padding: 0px 20px;
}

.me-ReportTemplateLoop > .content:focus {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.cke_float .cke_top {
	border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

/**********************************************/
/* 在线代码编辑控件 */

.ace_editor {
    border-radius: 3px 3px !important;
}

.ace_editor:focus-within {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.ace_editor.ace_autocomplete {
    width: 400px;
    line-height: 20px;
}

/**********************************************/

/* 列表容器及列表项 */
.me-ListItemPanel {
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
    padding: 1px 0px; 
    overflow-y: auto;
}

.me-ListItemPanel >.me-GroupItem {   /*分组或标题栏，不可选择和鼠标在上面不会显示高亮，底下有划线*/
    cursor: default;
    line-height: 1.5rem;
    padding: 5px 10px;
    font-weight: bold;
    color: #999;
    border-bottom: 1px dotted #ccc;
    margin-top: 20px;
}

.me-ListItemPanel > .me-GroupItem:first-child {
    margin-top: 0px;
}

.me-ListItemPanel >.me-ListItem {
    cursor: default;
    line-height: 1.5rem;
    padding: 5px 10px;
}

.me-ListItemPanel >.me-ListItem:hover {
    background-color: rgba(200, 200, 200, 0.4);
}

.me-ListItemPanel >.me-ListItem.active {
    background-color: var(--backColor);
    color: white;
}

.me-ListItemPanel >.me-ListItem.active .me-TextCheckBox.checked:before {
    color: white;
}

.me-ListItemPanel.readonly {
    background-color: #ececec;
}

.me-ListItemPanel.readonly >.me-ListItem:hover {
    background-color: transparent;
}

.me-ListItemPanel > .me-ListItem .me-SpeedButton {
    margin-top: -2px;
}


/**********************************************/

/* 带边框的容器控件 */
.me-ContainerPanel {
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
    padding: 10px;
    overflow-y: auto;
}

/**********************************************/
/* 类似 Word 样式的容器控件，用于展现文档内容 */
.me-DocumentContainer {
    width: 100%;
    background-color: #eeeeee;
    padding-top: 0.1px;
    padding-bottom: 0.1px;
    border: 1px solid #ccc;
    border-radius: 3px 3px;
}

.me-DocumentContainer > .toolbar {
    color: #484848;
    background-color: #f8f8f8;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    user-select: none;
    font-size: 12px;
    overflow: hidden;
}

.me-DocumentContainer > .toolbar .cke_chrome {
    border: 0px;
}

.me-DocumentContainer > .contentContainer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.me-DocumentContainer > .toolbar ~ .contentContainer {
    width: 100%;
    height: calc(100% - 42px);
    overflow-y: auto;
}

.me-DocumentContainer > .contentContainer >.content {
    background-color: white;
    width: 26cm;
    min-height: 21cm;
    padding: 1cm;
    margin: 30px auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgb(180, 180, 180);
    outline: 0;
}

.me-DocumentContainer > .contentContainer >.content:focus-within {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

/**********************************************/
/*单据信息头块风格*/
.me-BillInfoBlock {
    padding: 10px 20px;
    background-color: var(--grayBackColor);
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px 5px;
}

.me-BillInfoBlock >.title {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid var(--grayBorderColor);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.me-BillInfoBlock >.title .label {
    font-size: 12px;
}

.me-BillInfoBlock > .content {
    min-height: 30px;
    font-size: 12px;
}

/**********************************************/
/* 四分位图*/

.boxChart {
    position: relative;
}

.boxChart > svg > .backBlock {
    display: none;
    fill: rgba(84,112,198, 0.05);
    transition: x .1s ease, y .1s ease;
}

.boxChart:hover > svg > .backBlock {
    display: block;
}

.boxChart:hover > .popInfo {
    width: 200px;
    left: 20px;
    top: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0px 10px rgba(171,171,171,.7);
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    transition: left .1s ease, top .1s ease;
}

.boxChart:hover > .popInfo > .popInfoItem {
    line-height: 20px;
}

.boxChart:hover > .popInfo > .popInfoItem > .dot {
    width: 10px;
    height: 10px;
    border-radius: 5px 5px;
    display: inline-block;
    background-color: rgb(84,112,198);
    margin-right: 5px;
}

/**********************************************/
/* 内容块控件*/
.me-ContentBlock {
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
    border-top: 3px solid var(--hoverBackColor);
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
    box-shadow: 0 7px 8px rgba(171,171,171, 0.2);
    -webkit-box-shadow: 0 7px 8px rgba(171,171,171, 0.2);
}

.me-ContentBlock > .blockTitle {
    width: 250px;
    height: 29px;
    line-height: 29px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    background-color: var(--hoverBackColor);
    color: white;
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    left: 0px;
    top: -15px;
    padding: 0px 10px;
    cursor: pointer;
    box-shadow: 0px 0px 5px var(--middleColor);
}

.me-ContentBlock > .blockTitle:hover, .me-ContentBlock:focus-within > .blockTitle {
    background-color: var(--backColor);
}

.me-ContentBlock > .collectBtn {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: white;
    color: var(--backColor);
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 0px 0px 3px rgb(155,155,155);
    position: absolute;
    left: 242px;
    top: -8px;
    font-size: 12px;
}

.me-ContentBlock > .content {
    padding: 20px;
    padding-top: 30px;
}

.me-ContentBlock.collected {
    height: 40px;
}

.me-ContentBlock.collected > .content {
    display: none;
}

/**********************************************/
/* 进度条*/
.me-ProgressBarContainer {

}

.me-ProgressBarContainer > .barContainer, .me-ProgressBarContainer > .barContainer > .bar {
    height: 5px;
    border-radius: 5px;
    transition: width 1s ease;
}


/**********************************************/
/* 水滴式进度条*/
.me-WaterProgressBarContainer {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-color: var(--middleColor); /*#0384ce;*/
    box-shadow: 0px 0px 20px #ccc;
}

.me-WaterProgressBarContainer >.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 50%;
}

.me-WaterProgressBarContainer > .wave::before, .me-WaterProgressBarContainer > .wave::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 10;

    /*圆形容器（足够覆盖整个进度圆）*/
    width: 800px;
    height: 800px;
    border-radius: 45%;

    /*一定透明度的白色背景*/
    background-color: rgba(255, 255, 255, 0.8);

    /*挪到合适的位置*/
    transform: translateX(-50%) rotate(0);

    /*旋转动画*/
    animation: waterRotate 6s linear infinite;
}

/*双重波浪*/
.me-WaterProgressBarContainer > .wave::after {
    border-radius: 48%;

    /*挪到合适的位置*/
    transform: translateX(-50%) rotate(0);

    /*旋转动画*/
    animation: waterRotate 10s linear -5 infinite;

    z-index: 20;
}

/*进度文本*/
.me-WaterProgressBarContainer > .text {
    position: absolute;
    left: 0px;
    display: block;
    text-align: center;
    z-index: 21;
    width: 100%;
    height: 100%;
    color: white;
}

.me-WaterProgressBarContainer > .text::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 1px #ccc;
    z-index: 20;
}

@keyframes waterRotate {
    50% {
        transform: translateX(-50%) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/**********************************************/
/* 单元格进度条*/
.me-CellProgressBar {
    position: relative;
}

.me-CellProgressBar >.value {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    text-align: right;
}

/**********************************************/
/* 日期标签控件，如审批流 */
.me-DateLabelContainer {
    display: block;
    text-align: center;
    color: black;
    cursor: default;
}

.me-DateLabelContainer > .day {
    font-size: 24px;
    line-height: 30px;
}

.me-DateLabelContainer > .month {
}

/**********************************************/
/* 加密水印用风格设置 */
.me-WaterMask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
}

.me-WaterMask >.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.me-WaterMask >.container >.subContainer {
    position: absolute;
    left: -1000px;
    top: -1000px;
    right: -1000px;
    bottom: -1000px;
    transform: rotate(-30deg);
}

.me-WaterMask >.container >.subContainer >.item {
    color: rgba(90, 90, 90, 0.1);
    font-size: 16px;
    width: 400px;
    height: 200px;
    float: left;
    user-select: none;
}

/**********************************************/
/*水平拖拉器*/
.me-horize-spliter {
    width: 5px;
    height: 100%;
    background-color: white;
    cursor: e-resize;
    user-select: none;
}

/**********************************************/
/* 面包屑控件 */
.me-BreadCrumbs {
}

.me-BreadCrumbs >.item {
    margin-right: 10px;
}

.me-BreadCrumbs > .item:after {
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    margin-left: 10px;
}

.me-BreadCrumbs > .item:last-child:after {
    content: '';
}

/**********************************************/
/* 重写原生控件风格*/
textarea {
    resize: none;
}

/*去除上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none; 
    margin: 0; 
}

input{
    -moz-appearance:textfield;
}

/* 重写 Bootstrap 风格*/
.btn-group, .btn-group-vertical {
    vertical-align: inherit;
}

.form-control, .btn {
    font-size: 1rem;
    border-radius: 3px 3px;
}

.btn-gray {
    background-color: rgb(247, 247, 247);
    color: #333;
    border-color: #ccc;
}

.btn-gray:focus,
.btn-gray.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}
.btn-gray:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-gray:active,
.btn-gray.active,
.open > .dropdown-toggle.btn-gray {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-gray:active:hover,
.btn-gray.active:hover,
.open > .dropdown-toggle.btn-gray:hover,
.btn-gray:active:focus,
.btn-gray.active:focus,
.open > .dropdown-toggle.btn-gray:focus,
.btn-gray:active.focus,
.btn-gray.active.focus,
.open > .dropdown-toggle.btn-gray.focus {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}
.btn-gray:active,
.btn-gray.active,
.open > .dropdown-toggle.btn-gray {
    background-image: none;
}
.btn-gray.disabled:hover,
.btn-gray[disabled]:hover,
fieldset[disabled] .btn-gray:hover,
.btn-gray.disabled:focus,
.btn-gray[disabled]:focus,
fieldset[disabled] .btn-gray:focus,
.btn-gray.disabled.focus,
.btn-gray[disabled].focus,
fieldset[disabled] .btn-gray.focus {
    background-color: #fff;
    border-color: #ccc;
}
.btn-gray .badge {
    color: #fff;
    background-color: #333;
}

.btn-clear {
    color: #333;
    background-color: transparent; /*#fff;*/
    border-color: transparent;
}
.btn-clear:focus,
.btn-clear.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}
.btn-clear:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-clear:active,
.btn-clear.active,
.open > .dropdown-toggle.btn-clear {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-clear:active:hover,
.btn-clear.active:hover,
.open > .dropdown-toggle.btn-clear:hover,
.btn-clear:active:focus,
.btn-clear.active:focus,
.open > .dropdown-toggle.btn-clear:focus,
.btn-clear:active.focus,
.btn-clear.active.focus,
.open > .dropdown-toggle.btn-clear.focus {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}
.btn-clear:active,
.btn-clear.active,
.open > .dropdown-toggle.btn-clear {
    background-image: none;
}
.btn-clear.disabled:hover,
.btn-clear[disabled]:hover,
fieldset[disabled] .btn-clear:hover,
.btn-clear.disabled:focus,
.btn-clear[disabled]:focus,
fieldset[disabled] .btn-clear:focus,
.btn-clear.disabled.focus,
.btn-clear[disabled].focus,
fieldset[disabled] .btn-clear.focus {
    background-color: #fff;
    border-color: #ccc;
}
.btn-clear .badge {
    color: #fff;
    background-color: #333;
}



.btn-clear-theme {
    color: var(--textColor) !important;
    background-color: transparent; /*#fff;*/
    border-color: transparent;
}
.btn-clear-theme:focus,
.btn-clear-theme.focus {
    color: var(--textColor);
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}
.btn-clear-theme:hover {
    color: var(--textColor);
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-clear-theme:active,
.btn-clear-theme.active,
.open > .dropdown-toggle.btn-clear-theme {
    color: var(--textColor) !important;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-clear-theme:active:hover,
.btn-clear-theme.active:hover,
.open > .dropdown-toggle.btn-clear-theme:hover,
.btn-clear-theme:active:focus,
.btn-clear-theme.active:focus,
.open > .dropdown-toggle.btn-clear-theme:focus,
.btn-clear-theme:active.focus,
.btn-clear-theme.active.focus,
.open > .dropdown-toggle.btn-clear-theme.focus {
    color: var(--textColor) !important;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}
.btn-clear-theme:active,
.btn-clear-theme.active,
.open > .dropdown-toggle.btn-clear-theme {
    background-image: none;
}
.btn-clear-theme.disabled:hover,
.btn-clear-theme[disabled]:hover,
fieldset[disabled] .btn-clear-theme:hover,
.btn-clear-theme.disabled:focus,
.btn-clear-theme[disabled]:focus,
fieldset[disabled] .btn-clear-theme:focus,
.btn-clear-theme.disabled.focus,
.btn-clear-theme[disabled].focus,
fieldset[disabled] .btn-clear-theme.focus {
    background-color: #fff;
    border-color: #ccc;
}
.btn-clear-theme .badge {
    color: #fff;
    background-color: var(--textColor) !important;
}



.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}

.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-image: none;
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-info .badge {
    color: #5bc0de;
    background-color: #fff;
}


/*当前主题色的按钮，在主题 CSS　中会被替换成指定的颜色，但默认是蓝色*/
.btn-theme {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-theme:focus,
.btn-theme.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}

.btn-theme:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

.btn-theme:active:hover,
.btn-theme.active:hover,
.open > .dropdown-toggle.btn-theme:hover,
.btn-theme:active:focus,
.btn-theme.active:focus,
.open > .dropdown-toggle.btn-theme:focus,
.btn-theme:active.focus,
.btn-theme.active.focus,
.open > .dropdown-toggle.btn-theme.focus {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}

.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
    background-image: none;
}

.btn-theme.disabled:hover,
.btn-theme[disabled]:hover,
fieldset[disabled] .btn-theme:hover,
.btn-theme.disabled:focus,
.btn-theme[disabled]:focus,
fieldset[disabled] .btn-theme:focus,
.btn-theme.disabled.focus,
.btn-theme[disabled].focus,
fieldset[disabled] .btn-theme.focus {
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-theme .badge {
    color: #5bc0de;
    background-color: #fff;
}



/*分页控件用到*/
.btn-group-sm .btn {
    padding : 3px 8px;
}

/*解决使用了 btn-gray 之后不能用 btn-info 替换*/
.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}
.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-image: none;
}
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info .badge {
    color: #5bc0de;
    background-color: #fff;
}

.input-group input.form-control {
    height: 34px;
}

.input-group .btn {
    height: 34px;
}


.dropdown-menu {
    font-size: 1rem;
}


label {
    font-weight: normal;
}


/* 为 Bootstrap 添加子菜单功能 */

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/*带图标编辑框*/
.form-group {
    margin-bottom: 0px;
}

.label-default {
    background-color: rgb(200, 200, 200);
}


.me-combodaterange {
    height: 34px;
    display: flex;
    position: relative;
    gap: 5px;
}

.me-combodaterange > .daterangeInput {
    line-height: 34px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 0px 15px;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

.me-combodaterange > .daterangeInput:focus {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px gba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px gba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.me-combodaterange > .daterangeInput >.popup
{
    position: absolute;
    left: 0px;
    top: calc(100% + 0px);
    border: 1px solid #cccccc;
    background-color: white;
    box-shadow: 0px 0px 10px #ccc;
    width: 275px;
    opacity: 0;
    transition: opacity 0.1s ease-out 0.25s; 
    z-index: 11;
    pointer-events: none;
    padding: 20px;
}

.me-combodaterange > .daterangeInput:focus >.popup
{
    opacity: 1;
    pointer-events: auto;
}
.me-combodaterange > .daterangeInput >.popup > .title
{
    color: #ccc;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

.me-combodaterange > .daterangeInput >.popup > .title:first-child
{
    margin-top: 0px;
}

.me-combodaterange > .daterangeInput >.popup > .title:before
{
    content: ' ';
    display: block;
    flex-grow: 1;
    height: 15px;
    border-bottom: 1px solid #eee;
    margin-right: 10px;
}

.me-combodaterange > .daterangeInput >.popup > .title:after
{
    content: ' ';
    display: block;
    flex-grow: 1;
    height: 15px;
    border-bottom: 1px solid #eee;
    margin-left: 10px;
}

.me-combodaterange > .daterangeInput >.popup > .btnPanel
{
    line-height: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.me-combodaterange > .daterangeInput >.popup > .btnPanel >.me-ButtonSplite
{
    margin-left: 15px;
    margin-right: 15px;
}

.me-combodaterange > input {
    width: 200px;
}

.me-poptitle {
    display: flex;
    flex-direction: row;
    position: fixed;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    left: 0px;
    top: 0px;
    width: 260px;
    z-index: 99;
    padding: 10px;
    align-items: center;
    user-select: none;
    box-shadow: 0px 0px 5px #ccc;
}

.me-poptitle >.icon {
    width: 30px; 
    height: 30px;
    text-align: center;
    margin-right: 10px;
}

.me-poptitle >.text {
    flex-grow: 1;
    max-height: 200px;
}

.me-poptitle >.close {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    position: relative;
    font-size: 14px;
    opacity: 1;
}

.me-poptitle >.close >.closeBtn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 5px;
    text-align: center;
    border-radius: 3px;
}

.me-poptitle >.close >.closeBtn:hover {
    background-color: #aaa;
    color: white;
}

.me-poptitle > .arrow
{
    width: 0px;
    height: 0px;
    border-bottom: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    left: 126px; /* 260 / 2 - 4*/
    top: -8px;
}
/******* 这个文件放置要重写颜色的代码 ****/

a {
    color: var(--textColor);
}


/**当前主题的按钮色*/

.btn-theme {
    color: #fff;
    background-color: var(--backColor);
    border-color: var(--borderColor);
}

.btn-theme:focus, .btn-theme:hover {
    color: #fff;
    background-color: var(--hoverBackColor);
    border-color: var(--hoverBorderColor);
}


.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
    color: #fff;
    background-color: var(--hoverBackColor);
    border-color: var(--hoverBorderColor);
}

.btn-theme:active:hover,
.btn-theme.active:hover,
.open > .dropdown-toggle.btn-theme:hover,
.btn-theme:active:focus,
.btn-theme.active:focus,
.open > .dropdown-toggle.btn-theme:focus,
.btn-theme:active.focus,
.btn-theme.active.focus,
.open > .dropdown-toggle.btn-theme.focus {
    color: #fff;
    background-color: var(--hoverBackColor);
    border-color: var(--hoverBorderColor);
}

.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
    background-image: none;
}

.btn-theme.disabled:hover,
.btn-theme[disabled]:hover,
fieldset[disabled] .btn-theme:hover,
.btn-theme.disabled:focus,
.btn-theme[disabled]:focus,
fieldset[disabled] .btn-theme:focus,
.btn-theme.disabled.focus,
.btn-theme[disabled].focus,
fieldset[disabled] .btn-theme.focus {
    background-color: var(--disableBorderColor);
    border-color: var(--disableBorderColor);
}

.btn-theme .badge {
    color: #0D6649;
    background-color: #fff;
}

.form-control:focus, .me_FocusControl {
    border-color: var(--backColor);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--middleColor);
}

.me_AppTitleBackground {
    background: linear-gradient(to right, #28D199, #1C90A3);
}

/*模块标题，蓝字中等大小*/
.me-ModuleHeadText {
    color: var(--textColor);
}

/* 帮助提示符号，请配合 fa 类使用*/
.me-HelpIcon {
    color: var(--textColor);
}

.me-HelpIconOnEditRight {
    color: var(--textColor);
}

.me-HelpIconOnLabelRight:hover {
    color: var(--textColor);
}

/* 超链接风格按钮*/
.me-LinkButton {
    color: var(--textColor);
}

/*灰色超链接按钮焦点风格*/
.me-LinkButton.grayButton:hover, .me-LinkButton.blackButton:hover, .me-LinkButton.redButton:hover {
    color: var(--textColor);
}

/*当前标签或激活*/
.me-TabControl .me-TabItem:hover, .me-TabControl .me-Active {
    /*border-bottom: 2px solid var(--backColor);*/
    color: var(--textColor);
}

.me-TabControl .me-TabItem:hover:before, .me-TabControl .me-Active:before {
    content: ' ';
    height: 2px;
    width: calc(100% - 30px);
    bottom: 0px;
    position: absolute;
    display: block;
    background-color: var(--backColor);
    color: var(--textColor);
}

.me-TabControl.me-TabButtonStyle .me-TabItem:hover:before, .me-TabControl.me-TabButtonStyle .me-Active:before,
.me-TabControl.me-TabTabStyle .me-TabItem:hover:before, .me-TabControl.me-TabTabStyle .me-Active:before {
    display: none;
}

.me-TabControl.me-TabButtonStyle .me-TabItem:hover, .me-TabControl.me-TabButtonStyle .me-TabItem.me-Active {
    background-color: var(--backColor);
}

.me-TabControl.me-TabTabStyle .me-TabItem.me-Active {
    border-top: 2px solid var(--backColor);
}

.me-ButtonGroup .me-Button.active {
    border: 1px solid var(--backColor);
    color: var(--textColor);
}

.me-ButtonGroup .me-Button.active:after {
    background-color: var(--backColor);
}

/*加载更多行*/
.me-GridLoadMore {
    color: white;
    background-color: var(--backColor);
}

.me-GridLoadMore:hover {
    background-color: var(--middleColor);
}

/*目录树节点选中*/
.me-TreeNode .me-TreeNodeSelected .me-TreeNodeText {
    background-color: var(--backColor);
}

/**多选框容器鼠标显示背景色*/
.me-TreeNodeCheckIcon:hover {
    background-color: var(--middleColor); /*rgba(21, 181, 143, 0.6);*/
}

.me-AttachmentTableFileName:hover {
    color: var(--textColor);
}

.me-SelectItem:hover {
    background-color: var(--hoverSelectedColor);
    color: inherit;
}

.me-SelectItem.selected {
    background-color: var(--backColor); /*rgb(21, 181, 143);*/
    color: white;
}

.me-SelectItem:hover.selected {
    color: white;
}

.me-CheckBox input:checked + .me-Clicker:after {
    color: var(--textColor);
}

.me-CellCheckBox.checked:before {
    color: var(--textColor);
}

.me-RadioButton input:checked + .me-Clicker:after {
    color: var(--textColor);
}

.me-GridSelectedRow {
    /*background-color: var(--gridSelectedColor);*/
}

.me-GridSelectedRow:hover {
    /*background-color: var(--hoverSelectedColor) !important;*/
}

/* 设置按钮颜色为主题色 */
.me-SpeedButton.me-ThemeColor {
    color: var(--textColor);
}

/* 表格内的按钮设置为灰色，移上去才有颜色 */
tr td .me-SpeedButton.me-ThemeColor {
    color: var(--textColor);
}

/* 表格内的按钮设置为灰色，移上去才有颜色 */
tr:hover td .me-SpeedButton.me-ThemeColor, .me-GridSelectedRow .me-SpeedButton.me-ThemeColor {
    color: var(--textColor);
}
body {
    color: #768E91;

    --backColor: #15B58F;
    --hoverBackColor: #14996D;
    --textColor: #15B58F;
    --borderColor: rgba(13, 102, 73, 0.3);
    --hoverBorderColor: #0D6649;
    --disableBackColor: #0D6649;
    --disableBorderColor: #0D6649;
    --gridSelectedColor: rgba(21, 181, 143, 0.1); /* 透明度为0.1的#15B58F */
    --hoverSelectedColor: rgba(21, 181, 143, 0.2); /* 透明度为0.2的#15B58F */
    --middleColor: rgba(21, 181, 143, 0.6); /* 透明度为0.6的#15B58F */
    --grayBackColor: #F6F6F6;
}

.me-empselect {
    min-height: 100px;
    background-color: white;
}

.me-empselect .userListContainer {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 0px;
    border: 1px solid #f5f5f6;
}

.me-empselect .userListContainer .dataItem {
    width: 450px;
    height: 44px;
    line-height: 44px;
    background-color: #f5f5f6;
    margin-bottom: 10px;
    margin-right: 20px;
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 10px;
    position: relative;
}

/* 只是为了使用 v-if */
.me-empselect .userListContainer .dataItem .dataItemContainer {
    width: 100%;
    height: 100%;
}

.me-empselect .userListContainer .dataItem .itemIcon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px 16px;
    text-align: center;
    color: white;
    font-size: 20px;
    display: inline-block;
    margin-top: 6px;
    margin-right: 10px;
    float: left;
}

.me-empselect .userListContainer .userItem {
    display: inline-block;
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.me-empselect .userListContainer .departItem {
    display: inline-block;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-empselect .userListContainer .dutyItem {
    display: inline-block;
    width: 50px;
}

.me-empselect .userListContainer .dataItem .excludeItem {
    display: inline-block;
    width: 160px;
    color: rgb(255, 128, 128);
}

.me-empselect .userListContainer .dataItem .me-SpeedButton {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
}

.me-empselect .userListContainer .dataItem:hover .me-SpeedButton {
    display: block;
}



.me-empselect .userListContainer .iconDataItem {
    width: 110px;
    height: 90px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px 5px;
    position: relative;
}

.me-empselect .userListContainer .iconDataItem:hover {
    background-color: #ececec;
    border-radius: 5px;
}

/* 只是为了使用 v-if */
.me-empselect .userListContainer .iconDataItem .dataItemContainer {
    width: 100%;
    height: 100%;
}

.me-empselect .userListContainer .iconDataItem .btnIconRemove {
    position: absolute;
    right: 5px;
    top: 1px;
    display: none;
}

.me-empselect .userListContainer .iconDataItem:hover .btnIconRemove {
    display: block;
}

.me-empselect .userListContainer .iconDataItem .itemIcon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px 16px;
    text-align: center;
    color: white;
    font-size: 20px;
    text-align: center;
    display: inline-block;
}

.me-empselect .userListContainer .iconDataItem .itemText {
    height: 20px;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-empselect .userListContainer .iconDataItem .excludeItem {
    color: rgb(255, 128, 128);
}

.me-empselect .iconColor1 {
    background-color: #15B58F;
}

.me-empselect .iconColor2 {
    background-color: rgb(204, 115, 255);
}

.me-empselect .iconColor3 {
    background-color: rgb(0, 193, 222);
}

.me-empselect .iconColor4 {
    background-color: rgb(91, 133, 224);
}

.me-empselectSchemeItem {
    display: block;
    line-height: 25px;
    height: 25px;
    width: 200px;
    position: relative;
}

.me-empselectSchemeItem .me-SpeedButton {
    display: none;
}

.me-empselectSchemeItem:hover .me-SpeedButton {
    display: block;
}

.me-empselectSchemeItem .editBtn {
    position: absolute;
    top: -5px;
    right: 30px;
}

.me-empselectSchemeItem .removeBtn {
    position: absolute;
    top: -5px;
    right: 5px;
}


.me-empselect.fullScreen {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100% !important;
    z-index: 600;
    padding: 10px;
}
.me-empinfo {
    min-width: 300px;
    height: 34px;
    line-height: 34px;
    background-color: #f5f5f6;
    box-sizing: border-box;
    padding: 0px 10px;
}

.me-empinfo .sex-male {
    color: #0384ce;
}

.me-empinfo .sex-female {
    color: #FC6E51;
}
:root {
    --confirmColor0: #ececec;
    --confirmColor1: rgba(237, 85, 101, 0.2);
    --confirmColor2: rgba(255, 206, 84, 0.2);
    --confirmColor3: rgba(93, 156, 236, 0.2);
    --confirmColor4: rgba(160, 212, 104, 0.2);

    --linkColor0: rgb(99,99,99);
    --linkColor1: rgb(190, 190, 190);
    --linkColor2: rgba(237, 85, 101, 0.8);
    --linkColor3: rgba(93, 156, 236, 0.8);
    --linkColor4: rgba(160, 212, 104, 0.8);
}

.meWorkflowContainer {
    height: 100%;
    width: 100%;
    background-color: white;
    overflow: auto;
    min-height: 400px;
    position: relative;
    background: url("../lib/meworkflow/images/background1.png");
    background-repeat: repeat;
    color: #555;
    outline: none;
}

/* 控件工具栏 */
.meWorkflowActionToolbar {
    width: 200px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px -5px rgba(171, 171, 171, .9);
}

/*工具栏内部容器，主要是为了设置 position*/
.meWorkflowActionToolbar .container {
    width: 100%;
    padding: 10px;
    position: relative;
}

.meWorkflowActionToolbar .title {
    height: 15px;
    line-height: 15px;
    background-color: #ececec;
    text-align: center;
}


/* 控件工具栏按钮 */
.meWorkflowActionButton {
    line-height: 30px;
    height: 30px;
    cursor: default;
    padding: 0px 10px;
    user-select: none;
}

.meWorkflowActionButton:hover {
    background-color: #ececec;
}

.meWorkflowActionButton .fa {
    margin-right: 10px;
}

/* 分隔按钮 */
.meWorkflowSpliter {
        width: 100%;
        height: 10px;
        margin-top: 10px;
        border-top: 1px dotted #ccc;
    }

/* 容器，透明 */
.meWorkflowActionContainer {
    display: inline-block;
    position: absolute;
    cursor: move;
}

/*包装一层只为将 postion 设置为 relation，便于连接点定位*/
.meWorkflowActionContainer .content {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    box-sizing: border-box;
}

/* 各步骤共同属性 */
.meWorkflowAction {
    height: 100%;
    border: 1px solid transparent;
    user-select: none;
    transition: 0.2s;
}

/* 光标移到上面或选中步骤都显示阴影 */
.meWorkflowAction:hover,
.meWorkflowActionContainer.selected .meWorkflowAction {
    box-shadow: 0px 0px 10px #999;
}

.meWorkflowAction.textAction:hover,
.meWorkflowActionContainer.selected .textAction {
    box-shadow: none;
}

/* 审核 */
.meWorkflowAction.confirmAction {
    border-radius: 10px 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #777;
    background-color: white;
}

/* 审核步骤标题 */
.meWorkflowAction.confirmAction .title{
    line-height: 30px;
    text-align: center;
    background-color: var(--confirmColor0);
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}

.meWorkflowAction.confirmAction .confirmUserType {
    line-height: 23px;
    padding: 0px 5px;
    text-align: right;
    font-style: italic;
    font-size: 12px;
    color: #ccc;
}

.meWorkflowAction.confirmAction .icons {
    line-height: 23px;
    padding: 0px 5px;
    text-align: right;
    font-size: 12px;
}

.meWorkflowAction.confirmAction .title.color0 {
    background-color: var(--confirmColor0);
}

.meWorkflowAction.confirmAction .title.color1 {
    background-color: var(--confirmColor1);
}

.meWorkflowAction.confirmAction .title.color2 {
    background-color: var(--confirmColor2);
}

.meWorkflowAction.confirmAction .title.color3 {
    background-color: var(--confirmColor3);
}

.meWorkflowAction.confirmAction .title.color4 {
    background-color: var(--confirmColor4);
}

/* 条件步骤 */
.meWorkflowAction.conditionAction {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #ececec;
    position: relative;
    border: 1px solid #777;
    transform: rotate(45deg);
    position: absolute;
    left: 10px;
    top: 10px;
}

/* 条件步骤 - 上部分（模拟边界） */
.meWorkflowAction.conditionAction .top1 {
    width: 0;
    height: 0;
    border-bottom: 40px solid #333;
    border-left: 73px solid transparent;
    border-right: 73px solid transparent;
    position: absolute;
    left: 0px;
    top: 0px;
}

/* 条件步骤 - 上部分（实心部分） */
.meWorkflowAction.conditionAction .top2 {
    width: 0;
    height: 0;
    border-bottom: 38px solid white;
    border-left: 71px solid transparent;
    border-right: 71px solid transparent;
    position: absolute;
    left: 2px;
    top: 2px;
}

/* 条件步骤 - 上部分（模拟边界） */
.meWorkflowAction.conditionAction .bottom1 {
    width: 0;
    height: 0;
    border-top: 40px solid #333;
    border-left: 73px solid transparent;
    border-right: 73px solid transparent;
    position: absolute;
    left: 0px;
    top: 40px;
}

/* 条件步骤 - 上部分（实心部分） */
.meWorkflowAction.conditionAction .bottom2 {
    width: 0;
    height: 0;
    border-top: 38px solid white;
    border-left: 71px solid transparent;
    border-right: 71px solid transparent;
    position: absolute;
    left: 2px;
    top: 40px;
}

/* 条件步骤文本 */
.meWorkflowActionContainer .textContainer {
    line-height: 60px;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
}

/* 开始和结束 */
.meWorkflowAction.startAction, .meWorkflowAction.endAction {
    text-align: center;
    color: #777;
    width: 100%;
    height: 100%;
    line-height: 60px;
    border: 1px solid #777;
    border-radius: 40px 40px;
}

.meWorkflowAction.startAction {
    background-color: rgba(233, 251, 239, 0.8);
    /* border-color: rgb(60, 212, 104); */
} 

.meWorkflowAction.endAction {
    background-color: rgba(248, 235, 233, 0.8);
    /* border-color: rgb(252, 110, 81); */
}

/* 文本 */
.meWorkflowAction.textAction {
    color: #999;
}

/* 协同开始和结束 */
.meWorkflowAction.branchStartAction, .meWorkflowAction.branchEndAction {
    border: 1px solid #777;
    border-radius: 30px 30px;
    text-align: center;
    line-height: 60px;
    background-color: white;
}


/* 步骤的连接点 */
.meWorkflowActionContainer .meWorkflowLinkPoint {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    border: 1px solid #883333;
    width: 8px;
    height: 8px;
    cursor: crosshair;
    border-radius: 4px 4px;
}

/*左连接点*/
.meWorkflowActionContainer .meWorkflowLinkPoint.left {
    left: -4px;
    top: calc((100% - 8px) / 2);
}

/*左连接点*/
.meWorkflowActionContainer .meWorkflowLinkPoint.right {
    right: -4px;
    top: calc((100% - 8px) / 2);
}

/*上连接点*/
.meWorkflowActionContainer .meWorkflowLinkPoint.top {
    right: calc((100% - 8px) / 2);
    top: -4px;
}

/*下连接点*/
.meWorkflowActionContainer .meWorkflowLinkPoint.bottom {
    right: calc((100% - 8px) / 2);
    bottom: -4px;
}

/*选中步骤*/
.meWorkflowActionContainer.selected {
}

/*改变大小节点*/
.meWorkflowActionContainer .meWorkflowSizePoint {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    border: 1px solid #883333;
    width: 8px;
    height: 8px;
}

/*左上改变大小节点*/
.meWorkflowActionContainer .meWorkflowSizePoint.lefttop {
    top: -4px;
    left: -4px;
    cursor: nw-resize
}

/*右上改变大小节点*/
.meWorkflowActionContainer .meWorkflowSizePoint.righttop {
    top: -4px;
    right: -4px;
    cursor: ne-resize
}

/*左下改变大小节点*/
.meWorkflowActionContainer .meWorkflowSizePoint.leftbottom {
    bottom: -4px;
    left: -4px;
    cursor: ne-resize
}

/*右下改变大小节点*/
.meWorkflowActionContainer .meWorkflowSizePoint.rightbottom {
    bottom: -4px;
    right: -4px;
    cursor: nw-resize
}

/*选中步骤*/
.meWorkflowActionContainer.selected .meWorkflowLinkPoint, .meWorkflowActionContainer.selected .meWorkflowSizePoint {
    display: block;
}

/*连接线拖入步骤时显示*/
.meWorkflowActionContainer.linkhover .meWorkflowLinkPoint {
    display: block;
}

/*连接线拖入到指定的点*/
.meWorkflowLinkPoint.dragover {
    box-shadow: 0 0 0 7px rgba(136, 51, 51, 0.3), 0 0 0 8px rgba(136, 51, 51, 0.4);
}

/*选中步骤*/
.meWorkflowActionContainer.selected .content {
    border: 1px solid rgba(136, 51, 51, 0.3);
}


.meWorkflowContainer .linkContainer .link {
    cursor: pointer;
}

.meWorkflowContainer .linkContainer .link.display {
    stroke: rgb(99,99,99);
}

.meWorkflowContainer .linkContainer .link.display.color0 {
    stroke: var(--linkColor0);
}

.meWorkflowContainer .linkContainer .link.display.color1 {
    stroke: var(--linkColor1);
}

.meWorkflowContainer .linkContainer .link.display.color2 {
    stroke: var(--linkColor2);
}

.meWorkflowContainer .linkContainer .link.display.color3 {
    stroke: var(--linkColor3);
}

.meWorkflowContainer .linkContainer .link.display.color4 {
    stroke: var(--linkColor4);
}

.meWorkflowContainer .linkContainer .link.forclick {
    stroke: rgba(255,255,255,0.1);
}

.meWorkflowContainer .linkContainer.selected .link.forclick,
.meWorkflowContainer .linkContainer.highLight .link.forclick{
    stroke: rgba(255,0,0, 0.1);
}

.meWorkflowContainer .selected .display {
    stroke: rgb(231, 76, 60);
    z-index: 10;
}

.meWorkflowConfirmColor1 {
    background-color: var(--confirmColor1);
}

.meWorkflowConfirmColor2 {
    background-color: var(--confirmColor2);
}

.meWorkflowConfirmColor3 {
    background-color: var(--confirmColor3);
}

.meWorkflowConfirmColor4 {
    background-color: var(--confirmColor4);
}

.meWorkflowPanelContainer {
    min-height: 50px;
    display: none;
}

.meWorkflowPanelContainer >.me-WorkflowPanel {
    /*min-height: 120px;*/
    /*border: 1px solid #ccc;
    border-radius: 3px 3px;*/
    margin-bottom: 10px;
    /*margin-top: 10px;*/
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.titlePanel {
    line-height: 30px;
    padding: 0px 5px;
    background-color: #F6F6F6;
    border-bottom: 1px solid #dddddd;
    font-size: 12px;
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.leftPanel {
    width: 80px;
    height: 100%;
    float: left;
    text-align: center;
    padding: 10px;
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.rightPanel {
    height: 100%;
    margin-left: 80px;
    padding: 10px;
    position: relative;
    z-index: 1;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel::after {
    content: ' ';
    position: absolute;
    bottom: 0px;
    left: 60px;
    right: 0px;
    height: 1px;
    border-bottom: 1px dotted #ddd;
}

.meWorkflowPanelContainer >.me-WorkflowPanel:last-child >.rightPanel::after {
    border: none;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head {
    margin-bottom: 10px;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .me-UserLogo {
    float: left;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info {
    margin-left: 40px;
    line-height: 20px;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info > .userInfo {
    height: 20px;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info > .userInfo > span {
    float: left;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info > .userInfo > .label {
    margin-left: 10px;
    margin-top: 1px;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info > .startTime {
    height: 20px;
    color: #999;
}

.meWorkflowPanelContainer > .me-WorkflowPanel > .rightPanel > .head > .info .me-LinkButton {
    margin-left: 10px;
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.rightPanel >.contentPanel {
    box-sizing: border-box;
    padding-left: 50px;
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.rightPanel .me-ButtonPanel {
    padding-left: 50px;
    margin-top: 10px;
}

.meWorkflowPanelContainer >.me-WorkflowPanel >.rightPanel >.contentPanel >.splitLine {
    border-top: 1px dotted #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 1px;
}