html, body, button, .popover {
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

body, .form-control, .dropdown-menu,
.btn:not(.btn-xs):not(.btn-sm):not(.btn-md):not(.btn-lg):not(.btn-xl),
.alert .close .fa-times, .toast .close,
.input-group-text {
    font-size: 0.875rem;
}

:focus, button:focus {
    outline: none;
}

a {
    cursor: pointer;
}

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

input:disabled,
.btn:disabled,
.datetime-picker-input-icon.disabled,
.datetime-picker-input.is-disabled,
.datetime-picker-input:disabled,
.upload.is-disabled {
    cursor: not-allowed;
}

.btn:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-info.dropdown-toggle:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-warning.dropdown-toggle:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-danger.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-xs, .btn-group-xs > .btn {
    border-radius: 0.2rem;
    padding: 0.0625rem 0.3125rem;
    font-size: 0.75rem;
}

.btn-xl, .btn-group-xl > .btn {
    padding: 0.8rem 1.25rem;
    font-size: 1.35rem;
    border-radius: 0.4rem;
}

.btn .badge, .btn i + span, .badge i + span {
    margin-left: 4px;
}

.btn.is-circle {
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.btn.is-round {
    border-radius: 20px;
}

@media (min-width: 576px) {
    .form-inline .control-label {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.form-select .dropdown-menu {
    margin-top: 10px;
    max-height: 274px;
    overflow-x: hidden;
    padding: 0.25rem 0;
    width: 100%;
    font-size: inherit;
    cursor: pointer;
}

.form-select .dropdown-menu-arrow {
    width: 0;
    height: 0;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent rgba(0,0,0,.15);
    position: absolute;
    left: 20px;
    margin-top: 4px;
    z-index: 1001;
    display: none;
}

    .form-select .dropdown-menu-arrow:after {
        content: " ";
        width: 0;
        height: 0;
        border-width: 0 6px 6px;
        border-style: solid;
        border-color: transparent transparent #fff;
        position: absolute;
        top: 1px;
        left: -6px;
    }

.form-select .form-select-input[readonly] {
    background-color: #fff;
}

.form-select.show .dropdown-menu-arrow {
    display: block;
}

.form-select.show .form-select-append i {
    transform: rotate(0);
}

.form-select.is-disabled .form-select-input {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
}

.form-select.is-disabled .form-select-append {
    color: #c0c4cc;
}

.form-select-input {
    color: #606266;
    outline: none;
    padding-right: calc(1.5em + 0.75rem);
    cursor: pointer;
}

    .form-select-input:hover, .form-select-input:focus {
        border-color: #c0c4cc;
    }

    .form-select-input:focus {
        box-shadow: none;
    }

    .form-select-input.border-primary:hover {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }

    .form-select-input.border-info:hover {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
    }

    .form-select-input.border-success:hover {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
    }

    .form-select-input.border-warning:hover {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
    }

    .form-select-input.border-danger:hover {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
    }

    .form-select-input.is-valid, .form-select-input.is-invalid {
        background-image: none;
    }

.form-select-append {
    position: absolute;
    height: 100%;
    width: 30px;
    right: 0;
    top: 0;
    color: #c0c4cc;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .form-select-append i {
        transition: all .3s;
        transform: rotate(180deg);
    }

.form-select .search {
    padding: 7px 10px;
    position: relative;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.625rem;
    margin-bottom: 0.5rem;
}

    .form-select .search .search-text {
        width: 100%;
        padding-right: 30px;
    }

    .form-select .search .fa-search {
        position: absolute;
        left: calc(100% - 34px);
        top: 18px;
        color: #adb5bd;
    }

.form-control:focus {
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.form-inline .row {
    flex: 1;
}

.form-inline .form-group .control-label {
    margin-right: 10px;
    width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69,.6);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    border-color: #28a745;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69,.6);
}

.arrow-primary {
    border-color: transparent transparent #007bff;
}

.arrow-success {
    border-color: transparent transparent #28a745;
}

.arrow-info {
    border-color: transparent transparent #17a2b8;
}

.arrow-warning {
    border-color: transparent transparent #ffc107;
}

.arrow-danger {
    border-color: transparent transparent #dc3545;
}

.show .shadow-primary, .shadow-primary:hover, .shadow-primary:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 123, 255, 0.5);
    border-color: #007bff !important;
}

.show .shadow-success, .shadow-success:hover, .shadow-success:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
    border-color: #28a745 !important;
}

.show .shadow-info, .shadow-info:hover, .shadow-info:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
    border-color: #17a2b8 !important;
}

.show .shadow-warning, .shadow-warning:hover, .shadow-warning:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
    border-color: #ffc107 !important;
}

.show .shadow-danger, .shadow-danger:hover, .shadow-danger:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
    border: 1px solid #dc3545 !important;
}

.show .shadow-secondary, .shadow-secondary:hover, .shadow-secondary:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #c0c4cc;
    border: 1px solid #6c757d !important;
}

.show .shadow-dark, .shadow-dark:hover, .shadow-dark:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #c0c4cc;
    border: 1px solid #343a40 !important;
}

.show .shadow-default, .shadow-default:hover, .shadow-default:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    border: 1px solid #337ab7;
}

.tooltip-inner {
    max-width: 768px;
}

.is-invalid .tooltip-inner {
    background-color: #dc3545;
}

.is-invalid.bs-tooltip-auto[x-placement^=top] .arrow::before,
.is-invalid.bs-tooltip-top .arrow::before {
    border-top-color: #dc3545;
}

.is-invalid.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.is-invalid.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #dc3545;
}

.is-invalid.bs-tooltip-auto[x-placement^=left] .arrow::before,
.is-invalid.bs-tooltip-left .arrow::before {
    border-left-color: #dc3545;
}

.is-invalid.bs-tooltip-auto[x-placement^=right] .arrow::before,
.is-invalid.bs-tooltip-right .arrow::before {
    border-right-color: #dc3545;
}

/*Alert*/
.alert i {
    margin-right: 0.5rem;
}

.alert .close {
    position: absolute;
    top: 10px;
    right: 0;
}

.alert.is-bar.alert-info {
    border-left: 4px solid #50bfff;
    background-color: #ecf8ff;
}

.alert.is-bar.alert-success {
    border-left: 4px solid #28a745;
    background-color: #c3e6cb;
}

.alert.is-bar.alert-primary {
    border-left: 4px solid #007bff;
    background-color: #daeafc;
}

.alert.is-bar.alert-warning {
    border-left: 4px solid #ffc107;
    background-color: #fffcf2;
}

.alert.is-bar.alert-danger {
    border-left: 4px solid #dc3545;
    background-color: #faeaec;
}
/*end alert*/

