.popupOverlay {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(#ffffff, 0.2);
	backdrop-filter: blur(2px);

	& > .popup {
		z-index: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 10px;
		border: 1px solid #e1e1e1;
		border-radius: 10px;
		background-color: #ffffff;
		overflow: hidden;

		& > .popupHeader {
			display: grid;
			grid-template-columns: 1fr 20px;
			align-items: center;
			gap: 20px;
			padding: 10px;
			border-bottom: 1px solid #e1e1e1;
			background-color: #f9e2e5;

			& > .popupTitle {
				font-size: 1.1rem;
				color: #d94253;
			}

			& > .popupCloseButton {
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;
				border-radius: 5px;
				background-color: transparent;
				color: #d94253;
				cursor: pointer;
			}
		}

		& > .popupContent {
			padding: 10px;
			font-size: 0.95rem;
			font-weight: 300;
			color: #d94253;
		}

		& > .popupButtonsContainer {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			align-items: center;
			padding: 10px;

			& > .popupButton {
				display: grid;
				grid-template-columns: 20px 1fr;
				align-items: center;
				gap: 5px;
				padding: 5px 15px;
				border: 1px solid #a8a5a6;
				border-radius: 5px;
				background-color: #ffffff;
				font-size: 1rem;
				color: #d94253;
				cursor: pointer;
				transition: background-color 0.3s ease;

				&:first-child {
					border: none;
				}

				&:hover {
					background-color: #f9e2e5;
				}
			}
		}
	}
}