.appointments-layout {
		padding: 32px 0% 20px 15%;
        display: flex;
        flex-direction: column;
        font-family: 'Manrope';
		row-gap: 24px;

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

			& > .tabs-block {
				display: flex;
				flex-direction: row;
				column-gap: 16px;

				& > div {
					font-family: Manrope;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;					
					cursor: pointer;
					color: rgba(60, 60, 67, 0.6);
					border-bottom: 3px solid;
					border-color: transparent;
					height: 32px;
				}

				& > div.selected {
					cursor: pointer;
					border-bottom: 3px solid;
					border-color: rgba(44, 121, 206, 1);
					color: rgba(44, 121, 206, 1);
				}
			}

			& > .list-block {
				display: flex;
				flex-direction: column;
				row-gap: 16px;

				& > .one-appointment {
					display: flex;
					flex-direction: row;
					column-gap: 24px;
					width: 688px;
					height: 112px;
					padding: 16px;
					border-radius: 16px;
					background-color: rgba(245, 250, 255, 1);

					& > .status-block {
						display: flex;
						flex-direction: column;
						justify-content: flex-end;

						& > div {
							width: auto;
							height: 36px;
							padding: 4px 8px 8px 9px;
							border-radius: 8px;
							border: 1px solid;
							border-color: rgba(198, 198, 200, 1);
							cursor: pointer;					
						}
					
						&.cancelled > div {
							background: rgba(255, 84, 74, 1);
							color:white;
							border: none;
							cursor: pointer;
						}
					}

					& > .avatar {
						width: 80px;
						height: 80px;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
			
						& > img {
							height: 100%;
							width: auto;
							object-fit: contain;
						}
					}

					& > .description {
						display: flex;
						width: 200px;
						flex-direction: column;
						row-gap: 4px;
						font-family: Manrope;
						letter-spacing: 0px;
						text-align: left;
						color: rgba(0, 0, 0, 1);

						& > div:nth-child(1) {
							font-size: 20px;
							font-weight: 600;
							line-height: 24px;
						}

						& > .full-name-block {
							font-size: 16px;
							font-weight: 500;
							line-height: 20px;
							color: rgba(0, 0, 0, 1);

							& > button {
								color: rgba(0, 0, 0, 0.5);
   								background-color: rgb(245, 250, 255);
							}
						}

						& > div:nth-child(3) {
							font-size: 14px;
							font-weight: 600;
							line-height: 18px;
							text-align: left;
						}
					}
				}
			}
		}

        & > .title {
			font-family: Manrope;
			font-size: 40px;
			font-weight: 700;
			line-height: 52px;
			letter-spacing: 0em;
			text-align: left;
			margin-bottom: 32px;

			display: flex;
			flex-direction: row;
			column-gap: 100px;
		}
}