/*light*/
.light {
    background-image: radial-gradient(circle, #fff, #aaa, #333);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
}

    .light + span {
        display: none;
    }

.light-danger {
    background-image: radial-gradient(circle, #e17777, #892726, #700604);
}

    .light-danger.flash {
        animation: danger .6s linear infinite;
    }

    .light-danger:hover {
        background-image: radial-gradient(circle, #e17777, #b33332, #bf211e);
    }

@keyframes danger {
    0% {
        background-image: radial-gradient(circle, #e17777, #892726, #700604);
    }

    55% {
        background-image: radial-gradient(circle, #e17777, #892726, #700604);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-success {
    background-image: radial-gradient(circle, #5cb85c, #116811, #024702);
}

    .light-success.flash {
        animation: success .6s linear infinite;
    }

    .light-success:hover {
        background-image: radial-gradient(circle, #5cb85c, #0c980c, #087b08);
    }

@keyframes success {
    0% {
        background-image: radial-gradient(circle, #5cb85c, #116811, #024702);
    }

    55% {
        background-image: radial-gradient(circle, #5cb85c, #116811, #024702);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-info {
    background-image: radial-gradient(circle, #5bc0de, #1d7792, #085166);
}

    .light-info.flash {
        animation: info .6s linear infinite;
    }

    .light-info:hover {
        background-image: radial-gradient(circle, #5bc0de, #085166, #085166);
    }

@keyframes info {
    0% {
        background-image: radial-gradient(circle, #5bc0de, #1d7792, #085166);
    }

    55% {
        background-image: radial-gradient(circle, #5bc0de, #1d7792, #085166);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-warning {
    background-image: radial-gradient(circle, #ffc107, #cc9f18, #a28018);
}

    .light-warning.flash {
        animation: warning .6s linear infinite;
    }

    .light-warning:hover {
        background-image: radial-gradient(circle, #ffc107, #a28018, #a28018);
    }

@keyframes warning {
    0% {
        background-image: radial-gradient(circle, #ffc107, #cc9f18, #a28018);
    }

    55% {
        background-image: radial-gradient(circle, #ffc107, #cc9f18, #a28018);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-primary {
    background-image: radial-gradient(circle, #007bff, #0f5fb5, #104f94);
}

    .light-primary.flash {
        animation: primary .6s linear infinite;
    }

    .light-primary:hover {
        background-image: radial-gradient(circle, #007bff, #104f94, #104f94);
    }

@keyframes primary {
    0% {
        background-image: radial-gradient(circle, #007bff, #0f5fb5, #104f94);
    }

    55% {
        background-image: radial-gradient(circle, #007bff, #0f5fb5, #104f94);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-secondary {
    background-image: radial-gradient(circle, #6c757d, #4b5054, #3b3d40);
}

    .light-secondary.flash {
        animation: secondary .6s linear infinite;
    }

    .light-secondary:hover {
        background-image: radial-gradient(circle, #6c757d, #3b3d40, #3b3d40)
    }

@keyframes secondary {
    0% {
        background-image: radial-gradient(circle, #6c757d, #4b5054, #3b3d40);
    }

    55% {
        background-image: radial-gradient(circle, #6c757d, #3b3d40, #3b3d40);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}

.light-dark {
    background-image: radial-gradient(circle, #6061e2, #3232a0, #17177b);
}

    .light-dark.flash {
        animation: dark .6s linear infinite;
    }

    .light-dark:hover {
        background-image: radial-gradient(circle, #6061e2, #17177b, #17177b);
    }

@keyframes dark {
    0% {
        background-image: radial-gradient(circle, #6061e2, #3232a0, #17177b);
    }

    55% {
        background-image: radial-gradient(circle, #6061e2, #3232a0, #17177b);
    }

    100% {
        background-image: radial-gradient(circle, #fff, #aaa, #333);
    }
}
/*end light*/

/*pagination*/
.nav-pages {
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pagination {
    margin: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.page-link:focus {
    box-shadow: none;
}

.pagination-items {
    display: inline-block;
}

    .pagination-items .form-select {
        width: 100px;
        margin: 0 10px;
    }

        .pagination-items .form-select .dropdown-menu {
            min-width: unset;
            text-align: right;
        }

        .pagination-items .form-select .form-control {
            width: 100%;
        }

.page-item:hover .page-link-prev .fa-ellipsis-h:before {
    content: "\f100";
}

.page-item:hover .page-link-next .fa-ellipsis-h:before {
    content: "\f101";
}

.page-link {
    padding: 0.5rem 0.35rem;
    line-height: 1;
}

    .page-link .fa {
        width: 11px;
        text-align: center;
    }

@media (min-width: 375px) {
    .page-link {
        padding: 0.5rem 0.5rem;
    }
}

@media (min-width: 456px) {
    .page-link {
        padding: 0.5rem 0.75rem;
    }
}
/*end pagination*/

/*multi-select*/
.multi-select {
    width: 100%;
    position: relative;
}

.multi-select-toggle {
    border: solid 1px #ddd;
    border-radius: 4px;
    cursor: pointer;
    min-height: 35px;
    max-height: 70px;
    overflow: auto;
}

    .multi-select-toggle.is-disabled {
        cursor: not-allowed;
    }

    .multi-select-toggle .clear {
        padding: 7px 0.25rem;
        display: none;
        color: #adb5bd;
    }

        .multi-select-toggle .clear:hover {
            background-color: #ddd;
            border-radius: 4px;
        }

    .multi-select-toggle .dropdown {
        padding: 7px 0.25rem;
        display: block;
    }

    .multi-select-toggle.selected .clear {
        display: block;
    }

    .multi-select-toggle.selected .dropdown,
    .multi-select-toggle.is-disabled .clear {
        display: none;
    }

    .multi-select-toggle .append {
        position: absolute;
        height: 100%;
        width: 30px;
        right: 0;
        top: 0;
        color: #c0c4cc;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .multi-select-toggle .append .dropdown {
            transition: all .3s;
            transform: rotate(180deg);
        }

.show .multi-select-toggle .append .dropdown {
    transform: rotate(0);
}

.multi-select-items {
    display: flex;
    flex-wrap: wrap;
    padding-top: 3px;
    padding-left: 3px;
    position: relative;
}

    .multi-select-items span {
        border: solid 1px #ddd;
        border-radius: 4px;
        padding: 2px 6px;
        background-color: #e9ecef;
        margin-bottom: 3px;
    }

    .multi-select-items .multi-select-item {
        display: inline-block;
        max-width: 130px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 3px;
    }

    .multi-select-items .multi-select-item-group {
        display: inline-flex;
        position: relative;
    }

        .multi-select-items .multi-select-item-group .multi-select-item {
            padding-left: 9px;
        }

    .multi-select-items .multi-select-close {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: -3px;
        z-index: 2;
        transition: color .3s linear, background-color .3s linear;
    }

        .multi-select-items .multi-select-close:hover {
            color: #333;
            background-color: #ddd;
        }

.multi-select-menu {
    margin-top: 10px;
    max-height: 274px;
    padding: 0.25rem 0;
    width: 100%;
    font-size: inherit;
    cursor: pointer;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    position: absolute;
    z-index: 1000;
    display: none;
}

    .multi-select-menu.show {
        display: block;
    }

    .multi-select-menu .toolbar {
        padding: 6px 10px;
    }

        .multi-select-menu .toolbar .btn {
            line-height: 12px;
            padding: 7px 15px;
            border: 1px solid #dee2e6;
            transition: border-color .3s linear, color .3s linear;
        }

            .multi-select-menu .toolbar .btn:hover {
                border-color: #409eff;
                color: #409eff;
            }

            .multi-select-menu .toolbar .btn:not(:last-child) {
                margin-right: 1rem;
            }

    .multi-select-menu .search {
        padding: 7px 10px;
        position: relative;
    }

        .multi-select-menu .search .search-text {
            width: 100%;
            padding-right: 30px;
        }

        .multi-select-menu .search .fa-search {
            position: absolute;
            left: calc(100% - 34px);
            top: 18px;
            color: #adb5bd;
        }

.multi-select-menu-item {
    display: flex;
    padding: 0 10px;
    align-items: center;
    transition: all .3s linear;
}

    .multi-select-menu-item.active {
        background-color: #dee2e6;
    }

    .multi-select-menu-item:hover {
        background-color: #6fd6e6;
    }

    .multi-select-menu-item > span {
        padding: 0.375rem 0.75rem;
    }

.form-inline .multi-select-menu-item .checkbox-label {
    display: none;
}

@media (min-width: 576px) {
    .form-inline .multi-select {
        width: 196px;
    }
}

.multi-select-ph {
    height: 30px;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    color: #c0c4cc;
}
/*end multi-select*/

/*switch*/
.switch {
    display: inline-flex;
    align-items: center;
}

    .switch .switch-core {
        margin: 0;
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #dcdfe6;
        cursor: pointer;
        transition: border-color .3s,background-color .3s;
        vertical-align: middle;
    }

        .switch .switch-core:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 50%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

        .switch .switch-core:before {
            content: attr(data-inner-text);
            position: absolute;
            top: 1px;
            left: calc(100% - 17px);
            transition: all .3s;
            font-size: 80%;
            color: #606266;
        }

    .switch.is-checked .switch-core:after {
        left: 100%;
        margin-left: -17px;
    }

    .switch.is-checked .switch-core:before {
        left: 5px;
        color: #fff;
    }

    .switch .switch-label {
        margin-left: 10px;
        cursor: pointer;
    }

    .switch.is-disabled {
        opacity: 0.6;
    }

    .switch.is-disabled, .switch.switch.is-disabled .switch-core, .switch.switch.is-disabled .switch-label {
        cursor: not-allowed;
    }

    .switch .switch-inner-text {
        font-size: 80%;
    }
/*end switch*/

/*swal*/
.swal .modal-header {
    display: none;
}

.swal .swal2-icon,
.swal .swal2-actions {
    display: flex;
}

.swal .swal2-actions {
    margin-bottom: 1rem;
}
/*end swal*/

/*timer*/
.timer {
}

    .timer .time-panel-footer {
        display: flex;
        justify-content: space-between;
    }

    .timer .time-panel-btn {
        border: 1px solid transparent;
        border-radius: 4px;
        transition: border .3s linear;
        padding: 0 0.65rem;
    }

        .timer .time-panel-btn:hover {
            border-color: #ddd;
        }

        .timer .time-panel-btn.confirm {
            color: #28a745;
        }

    .timer .circle-title {
        flex-flow: column nowrap;
        bottom: 66px;
    }

    .timer .timer-body {
        font-size: 3.5rem;
    }

    .timer .timer-alert {
        font-size: 1rem;
    }

        .timer .timer-alert i {
            margin-right: 0.5rem;
        }

    .timer .timer-buttons {
        display: flex;
        justify-content: space-between;
    }

        .timer .timer-buttons .btn {
            border: 5px double #949496;
            border-radius: 50%;
            height: 66px;
            width: 66px;
            font-size: 0.75rem !important;
            padding: 0;
        }
/*end timer*/

/*toggle*/
.toggle {
    position: relative;
    overflow: hidden;
    border: 1px solid #c0c4cc;
    min-width: 70px;
    min-height: 35px;
}

    .toggle.disabled .toggle-group label,
    .toggle.disabled .toggle-group span {
        cursor: not-allowed;
    }

    .toggle.off .toggle-group {
        left: -100%;
    }

    .toggle .btn-default, .toggle.btn-default {
        background-color: #e0e0e0;
        border-color: #ccc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    }

        .toggle .btn-default:hover {
            color: #333;
            background-color: #d4d4d4;
        }

    .toggle .toggle-group {
        position: absolute;
        width: 200%;
        top: 0;
        bottom: 0;
        left: 0;
        -webkit-transition: left 0.35s;
        -moz-user-select: none;
        -webkit-user-select: none;
        transition: left 0.35s;
    }

        .toggle .toggle-group label {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .toggle .toggle-group label, .toggle .toggle-group span {
            cursor: pointer;
        }

        .toggle .toggle-group .toggle-on.bg-dark {
            color: #e4e7ed;
        }

    .toggle .btn-handle {
        position: relative;
        margin: 0 auto;
        padding-top: 0px;
        padding-bottom: 0px;
        height: 100%;
        width: 0px;
        border-width: 0 1px;
        background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
        border-color: #ccc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    }

    .toggle .toggle-on {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 50%;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

        .toggle .toggle-on.btn {
            padding-right: 24px;
        }

        .toggle .toggle-on.btn-lg {
            padding-right: 31px;
        }

    .toggle.off .toggle-off {
        color: #333;
    }

    .toggle .toggle-off {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background-color: #e0e0e0;
    }

        .toggle .toggle-off.btn {
            padding-left: 24px;
        }

        .toggle .toggle-off.btn-lg {
            padding-left: 31px;
        }

    .toggle.btn-lg {
        min-width: 79px;
        min-height: 45px;
    }

.toggle-handle.btn-lg {
    width: 40px;
}

.toggle.btn-sm {
    min-width: 50px;
    min-height: 30px;
}

.toggle-on.btn-sm {
    padding-right: 20px;
}

.toggle-off.btn-sm {
    padding-left: 20px;
}

.toggle.btn-xs {
    min-width: 35px;
    min-height: 22px;
}

.toggle-on.btn-xs {
    padding-right: 12px;
}

.toggle-off.btn-xs {
    padding-left: 12px;
}
/*end toggle*/

/*checkbox*/
.form-inline .control-label + .form-checkbox {
    margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
    .form-inline .control-label + .form-checkbox {
        margin-bottom: 0;
    }
}

.control-label.checkbox-label {
    cursor: pointer;
}

.form-checkbox {
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

    .form-checkbox .radio-input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;
    }

        .form-checkbox .radio-input .radio-inner {
            border: 1px solid #dcdfe6;
            border-radius: 100%;
            width: 14px;
            height: 14px;
            background-color: #fff;
            position: relative;
            cursor: pointer;
            display: inline-block;
            box-sizing: border-box;
        }

    .form-checkbox .checkbox-input {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
    }

        .form-checkbox .checkbox-input .checkbox-inner {
            display: inline-block;
            border: 1px solid #dcdfe6;
            border-radius: 2px;
            width: 14px;
            height: 14px;
            position: relative;
            background-color: #fff;
            transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46);
        }

            .form-checkbox .checkbox-input .checkbox-inner:after {
                box-sizing: content-box;
                content: "";
                border: 1px solid #fff;
                border-left: 0;
                border-top: 0;
                height: 7px;
                left: 4px;
                position: absolute;
                top: 1px;
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
                transform-origin: center;
            }

    .form-checkbox .radio-input .radio-inner:after {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform .15s ease-in;
    }

    .form-checkbox .checkbox-label {
        margin-left: 10px;
    }

    .form-checkbox.is-checked .checkbox-input .checkbox-inner, .form-checkbox.is-indeterminate .checkbox-input .checkbox-inner,
    .form-checkbox.is-checked .radio-input .radio-inner {
        background-color: #409eff;
        border-color: #409eff;
    }

        .form-checkbox.is-checked .checkbox-input .checkbox-inner:after {
            transform: rotate(45deg) scaleY(1);
        }

        .form-checkbox.is-checked .radio-input .radio-inner:after {
            transform: translate(-50%,-50%) scale(1);
        }

    .form-checkbox.is-disabled, .form-checkbox.is-disabled .radio-inner {
        cursor: not-allowed;
    }

        .form-checkbox.is-disabled .checkbox-input .checkbox-inner,
        .form-checkbox.is-disabled .radio-input .radio-inner {
            background-color: #edf2fc;
            border-color: #dcdfe6;
        }

        .form-checkbox.is-disabled .checkbox-label {
            color: #c0c4cc;
        }

        .form-checkbox.is-disabled.is-checked .checkbox-input .checkbox-inner:after {
            border-color: #c0c4cc;
        }

    .form-checkbox.is-indeterminate .checkbox-input .checkbox-inner:before {
        content: "";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 2px;
        transform: scale(.5);
        left: 0;
        right: 0;
        top: 5px;
    }

    .form-checkbox.is-invalid .checkbox-input .checkbox-inner {
        border-color: #dc3545;
    }

    .form-checkbox.is-valid .checkbox-input .checkbox-inner {
        border-color: #28a745;
    }

.form-radio-group .form-checkbox:not(:last-child) {
    margin-right: 1rem;
}

@media (min-width: 576px) {
    .form-inline .form-checkbox {
        display: inline-block;
    }
}
/*end checkbox*/

/*progress*/
.form-inline .progress {
    width: 100%;
}
/*end progress*/

/*dropdown*/
.dropdown .dropdown-toggle:after, .dropup .dropdown-toggle:after, .dropright .dropdown-toggle:after, .btn-group .dropdown-toggle:not(:empty):after {
    margin-left: 6px;
}

.dropleft .dropdown-toggle:before {
    margin-right: 6px;
}

.dropdown-menu {
    max-height: 186px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.dropdown-item {
    cursor: pointer;
}
/*end dropdown*/

.close {
    display: flex;
}

/*popover confirm*/
.popover {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    min-width: 240px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    border: 1px solid #dcdfe6
}

.popover-confirm-body {
    margin: 14px 0;
}

    .popover-confirm-body .fa + span {
        margin-left: 0.25rem;
    }

.popover-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

    .popover-confirm-buttons .btn {
        padding: 7px 15px;
        line-height: 12px;
    }

        .popover-confirm-buttons .btn:last-child {
            margin-left: 0.5rem;
        }
/*end confirm*/

/*datetimepicker*/
.popover-datetime {
    border: none;
    box-shadow: none;
    max-width: unset;
}

    .popover-datetime .popover-body {
        padding: 0;
    }

    .popover-datetime[x-placement="right"] .popover-body {
        margin-left: -1px;
    }

    .popover-datetime[x-placement="left"] .popover-body {
        margin-right: -1px;
    }

    .popover-datetime[x-placement="top"] .popover-body {
        margin-bottom: -1px;
    }

    .popover-datetime[x-placement="bottom"] .popover-body {
        margin-top: -1px;
    }

.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-top-color: #ced4da;
}

.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
    border-right-color: #ced4da;
}

.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-bottom-color: #ced4da;
}

.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
    border-left-color: #ced4da;
}

.datetime-picker-bar {
    position: relative;
    color: #adb5bd;
}

.datetime-picker-input {
    cursor: pointer;
    padding-left: 2rem;
}

    .datetime-picker-input[readonly]:not([disabled]) {
        background-color: #fff;
    }

.datetime-picker-input-icon {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 35px;
    cursor: pointer;
    padding: 0 .75rem;
}

.picker-panel-body-wrapper {
    display: flex;
}

.picker-panel-sidebar {
    width: 110px;
    border-right: 1px solid #e4e4e4;
    padding: 6px 0;
    overflow: auto;
}

    .picker-panel-sidebar .sidebar-item {
        line-height: 28px;
        padding: 0 12px;
        cursor: pointer;
        transition: color .3s linear;
    }

.date-picker-time-header {
    position: relative;
    border-bottom: 1px solid #e4e4e4;
    font-size: 12px;
    padding: 8px 5px 5px;
    display: table;
    width: 100%;
}

    .date-picker-time-header .date-picker-editor-wrap {
        position: relative;
        display: table-cell;
        padding: 0 5px;
    }

        .date-picker-time-header .date-picker-editor-wrap .input-inner {
            height: 2rem;
            line-height: 2rem;
            padding: 0 1rem;
            cursor: pointer;
        }

            .date-picker-time-header .date-picker-editor-wrap .input-inner[readonly] {
                background-color: #fff;
            }

.date-picker-editor-wrap .time-panel {
    position: absolute;
    z-index: -1;
    display: none;
    width: 145px;
    margin-top: 0.25rem;
}

    .date-picker-editor-wrap .time-panel .time-spinner-item {
        height: 28px;
        line-height: 28px;
    }

.date-picker-editor-wrap .time-panel-content:after, .date-picker-editor-wrap .time-panel-content:before {
    margin-top: -32px;
    height: 28px;
}

.date-picker-editor-wrap .time-spinner-arrow.fa-angle-up {
    top: 3px;
}

.date-picker-editor-wrap .time-spinner-arrow.fa-angle-down {
    bottom: 3px;
}

.date-picker-editor-wrap .time-spinner-list-wrapper {
    height: 84px;
    margin: 36px 0;
}

.is-open .date-picker-editor-wrap .time-panel {
    z-index: 10;
    display: block;
}

.picker-panel {
    color: #606266;
    border: 1px solid #ced4da;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background: #fff;
    border-radius: 4px;
    line-height: 30px;
}

.picker-panel-body-wrapper:after, .picker-panel-body:after {
    content: "";
    display: table;
    clear: both;
}

.picker-panel-body {
    width: 320px;
}

.date-picker-header {
    margin: 12px;
    display: flex;
    align-items: center;
}

.date-picker .picker-panel-content {
    width: 292px;
}

.picker-panel-content {
    position: relative;
    margin: 15px;
}

    .picker-panel-content table {
        table-layout: fixed;
        width: 100%;
        font-size: 12px;
        user-select: none;
    }

        .picker-panel-content table td {
            text-align: center;
        }

            .picker-panel-content table td .cell {
                display: block;
                margin: 0 auto;
                cursor: pointer;
            }

            .picker-panel-content table td.today .cell {
                color: #409eff;
                font-weight: 700;
            }

            .picker-panel-content table td.current:not(.disabled) .cell,
            .picker-panel-content table td.start:not(.next-month):not(.prev-month):not(.disabled) .cell,
            .picker-panel-content table td.end:not(.next-month):not(.prev-month):not(.disabled) .cell {
                color: #fff;
                background-color: #409eff;
            }

            .picker-panel-content table td.range div {
                background-color: #f2f6fc;
            }

            .picker-panel-content table td.range.start div {
                margin-left: 5px;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            }

                .picker-panel-content table td.range.start div .cell {
                    margin-left: 4px;
                }

            .picker-panel-content table td.range.end div {
                margin-right: 5px;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            }

                .picker-panel-content table td.range.end div .cell {
                    margin-right: 4px;
                }

            .picker-panel-content table td.disabled .cell {
                cursor: not-allowed;
                color: #c0c4cc;
            }

.date-table th {
    padding: 5px;
    font-weight: 400;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
}

.date-table td.next-month, .date-table td.prev-month {
    color: #c0c4cc;
}

.date-table td:not(.prev-month):not(.next-month):hover,
.picker-panel-icon-btn:hover,
.date-picker-header-label:hover,
.sidebar-item:hover {
    color: #409eff;
}

.date-table td div {
    margin: 4px 0;
    padding: 3px 0;
}

.date-table td .cell {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    line-height: 24px;
    border-radius: 50%;
    cursor: pointer;
}

.picker-panel-icon-btn {
    color: #303133;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.date-picker-header-label {
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.pick-panel-arrow-left, .pick-panel-arrow-right {
    margin: 0 6px;
}

.year-table, .month-table {
    margin-top: 29px;
}

    .year-table tr, .month-table tr {
        border-top: 1px solid #ebeef5;
    }

    .year-table td div {
        padding: 12px 0;
    }

    .year-table td .cell {
        width: 48px;
        height: 24px;
        line-height: 24px;
        border-radius: 16px;
    }

    .month-table td div {
        padding: 26px 0;
    }

    .month-table td .cell {
        width: 60px;
        border-radius: 18px;
    }

@media (min-width: 576px) {
    .form-inline input.form-control {
        width: 196px;
    }

    .input-group input.form-control {
        width: 1%;
    }
}
/*end datetimepicker*/

/*time picker*/
.time-panel {
    border: 1px solid #ced4da;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    width: 180px;
    user-select: none;
}

.time-panel-content {
    font-size: 0;
    position: relative;
    overflow: hidden;
}

    .time-panel-content:before {
        padding-left: 50%;
        margin-right: 12%;
        margin-left: 12%;
    }

    .time-panel-content.has-seconds:before {
        padding-left: 33.33333%;
    }

    .time-panel-content:after, .time-panel-content:before {
        content: "";
        top: 50%;
        position: absolute;
        margin-top: -36.6px;
        height: 36.6px;
        left: 0;
        right: 0;
        border-top: 1px solid #e4e7ed;
        border-bottom: 1px solid #e4e7ed;
    }

    .time-panel-content.has-seconds:after {
        left: 66.66667%;
    }

    .time-panel-content:after {
        left: 50%;
        margin-left: 12%;
        margin-right: 12%;
    }

.time-spinner {
    width: 100%;
    white-space: nowrap;
}

    .time-spinner.has-seconds .time-spinner-wrapper {
        width: 33.3%;
    }

.time-spinner-wrapper.is-arrow {
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.time-spinner-wrapper {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

    .time-spinner-wrapper.is-arrow .time-spinner-list {
        transition: transform .3s linear
    }

.time-spinner-arrow {
    font-size: 14px;
    color: #909399;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

    .time-spinner-arrow.fa-angle-up {
        top: 10px;
    }

    .time-spinner-arrow.fa-angle-down {
        bottom: 10px;
    }

.time-spinner-list-wrapper {
    overflow: hidden;
    height: 110px;
    margin: 40px 0;
    width: 100%;
}

.time-spinner-list {
    margin: 0;
    list-style: none;
}

.time-spinner-input.input .input-inner, .time-spinner-list {
    padding: 0;
    text-align: center;
}

.time-spinner-item {
    height: 36.6px;
    line-height: 36.6px;
    font-size: 12px;
    color: #606266;
    opacity: 0.6;
}

    .time-spinner-item.active:not(.disabled) {
        font-weight: 700;
        font-size: 14px;
        opacity: 1;
    }

    .time-spinner-item.active:not(.disabled), .time-spinner-arrow:hover {
        color: #409eff;
    }

    .time-spinner-item.prev, .time-spinner-item.next {
        opacity: 0.8;
        transform: scale(1, 0.8);
        line-height: 30px;
    }

.time-panel-footer {
    border-top: 1px solid #e4e4e4;
    padding: 4px;
    height: 36px;
    line-height: 25px;
    text-align: right;
}

.time-panel-btn {
    border: none;
    line-height: 28px;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;
    color: #303133;
}

    .time-panel-btn.confirm {
        font-weight: 800;
        color: #409eff;
    }

.picker-panel-footer {
    border-top: 1px solid #e4e4e4;
    padding: 4px;
    background-color: #fff;
    position: relative;
    display: flex;
}

    .picker-panel-footer .picker-panel-link-btn {
        padding: 7px 15px;
        font-size: 0.75rem;
        border-radius: 3px;
        line-height: 12px;
        color: #606266;
        transition: border-color .3s linear, color .3s linear;
    }

        .picker-panel-footer .picker-panel-link-btn.is-confirm {
            border: 1px solid #dcdfe6;
        }

            .picker-panel-footer .picker-panel-link-btn.is-confirm:hover {
                border-color: #409eff;
                color: #409eff;
            }

        .picker-panel-footer .picker-panel-link-btn.is-now {
            color: #409eff;
        }
/*end time picker*/

/*DateTimeRange*/
.datetime-range {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    display: inline-block;
    height: 40px;
    outline: none;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    padding: 3px 10px;
    position: relative;
}

    .datetime-range:hover {
        border-color: #c0c4cc;
    }

    .datetime-range.active {
        border-color: #409eff
    }

    .datetime-range.disabled {
        background-color: #e9ecef;
        cursor: not-allowed;
    }

.datetime-range-bar {
    display: inline-flex;
    align-items: center;
}

    .datetime-range-bar .datetime-range-input {
        border: none;
        outline: none;
        display: inline-block;
        line-height: 32px;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #606266;
        cursor: pointer;
        width: 80px;
    }

    .datetime-range-bar .datetime-range-input-icon {
        cursor: pointer;
    }

    .datetime-range-bar .range-separator {
        padding: 0 5px;
        color: #303133;
    }

.datetime-range.disabled .datetime-range-bar .datetime-range-input,
.datetime-range.disabled .datetime-range-bar .datetime-range-input-icon {
    cursor: not-allowed;
}

.range-panel-body {
    display: flex;
}

    .range-panel-body .picker-panel {
        box-shadow: none;
        border: none;
    }

        .range-panel-body .picker-panel:first-child {
            border-right: 1px solid #ced4da;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

    .range-panel-body .date-picker-header-label {
        cursor: unset;
    }

        .range-panel-body .date-picker-header-label:hover {
            color: inherit;
        }

.range-panel-footer {
    padding: 0.5rem;
}

.popover-datetime-range {
    max-width: unset;
}

    .popover-datetime-range .popover-body {
        padding: 0;
    }

.range-clear {
    border-radius: 50%;
    border: 1px solid #9d9d9d;
    padding: 1px;
    display: none;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 12px;
}

.datetime-range:hover:not(.disabled) .range-clear {
    display: flex;
}
/*End DateTimeRange*/

/*tabs*/
.tabs {
    display: flex;
}

    /*top*/
    .tabs.tabs-top {
        flex-flow: column;
    }

        .tabs.tabs-top.tabs-border-card .tabs-header {
            margin-bottom: 0;
        }

    /*right*/
    .tabs.tabs-right {
        flex-flow: row-reverse;
    }

    /*left*/
    .tabs.tabs-left {
        flex-flow: row;
    }

    /*bottom*/
    .tabs.tabs-bottom {
        flex-flow: column-reverse;
    }

    .tabs.tabs-card.tabs-bottom .tabs-header {
        border-top: 1px solid #e4e7ed;
        border-bottom: none;
    }

    .tabs.tabs-border-card.tabs-bottom .tabs-header {
        margin-top: 0;
    }

    /*wrapper*/
    .tabs .tabs-nav-wrap {
        position: relative;
        display: flex;
    }

        .tabs .tabs-nav-wrap:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: #e4e7ed;
        }

    .tabs.tabs-top .tabs-nav-wrap {
        margin-bottom: -1px;
    }

    .tabs.tabs-bottom .tabs-nav-wrap {
        margin-top: -1px;
    }

    .tabs.tabs-left .tabs-nav-wrap {
        margin-right: -1px;
    }

    .tabs.tabs-right .tabs-nav-wrap {
        margin-left: -1px;
    }

    .tabs.tabs-top .tabs-nav-wrap, .tabs.tabs-bottom .tabs-nav-wrap {
        width: 100%;
    }

        .tabs.tabs-top .tabs-nav-wrap.is-scrollable:not(.extend), .tabs.tabs-bottom .tabs-nav-wrap.is-scrollable:not(.extend) {
            padding: 0 30px;
        }

    .tabs.tabs-left .tabs-nav-wrap, .tabs.tabs-right .tabs-nav-wrap {
        height: 100%;
    }

        .tabs.tabs-left .tabs-nav-wrap:after, .tabs.tabs-right .tabs-nav-wrap:after {
            left: auto;
            right: 0;
            width: 2px;
            height: 100%;
        }

        .tabs.tabs-right .tabs-nav-wrap:after {
            left: 0;
            right: auto;
        }

        .tabs.tabs-left .tabs-nav-wrap.is-scrollable, .tabs.tabs-right .tabs-nav-wrap.is-scrollable {
            padding: 30px 0;
        }

    /*prev next*/
    .tabs .tabs-nav-next, .tabs .tabs-nav-prev {
        position: absolute;
        cursor: pointer;
        line-height: 40px;
        height: 40px;
        font-size: 16px;
        color: #909399;
        width: 30px;
        justify-content: center;
        align-items: center;
        display: none;
    }

    .tabs .tabs-nav-prev {
        left: 0;
        top: 0;
    }

    .tabs .tabs-nav-next {
        right: 0;
        top: 0;
    }

        .tabs .tabs-nav-next:hover, .tabs-nav-prev:hover {
            color: #409eff;
        }

    .tabs.tabs-left .tabs-nav-prev, .tabs.tabs-right .tabs-nav-prev {
        top: 0;
        left: calc(50% - 15px);
        height: 30px;
    }

        .tabs.tabs-left .tabs-nav-prev i:before, .tabs-right .tabs-nav-prev i:before {
            content: "\f106";
        }

    .tabs.tabs-left .tabs-nav-next, .tabs.tabs-right .tabs-nav-next {
        top: auto;
        bottom: 0;
        left: calc(50% - 15px);
        height: 30px;
    }

        .tabs.tabs-left .tabs-nav-next i:before, .tabs.tabs-right .tabs-nav-next i:before {
            content: "\f107";
        }

    .tabs .tabs-nav-wrap .nav-link-bar {
        padding: 0.5rem 1rem;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-width: 0 0 1px 1px;
        height: 39px;
        cursor: pointer;
    }

        .tabs .tabs-nav-wrap .nav-link-bar.left {
            border: 1px solid #dcdfe6;
            border-width: 0 1px 1px 0;
        }

        .tabs .tabs-nav-wrap .nav-link-bar.right {
            border: 1px solid #dcdfe6;
            border-width: 0 0 1px 1px;
        }

    .tabs .tabs-nav-wrap .dropdown-toggle:after {
        display: none;
    }

    .tabs .tabs-nav-wrap .dropdown-item {
        transition: background-color .3s linear;
    }

        .tabs .tabs-nav-wrap .dropdown-item:hover {
            background-color: #409eff;
        }

    /*scroll*/
    .tabs .tabs-nav-scroll {
        overflow: hidden;
        flex: 1;
    }

    .tabs.tabs-card.tabs-top .tabs-nav-scroll {
        border: solid 1px #ddd;
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }

    .tabs.tabs-card.tabs-bottom .tabs-nav-scroll {
        border: solid 1px #ddd;
        border-radius: 0 0 4px 4px;
        border-top: none;
    }

    .tabs.tabs-card.tabs-left .tabs-nav-scroll {
        border: solid 1px #ddd;
        border-radius: 4px 0 0 4px;
        border-right: none;
    }

    .tabs.tabs-card.tabs-right .tabs-nav-scroll {
        border: solid 1px #ddd;
        border-radius: 0 4px 4px 0;
        border-left: none;
    }

    .tabs.tabs-left .tabs-nav-scroll, .tabs.tabs-right .tabs-nav-scroll {
        height: 100%;
    }

    .tabs.tabs-top .tabs-nav-scroll, .tabs.tabs-bottom .tabs-nav-scroll {
        width: 100%;
    }


    /*nav*/
    .tabs .tabs-nav {
        white-space: nowrap;
        position: relative;
        display: flex;
    }

    .tabs.tabs-left .tabs-nav, .tabs.tabs-right .tabs-nav {
        flex-flow: column;
    }

        .tabs.tabs-left .tabs-nav .tabs-active-bar, .tabs.tabs-right .tabs-nav .tabs-active-bar {
            width: 2px;
            height: 40px;
        }

    .tabs.tabs-left .tabs-item {
        text-align: right;
    }

    .tabs.tabs-left .tabs-nav .tabs-active-bar {
        left: auto;
        right: 0;
        top: auto;
        bottom: auto;
    }

    .tabs.tabs-right .tabs-nav .tabs-active-bar {
        right: auto;
        left: 0;
        top: auto;
        bottom: auto;
    }

    .tabs .tabs-body {
        padding: 1rem;
    }

    .tabs.tabs-card .tabs-body {
        border: 1px solid #e4e7ed;
    }

    .tabs.tabs-card.tabs-top .tabs-body {
        border-top-width: 0;
        border-radius: 0 0 4px 4px;
    }

    .tabs.tabs-card.tabs-bottom .tabs-body {
        border-bottom-width: 0;
        border-radius: 4px 4px 0 0;
    }

    .tabs.tabs-card.tabs-left .tabs-body {
        border-left-width: 0;
        border-radius: 0 4px 4px 0;
    }

    .tabs.tabs-card.tabs-right .tabs-body {
        border-right-width: 0;
        border-radius: 4px 0 0 4px;
    }

.is-scrollable .tabs-nav-prev, .is-scrollable .tabs-nav-next {
    display: flex;
}

.tabs-active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #409eff;
    z-index: 1;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
}

.tabs-item.active {
    color: #409eff;
}

.tabs-item {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    display: flex;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    cursor: pointer;
    align-items: center;
    position: relative;
    transition: color .3s linear, background-color .3s linear;
}

    .tabs-item:hover {
        color: #409eff;
    }

    .tabs-item .tabs-item-text {
        padding: 0 0.25rem;
        flex: 1 1 auto;
    }

    .tabs-item.is-closeable .tabs-item-text {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .tabs-item:hover .tabs-item-close {
        display: flex;
    }

    .tabs-item .tabs-item-close {
        width: 18px;
        height: 18px;
        display: none;
        position: absolute;
        right: 1rem;
        justify-content: center;
        align-items: center;
        transition: all .3s linear;
    }

        .tabs-item .tabs-item-close:hover {
            background-color: #e4e7ed;
            border-radius: 4px;
        }

.tabs-content {
    overflow: hidden;
    position: relative;
}

.tabs-card.tabs-top .tabs-header {
    border-bottom: 1px solid #e4e7ed;
}

.tabs-card .tabs-header .tabs-item.active {
    border-bottom-color: #fff;
}

.tabs-card.tabs.tabs-left .tabs-header {
    border-right: 1px solid #e4e7ed;
}

.tabs-card.tabs.tabs-right .tabs-header {
    border-left: 1px solid #e4e7ed;
}

.tabs-card.tabs-bottom .tabs-header .tabs-item.active {
    border-top-color: #fff;
}

.tabs-card.tabs-left .tabs-header .tabs-item.active {
    border-right-color: #fff;
}

.tabs-card.tabs-right .tabs-header .tabs-item.active {
    border-left-color: #fff;
}

.tabs-card .tabs-header .tabs-item:first-child {
    border-left: none;
}

.tabs-card .tabs-header .tabs-item {
    border-bottom: 1px solid transparent;
    border-left: 1px solid #e4e7ed;
    transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
}

.tabs-card .tabs-header .tabs-item {
    border-bottom: 1px solid transparent;
    border-left: 1px solid #e4e7ed;
    transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
}

.tabs-card.tabs-top .tabs-header .tabs-item:last-child, .tabs-card.tabs-bottom .tabs-header .tabs-item:last-child {
    border-right: 1px solid #e4e7ed;
}

.tabs-card.tabs-bottom .tabs-header .tabs-item {
    border-top: 1px solid transparent;
}

.tabs-card.tabs-left .tabs-header .tabs-item {
    border-right: 1px solid transparent;
    border-left: none;
    border-bottom: 1px solid #e4e7ed;
}

.tabs-card.tabs-right .tabs-header .tabs-item {
    border-left: 1px solid transparent;
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
}

.tabs-border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    border-radius: 4px;
}

    .tabs-border-card > .tabs-header {
        background-color: #f5f7fa;
        margin: 0;
    }

        .tabs-border-card > .tabs-header .tabs-item.active {
            color: #409eff;
            background-color: #fff;
            border-right-color: #dcdfe6;
            border-left-color: #dcdfe6;
        }

        .tabs-border-card > .tabs-header .tabs-item {
            border: 1px solid transparent;
        }

            .tabs-border-card > .tabs-header .tabs-item:not(:hover):not(.active) {
                color: #909399;
            }

            .tabs-border-card > .tabs-header .tabs-item:not(.active):hover {
                background-color: #e9ecef;
            }

    .tabs-border-card.tabs-top .tabs-header {
        border-bottom: 1px solid #e4e7ed;
    }

    .tabs-border-card.tabs-bottom .tabs-header {
        border-top: 1px solid #e4e7ed;
    }

    .tabs-border-card.tabs-top .tabs-header .tabs-item {
        margin-top: -1px;
    }

        .tabs-border-card.tabs-top .tabs-header .tabs-item:first-child {
            border-top-left-radius: 4px;
        }

    .tabs-border-card.tabs-left .tabs-header, .tabs-border-card.tabs-right .tabs-header {
        border-bottom-width: 0;
    }

    .tabs-border-card.tabs-top .tabs-header .tabs-nav-wrap:not(.is-scrollable) .tabs-item,
    .tabs-border-card.tabs-bottom .tabs-header .tabs-nav-wrap:not(.is-scrollable) .tabs-item {
        margin-left: -1px;
    }

    .tabs-border-card.tabs-left .tabs-item.active, .tabs-border-card.tabs-right .tabs-item.active {
        border-top-color: #dcdfe6;
        border-bottom-color: #dcdfe6;
    }

    .tabs-border-card.tabs-left .tabs-item {
        border-left: none;
    }

    .tabs-border-card.tabs-right .tabs-item {
        border-right: none;
    }

    .tabs-border-card.tabs-left .tabs-item.active {
        border-right-color: #fff;
    }

    .tabs-border-card.tabs-right .tabs-item.active {
        border-left-color: #fff;
    }

.tabs-bottom.tabs-border-card > .tabs-header .tabs-item:nth-child(2), .tabs-bottom.tabs-card > .tabs-header .tabs-item:nth-child(2), .tabs-bottom .tabs-left > .tabs-header .tabs-item:nth-child(2), .tabs-bottom .tabs-right > .tabs-header .tabs-item:nth-child(2), .tabs-top.tabs-border-card > .tabs-header .tabs-item:nth-child(2), .tabs-top.tabs-card > .tabs-header .tabs-item:nth-child(2), .tabs-top .tabs-left > .tabs-header .tabs-item:nth-child(2), .tabs-top .tabs-right > .tabs-header .tabs-item:nth-child(2) {
    padding-left: 20px;
}

.tabs-bottom.tabs-border-card > .tabs-header .tabs-item:last-child, .tabs-bottom.tabs-card > .tabs-header .tabs-item:last-child, .tabs-bottom .tabs-left > .tabs-header .tabs-item:last-child, .tabs-bottom .tabs-right > .tabs-header .tabs-item:last-child, .tabs-top.tabs-border-card > .tabs-header .tabs-item:last-child, .tabs-top.tabs-card > .tabs-header .tabs-item:last-child, .tabs-top .tabs-left > .tabs-header .tabs-item:last-child, .tabs-top .tabs-right > .tabs-header .tabs-item:last-child {
    padding-right: 20px;
}

.tabs-card > .tabs-header .tabs-nav-wrap:after, .tabs-border-card > .tabs-header .tabs-nav-wrap:after {
    content: none;
}

.tabs-card .tabs-item.is-closeable .tabs-item-text, .tabs-border-card .tabs-item.is-closeable .tabs-item-text {
    margin-right: 1rem;
    margin-left: 0rem;
}

.is-page .layout-main > .tabs {
    margin: -1rem;
    border: none;
    border-radius: unset;
    min-height: calc(100% + 2rem);
}
/*end tabs*/

/*transfer*/
.transfer {
    font-size: 14px;
}

.transfer-panel {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
}

    .transfer-panel .transfer-panel-header {
        height: 40px;
        line-height: 40px;
        background: #f5f7fa;
        margin: 0;
        padding-left: 15px;
        border-bottom: 1px solid #ebeef5;
        color: #000;
    }

.transfer-panel-body {
    height: 246px;
}

.transfer-panel-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    height: 246px;
}

    .transfer-panel-list:not(.disabled) {
        overflow: auto;
    }

.transfer-panel-item {
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    display: block;
}

.transfer-buttons {
    display: inline-block;
    vertical-align: middle;
    padding: 0 30px;
}

    .transfer-buttons .btn {
        white-space: nowrap;
    }

        .transfer-buttons .btn:not(:first-child) {
            margin-left: 10px;
        }

    .transfer-buttons .is-disabled, .transfer-buttons .is-disabled:active, .transfer-buttons .is-disabled:focus, .transfer-buttons .is-disabled:hover, .transfer-buttons [disabled] {
        color: #fff;
        background-color: #a0cfff;
        border-color: #a0cfff;
    }

.transfer-panel-filter {
    text-align: center;
    margin: 15px;
    display: block;
    width: auto;
    position: relative;
}

    .transfer-panel-filter .input-inner {
        height: 32px;
        line-height: 32px;
        width: 100%;
        display: inline-block;
        border-radius: 16px;
        padding-right: 10px;
        padding-left: 30px;
        border: 1px solid #dcdfe6;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        color: #606266;
    }

        .transfer-panel-filter .input-inner:focus {
            outline: none;
            border-color: #409eff;
        }

    .transfer-panel-filter .input-prefix {
        height: 100%;
        width: 30px;
        transition: all .3s;
        position: absolute;
        left: 4px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c0c4cc;
    }

        .transfer-panel-filter .input-prefix:hover i:before, .transfer-panel-filter .input-prefix.is-on i:before {
            cursor: pointer;
            content: "\f057";
        }
/*end transfer*/

/*captcha*/
.captcha {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
}

.captcha-refresh {
    float: right;
    cursor: pointer;
    padding-left: 0.5rem;
}

.captcha-body {
    position: relative;
}

    .captcha-body .captcha-load {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .captcha-body .captcha-body-bg, .captcha-body .captcha-body-bar {
        position: absolute;
        border-radius: 2px;
        top: 0;
        left: 0;
    }

.captcha-footer {
    text-align: center;
    background: #f7f9fa;
    color: #45494c;
    border-radius: 2px;
    margin-top: 0.5rem;
    position: relative;
}

.captcha-footer, .captcha-bar-bg {
    line-height: 40px;
    height: 40px;
}

.captcha-bar-bg {
    position: absolute;
    border-radius: 4px;
}

.captcha-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.captcha-footer.is-move .captcha-bar-text {
    display: none;
}

.captcha-footer.is-move .captcha-bar-bg {
    border: 1px solid #1991FA;
    background-color: #D1E9FE;
}


.captcha-footer.is-valid .captcha-bar .fa-arrow-right:before {
    content: "\f00c";
}

.captcha-footer.is-invalid .captcha-bar {
    border: 1px solid #f57a7a;
    background-color: #f57a7a;
}

.captcha-footer.is-invalid .captcha-bar-bg {
    border: 1px solid #f57a7a;
    background-color: #fce1e1;
    border-width: 1px 0 1px 1px;
}

.captcha-footer.is-invalid .captcha-bar .fa-arrow-right:before {
    content: "\f00d";
}

.captcha-footer.is-valid .captcha-bar {
    border: 1px solid #52CCBA;
    background-color: #52CCBA;
}

.captcha-footer.is-valid .captcha-bar-bg {
    border: 1px solid #52CCBA;
    border-width: 1px 0 1px 1px;
    background-color: #D2F4EF;
}

.captcha-footer.is-valid .captcha-bar .fa-arrow-right:before {
    content: "\f00c";
}
/*end captcha*/

/*calendar*/
.calendar-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
}

.calendar-title {
    color: #000;
    align-self: center;
    font-size: 1rem;
}

.calendar-button-group .btn {
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    outline: none;
    margin: 0;
    transition: .3s;
    padding: 7px 15px;
    font-size: 12px;
}

    .calendar-button-group .btn:focus, .calendar-button-group .btn:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }

    .calendar-button-group .btn:active {
        color: #3a8ee6;
        border-color: #3a8ee6;
        outline: none;
    }

.calendar-table {
    table-layout: fixed;
    width: 100%;
}

    .calendar-table thead th {
        padding: 12px 0;
        color: #606266;
        font-weight: 400;
        text-align: center;
    }

    .calendar-table:not(.is-range) td.next, .calendar-table:not(.is-range) td.prev {
        color: #c0c4cc;
    }

    .calendar-table tr td:first-child {
        border-left: 1px solid #ebeef5;
    }

    .calendar-table tr:first-child td {
        border-top: 1px solid #ebeef5;
    }

    .calendar-table td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        vertical-align: top;
        transition: background-color .2s ease;
        cursor: pointer;
    }

        .calendar-table td.is-today {
            color: #409eff;
        }

        .calendar-table td.is-selected {
            color: #1989fa;
        }

        .calendar-table td.is-selected {
            background-color: #f2f8fe;
        }

    .calendar-table .calendar-day {
        box-sizing: border-box;
        padding: 8px;
        height: 85px;
    }

        .calendar-table .calendar-day:hover {
            cursor: pointer;
            background-color: #f2f8fe;
        }

    .calendar-table:not(.is-range) td.next, .calendar-table:not(.is-range) td.prev {
        color: #c0c4cc;
    }

.calendar .table-week .week-header {
    border-radius: 50%;
    border: 1px solid transparent;
    padding: 4px;
    display: inline-block;
    min-width: 52px;
}

    .calendar .table-week .week-header.is-today {
        border: 1px solid #409eff;
        color: #409eff;
    }

.calendar .table-week thead tr:last-child {
    border-bottom: 2px solid #dee2e6;
}

.calendar .table-week tbody tr {
    text-align: center;
}

.calendar .table-week tbody td {
    padding: 1rem 0;
    border-right: 0;
    border-left: 0;
    position: relative;
}
/*end calendar*/

/*divider*/
.divider {
    background-color: #dcdfe6;
    position: relative;
}

    .divider .divider-text {
        position: absolute;
        background-color: #fff;
        padding: 0 20px;
        font-weight: 500;
        color: #303133;
        font-size: 14px;
    }

    .divider.divider-horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 1rem 0;
    }

        .divider.divider-horizontal .divider-text.is-left {
            left: 20px;
            transform: translateY(-50%);
        }

        .divider.divider-horizontal .divider-text.is-center {
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .divider.divider-horizontal .divider-text.is-right {
            right: 20px;
            transform: translateY(-50%);
        }

.divider-vertical {
    width: 1px;
    margin: 0 1rem;
}

.divider.divider-vertical .divider-text {
    padding: 20px 0;
}

    .divider.divider-vertical .divider-text.is-left {
        top: 20px;
        transform: translateX(-50%);
    }

    .divider.divider-vertical .divider-text.is-center {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .divider.divider-vertical .divider-text.is-right {
        bottom: 20px;
        transform: translateX(-50%);
    }
/*end divider*/

/*accordion*/
.accordion .card-header {
    padding: 6px;
}

.accordion .card-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.5rem;
}

    .accordion .card-header-wrapper .fa-angle-down {
        transition: transform .3s linear;
    }

    .accordion .card-header-wrapper .collapsed + .fa-angle-down {
        transform: rotate(-90deg);
    }

.accordion .collapse-item {
    font-size: 13px;
    line-height: 1.8;
}
/*end accordion*/

/*avatar*/
.avatar {
    border-radius: 4px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #c0c4cc;
    color: #fff;
}

    .avatar img {
        width: 100%;
        object-fit: cover;
    }

    .avatar.is-circle {
        border-radius: 50%;
    }

    .avatar.is-xl {
        width: 70px;
        height: 70px;
    }

    .avatar.is-lg {
        width: 60px;
        height: 60px;
    }

    .avatar.is-sm {
        width: 40px;
        height: 40px;
    }

    .avatar.is-xs {
        width: 30px;
        height: 30px;
    }

    .avatar i {
        font-size: 1.4rem;
    }
/*end avatar*/

/*tag*/
.tag {
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 0;
}

    .tag.is-close {
        padding-right: 30px;
    }

        .tag.is-close .close {
            top: 8px;
        }

    .tag > i {
        margin-right: 2px;
    }
/*end tag*/

/*timeline*/
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .timeline .time-line-item {
        position: relative;
        padding-bottom: 1rem;
    }

        .timeline .time-line-item:last-child {
            padding-bottom: 0;
        }

        .timeline .time-line-item .time-line-item-tail {
            position: absolute;
            left: 4px;
            height: 100%;
            border-left: 2px solid #e4e7ed;
        }

        .timeline .time-line-item:last-child .time-line-item-tail {
            display: none
        }

    .timeline .timeline-item-node-normal {
        left: -1px;
        width: 12px;
        height: 12px;
    }

    .timeline .timeline-item-node {
        position: absolute;
        background-color: #e4e7ed;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .timeline .timeline-item-node.is-icon {
            background-color: transparent;
        }

    .timeline .timeline-item-wrapper {
        position: relative;
        padding-left: 1.5rem;
        top: -4px;
    }

    .timeline .timeline-item-content {
        color: #303133;
    }

    .timeline .timeline-item-timestamp {
        margin-top: 0.5rem;
        color: #909399;
    }

    .timeline.is-alternate .time-line-item-tail,
    .timeline.is-alternate .timeline-item-node {
        left: 50%;
    }

    .timeline.is-alternate .timeline-item-node {
        margin-left: -5px;
    }

    .timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper {
        left: calc(50% - 5px);
        width: calc(50% - 1rem);
        text-align: left;
    }

    .timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper {
        width: calc(50% - 1rem);
        margin: 0;
        text-align: right;
    }

    .timeline.is-left .time-line-item-tail,
    .timeline.is-left .timeline-item-node {
        left: 100%;
    }

    .timeline.is-left .timeline-item-node {
        margin-left: -5px;
    }

    .timeline.is-left .time-line-item .timeline-item-wrapper {
        width: calc(100% - 1rem);
        margin: 0;
        text-align: right;
    }
/*end timeline*/

/*footer*/
.footer {
    background: #5b6e84;
    color: #fff;
    padding: 10px 4px;
    height: 40px;
    display: flex;
}

    .footer .footer-text {
        flex: 1 1 auto;
        text-align: center;
    }
/*end footer*/

/*menu*/
.menu {
    border-bottom: 1px solid #e6e6e6;
}

    .menu .card,
    .menu .card .card-header {
        background-color: inherit;
    }

    .menu .navbar {
        padding: 0 1rem;
    }

    .menu .nav-link {
        position: relative;
    }

        .menu .nav-link i + span,
        .menu .dropdown-item i + span,
        .menu .nav-link .badge {
            margin-left: 4px;
        }

    .menu .navbar-nav > .nav-item {
        border-bottom: solid 2px transparent;
        position: relative;
    }

        .menu .navbar-nav > .nav-item.active {
            color: #1890ff;
        }

        .menu .navbar-nav > .nav-item:after {
            content: "";
            position: absolute;
            background-color: #1890ff;
            left: 50%;
            height: 2px;
            width: 0px;
            transition: width .3s linear, left .3s linear;
        }

        .menu .navbar-nav > .nav-item.active:after {
            width: 100%;
            left: 0;
        }

    .menu .nav-item .nav-link {
        padding: 0.5rem 1rem;
        color: rgba(0,0,0,.65);
        transition: color .3s linear;
        user-select: none;
        white-space: nowrap;
    }

        .menu .nav-item .nav-link.active {
            color: #1890ff;
        }

        .menu .nav-item .nav-link:hover {
            color: #1890ff;
        }

    .menu .dropdown-menu {
        overflow: unset;
        margin-top: 10px;
    }

        .menu .dropdown-menu .dropdown-item {
            position: relative;
        }

        .menu .dropdown-menu .dropdown-item, .menu .sub-menu .nav-item {
            padding: 6px 20px;
            transition: background-color .3s linear;
        }

            .menu .dropdown-menu .dropdown-item:hover,
            .menu .dropdown-menu .dropdown-item.active,
            .menu .sub-menu .nav-item.active,
            .menu .sub-menu .nav-item:hover {
                background-color: #60aff9;
            }

    .menu .dropdown-menu-arrow {
        width: 0;
        height: 0;
        border-width: 0 6px 6px;
        border-style: solid;
        border-color: transparent transparent rgba(0,0,0,.15);
        position: absolute;
        left: 16px;
        margin-top: -15px;
    }

        .menu .dropdown-menu-arrow:after {
            content: " ";
            width: 0;
            height: 0;
            border-width: 0 6px 6px;
            border-style: solid;
            border-color: transparent transparent #fff;
            position: absolute;
            top: 1px;
            left: -6px;
        }

    .menu .sub-menu {
        display: none;
        background-color: #fff;
        white-space: nowrap;
        border: solid 1px #e6e6e6;
        border-radius: 4px;
        padding: 0.5rem 0;
        position: absolute;
        left: 100%;
        top: -9px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }

        .menu .sub-menu .nav-item {
            border-bottom: none;
            min-width: 10rem;
        }

            .menu .sub-menu .nav-item .nav-link {
                padding: 0;
                color: #212529;
                position: relative;
            }

    .menu .dropdown-item:hover > .sub-menu,
    .menu .nav-item:hover > .nav-link > .sub-menu {
        display: block;
    }

    .menu .nav-item:hover > .nav-link > .sub-menu {
        left: calc(100% + 20px);
        top: -15px;
    }

    .menu .has-leaf > .nav-link-right {
        transition: transform .3s linear;
        position: absolute;
        right: 14px;
        top: 9px;
    }

    .menu .sub-menu .has-leaf > .nav-link-right {
        right: 0;
        top: 3px;
    }

    .menu .has-leaf:hover > .nav-link-right {
        transform: rotate(-90deg);
    }

    .menu.is-vertical {
        border: none;
        width: 100%;
    }

        .menu.is-vertical .accordion .card {
            border: none;
        }

        .menu.is-vertical .accordion .card-header {
            padding: 0;
            margin: 0;
            border: none;
        }

        .menu.is-vertical .accordion .card-header-wrapper {
            padding-right: 0.75rem;
        }

        .menu.is-vertical .accordion .nav-link {
            flex: 1 1 auto;
            user-select: none;
        }

        .menu.is-vertical .nav-link {
            transition: color .3s linear;
            color: inherit;
            white-space: nowrap;
        }

            .menu.is-vertical .nav-link.active,
            .menu.is-vertical .nav-link:hover,
            .menu.is-vertical .nav-link.active + i,
            .menu.is-vertical .nav-link:hover + i {
                color: #409eff;
            }

        .menu.is-vertical .accordion .card-body {
            padding: 0;
        }

        .menu.is-vertical .has-leaf > .accordion {
            padding-left: 20px;
        }

        /* side menu*/
        .menu.is-vertical .nav-link .nav-link-text {
            transition: width .3s linear, opacity .3s linear;
            opacity: 1;
        }

        .menu.is-vertical .has-leaf > .accordion {
            transition: padding-left .3s linear
        }

    .menu .nav-link-text {
        display: inline-block;
    }

    .menu .nav-item.disabled {
        cursor: not-allowed;
    }

        .menu .nav-item.disabled .nav-link,
        .menu .nav-link.disabled,
        .menu .card-header-wrapper.disabled,
        .dropdown-item.disabled {
            cursor: not-allowed;
            color: #ddd;
        }

@media (min-width: 768px) {
    .menu.is-vertical.is-collapsed .nav-link .nav-link-text {
        width: 0;
        opacity: 0;
    }

    .menu.is-vertical.is-collapsed .has-leaf > .accordion {
        padding-left: 0;
    }
}
/*end menu*/

/*layout*/
.layout {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}

    .layout .layout-main {
        flex: 1;
    }

.has-sidebar {
    flex-direction: row;
    display: flex;
    flex: 1;
}

.layout-side {
    position: relative;
}

.layout-gotop {
    background: rgba(255,255,255,.5);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background-color .3s linear;
    color: #606266;
}

    .layout-gotop:hover {
        background-color: #fff;
        color: #606266;
    }

.layout.is-page .layout-side {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    transition: transform .3s linear;
    z-index: 1030;
}

    .layout.is-page .layout-side.is-collapsed {
        transform: translateX(0);
    }

.layout.is-page .has-sidebar .layout-side {
    top: 50px;
}

.layout.is-page .layout-right,
.layout.is-page .has-sidebar .layout-main {
    width: 100%;
}

.layout.is-page.is-fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.layout.is-page .layout-header {
    background-color: #17a2b8;
    height: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.layout.is-page .layout-side {
    background-color: #343a40;
    color: #c2c7d0;
}

.layout-header-bar {
    padding: 4px 12px;
    color: #fff;
    background-color: #1ab394;
    border-color: #1ab394;
    border-radius: 4px;
}

    .layout-header-bar .fa-bars {
        transition: transform .3s linear;
    }

    .layout-header-bar.is-collapsed .fa-bars {
        transform: rotate(90deg);
    }

.layout.is-page .layout-main {
    padding: 1rem;
    position: relative;
    min-height: calc(100vh - 90px);
}

    .layout.is-page .layout-main.is-collapsed,
    .layout.is-page .layout-footer.is-collapsed {
        display: none;
    }

.layout.is-page .layout-header {
    z-index: 1035;
    position: sticky;
}

    .layout.is-page .layout-header.is-fixed {
        top: 0;
    }

    .layout.is-page .layout-header .layout-avatar-right {
        width: 44px;
        height: 44px;
    }

.layout.is-page .has-sidebar .layout-side .layout-banner {
    display: none;
}

.layout.is-page .layout-side .layout-banner {
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    background-color: #367fa9;
    height: 50px;
    font-size: 1.5rem;
}

.layout-banner-link {
    display: flex;
    align-items: center;
    color: inherit;
}

.layout.is-page .layout-side .layout-banner .layout-logo {
    width: 44px;
    border-radius: 4px;
}

.layout.is-page .layout-side .layout-banner span {
    padding-left: 1rem;
}

.layout.is-page .layout-side .layout-user {
    border-bottom: 1px solid #ddd;
    padding: 0.625rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .layout.is-page .layout-side .layout-user .layout-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .layout.is-page .layout-side .layout-user span {
        padding-left: 1rem;
    }

.layout.is-page .layout-side .layout-menu {
    overflow-x: hidden;
    padding: 0.5rem 0;
    height: calc(100vh - 115px);
}

.layout.is-page .layout-user-state {
    width: 8px;
    height: 8px;
    background-color: #28a745;
    border-radius: 50%;
    margin-left: 1rem;
}

.layout.is-page .layout-footer {
    height: 40px;
    color: #fff;
    background-color: #5b6e84;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

    .layout.is-page .layout-footer.is-fixed {
        position: sticky;
        bottom: 0;
    }

    .layout.is-page .has-sidebar .layout-side.is-fixed-header, .layout.is-page .layout-footer.is-fixed {
        z-index: 1020;
    }

@media (min-width: 768px) {
    .layout.is-page .layout-side {
        transform: translateX(0);
        position: relative;
    }

    .layout.is-page .has-sidebar .layout-side {
        top: 0;
    }

        .layout.is-page.has-sidebar .layout-side.is-fixed-header {
            top: 0;
            height: calc(100vh);
        }

    .layout.is-page :not(.layout-right) .layout-main,
    .layout.is-page .layout-right {
        width: calc(100% - 214px);
    }

    .layout.is-page .layout-side {
        width: 214px;
        box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
    }

        .layout.is-page .layout-side.is-collapsed,
        .layout.is-page .layout-side .menu.is-vertical.is-collapsed {
            width: 70px;
        }

        .layout.is-page .layout-side.is-fixed-header {
            position: sticky;
            top: 50px;
            height: calc(100vh - 50px);
        }

            .layout.is-page .layout-side.is-fixed-header.is-fixed-footer {
                height: calc(100vh - 90px);
            }

        .layout.is-page .layout-side .layout-menu {
            height: auto;
        }

    .layout .layout-side,
    .layout.is-page .layout-side,
    .layout .menu.is-vertical {
        transition: width .3s linear;
    }

    .layout-right {
        display: flex;
        flex-flow: column;
        flex: 1;
    }

    .layout.is-page .layout-footer.is-fixed,
    .layout.is-page .layout-header.is-fixed,
    .layout.is-page .layout-side.is-fixed-header {
        z-index: 1025;
    }

    .layout.is-page .layout-title {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        flex: 1 1 auto;
        opacity: 1;
        transition: opacity .3s linear;
        color: #e9ecef;
    }

    .layout.is-page .is-collapsed .layout-title {
        opacity: 0;
    }

    .layout .is-collapsed .layout-user-state {
        display: none;
    }

    .layout.is-page.has-sidebar .layout-side {
        min-height: calc(100vh);
    }

    .layout.is-page .has-sidebar .layout-side {
        min-height: calc(100vh - 90px);
    }

        .layout.is-page.has-sidebar .layout-side.is-fixed-header.is-fixed-footer .layout-menu,
        .layout.is-page .layout-side.is-fixed-header .layout-menu {
            height: calc(100vh - 115px);
        }

    .layout.is-page .layout-side.is-fixed-header.is-fixed-footer .layout-menu {
        height: calc(100vh - 155px);
    }

    .layout.is-page .layout-main.is-collapsed {
        display: block;
    }

    .layout.is-page .layout-footer.is-collapsed {
        display: flex;
    }

    .layout.is-page .layout-menu .menu.is-vertical .nav-link:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        opacity: 0;
        transition: background-color .3s linear, opacity .3s linear;
    }

    .layout.is-page .layout-menu .menu.is-vertical.is-collapsed .nav-link.active::before {
        opacity: 1;
        background-color: #409eff;
    }

    .layout.is-page .layout-side .layout-menu .slimScrollBar {
        opacity: 1 !important;
        background-color: #c1c1c1 !important;
    }
}
/*end layout*/
/*step*/
.steps {
    display: flex;
}

.steps-horizontal {
    white-space: nowrap;
}

.step {
    position: relative;
    flex-shrink: 1;
}

    .step.is-horizontal {
        display: inline-block;
    }

    .step.is-center .step-head, .step.is-center .step-main {
        text-align: center;
    }

.step-head {
    position: relative;
    width: 100%;
    line-height: 1;
}

    .step-head.is-success {
        color: #67c23a;
        border-color: #67c23a;
    }

    .step-head.is-process {
        color: #303133;
        border-color: #303133;
    }

    .step-head.is-wait {
        color: #c0c4cc;
        border-color: #c0c4cc;
    }

    .step-head.is-finish {
        color: #409eff;
        border-color: #409eff;
    }

    .step-head.is-error {
        color: #f56c6c;
        border-color: #f56c6c;
    }

.step-main {
    white-space: normal;
    text-align: left;
}

.step-title {
    font-size: 14px;
    line-height: 38px;
}

    .step-title.is-success {
        color: #67c23a;
    }

    .step-title.is-finish {
        color: #409eff;
    }

    .step-title.is-process {
        font-weight: 700;
        color: #303133;
    }

    .step-title.is-wait {
        color: #c0c4cc;
    }

    .step-title.is-error {
        color: #f56c6c;
    }

.step-description {
    padding-right: 10%;
    margin-top: -5px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}

    .step-description.is-success {
        color: #67c23a;
    }

    .step-description.is-finish {
        color: #409eff;
    }

    .step-description.is-process {
        color: #303133;
    }

    .step-description.is-wait {
        color: #c0c4cc;
    }

.step.is-center .step-description {
    padding-left: 20%;
    padding-right: 20%;
}

.step-line {
    position: absolute;
    border-color: inherit;
    background-color: #c0c4cc;
}

.step.is-horizontal .step-line {
    height: 2px;
    top: 11px;
    left: 0;
    right: 0;
}

.step.is-center .step-line {
    left: 50%;
    right: -50%;
}

.step-line-inner {
    display: block;
    border: 1px solid;
    border-color: inherit;
    transition: .15s ease-out;
    box-sizing: border-box;
    width: 0;
    height: 0;
}

.step:last-of-type .step-line {
    display: none;
}

.step-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    transition: .15s ease-out;
}

    .step-icon.is-text {
        border-radius: 50%;
        border: 2px solid;
        border-color: inherit;
    }

    .step-icon.is-icon {
        width: 40px;
    }

.step-icon-inner {
    display: inline-block;
    user-select: none;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    font-style: normal;
}

    .step-icon-inner[class*=fa]:not(.is-status) {
        font-size: 25px;
        font-weight: 400;
    }

.step:last-of-type.is-flex {
    flex-basis: auto !important;
    flex-shrink: 0;
    flex-grow: 0;
}
/*end step*/

/*circle*/
.circle {
    display: inline-block;
    position: relative;
}

.circle-progress {
    transition: stroke-dashoffset .3s linear;
}

.circle-primary {
    stroke: #1593FF;
}

.circle-danger {
    stroke: #dc3545;
}

.circle-success {
    stroke: #28a745;
}

.circle-warning {
    stroke: #ffc107;
}

.circle-info {
    stroke: #17a2b8;
}

.circle-secondary {
    stroke: #6c757d;
}

.circle-dark {
    stroke: #343a40;
}

.circle-title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/*end circle*/

/*console*/
.console-body {
    padding: 1rem;
    background-color: #174482;
    color: #fff;
    overflow: auto;
}
/*end console*/

/*auto complete*/
.auto-complete {
    position: relative;
}

    .auto-complete input {
        padding-right: 30px;
    }

    .auto-complete .select-dropdown {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        display: none;
        z-index: 2;
    }

        .auto-complete .select-dropdown .dropdown-list {
            max-height: 300px;
            overflow: auto;
            padding: 6px 0;
            list-style: none;
            margin: 0;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
            border: 1px solid rgba(0,0,0,.15);
            border-radius: .25rem;
        }

            .auto-complete .select-dropdown .dropdown-list .dropdown-item {
                padding: 6px 20px;
            }

    .auto-complete.is-complete .select-dropdown {
        display: block;
    }

    .auto-complete .fa-spin {
        position: absolute;
        top: 10.5px;
        right: 8px;
        display: none;
    }

    .auto-complete.is-loading .fa-spin {
        display: block;
    }
/*end complete*/

/*tree*/
.tree {
    position: relative;
}

    .tree .tree-root {
        padding: 0;
        margin: 0;
    }

    .tree .tree-ul {
        padding: 0 0 0 20px;
        margin: 0;
        display: none;
    }

        .tree .tree-ul.show {
            display: block;
        }

    .tree .tree-item {
        list-style: none;
        cursor: pointer;
        margin: 1px 0;
    }

        .tree .tree-item:before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 29px;
            transition: background-color .3s linear;
        }

        .tree .tree-item.hover:before {
            background-color: #66a2e0a1;
        }

        .tree .tree-item.active:before {
            background-color: #409effa1;
        }

        .tree .tree-item .tree-content {
            position: relative;
            display: flex;
            padding: 0.25rem 0;
            align-items: center;
        }

            .tree .tree-item .tree-content .fa-caret-right {
                width: 18px;
                height: 18px;
                transition: transform .3s linear;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tree .tree-item .tree-content .show .fa-caret-right {
                transform: rotate(90deg);
            }

    .tree .tree-node {
        flex: 1;
    }

    .tree .form-checkbox {
        margin: 0 4px;
    }

.tree-icon {
    width: 18px;
}
/*end tree*/

/*search*/
.search .input-group-append {
    position: relative;
}

.search .auto-complete .fa-spin {
    left: -26px;
}
/*end search*/

/*listview*/
.listview {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

    .listview .listview-header {
        padding: 1rem;
        border-bottom-color: inherit;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .listview .listview-body {
        padding: 1rem 0 0 1rem;
        position: relative;
        overflow: auto;
        display: flex;
        flex-flow: row wrap;
        flex: 1;
    }

        .listview .listview-body .listview-item {
            margin: 0 1rem 1rem 0;
        }

            .listview .listview-body .listview-item:hover .card {
                cursor: pointer;
                border: 1px solid #409eff;
            }

            .listview .listview-body .listview-item .card {
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            }

        .listview .listview-body .listview-item-group {
            flex-basis: 100%;
            margin: 1rem 0;
            font-weight: bold;
            position: relative;
        }

            .listview .listview-body .listview-item-group:after {
                content: "";
                position: absolute;
                top: calc(-50%);
                left: -1rem;
                right: 0;
                background-color: rgba(0,0,0,.1);
                height: calc(200%);
            }

    .listview .listview-footer {
        padding: 1rem;
        border-top-color: inherit;
        border-top-width: 1px;
        border-top-style: solid;
    }
/*end listview*/

/* InputNumber */
.input-number-fix::-webkit-outer-spin-button,
.input-number-fix::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}
/*end InputNumber*/

/*Textarea*/
@media (min-width: 576px) {
    .form-inline .form-group {
        margin-bottom: 1rem;
    }

    .form-inline .row textarea {
        width: calc(100% - 100px);
    }
}
/*End Textarea*/

/*CheckboxList*/
.checkbox-list {
    height: auto;
    display: flex;
    flex-flow: row wrap;
    padding-bottom: 0;
}

    .checkbox-list .checkbox-item {
        display: inline-flex;
        width: 120px;
        margin-bottom: 0.375rem;
    }

        .checkbox-list .checkbox-item .form-checkbox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-right: 0.5rem;
        }

            .checkbox-list .checkbox-item .form-checkbox .checkbox-input {
                display: inline-flex;
            }

            .checkbox-list .checkbox-item .form-checkbox .checkbox-label {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

@media (min-width: 576px) {
    .form-inline .checkbox-list {
        display: flex;
        width: calc(100% - 100px);
    }
}
/*End CheckboxList*/

/*editor-form*/
.ef-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2rem;
}
/*end editor-form*/

/*skeleton*/
.skeleton {
    width: 100%;
    flex: 1;
}

.skeleton-content {
    position: relative;
}

.skeleton-row {
    min-height: 32px;
    background-color: #e9ecef;
}

    .skeleton-row:not(:last-child) {
        margin-bottom: 0.5rem;
    }

.skeleton-content.round .skeleton-row {
    border-radius: 4px;
}

.skeleton-content.active .skeleton-row,
.skeleton-content.active .skeleton-avatar {
    background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2));
    background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
    background-size: 400% 100%;
    -webkit-animation: skeleton-loading 1.4s ease infinite;
    animation: skeleton-loading 1.4s ease infinite;
}

@-webkit-keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@media (min-width: 576px) {
    .skeleton-content .control-label.skeleton-row {
        margin-bottom: 0;
    }
}

.skeleton-content .form-control.skeleton-row {
    flex: 1;
}

.skeleton-avatar {
    width: 2rem;
    height: 2rem;
}

.skeleton-content.round .skeleton-avatar {
    border-radius: 4px;
}

.skeleton-content .skeleton-avatar.circle {
    border-radius: 50%;
}
/*end skeleton*/

/*widget*/
.widget .dropdown-toggle {
    color: #fff;
    padding: 14px 15px;
    position: relative;
}

    .widget .dropdown-toggle:after {
        content: unset;
    }

    .widget .dropdown-toggle .badge {
        position: absolute;
        top: 5px;
        font-size: 9px;
    }

.widget .dropdown-menu {
    overflow: visible;
    width: 235px;
    margin-left: -96px;
    padding: 0;
    max-height: none;
    border: none;
}

    .widget .dropdown-menu .dropdown-arrow {
        border-style: solid;
        border-width: 0 9px 9px;
        position: absolute;
        left: 108px;
        top: -9px;
    }

.widget .dropdown-header {
    color: #fff;
    padding: 0.5rem 0.625rem;
    border-radius: 4px 4px 0 0;
}

.widget .dropdown-body {
    overflow: auto;
    max-height: 300px;
}

.widget .dropdown-footer {
    padding: 0.5rem 0.625rem;
    background-color: #dcdfe6;
    border-radius: 0 0 4px 4px;
}

.widget .dropdown-item {
    border-bottom: 1px solid #dcdfe6;
}

    .widget .dropdown-item:nth-of-type(odd) {
        background-color: #eef0f3;
    }
/*end widget*/
