//@import "../../../abstracts/abstracts";

$search-list-filters-width: 275px;

.classlist-search-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 $padding-default;

    &[data-has-dashboard="true"] {
        .classlist-search-list-content-container {
            min-height: 961px;
        }
    }

    .document-class-list-filter-geographic {
		border-top: 0;
        padding: 10px;
    
        .document-class-list-filter {
            border: 0 !important;
            margin-bottom: 10px !important;
    
            label {
                margin-bottom: 3px !important;
            }
    
            input,
            select {
                border: 2px solid $modal-border-color !important;
                background: $modal-input-background !important;
            }
        }
    
        .dbqdclfg-error {
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 10px;
        }
    
        .dbqdclfg-button {
            padding: 5px 10px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
        }
    
        .dbqdclfg-footer {
            display: flex;
            justify-content: flex-end;
            gap: 5px;
        }
	}

    .classlist-search-list-content-container {
		display: flex;
        flex-direction: row;
        height: 100%;
        flex: 1;
        padding: 0px;
        margin: 0px;

        #classlist-filters {
            background: $classlist-background;
            padding: 0;
            border-radius: $border-radius-default;
            box-shadow: 0px 3px 5px rgba(0, 24, 62, 0.07);
            width: $search-list-filters-width;
            margin: 0;
            height: 100%;
            flex-shrink: 0;
            overflow-y: auto;
            overflow-x: hidden;

            #document-class-list-filters {
                display: block;
                position: relative;
                background: none;
                border-radius: unset;
                box-shadow: none;
                padding: 0;

                .loading-view {
                    position: absolute;
                    min-height: 120px;
                    width: 100%;
                    height: 100%;
                }

                .document-class-list-filter {
                    margin: 0;
                    border-radius: 0;
                    border: none;
                    border-top: 1px solid $modal-border-color;
                    width: 100%;
                    background: none;
                    padding: 0;
                    box-shadow: none;
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    input {
                        &.form-control {
                            background: $modal-input-background;
			                border: 2px solid $modal-border-color;
                        }
                    }
                    .checkbox {
                        .filter-select-type-image {
                            width: 20px;
                            height: 20px;
                            float: left;
                            margin: 0 6px 0 0;
                        }
                        label {
                            input[type="checkbox"] {
                                display: block;
                                float: left;
                            }
                            .search-property-text {
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .search-property-count {
                                margin-left: 3px;
                                font-size: 11px;
                                color: $modal-input-color; 
                                float: right;
                                white-space: nowrap;
                            }
                        }
                    }
                    .checklist-container {
                        float: left;
                    }
                    &:first-of-type {
                        border-top: 0 !important;
                    }
                    &:hover {
                        background: none;
                    }
                }
            }

            .document-class-list-filter-title {
                display: flex;
                align-items: center;
                border-bottom: 1px solid $modal-border-color !important;
                color: #bfcad2;
                cursor: pointer;
                font-size: $font-size-base;
                line-height: 20px;
                font-weight: 500;
                padding: 10px;
                margin: 0;
                width: 100%;
                &:hover {
                    background: $modal-header-background;
                }
                .dbq-document-class-list-filter-title-text {
                    color: color(text-color-default);
                    width: 100%;
                    height: 20px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                svg {
                    fill: #bfcad2;
                    float: left;
                    width: $svg-icon-size;
                    height: $svg-icon-size;
                    &.dbq-arrow-down {
                        transform: rotate(180deg);
                    }
                    &.dbq-arrow-up {
                        transform: rotate(0deg);
                    }
                }
                .document-class-list-filter-icon {
                    float: right;
                    margin: 2px 0px 0 0;
                }
            }
            .checkbox-container {
                padding: 5px 10px 10px 10px;
            }
            .document-class-list-filter-show-more {
                float: left;
                width: 100%;
                margin: 10px 0 0 0;
                font-weight: 500;
                cursor: pointer;
                color: $color-primary;
                svg {
                    float: left;
                    margin: 0 10px 0 0;
                    width: 20px;
                    height: 20px;
                    fill: $color-primary;
                    &.dbq-arrow-down {
                        transform: rotate(0deg);
                    }
                    &.dbq-arrow-up {
                        transform: rotate(180deg);
                    }

                }
            }
            .document-class-list-filter-show-more-icon {
                margin: 0 6px 0 0;
            }
        }
        #classlist-dbq-tree-grid {
            flex-grow: 1;
            margin-left: $padding-default;
            overflow-y: auto;
            @include scrollbar;

            &.classlist-search-list-full-width {
                margin-left: 0 !important;
            }
        }
        .loading-container {
            float: left;
            width: 100px;
            height: 100px;
            z-index: 999;
            position: relative;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: $classlist-background;
            background: $loader-image;
            background-repeat: no-repeat;
            background-size: 100px 100px;
            span {
                line-height: 300px;
                font-size: $font-size-xxl;
                display: none;
            }
        }
        // #classlist-search-list-table {
        //     float: left;
        //     box-shadow: 0px 3px 5px rgba(0, 24, 62, 0.07);
        //     background: $classlist-background;
        //     height: 100%;
        //     overflow-x: auto;
        //     overflow-y: auto;
        //     margin-left: 10px;
        //     border-radius: $border-radius-default;
        //     width: calc(100% - 285px);
        //     .classlist-toolbar-item.checkbox-inline {
        //         color: #343f54;
        //         background: $classlist-background !important;
        //         border: 2px solid $modal-border-color !important;
        //     }
        //     .ui-igtreegrid-expandcell {
        //         margin: 0;
        //         min-width: 0;
        //     }
        //     &.classlist-search-list-loading {
        //         height: 120px;
        //     }
        //     &.classlist-search-list-full-width {
        //         width: 100%;
        //         margin-left: 0;
        //     }
        // }
        // #classlist-search-bar {
        //     float: left;
        //     margin-left: 275px;
        //     label {
        //         float: left;
        //         margin: 7px 15px 7px 0;
        //     }
        //     .form-group {
        //         float: left;
        //         width: 450px;
        //     }
        // }
        .document-class-list-filter.checkbox-bottom {
            span.dbq-checkbox-label-filters {
                border: 0 !important;
            }
        }
        .document-class-list-filter {
            label.dbq-checkbox {
                border: 0 !important;
                width: 100%;
            }
            label {
                width: auto;
                padding: 0 !important;
                color: color(text-color-default) !important;
                background: 0;
            }
        }
    }

}
.document-class-list-filter {
    .dbq-classlist-search-number {
        padding: 10px;
        margin: 0;
        .col-xs-4 {
            padding: 0;
            margin: 0;
            width: calc(100% / 3);
            text-align: center;
            line-height: 30px;
            font-size: $font-size-base;
            font-weight: 500;
            height: 30px;
        }
    }
}