:root {
	--mt-color-black: #212125;
	--mt-color-paper: #e5e3db;
	--mt-drawer-width: 260px;

	--bh-color-primary: var(--mt-color-black);
}

html {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mt-img {
	display: block;
	width: 100%;
	border-radius: var(--bh-round-md);
}

.mt-workspace {
	display: flex;
	gap: var(--bh-xl);
	flex: 1;
}

.mt-drawer {
	background-color: var(--mt-color-black);
	min-width: var(--mt-drawer-width);
}

	.mt-drawer-inner {
		position: sticky;
		top: 0;
	}

.mt-navItems {
	display: flex;
	flex-direction: column;
	gap: var(--bh-lg);
}

	.mt-navItemsClient {
		display: flex;
		flex-direction: column;
		padding: var(--bh-lg);
		gap: var(--bh-lg);
		border-bottom-left-radius: var(--bh-round-lg);
		background-color: #f6f6f6;
		border-right: 1px solid #e2e2e2;
		line-height: 1.3;
	}

		.mt-navItemsClient-client {
			position: relative;
			padding-left: var(--bh-md);
		}

			.mt-navItemsClient-clientName {
				font-weight: bold;
				font-size: 1.1rem;
			}

			.mt-navItemsClient-clientSwitchLink {
				color: var(--bh-color-link);
				font-weight: 600;
				text-decoration: none;
				font-size: var(--bh-font--xs);
			}

			.mt-navItemsClient-clientSettingsBtn {
				position: absolute;
				right: 0;
				top: 0;
			}

	.mt-navItemsGlobal {
		display: flex;
		flex-direction: column;
		margin: var(--bh-lg);
		gap: var(--bh-lg);
	}
		.mt-navItemsGlobal .mt-navGroup-title {
			color: #f0f0f0;
		}

		.mt-navItemsGlobal .mt-navItem {
			color: #fff;
		}

	.mt-navItem {
		display: inline-flex;
		align-items: center;
		gap: var(--bh-md);
		width: 100%;
		color: var(--bh-color-primary);
	}

	.mt-navGroup {
		padding: var(--bh-md);
		display: flex;
		flex-direction: column;
		gap: var(--bh-lg);
	}

		.mt-navGroup-title {
			text-transform: uppercase;
			color: var(--bh-color-gray);
			font-size: var(--bh-font--xs);
			font-weight: bold;
		}

.mt-header {
	display: flex;
	justify-content: space-between;
	padding: var(--bh-xl) var(--bh-xxl);
	background-color: var(--mt-color-black);
}

	.mt-headerLink {
		text-decoration: none;
		font-size: var(--bh-font--xl);
		font-weight: bold;
		color: var(--mt-color-paper);
	}

		.mt-headerLink:hover,
		.mt-headerLink:visited,
		.mt-headerLink:active {
			color: var(--mt-color-paper);
		}

	.mt-headerClient {
		border-radius: 999px;
		padding: var(--bh-sm) var(--bh-md);
		background-color: var(--mt-color-black);
		display: flex;
		flex-direction: column;
	}
		.mt-headerClient-name {
			color: var(--mt-color-paper);
			font-weight: bold;
			font-size: var(--bh-font--lg);
		}

		.mt-headerClient-swapLink {
			font-size: var(--bh-font--xs);
			text-decoration: none;
			text-align: right;
			font-weight: 600;
		}

.mt-check {
	font-size: 2em;
	color: var(--bh-color-gray--light);
}

	.mt-check--checked {
		color: var(--bh-color-success);
	}

.mt-clientList {
	display: flex;
	flex-direction: column;
	gap: var(--bh-lg);
}

	.mt-clientList-client {
		display: flex;
		justify-content: space-between;
		border: 1px solid var(--bh-color-secondary);
		border-radius: var(--bh-round-md);
		padding: var(--bh-lg) var(--bh-lg) var(--bh-lg) var(--bh-xl);
	}

		.mt-clientList-clientName {
			gap: var(--bh-lg);
			display: flex;
			font-weight: 500;
			align-items: center;
		}

.mt-authbox {
	display: flex;
	flex-direction: column;
	gap: var(--bh-lg);
	box-shadow: 0 var(--bh-xxs) var(--bh-sm) rgba(0, 0, 0, .2);
	border-radius: var(--bh-round-lg);
	padding: var(--bh-xxl);
}

	.mt-authbox-form {
		width: 100%;
		align-items: initial;
	}

		.mt-authbox-form .bh-btn {
			justify-content: center;
		}


.mt-transactionAuditLogList { }
	.mt-transactionAuditLogList .bh-form .bh-btn {
		align-self: flex-end;
	}

	.mt-transactionAuditLogDetail .bh-codeBlock {
		width: 100%;
		overflow-x: auto;
	}

.mt-logList {}
	.mt-logList .bh-table {
		width: 100%;
	}

.mt-userList {}
	.mt-userList .bh-table {
		width: 100%;
	}

.mt-customerList {}
	.mt-customerList .bh-table {
		width: 100%;
	}

.mt-customerOrderList {}
	.mt-customerOrderList .bh-table {
		width: 100%;
	}



/**
 * Bananahost overrides
 */

.bh-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bh-main {
	padding-left: var(--bh-xxl);
	padding-right: var(--bh-xxl);
}

.bh-section {
	padding-top: var(--bh-xl);
	padding-bottom: var(--bh-xl);
}

.bh-form {
	align-items: unset;
}

	.bh-formField {
		flex: 1;
	}

/* TODO: integrate in bananahost */

/* NOTE: Introduce .bh wrapper element to not make this affect other styling */
*, *::before, *::after {
	box-sizing: border-box;
}

.bh-btn {
	align-items: center;
	gap: var(--bh-md);
}

.bh-formRow {
	display: flex;
	gap: var(--bh-lg);
}