.module-web-panel {
	display: flex;
	padding: 16px;
	align-items: flex-start;
	flex-shrink: 0;

	.content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--Spacing-Space-5, 20px);
		align-self: stretch;

		.header {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--Spacing-Space-5, 20px);
			align-self: stretch;

			h2 {
				font-size: 20px;
				margin-bottom: 10px;

				.highlight {
					color: #3bc643;
					font-weight: bold;
				}
			}

			p {
				font-size: 15px;
				color: #333;
			}
		}

		.footer {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--Spacing-Space-4, 16px);
			align-self: stretch;

			.buttons {
				display: flex;
				gap: 24px;
				justify-content: center;
				align-items: center;
				width: 100%;

				.btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					width: 100%;
					min-width: 48px;
					max-width: 300px;
					padding: 16px;
					border-radius: 12px;
					text-decoration: none;
					font-size: 14px;
					font-weight: bold;
					transition: 0.3s ease-in-out;
					border: 1px solid #dedede;
					background: white;

					.icon-container {
						background: #3bc643;
						border-radius: 50%;
						width: 48px;
						height: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 12px;
						background-position: center;
						background-repeat: no-repeat;
					}

					.text {
						color: black;
					}

					&.btn-integrer {
						color: #2ca44d;

						.icon-container {
							background-image: url("../../../../img/svg/code.svg");
						}

						&:hover {
							color: white;

							.icon-container {
								background: white;
								background-image: url("../../../../img/svg/code-green.svg");
								background-position: center;
								background-repeat: no-repeat;
								border: 2px solid #3bc643;
							}
						}
					}

					&.btn-communiquer {
						color: #0c6aab;

						.icon-container {
							background-image: url("../../../../img/svg/promote.svg");
						}

						&:hover {
							color: white;

							.icon-container {
								background: white;
								background-image: url("../../../../img/svg/promote-green.svg");
								background-position: center;
								background-repeat: no-repeat;
								border: 2px solid #3bc643;
							}
						}
					}
				}
			}
		}
	}
}

.module-web-modal {
	overflow-y: hidden !important;
}

.module-web-dialog {
	top: 0;
	left: 0;
	max-width: 650px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	.modal-body {
		padding: 20px;

		.code-container {
			justify-content: space-between;
			display: flex;
			padding: 0 var(--spacing-space-15, 12px) 0 var(--Spacing-Space-3, 12px);
			align-items: center;
			align-self: stretch;
			border-radius: var(--Radius-Radius-1, 4px);
			border: 0.5px solid #3bc643;
			background: #f0fdf4;
			color: #3bc643;
			margin-top: 20px;
			margin-bottom: 20px;

			pre {
				margin: 12px;
				overflow-x: auto;
				color: #3bc643;
			}

			.copy-button {
				background: none;
				color: #3bc643;
				border: none;
				padding: 5px 10px;
				cursor: pointer;
				border-radius: 3px;
				outline: none;

				&:hover {
					opacity: 0.5;
				}
			}
		}
	}

	.btn-send-mail {
		background-color: #3bc643;
		border-color: #3bc643;
		transition: 0.5s;
		color: #FFFFFF;

		&:hover {
			opacity: 0.5;
		}
	}

	.custom-select-page-container {
		position: relative;
		width: 100%;
		padding-top: 10px;
	}

	.selected-page-option {
		color: #333;
	}

	.custom-select-page {
		position: relative;
		user-select: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 0.5rem 0.75rem;
		font-size: 16px;
		background-color: #fff;
		cursor: pointer;
	}

	.custom-select-page::after {
		content: "▾";
		position: absolute;
		right: 0.4rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 20px;
		pointer-events: none;
	}

	.custom-select-page.focused {
		border-color: #80bdff;
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	}

	.custom-select-page-options-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
		border: 1px solid #ced4da;
		border-top: none;
		border-radius: 0 0 4px 4px;
		display: none;
		max-height: 200px;
		overflow-y: auto;
		color: #333;
		margin-top: 1px; 
	}

	.custom-select-page-option {
		padding: 10px 12px;
		cursor: pointer;
	}

	.custom-select-page-option:hover {
		background-color: #6c757d;
		color: white;
	}
}