.dashboarddesigner-layout {
    height: 100%;
    overflow: hidden;
    &>.ant-layout-header {
        background: none;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #CCCCCC;
    }
    &>.ant-layout-content {
        flex: 1;
        .content {
            height: 100%;
            &>.dashboard-content {
                height: calc(~"100% - 20px");
                margin: 10px;
                overflow: hidden;
                &>.content-layout {
                    flex-direction: row;
                    overflow: hidden;
                    height: 100%;
                    &>.viewlayout {
                        padding: 5px;
                        overflow: auto;
                        border: 1px solid #CCCCCC;
                    }
                    .config-sider {
                        border: none;
                        .ant-layout-sider-children {
                            margin: 0 0 0 10px;
                            padding: 5px;
                            overflow: auto;
                            border: 1px solid #CCCCCC;
                            .config-form {
                                .ant-divider {
                                    margin: 10px 0;
                                }
                                .ant-form-item-label {
                                    text-align: left;
                                }
                                .filtercolumns {
                                    &>.ant-collapse {
                                        &>.ant-collapse-item {
                                            &>.ant-collapse-header {
                                                padding: 0 10px 0 40px;
                                                .ant-form-item {
                                                    .ant-form-item-label {
                                                        label {
                                                            cursor: pointer;
                                                        }
                                                    }
                                                }
                                            }
                                            .ant-collapse-content {
                                                .ant-collapse-content-box {
                                                    padding: 0;
                                                    .filtercolumn-empty {
                                                        margin: 5px 5px 0 5px;
                                                        height: 40px;
                                                        line-height: 40px;
                                                        text-align: center;
                                                        font-size: 16px;
                                                        color: red;
                                                        background-color: #d4d7dc;
                                                    }
                                                    .filtercolumn-relation {
                                                        display: flex;
                                                        max-height: 50vh;
                                                        .loading {
                                                            position: absolute;
                                                            z-index: 1;
                                                            right: 20px;
                                                            margin-top: 10px;
                                                        }
                                                        .datasources {
                                                            padding-bottom: 5px;
                                                            flex: 0.4;
                                                            display: flex;
                                                            flex-direction: column;
                                                            overflow: auto;
                                                            border-right: 1px solid #cccccc;
                                                            border-bottom: 1px solid #cccccc;
                                                            .datasource {
                                                                padding-right: 10px;
                                                                margin: 5px 5px 0 5px;
                                                                flex: none;
                                                                display: flex;
                                                                justify-content: space-between;
                                                                .label {
                                                                    overflow: hidden;
                                                                    text-overflow: ellipsis;
                                                                }
                                                                .anticon {
                                                                    margin-top: 3px;
                                                                }
                                                                &[class="ant-btn-primary"] {
                                                                    background-color: #40A9FF;
                                                                }
                                                            }
                                                        }
                                                        .columns {
                                                            padding-bottom: 5px;
                                                            flex: 0.6;
                                                            display: flex;
                                                            flex-direction: column;
                                                            overflow: auto;
                                                            border-bottom: 1px solid #cccccc;
                                                            .column {
                                                                margin: 5px 5px 0 5px;
                                                                padding-right: 10px;
                                                                flex: none;
                                                                display: flex;
                                                                justify-content: space-between;
                                                                .label {
                                                                    text-overflow: ellipsis;
                                                                    overflow: hidden;
                                                                }
                                                                .anticon {
                                                                    margin-top: 3px;
                                                                }
                                                                &[class="ant-btn-primary"] {
                                                                    background-color: #40A9FF;
                                                                }
                                                            }
                                                        }
                                                    }
                                                    .filtercolumn-delete {
                                                        padding: 5px;
                                                        .delbtn {
                                                            width: 100%;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        .ant-collapse-item-disabled {
                                            &>.ant-collapse-header {
                                                cursor: pointer;
                                                color: rgba(0, 0, 0, 0.85);
                                                &>.arrow {
                                                    cursor: pointer;
                                                    color: rgba(0, 0, 0, 0.85);
                                                }
                                            }
                                        }

                                    }
                                    .bottom-btns {
                                        margin-top: 10px;
                                        height: 40px;
                                        .addbtn {
                                            height: 100%;
                                            width: 100%;
                                            border-style: dashed;
                                            border-width: 1px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .ant-layout-header {
                background: none;
                padding: 0 10px;
                height: 40px;
                line-height: 37px;
                border-width: 1px 0;
                border-style: solid;
                border-color: #CCCCCC;
                display: flex;
                justify-content: space-between;
                .filters {
                    display: flex;
                    .filter-tag {
                        max-width: 400px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        border-style: dashed;
                        margin: 8px 2px 0 2px;
                    }
                    .filter-tag-using {
                        border-style: solid;
                        border-color: #1890FF;
                        background-color: #1890ff;
                        color: white;
                    }
                    .filter-tag-add {
                        background-color: white;
                        border-style: solid;
                    }
                }
                .viewtype {
                    .viewtype-icon {
                        font-size: 20px;
                        cursor: pointer;
                        margin-left: 5px;
                        &:hover {
                            color: #1890FF;
                        }
                    }
                }
            }
        }
    }
    .ant-layout-sider {
        background: none;
        border-width: 0 1px 0 1px;
        border-style: solid;
        border-color: #CCCCCC;
        .ant-form-item {
            margin-bottom: 0;
        }
    }
    .ant-tabs {
        .chartconfig {
            .ant-cascader-picker {
                .ant-cascader-picker-label {
                    height: 100%;
                    padding: 0 6px;
                    .cascader-label {
                        margin-left: 6px;
                    }
                    .empty-label {
                        color: #bfbfbf;
                    }
                }
            }
        }
    }
    .ant-tabs-bar {
        margin: 0;
    }
}
  