.visualizer-settings {
    background-color: #f8f9f9;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: 13px;
	position: relative;

	.visualizer-settings__title {
		margin: 0;
		padding: 1.5rem 0;
		text-align: center;
		border-bottom: 1px solid #e6eaee;

		.dashicon {
			vertical-align: top;
			margin-right: .25em;
		}
	}

	.visualizer-settings__content {
		padding: 2.5em 0;

		.visualizer-settings__content-description {
			margin: 0 0 1.5em 0;
			font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
			font-size: 18px;
			text-align: center;
		}

		.visualizer-settings__content-option {
			display: -webkit-box;
			display: flex;
			-webkit-box-align: start;
			align-items: flex-start;
			flex-wrap: wrap;
			margin: 0 auto;
			padding: 1.25em 1.5em;
			max-width: 80%;
			background: #fff;
			border-width: 1px 1px 0;
			border-style: solid;
			border-color: #e6eaee;
			cursor: pointer;

			&.locked {
				cursor: default;

				&:hover {
					background: #ffffff;
				}
			}

			&:hover {
				background: #f5f5f5;
			}

			&:last-of-type {
				border-bottom-width: 1px;
			}

			.visualizer-settings__content-option-title {
				max-width: 80%;
				display: block;
				font-size: 1.25em;
			}

			.visualizer-settings__content-option-icon {
				align-self: center;
				margin-left: auto;
				color: #b9bcc2;

				.dashicon {
					height: 25px;
					width: 25px;
				}
			}
		}
	}

	.visualizer-settings__charts {
		text-align: center;
		padding-bottom: 25px;

		.visualizer-settings__charts-grid {
			display: grid;
			grid-template-columns: 50% 50%;

			.visualizer-settings__charts-single {
				margin: 25px;
				padding-bottom: 50px;
				background-color: #efefef;
				position: relative;

				.visualizer-settings__charts-title  {
					padding: 10px;
					font-weight: bold;
					text-align: center;
				}

    .visualizer-settings__charts-footer {
        font-size: small;
    }

				.visualizer-settings__charts-controls {
					width: 100%;
					position: absolute;
					bottom: 0;
					padding: 10px;
					font-weight: bold;
					text-align: center;
					cursor: pointer;
				}
			}
		}

		.dataTables_wrapper {
			background: #fff;
			padding: 10px;
		}

		.visualizer-no-charts {
			padding-top: 25px;
		}
	}

	.visualizer-settings__chart {
		text-align: center;

		.dataTables_wrapper {
			background: #fff;
			padding: 10px;
		}
	}

	.visualizer-settings__controls {
		margin: 0;
		padding: 1.5rem 0;
		text-align: center;
		border-top: 1px solid #e6eaee;
	}
}

.visualizer-advanced-panel {
	&.components-panel__body.is-opened {
		> .components-panel__body-title {
			margin-bottom: 0;
		}
	}
}

.visualizer-inner-sections {
	background: #f8f9f9;

	.components-panel__body-toggle {
		&:hover {
			background: #EEEEEE;
		}
	}

	ul {
		&.visualizer-list {
			list-style: disc;
			margin-left: 15px;
		}
	}
}

.components-panel__body-button {
	.components-panel__body-toggle {
		&.components-button {
			.dashicons-admin-tools {
				margin: -2px 6px -2px 0;
			}

			.dashicons-admin-users {
				margin: -2px 6px -2px 0;
			}

			.components-panel__arrow {
				width: 48px;
				height: 48px;
				right: 0;
				border-top: 1px solid #ddd;
				transform: translateY(-50%) rotate(270deg);
			}
		}
	}

	&.visualizer-panel-back {
		.components-panel__body-title {
			background: #f3f3f3;

			&:hover {
				background: #f3f3f3;
			}

			.components-panel__body-toggle {
				margin: 10px 0;
				background: #fff;

				&.components-button {
					padding-left: 60px;

					&:hover {
						.components-panel__arrow {
							background: #f3f3f3;
							border-width: 1px 1px 0 1px;
							border-color: #ddd;
							border-style: solid;
						}
					}

					.components-panel__arrow {
						left: 0;
						transform: translateY(-50%) rotate(90deg);
					}
				}
			}
		}
	}
}

.visualizer-chart-editor {
	max-width: 100%;
	margin: 25px 25px 0;

	.htEditor {
		margin-bottom: 20px;

		.htRowHeaders {
			height: auto !important;
			width: auto !important;
		}

		.ht_master {
			.wtHolder {
				height: auto !important;
				width: auto !important;
			}
		}
	}
}

.visualizer-json-query-modal {
	.components-modal__content {
		padding-left: 0;
		padding-right: 0;

		.components-modal__header {
			margin: 0;
		}
	}

	.components-icon-button {
		margin: 10px 0;
	}

	.visualizer-json-query-modal-headers-panel {
		padding: 0 0 1em 2.2em;

		.components-base-control {
			display: inline-block;
		}

		.visualizer-json-query-modal-field-separator {
			padding: 0 10px;
		}
	}

	.viz-editor-table {
		tbody {
			tr {
				&:first-child {
					background-color: #ececec !important;
				}
			}
		}

		tr {
			th {
				background-color: #cccccc;
			}
		}

		thead {
			tr {
				th {
					&:nth-child(n+1) {
						cursor: move !important;
					}
				}
			}
		}
	}

	#visualizer-json-query-table {
		margin-bottom: 10px;
	}

	ul {
		list-style: disc;
		margin-left: 10px;
	}
}

.visualizer-db-query-modal {
	.CodeMirror-scroll {
		overflow: hidden !important;
		height: 50%;
		margin: 0;
		padding: 0;
	}

	.CodeMirror-wrap {
		height: 200px;
		padding: 15px;
		color: #fff;
		background: #282923;
		font-size: 15px;
		margin-bottom: 20px;

		.CodeMirror-cursor {
			border-left: 1px solid #fff !important;
		}

		.CodeMirror-placeholder {
			color: #fff;
		}

		pre {
			color: #fff !important;
		}

		.cm-keyword {
			color: #f92472 !important;
		}

		.cm-comment {
			color: #74705d !important;
		}

		.cm-number {
			color: #fff !important;
		}

		.cm-string {
			color: #fff !important;
		}
	}

	ul {
		list-style: disc;
		margin-left: 10px;
	}

	.db-wizard-error {
		color: #f00;
	}

	.visualizer-db-query-actions {
		.components-button {
			&:first-child {
				margin-right: 10px;
			}
		}
	}
}

.htContextMenu {
	&:not( .htGhostTable ) {
		z-index: 999999;
	}
}

.htDatepickerHolder,
.CodeMirror-hints,
.DTCR_clonedTable,
.DTCR_pointer {
	z-index: 999999 !important;
}
.vz-permission-tab {
	select.components-select-control__input {
		overflow:auto !important;
	}
}
.components-panel {
	.components-select-control {
		height:auto !important;
	}
}
@media ( min-width: 768px ) {
	.visualizer-json-query-modal {
		width: 668px;
	}

	.visualizer-db-query-modal .CodeMirror-wrap {
		min-width: 550px;
	}
}

@media ( max-width: 768px ) {
	.visualizer-settings {

		.visualizer-settings__charts {

			.visualizer-settings__charts-grid {
				display: grid;
				grid-template-columns: 100%;
			}
		}
	}
}

.viz-edit-chart-new {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;

	p {
		padding: 12px;
		padding-left: 24px;
		color: #ff9901;

		a:hover {
			pointer: cursor;
		}
	}
}