.appointment-layout {
    padding: 32px 256px 20px 256px;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    font-family: 'Manrope';

	@mixin header-style{
		font-family: Manrope;
		font-size: 16px;
		font-weight: 700;
		color: rgba(60, 60, 67, 0.6);
	}
	.canceled {
		color: red;
	}

	.button-label {
		display: flex;
		flex-direction: row;
		column-gap: 4px;
		font-family: Manrope;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		color: rgba(60, 60, 67, 0.6);
		&:hover{
			color: rgba(60, 60, 67, 0.4);
			& > div > svg > path {
				fill: rgba(60, 60, 67, 0.4)
			}
		}
	}

    & > div:nth-child(1) {
        display: flex;
        flex-direction: column;
        column-gap: 20px;
        font-size: 40px;
        font-weight: 700;

		& > div:nth-child(2) {
			font-family: Manrope;
			font-size: 24px;
			font-weight: 700;
			line-height: 32px;		
		}
    }

	& > div:nth-child(2) {
		.patient-block {
			display: flex;
			flex-direction: column;
			margin-bottom: 32px;

			.patient-header {
				height: 48px;
				padding: 16px 0px 8px 0px;

				@include header-style;
			}
			.patient-profile {
				width: 688px;
				height: 88px;
				padding: 12px 16px 12px 16px;
				border-radius: 16px;
				background-color: rgba(250, 250, 250, 1);

				& > .patient-photo {
					width: 100%;
					height: 64px;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					& > .full-name-block {
						width: 100%;
					}

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

					& > .participant-navigation {
						width: 100%;
						& > button {
							&:active {
								border: none;
								box-shadow: none;
							}
							background-color: rgba(250, 250, 250, 1);
						}
					}
				}

				& > div {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					column-gap: 32px;
					align-items: center;
					font-family: Manrope;
					font-size: 20px;
					font-weight: 600;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;					
				}
			}

			.appointment-info{
				& > div:nth-child(1){
					height: 48px;
					padding: 16px 0px 8px 0px;

					@include header-style;					
				}
				& > div:nth-child(2){
					width: 688px;
					height: 68px;
					padding: 12px 16px 12px 16px;
					border-radius: 16px;
					background-color: rgba(250, 250, 250, 1);

					display: flex;
					flex-direction: row;

					& > div {		
						width:208px;
						@include header-style;

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

		.controls-block {
			display: flex;
			flex-direction: column;
			& > .availability-block {
				width: max-content;
				display: flex;
				flex-direction: column;
				row-gap: 0px;
				font-family: Manrope;
				font-size: 20px;
				color: green;
			}

			& > .button-block {
				.controls-button-label {
					display: flex;
					flex-direction: row;
	
					& > div:nth-child(1) {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 8px;
					  }
				}
			}

			& > div {
				height: 48px;
				padding: 12px 16px 12px 0px;
				border-radius: 8px;
			}
		}
	}
}
