.app-layout {
	position: relative;
	height: 100%;
	width: 100%;

	.app-content {
		width: calc(100% - 64px);
		overflow: auto;
		z-index: 0;

		.content-container {
			position: relative;
			margin: 0 1rem;
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100%;
		}
	}

	&.docked {
		.app-content {
			width: calc(100% - 240px);
		}
	}
}

.isDarkMode {
	.app-layout {
		.app-content {
			background: #0b0c0e;
		}
	}
}

.isLightMode {
	.app-layout {
		.app-content {
			background: #ffffff;
		}
	}
}

.trial-expiry-banner {
	padding: 8px;
	background-color: #f25733;
	color: white;
	text-align: center;
}

.upgrade-link {
	padding: 0px;
	padding-right: 4px;
	display: inline !important;
	color: white;
	text-decoration: underline;
	text-decoration-color: white;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;

	&:hover {
		color: white;
		text-decoration: underline;
		text-decoration-color: white;
		text-decoration-thickness: 2px;
		text-underline-offset: 2px;
	}
}
