@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";

#container {
  margin: 1rem;
}

.items {
  margin-bottom: 1rem;
}

.patient-page-layout {
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-direction: row;
	font-family: 'Manrope';

	& > .menu {
		padding: 8px 8px 8px 24px;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
	}

	& > .mainBlock {
		padding: 32px 8px 8px 24px;
	}

	.button-label {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
  
		& > div:nth-child(1) {
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  margin-right: 8px;
		}
	  }

	  .button-label.delete {
		color: #FF544A;
	  }
	  .button-label.change-role {
		color: #2C79CE;
		;
	  }

	.mainBlock{
		width: 100%;
		display: flex;
		flex-direction: column;
		row-gap: 32px;

		.controls-block {
			display: flex;
			flex-direction: row;
			column-gap: 32px;

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

		.right-block {
			display: flex;
			flex-direction: column;
			row-gap: 16px;

			& > div {
				& > .phone {
					font-family: Manrope;
					font-size: 20px;
					font-weight: 500;
					line-height: 24px;
					letter-spacing: 0em;
					text-align: left;
					color: rgba(0, 0, 0, 1);
				}

				.role {
					background-color:  rgba(255, 211, 211, 1);
					border-radius: 8px;
					width: 71px;
					height: 40px;
					font-family: Manrope;
					font-size: 16px;
					font-weight: 500;
					line-height: 24px;
					letter-spacing: 0em;
					text-align: left;
					padding: 8px;				
				}

				& > .appeal-patient {
					display: flex;
					flex-direction: row;
					align-items: baseline;
	
					& > .appeal {
						margin-right: 10px;
						font-size: 20px;
					}
	
					& > .full-name {
						font-family: Manrope;
						font-size: 40px;
						font-weight: 700;
						line-height: 52px;
						letter-spacing: 0em;
						text-align: left;
						color: rgba(0, 0, 0, 1);			
					}
				}
			}

		}

		.info-block {
			display: flex;
			flex-direction: column;
			row-gap: 8px;

			& > div {
				display: flex;
				flex-direction: row;

				& > div:nth-child(1) {
					width: 180px;
					min-width: 180px;
					height: auto;
					padding: 10px 0px 10px 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)
				}

				& > div:nth-child(2) {
					width: 100%;
					height: auto;
					padding: 10px 16px 10px 16px;
					color: rgba(0, 0, 0, 1);
					background-color:  rgba(250, 250, 250, 1);
					border-radius: 16px;

					& > div > span {
						color: rgba(60, 60, 67, 0.6);
					}
				}
			}
		}
	}
  }