* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: #515a6e;
    line-height: 1.5;
    font-size: 12px;
    background-color: #fff;
    overflow: hidden;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: #f9f9f9;
}

template {
    display: none
}

a {
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    -webkit-text-decoration-skip: objects;
    color: #757575;
}

a:active, a:hover {
    outline-width: 0
}

a:hover {
    opacity: 0.7;
}

a:active {
    opacity: 0.9;
}

a:active, a:hover {
    outline: 0;
    text-decoration: none
}

a[disabled] {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.table-cell.center {
    text-align: center;
    vertical-align: middle;
}

.table-cell.v-center {
    vertical-align: middle;
}

.table-cell.h-center {
    text-align: center;
}

.table-cell.right {
    text-align: right;
}

.table-cell.left {
    text-align: left;
}

.table-cell.top {
    vertical-align: top;
}

.table-cell.bottom {
    vertical-align: bottom;
}

.center {
    text-align: center;
}

.full {
    width: 100%;
    height: 100%;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    word-break: keep-all;
}

[v-cloak] {
    display: none;
}

.row {
    position: relative;
    box-sizing: border-box;
    display: flex;
}

[class*=col-] {
    box-sizing: border-box;
}

.col-1 {
    width: 4.16667%;
}

.col-2 {
    width: 8.33333%;
}

.col-3 {
    width: 12.5%;
}

.col-4 {
    width: 16.66667%;
}

.col-5 {
    width: 20.83333%;
}

.col-6 {
    width: 25%;
}

.col-7 {
    width: 29.16667%;
}

.col-8 {
    width: 33.33333%;
}

.col-9 {
    width: 37.5%;
}

.col-10 {
    width: 41.66667%;
}

.col-11 {
    width: 45.83333%;
}

.col-12 {
    width: 50%;
}

.col-13 {
    width: 54.16667%;
}

.col-14 {
    width: 58.33333%;
}

.col-15 {
    width: 62.5%;
}

.col-16 {
    width: 66.66667%;
}

.col-17 {
    width: 70.83333%;
}

.col-18 {
    width: 75%;
}

.col-19 {
    width: 79.16667%;
}

.col-20 {
    width: 83.33333%;
}

.col-21 {
    width: 87.5%;
}

.col-22 {
    width: 91.66667%;
}

.col-23 {
    width: 95.83333%;
}

.col-24 {
    width: 100%;
}

/* 带有固定title布局,title保持固定*/
.wb-layout-title-fix {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wb-layout-title-fix > .wb-head {
    height: 60px;
    overflow: hidden;
}

.wb-layout-title-fix > .wb-body {
    height: calc(100% - 60px);
}

/* 保持页脚绝对底部,当内容足够或高于屏幕，会自动将页面撑开，底部依旧保持在底部*/
.wb-layout-foot-absolute {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
}

.wb-layout-foot-absolute > .wb-body {
    padding-bottom: 50px;
}

.wb-layout-foot-absolute > .wb-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
}

/* Vue动画-使用方法<transition name="left-in-right-out"></transition> */
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
    transition: all 0.3s linear;
    position: absolute;
}

.left-in-right-out-enter {
    transform: translateX(-100%);
    opacity: 0;
}

.left-in-right-out-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

/* Vue动画-使用方法<transition name="right-in-left-out"></transition> */
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
    transition: all .3s linear;
    position: absolute;
}

.right-in-left-out-enter {
    transform: translateX(100%);
}

.right-in-left-out-leave-to {
    transform: translateX(-100%);
}

/* 以上配合<transition name="***"></transition>使用动画 */

/* 以下为动画样式 */
/* 动画-淡入 */
.animation-fade-in {
    -webkit-animation: fadein .5s forwards;
    -moz-animation: fadein .5s forwards;
    -ms-animation: fadein .5s forwards;
    animation: fadein .5s forwards;
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 动画-淡出 */
.animation-fade-out {
    -webkit-animation: fadeout .5s forwards;
    -moz-animation: fadeout .5s forwards;
    -ms-animation: fadeout .5s forwards;
    animation: fadeout .5s forwards;
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 动画-淡入-从下 */
.animation-fade-in-bottom {
    -webkit-animation: fadeinB .5s forwards;
    -moz-animation: fadeinB .5s forwards;
    -ms-animation: fadeinB .5s forwards;
    animation: fadeinB .5s forwards;
}

@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 动画-淡出-向上 */
.animation-fade-out-top {
    -webkit-animation: fadeoutT .5s forwards;
    -moz-animation: fadeoutT .5s forwards;
    -ms-animation: fadeoutT .5s forwards;
    animation: fadeoutT .5s forwards;
}

@-webkit-keyframes fadeoutT {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
    }
}

@-moz-keyframes fadeoutT {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-100px);
    }
}

@-ms-keyframes fadeoutT {
    0% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(-100px);
    }
}

@keyframes fadeoutT {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* 动画-震颤 */
.animation-shake {
    -webkit-animation: shake .5s;
    -moz-animation: shake .5s;
    -ms-animation: shake .5s;
    animation: shake .5s;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    20%, 60% {
        -webkit-transform: translateX(-10px);
    }
    40%, 80% {
        -webkit-transform: translateX(10px);
    }
}

@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0);
    }
    20%, 60% {
        -moz-transform: translateX(-10px);
    }
    40%, 80% {
        -moz-transform: translateX(10px);
    }
}

