$colorWhite: #fff;

$pageHeaderBackground: #2b3643;
.body {
    color: #333;
}
#app #page-main {
    .page-header {
        background: $pageHeaderBackground;

        .page-logo {
            .menu-toggler.sidebar-toggler {
                color: $colorWhite;
            }
        }

        .data-menu {
            .data-menu-dropdown {
                color: $colorWhite;
            }
            .el-select .el-input--suffix .el-input__inner {
                background: #e3e4e6;
            }
        }
        .user-menu {
            .user-menu-dropdown {
                color: $colorWhite;
            }
        }
    }

    #page-container {
        background: #f2f2f2;
        overflow: hidden;
        #page-sidebar-wrapper {
            color: azure;
            background-color: #364150;
            .sidebar-menu.el-menu {
                background: #364150;

                .sidebar-menu-submenu.el-submenu {
                    &.is-active>.el-submenu__title {
                        background: #36c6d3 !important;
                        color: $colorWhite !important;
                    }
                    .el-submenu__title {
                        height: 40px;
                        line-height: 40px;
                        &:hover {
                            background: #000;
                        }
                    }
                }
                .sidebar-menu-item.el-menu-item {
                    height: 40px;
                    line-height: 40px;
                    &:hover {
                        background: #000;
                    }
                    &.is-active {
                        background: #36c6d3 !important;
                        color: $colorWhite !important;
                    }
                }
            }
        }
        .page-content-wrapper {
            .page-content {
                .query-form {
                    border: 1px solid #dfe6ec;
                    background-color: $colorWhite;
                }
                .data-table {
                    .el-table__header-wrapper {
                        .el-table__header {
                            thead tr th {
                                background-color: #d9d9d9;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }

    .page-footer {
        background: #28303b;
    }
}

.el-menu--vertical {
    .el-menu.el-menu--popup.el-menu--popup-right-start {
        .el-menu-item.sidebar-menu-item.is-active {
            background: #36c6d3 !important;
            color: $colorWhite !important;
        }
    }
}

.sidebar-menu-item.el-menu-item,
.sidebar-menu-submenu.el-submenu .el-submenu__title {
    i {
        color: $colorWhite;
    }
}
