:root {
    // --el-menu-bg-color: #FFFEFB;
    --el-color-primary: #D4EAF8;
}

/* el-drawer */
.el-drawer {
    background-color: var(--el-menu-bg-color) !important;

    .el-drawer__header {
        padding: 16px 20px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--el-border-color-lighter);

        span {
            font-size: 17px;
            line-height: 17px;
            color: var(--el-text-color-primary) !important;
        }
    }

    .el-drawer__footer {
        border-top: 1px solid var(--el-border-color-lighter);
    }
}

/* el-dialog */
.el-dialog {
    padding: 0;
    background-color: var(--el-menu-bg-color) !important;

    .el-dialog__header {
        padding: 15px 20px;
        margin: 0;
        border-bottom: 1px solid var(--el-border-color-lighter);

        .el-dialog__title {
            font-size: 17px;
        }
    }

    .el-dialog__body,
    .el-dialog__footer {
        padding: 15px 20px;
    }
}

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

/* el-card */
.el-card {
    // height: 100%;
    color: var(--el-menu-text-color) !important;
    // background-color: var(--el-menu-bg-color) !important;

    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        height: 100% !important;
    }
}


.el-menu {
    background-color: var(--el-menu-bg-color) !important;

    .el-menu-item,
    .el-sub-menu {
        margin: 4px 12px;
    }

    .el-menu-item,
    .el-sub-menu__title,
    .el-sub-menu .el-menu-item {
        transition: all 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }

    .el-menu-item:hover,
    .el-menu-item.is-active,
    .el-sub-menu__title:hover,
    .el-sub-menu .el-menu-item:hover,
    .el-sub-menu .el-menu-item.is-active {
        background: #409eff;
        color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}

.el-table {
    background-color: var(--el-menu-bg-color) !important;
}
