@import './variables.scss';

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(24,144,255,.3);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(24,144,255,.8);
}

::-webkit-resizer,::-webkit-scrollbar-corner {
    display: none;
}

.success {
    color: $greenColor;
}

.blueFont {
    color: $blueColor;
}

.yellowFont {
    color: rgb(253, 151, 16);
}

.danger {
    color: #FF0000;
}

.basic {
    color: #0079FE;
}

.el-menu-item i,.el-submenu__title i {
    color: #FFFFFF !important;
}

.el-menu-item.is-active {
    background-color: #2D3E4F !important;
    box-shadow: 0 3px 6px 0 rgba(1,1,1,0.09);
    i {
        color: #1B90FF !important;
    }
}
.el-menu-item.is-active::before {
    content: ' ';
    position: absolute;
    background: #1B90FF;
    box-shadow: 0 3px 6px 0 rgba(1,1,1,0.09);
    // border-radius: 0 100px 100px 0;
    width: 5px;
    height: $sideMenuRowHeight;
    top: 0;
    left: 0;
}

.el-main {
    padding: 0;
}

.el-tabs__item {
    color: #888888;
}

.el-tabs__header {
    margin: 0;
}

.el-tabs__nav-wrap {
    background: #FFFFFF;
}

.el-menu-item, .el-submenu__title {
    height: $sideMenuRowHeight;
    line-height: $sideMenuRowHeight;
}

.main-content {
    background-color: #FFFFFF;
    padding: 20px;
}

.option {
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: auto;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 15px;
    }

    .el-select .el-input__inner {
        padding-right: 30px;
    }

    .ml {
        margin-left: 20px;
    }

    .custom-datetime .el-input__inner {
        padding-right: 0 !important;
    }

    .custom-cascader {
        .el-input {
            .el-input__inner {
                padding-right: 30px;
            }
        }
    }
}

.custom-table {
    margin-top: 16px;
    padding: 16px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.custom-page {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.custom-pagination {
    display: flex;
    justify-content: space-between;
    .info {
        margin-left: 14px;
        margin-top: 25px;
        font-size: 10px;
        color: #00002A;
        &>span:last-child {
            margin-left: 15px;
        }
    }
}

.custom-table {
    .el-table__header {
        background-color: #1B90FF;
    }

    .el-table .cell {
        // display: inline-block;
        white-space: nowrap;
        // width: auto;
        // overflow: auto;
    }

    // .el-table .el-table__body-wrapper {
    //     overflow-x: auto;
    // }

    .tool {
        margin-bottom: 14px;
    }
}

.custom-form {
    .el-cascader {
        width: 100%;
    }

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
    }

    .el-select {
        width: 100%;
    }
}

.custom-dialog {
    .el-dialog {
        width: 980px;
    }
}

.custom-dialog1 {
    .el-dialog {
        width: 80%;
    }
}

.custom-dialog2 {
    .el-dialog {
        width: 85%;
    }
}

.custom-dialog-mini {
    .el-dialog {
        width: 400px;
        .el-input__inner {
            width: 220px;
        }
    }
}

.custom-dialog-node {
    .el-dialog__body {
        padding: 0;
    }
}

.input-filter {
    width: 70% !important;
}

.mt {
    margin-top: 20px;
}
.mt15 {
    margin-top: 15px;
}
.mt30 {
    margin-top: 30px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb {
    margin-bottom: 20px;
}

.pb {
    padding-bottom: 20px;
}

.custom-sortable {
    opacity: .8;
    color: #fff!important;
    background: rgba($color: #1B90FF, $alpha: .5) !important;
}

.custom-sortable-row {
    .el-table__row {
        cursor: move;
    }
}

.pointer {
    cursor: pointer;
}

thead {
    th.el-table__cell {
        background-color: #EBEEF5 !important;
        color: #333333 !important;
        // text-align: center !important;
    }
}

.el-tooltip__popper {
    max-width: 90% !important;
}