.page-title {
	display: flex;
	align-items: center;
	padding: 0 15px;
	.sidebar-toggle-btn {
		display: flex;
		margin-right: var(--margin-sm);
		cursor: pointer;
		--icon-stroke: var(--gray-700);
		.sidebar-toggle-icon {
			display: none;
		}

		.sidebar-toggle-icon,
		.sidebar-toggle-placeholder {
			@include transition(all 0.5s ease-in-out);
		}

		&:hover {
			.sidebar-toggle-icon {
				display: block;
			}
			.sidebar-toggle-placeholder {
				display: none;
			}
		}
	}

	@media (min-width: 992px) {
		// only for small screens
		.sidebar-toggle-btn {
			display: none;
		}
	}

	.title-area {
		display: inline-flex;
		align-items: center;
		.indicator-pill {
			margin-left: var(--margin-sm);
			.indicator-doc-html {
				height: 8px;
				width: 8px;
				border-radius: inherit;
			}
		}
		.sub-heading {
			@include get_textstyle("sm", "regular");
		}
	}
}

.page-container {
	background-color: var(--bg-color);

	.page-body {
		width: 100%;
		padding: 0px;
	}
}

.page-actions {
	align-items: center;
	.btn {
		height: var(--btn-height);
		margin-left: var(--margin-sm, 8px);
		border-radius: var(--border-radius);
		line-height: 1;
		padding: 4px 8px;
		&,
		& .hidden-xs {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}
	}
	.btn:not(.icon-btn) {
		padding: 4px 8px;
	}
	.btn-primary,
	.btn-secondary {
		min-width: 40px;
	}
	.custom-btn-group {
		display: inline-flex;
	}

	.custom-actions {
		display: flex;
		align-items: center;
	}
}

.layout-main-section-wrapper {
	flex: 1 0 80%;
	width: 80%;
}

body[data-route^="Form"] {
	.layout-main-section-wrapper {
		width: calc(100% - var(--form-sidebar-width));
		flex: calc(100% - var(--form-sidebar-width));
	}
}

.layout-main-section.frappe-card {
	overflow: hidden;
	@include card($padding: 0px);
	box-shadow: none;
	border: none;
}

.page-head {
	z-index: 6;
	position: sticky;
	background: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
	transition: 0.5s top;
	top: 0;

	.page-head-content {
		height: var(--page-head-height);
		padding: 8px 0px;
		gap: 10px;
	}
}

.page-form {
	margin: 0;
	padding: var(--padding-xs) var(--padding-md);
	display: flex;
	flex-wrap: wrap;
	background-color: var(--card-bg);

	.form-group {
		padding: 0 10px 0 0;
		margin: 8px 0;
	}
	.checkbox {
		margin-top: 4px;
		margin-bottom: 4px;

		.help-box {
			display: none;
		}
	}

	.awesomplete > ul {
		min-width: 300px;
	}
}

.form-inner-toolbar {
	.inner-group-button {
		display: inline-flex;
		.icon {
			margin-right: -var(--margin-xs);
		}
	}
	button {
		margin-left: var(--margin-sm);
	}
}

.menu-btn-group,
.custom-btn-group,
.page-icon-group {
	display: flex;
	.dropdown-menu {
		width: max-content;
	}

	.menu-item-label {
		margin-right: var(--margin-md);
	}

	.menu-item-icon {
		margin-right: var(--margin-sm);
	}
}

.layout-main {
	display: flex;
	flex-direction: row;
}

.layout-main-section {
	scroll-margin-top: var(--navbar-height);

	.frappe-list,
	.report-wrapper {
		.result,
		.no-result,
		.freeze {
			min-height: 200px;
		}
	}

	.msg-box {
		margin-bottom: 4em;
		@include get_textstyle("sm", "regular");

		// To compensate for perceived centering
		.null-state {
			height: 60px;
			width: auto;
			margin-bottom: var(--margin-md);
			img {
				fill: var(--fg-color);
			}
		}
		p {
			@include get_textstyle("base", "regular");
		}

		.meta-description {
			width: 45%;
			margin-right: auto;
			margin-left: auto;
		}
	}
}

.page-only-label {
	margin-top: var(--margin-xs);
	text-align: center;
}

.frappe-control {
	.form-control.fields_order {
		padding-top: 1.5px;
	}
}
