.elementor-add-new-section {
	.elementor-templates-cloud-button {
		background-color: #0366D6;
		margin-left: 5px;

		.tpc-template-cloud-icon {
			width: 12px;
			height: 12px;
		}
	}
}

.ti-tpc-templates-modal {
	.dialog-widget-content {
		max-width: 990px;
		width: 100%;
		background: #f1f3f5;

		.dialog-header {
			padding: 0;
			background: #fff;
			box-shadow: 0 0 8px rgba(0,0,0,.1);
			position: relative;

			&.is-dark {
				background-color: #26292c;

				.ti-tpc-templates-modal__header {
					.ti-tpc-templates-modal__header__logo-area {
						.ti-tpc-template-library-header-preview-back {
							border-right: 1px solid rgba(255, 255, 255, 0.25);

							&:hover {
								color: #ffffff;
							}
						}
					}

					.ti-tpc-templates-modal__header__items-area {
						.ti-tpc-templates-modal__header__close {
							border-left: 1px solid rgba(255, 255, 255, 0.25);

							&:hover {
								color: #ffffff;
							}
						}
					}

					.ti-tpc-templates-modal__header__menu-area {
						.ti-tpc-template-library-menu-item {
							color: #e0e1e3;

							&.is-active {
								background: linear-gradient(180deg,#26292c,#34383c);
								border-bottom: 3px solid #71d7f7;
							}
						}
					}
				}
			}

			.ti-tpc-templates-modal__header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 50px;

				.ti-tpc-templates-modal__header__logo-area {
					width: 175px;
					height: 100%;
					text-align: left;
					padding-left: 15px;

					.ti-tpc-templates-modal__header__logo {
						height: 100%;
						display: flex;
						align-items: center;
						line-height: 1;

						svg {
							width: 30px;
							height: 30px;
						}
					}

					.ti-tpc-template-library-header-preview-back {
						height: 100%;
						color: #a4afb7;
						font-size: 14px;
						padding: 16.5px 16.5px 15px 0;
						border-right: 1px solid #e6e9ec;
						cursor: pointer;
						transition: color .5s;

						&:hover {
							color: #495157;
						}

						i {
							padding-right: 10px;
							font-size: 18px;

							&::before {
								content: "";
							}
						}
					}
				}

				.ti-tpc-templates-modal__header__menu-area {
					text-align: center;
					color: #6d7882;
					font-size: 13px;

					.ti-tpc-template-library-menu-item {
						display: inline-block;
						padding: 17px 0;
						width: 150px;
						height: auto;

						&.is-active {
							border-bottom: 3px solid #0073aa;
						}
					}
				}

				.ti-tpc-templates-modal__header__items-area {
					width: 175px;
					display: flex;
					justify-content: flex-end;

					.ti-tpc-template-library-header-tools {
						display: flex;

						.ti-tpc-template-library-header-actions {
							display: flex;

							.ti-tpc-templates-modal__header__item {
								padding-right: 16px;
							}
						}

						.ti-tpc-template-library-header-preview-insert-wrapper {
							cursor: default;
							padding: 0 10px;

							.ti-tpc-template-library-template-insert {
								height: auto;
								color: #fff;
								background-color: #39b54a;
								padding: 8px 14px;
								font-size: 11px;
							}
						}
					}
				}
			}

			.ti-tpc-templates-modal__header__item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: content-box;
				padding: 0;

				&.ti-tpc-templates-modal__header__close {
					width: 47px;
					border-left: 1px solid #e6e9ec;
				}

				i:not(.eicon-file-download) {
					color: #a4afb7;
					font-size: 18px;
					cursor: pointer;
				}
			}
		}
	}

	.dialog-message {
		height: 750px;
		max-height: 85vh;
		overflow: auto;
		padding-top: 25px;

		&.is-dark {
			.dialog-content {
				.ti-tpc-template-library-templates {
					.ti-tpc-template-library-templates-container {
						.ti-tpc-template-library-templates-table-header {
							.ti-tpc-template-library-templates-table-column {
								.components-button {
									&:hover {
										color: #ffffff;
									}
								}
							}
						}

						.ti-tpc-template-library-templates-table-item {
							background-color: #4c4f56;

							&:hover {
								background-color: #64666a;
							}

							.ti-tpc-template-library-templates-table-column {
								.components-button {
									&:hover {
										color: #a4afb7;
									}
								}

								.components-dropdown {
									.components-popover {
										&:not(.is-without-arrow) {
											&::before,
											&::after {
												border-top-color: #4c4f56;
												border-bottom-color: #4c4f56;
											}
										}

										.components-popover__content {
											background: #4c4f56;
											box-shadow: 1px 3px 11px rgba(0,0,0,.3);
											border-color: transparent;
										}
									}
								}
							}
						}

						.ti-tpc-template-library-template {
							background-color: #404349;

							.ti-tpc-template-library-template-footer {
								.ti-tpc-template-library-template-name {
									color: #e0e1e3;
								}
							}
						}
					}
				}
			}
		}

		.dialog-content {
			display: block;
			height: 100%;

			&.is-loading {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.ti-tpc-template-library-templates {
				padding: 0 15px;

				.ti-tpc-template-library-templates-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ti-tpc-template-library-templates-header-filters {
						font-size: 11px;
						display: flex;

						.ti-tpc-template-library-templates-header-filters-label {
							flex-grow: 1;
							text-align: left;
							padding-right: 20px;
							border-right: 1px solid #d5dadf;
							text-transform: uppercase;
						}

						.ti-tpc-template-library-templates-header-filters-filter {
							display: flex;

							.components-button {
								padding: 0 0 0 20px;
								height: auto;
								color: inherit;
								font-size: inherit;
								text-transform: uppercase;

								&.is-selected {
									&:after {
										font-family: eicons;
										content: "\e8ae";
										margin-left: 3px;
									}

									&.is-asc {
										&:after {
											content: "\e8ad";
										}
									}
								}
							}
						}
					}

					.ti-tpc-template-library-templates-header-search {
						width: 200px;
						position: relative;

						input {
							border: none;
							border-bottom: 1px solid #d5dadf;
							border-radius: 0;
							font-size: 11px;
							padding: 8px 15px 8px 0;
							transition: border .5s;
						}

						i {
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);
						}
					}
				}

				.ti-tpc-template-library-templates-container {
					margin: 10px -15px 0;
					display: flex;
					flex-wrap: wrap;
					align-items: flex-start;

					&.is-table {
						flex-direction: column;
						align-items: normal;
					}

					.ti-tpc-template-library-templates-table-header {
						display: flex;
						align-items: center;
						padding: 0 25px;
						margin-top: 30px;
						text-align: left;

						.ti-tpc-template-library-templates-table-column {
							width: calc( 65% / 3 );

							&:first-child {
								width: 35%;
							}

							&:last-child {
								display: flex;
								justify-content: flex-end;
							}

							.components-button {
								color: #a4afb7;
								line-height: 1;
								font-size: 10px;
								font-weight: 500;
								text-transform: uppercase;
								padding: 0;
								cursor: pointer;

								&.is-selected {
									&:after {
										font-family: eicons;
										content: "\e8ae";
										margin-left: 3px;
									}

									&.is-asc {
										&:after {
											content: "\e8ad";
										}
									}
								}

								&:hover {
									color: #1e1e1e;
								}
							}
						}
					}

					.ti-tpc-template-library-templates-table-item {
						display: flex;
						height: 50px;
						align-items: center;
						padding: 0 25px;
						margin-top: 1px;
						text-align: left;
						background-color: #fafbfb;

						&:first-child {
							border-radius: 3px 3px 0 0;
						}

						&:last-child {
							border-radius: 0 0 3px 3px;
						}

						.ti-tpc-template-library-templates-table-column {
							width: calc( 65% / 3 );

							&:first-child {
								font-weight: 600;
								width: 35%;

								input[type=text] {
									width: 50%;
									margin-right: 10px;
								}

								.components-button {
									padding-left: 10px;
									padding-right: 10px;

									i {
										margin: 0;
									}
								}
							}

							&:last-child {
								display: flex;
								justify-content: flex-end;
							}

							.components-button {
								text-transform: none;
								font-size: 12px;
								padding: 8px 18px;
								height: 30px;

								&:not(:hover) {
									background: none;
									color: #a4afb7;
								}
							}

							.components-dropdown {
								.components-popover {
									.components-popover__content {
										.components-button {
											> svg {
												width: 20px;
												height: 20px;
											}
										}
									}
								}
							}
						}
					}

					> p {
						font-size: 14px;
					}

					.ti-tpc-template-library-template {
						margin: 15px;
						padding: 8px;
						background: #fff;
						box-shadow: 0 1px 20px 0 rgba(0,0,0,.07);
						border-radius: 3px;

						&:not(:hover) {
							.ti-tpc-template-library-template-footer {
								.ti-tpc-template-library-template-action {
									display: none;
								}
							}
						}


						&:hover {
							.ti-tpc-template-library-template-name {
								display: none;
							}
						}

						.ti-tpc-template-library-template-body {
							height: 200px;
							position: relative;

							.ti-tpc-template-library-template-screenshot {
								height: 100%;
								background-size: cover;
								background-position-x: 50%;
								box-shadow: inset 0 -2px 15px -6px rgba(0,0,0,.07);
							}

							.ti-tpc-template-library-template-preview {
								opacity: 0;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0,0,0,.5);
								transition: opacity .5s;
								cursor: pointer;

								&:hover {
									opacity: 1;
								}

								i {
									font-size: 20px;
									color: #d5dadf;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%,-50%);
								}
							}
						}

						.ti-tpc-template-library-template-footer {
							display: flex;
							justify-content: space-between;
							margin-top: 10px;
							font-size: 11px;
							line-height: 1;

							.ti-tpc-template-library-template-action {
								color: #39b54a;
								height: auto;
								padding: 0;
								font-size: 11px;

								span {
									line-height: 1;
								}
							}

							.ti-tpc-template-library-template-name {
								text-align: left;
								color: #6d7882;
								-webkit-box-flex: 1;
								flex-grow: 1;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								padding-right: 5px;
								line-height: 1;
							}
						}
					}

					.components-placeholder {
						background: transparent;
						border: none;
						box-shadow: none;

						.components-placeholder__fieldset {
							justify-content: center;
						}
					}
				}
			}

			.ti-tpc-template-library-export {
				padding: 50px 0;

				.ti-tpc-template-library-blank-icon {
					font-size: 65px;
					color: #c2cbd2;
					line-height: 1;
				}

				.ti-tpc-template-library-blank-title {
					font-size: 30px;
					margin-top: 40px;
				}

				.ti-tpc-template-library-blank-field {
					margin-top: 40px;
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					-webkit-box-pack: center;
					justify-content: center;

					> * {
						height: 55px;
						font-size: 16px;
					}

					.ti-tpc-template-library-blank-field-input {
						width: 500px;
						background-color: #fff;
						font-weight: 300;
						color: #a4afb7;
						padding-left: 25px;
						border-radius: 3px 0 0 3px;
						border: none;
					}

					.elementor-button {
						display: block;
						width: 150px;
						border-radius: 0 3px 3px 0;
						background-color: #39b54a;
					}

					.ti-tpc-template-library-blank-field-input-label {
						width: 150px;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.components-form-toggle {
						input.components-form-toggle__input[type="checkbox"] {
							cursor: pointer;
						}
					}
				}
			}

			.ti-tpc-template-library-preview {
				height: 100%;
				overflow: hidden;

				iframe {
					height: 150%;
					transform: scale(.666) translateX(-25%) translateY(-25%);
				}
			}
		}
	}
}

