@mixin header-style {
	font-family: Manrope;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: left;
}

@mixin flex-end {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

@mixin common-font {
	font-family: Manrope;
	font-size: 16px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: left;
	color: rgba(0, 0, 0, 1);	
}

@mixin flex-row {
	display: flex;
	flex-direction: row;
}

@mixin flex-column {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.success-layout {
	position: absolute;
	top: 0%;
	left: 30vw;
	transform: translate(0%, 20vw);
	width: 620px;
	height: auto;
	padding: 20px 32px 20px 32px;
	border-radius: 12px;
	background-color: white;
	row-gap: 16px;

	.title {
		@include flex-row();
		font-family: Manrope;
		font-size: 24px;
		font-weight: 700;
		line-height: 32px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(0, 0, 0, 1);
		justify-content: center;

		.success-message {
			@include flex-row();
			padding-top: 0px;
			justify-content: space-around;
			column-gap: 16px;
		}
	}

	.success-base-block {
		@include flex-column();

		& > .message {

			@include flex-row();
			column-gap: 16px;
			width: 556px;
			height: 88px;
			padding: 12px 16px 12px 16px;
			border-radius: 16px;
			background-color: rgba(250, 250, 250, 1);
			justify-content: space-around;
		}
	}

	& > .save-changes-block, & > div > .save-changes-block {
		@include flex-row();
		column-gap: 16px;
		justify-content: center;
	}

	.success-message {
		@include flex-row();
		padding-top: 28px;
		justify-content: center;
		column-gap: 16px;
	}

}

.controls-button-label {
	@include flex-row();

	& > div:nth-child(1) {
		@include flex-row();
		align-items: center;
		margin-right: 8px;
	  }
}

