.profile {
	display: flex;
	align-items: center;
	justify-content: center;

	.rectangle-content {
		width: 364px;
		margin-top: 120px;

		.profile-content {
			background-color: var(--popup-background);
			border-radius: var(--inside-block-radius);
			padding: 32px;
			display: flex;
			flex-direction: column;
			gap: 12px;
			font-size: var(--text-button);

			p {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.icon {
					cursor: pointer;
				}

				.active-icon {
					color: var(	--progress-ongoing-color);
				}				
			}

			.modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.5); 
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1000;
			
				.modal-content {
					background-color: var(--popup-background);
					border-radius: var(--inside-block-radius);
					padding: 32px;
					max-width: 400px;
					width: 90%;
					position: relative;
				
					.close {
						position: absolute;
						top: 8px;
						right: 12px;
						font-size: 28px;
						cursor: pointer;
					}
			
					.edit-form {
						margin-top: 10px;
					
						input {
							margin-bottom: 5px;
							padding: 8px;
							width: 100%;
							border: 1px solid #ccc;
							border-radius: 5px;
							padding-right: 0;
							margin-right: 8px;
						}
					
						button {
							background-color: #6c5ce7;
							color: white;
							padding: 10px;
							border: none;
							border-radius: 5px;
							cursor: pointer;
					
							&:hover {
								background-color: #4834d4;
							}
						}
					}
				}
			}
		}
	}
}