.swptls-container .Toastify__toast-container--top-right {
	top: 3em !important;
}

//Start main Style
.swptls-container {

	//header
	.ect-app-header {
		margin-bottom: 0px;

		.header-content {
			h1 {
				font-weight: 600;
				font-size: 24px;
				line-height: 1.333333333333333;
				color: #353535;
				margin: .67em 0 0 0;
			}

			p {
				font-size: 16px;
			}

		}
	}

	//Dashboard Top
	.ect-dashboard {
		padding: 0px 0px 30px 0;
		border-bottom: 1px solid #DDDDDD;
		margin-bottom: 25px;

		.button-save,
		.button-connect {
			background: #3A89FF;
			color: #fff;

			&.no-credentials {
				background: #E2E5EC;
				color: #7A828E;
			}
		}


		@media (max-width: 767.98px) {
			.custom_row_style {
				margin-left: 0;
				margin-right: 0;
			}

			.custom_column_style {
				width: 100%;
			}
		}

		//tab content
		.ect-tab-content {
			width: 100%;

			@media (max-width: 767.98px) {
				margin-bottom: 40px;
			}

			//Protection Status
			.protection-status {
				padding: 0px 40px 0px 0;

				.zero-state-notice {
					display: flex;
					align-items: center;
					background: #FFEADE;
					border: 1px solid #FFD5B7;
					border-radius: 4px;
					padding: 10px;
					font-size: 16px;
					color: #57636C;
					margin-bottom: 15px;

					.ect-click-here-btn {
						text-decoration: none;
						margin: 0 0 0 5px;
						color: #1084ED;
						font-weight: 700;
					}
				}

				.connection-success-status,
				.connection-error-status {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: nowrap;
					width: 100%;
					margin-bottom: 44px;

					.icon {
						max-width: 38px;
						width: 100%;
						margin-right: 12px;
					}

					.theMessage {
						width: 100%;

						h5 {
							font-weight: 600;
							font-size: 16px;
							line-height: 1.3125;
							color: #353535;
							margin: 0 0 5px 0;
						}

						p {
							font-weight: 400;
							font-size: 15px;
							line-height: 1.3333333333;
							color: #57636C;
							margin: 0;

							a {
								font-weight: 400;
								font-size: 15px;
								line-height: 1.3333333333;
								color: #1084ED;
								display: inline-flex;
								align-items: center;
								justify-content: center;
								flex-wrap: nowrap;

								&:focus {
									outline: none;
									box-shadow: none;
									border: none;
								}

								.link_icon {
									max-width: 12px;
									width: 100%;
									height: 12px;
									display: inline;
									margin-left: 5px;
									margin-bottom: 3px;

									svg {
										width: 100%;
										height: 100%;
									}

								}
							}
						}
					}
				}

				.connection-success-status {
					.theMessage {
						h5 {
							color: #00A74D;
						}
					}
				}

				.connection-error-status {
					.theMessage {
						h5 {
							color: #FF4040;
						}
					}
				}
			}

			#cf-turnstile {
				margin-bottom: 15px;
			}

			//configuration-form
			.configuration-form {
				padding: 0px 40px 0px 0;
				margin-bottom: 5px;

				@media (max-width: 767.98px) {
					padding: 0 0 0 0;
				}

				.ect-form-control {
					margin-bottom: 15px;

					&:last-child {
						margin-bottom: 0;
					}

					label {
						font-weight: 600;
						font-size: 16px;
						line-height: 1;
						color: #666873;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						width: 100%;
						margin-bottom: 15px;

						.tooltip_icon {
							width: 10px;
							height: 12px;
							display: inline-block;
							margin-left: 5px;

							svg {
								width: 100%;
								height: 100%;

							}
						}


					}
				}
			}
		}

		//Intro Qrap
		.intro-wrap {
			.intro-head {
				.swptls-title {
					h3 {
						margin: 0 0 15px 0;
					}
				}
			}

			.intro-video-wrapper {
				width: 100%;
				min-height: 260px;
				height: 100%;
				cursor: pointer;

				.video_cover {
					width: 100%;
					height: 100%;
					position: relative;
					border-radius: 5.90476px;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}

					&::before {
						content: url('../../assets/images/play_btn.svg');
						left: 50%;
						width: 60px;
						top: 50%;
						height: 60px;
						color: #fff;
						font-size: 18px;
						text-indent: 5px;
						line-height: 70px;
						background: white;
						position: absolute;
						text-align: center;
						border-radius: 500px;
						filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.12));
						transition: all 0.3s ease;
						transform: translate(-50%, -50%) scale(1);
						z-index: 1;
					}

					&::after {
						position: absolute;
						left: 0;
						top: 0;
						height: 99%;
						width: 100%;
						background: rgba(30, 29, 71, 0.58);
						content: "";
						border-radius: 5.90476px;
					}

					&:hover {
						&::before {
							filter: saturate(0.5);
							background: #FF0000;
							transform: translate(-50%, -50%) scale(0.95);
						}
					}
				}
			}
		}
	}

	//React Tooltip

	.__react_component_tooltip.type-dark {
		background-color: #fff !important;
		color: #333 !important;
	}

	.tooltip-content {
		padding: 20px;
		max-width: 200px;
		color: #333333;
		font-size: 16px;
		font-weight: 600;
	}

	.tooltip-container {
		max-width: 250px;
	}

	.tooltip-image {
		width: 100%;
		height: auto;
		margin-top: 20px,
	}


}

/*
WooCommerce Turnstile
*/

.woocommerce {

	button[type=submit] {
		pointer-events: auto;
		opacity: 1;

		&.wppool-disable {
			pointer-events: none;
			opacity: .5;
		}
	}
}


/*
Shortcode Cf7 Style
*/

.shortcode-text {
	color: #4D7EFF;
	font-weight: bold;
	position: relative;

	span {
		position: absolute;
		margin-top: 2px;
		margin-left: 5px;
	}
}

.short-code {
	position: relative;

	span {
		position: absolute;
		margin-top: 1px;
	}

	.tooltip {
		color: #333;
	}
}

input.invalid-credentials,
input.invalid-credentials:focus {
	border: 1px solid red;
}

//My CSS
@import '_base';
@import '_control-box-and-integrations';
@import '_aditional-settings';