@import url(base/variables.less);

@green-color: #06d6a0;
@light-green-color: #b6ffec;
@red-color: #ef476f;
@light-red-color: #ffcdd9;
@yellow-color: #ffd166;
@light-yellow-color: #fff4d9;
@blue-color: #0680d6;
@light-blue-color: #b0ebff;
@navyblue-color: #073b4c;
@light-navyblue-color: #94e4ff;

@icon-color: #48484a;
@card-background: #fff;

@ps-dashboard-gap-size: 20px;
@ps-dashboard-nav-inline-size: 240px;
@ps-dashboard-border-color: rgba(123, 123, 123, 0.09);

@shape-primary-color: #49ddb4;
@shape-secondary-color: #3fb8e1;

@global-link-color: #1e87f0;


.prime-slider-dashboard {
	position: relative;

	&.wrap {
		margin-block-start: 10px;
		margin-inline-end: 20px;
		margin-block-end: 0;
		margin-inline-start: 0;

		a:focus {
			outline: none;
			box-shadow: none;
		}

		#prime_slider_api_settings_page .ps-options {
			display: block;
			columns: 1;
			gap: @ps-dashboard-gap-size;

			.ps-option-item {
				margin-block-end: @ps-dashboard-gap-size;
			}
		}

		.ps-affiliate-sub-title {
			color: #1d2327;
			font-size: 1.3em;
			margin: 1em 0;
		}

		.ps-affiliate-features ul {
			list-style: inside;
		}

		.prime-slider-settings-save-btn {
			padding: 3px 30px;
			color: #fff;
			background: linear-gradient(to right, #FE506C, #FC6A2A);
			border: 0;

			&:hover {
				background: linear-gradient(to right, #FC6A2A, #FE506C);
			}
		}

		.ps-dashboard-header {
			position: relative;
			padding: 20px 30px;
			background: #fff;
			overflow: hidden;
			z-index: 11;
			border: 1px solid @ps-dashboard-border-color;
			border-radius: 6px;

			&.bdt-sticky-fixed {
				z-index: 999;
				box-shadow: 0px -32px 0px 0px #ffffff, 0px 5px 15px rgba(0, 0, 0, 0.1);
				border-end-start-radius: 0;
				border-end-end-radius: 0;
				border-block-end: 0;

				.ps-header-elements {
					opacity: 0.5;
					transition: opacity 0.3s ease;
				}

				&:hover .ps-header-elements {
					opacity: 1;
				}
			}

			.ps-header-elements {
				position: absolute;
				inset-block-start: 0;
				inset-inline-start: 0;
				inline-size: 100%;
				block-size: 100%;
				pointer-events: none;
				z-index: 1;
			}

			.ps-logo,
			.ps-dashboard-new-page {
				position: relative;
				z-index: 2;
			}

			.ps-header-elements {
				.ps-header-element {
					position: absolute;
					display: block;

					&.ps-header-circle {
						inline-size: 160px;
						block-size: 160px;
						border-radius: 50%;
						background: linear-gradient(45deg, rgba(@shape-primary-color, 0.05), rgba(@shape-secondary-color, 0.08));
						inset-block-start: -80px;
						inset-inline-end: 10%;
					}

					&.ps-header-dots {
						inset-block-end: 20px;
						inset-inline-start: 15%;
						inline-size: 80px;
						block-size: 40px;
						background-image: radial-gradient(rgba(@shape-primary-color, 0.15) 2px, transparent 2px);
						background-size: 10px 10px;
					}

					&.ps-header-line {
						inline-size: 120px;
						block-size: 2px;
						background: linear-gradient(to right, rgba(@shape-primary-color, 0), rgba(@shape-secondary-color, 0.2));
						transform: rotate(-45deg);
						inset-block-start: 40%;
						inset-inline-end: 25%;
					}

					&.ps-header-square {
						inline-size: 30px;
						block-size: 30px;
						border: 2px solid rgba(@shape-primary-color, 0.1);
						inset-block-start: 30px;
						inset-inline-start: 20%;
						transform: rotate(15deg);
					}

					&.ps-header-wave {
						inline-size: 140px;
						block-size: 20px;
						inset-block-end: 20px;
						inset-inline-end: 15%;
						background: linear-gradient(45deg,
								rgba(@shape-primary-color, 0) 45%,
								rgba(@shape-secondary-color, 0.1) 50%,
								rgba(@shape-primary-color, 0) 55%);
						background-size: 15px 15px;
						transform: rotate(-10deg);
					}
				}
			}

			.ps-logo {
				position: relative;
				z-index: 1;
			}
		}

		.ps-dashboard-header.bdt-sticky-fixed,
		.bdt-widget-filter-wrapper.bdt-sticky-fixed {
			box-shadow: 0px -32px 0px 0px #ffffff, 0px 5px 15px rgba(0, 0, 0, 0.1);
			border-end-start-radius: 0;
			border-end-end-radius: 0;
		}

		.ps-dashboard-wrapper {
			background: #ffffff;
			border-radius: 6px;
			padding: 30px;
			position: relative;
			max-inline-size: 1600px;
		}

		.ps-dashboard-container {
			gap: @ps-dashboard-gap-size;
		}

		.ps-dashboard-header {
			.ps-logo {
				inline-size: 300px;

				img {
					block-size: 32px;
				}
			}

			.ps-dashboard-nav-title {
				h3 {
					font-size: 20px;
					font-weight: 600;

					i {
						margin-inline-end: 10px;
					}
				}
			}

			.ps-dashboard-new-page a {
				text-decoration: none;
				gap: 5px;
				color: #fff;
				border-radius: 6px;
				transition: all .3s ease;
				line-height: normal;
				font-size: clamp(12px, .8vw, 14px);
				font-weight: 600;
				padding: clamp(10px, 1vw, 11px) clamp(10px, 1vw, 20px);
				color: #FC6A2A;
				border: 2px solid #FC6A2A;

				&:hover {
					border-color: #FE506C;
					color: #FE506C;
				}

				i {
					transition: color 300ms ease-out;
				}
			}
		}

		.ps-dashboard-nav-container-wrapper {

			margin-block-start: @ps-dashboard-gap-size;
			display: none;
		}

		.bdt-dashboard-navigation {
			box-sizing: border-box;
			padding: 0;
			min-inline-size: @ps-dashboard-nav-inline-size;
			max-inline-size: @ps-dashboard-nav-inline-size;
			// min-block-size: 100vh;
		}

		.ps-dashboard-compare-section {
			border-block-start: 1px solid #f5f5f5;
			margin-block-start: 50px;
			padding-block-start: 50px;

			.ps-feature-sub-title {
				font-size: 15px;
				font-weight: 500;
				margin: 0 0 10px;
				color: #6a6b72;

			}

			ul {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
				list-style: outside;
				padding: 0;
				margin: 30px 0 0;
				font-size: 14px;
				padding-block: 0;
				padding-inline: 20px;
				margin-block-end: 30px;
			}

		}

		.ps-highlight-text {
			color: #48dab7;
			padding: 3px 6px;
			border-radius: 6px;
			line-height: 1;
			background: #e6fff8;
		}

		.ps-content-type-filter {
			border-block-start: 2px solid #2196F3;
			padding-block-start: 20px;
			display: none;

			ul {
				gap: 2px;

				li {
					margin: 0;

					a {
						font-size: 14px;
						color: #666;
						border: 1px solid transparent;
						position: relative;
						padding: 4px 6px;

						&:before {
							content: '';
							position: absolute;
							inset-block-end: 0;
							inset-inline-start: 0;
							inline-size: 0;
							block-size: 2px;
							background: #2196F3;
							transition: inline-size 0.3s ease;
						}

						&:hover {
							color: #2196F3;
						}
					}

					&.bdt-active {
						a {
							color: #2196F3;

							&:before {
								inline-size: 100%;
							}
						}
					}
				}
			}

			.ps-filter-by-text {
				font-size: 14px;
				margin-inline-end: 10px;
				font-weight: 600;
			}
		}

		.ps-dashboard-compare-section.bdt-card {
			background: #fff;
			border: 1px solid @ps-dashboard-border-color;
		}

		.ps-dashboard-welcome-container {
			grid-template-columns: repeat(12, 1fr);
			grid-auto-flow: dense;
			grid-row-gap: @ps-dashboard-gap-size;
			grid-column-gap: @ps-dashboard-gap-size;
			display: grid;

			p {
				margin-block-end: 16px;
			}

			.ps-dashboard-footer-item p {
				margin-block-end: 0;
			}
		}

		.ps-dashboard-item:nth-child(1),
		.ps-dashboard-item:nth-child(3) {
			grid-column: span 12 / auto;
			grid-row: span 1 / auto;
		}

		.ps-dashboard-item {
			grid-column: span 12 / auto;
			grid-row: span 1 / auto;
		}

		.ps-dashboard-item:nth-child(2) {
			grid-column: span 12 / auto;
			grid-row: span 2 / auto;
		}

		.ps-dashboard-template-quick-access {
			img {
				inline-size: 100%;
				block-size: auto;
				border-radius: 6px;
				margin-block-end: 20px;
			}
		}

		.ps-pro-inactive .ps-option-item-inner {
			background-color: rgba(253, 228, 235, 0.12) !important;
			border-color: #ffeaf0 !important;

			&:after {
				content: 'PRO';
				position: absolute;
				inset-inline-end: 24px;
				inset-block-start: 50%;
				transform: translateY(-50%);
				font-size: 10px;
				font-weight: 600;
				color: #EF476F;
				padding: 5px 9px;
				border-radius: 20px;
				background-color: #ffe4eb;
			}

			.prime-slider-3pp-install,
			.prime-slider-3pp-active,
			.prime-slider-3pp-download,
			.switch {
				display: none;
			}
		}

		.bdt-dashboard-navigation {
			.bdt-tab {
				li {
					margin: 0;
					border-block-end: 1px solid @ps-dashboard-border-color;

					a {
						padding: 16px 30px;
						border: none;
						background: none;
						text-decoration: none;
						font-size: clamp(14px, 1vw, 15px);
						color: #666;
						position: relative;
						transition: box-shadow 300ms ease-out;
						justify-content: start;
						gap: 12px;
						font-weight: 600;
					}

					a:hover,
					a:focus {
						border-block-end: none;
						color: #000;
						box-shadow: none;
					}

					a:after {
						background-color: #0680d6;
						content: '';
						block-size: 0;
						position: absolute;
						inset-inline-start: 0;
						inline-size: 4px;
						transition: block-size .7s cubic-bezier(.165, .84, .44, 1);
						transform: translateY(-50%);
						inset-block-start: 50%;
					}

					&.bdt-active {
						a {
							color: #0680d6;

							&:after {
								block-size: 75%;
							}
						}
					}
				}
			}
		}


		.bdt-card {
			border-radius: 6px;
			background-color: @card-background;
			border: 1px solid @ps-dashboard-border-color;
		}

		.ps-option-page {
			margin-block-start: @ps-dashboard-gap-size;

			p {
				font-size: 15px;
				line-height: 1.6;
				color: #666;
				max-inline-size: 600px;
			}


			.ps-option-item {
				.bdt-width-expand {
					&>[class^="ps-wi-"] {
						font-size: 48px;
						margin-inline-end: 20px;
					}
				}

				&.ps-widget-free {
					.bdt-width-expand {
						&>[class^="ps-wi-"] {
							color: @icon-color;
						}
					}
				}

				&.ps-widget-pro {
					.bdt-width-expand {
						&>[class^="ps-wi-"] {
							color: @icon-color;
						}
					}
				}

				&[data-content-type~="update"]>.ps-option-item-inner:before,
				&[data-content-type~="new"]>.ps-option-item-inner:before {
					inline-size: 70px;
					block-size: 20px;
					color: #fff;
					position: absolute;
					transform: rotate(-45deg);
					text-align: center;
					line-height: 20px;
					font-size: 9px;
					inset-inline-start: -20px;
					inset-block-start: 4px;
				}

				&[data-content-type~="new"]>.ps-option-item-inner:before {
					background-color: @red-color;
					content: 'NEW';
				}

				&[data-content-type~="update"]>.ps-option-item-inner:before {
					background-color: @blue-color;
					content: 'UPDATE';
				}

				.ps-option-label-wrap {
					display: flex;
					flex-direction: column;
					align-items: start;
					gap: 10px;

					.ps-option-links {
						display: flex;
						gap: 8px;
						align-items: center;
					}
				}

				.ps-option-label {
					font-size: 15px;
					font-weight: 500;
				}

				.ps-option-demo,
				.ps-option-video {
					color: #837f90;
					transition: all .2s ease-out;
					text-decoration: none;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					gap: 5px;
					font-size: 12px;

					i {
						font-size: 14px;
						color: currentColor;
					}

					&:hover {
						i {
							color: currentColor;
						}
					}
				}

				&.ps-widget-free {

					.ps-option-demo,
					.ps-option-video {
						&:hover {
							color: @green-color;
						}
					}
				}

				&.ps-widget-pro {

					.ps-option-demo,
					.ps-option-video {
						&:hover {
							color: @red-color;
						}
					}
				}

				.ps-option-item-inner {
					// overflow: hidden;
					position: relative;
					border: 1px solid @ps-dashboard-border-color;

					&.ps-option-group {
						background-color: @card-background;
						border: 1px solid @ps-dashboard-border-color;
					}

					.ps-option-item-inner {
						border: none;
					}
				}
			}

			.bdt-widget-filter-wrapper {
				position: relative;
				padding: 20px;
				background: #fff;
				overflow: hidden;
				z-index: 998;
				border-radius: 6px;
				border: 1px solid @ps-dashboard-border-color;
				margin-block-end: @ps-dashboard-gap-size;

				.bdt-filter-shape {
					position: absolute;
					inset-block-end: 0;
					inset-inline-start: 0;
					inline-size: 100%;
					block-size: 100%;
					z-index: -1;
					pointer-events: none;

					svg {
						position: absolute;
						inset-block-end: 0;
						inset-inline-start: 0;
						inline-size: 100%;
						block-size: 100%;
						transform: scale(1.5);
					}
				}

				ul {
					margin-block-start: 0;
					margin-block-end: 0;
				}

				.bdt-badge {
					block-size: 18px;
					inline-size: 18px;
					margin-inline-start: 5px;
					font-size: 10px;
				}

				.bdt-button-default {
					text-decoration: none;
					color: #444;
					background-color: #fff;
					transition: all .3s cubic-bezier(.3, .36, .25, 1);
					border: none;
					border-radius: 6px;
					outline: none;
					font-size: clamp(12px, 1vw, 14px);
					font-weight: 500;
					padding: 10px 12px;
					line-height: 18px;

					&:hover {
						background: @blue-color;
						color: #fff;
					}
				}

				ul.bdt-subnav li {
					margin: 0;
					padding: 0;
					&:first-child {
						padding-inline-start: 20px;
					}

					a {
						text-decoration: none;
						color: #444;
						transition: all .3s cubic-bezier(.3, .36, .25, 1);
						border: none;
						border-radius: 6px;
						outline: none;
						font-size: clamp(12px, .8vw, 14px);
						font-weight: 500;
						padding: 10px clamp(10px, .9vw, 10px);
						background: #e9f4ff;

						&:hover {
							background: @blue-color;
							color: #fff;
							outline: none;

							.bdt-badge {
								background-color: #118ab2;
							}
						}
					}

					&.bdt-active {
						a {
							background: @blue-color;
							color: #fff;
							box-shadow: none;
						}
					}


					&.ps-widget-free {
						a {
							background-color: @light-green-color;
							color: @green-color;

							&:hover {
								background-color: @green-color;
								color: #fff;
							}
						}

						&.bdt-active {
							a {
								background-color: @green-color;
								color: #fff;
								box-shadow: none;
							}
						}
					}

					&.ps-widget-pro {
						a {
							background-color: @light-red-color;
							color: @red-color;

							&:hover {
								background-color: @red-color;
								color: #fff;
								box-shadow: none;
							}
						}

						&.bdt-active {
							a {
								background-color: @red-color;
								color: #fff;
								box-shadow: none;
							}
						}
					}
				}

				.ps-widget-onoff {
					.ps-active-all-widget {
						background-color: @global-link-color;
						color: #fff;

						&:hover,
						&.bdt-active {
							background-color: #0c6fd1;
						}
					}

					.ps-deactive-all-widget {
						background-color: #c81b07;
						color: #fff;

						&.bdt-active,
						&:hover {
							background-color: #cf1c08;
						}
					}
				}

				.bdt-dropdown {
					box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
					border-radius: 3px;
					// border: 1px solid fade(@global-link-color, 30%);
					background-color: #fff;


					ul {
						li {
							a {
								font-size: 14px;

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

							&.bdt-active {
								a {
									color: #fff;
								}
							}
						}
					}

				}
			}

			.ps-options {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 15px;

				>.ps-option-item {
					margin-block-end: 0 !important;

					.ps-option-group {
						.ps-option-item {
							.ps-option-label {
								font-size: 14px !important;
							}
						}
					}

					.ps-option-item-inner {
						.bdt-input {
							block-size: 34px;
							border-radius: 6px !important;

							&:focus {
								background-color: #fff;
							}
						}

						input[type="text"] {
							border-radius: 3px;
						}

						textarea {
							inline-size: 100%;
						}
					}

					>.ps-option-item-inner {
						line-height: 1;
						padding: 18px 25px;
						border-radius: 6px;
						transition: all .3s cubic-bezier(.3, .36, .25, 1);

						&:hover {
							box-shadow: none;

							.ps-widget-count-text {
								color: #7c99b7;
							}

							[class^="ps-wi-"] {
								color: #052442;
							}
						}
					}
				}


			}
		}

		.bdt-search-active-wrap {
			.bdt-subnav {
				margin: 0;
			}

			.bdt-widget-search input {
				min-block-size: 40px;
				padding: 0 8px;
				border-color: rgba(30, 135, 240, 0.3);

				&:focus {
					border: 1px solid #1e87f0;
					outline: 0;
					box-shadow: 0 0 0 1px #1e87f0;
				}
			}
		}
	}

	.prime-slider-settings-save-btn {
		border-radius: 6px;
	}

	.ps-setting-save-btn {
		z-index: 99999 !important;
		position: relative;
	}


	/* Physical LTR so ::after + translateX() match; rtl:ignore stops rtlcss flipping this in ps-admin.rtl.css */
	/* rtl:ignore */
	.switch {
		position: relative;
		display: inline-block;
		direction: ltr;
		inline-size: 44px;
		block-size: 24px;
		background-color: rgba(0, 0, 0, 0.25);
		border-radius: 20px;
		transition: all 0.3s ease-out;
		overflow: hidden;
		cursor: pointer;
	}

	.switch::after {
		content: '';
		position: absolute;
		inline-size: 20px;
		block-size: 20px;
		border-radius: 20px;
		background-color: white;
		inset-block-start: 2px;
		inset-inline-start: 3px;
		transition: all .3s cubic-bezier(.24, .85, .58, 1);
	}

	input[type='checkbox']:checked+.switch::after {
		transform: translateX(18px);
	}

	input[type='checkbox']:checked+.switch {
		background-color: @global-link-color;
	}

	input[type='checkbox'] {
		position: absolute;
		inset-inline-start: -9999px;
	}

	.ps-widget-pro {
		input[type='checkbox']:checked+.switch {
			background-color: @red-color;
		}
	}

	.ps-widget-free {
		input[type='checkbox']:checked+.switch {
			background-color: @green-color;
		}
	}

	.ps-system-requirement {

		.check-system-status {
			font-size: 13px;

			li>div {
				padding-block-end: 5px;
				margin-block-end: 5px;
				border-block-end: 1px solid rgba(0, 0, 0, 0.1);
			}
		}

		.check-system-status .label1 {
			inline-size: 200px;
		}

		.check-system-status span {
			display: inline-block;
			line-height: 1.6;
		}

		.check-system-status .valid,
		.check-system-status .invalid {
			font-size: 15px;
			inline-size: 20px;
			block-size: 18px;
			margin-inline-start: 10px;
			margin-inline-end: 15px;
			vertical-align: middle;
			border-radius: 3px;
		}

		.check-system-status .invalid {
			background: red;
			color: #fff;
		}

		.check-system-status .valid {
			background: @green-color;
			color: #fff;

			i::before {
				margin-inline-start: -1px;
			}
		}

		.check-system-status i::before {
			font-size: 15px;
			line-height: 20px;
		}


	}

	.ps-no-result {
		display: none;
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%) !important;
	}

	.bdt-animation-shake {
		animation-name: bdt-shake !important;
		display: block !important;
	}

	.ps-code-editor-description {
		color: #0073aa;
		font-size: 13px;
		margin: 5px 0 10px 0;
		font-style: italic;
		opacity: 0.9;
	}

	.ps-code-section-header {
		margin-block-end: 20px;
		background: #fefefe;
		padding: 20px;
		border-radius: 6px;
		border: 1px solid rgba(123, 123, 123, 0.09);
	}

	.ps-section-title {
		color: #23282d;
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 8px 0;
		padding: 0;
	}

	.ps-section-description {
		color: #666;
		font-size: 14px;
		margin: 0;
		line-height: 1.5;
	}

	.ps-page-exclusion-wrapper {
		border: 1px solid @ps-dashboard-border-color;
		border-radius: 4px;
		padding: 20px;
		margin-block-end: 20px;
	}

	.ps-exclusion-label {
		display: block;
		font-weight: 600;
		margin-block-end: 8px;
		color: #23282d;
	}

	.ps-page-select {
		inline-size: 100%;
		min-block-size: 120px;
		max-block-size: 200px;
		padding: 8px;
		border: 1px solid @ps-dashboard-border-color;
		border-radius: 4px;
		background: #fff;
		font-size: 14px;
		max-inline-size: 100%;
	}

	.ps-page-select option {
		padding: 4px 8px;
	}

	.ps-exclusion-help {
		color: #666 !important;
		font-size: 14px !important;
		font-style: italic !important;
		margin: 12px 0 0 0 !important;
		line-height: 1.4 !important;
	}

	.ps-dashboard-nav-container {
		position: relative;
		z-index: 98;

		&.bdt-sticky-fixed {
			z-index: 998;
		}
	}

	.bdt-tab-container {
		position: relative;
	}

	#prime_slider_elementor_extend_page,
	#prime_slider_other_settings_page,
	#prime_slider_third_party_widget_page,
	#prime_slider_active_modules_page {
		.ps-option-item-inner {
			overflow: hidden;
		}
	}

	#prime_slider_other_settings_page {
		.ps-options {
			>.ps-option-item {
				>.ps-option-item-inner {
					// padding: 35px;

					>label>.ps-option-label {
						font-weight: 700;
						font-size: 22px;
					}

					.description {
						margin-block-start: 20px;

					}
				}
			}
		}

	}

	#prime_slider_elementor_extend_page,
	#prime_slider_other_settings_page {
		.ps-widget-count-text {
			display: none;
		}
	}

	#prime_slider_api_settings_page {

		.ps-options {
			>.ps-option-item {
				border: 1px solid rgba(123, 123, 123, 0.09);
				border-radius: 6px;
				background: #fefefe;

				>.ps-option-item-inner {
					padding: 35px;
					border: 0;
					background: transparent;
					break-inside: avoid-column;

					a i {
						font-size: 18px;
					}

					.ps-option-item {
						margin-block-start: 10px;

						&:nth-last-child(1) {
							margin-block-start: 0;
						}
					}
				}
			}
		}

		input,
		textarea {
			border-color: #ddd;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="color"]:focus,
		input[type="date"]:focus,
		input[type="datetime"]:focus,
		input[type="datetime-local"]:focus,
		input[type="email"]:focus,
		input[type="month"]:focus,
		input[type="number"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="time"]:focus,
		input[type="url"]:focus,
		input[type="week"]:focus,
		input[type="checkbox"]:focus,
		input[type="radio"]:focus,
		select:focus,
		textarea:focus {
			border-color: @blue-color;
			box-shadow: none;
		}

		.ps-option-video {
			position: absolute;
			inset-inline-end: 25px;
			inset-block-start: 20px;
			background: #e9f4ff;
			padding: 8px;
			border-radius: 6px;
		}

		.ps-option-label {
			display: block;
			margin-block-end: 25px;
			font-size: 18px;
		}

		.ps-option-group {
			.ps-option-label {
				margin-block-end: 15px;
			}
		}

		p.description {
			font-size: 12px !important;
			color: #999;
			margin-block-start: 10px;

			a {
				color: #888;
			}
		}
	}

	#prime_slider_extra_options_page {
		.ps-white-label-options {
			.ps-option-item-inner {
				background: #fefefe;
				padding: 30px;
			}
		}

	}

	.ps-dashboard-panel {
		.ps-dashboard-others-plugin {
			display: flex;
			flex-direction: column;
			gap: @ps-dashboard-gap-size;

			.bdt-card {
				flex-direction: column;
				gap: 20px;
			}
		}


		.bdt-card {
			border-radius: 6px;
			transition-property: box-shadow, color;
			transition-duration: .3s;
			transition-timing-function: cubic-bezier(.3, .36, .25, 1);

			a {
				text-decoration: none;

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

			p {
				margin-block-start: 0;
			}

			.ps-count-canvas-wrap .ps-feature-title {
				margin-block-end: 5px;
			}

			.ps-count-wrap {
				flex: none;
			}

			.ps-widget-count {
				color: #a1a8ad;
				font-size: 12px;
				line-height: 1.7;
				text-transform: uppercase;
			}

			.bdt-others-plugin-content {
				inline-size: 100%;
				gap: 20px;
				flex-direction: column;
				align-items: start;

				.ps-feature-title {
					font-weight: 500;
				}

				.bdt-plugin-logo-wrap {
					gap: 15px;
				}

				img {
					inline-size: clamp(50px, 8vw, 70px);
					block-size: auto;
					vertical-align: middle;
					// border-radius: 6px;
				}

				.ps-feature-title {
					margin-block-end: 0;
				}

				p {
					margin: 0 0 10px 0;
					font-size: 15px;
					line-height: 1.5;
					color: #656a71;
					max-inline-size: 600px;
					font-weight: 300;
				}
				span.active-installs {
					font-size: 14px;
					font-weight: 500;
					color: #9C27B0;
					.installs-count {
						color: #9C27B0;
					}
				}
				.bdt-others-plugin-updated {
					color: #656a71;
				}
			}

			.bdt-others-plugins-link {
				display: flex;
				flex-wrap: wrap;
				justify-content: start;
				gap: 8px;
				inline-size: 100%;
				flex: 1;
				min-inline-size: 300px;

				.bdt-dashboard-sec-btn {
					padding: 9px 20px !IMPORTANT;
				}
				.bdt-button.bdt-button-success.bdt-disabled {
					color: #FC6A2A;
				}
			}

			.bdt-others-plugin-user-wrap {
				gap: 10px;
				flex-wrap: wrap;

				.bdt-others-plugin-user {
					color: #373333;
					padding: 4px 6px;
					border-radius: 6px;
					font-size: 10px;
					font-weight: 700;
					box-shadow: 0 2px 8px rgba(76, 89, 98, 0.2);
					text-transform: uppercase;
					line-height: 1;
					border: 1px solid #dcd8e8;
				}
			}

			.ps-dashboard-compare-section-buttons {
				display: flex;
				align-items: center;
			}

			.bdt-button {
				color: #fff;
				border-radius: 6px;
				transition: all .3s ease;

				line-height: normal;
				font-size: clamp(12px, 0.8vw, 14px);
				font-weight: 600;
				padding: clamp(10px, 1vw, 11px) clamp(10px, 1vw, 20px);



				&.bdt-welcome-button {
					color: #fff;
					background: linear-gradient(to right, #FE506C, #FC6A2A);
					border: 0;
					padding: 13px 20px;

					&:hover {
						background: linear-gradient(to right, #FC6A2A, #FE506C);
					}
				}

				&.bdt-dashboard-sec-btn {
					color: #FC6A2A;
					border: 2px solid #FC6A2A;

					&:hover {
						border-color: #FE506C;
						color: #FE506C;
					}
				}

				&.bdt-btn-red {
					background: @light-red-color;
					color: @red-color;

					&:hover {
						background: @red-color;
						color: #fff;
						box-shadow: none;
					}
				}

				&.bdt-btn-green {
					background: @light-green-color;
					color: @green-color;


					&:hover {
						background: @green-color;
						color: #fff;
					}
				}

				&.bdt-btn-blue {
					background: @blue-color;
					color: #fff;

					&:hover {
						background: #097396;
						color: #fff;
					}
				}

				&.bdt-btn-grey {
					background-color: #e3e8eb;
					color: #1d2327;

					&:hover {
						background: #1d2327;
						color: #fff;
					}
				}

			}

			.ps-feature-title {
				color: #333;
				font-weight: 700;
				font-size: clamp(18px, 1vw, 20px);
				margin-block-end: 20px;
				padding: 0;
			}

			.ps-dashboard-welcome-title {
				font-size: 30px;
			}

			.ps-dashboard-compare-title,
			.ps-dashboard-template-quick-title {
				font-size: 24px;
			}


			&.bdt-card-green {
				background: rgba(173, 200, 101, 0.03);
				box-shadow: 0 0 0 1px rgba(173, 200, 101, 0.3);
			}

			&.bdt-card-red {
				color: #777;
				box-shadow: 0 0 0 1px rgba(255, 65, 77, 0.3);
			}

			&.bdt-card-blue {
				color: #777;
				box-shadow: 0 0 0 1px @blue-color;
			}

			.bdt-accordion {
				padding-block-start: 5px;

				.bdt-accordion-title {
					font-size: 16px;
					padding: 10px 20px;
					background: rgba(255, 65, 77, 0.1);
					border-radius: 6px;
					font-weight: 400;
					letter-spacing: 0.3px;

					&:hover,
					&:focus {
						box-shadow: 0 0 0 1px rgba(255, 65, 77, 0.3);
					}
				}

				.bdt-open {
					.bdt-accordion-title {
						color: #000;
						background: rgba(255, 65, 77, 0.3);
					}
				}

				.bdt-accordion-content {
					padding-block: 0;
				padding-inline: 20px;
				}
			}

			.check-system-status {
				margin-block-start: 20px;
			}

			&.ps-video-tutorial {
				display: flex;
				flex-direction: column;

				.bdt-list {
					margin-block-end: 20px;
					flex-grow: 1;
				}

				.bdt-list-divider>li:nth-child(n+2) {
					border-block-start: 1px solid rgba(173, 200, 101, .3);
				}

				.ps-link-title {
					margin: 0;
					font-size: 14px;
					color: rgba(173, 200, 101, .7);

					&:hover {
						color: @green-color;
					}
				}

				.bdt-video-btn {
					font-weight: 500;
					color: #444;
					border: 1px solid @green-color;
					display: inline-block;
					inline-size: 145px;
					padding: 5px;
					text-align: center;
					border-radius: 3px;

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

		.ps-dashboard-footer-item {
			text-decoration: none;
			transition: all 0.3s ease;
			transform: translateY(0);
			position: relative;

			.ps-feature-title {
				font-size: 18px;
				margin: 0 0 10px;
			}

			.ps-dashboard-footer-item-icon {
				display: inline-block;
				padding: 10px;
				border-radius: 6px;
				border: 1px solid #f3f3f3;
				margin-block-end: 18px;
				background: #f5fffc;
				color: #FC6A2A;
			}

			i {
				font-size: 18px;
				inline-size: 18px;
				block-size: 18px;
			}

			&:after {
				content: "\f504";
				font-family: dashicons;
				position: absolute;
				inset-block-start: 15px;
				inset-inline-end: 15px;
				font-size: 20px;
				color: #FC6A2A;
				opacity: 0;
				transition: all 0.3s ease;
			}

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 10px 20px rgba(73, 221, 179, 0.065);
				border-color: #FC6A2A;

				&:after {
					opacity: 1;
					transform: translateX(5px);
				}

				.ps-dashboard-footer-item-icon {
					animation: ps-footer-icon-bounce 0.5s ease-in-out;
				}
			}
		}

		@keyframes ps-footer-icon-bounce {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-5px);
			}
		}



		.ps-dashboard-support-section {
			margin-block-start: 30px;

			.ps-feature-title {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-block-end: 10px;

				i {
					font-size: 20px;
					color: #FC6A2A;
					margin: 0;
					padding: 0;
					border: 0;
					background: none;
				}
			}
		}
	}


	#prime_slider_active_modules_page .checkbox,
	#prime_slider_third_party_widget_page .checkbox {
		margin-block-start: 5px;
	}


	.prime-slider-3pp-install,
	.prime-slider-3pp-active,
	.prime-slider-3pp-download {
		text-decoration: none;
		color: @red-color;
		line-height: normal;
		background-color: #eee;
		border-radius: 100px;
		padding: 5px;
		display: inline-flex;

		&:hover {
			color: #fb6094;
		}
	}

	.prime-slider-footer-info {
		background-color: @navyblue-color;
		color: #90b6c3;
		border-radius: 6px;
		box-sizing: border-box;
		padding: 30px 40px;
		background-image: url("../images/shiny-overlay.svg");
		background-position: top right;
		background-repeat: no-repeat;

		p {
			font-size: 14px !important;
			color: #90b6c3 !important;
			text-align: center;
			margin-block-start: 25px;

		}

		a {
			color: #e5f4f9;
		}
	}

	.bdt-admin-alert {
		background-color: #fff3da;
		border-radius: 2px;
		padding: 10px 20px;
		box-sizing: border-box;
		margin-block-start: 30px;
	}


	.ps-dashboard-divider {
		inline-size: 100%;
		margin-block-start: 50px;
		margin-block-end: 50px;
		min-block-size: 20px;
		background-size: 20px 20px;
		background-repeat: repeat-x;
	}

	.ps-dashboard-panel {
		position: relative;
	}

	.ps-dashboard-panel .dashicons.dashicons-yes {
		color: #FC6A2A;
	}

	.ps-dashboard-panel .dashicons.dashicons-no {
		color: #FF0000;
	}

	.ps-dashboard-panel .dashicons.dashicons-heart {
		color: #EA355F;
	}

	.ps-dashboard-panel .ps-comparision {
		padding-inline-start: 0;
	}

	.ps-dashboard-panel h1 {
		font-weight: 700;
	}

	.ps-purchase-button a {
		color: #ffffff;
		border-style: none;
		border-radius: 4px;
		box-shadow: 0px 10px 40px 0px rgba(254, 80, 108, 0.29);
		padding-block: 18px;
		padding-inline: 45px;
		font-weight: 700;
		cursor: pointer;
		display: inline-block;
		text-transform: uppercase;
		font-size: 14px;
		outline: none;
		position: relative;
		transition: all .3s ease-out;
		text-align: center;
		overflow: hidden;
		background-color: transparent;
		background-image: linear-gradient(145deg, #FE506C 0%, #FC6A2A 100%);
		text-decoration: none;
		letter-spacing: 1px;
	}

	.ps-purchase-button a:hover {
		background-image: linear-gradient(145deg, #FC6A2A 0%, #FE506C 100%);
		box-shadow: 0px 10px 40px 0px rgba(254, 80, 108, 0.46);
	}


	/* license page style */

	#prime_slider_license_settings_page {
		.el-license-container {
			p.submit {
				margin: 0;
				padding: 0;
			}
		}

		h3.el-license-title,
		.bdt-subsite-license-management-title {
			font-size: 22px;
			margin-block-start: 0;
			margin-block-end: 50px;
		}

		ol {
			margin-block-end: 20px;
		}

		.bdt-ps-license-field {
			display: block;
			margin-block-end: 15px;
		}

		.bdt-ps-license-field input {
			font-size: 200%;
			padding: 0 10px;
			display: block;
			margin-block-start: 10px;
			border-radius: 6px;
			border-color: #ddd;
			inline-size: 100%;
			max-inline-size: 650px;
		}

		.bdt-ps-license-field label {
			display: inline-block;
			margin-block-end: 5px;
		}

		.bdt-ps-license-active-btn {
			margin-block-start: 25px;
		}

		.prime-slider-license-info {
			font-size: 14px;
			line-height: 24px;
			max-inline-size: 850px;
			margin-block-end: 50px;

			.license-info-title {
				inline-size: 150px;
				display: inline-block;
				position: relative;
				padding-inline-end: 5px;
				margin-inline-end: 10px;
			}

			.license-info-title:after {
				content: ':';
				position: absolute;
				inset-inline-end: 2px;
			}

			.license-valid,
			.license-invalid {
				padding: 4px 8px;
				color: #fff;
				background-color: @green-color;
				border-radius: 3px;
				font-size: 14px;
			}

			.license-invalid {
				background-color: #f44336;
			}

			.license-key {
				font-weight: 700;
				opacity: 0.8;
			}
		}

		.button {
			padding: 14px 16px;
			font-size: 14px;
			block-size: auto;
			border: 0;
			border-radius: 6px;
			min-block-size: auto;
			font-weight: 600;
			line-height: 1;
		}

		.button-primary {
			background: #1e87f0;
			color: #fff;
			text-decoration: none;
			text-shadow: none;
			box-shadow: none;

			&:active,
			&:hover {
				background: #0e6dcd;
			}
		}


		.ps-license-subsite-header {
			// text-align: center;
			
			display: flex;
			align-items: center;
			gap: 14px;
			// padding: 20px;
		}

		.ps-feature-title {
			font-size: 24px;
			font-weight: 600;
			margin: 0;
			padding: 0;
		}

		.ps-status-icon {
			background: #3ab981;
			display: inline-block;
			padding: 10px;
			border-radius: 50%;
			svg {
				fill: #fff;
				inline-size: 24px;
				block-size: 24px;
				display: block;
			}
		}

		.ps-license-status-success {
			margin-block-end: 20px;
			padding: 20px;
			border-radius: 5px;
			background: rgba(78, 255, 177, 0.071);
			border-inline-start: 4px solid #10b981;
			margin-block-start: 30px;
		}

		.ps-license-status-success h3,
		.ps-license-status-warning h3 {
			margin: 0 0 20px;
			font-size: 20px;
		}

		.ps-license-status-warning {
			margin-block-end: 20px;
			padding: 15px;
			border-radius: 5px;
			background: #fffbeb;
			border-inline-start: 4px solid #f59e0b;
		}

		.ps-license-details,
		.ps-network-info {
			margin: 15px 0;
			font-size: 16px;
			ul {
				margin: 10px 0;
				padding-inline-start: 0;
				list-style: inside;
				font-size: 14px;;
			}

			li {
				margin: 8px 0;
			}
		}

		.ps-license-instructions {
			margin: 15px 0;

			ol {
				margin: 10px 0;
				padding-inline-start: 20px;

				li {
					margin: 8px 0;
				}
			}
		}

		.ps-admin-actions {
			margin-block-start: 20px;
			padding-block-start: 15px;
		}

		.license-valid {
			color: #10b981;
			font-weight: bold;
		}

		.bdt-subsite-license-management-title {
			gap: 10px;
		}

		.bdt-actions-buttons {
			display: flex;
			align-items: center;
			gap: 7px;
			flex-wrap: wrap;
		}

		// subsite license management
		.bdt-subsite-license-management {
			.bdt-actions-buttons {
				.bdt-button {
					padding: 10px 18px;
					font-size: 12px;
					line-height: 1.4;
					border-radius: 6px;
					font-weight: 600;
				}
			}
			.bdt-subsite-license-management-table {
				border-radius: 6px;
				overflow: hidden;
			}
			.wp-list-table {

				border-collapse: collapse;
				thead td, thead th {
					border-block-end: 1px solid rgba(0, 0, 0, 0.059);
				}
				td, th {
					padding: 14px 16px;
					border: 1px solid rgba(0, 0, 0, 0.059);
				}
				th {
					border-block-end: 1px solid rgba(0, 0, 0, 0.1);
				}

				.bdt-badge {
					block-size: 24px;
				}

				tbody {
					tr {
						td {
							&:nth-last-child(1) {
								a {
									background: rgba(65, 75, 255, 0.251);
									border: 1px solid rgba(65, 75, 255, 0.251);
									color: #414bff;
									&:hover {
										background: rgba(54, 64, 243, 0.325);
									}
								}
							}
							
						}
					}
				}
				.striped>tbody>:nth-child(odd), 
				ul.striped>:nth-child(odd),
				tbody>tr:nth-child(odd) {
					background-color: transparent;
				}
			}

		}
	}

	.ps-widget-count-text {
		font-size: 11px;
		color: #b7b7b7;
		margin-block-start: 7px;
		display: block;
		text-transform: uppercase;
	}

	.ps-go-pro {
		font-weight: bold;
		color: #f44336;
		text-shadow: 1px 1px 1px #eee;
	}

	// get pro css

	#bdt-prime_slider_get_pro {
		letter-spacing: 1px;
		overflow: hidden;
		color: #fff;
		background: linear-gradient(to right, #FE506C, #FC6A2A);
		margin-block: 16px;
		margin-inline: 30px;
		border-radius: 6px;
		justify-content: center;
		&:after {
			display: none;
		}
	}

	/* Start Custom CSS and JS Styles */
	.ps-custom-code-section {
		.ps-code-row {
			margin-block-end: 20px;
		}

		.CodeMirror-placeholder {
			opacity: 0.5;
		}

		.ps-code-editor-wrapper {

			.ps-code-editor-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin: 0 0 15px 0;
				padding-block-end: 10px;
				border-block-end: 2px solid #f0f0f0;
			}

			.ps-code-editor {
				inline-size: 100%;
				min-block-size: 200px;
				font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
				font-size: 13px;
				line-height: 1.5;
				border: 1px solid @ps-dashboard-border-color;
				border-radius: 4px;
				padding: 15px;
				color: #333;
				resize: vertical;
				transition: border-color 0.3s ease, box-shadow 0.3s ease;
				background: #fefefe;

				&:focus {
					border-color: @blue-color;
					box-shadow: 0 0 0 1px @blue-color;
					outline: none;
					background: #fff;
				}

				&::placeholder {
					color: #999;
					font-style: italic;
				}
			}
		}

		.ps-code-save-section {
			padding: 20px 0;
			border-block-start: 1px solid #f0f0f0;

			.bdt-button {
				color: #FC6A2A;
				padding: 16px 24px;
				font-size: clamp(12px, 1vw, 14px);
				font-weight: 600;
				border-radius: 6px;
				border: none;
				cursor: pointer;
				transition: all 0.3s ease;
				display: inline-flex;
				align-items: center;
				gap: 8px;
				line-height: normal;
				border: 2px solid #FC6A2A;

				.dashicons {
					font-size: 16px;
					inline-size: 16px;
					block-size: 16px;
					line-height: 1;
				}

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
				}

				&:active {
					transform: translateY(0);
				}

				&.bdt-btn-blue {
					background: @blue-color;
					color: #fff;

					&:hover {
						background: #097396;
					}
				}

				&.bdt-btn-grey {
					background: #e3e8eb;
					color: #1d2327;

					&:hover {
						background: #1d2327;
						color: #fff;
					}
				}
			}
		}

		.ps-code-message {
			.bdt-alert {
				border-radius: 6px;
				padding: 15px;
				position: relative;

				&.bdt-alert-success {
					background-color: #d4edda;
					border: 1px solid #c3e6cb;
					color: #155724;
				}

				&.bdt-alert-error {
					background-color: #f8d7da;
					border: 1px solid #f5c6cb;
					color: #721c24;
				}

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

				.bdt-alert-close {
					position: absolute;
					inset-block-start: 5px;
					inset-inline-end: -5px;
					background: none;
					border: none;
					font-size: 18px;
					cursor: pointer;
					opacity: .6;

					&:hover {
						opacity: 1;
					}
				}
			}
		}
	}


	// Enhanced code editor styles
	.ps-code-editor {
		&.scrolling {
			border-color: @blue-color;
			box-shadow: 0 0 0 1px fade(@blue-color, 30%);
		}

		// Syntax highlighting simulation
		&:focus {
			&::selection {
				background-color: fade(@blue-color, 20%);
			}
		}
	}

	// Button loading state
	.bdt-button {
		&:disabled {
			opacity: 0.7;
			cursor: not-allowed;

			&:hover {
				transform: none !important;
				box-shadow: none !important;
			}
		}
	}

	// Custom scrollbar for code editors (WebKit requires physical width on ::-webkit-scrollbar)
	.ps-code-editor {
		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 4px;

			&:hover {
				background: #a8a8a8;
			}
		}
	}


	.ps-dashboard-nav-container-inner {
		position: relative;
		background: #fff;
		z-index: 1;
		border-radius: 6px;
		border: 1px solid @ps-dashboard-border-color;
		padding: 20px 0;
		overflow: hidden;
		min-block-size: 100vh;

		&.bdt-sticky-fixed {
			inset-block-start: 115px !important;
		}

		.ps-nav-elements {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: 100%;
			pointer-events: none;
			z-index: 0;

			.ps-nav-element {
				position: absolute;
				display: block;

				&.ps-nav-circle {
					inline-size: 180px;
					block-size: 180px;
					border-radius: 50%;
					background: linear-gradient(45deg, rgba(73, 221, 180, 0.05), rgba(73, 221, 180, 0.1));
					inset-block-start: -90px;
					inset-inline-end: -90px;
				}

				&.ps-nav-dots {
					inset-block-end: 40px;
					inset-inline-start: 20px;
					inline-size: 60px;
					block-size: 60px;
					background-image: radial-gradient(rgba(73, 221, 180, 0.15) 2px, transparent 2px);
					background-size: 10px 10px;
				}

				&.ps-nav-line {
					inline-size: 100px;
					block-size: 2px;
					background: linear-gradient(to right, rgba(73, 221, 180, 0), rgba(73, 221, 180, 0.2));
					transform: rotate(-45deg);
					inset-block-end: 100px;
					inset-inline-end: 20px;
				}

				&.ps-nav-square {
					inline-size: 40px;
					block-size: 40px;
					border: 2px solid rgba(73, 221, 180, 0.1);
					inset-block-start: 40px;
					inset-inline-start: 30px;
					transform: rotate(15deg);
				}

				&.ps-nav-triangle {
					inline-size: 0;
					block-size: 0;
					border-inline-start: 25px solid transparent;
					border-inline-end: 25px solid transparent;
					border-block-end: 40px solid rgba(73, 221, 180, 0.08);
					inset-block-start: 60%;
					inset-inline-end: 40px;
					transform: rotate(15deg);
				}

				&.ps-nav-plus {
					inline-size: 30px;
					block-size: 30px;
					inset-block-start: 30%;
					inset-inline-start: 40px;

					&:before,
					&:after {
						content: '';
						position: absolute;
						background: rgba(73, 221, 180, 0.15);
					}

					&:before {
						inline-size: 100%;
						block-size: 2px;
						inset-block-start: 50%;
						transform: translateY(-50%);
					}

					&:after {
						inline-size: 2px;
						block-size: 100%;
						inset-inline-start: 50%;
						transform: translateX(-50%);
					}
				}

				&.ps-nav-wave {
					inline-size: 100px;
					block-size: 20px;
					inset-block-end: 30px;
					inset-inline-end: 40px;
					background: linear-gradient(45deg, rgba(73, 221, 180, 0) 45%, rgba(73, 221, 180, 0.1) 50%, rgba(73, 221, 180, 0) 55%);
					background-size: 15px 15px;
					transform: rotate(-10deg);
				}
			}
		}

		.bdt-dashboard-navigation {
			position: relative;
			z-index: 1;
		}
	}

	.bdt-widget-filter-wrapper {
		position: relative;
		background: #fff;
		overflow: hidden;
		z-index: 98;
		border-radius: 6px;
		border: 1px solid @ps-dashboard-border-color;

		&.bdt-sticky-fixed {
			z-index: 998;
			border-start-start-radius: 0 !important;
			border-start-end-radius: 0 !important;
			box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);


			.ps-filter-elements {
				opacity: 0.5;
				transition: opacity 0.3s ease;
			}

			&:hover .ps-filter-elements {
				opacity: 1;
			}
		}

		.ps-used-unused-widgets {
			margin-inline-start: 10px;

			li {
				&:first-child {
					padding-inline-start: 0 !important;
				}
			}
		}

		.ps-filter-elements {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: 100%;
			pointer-events: none;
			z-index: 1;

			.ps-filter-element {
				position: absolute;
				display: block;

				&.ps-filter-circle {
					inline-size: 140px;
					block-size: 140px;
					border-radius: 50%;
					background: linear-gradient(135deg, rgba(@shape-primary-color, 0.05), rgba(@shape-secondary-color, 0.08));
					inset-block-start: -70px;
					inset-inline-end: 5%;
					animation: floatingShape 6s ease-in-out infinite;
				}

				&.ps-filter-dots {
					inset-block-end: 10px;
					inset-inline-start: 10px;
					inline-size: 70px;
					block-size: 35px;
					background-image: radial-gradient(rgba(@shape-primary-color, 0.15) 2px, transparent 2px);
					background-size: 8px 8px;
					animation: fadeInOut 4s ease-in-out infinite;
				}

				&.ps-filter-wave {
					inline-size: 120px;
					block-size: 20px;
					inset-block-end: 25px;
					inset-inline-end: 10%;
					background: repeating-linear-gradient(45deg,
							rgba(@shape-primary-color, 0) 0px,
							rgba(@shape-primary-color, 0.1) 2px,
							rgba(@shape-primary-color, 0) 4px);
					transform: rotate(-15deg);
					animation: waveMotion 3s ease-in-out infinite;
				}

				&.ps-filter-hexagon {
					inset-block-start: 20%;
					inset-inline-start: 15px;
					inline-size: 35px;
					block-size: 20px;
					background: rgba(@shape-secondary-color, 0.1);
					position: absolute;
					transform: rotate(30deg);

					&:before,
					&:after {
						content: '';
						position: absolute;
						inline-size: 0;
						block-size: 0;
						border-inline-start: 18px solid transparent;
						border-inline-end: 18px solid transparent;
					}

					&:before {
						inset-block-end: 100%;
						border-block-end: 10px solid rgba(@shape-secondary-color, 0.1);
					}

					&:after {
						inset-block-start: 100%;
						border-block-start: 10px solid rgba(@shape-secondary-color, 0.1);
					}
				}

				&.ps-filter-zigzag {
					inset-block-start: 40%;
					inset-inline-end: 20px;
					inline-size: 50px;
					block-size: 25px;
					background: linear-gradient(45deg,
							transparent 45%,
							rgba(@shape-primary-color, 0.1) 45%,
							rgba(@shape-primary-color, 0.1) 55%,
							transparent 55%);
					background-size: 10px 10px;
					animation: zigzagFloat 5s ease-in-out infinite;
				}
			}
		}
	}


	#ps-extra-options-tab-content {
		margin-block-start: 30px;
	}

	.ps-extra-options-tabs {
		.bdt-tab {
			border-block-end: 2px solid #f1f1f1;
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			gap: 20px;

			li {
				margin: 0;
				padding: 0;
				display: inline-block;

				a {
					padding: 15px 0;
					display: inline-block;
					font-size: 15px;
					font-weight: 500;
					color: #666;
					text-decoration: none;
					position: relative;
					transition: all 0.3s ease;

					&:after {
						content: '';
						position: absolute;
						inset-block-end: -2px;
						inset-inline-start: 0;
						inline-size: 0;
						block-size: 2px;
						background: #FC6A2A;
						transition: inline-size 0.3s ease;
					}

					&:hover {
						color: #333;
					}
				}

				&.bdt-active {
					a {
						color: #FC6A2A;

						&:after {
							inline-size: 100%;
						}
					}
				}
			}
		}
	}

	// .ps-dashboard-wrapper .ps-dashboard-panel .bdt-card {
	// 	padding: 25px;
	// }


	.ps-option-page .bdt-widget-filter-wrapper ul {
		display: none;
		gap: 10px;
	}

	.ps-white-label-options {
		.slider:before {
			block-size: 18px;
			inline-size: 18px;
			inset-inline-start: 2px;
			inset-block-end: 1px;
		}

		.switch:after {
			display: none;
		}

		input:checked+.slider:before {
			transform: translateX(18px);
		}
	}

	/* Start Custom CSS and JS Styles */
	.ps-custom-code-section {
		// padding: 20px;

		.ps-code-row {
			margin-block-end: 20px;
		}

		.ps-code-editor-wrapper {
			.ps-code-editor-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin: 0 0 15px 0;
				padding-block-end: 10px;
				border-block-end: 2px solid #f0f0f0;
			}

			.ps-codemirror-editor-container {
				position: relative;

				.ps-code-editor {
					min-block-size: 200px;
					inline-size: 100%;
					font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
					font-size: 13px;
					line-height: 1.5;
					border: 1px solid #ddd;
					border-radius: 4px;
					background: #fefefe;
				}

				// CodeMirror styling
				.CodeMirror {
					min-block-size: 200px;
					inline-size: 100% !important;
					border: 1px solid #ddd;
					border-radius: 4px;
					font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
					font-size: 13px;
					line-height: 1.5;
					background: #fff;
					box-sizing: border-box;
					display: block;

					&.CodeMirror-focused {
						border-color: @blue-color;
						box-shadow: 0 0 0 1px fade(@blue-color, 25%);
					}

					.CodeMirror-scroll {
						min-block-size: 200px;
						padding: 0;
						box-sizing: border-box;
					}

					.CodeMirror-lines {
						padding: 4px 0;
						cursor: text;
					}

					.CodeMirror-gutters {
						border-inline-end: 1px solid #ddd;
						background: #fefefe;
						white-space: nowrap;
						min-inline-size: 40px;
					}

					.CodeMirror-linenumber {
						color: #999;
						padding: 0 8px;
						white-space: nowrap;
						text-align: end;
						min-inline-size: 20px;
					}

					.CodeMirror-line {
						padding: 0 4px;
						line-height: inherit;
					}

					.CodeMirror-cursor {
						border-inline-start: 1px solid #333;
						block-size: auto;
					}

					// Ensure proper text rendering
					.CodeMirror-code {
						font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
						font-size: 13px;
						outline: none;
					}

					// Fix for hidden container issues
					&.CodeMirror-wrap {
						inline-size: 100%;
					}

					// Ensure proper height calculation
					&.CodeMirror-empty {
						.CodeMirror-scroll {
							min-block-size: 200px;
						}
					}
				}
			}
		}

		.ps-code-save-section {
			padding: 20px 0;
			border-block-start: 1px solid #f0f0f0;

			.bdt-button {
				padding: 12px 24px;
				font-size: 14px;
				font-weight: 500;
				border-radius: 5px;
				border: none;
				cursor: pointer;
				transition: all 0.3s ease;
				display: inline-flex;
				align-items: center;
				gap: 8px;

				.dashicons {
					font-size: 16px;
					line-height: 1;
				}

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
				}

				&:active {
					transform: translateY(0);
				}

				&.bdt-btn-blue {
					background: @blue-color;
					color: #fff;

					&:hover {
						background: #097396;
					}
				}

				&.bdt-btn-grey {
					background: #e3e8eb;
					color: #1d2327;

					&:hover {
						background: #1d2327;
						color: #fff;
					}
				}
			}
		}

		.ps-code-message {
			.bdt-alert {
				border-radius: 5px;
				padding-block-start: 15px;
				padding-inline-end: 40px;
				padding-block-end: 15px;
				padding-inline-start: 15px;
				position: relative;

				&.bdt-alert-success {
					background-color: #d4edda;
					border: 1px solid #c3e6cb;
					color: #155724;
				}

				&.bdt-alert-error {
					background-color: #f8d7da;
					border: 1px solid #f5c6cb;
					color: #721c24;
				}

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


	// Enhanced code editor styles
	.ps-code-editor {
		&.scrolling {
			border-color: @blue-color;
			box-shadow: 0 0 0 1px fade(@blue-color, 30%);
		}

		// Syntax highlighting simulation
		&:focus {
			&::selection {
				background-color: fade(@blue-color, 20%);
			}
		}
	}

	// Button loading state
	.bdt-button {
		&:disabled {
			opacity: 0.7;
			cursor: not-allowed;

			&:hover {
				transform: none !important;
				box-shadow: none !important;
			}
		}
	}

	// Custom scrollbar for code editors (WebKit requires physical width on ::-webkit-scrollbar)
	.ps-code-editor {
		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 4px;

			&:hover {
				background: #a8a8a8;
			}
		}
	}


	/* Start White Label Styles */
	#prime_slider_extra_options_page {
		.switch {
			position: relative;
			display: inline-block;
			inline-size: 46px;
			block-size: 24px;
		}

		.switch input {
			opacity: 0;
			inline-size: 0;
			block-size: 0;
		}

		.slider {
			position: absolute;
			cursor: pointer;
			inset-block-start: 0;
			inset-inline-start: 0;
			inset-inline-end: 0;
			inset-block-end: 0;
			background-color: #ccc;
			-webkit-transition: .4s;
			transition: .4s;
			border-radius: 34px;
		}

		.slider:before {
			position: absolute;
			content: "";
			block-size: 20px;
			inline-size: 20px;
			inset-inline-start: 3px;
			inset-block-end: 2px;
			background-color: white;
			-webkit-transition: .4s;
			transition: .4s;
			border-radius: 50%;
		}

		input:checked+.slider {
			background-color: #2196F3;
		}

		input:focus+.slider {
			box-shadow: 0 0 1px #2196F3;
		}

		input:checked+.slider:before {
			transform: translateX(22px);
		}
	}

	/* White Label Option Styles */

	.ps-option-item-inner {
		background: #fff;
		border-radius: 8px;
	}

	.ps-option-title {
		margin: 0 0 10px 0;
		font-size: 18px;
		font-weight: 600;
		color: #1e1e1e;
	}

	.ps-option-description {
		margin: 0;
		color: #666;
		font-size: 14px;
	}

	.prime-slider-white-label-save-btn,
	.prime-slider-custom-code-save-btn,
	.prime-slider-custom-code-reset-btn {
		padding: 3px 30px;
		color: #fff;
		background: linear-gradient(to right, #FE506C, #FC6A2A);
		border: 0;
		border-radius: 6px;
	}
	.prime-slider-custom-code-save-btn {
		margin-inline-end: 12px;
		&:hover {
			background: linear-gradient(to right, #FC6A2A, #FE506C);
		}
	}
	.prime-slider-custom-code-reset-btn,
	.prime-slider-white-label-save-btn {
		background: linear-gradient(to right, #fa6336, #ff3c3c);
		color: #fff;
		&:hover {
			background: linear-gradient(to right, #ff3c3c, #fa6336);
		}
	}
	.ps-code-message,
	.ps-white-label-message {
		position: fixed;
		inset-block-start: -100px; /* Start hidden above viewport */
		inset-inline-start: 50%;
		transform: translateX(-50%);
		z-index: 999;
		border-radius: 4px;
		opacity: 0;
		animation: slideDown 0.5s ease-out forwards;
		.bdt-alert{
			padding-inline-end: 40px;
		}
	}
	
	/* Slide-down animation keyframes */
	@keyframes slideDown {
		to {
			inset-block-start: 20px; /* End position slightly from top */
			opacity: 1;
		}
	}

	.bdt-alert {
		padding: 15px;
		margin-block-end: 20px;
		border: 1px solid transparent;
		border-radius: 4px;
		position: relative;
	}

	.bdt-alert-success {
		color: #155724;
		background-color: #d4edda;
		border-color: #c3e6cb;
	}

	// .bdt-alert-danger {
	// 	color: #721c24;
	// 	background-color: #f8d7da;
	// 	border-color: #f5c6cb;
	// 	padding: 20px;
	// 	border: 1px solid;
	// 	border-radius: 8px;
	// }

	// .bdt-alert-danger strong {
	// 	display: block;
	// 	margin-block-end: 8px;
	// 	font-size: 16px;
	// }

	.bdt-alert-close {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		padding: 15px;
		color: inherit;
		text-decoration: none;
	}

	.dashicons {
		font-family: dashicons;
		display: inline-block;
		line-height: 1;
		font-weight: 400;
		font-style: normal;
		speak: none;
		text-decoration: inherit;
		text-transform: none;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		inline-size: 20px;
		block-size: 20px;
		font-size: 20px;
		vertical-align: top;
	}

	/* White Label Title Input Styles */
	.ps-white-label-input {
		inline-size: 100%;
		max-inline-size: 400px;
		padding: 12px 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1.4;
		background-color: #fff;
		transition: border-color 0.3s ease;
	}

	.ps-white-label-input:focus {
		outline: none;
		border-color: #2196F3;
		box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
	}

	.ps-white-label-input-wrapper {
		position: relative;
		margin: 20px 0;
	}

	.ps-input-help {
		margin: 12px 0 0 0 !important;
		color: #666 !important;
		font-size: 14px !important;
		font-style: italic;
	}

	.ps-white-label-title-section {
		inline-size: 100%;
	}

	.ps-white-label-fields {
		transition: all 0.3s ease;
		margin-block-start: 20px;
	}


	/* Locked/Disabled State Styles */
	.ps-white-label-locked {
		opacity: 0.6;
		pointer-events: none;
	}

	.ps-white-label-locked .ps-option-item {
		background-color: #fefefe;
	}

	.ps-white-label-locked .switch input:disabled+.slider {
		background-color: #ddd;
		cursor: not-allowed;
	}

	.ps-white-label-locked .switch input:disabled+.slider:before {
		background-color: #f0f0f0;
	}

	.ps-white-label-locked .ps-white-label-input:disabled {
		background-color: #fefefe;
		color: #999;
		cursor: not-allowed;
	}

	.bdt-btn-blue:disabled {
		background-color: #ccc !important;
		color: #666 !important;
		cursor: not-allowed !important;
		opacity: 0.6;
	}

	.bdt-alert-warning {
		color: #856404;
		background-color: #fff3cd;
		border-color: #ffeaa7;
		padding: 20px;
		border: 1px solid;
		border-radius: 8px;
	}

	.bdt-alert-warning strong {
		display: block;
		margin-block-end: 8px;
		font-size: 16px;
	}


	.bdt-others-plugin-rating {
		.bdt-others-plugin-rating-stars i {
			color: #e26f56;
			font-size: 17px;
		}

		.bdt-others-plugin-rating-text {
			font-size: 13px;
			color: #656a71;
		}
	}

	.ps-dashboard-new-page-wrapper {
		gap: 15px;
	}

	.ps-install-plugin.bdt-installing {
		opacity: 0.7;
		cursor: not-allowed;
	}

	.ps-install-plugin.bdt-installing:before {
		content: '';
		display: inline-block;
		inline-size: 12px;
		block-size: 12px;
		border: 2px solid #ffffff;
		border-block-start: 2px solid transparent;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-inline-end: 5px;
	}

	.ps-install-plugin.bdt-installed {
		background-color: #28a745;
		border-color: #28a745;
	}

}

/*! rtl:ignore */
body.rtl .prime-slider-dashboard.wrap .ps-option-page .ps-option-item[data-content-type~="update"] > .ps-option-item-inner:before,
body.rtl .prime-slider-dashboard.wrap .ps-option-page .ps-option-item[data-content-type~="new"] > .ps-option-item-inner:before {
	transform: rotate(45deg);
}

#adminmenu #toplevel_page_prime_slider_options a[href="admin.php?page=prime_slider_options_upgrade"] {
	font-weight: 600;
	color: #20E2AD;
	transition: color 0.3s ease;
}

#adminmenu #toplevel_page_prime_slider_options a[href="admin.php?page=prime_slider_options_upgrade"]:hover {
	color: #08aeec;
}

.toplevel_page_prime_slider_options {
	.bdt-notification {
		inset-block-start: 43px;
		inline-size: 400px;

		.bdt-notification-message {
			line-height: 1;
			padding: 20px;
			border-radius: 6px;
			box-shadow: 0 0 0 2px @green-color, 0 15px 22px 2px rgba(0, 0, 0, 0.2);
			background: #fff;
			font-size: 18px;
			color: @green-color;
			border-color: transparent;

			>div {
				display: flex;
				align-items: center;

				.bdt-spinner {
					margin-inline-end: 15px;
				}
			}

			.bdt-notification-close {
				inset-block-start: 50%;
				inset-inline-end: 10px;
				transform: translateY(-50%);
				block-size: 30px;
				inline-size: 30px;
				line-height: 32px;
				background: #fff0f3;
				border-radius: 6px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.dashicons {
				margin-inline-end: 5px;
			}

			svg {
				display: inline-flex;
				color: @red-color;
				inline-size: 12px;
			}
		}
	}

	.bdt-lightbox-toolbar {
		padding: 45px 15px;
		background: rgba(0, 0, 0, 0.3);
		color: rgba(255, 255, 255, 0.7);
	}
}

@keyframes animate1 {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

@keyframes animate2 {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(100%);
	}
}

@keyframes animate3 {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes animate4 {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(-100%);
	}
}

// Animations for custom code editor
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


@keyframes floatingShape {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes fadeInOut {

	0%,
	100% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}
}

@keyframes waveMotion {

	0%,
	100% {
		transform: rotate(-15deg) translateX(0);
	}

	50% {
		transform: rotate(-15deg) translateX(5px);
	}
}

@keyframes zigzagFloat {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}
}

// Responsive styles for code editors

@media (min-width: 1400px) {
	.prime-slider-dashboard {
		.ps-dashboard-panel {
			.bdt-card {
				&.ps-welcome-content {
					p {
						margin-inline-end: 160px;
					}
				}

				&.ps-facebook-community {
					p {
						margin-inline-end: 160px;
					}
				}
			}
		}

		.ps-system-requirement .check-system-status {
			font-size: 14px;
		}
	}
}

@media screen and (max-width: 960px) {
	.prime-slider-dashboard {
		.ps-widget-onoff {
			margin: 0;
		}
	}
}

@media (min-width: 960px) {
	.prime-slider-dashboard.wrap {
		padding: 0 15px 15px 15px;

		.prime-slider-footer-info {
			p {
				text-align: end;
				margin-block-start: 0;
			}

		}
	}
}

@media (max-width: 639px) {
	.prime-slider-dashboard {
		&.wrap {


			.ps-option-item-inner {
				padding: 0;

				[class^="ps-wi-"] {
					display: none;
				}
			}

			.bdt-search-active-wrap {
				display: block;

				.bdt-subnav {
					margin: 20px 0 0 -20px;
				}
			}

			.bdt-card {
				background-image: none;
			}

			.bdt-button {
				inline-size: 100%;
			}
		}
	}
}

@media (max-width: 959px) {
	.prime-slider-dashboard {
		.ps-custom-code-section {
			.ps-code-editor-wrapper {
				margin-block-end: 20px;
			}
		}
	}
}

@media (min-width: 768px) {
	.prime-slider-dashboard.wrap .ps-dashboard-item {
		grid-column: span 6 / auto;
	}

	.prime-slider-dashboard.wrap #prime_slider_api_settings_page .ps-options {
		columns: 2;
	}

	.prime-slider-dashboard.wrap .ps-option-page .ps-options {
		grid-template-columns: repeat(2, 1fr);
	}

	.prime-slider-dashboard.wrap .ps-option-page .bdt-widget-filter-wrapper ul {
		display: flex;
	}

	.prime-slider-dashboard.wrap .ps-content-type-filter {
		display: block;
	}
}

