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

#container {
  margin: 1rem;
}

.items {
  margin-bottom: 1rem;
}

.one-doctor-page-layout {
    padding: 30px 0% 0 0%;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 32px;
    font-family: "Manrope";
    place-content: space-around;

	@media screen and (max-width: 1246px) {
		grid-template-columns: none;
		grid-template-rows: 54% 50%;
		row-gap: 32px;
		place-content: center;
	}

	& > .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;
		;
	  }

	.map-block {
		width: 688px;
		height: 588px;
		border-radius: 16px;
		padding: 0px 8px 8px 24px;

		& > div {
			position: relative;
		}
	}

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

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

			& > .doctors-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);
				}

				.doctors-address {
					font-family: Manrope;
					font-size: 20px;
					font-weight: 500;
					line-height: 24px;
					letter-spacing: 0em;
					text-align: left;
					color: rgba(60, 60, 67, 0.6);
				}
			}

			& > .appeal-doctor {
				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;

			& > .about, & > .education {
				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);

				&.description {
					background: rgba(250, 250, 250, 1);
					padding: 12px 16px 12px 16px;
					border-radius: 16px;
					font-family: Manrope;
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					letter-spacing: 0px;
					text-align: left;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}
  }
  