.components-modal__screen-overlay {
	&.is-dark {
		.components-modal__frame {
			border: 1px solid #26292c;

			.components-modal__content {
				background: #34383c;

				.components-modal__header {
					background: #26292c;
					border-bottom: 1px solid #26292c;

					.components-button {
						color: #a4afb7;

						&:hover {
							color: #e0e1e3;
						}
					}
				}

				.components-text-control__input {
					background-color: #26292c;
					color: #a4afb7;
					border: none;

					&:focus {
						box-shadow: none;
					}

					&::placeholder {
						color: #a4afb7;
					}
				}
			}
		}
	}
}

@-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)
	}
}

@media ( max-width: 1439px ) {
	.ti-tpc-templates-modal {
		.dialog-widget-content {
			max-width: 990px;

			.ti-tpc-template-library-preview {
				iframe {
					width: 1440px;
				}
			}

			.ti-tpc-template-library-template {
				width: calc(25% - 30px);
			}
		}
	}
}

@media ( min-width: 1440px ) {
	.ti-tpc-templates-modal {
		.dialog-widget-content {
			max-width: 1200px;

			.ti-tpc-template-library-preview {
				iframe {
					width: 1710px;
				}
			}

			.ti-tpc-template-library-template {
				width: calc(20% - 30px);
			}
		}
	}
}