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

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

	.nav-block {
		.button-label {
			@include flex-row();
			column-gap: 4px;
		}

	}

	.modal-wrapper {
		outline: none;
	}

	.success-message {
		@include flex-row();
		column-gap: 16px;
		margin-top: 32px;
	}

	.tabs-block {

		@mixin tabs-font {
			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);
		}

		.tabs-selector {
			& > ul {
				@include tabs-font();
				border: none;

				& > li {
					padding: 6px 12px 0px 0px;
				}

				& > li:focus {
					outline: none;
				}

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

			.tab-panel {
				margin: 0;
				outline: none;

				&.selected-panel {
					margin: 32px 0px 32px 0px;
					min-height: 150px;
				}

				&.address-panel {

					& > .new-address {
						padding: 0px 10px 20px 0px;
						& > div:nth-child(1) {
							color: rgba(60, 60, 67, 0.6);
						}
						& > div:nth-child(2) {
							&.has-no-address {
								color: rgba(60, 60, 67, 0.5);
							}
							& > .hint {
								font-size: 14px;
								color: rgba(60, 60, 67, 0.5);
							}
						}
					}

					& > .current-address {
						padding: 0px 10px 20px 0px;

						& > div:nth-child(1) {
							color: rgba(60, 60, 67, 0.6);
						}

						& > .no-address {
							color: rgba(60, 60, 67, 0.6);
						}
						& > .address-selected {
							@include flex-row();
							justify-content: space-between;
						}
					}

					& > .map-block {
						padding: 16px 0px 0px 0px;

						.locations-menu {
							border-radius: 4px;
							padding: 10px;
							width: 300px;
							height: auto;
							background-color: white;

							& > .close-icon {
								padding: 0px;
								display: flex;
								flex-direction: row;
								justify-content: flex-end;
								& > div {
									width: auto;

									& > svg {
										width: 14px;
									}
								}
							}

							& > div {
								padding: 5px;
							}
						}
					}

					& > div > .current-map {
						width: 508px;
						height: 508px;
						padding-top: 16px;

						& > div > div {
							border-radius: 8px;
						}
					}
				}
			}
		}
	}

	.phone-panel {
		outline: none;

		& > div:nth-child(1) {
			width: 508px;
			height: 80px;

			@include flex-column();
			justify-content: space-between;

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

		}
	}


	.base-info-panel {
		@include flex-column();

		row-gap: 32px;

		.photo-block {
			@include flex-row();
	
			column-gap: 32px;
			font-size: 40px;
			font-weight: 700;

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

		.base-info {
			@include flex-column();
			row-gap: 32px;
			max-width: 508px;

			& > div > div > .error {
				margin-top: 4px;
				font-size: 12px;
				color: red;
			}

			& > div:nth-child(1) {
				@include flex-column();
				row-gap: 23px;
	
				& > div {
					height: auto;
				}
				.gender-select {
					border: 1px solid rgba(198, 198, 200, 1);
					height: 90px;
					width: 508px;
					padding: 0px 16px 0px 16px;
					border-radius: 8px;
	
					& > div:nth-child(1) {
						@include grey-title;
						font-weight: 400;
					}
					& > div:nth-child(2) {
						display: flex;
						flex-direction: row;
						width: 556px;
						height: 50px;
						padding: 0px 0px 16px 0px;
						column-gap: 8px;
					}
					.button-label {
						display: flex;
						flex-direction: row;
					}	
				}
			}

		}
	}

  }
