@import "@Themes/constants.scss";

.root {
	margin: 24px auto;
	width: 566px;

	@media (max-width: $screen-m) {
		width: 474px;
	}

	@media (max-width: $screen-s) {
		width: 100%;
		padding: var(--spacing-md, 16px);
	}

	.title {
		margin-top: 24px;
	}

	.form-container {
		margin-top: 16px;

		.checkbox-container {
			margin-top: 32px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;

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

		.buttons-container {
			display: flex;
			gap: var(--spacing-md, 16px);
			margin-top: 32px;

			@media (max-width: $screen-s) {
				flex-direction: column;
			}
		}
	}

	.add-document-container {
		margin-top: 32px;
	}

	.buttons-container {
		margin-top: 32px;
	}
}