:root {
    --mainColor: #409eff;
    --viceColor: #303133;

    --success: #67C23A;
    --warning: #E6A23C;
    --danger: #F56C6C;
    --info: #909399;
}


[class^="el-icon-fa"], [class*=" el-icon-fa"] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:focus {
    outline: none;
}

*, ::after, ::before {
    -webkit-box-sizing: unset;
    box-sizing: unset;
}

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

input[type='date'] {
    position: relative;
}

input[type='date']::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    padding-left: calc(100% - 40px);
    padding-right: 10px;
    opacity: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input::-webkit-input-placeholder {
    color: #cccccc;
}

input {
    background: none;
    outline: none;
}

/*按钮效果*/
.btn-border {
    position: relative;
    cursor: pointer;
    border: var(--mainColor) 1px solid;
    border-radius: 3px;
    color: var(--mainColor);
    text-decoration: none;
    letter-spacing: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.btn-normal {
    position: relative;
    cursor: pointer;
    color: var(--mainColor);
    text-decoration: none;
    letter-spacing: 1px;
    background-color: #eee;
    border-radius: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.btn-highlight {
    position: relative;
    border: var(--mainColor) 1px solid;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: var(--mainColor);
}

.btn-disabled {
    background-color: #aaa !important;
    border: #aaa 1px solid;
    cursor: default !important;
    color: #eee
}

.btn-normal:hover {
    color: #1E90FF !important;
}

.btn-border:hover {
    color: #1E90FF !important;
    border: #1E90FF 1px solid;
}

.btn-highlight:hover {
    background-color: #87CEFA !important;
}

.btn-disabled:hover {
    background-color: #ccc !important;
    border: #ccc 1px solid;
    cursor: default !important;
    color: #888 !important;
}

.btn-padding {
    padding: 3px;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem 0 rgba(58, 59, 69, .2) !important
}

/*阴影效果*/
.shadow-top {
    box-shadow: 0 -2px 3px -1px rgba(58, 59, 69, .2) !important;
}

.shadow-right {
    box-shadow: 2px 0 3px -1px rgba(58, 59, 69, .2) !important;
}

.shadow-bottom {
    box-shadow: 0 2px 3px -1px rgba(58, 59, 69, .2) !important;
}

.shadow-left {
    box-shadow: -2px 0 3px -1px rgba(58, 59, 69, .2) !important;
}

.m-0 {
    margin: 0;
}

.m-10 {
    margin: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.border-unset {
    border: 0 !important;
}

.height-unset {
    height: unset !important;
}

.scroller::-webkit-scrollbar { /*滚动条整体样式*/
    width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.scroller::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
}

.scroller::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: #ffffff;
}

/*表格圆角*/
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    margin: 0 !important;
    table-layout: fixed;
    border-bottom: 1px solid #f5f5f5;
}

table th {
    height: 50px;
    border-top: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;
    background-color: #fafafa;
    font-weight: unset;
    color: var(--viceColor);
    text-overflow: ellipsis;
    text-align: center;
    padding: 0 10px 0 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}

table td {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;
    font-weight: 300;
    color: var(--viceColor);
    word-break: break-all;
    padding: 0 10px 0 10px;
}

table tr td:first-child {
    border-right: 1px solid #f5f5f5;
    background-color: inherit;
    position: sticky;
    left: 0;
    z-index: 1;
}

table tr th:first-child {
    border-right: 1px solid #f5f5f5;
    background-color: #fafafa;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
}

table tr td:nth-child(2) {
    border-left: 0 !important;
}

table tr th:nth-child(2) {
    border-left: 0 !important;
}

table tr td:last-child {
    border-right: 1px solid #f5f5f5;
    background-color: inherit;
    position: sticky;
    right: 0;
    z-index: 1;
}

table tr th:last-child {
    border-right: 1px solid #f5f5f5;
    background-color: #fafafa;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 2;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding-left: 0;
    list-style: none;
    border-radius: .35rem;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #4e73df;
    background-color: #fff;
    border: 1px solid #dddfeb;
    text-decoration: none;
}

.page-link:hover {
    z-index: 2;
    color: #224abe;
    text-decoration: none;
    background-color: #eaecf4;
    border-color: #dddfeb
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25)
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .35rem;
    border-bottom-left-radius: .35rem
}

.page-item:last-child .page-link {
    border-top-right-radius: .35rem;
    border-bottom-right-radius: .35rem
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #4e73df;
    border-color: #4e73df
}

.page-item.disabled .page-link {
    color: #858796;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dddfeb
}

.pagination-lg .page-link {
    padding: .75rem 1.5rem;
    line-height: 1.5
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.pagination-sm .page-link {
    padding: .25rem .5rem;
    line-height: 1.5
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem
}

@-webkit-keyframes growIn {
    0% {
        transform: scale(.9);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes growIn {
    0% {
        transform: scale(.9);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animated--grow-in {
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
    animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1)
}