.fl-row-overlay {
	.fl-builder-has-submenu {
		&.fl-builder-submenu-open > ul.fl-builder-submenu {
			width: 200px;
		}
	}
}

.tpc-template-cloud-export-modal {
	display: flex;
	flex-direction: column;

	h1 {
		font-size: 16px;
	}

	label {
		margin-bottom: 10px;
	}
}

.tpc-template-cloud-modal {
	z-index: 999999;
	.components-modal__frame {
		width: 100%;

		.components-modal__content {
			padding: 0;
			background-color: #ffffff;

			.components-modal__header {
				display: none;
			}

			.components-placeholder {
				box-shadow: none;
			}

			.modal-header {
				display: flex;
				border-bottom: 1px solid #e0e0e0;

				.left {
					display: flex;
					flex-basis: 20%;
					justify-content: flex-start;

					.tpc-template-cloud-icon {
						width: 60px;
						height: 60px;
						padding: 10px;
					}
				}

				.center {
					display: flex;
					flex-basis: 60%;
					justify-content: center;

					.tabs {
						height: 60px;
						font-size: 14px;
						color: #616161;
						font-weight: 500;
						border-radius: 0;
						padding-left: 25px;
						padding-right: 25px;

						&.is-active {
							box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 #0073aa;
						}

						&:hover {
							background: transparent;
						}
					}
				}

				.right {
					display: flex;
					flex-basis: 20%;
					justify-content: flex-end;

					.components-button {
						width: 60px;
						height: 60px;
						border-left: 1px solid #e6e9ec;

						&:hover {
							background: #f1f1f1;
						}

						svg {
							width: 32px;
							height: 32px;
							fill: #616161;
						}
					}

					.components-button-group {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 60px;

						.components-button {
							border-left: 0;
							box-shadow: none;
							width: 38px;
							height: 38px;
							margin: 5px 10px;
							padding: 5px;
							border-radius: 6px;

							&.is-sync {
								background: #f1f1f1;
								border: 1px solid #d9d9d9;

								&:hover {
									color: #f1f1f1;
									background: #0073aa;
									width: auto;
									border: 1px solid #0073aa;
	
									&:before {
										content: 'Sync';
										padding: 0 10px;
										font-weight: 500;
									}
	
									svg {
										fill: #f1f1f1;
									}
								}

								svg {
									fill: #0073aa;
								}
							}

							svg {
								width: 26px;
								height: 26px;
								padding: 0;
							}
						}
					}
				}
			}

			.tpc-modal-content {
				background: #f1f1f1;
				padding: 20px 40px;

				.notices {
					.components-notice {
						margin: 0 0 20px 0;
						padding: 10px;
					}
				}

				.filters {
					display: flex;
					justify-content: space-between;
					padding-bottom: 20px;

					.display-sorting {
						display: flex;
						align-items: center;
						font-size: 11px;
				
						.sorting-label {
							flex-grow: 1;
							text-align: left;
							padding-right: 20px;
							border-right: 1px solid #d5dadf;
							text-transform: uppercase;
						}
				
						.sorting-filter {
							.components-button {
								padding: 0 0 0 20px;
								height: auto;
								color: inherit;
								font-size: inherit;
								text-transform: uppercase;
								background: transparent;
								font-weight: normal;
				
								&::after {
									width: 11px;
									content: " ";
									margin-left: 3px;
								}
				
								&.is-selected {
									&::after {
										font-family: dashicons;
										content: "\f142";
										margin-left: 3px;
									}
				
									&.is-asc {
										&::after {
											content: "\f140";
										}
									}
								}
							}
						}
					}

					.view-filters {
						display: flex;

						.search-filters {
							width: 200px;
							position: relative;
							margin-right: 20px;
				
							input {
								width: 100%;
								max-height: 36px;
								border: none;
								border-bottom: 1px solid #d5dadf;
								border-radius: 0;
								font-size: 11px;
								padding: 8px 15px 8px 0;
								transition: border .5s;
								background: none;
								box-shadow: none;
								color: #6d7882;
								outline: none;
							}
				
							svg {
								position: absolute;
								top: 50%;
								right: 0;
								transform: translateY(-50%);
							}
						}

						.components-button {
							background: transparent;

							&.is-pressed {
								background: transparent;
	
								svg {
									fill: #0073aa;
								}
							}
	
							svg {
								fill: #d9d9d9;
							}
						}
					}
				}

				.table-content {
					&.is-grid {
						display: grid;
						grid-template-columns: 25% 25% 25% 25%;
					}

					.table-row {
						display: flex;
						height: 60px;
						width: 100%;
						align-items: center;
						padding: 0 25px;
						background: #fff;
						border: 1px solid rgba(0, 0, 0, 0.11);
						border-top: none;

						&:first-child {
							border-top: 1px solid rgba(0, 0, 0, 0.11);
						}

						svg {
							height: 24px;
							margin-right: 10px;
							fill: #b9b9b9;
						}

						.row-title {
							display: flex;
							align-items: center;

							.components-base-control__field {
								margin: 0;
							}
						}

						.row-controls {
							display: flex;
							align-items: center;
							margin-left: auto;

							button {
								padding: 6px 30px;
								font-weight: 600;
								color: #b9b9b9;
								background: transparent;
							}
						}

						.actions {
							display: flex;
							margin-left: 50px;
							justify-content: flex-end;

							&.no-controls {
								margin-left: auto;
							}

							.components-button {
								padding: 6px 30px;

								&.is-primary {
									margin-left: 10px;
								}
							}
						}
					}

					.table-grid {
						border: 1px solid #ccc;
						margin: 10px;
						min-height: 350px;

						.grid-preview {
							display: flex;
							width: 100%;
							height: 300px;
							background-color: #b7c0cc;
							background-position: top center;
							background-size: cover;

							&:hover {
								background-color: #404040;
							}

							&.is-loading {
								background: #404040;

								.preview-actions {
									display: flex;
								}
							}

							.preview-actions {
								opacity: 0;
								transition: .3s ease opacity;
								width: 100%;
								height: auto;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								background-color: rgba(0, 0, 0, 0.9);
								display: flex;

								> .components-button {
									width: 120px;
									justify-content: center;
									margin-bottom: 10px;

									&.is-secondary {
										color: #ffffff;
										box-shadow: inset 0 0 0 2px #ffffff;

										&:disabled {
											background: transparent;
											opacity: 0.5;
										}
									}
								}

								.preview-controls {
									.components-button {
										width: 20px;

										svg {
											fill: #ffffff;
										}
									}
								}
							}

							&:hover {
								.preview-actions {
									opacity: 1;
								}
							}
						}

						.card-footer {
							background: #ffffff;
							border-top: 1px solid #ccc;
							padding: 15px;

							p {
								font-weight: 600;
								margin: 0;
							}
						}
					}
				}

				.pagination {
					padding-top: 20px;
				
					.components-button {
						margin-right: 10px;
						border-radius: 2px;
						box-shadow: none;
				
						&:focus {
							box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #007cba;
						}
				
						&:not( .is-primary ) {
							background: #ffffff;
				
							&:focus {
								box-shadow: 0 0 0 1.5px #007cba;
							}
						}
					}
				}
				

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

					.right {
						.components-button {
							&:last-child {
								margin-left: 10px;
							}
						}
					}
				}

				.preview-content {
					margin: 20px 0;

					.block-editor-block-preview__container {
						max-height: 60vh;
						overflow: scroll;

						.block-editor-block-list__block {
							&:first-child {
								margin-top: 0;
								margin-bottom: 0;
							}
						}
					}
	
					iframe {
						height: 560px;
					}
				}

				.components-placeholder {
					box-shadow: none;
					margin: 20px 0;
				}

				.tpc-modal-content-export {
					padding: 50px 0;

					.tpc-modal-content-export-icon {
						display: flex;
						justify-content: center;

						svg {
							fill: #c2cbd2;
							width: 65px;
							height: 65px;
						}
					}

					.tpc-modal-content-export-title {
						color: #6d7882;
						text-align: center;
						font-size: 30px;
						font-weight: 500;
						margin-top: 20px;
					}

					.tpc-modal-content-export-field {
						margin-top: 40px;
						display: flex;
						align-items: center;
						justify-content: center;

						.tpc-modal-content-export-field-input {
							width: 500px;
							background-color: #fff;
							font-weight: 300;
							color: #a4afb7;
							padding-left: 25px;
							border-radius: 3px 0 0 3px;
							border: none;
							height: 55px;
							font-size: 16px;

							&:disabled {
								cursor: not-allowed;
							}
						}

						.tpc-modal-content-export-field-submit {
							color: #fff;
							display: flex;
							justify-content: center;
							width: 150px;
							border-radius: 0 3px 3px 0;
							background-color: #39b54a;
							height: 55px;
							font-size: 16px;

							svg {
								animation: a 2s infinite linear;
							}
						}

						.tpc-modal-content-export-field-input-label {
							cursor: pointer;
							width: 150px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
}

.components-toggle-control * {
	cursor: pointer;
}

.components-button {
	&.is-loading {
		svg {
			-webkit-animation: icon-spin 2s linear infinite;
			animation: icon-spin 2s linear infinite;
		}
	}
}

.components-popover {
	z-index: 9999999;
}

@media (max-width: 1439px) {
	.tpc-template-cloud-modal {
		.components-modal__frame {
			max-width: 990px;

			.components-modal__content {
				.tpc-modal-content {
					.table-content {
						&.is-grid {
							grid-template-columns: 33% 33% 33%;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1439px) {
	.tpc-template-cloud-modal {
		.components-modal__frame {
			max-width: 990px;

			.components-modal__content {
				.tpc-modal-content {
					.table-content {
						&.is-grid {
							grid-template-columns: 33% 33% 33%;
						}
					}

					.preview-content {
						iframe {
							width: 1440px;
						}
					}
				}
			}
		}
	}
}

@media (min-width: 1440px) {
	.tpc-template-cloud-modal {
		.components-modal__frame {
			max-width: 1200px;

			.components-modal__content {
				.tpc-modal-content {
					.preview-content {
						iframe {
							width: 1710px;
						}
					}
				}
			}
		}
	}
}

@-webkit-keyframes icon-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@keyframes icon-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}