@media (min-width: 1200px) {
	.prime-slider-dashboard.wrap .ps-dashboard-nav-container-wrapper {
		display: block;
	}

	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(1),
	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(3) {
		grid-column: span 7 / auto;
	}

	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(2) {
		grid-column: span 5 / auto;
	}

	.prime-slider-dashboard.wrap .ps-dashboard-panel {

		.ps-dashboard-others-plugin {
			.bdt-card {
				flex-direction: row;

				.bdt-others-plugins-link {
					justify-content: end;
				}
			}
		}
	}
}

@media (min-width: 1440px) {
	:root {
		@ps-dashboard-nav-inline-size: 300px;
	}

	.prime-slider-dashboard {
		&.wrap {
			.ps-dashboard-container {
				gap: 30px;
			}

			.ps-dashboard-nav-container-wrapper {
				margin-block-start: 30px;
			}

			.ps-option-page {
				margin-block-start: 30px;
			}

			.bdt-dashboard-navigation {
				min-inline-size: 300px;
				max-inline-size: 300px;
			}

			.ps-dashboard-header .ps-logo {
				inline-size: 300px;
			}

			.ps-dashboard-welcome-container {
				grid-row-gap: 30px;
				grid-column-gap: 30px;
			}

			.bdt-widget-filter-wrapper {
				margin-block-end: 30px;
			}
		}
	}

	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(1),
	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(3) {
		grid-column: span 8 / auto;
	}

	.prime-slider-dashboard.wrap .ps-dashboard-item:nth-child(2) {
		grid-column: span 4 / auto;
	}

	.prime-slider-dashboard.wrap #prime_slider_api_settings_page .ps-options {
		gap: 30px !important;

		.ps-option-item {
			margin-block-end: 30px !important;
		}
	}


}

@media (min-width: 1600px) {
	.prime-slider-dashboard.wrap #prime_slider_api_settings_page .ps-options {
		columns: 3;
	}

	.prime-slider-dashboard.wrap .ps-dashboard-item {
		grid-column: span 3 / auto;
	}

	.prime-slider-dashboard.wrap .bdt-subnav>* {
		padding-inline-start: 20px;
	}

	.prime-slider-dashboard.wrap .ps-option-page .ps-options {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 959px) {
	.prime-slider-dashboard {
		.ps-custom-code-section {
			.ps-code-editor-wrapper {
				margin-block-end: 20px;
			}
		}
	}
}

@media (max-width: 768px) {
	.prime-slider-dashboard.wrap .ps-white-label-input {
		max-inline-size: 100%;
	}
}