@-ms-keyframes shake {
    0%, 100% {
        -ms-transform: translateX(0);
    }
    20%, 60% {
        -ms-transform: translateX(-10px);
    }
    40%, 80% {
        -ms-transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-10px);
    }
    40%, 80% {
        transform: translateX(10px);
    }
}

/* 动画-无限旋转 */
.animation-rotate {
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -ms-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes rotate {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 以上为动画样式 */

/* 以下为重写EL样式 */
[class^=el-input],
[class^=el-textarea__inner],
[class^=el-picker] input,
[class^=el-picker],
[class^=el-dialog],
[class^=el-tag],
[class^=el-tooltip],
[class^=el-dropdown],
[class^=el-drawer],
[class^=el-card],
[class^=el-button],
[class^=el-select],
[class^=el-message-box] {
    border-radius: 0 !important;
}

.el-select-dropdown__item {
    padding: 0 5px !important;
}

.el-select-dropdown__list {
    padding: 0 !important;
}

.el-scrollbar.hidden_x > .el-scrollbar__wrap {
    overflow-x: hidden !important;
}

.el-scrollbar.hidden_x > .el-scrollbar__wrap > .el-scrollbar__view {
    height: 100%;
}

.el-menu,
.el-menu .el-submenu {
    background: #252a2f;
}

.el-menu .el-menu--horizontal {
    border-bottom: solid 0 #e6e6e6 !important;
}

.el-menu .el-menu--popup-right-start {
    padding: 0;
}

.el-menu .el-menu-item,
.el-menu .el-submenu__title {
    color: #d6d6d6;
    height: 36px !important;
    line-height: 36px !important;
}

.el-menu .el-submenu__title i {
    color: #d6d6d6;
}

.el-menu .el-submenu__title:focus,
.el-menu .el-submenu__title:hover,
.el-menu .el-menu-item:focus,
.el-menu .el-menu-item:hover,
.el-menu .el-menu-item.is-active {
    color: #d6d6d6 !important;
    background-color: rgb(64, 158, 255) !important;
}

.el-message {
    min-width: 100px;
    padding: 10px 60px 10px 20px;
    background-color: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.el-drawer { /* 修复抽屉无法滚动 */
    overflow: auto;
    height: 100%;
}

.el-drawer .el-drawer__body { /* 修复抽屉内容子类继承height失效维内托 */
    height: calc(100% - 76px);
}

.el-transfer__button { /* 修复穿梭框2.12.0 在2.13.0后按钮异常问题*/
    display: block;
    margin: 0 !important;
    padding: 10px;
    border-radius: 50%;
    color: #fff;
    background-color: #409eff;
    font-size: 0;
}

.el-transfer__button:first-child {
    margin-bottom: 10px !important;
}

.el-transfer__button.is-disabled, .el-transfer__button.is-disabled:hover {
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    color: #c0c4cc;
}

.el-transfer-panel__item {
    height: 30px !important;
    line-height: 30px !important;
    padding-left: 15px !important;
    display: block !important;
}

.el-card__body {
    padding: 10px !important;
}

.el-switch__input:focus ~ .el-switch__core {
    position: relative;
    box-sizing: border-box;
    outline: none !important;
}

.el-dialog__header,
.el-dialog__body {
    padding: 10px 20px !important;
}

/* 以上为重写EL样式 */

/* 以下为APP样式 */
#app {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-top: 1px solid #00000000;
    overflow: auto;
}

/* 搜索条件统一样式 */
.form-search {
    min-width: calc(100% - 20px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 10px;
}

.form-search .el-form-item {
    margin-bottom: 8px;
}

.form-search .el-form-item__content,
.form-search .el-form-item__content input,
.form-search .el-form-item__content > div {
    display: inline-flex;
    width: 200px;
}

/* 数据表格统一样式 */
.form-table {
    min-width: calc(100% - 20px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 10px;
}

.form-table > .el-row {
    margin-bottom: 10px;
    border-bottom: 1px solid #f7f6f6;
    padding-bottom: 5px;
}

.form-table .el-form-item__content,
.form-table .el-form-item__content input,
.form-table .el-form-item__content > div {
    display: inline-flex;
    width: 200px;
}

.form-table .el-table {
    width: 100%;
}

.form-table .el-table .cell {
    max-height: 40px;
    text-overflow: ellipsis;
    word-break: keep-all;
}

.form-table .el-pagination .number,
.form-table .el-pagination button {
    border-radius: 0 !important;
}

/* 弹窗格统一样式 */
.form-dialog {
    width: 650px;
}

.form-dialog .el-form-item__content,
.form-dialog .el-form-item__content input,
.form-dialog .el-form-item__content > div {
    display: inline-flex;
    width: 200px;
}

.form-dialog .full {
    width: 584px;
}

.form-dialog .full .el-form-item__content,
.form-dialog .full .el-form-item__content input,
.form-dialog .full .el-form-item__content > div {
    width: 499px;
}

/* 对于多功能Input组件，为对齐需将input减短,需添加class=group */
.form-dialog .group input {
    width: 156px;
}

/* 对于多功能Input组件，前后按钮等样式美化 */
.form-dialog .group .el-input-group__append,
.form-dialog .group .el-input-group__prepend {
    display: flex;
    color: #ffffff;
    background: #409EFF;
    border: 0 solid #DCDFE6 !important;
}

/* 以上为APP样式 */