/* Responsive layer for the legacy CRM layout. */
.crm-mobile-menu-toggle {
	display: none;
}

@media screen and (max-width: 900px) {
	html,
	body {
		width: 100%;
		min-width: 0;
		overflow: hidden;
		-webkit-text-size-adjust: 100%;
	}

	#start {
		width: 100% !important;
		min-width: 0 !important;
	}

	.crm-mobile-menu-toggle {
		display: inline-block;
		float: none !important;
		min-width: 38px;
		margin: 0 6px 0 0 !important;
		padding: 7px 9px !important;
		font-weight: bold;
	}

	.crm-mobile-menu-toggle .ui-icon {
		position: static !important;
		display: inline-block;
		margin: 0 5px -3px 0 !important;
	}

	.ui-layout-north {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		padding: 4px !important;
		overflow: hidden !important;
		box-sizing: border-box;
		background: #f7f9f8 !important;
	}

	.ui-layout-north > table,
	.ui-layout-north > table > tbody {
		display: block;
		width: 100% !important;
		float: none !important;
	}

	.ui-layout-north > table > tbody > tr {
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 0;
	}

	.ui-layout-north > table > tbody > tr:first-child {
		min-height: 42px;
	}

	.ui-layout-north > table > tbody > tr:first-child > td {
		display: block;
		flex: 0 0 auto;
		min-width: 0;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:nth-child(2) {
		flex: 1 1 auto;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:last-child {
		flex: 1 1 55%;
		overflow: hidden;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:last-child > div {
		display: flex;
		float: none !important;
		width: 100% !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:last-child .fg-button {
		flex: 0 0 auto;
		float: none;
		min-height: 30px;
		box-sizing: border-box;
	}

	.ui-layout-north > table > tbody > tr:nth-child(2) > td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.staff-status-bar {
		flex-wrap: nowrap !important;
		justify-content: flex-start;
		width: 100%;
		min-height: 50px;
		padding: 5px 4px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.staff-status-title,
	.staff-status-current {
		flex: 0 0 auto;
		width: auto !important;
		min-width: auto;
		text-align: left !important;
		white-space: nowrap;
	}

	.staff-status-bar button,
	.staff-status-bar .label {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 34px;
	}

	.ui-layout-center {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}

	.ui-layout-west {
		position: fixed !important;
		z-index: 10020 !important;
		top: 0 !important;
		bottom: 0 !important;
		left: -270px !important;
		width: 250px !important;
		height: 100vh !important;
		padding: 12px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
		background: #fff !important;
		border: 0 !important;
		box-shadow: 8px 0 24px rgba(24, 48, 40, .22);
		transition: left .22s ease;
	}

	body.crm-mobile-nav-open .ui-layout-west {
		left: 0 !important;
	}

	body.crm-mobile-nav-open::after {
		content: "";
		position: fixed;
		z-index: 10010;
		inset: 0;
		background: rgba(16, 31, 26, .42);
	}

	.ui-layout-resizer-west,
	.ui-layout-toggler-west {
		display: none !important;
	}

	.ui-layout-west > img {
		display: block;
		max-width: 180px;
		height: auto !important;
		margin: 0 auto;
	}

	.ui-layout-center img,
	.pcrm img {
		max-width: 100%;
		height: auto;
	}

	.pcrm {
		padding: 14px;
		font-size: 15px;
		line-height: 1.55;
		letter-spacing: 0;
	}

	.ui-layout-center input[type="text"],
	.ui-layout-center input[type="password"],
	.ui-layout-center input[type="email"],
	.ui-layout-center select,
	.ui-layout-center textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	.ui-layout-center .flexigrid,
	.ui-layout-center .bDiv,
	.ui-layout-center .hDiv,
	.ui-layout-center .fg-toolbar {
		max-width: 100%;
		box-sizing: border-box;
	}

	.ui-layout-center .bDiv,
	.ui-layout-center .hDiv {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.ui-dialog {
		max-width: calc(100vw - 20px) !important;
		left: 10px !important;
		box-sizing: border-box;
	}

	.ui-dialog .ui-dialog-content {
		max-width: 100%;
		box-sizing: border-box;
		overflow: auto !important;
	}

	.ui-dialog table {
		max-width: 100%;
	}
}

@media screen and (max-width: 520px) {
	body {
		font-size: 12px;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:first-child .label {
		display: inline-block;
		max-width: 96px;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:nth-child(2) {
		display: none;
	}

	.ui-layout-north > table > tbody > tr:first-child > td:last-child {
		flex-basis: 60%;
	}

	.staff-status-title {
		display: none;
	}

	.staff-status-bar button {
		padding: 6px 8px;
	}

	.fg-toolbar {
		height: auto;
		min-height: 30px;
		overflow-x: auto;
	}

	.ui-dialog-buttonpane .ui-dialog-buttonset {
		display: flex;
		float: none !important;
		justify-content: flex-end;
		gap: 6px;
	}
}

/* The login page does not use jQuery Layout. */
@media screen and (max-width: 420px) {
	body.crm-login-page {
		overflow-y: auto;
		background-size: auto;
	}

	body.crm-login-page > div:first-child {
		display: none;
	}

	body.crm-login-page .ui-dialog {
		top: 16px !important;
		width: calc(100vw - 20px) !important;
		margin: 0 !important;
	}

	body.crm-login-page #cnx table,
	body.crm-login-page #cnx tbody,
	body.crm-login-page #cnx tr,
	body.crm-login-page #cnx td {
		display: block;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}

	body.crm-login-page #cnx td:first-child {
		padding: 7px 0 3px;
	}

	body.crm-login-page #cnx input {
		width: 100%;
		height: 38px;
		box-sizing: border-box;
	}

	body.crm-login-page .crm-microsoft-login {
		width: 100% !important;
		box-sizing: border-box;
	}
}