.dashboards-list-container {
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
	width: 100%;

	// overridding the request integration style to fix the spacing for dashboard list
	.request-entity-container {
		margin: 16px 0 !important;
	}

	.integrations-content {
		max-width: 100% !important;
		width: 100% !important;
	}

	.dashboards-list-view-content {
		width: calc(100% - 30px);
		max-width: 836px;

		.dashboards-list-title-container {
			.title {
				color: var(--l1-foreground);
				font-size: var(--font-size-lg);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 28px; /* 155.556% */
				letter-spacing: -0.09px;
			}

			.subtitle {
				color: var(--l2-foreground);
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}

		.ant-table-row {
			.ant-table-cell {
				padding: 0;
				border: none;
				background: var(--l1-background);
			}

			.dashboard-list-item {
				padding: 12px 16px 16px 16px;
				border: 1px solid var(--l1-border);
				border-top: none;
				background: var(--l2-background);
				cursor: pointer;

				.dashboard-title {
					color: var(--l1-foreground);
				}

				.title-with-action {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 8px;

					min-height: 24px;

					.dashboard-title {
						display: flex;
						align-items: center;
						gap: 6px;
						line-height: 20px;
						width: 60%;

						.dashboard-icon {
							display: inline-block;
							line-height: 20px;
							height: 14px;
							width: 14px;
						}

						.dot {
							min-height: 6px;
							min-width: 6px;
							border-radius: 50%;
						}

						.title-link {
							display: flex;
							align-items: center;
							gap: 8px;
						}

						.title {
							color: var(--l1-foreground);
							font-size: var(--font-size-sm);
							font-style: normal;
							font-weight: var(--font-weight-medium);
							line-height: 20px;
							letter-spacing: -0.07px;

							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.ant-typography {
							color: var(--l1-foreground);
							font-size: var(--font-size-sm);
							font-style: normal;
							font-weight: var(--font-weight-medium);
							line-height: 20px;
							letter-spacing: -0.07px;
						}
					}

					.action-btn {
						display: flex;
						align-items: center;
						gap: 20px;
						cursor: pointer;

						.hidden {
							display: none;
						}
					}

					.tags-with-actions {
						display: flex;
						align-items: center;
						width: 40%;
						justify-content: flex-end;

						.dashboard-tags {
							display: flex;
							flex-wrap: wrap;
							gap: 8px;
							justify-content: flex-end;

							.tag {
								display: flex;
								padding: 4px 8px;
								justify-content: center;
								align-items: center;
								gap: 4px;
								height: 28px;
								border-radius: 20px;
								border: 1px solid
									color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
								background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
								color: var(--bg-sienna-400);
								text-align: center;
								font-family: Inter;
								font-size: 14px;
								font-style: normal;
								font-weight: 400;
								line-height: 20px; /* 142.857% */
								letter-spacing: -0.07px;
								margin-inline-end: 0px !important;
							}
						}
					}
				}

				.dashboard-action-icon {
					margin-left: 16px;
				}

				.dashboard-details {
					margin-top: 12px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 12px 24px;

					.dashboard-tag {
						width: 14px;
						height: 14px;
						border-radius: 50px;
						background: var(--l1-border);
						display: flex;
						justify-content: center;
						align-items: center;

						.tag-text {
							color: var(--l2-foreground);
							leading-trim: both;
							text-edge: cap;
							font-size: 8px;
							font-style: normal;
							font-weight: var(--font-weight-normal);
							line-height: normal;
							letter-spacing: -0.05px;
						}
					}

					.created-by {
						display: flex;
						align-items: center;

						.dashboard-tag {
							width: 14px;
							height: 14px;
							border-radius: 50px;
							background: var(--l1-border);
							display: flex;
							justify-content: center;
							align-items: center;

							.tag-text {
								color: var(--l2-foreground);
								leading-trim: both;
								text-edge: cap;
								font-size: 8px;
								font-style: normal;
								font-weight: var(--font-weight-normal);
								line-height: normal;
								letter-spacing: -0.05px;
							}
						}
						.dashboard-created-by {
							margin-left: 8px;
							color: var(--l2-foreground);
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on,
								'cpsp' on,
								'case' on;
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
						}
					}

					.dashboard-created-at {
						display: flex;
						align-items: center;

						.ant-typography {
							margin-left: 6px;
							color: var(--l2-foreground);
							font-size: var(--font-size-xs);
							font-style: normal;
							font-weight: var(--font-weight-normal);
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
							color: var(--l2-foreground);
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on,
								'cpsp' on,
								'case' on;
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
						}
					}

					.updated-by {
						display: flex;
						align-items: center;

						.text {
							color: var(--l2-foreground);
							font-size: var(--font-size-xs);
							font-style: normal;
							font-weight: var(--font-weight-normal);
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
							color: var(--l2-foreground);
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on,
								'cpsp' on,
								'case' on;
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
						}

						.dashboard-tag {
							width: 14px;
							height: 14px;
							border-radius: 50px;
							background: var(--l1-border);
							display: flex;
							justify-content: center;
							align-items: center;

							.tag-text {
								color: var(--l2-foreground);
								leading-trim: both;
								text-edge: cap;
								font-size: 8px;
								font-style: normal;
								font-weight: var(--font-weight-normal);
								line-height: normal;
								letter-spacing: -0.05px;
							}
						}
						.dashboard-created-by {
							margin-left: 8px;
							color: var(--l2-foreground);
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on,
								'cpsp' on,
								'case' on;
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 128.571% */
							letter-spacing: -0.07px;
						}
					}
				}
			}
		}

		.ant-pagination-item {
			display: flex;
			justify-content: center;
			align-items: center;

			> a {
				color: var(--l2-foreground);
				font-variant-numeric: lining-nums tabular-nums slashed-zero;
				font-feature-settings:
					'dlig' on,
					'salt' on,
					'case' on,
					'cpsp' on;
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 20px; /* 142.857% */
			}
		}

		.ant-pagination-item-active {
			background-color: var(--primary-background);
			> a {
				color: var(--foreground) !important;
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-medium);
				line-height: 20px;
			}
		}

		.ant-table-tbody {
			.ant-table-row:last-child {
				.dashboard-list-item {
					border-radius: 0px 0px 6px 6px;
				}
			}
		}
	}

	.dashboards-list-header-container {
		display: flex;
		align-items: center;
		gap: 8px;

		margin: 16px 0;

		.btn {
			padding: 5.937px 11.875px;
		}
	}

	.ant-pagination-total-text {
		display: flex;
		gap: 4px;
		align-items: center;

		.numbers {
			font-family: 'Space Mono';
		}

		.total {
			font-family: 'Space Mono';
			color: var(--l2-foreground);
		}
	}

	.dashboard-error-state {
		display: flex;
		flex-direction: column;
		height: 320px;
		padding: 105px 141px;
		margin-top: 16px;
		justify-content: center;
		align-items: flex-start;
		border-radius: 6px;
		border: 1px dashed var(--l1-border);
		gap: 4px;

		.error-text {
			color: var(--l1-foreground);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 18px; /* 128.571% */
			letter-spacing: -0.07px;
		}

		.action-btns {
			display: flex;
			gap: 24px;
			align-items: center;
			margin-top: 20px;

			.retry-btn {
				display: flex;
				align-items: center;
				height: 32px;
				padding: 5.937px 11.875px;
				justify-content: center;
				gap: 5.937px;
				border-radius: 1.484px;
				background: var(--l1-border);
				color: var(--l1-foreground);

				.ant-btn-icon {
					margin-inline-end: 0px;
				}
			}

			.learn-more {
				color: var(--bg-robin-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 18px; /* 128.571% */
				letter-spacing: -0.07px;
				padding: 0px;
			}

			.learn-more:hover {
				&.ant-btn-text {
					background-color: unset;
				}
			}
			.learn-more-arrow {
				margin-left: -20px;
				color: var(--bg-robin-400);
				cursor: pointer;
			}
		}
	}

	.dashboard-empty-state {
		display: flex;
		flex-direction: column;
		height: 320px;
		padding: 105px 141px;
		margin-top: 16px;
		justify-content: center;
		align-items: flex-start;
		border-radius: 6px;
		border: 1px dashed var(--l1-border);

		.dashboard-img {
			width: 32px;
			height: 32px;
		}

		.text {
			margin-top: 4px;
			.no-dashboard {
				color: var(--l1-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 18px; /* 128.571% */
				letter-spacing: -0.07px;
			}
			.info {
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px; /* 128.571% */
				letter-spacing: -0.07px;
			}
		}

		.actions {
			display: flex;
			gap: 24px;
			align-items: center;
			margin-top: 24px;

			.new-dashboard {
				display: flex;
				width: 153px;
				align-items: center;
				height: 32px;
				padding: 5.937px 11.875px;
				justify-content: center;
				gap: 5.937px;
				border-radius: 1.484px;
				background: var(--primary-background);
				color: var(--l1-foreground);

				.ant-btn-icon {
					margin-inline-end: 0px;
				}
			}
			.learn-more {
				color: var(--bg-robin-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 18px; /* 128.571% */
				letter-spacing: -0.07px;
				padding: 0px;
			}

			.learn-more:hover {
				&.ant-btn-text {
					background-color: unset;
				}
			}
			.learn-more-arrow {
				margin-left: -20px;
				color: var(--bg-robin-400);
				cursor: pointer;
			}
		}
	}

	.loading-dashboard-details {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 16px;

		.skeleton-1 {
			height: 125px;
			width: 100%;
		}
	}

	.no-search {
		display: flex;
		flex-direction: column;
		height: 320px;
		gap: 8px;
		padding: 105px 190px;
		margin-top: 16px;
		justify-content: center;
		align-items: flex-start;
		border-radius: 6px;
		border: 1px dashed var(--l1-border);

		.img {
			width: 32px;
			height: 32px;
		}

		.text {
			color: var(--l1-foreground);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 18px; /* 128.571% */
			letter-spacing: -0.07px;
		}
	}

	.all-dashboards-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		height: 44px;
		flex-shrink: 0;
		border-radius: 6px 6px 0px 0px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

		.typography {
			color: var(--l2-foreground);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px; /* 142.857% */
			letter-spacing: -0.07px;
		}

		.right-actions {
			display: flex;
			gap: 12px;
			color: white;
			cursor: pointer;
		}
	}
}

.new-dashboard-menu {
	width: 200px;

	.create-dashboard-menu-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

.delete-view-modal {
	width: calc(100% - 30px) !important; /* Adjust the 20px as needed */
	max-width: 384px;
	.ant-modal-content {
		padding: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);

		.ant-modal-header {
			padding: 16px;
			background: var(--l2-background);
		}

		.ant-modal-body {
			padding: 0px 16px 28px 16px;

			.ant-typography {
				color: var(--l2-foreground);
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 20px;
				letter-spacing: -0.07px;
			}

			.save-view-input {
				margin-top: 8px;
				display: flex;
				gap: 8px;
			}

			.ant-color-picker-trigger {
				padding: 6px;
				border-radius: 2px;
				border: 1px solid var(--l1-border);
				background: var(--l3-background);
				width: 32px;
				height: 32px;

				.ant-color-picker-color-block {
					border-radius: 50px;
					width: 16px;
					height: 16px;
					flex-shrink: 0;

					.ant-color-picker-color-block-inner {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.ant-modal-footer {
			display: flex;
			justify-content: flex-end;
			padding: 16px 16px;
			margin: 0;

			.cancel-btn {
				display: flex;
				align-items: center;
				border: none;
				border-radius: 2px;
				background: var(--l1-border);
			}

			.delete-btn {
				display: flex;
				align-items: center;
				border: none;
				border-radius: 2px;
				background: var(--danger-background);
				margin-left: 12px;
			}

			.delete-btn:hover {
				color: var(--l1-foreground);
				background: var(--bg-cherry-600);
			}
		}
	}
	.title {
		color: var(--l1-foreground);
		font-size: var(--font-size-sm);
		font-style: normal;
		font-weight: var(--font-weight-medium);
		line-height: 20px; /* 142.857% */
	}
}

.dashboard-actions {
	.ant-popover-inner {
		width: 187px;
		height: auto;
		flex-shrink: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: linear-gradient(
			139deg,
			color-mix(in srgb, var(--card) 80%, transparent) 0%,
			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		padding: 0px;

		.dashboard-action-content {
			.section-1 {
				display: flex;
				flex-direction: column;

				.action-btn {
					display: flex;
					padding: 8px;
					height: unset;
					align-items: center;
					gap: 6px;
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.14px;

					.ant-icon-btn {
						margin-inline-end: 0px;
					}
				}
			}

			.section-2 {
				display: flex;
				flex-direction: column;
				border-top: 1px solid var(--l1-border);

				.ant-typography {
					display: flex;
					padding: 12px 8px;
					align-items: center;
					gap: 6px;
					color: var(--bg-cherry-400) !important;
					font-family: Inter;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.14px;
				}
			}
		}
	}
}

.sort-dashboards {
	.ant-popover-inner {
		display: flex;
		padding: 0px;
		align-items: center;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: linear-gradient(
			139deg,
			color-mix(in srgb, var(--card) 80%, transparent) 0%,
			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		gap: 16px;

		.sort-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 140px;

			.sort-heading {
				color: var(--l3-foreground);
				font-family: Inter;
				font-size: 11px;
				font-style: normal;
				font-weight: 600;
				line-height: 18px; /* 163.636% */
				letter-spacing: 0.88px;
				text-transform: uppercase;
				padding: 12px 18px 6px 14px;
			}

			.sort-btns {
				text-align: start;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				letter-spacing: 0.14px;
				padding: 12px 18px 12px 14px;
				height: auto;
			}
		}
	}
}

.configure-group {
	.ant-popover-inner {
		display: flex;
		align-items: center;
		border-radius: 4px;
		padding: 0px;
		border: 1px solid var(--l1-border);
		background: linear-gradient(
			139deg,
			color-mix(in srgb, var(--card) 80%, transparent) 0%,
			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		gap: 16px;
		.configure-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			.configure-btn {
				display: flex;
				text-align: start;
				align-items: center;
				width: 100%;
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				letter-spacing: 0.14px;
				padding: 12px;
			}
		}
	}
}

.configure-metadata-root {
	.ant-modal-content {
		width: 500px;
		flex-shrink: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--card);
		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
		padding: 0px;

		.ant-modal-header {
			background: var(--card);
			padding: 16px;
			border-bottom: 1px solid var(--l1-border);
			margin-bottom: 0px;
		}

		.ant-modal-body {
			padding: 14px 16px;

			.configure-content {
				display: flex;
				flex-direction: column;
				gap: 14px;

				.configure-preview {
					display: flex;
					padding: 12px 14.634px;
					flex-direction: column;
					align-items: flex-start;
					gap: 7.317px;
					border-radius: 4px;
					border: 0.915px solid var(--l1-border);
					background: var(--l2-background);

					.header {
						display: flex;
						gap: 4px;

						.title {
							color: var(--l1-foreground);
							font-family: Inter;
							font-size: 12.805px;
							font-style: normal;
							font-weight: 500;
							line-height: 18.293px; /* 142.857% */
							letter-spacing: -0.064px;
						}
					}

					.details {
						display: flex;
						flex-direction: column;
						gap: 8px;
						width: 100%;

						.createdAt {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.formatted-time {
								display: flex;
								gap: 4px;
								color: var(--l2-foreground);
								font-variant-numeric: lining-nums tabular-nums stacked-fractions
									slashed-zero;
								font-feature-settings:
									'dlig' on,
									'salt' on,
									'cpsp' on,
									'case' on;
								font-family: Inter;
								font-size: 12.805px;
								font-style: normal;
								font-weight: 400;
								line-height: 16.463px; /* 128.571% */
								letter-spacing: -0.064px;
							}

							.user {
								display: flex;
								align-items: center;
								gap: 4px;

								.user-tag {
									width: 12px;
									height: 12px;
									display: flex;
									justify-content: center;
									align-items: center;
									color: var(--l2-foreground);
									font-size: 8px;
									font-style: normal;
									font-weight: var(--font-weight-normal);
									line-height: normal;
									letter-spacing: -0.05px;
									border-radius: 12.805px;
									background-color: var(--l1-background);
								}

								.dashboard-created-by {
									color: var(--l2-foreground);
									font-variant-numeric: lining-nums tabular-nums stacked-fractions
										slashed-zero;
									font-feature-settings:
										'dlig' on,
										'salt' on,
										'cpsp' on,
										'case' on;
									font-family: Inter;
									font-size: 12.805px;
									font-style: normal;
									font-weight: 400;
									line-height: 16.463px; /* 128.571% */
									letter-spacing: -0.064px;
								}
							}
						}

						.updatedAt {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.formatted-time {
								display: flex;
								gap: 4px;
								color: var(--l2-foreground);
								font-variant-numeric: lining-nums tabular-nums stacked-fractions
									slashed-zero;
								font-feature-settings:
									'dlig' on,
									'salt' on,
									'cpsp' on,
									'case' on;
								font-family: Inter;
								font-size: 12.805px;
								font-style: normal;
								font-weight: 400;
								line-height: 16.463px; /* 128.571% */
								letter-spacing: -0.064px;
							}

							.user {
								display: flex;
								align-items: center;
								gap: 4px;

								.user-tag {
									width: 12px;
									height: 12px;
									display: flex;
									justify-content: center;
									align-items: center;
									color: var(--l2-foreground);
									font-size: 8px;
									font-style: normal;
									font-weight: var(--font-weight-normal);
									line-height: normal;
									letter-spacing: -0.05px;
									border-radius: 12.805px;
									background-color: var(--l1-background);
								}

								.dashboard-created-by {
									color: var(--l2-foreground);
									font-variant-numeric: lining-nums tabular-nums stacked-fractions
										slashed-zero;
									font-feature-settings:
										'dlig' on,
										'salt' on,
										'cpsp' on,
										'case' on;
									font-family: Inter;
									font-size: 12.805px;
									font-style: normal;
									font-weight: 400;
									line-height: 16.463px; /* 128.571% */
									letter-spacing: -0.064px;
								}
							}
						}
					}
				}

				.metadata-action {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0px 0px 0px 14.634px;

					.left {
						display: flex;
						gap: 6px;
						align-items: center;
					}

					.connection-line {
						border: 1px dashed var(--l1-border);
						min-width: 20px;
						height: 0px;
						flex-grow: 1;
						margin: 0px 8px;
					}
				}
			}
		}

		.ant-modal-footer {
			margin-top: 0px;
			padding: 4px 16px 16px 16px;

			.save-changes {
				display: flex;
				width: 100%;
				height: 32px;
				padding: 8px 16px;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				border-radius: 2px;
				border: 1px solid var(--l1-border);
				background: var(--l1-border);
			}
		}
	}
}

.title-toolip {
	.ant-tooltip-content {
		.ant-tooltip-inner {
			height: 400px;
			overflow: auto;
		}
	}
}
