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

#classlist-tiled-list {
	float: left;
	padding: ($classlists-folders-padding / 2) $classlists-folders-padding;
	width: 100%;
	background: none;
    .document-class-list-tiles-container {
        border-radius: $border-radius-default;
        background: $classlists-folders-background;
		width: 100%;
        .bootstrap-column {
            display: inline-block;
        }
	}
	.document-class-list-tile-template-container {
		display: none;
	}
	.document-class-list-tile-count-container {
		font-weight: 500;
		color: color(text-color-default);
		position: relative;
		right: 0;
		float: right;
		margin-right: 5px;
		margin-bottom: 30px;
		width: 100%;
		text-align: center;
	}
	.document-class-list-tiles-load-more-button {
		text-align: center;
		width: 100%;
		.document-class-list-tiles-load-button {
			display: inline-block;
			-webkit-font-smoothing: antialiased;
			cursor: pointer;
			color: color(text-color-default);
			font-size: 14px;
			line-height: 20px;
			font-weight: 500;
			text-decoration: none;
			padding: 0;
			&:hover {
				>span {
					&:first-child {
						text-decoration: none;
					}
				}
			}
			span {
				text-decoration: underline;
			}
			i {
				display: block;
			}
		}
	}
	.document-class-list-tiles-loading-indicator {
		text-align: center;
		width: 100%;
		a {
			display: inline-block;
			padding: 10px 30px;
			-webkit-font-smoothing: antialiased;
			cursor: pointer;
			color: color(text-color-default);
			font-size: 14px;
			line-height: 20px;
			font-weight: 500;
			text-decoration: none;
			svg {
				margin-right: 5px;
				-animation: glyphicon-refresh-animate1 0.7s infinite linear;
				-webkit-animation: glyphicon-refresh-animate2 0.7s infinite linear;
				fill: $color-primary;
			}
		}
	}
	.document-class-list-tiles-load-button[data-type="1"] {
		font-size: 14px;
		cursor: pointer;
		color: $color-primary;
		&:hover {
			text-decoration: none;
		}
	}
	.document-class-list-tile {
		margin-top: 80px;
		margin-bottom: 15px;
		padding: 0 30px;
		border-radius: $border-radius-default;
        border: 3px solid $modal-border-color;
        box-shadow: $sidebar-tile-drop-shadow;
        background-color: color(default-background);
        box-shadow: $dbqdcltl-folder-tile-drop-shadow;

        .tile-image-container {
            border: 5px solid $modal-border-color !important;
            background: $modal-border-color !important
        }
		.flex-container {
			clear: both;
            .flex-item-1,
            .flex-item-2,
            .flex-item-3,
            .flex-item-4,
            .flex-item-5,
            .flex-item-6,
            .flex-item-7,
            .flex-item-8,
            .flex-item-9,
            .flex-item-10,
            .flex-item-11,
            .flex-item-12 {
				overflow: hidden;
			}
		}
		img.project-building-image {
            display: flex;
			border: 5px solid #ffffff;
		}
	}
	.flex-container {
		span.ellipsis {
			margin-bottom: 0px !important;
			margin-top: 0 !important;
		}
		p.ellipsis {
			margin-bottom: 0px !important;
			margin-top: 0 !important;
		}
	}
	.document-class-list-tiles-load-button {
		padding: 0;
		margin: 0 5px;
		border: 2px solid $modal-border-color;
		border-radius: 3px;
		svg {
			width: 30px;
			height: 30px;
			fill: $modal-input-color;
			&:hover {
				fill: $color-primary;
			}
		}
	}
}

.dbq-application-rumm {
	#classlist-tiled-list {
		.document-class-list-tile {
			img.project-building-image {
				margin-bottom: 30px;
			}
		}
		.document-class-list-tiles-load-more-button,
        .document-class-list-tiles-loading-indicator  {
			width: 100%;
			float: left;
		}
	}
}

