﻿.Buildings {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

	.Buildings .Building {
		display: flex;
		flex-direction: column;
		gap: 5px;
		border: 1px solid var(--border-color-container);
	}

		.Buildings .Building table {
			border-spacing: 0;
			border-collapse: collapse;
			width: 100%;
		}

			.Buildings .Building table tr td:first-child {
				min-width: 130px;
			}

			.Buildings .Building table tr td:last-child {
				text-align: right;
			}

		.Buildings .Building > .Header {
			display: grid;
			justify-content: space-between;
			padding: 10px;
			background-color: var(--background-color-container-active-header);
			align-items: center;
			column-gap: 30px;
			text-wrap: nowrap;
			grid-template-areas: "Left Commands"
				"Notes Notes";
			grid-template-columns: 1fr min-content;
		}

			.Buildings .Building > .Header .Left {
				grid-area: Left;
				display: flex;
			}

				.Buildings .Building > .Header .Left .Address {
					display: flex;
					flex-direction: column
				}

					.Buildings .Building > .Header .Left .Address > div {
						display: flex;
					}

				.Buildings .Building > .Header .Left .Icon {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 17px;
					width: 70px;
				}

					.Buildings .Building > .Header .Left .Icon [ml_pagecontrol_type=Icon] {
						font-size: 33px;
						width: unset;
					}

			.Buildings .Building > .Header .Commands {
				grid-area: Commands;
				display: flex;
				gap: 5px;
			}

			.Buildings .Building > .Header .Notes {
				grid-area: Notes;
				display: flex;
				flex-direction: column;
			}

				.Buildings .Building > .Header .Notes:has( span:not(:empty)) {
					padding: 10px 7px 0;
				}

		.Buildings .Building .Body {
			display: flex;
			gap: 5px;
			padding: 10px;
			flex-wrap: wrap;
		}

			.Buildings .Building .Body.Close {
				display: none;
			}

			.Buildings .Building .Body > div {
				display: flex;
				flex-direction: column;
				border: 1px dotted var(--border-color-container);
				width: fit-content;
			}

				.Buildings .Building .Body > div > .Header {
					display: flex;
					justify-content: space-between;
					padding: 10px;
					background-color: var(--background-color-container-active-header);
					align-items: center;
					column-gap: 30px;
					text-wrap: nowrap;
				}

					.Buildings .Building .Body > div > .Header > span:first-of-type {
						font-weight: bold;
						font-size: large;
					}

					.Buildings .Building .Body > div > .Header .Commands {
						display: flex;
						gap: 5px;
					}

				.Buildings .Building .Body > div .Content {
					padding: 10px;
				}

			.Buildings .Building .Body .Photos {
			}

				.Buildings .Building .Body .Photos:has( .Photo.Hide) {
					height: 480px;
					width: 500px;
				}

				.Buildings .Building .Body .Photos .Arrows {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					gap: 5px;
					padding: 10px;
				}
