:root body.woocommerce-admin-page__datalayer-for-ecommerce-free {
	--wp-admin-theme-color: #008bff;
	--wp-admin-theme-color-darker-10:#008bff;
	--wp-admin-theme-color-darker-20:#008bff;
}

body.woocommerce-admin-page__datalayer-for-ecommerce-free{
	background: #f7f7f7;
	.components-popover__content{
		padding: 10px !important;
	}
	.wrap.datalayer-for-ecommerce-free{
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		-ms-flex-pack:justify;
		justify-content:flex-start;
		-webkit-align-content:stretch;
		-ms-flex-line-pack:stretch;
		-webkit-align-items:stretch;
		align-items:stretch;
		.content-form-datalayer-for-ecommerce-free-wrap{
			width: 82%;
			background: #ffffff;
			box-shadow: 10px 17px 21px 0px rgba(0, 0, 0, 0.1);
			border-bottom-right-radius: 30px;
			border-top-right-radius: 30px;
			padding: 50px 50px 0 50px;
			.my-gutenberg-form{
				padding-bottom: 100px;
			}
			.woocommerce-section-header{
				padding-left: 0;
				.woocommerce-section-header__title{
					font-size: 22px;
					line-height: 4.2;
					@media (max-width:1440px){
						line-height: 1.5;
					}
				}
			}
			.wp-list-table{
				@media (max-width:1440px){
					td{
						width: auto !important;
					}
				}
			}
			.components-base-control{
				margin-bottom: 30px  !important;
				white-space: pre-wrap;
				&.components-base-control-bottom-minus{
					margin-top: -20px  !important;
					margin-bottom: 40px  !important;
				}
				&.components-base-control-bottom-minus-negative{
					margin-bottom: -5px  !important;
				}
				&.components-base-control-bottom-minus-active{
					margin-top: -20px  !important;
				}
				&.enhanced-ecommerce-deprecated{
					position: relative;
					.field-enhanced-ecommerce-deprecated{
						background: red;
						padding: 5px;
						border-radius: 5px;
						position: absolute;
						right: 63%;
						top: 0;
						font-size: 11px;
						a,a:visited{
							color: #ffffff;
							text-decoration: none;
							font-weight: bold;
						}
					}
				}
				.components-base-control__field{
					.components-base-control-bottom-minus-active{
						margin-top: -20px  !important;
					}
					.components-base-control__label,label{
						font-size: 14px;
					}
				}
				p.components-base-control__help{
					color: #74797e;
				}
			}
			.components-color-picker{
				.components-flex{
					display: none;
				}
			}
			.form-buttons{
				.components-button{
					border-radius: 6px;
					padding: 0 20px;
					font-size: 15px;
					&:hover{
						opacity: 0.8;
					}
					&.is-secondary{
						margin-right: 15px;
					}
				}
				@media (max-width:1280px){
					padding: 10px;
					font-size: 15px;
					text-wrap: wrap;
					height: auto;
					width: 100%;
					display: inline-block;
					&.is-secondary:first-child{
						margin-right: 0px;
						margin-bottom: 15px;
					}
					&.is-secondary:nth-child(2){
						margin-right: 0px;
					}
				}
			}
			.form-fields-button{
				margin-top: 30px;
			}
			.woocommerce-select-control{
				margin-bottom: 55px;
				.components-base-control__help{
					position: absolute;
					top: 50px;
					left: 0;
				}
				.woocommerce-select-control__clear{
					top: calc(25% - 10px) !important;
				}
				.woocommerce-select-control__tags{
					margin: 45px 0 0;
				}
			}
			.components-base-control__label.label_external{
				font-size: 14px !important;
			}
			.components-flex.css-1e5wyad{
				.components-button.is-secondary{
					border-radius: 6px;
					padding: 0 20px;
					font-size: 15px;
					box-shadow: none;
					border: 1px solid #008bff;
					&:active,&:focus{
						color: #008bff;
						border: 1px solid #008bff;
						box-shadow: none;
					}
					&:hover{
						opacity: 0.8;
					}
				}
				.css-off1bd{
					flex-direction: column;
				}
			}
			.form-subtitle{
				margin-bottom: 20px;
				font-weight: 500;
				font-size: 16px;
				text-transform: uppercase;
			}
			.components-flex{
				@media (max-width:1280px){
					flex-wrap: wrap;
					gap: 30px;
				}
				@media (max-width:768px){
					.components-flex-item{
						width: 100%;
					}
				}
			}
			.premium-function{
				position: relative;
				margin-top: 30px;
				.components-base-control,table.wp-list-table,.form-fields-button,.datalayer-s2s-consent-notice,.datalayer-health-metrics,.datalayer-health-diagnostic,.datalayer-cookie-blocking-built-in,.funnel-dashboard,.insights-container{
					opacity: .5;
				}
				span{
					.link-premium-function{
						padding: 20px;
						border-radius: 6px;
						text-align: center;
						background: #fec228;
						color: #ffffff;
						font-weight: bold;
						font-size: 20px;
						display: inline-block;
						margin-bottom: 25px;
						.components-external-link__contents{
							text-decoration: none;
						}
						svg{
							display: none;
						}
					}
				}
			}
			@media (max-width:1440px){
			width: 77%;
		}
			@media (max-width:1280px){
				width: 70%;
			}
			@media (max-width:768px){
				width: 100%;
				border-bottom-right-radius: 30px;
				border-bottom-left-radius: 30px;
				border-top-right-radius: 0px;
				min-height: auto;
			}
			.funnel-dashboard{
				h2{
					margin-bottom: 30px;
					font-weight: 500;
					font-size: 18px;
					margin-top: 0px;
				}
				h3{
					font-size: 18px;
				}

				.funnel-dashboard-controls{
					display:flex;
					flex-direction:row;
					flex-wrap:nowrap;
					justify-content:flex-start;
					align-items: flex-start;
					border: 1px solid #e0e0e0;
					padding: 50px;
					gap: 200px;
					.funnel-dashboard-controls-date{
						display:flex;
						flex-direction:row;
						flex-wrap:nowrap;
						justify-content:flex-start;
						align-items: center;
						h3{
							margin: 0 25px 0 0;
						}
						.funnel-dashboard-calendars{
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							justify-content:flex-start;
							border: 1px solid #e0e0e0;
							padding: 10px 25px;
							.funnel-dashboard-calendars-icon{
								padding: 0;
								height: 20px;
							}
							.funnel-dashboard-calendars-start{
								&:after{
									content: " - ";
									color: rgba(0, 0, 0, 0.40);
									font-weight: 500;
									font-size: 16px;
								}
							}
							.funnel-dashboard-calendars-start,.funnel-dashboard-calendars-end{
								.components-button.is-secondary{
									padding: 10px;
									outline: 0;
									box-shadow: none;
									color: rgba(0, 0, 0, 0.40);
									font-weight: 500;
									font-size: 16px;
								}
							}
						}
						.funnel-dashboard-filters{
							.funnel-dashboard-filters-product{
								display:flex;
								flex-direction:row;
								flex-wrap:nowrap;
								justify-content:flex-start;
								align-items: flex-start;
								position: relative;
								.components-base-control{
									margin-bottom: 0px !important;
								}
								.woocommerce-select-control{
									margin-bottom: 0px;
								}
								.funnel-dashboard-filters-product-clear{
									cursor: pointer;
									margin-top: 15px;
									margin-left: 15px;
								}
							}
						}
					}
				}
				.funnel-dashboard-stats{
					border: 1px solid #e0e0e0;
					padding: 25px 50px;
					margin-top: 35px;
					.funnel-dashboard-funnel{
						display:flex;
						flex-direction:row;
						flex-wrap:nowrap;
						justify-content:flex-start;
						align-items: flex-end;
						margin-top: 40px;
						.funnel-dashboard-funnel-item{
							display: flex;
							flex-direction: column;
							flex-wrap: nowrap;
							justify-content: flex-end;
							width: 100%;
							border-right: 1px solid #e0e0e0;
							border-top: 1px solid #e0e0e0;
							border-bottom: 0px solid #e0e0e0;
							&:nth-child(1){
								border-left: 1px solid #e0e0e0;
							}
							.funnel-dashboard-funnel-item-header{
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: space-between;
								align-items: center;
								border-bottom: 1px solid #e0e0e0;
								margin-bottom: 50px;
								width: 100%;
								padding: 15px 30px;
								.funnel-dashboard-funnel-item-header-sequence{
									width: 100%;
									text-align: left;
									font-size: 12px;
									color: rgba(0, 0, 0, 0.54);
									font-size: 12px;
									margin-bottom: 5px;
								}
								.funnel-dashboard-funnel-item-header-label{
									width: 80%;
									font-size: 16px;
								}
								.funnel-dashboard-funnel-item-header-value{
									font-size: 16px;
									font-weight: bold;
								}
							}
							.funnel-dashboard-funnel-item-bar{
								display: flex;
								flex-direction: column;
								flex-wrap: nowrap;
								justify-content: flex-end;
								align-items: flex-start;
								.funnel-dashboard-funnel-bar{
									text-align: center;
									.funnel-step-bar{
										height: 100%;
										border-radius: 0px 0px 0 0;
										transition: height 0.4s ease;
										color: #fff;
										font-weight: bold;
										display: flex;
										align-items: flex-end;
										justify-content: center;
										width: 190px;
										margin: 0 auto;
									}
								}
							}
							.funnel-dashboard-funnel-item-footer{
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: space-between;
								align-items: center;
								border-top: 1px solid #e0e0e0;
								width: 100%;
								padding: 10px 15px;
								height: 50px;
								.funnel-step-percent-legend{
									font-size: 14px;
									width: 100%;
									&.empty{
										height: 29px;
									}
								}
								.funnel-step-percent{
									font-size: 14px;
									&.empty{
										height: 18px;
									}
								}
							}
						}
					}
				}
			}
			.components-notice{
				button{
					margin-top: 20px;
				}
				.components-notice__dismiss{
					display: none;
				}
			}
		}
		.content-sidebar-datalayer-for-ecommerce-free-wrap{
			width: 18%;
			background: #fbfbfb;
			border-bottom-left-radius: 30px;
			border-top-left-radius: 30px;
			box-shadow: 0px 17px 21px 0px rgba(0, 0, 0, 0.1);
			padding: 28px 20px;
			border-right:1px solid #eaebee;
			min-height: 720px;
			.logoDatalayer{
				text-align: center;
				img{
					width: 120px;
				}
			}
			.components-panel{
				background: transparent;
				border: 0;
				.components-button.components-panel__body-toggle{
					font-size: 16px !important;
					font-weight: bold !important;
					padding: 18px 48px 18px 16px;
					padding-left: 35px;
					&:focus{
						box-shadow: inset 0 0 0 2px #e1f1fa;
					}
					svg.components-panel__icon {
						position: absolute;
						width: 25px;
						height: 25px;
						margin: 0;
						left: 0;
					}
				}
				.components-panel__body.is-opened>.components-panel__body-title{
					margin: -16px -16px 0px;
				}
				.components-panel__row{
					.custom-navigation{
						width: 100%;
						box-sizing: border-box;
						padding: 0px calc(16px);
						overflow: hidden;
						margin: 2px 0;
						button{
							color: #74797e;
							opacity: 1;
							height: auto;
							width: 100%;
							padding: calc(8px) calc(16px);
							text-align: left;
							display: flex;
							-webkit-box-align: center;
							align-items: center;
							min-height: 40px;
							font-weight: 400;
							line-height: 20px;
							transition: box-shadow .1s linear;
							margin: 0 0 2px 0;
							&:last-child{
								margin-bottom: 0;
							}
							span.navigation-item-label{
								margin: 0px auto 0px 0px;
								text-wrap: pretty;
								font-weight: normal;
								font-size: 14px;
								line-height: 20px;
								color: inherit;
								font-family: inherit;
								cursor: pointer;
								text-align: left;
							}
							&:focus,&:hover,&.is-active{
								box-shadow: none;
								outline: 0;
								background: #e1f1fa;
								border-radius: 2px;
								span.navigation-item-label{
									color: #74797e;
								}
							}
							&:focus,
							&.is-active {
								span.navigation-item-label {
									font-weight: 500;
								}
							}
							&:hover:not(.is-active) {
								span.navigation-item-label {
									font-weight: normal;
								}
							}
						}
					}
					.components-navigation__menu.css-1t5hihr{
						margin-top: calc(2px);
						margin-bottom: calc(2px);
						.components-navigation__item{
							&.css-mzv38o.is-active{
								background: #e1f1fa;
								color: #74797e;
								font-weight: bold;
								.components-button{
									span{
										font-weight: 500;
										&:hover{

										}
									}
								}
							}
							&.css-mzv38o:hover{
								background: #e1f1fa;
							}
							.components-button{
								color: #74797e;
								opacity: 1;
								&:focus:not(:disabled){
									box-shadow: 0 0 0 2px #e1f1fa;
								}
							}
						}
					}
				}
			}

			@media (max-width:1440px){
				width: 23%;
				.components-panel__row {
					.custom-navigation {
						padding: 0 !important;
					}
				}
			}
			@media (max-width:1280px){
				width: 30%;
			}
			@media (max-width:768px){
				width: 100%;
				border-bottom-left-radius: 0px;
				border-top-left-radius: 30px;
				border-top-right-radius: 30px;
				border-right:0;
			}
		}
	}
	.insights-container{
		.insights-container__featured{
			.insight-card {
				border-left: 8px solid #008bff;
				background: #fbfbfb;
			}
			.insight-card__text {
				font-size: 15px;
				line-height: 1.6;
			}
		}
		.insights-container__grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 16px;
			@media (min-width: 900px) {
				//grid-template-columns: repeat(2, minmax(320px, 1fr));
			}
		}
		.insight-card {
			border-left: 4px solid #008bff;
			margin-bottom: 50px;
			.insight-card__header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 12px;
				strong{
					font-size: 18px;
				}
				.insight-card__badge {
					background: #f0f0f0;
					padding: 2px 8px;
					border-radius: 12px;
					font-size: 12px;
					display: flex;
					align-items: center;
				}
			}
			.insight-card__text {
				font-size: 14px;
				line-height: 1.6;
				margin-bottom: 16px;
			}
			.insight-card__footer {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				color: #666;
				.insight-card__ai {
					cursor: help;
					display: flex;
					align-items: center;
				}
			}
		}
	}
}