@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 slots-block {
	font-family: Manrope;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0px;
	color: #32CD32;

	&.no-slots {
		color: rgba(60, 60, 67, 0.3);
	}
}

.cancel-form-layout {
	position: absolute;
	top: 0%;
	left: 0%;
	transform: translate(71%, 100%);
	width: 620px;
	height: auto;
	padding: 0px 32px 32px 32px;
	border-radius: 12px;
	background-color: white;

	& > div:nth-child(1) {
		@include header-style();
		@include flex-end();
		width: 556px;
		height: 64px;
		padding: 0;
		text-align: center;
	}

	& > div:nth-child(2) {
		@include flex-end();

		font-family: Manrope;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: center;

  
	}

	& > div:nth-child(3) {
		display: flex;
		flex-direction: row;
		column-gap: 16px;
	}
}

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

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

@mixin block-title {
	font-family: Manrope;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: rgba(60, 60, 67, 0.6);
	padding: 0px 0px 10px 0px;
}

@mixin grey-header {
	width: 556px;
	height: 48px;
	padding: 16px 0px 8px 0px;
	font-family: Manrope;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: rgba(60, 60, 67, 0.6);
}

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

	&.success {
		transform: translate(0%, 65%);
	}

	.title {
		font-family: Manrope;
		font-size: 24px;
		font-weight: 700;
		line-height: 32px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(0, 0, 0, 1);		
	}

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

		& > .specialist {
			& > div:nth-child(1) {
				@include block-title();
			}

			& > div:nth-child(2) {
				@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);
		
				& > .right-block {
					font-family: Manrope;
					text-align: left;
					letter-spacing: 0px;

					& > div:nth-child(1) {
						font-size: 20px;
						font-weight: 600;
						line-height: 24px;					
					}
					& > div:nth-child(2) {
						font-size: 16px;
						font-weight: 500;
						line-height: 20px;
						color: rgba(60, 60, 67, 0.6);
					}
				}
			}
		}

		& > .specialist > div > .doctors-photo {
			width: 64px;
			height: 64px;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12px;

			& > img {
				height: 100%;
				width: auto;
				object-fit: contain;
			}
		}

		& > .calendar-block {
			& > div:nth-child(1) {
				@include block-title();
			}
			& > div:nth-child(2) {
				width: 556px;
				height: 368px;
				padding: 7px 16px 7px 16px;
				border-radius: 16px;
				background: rgba(250, 250, 250, 1);

				& > .calendar-common {
					height: 270px;
				}
			}
		}

		& > .slots-block {
			& > div:nth-child(1) {
				@include block-title();
			}
			& > .select-prompt {
				@include common-font();
				color: lightslategray;
				padding: 0px 16px 0px 16px;
			}
			& > .current-slots {
				@include flex-row();
				column-gap: 8px;
				row-gap: 8px;
				flex-wrap: wrap;

				& > button {
					width: auto;
				}

				& > .no-free-slots {
					@include common-font();
					color: red;
					padding: 12px 16px 12px 16px;
				}
			}
		}

		& > .new-appointment-block > .info-block {
			@include flex-row();
			width: 556px;
			height: 68px;
			padding: 12px 16px 12px 16px;
			border-radius: 16px;
			background: rgba(250, 250, 250, 1);

			& > div {
				width: 164px;
				font-family: Manrope;
				font-size: 16px;
				line-height: 20px;
				letter-spacing: 0px;
				text-align: left;

				& > div:nth-child(2) {
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}
				& > .title-block {
					font-weight: 700;
					color: rgba(60, 60, 67, 0.3);				
				}
			}
		}

		& > .time-picker-block, & > .new-appointment-block {
			& > div:nth-child(1) {
				@include block-title();
			}

			& > .controls-block {
				@include flex-row();
				column-gap: 8px;
				row-gap: 8px;
				flex-wrap: wrap;
			}

			& > .controls-block > .no-free-slots {
				@include common-font();
				color: red;
				padding: 12px 16px 12px 16px;
			}
		}

		&.loading {
			height: 823px;
		}

		.grey-header {
			@include grey-header;
		}


	}

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

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

}

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

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

