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

	.app-content {
		width: calc(100% - 64px);
		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);
		}
	}
}

.chat-support-gateway {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;

	.chat-support-gateway-btn {
		max-width: 48px;
		width: 48px;
		max-height: 48px;
		height: 48px;
		padding: 12px;
		border-radius: 50%;

		display: flex;
		justify-content: center;
		align-items: center;

		background-color: #f25733;
		border: none;

		&:hover {
			color: white !important;
			border-color: white !important;
		}

		.chat-support-gateway-btn-icon {
			fill: white;
		}
	}
}

.add-credit-card-btn,
.cancel-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.highlight-text {
	border-radius: 2px;
	background: rgba(78, 116, 248, 0.1);
	padding-right: 4px;
	font-family: 'Geist Mono';
	color: var(--bg-robin-500);
}

.add-credit-card-modal {
	.ant-modal-footer {
		display: flex;
		justify-content: flex-end;
	}

	.cancel-btn {
		border-radius: 2px;
		border: none;
		background: var(--bg-slate-500, #161922);
		box-shadow: none;
	}

	.add-credit-card-btn {
		box-shadow: none;
	}
}

.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;
	}
}
