@import "@Themes/constants.scss";

.root {
	.header {
		display: flex;
		padding: 64px;
		justify-content: space-between;

		@media (max-width: $screen-m) {
			flex-wrap: wrap;

			.text {
				margin: 32px 0;
			}
		}

		@media (max-width: $screen-s) {
			flex-wrap: wrap;

			.text {
				margin: 32px 0;
			}

			.button {
				flex: 1;
			}
		}

		.folder-number {
			margin-top: 16px;
		}

		.office-name {
			margin-top: 8px;
			text-transform: uppercase;
		}

		.subtitle {
			margin: 64px 0 32px 0;
		}

		.contact {
			display: flex;
			gap: 20px;
		}

		.contact-text {
			text-align: right;
			line-height: 15px;
		}

		.contact-button {
			margin-top: 4%;
		}

		.separator {
			width: 20px;
			height: 50px; /* Adjust the height as needed */
			background-color: gray;
			margin: 0 20px; /* Adjust the margin as needed */
		}

		.note-box {
			border: 1px solid #e0e0e0; /* Light grey border */
			margin-top: 25px;
			padding: 10px;
			width: 100%;
			height: 100px; /* Adjust height as needed */
			box-sizing: border-box;
			position: relative;
		}
	}

	.sub-container {
		background-color: var(--color-neutral-50);
		padding: 64px;

		.content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 32px;
			margin-bottom: 64px;

			@media (max-width: $screen-s) {
				grid-template-columns: 1fr;
			}
		}

		.component-to-replace {
			min-width: 124px;
			height: 98px;
			background-color: white;
		}

		.text {
			margin: 32px 0;
		}

		.button {
			width: fit-content;
		}

		@media (max-width: $screen-s) {
			.button {
				width: 100%;
			}
		}
	}

	.modal-content {
		.text {
			margin: 24px 0;
		}

		.component-to-replace {
			background-color: var(--color-neutral-50);
			height: 98px;
			width: 100%;
		}
	}
}