.dbqdcltl-container {
    background: none !important;
    border: none;
    box-shadow: none;

    .dbqdcltl-toolbar {
        background: unset;
        background-color: color(default-background) !important;

        .form-inline {
            background: $modal-input-background;
            border-color: $modal-border-color;
            color: color(text-color-default) !important;
            font-size: $font-size-base;
            line-height: 14px;
            padding: 0;
            &::-webkit-input-placeholder {
                color: $color-primary !important;
            }
            &::-moz-placeholder {
                color: $color-primary !important;
            }
            &:-ms-input-placeholder {
                color: $color-primary !important;
            }
            &:-moz-placeholder {
                color: $color-primary !important;
            }
        }
        .dbqdcltl-search {
            @include search-field;
        }
    }

    .dbqdcltl-tile-container {
        padding: ($padding-default / 2);
        .dbqdcltl-tile {
            @include border-radius;
            margin: 0;
            z-index: 1;
            flex: 1;
            padding: 15px;
            display: flex;
            //align-items: stretch;
            align-items: center;
            height: 100%;
            position: relative;
            background-color: color(default-background);
            box-shadow: $dbqdcltl-folder-tile-drop-shadow;
        
            &:hover {
                z-index: 2;
            }

            .dbqdcltl-tile-content-container {
                text-overflow: ellipsis;
                overflow: hidden;
                .dbqdcltl-tile-title {
                    white-space: nowrap;
                    color: $dbqdcltl-folder-tile-header-color;
                    font-size: $dbqdcltl-folder-tile-header-font-size;
                    font-weight: $dbqdcltl-folder-tile-header-font-weight;
                    width: 100%;
                    line-height: 20px;
                    margin: 0 0 5px 0;
                    padding: 0;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .dbqdcltl-tile-description {
                    color: $dbqdcltl-folder-tile-text-color;
                    text-shadow: $dbqdcltl-folder-tile-text-shadow;
                    line-height: $dbqdcltl-folder-tile-text-line-height;
                    font-size: 12px;
                    font-weight: 400;
                    margin: 0 0 5px 0;
                    padding: 0;
                    width: 100%;

                    > a {
                        color: $color-primary;
                        text-decoration: underline;
                        font-size: 10px;
                        font-weight: 500;
                        width: 100px;
                    }
                    > p {
                        margin-bottom: 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        svg {
                            fill: $text-color-default;
                        }
                    } 
                }
            }

            .dbqdcltl-tile-image-container {
                float: left;
                height: $dbqdcltl-folder-tile-icon-size;
                width: $dbqdcltl-folder-tile-icon-size;
                display: flex;
                flex-shrink: 0;
                align-items: stretch;
                position: relative;
                background: 0;
                border-radius: 50%;
                padding: $dbqdcltl-folder-tile-icon-padding;
                margin: 0;
                background: $dbqdcltl-folder-tile-icon-background;

                svg {
                    width: $dbqdcltl-folder-tile-icon-size !important;
                    height: $dbqdcltl-folder-tile-icon-size !important;
                    fill: $dbqdcltl-folder-tile-icon-color;
                    padding: ($dbqdcltl-folder-tile-icon-size - 30px) / 2;

                    .dbq-icon-color-1 {
                        fill: transparent;
                    }

                    .dbq-icon-color-2 {
                        fill: $dbqdcltl-folder-tile-icon-color;
                    }
                }
                .dbqdcltl-tile-image,
                .dbqdcltl-tile-icon {
                    width: 100%;
                    height: 100%;
                }
                .dbqdcltl-tile-image {
                    padding: 0;
                    border-radius: 50%;
                }
            }

            .dbqdcltl-tile-dropdown {
                width: 40px;
                height: 40px;
                .dropdown-toggle {
                    width: 40px;
                    height: 40px;
                    padding: 0;
                    border: 0;
                    margin: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-radius: $border-radius-button-default;

                    svg {
                        width: 40px;
                        height: 40px;
                        padding: 12px;
                        border: 0;
                        border-radius: $border-radius-button-default;
                        fill: color(text-color-default);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                    }
                    &:hover {
                        background: none;
                        svg {
                            fill: $color-primary;
                        }
                    }
                }

                .dbqdcltl-dropdown-menu {
                    @include popup-menu;
                    color: $navbar-dropdown-menu-text-color;
                    padding: 6px !important;
                    width: fit-content;
                    li {
                        white-space: nowrap;
                        float: left;
                        padding: 5px 7px;
                        margin: 0 0 3px 0;
                        line-height: 20px;
                        font-size: 12px;
                        font-weight: 500;
                        border-radius: 7px;
                        a {
                            color: $navbar-dropdown-menu-text-color-a;
                            font-size: $font-size-small;
                            padding: 0 !important;
                            display: flex;
                            font-weight: 500;
                            line-height: 20px;
                            svg {
                                fill: $navbar-dropdown-menu-text-color-a; //!important;
                                width: $svg-icon-size;//20px;
                                height: $svg-icon-size;//20px;
                            }
                            &:hover {
                                color: $color-primary; //!important;
                                svg {
                                    fill: $color-primary; //!important;
                                }
                            }
                        }
                    }
                    &.dropdown-menu {
                        background: $modal-input-background;
                        border: 0;
                        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                        padding: 10px;
                        border-radius: $border-radius-default;
                        li {
                            white-space: nowrap;
                            padding: 5px 7px;
                            margin: 0 0 3px 0;
                            line-height: 20px;
                            font-size: $font-size-small;
                            font-weight: 500;
                            border-radius: 7px;
                            a {
                                color: color(text-color-default);
                                line-height: 20px;
                                padding: 5px 10px;
                            }
                            svg {
                                fill: #43464c;
                                float: left;
                                display: inline-block;
                                margin: 0;
                                padding: 2px;
                            }
                        }
                    }
                    
                }
            }

            .dbqdcltl-tile-elevated-function {
                position: absolute;
                top: 0;
                right: 40px;
                background: 0 none;
                outline: 0 none;
                width: 40px;
                height: 40px;
                padding: 0;
                border: 0;
                margin: 0;
                border-radius: $border-radius-button-default;
                svg {
                    width: 40px;
                    height: 40px;
                    padding: 12px;
                    fill: $navbar-dropdown-menu-text-color-a !important;
                    border: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                &:hover {
                    svg {
                        fill: $color-primary !important;
                    }
                }
            }

            .dbqdcltl-tile-arrow {
                position: absolute;
                bottom: 0;
                right: 0;
                background: 0 none;
                outline: 0 none;
                display: none; 
                width: 40px;
                height: 40px;
                padding: 0;
                border: 0;
                margin: 0;
                border-radius: $border-radius-button-default;
                svg {
                    width: 40px;
                    height: 40px;
                    padding: 12px;
                    fill: $navbar-dropdown-menu-text-color-a !important;
                    border: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                &:hover {
                    svg {
                        fill: $color-primary !important;
                    }
                }
            }

            &.has-child {
                .dbqdcltl-tile-arrow {
                    display: block;
                }
            }
        }
    }

    .dbqdcltl-tile-count-container {
        color: color(text-color-default) !important;
    }
}

#classlist-tiled-standard-list {
	.dbqdcltl-container {
		float: left;
		width: 100%;
	}
	.dbqdcltl-tile-count-container {
		float: left;
		width: 100%;
		color: #001323;
		font-weight: 500;
		text-align: center;
		margin: 15px 0 30px 0;
	}
	.dbqdcltl-tiles-load-more-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
		width: 100%;
        gap: 15px;
        
		.document-class-list-tiles-load-button {
			display: inline-block;
			-webkit-font-smoothing: antialiased;
			cursor: pointer;
		}
	}
	.dbqdcltl-tiles-loading-indicator {
        display: flex;
        width: 100%;
        justify-content: center;
	}
	.dbqdcltl-tiles-load-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: $color-primary;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;

        svg {
            width: 24px;
            height: 24px;
            fill: $color-white;   
        }
	}
	.dbqdcltl-toolbar {
		float: left;
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
		.dbqdcltl-search {
			border-radius: $border-radius-default !important;
		}
	}
	.dbqdcltl-tile-container {
		clear: both;
		.bootstrap-column {
			display: inline-block;
			margin-bottom: 15px;
			padding-left: 7.5px;
			padding-right: 7.5px;
		}
		.dbqdcltl-tile.dbqdcltl-selected {
			border: 2px solid $color-primary;
		}
		.dbqdcltl-tile {
			.dbqdcltl-tile-image-container {
				.dbqdcltl-tile-icon {
					width: 100%;
					height: 100%;
				}
			}
			.dbqdcltl-tile-content-container {
                color: color(text-color-default);
				float: left;
				width: calc(100% - 80px);
				padding-left: 15px;
			}
			.dbqdcltl-tile-essential-function-container {
				float: left;
				clear: both;
				margin: 15px 0;
				width: 100%;
				display: flex;
				.dbqdcltl-tile-essential-function-button {
					width: calc(100% - 40px);
				}
			}
			.dbqdcltl-tile-dropdown {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 39px;
			}

            &.dbqdcltl-single-function {
                cursor: pointer;

                &:hover {
                    filter: brightness(1.05);
                    outline: 2px solid $color-primary;
                }
            }
		}
		.dbqdcltl-tile.has-child {
			.dbqdcltl-tile-content-container {
				width: calc(100% - 110px);
			}
		}
		.dbqdcltl-tile.has-elevated-function {
			.dbqdcltl-tile-content-container {
				width: calc(100% - 130px);
				.dbqdcltl-tile-title {
					width: calc(100% - 30px);
				}
			}
		}
	}
}