:root {
	--mobile-sidebar-header: 3rem !important;
	--mobile-sidebar-w: 100% !important;
	--mobile-sidebar-h: var(--mobile-sidebar-header) !important;
}

.mobile-layout *::-webkit-scrollbar { width: 4px; }
.mobile-layout {
	position: fixed;
	width: 100%;
	height: 100vh;
}
.mobile-sidebar,
.mobile-sidebar-inner,
.mobile-mainbar {
	display: flex;
}
.mobile-sidebar {
	position: fixed;
	background-color: var(--bs-switch-bg) !important;
	left: 0;
	bottom: 0;
	border-top: 1px solid var(--bs-border-color);
	border-right: none;
	overflow: hidden;
	flex-grow: 1;
	width: var(--mobile-sidebar-w);
	height: var(--mobile-sidebar-h);
	z-index: 2 !important;
}
.mobile-sidebar-header { display: none; }
.mobile-sidebar-inner {
	flex-direction: row;
	width: 100%;
}
.mobile-sidebar .nav { width: 100%; }
.mobile-sidebar .nav-link {
	color: var(--bs-switch-color) !important;
	flex-direction: column;
	align-items: center;
	justify-content: center !important;
	line-height: .1;
	border-radius: 0;
	margin: 0;
	padding: 0;
	height: var(--mobile-sidebar-header);
}
.mobile-sidebar .nav-link .icon { font-size: 1.5rem; }
.mobile-sidebar .nav-link .item-text { font-size: .65rem !important; }
.mobile-sidebar .nav-item.active .nav-link,
.mobile-sidebar .nav-item .nav-link.active {
	font-weight: 800 !important;
}
.mobile-mainbar {
	position: static;
	flex-direction: column;
	background-color: var(--bs-body-bg);
	left: 0;
	width: 100%;
	height: 100vh !important;
}
.mobile-mainbar.full { height: 100vh !important; }
.mobile-mainbar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bs-switch-bg) !important;
	border-bottom: 1px solid var(--bs-border-color);
	padding: 0 .25rem;
	width: 100%;
	height: var(--mobile-sidebar-header);
	z-index: 1021;
}
.mobile-content {
	display: flex;
	flex-direction: column;
	top: var(--mobile-sidebar-header);
	background-color: var(--bs-body-bg);
	padding-bottom: 3rem;
	overflow-y: scroll !important;
	width: 100%;
	height: calc(100vh - calc(var(--mobile-sidebar-header) * 2));
}
.mobile-content.noheader { top: 0; }
.mobile-content.content-full {
	z-index: 3;
	height: calc(100vh - var(--mobile-sidebar-header));
}
.scrollable { overflow-y: auto !important; }
.search-result { z-index: 1; }

@media (min-width: 992px) {
	:root {
		--mobile-sidebar-w: 90px !important;
		--mobile-sidebar-h: 100vh !important;
	}
	.mobile-sidebar {
		flex-direction: column;
		border-top: none;
		border-right: 1px solid var(--bs-border-color);
		padding: 0;
		overflow-y: hidden;
		width: var(--mobile-sidebar-w);
		height: var(--mobile-sidebar-h);
	}
	.mobile-sidebar-header {
		display: flex;
		flex-wrap: nowrap;
		gap: 2rem;
		white-space: nowrap;
		width: 100%;
		height: var(--mobile-sidebar-header);
	}
	.mobile-sidebar-inner {
		flex-direction: column;
		justify-content: space-between;
		overflow-y: auto;
		height: calc(100vh - var(--mobile-sidebar-header));
	}
	.mobile-sidebar .nav { padding: .5rem; }
	.mobile-sidebar .nav-link {
		flex-direction: row !important;
		justify-content: start !important;
		border-radius: 1rem !important;
		padding: 2rem 1rem !important;
		width: 100% !important;
	}
	.mobile-sidebar .nav-link .icon { font-size: 2rem; }
	.mobile-sidebar .nav-link .item-text { display: none !important; }

	.mobile-mainbar {
		margin-left: var(--mobile-sidebar-w);
		width: calc(100% - 90px);
	}
	.mobile-content.noheader  { height: calc(100vh - var(--mobile-sidebar-header)); }
}
@media (min-width: 1200px) {
	:root {
		--mobile-sidebar-w: 25% !important;
		--mobile-sidebar-h: 100vh !important;
	}
	.mobile-sidebar {
		width: var(--mobile-sidebar-w);
		height: var(--mobile-sidebar-h);
	}
	.mobile-sidebar .nav-link .item-text {
		display: flex !important;
		font-size: 1.25rem !important;
	}
	.mobile-mainbar {
		margin-left: var(--mobile-sidebar-w);
		width: calc(100% - 25%);
	}
}
.mobile-sidebar-header { height: var(--mobile-sidebar-header); }
.mobile-sidebar-w { width: var(--mobile-sidebar-w); }
.mobile-sidebar-h { height: var(--mobile-sidebar-h); }

.spa-indicator {
	display: none;
	position: fixed;
	top: var(--mobile-sidebar-h);
	left: 0;
	background-color: var(--bs-switch-bg);
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(100vh - var(--mobile-sidebar-h));
	z-index: 3;
}
@media (min-width: 992px) {
	.spa-indicator {
		left: 90px;
		width: calc(100% - 90px);
	}
}
@media (min-width: 1200px) {
	.spa-indicator {
		left: 25%;
		width: calc(100% - 25%);
	}
}
.notifcationPermission {
	display: flex;
	flex-direction: column;
	position: fixed;
	bottom: 0;
	left: 0;
	color: var(--bs-text-body);
	background-color: var(--bs-switch-bg);
	border-top: 1px solid var(--bs-border-color);
	border-top-left-radius: 1rem !important;
	border-top-right-radius: 1rem !important;
	width: 100%;
	z-index: 5;
}

.drag-handle {
	background: #ccc !important;
	border-radius: 3px;
	margin: 0 auto;
	padding: 0;
	width: 50px;
	height: 7px !important;
}
.form-control.form-chat,
.form-control.form-chat:hover,
.form-control.form-chat:active,
.form-control.form-chat:focus {
	background-color: transparent !important;
	border-radius: 0;
	box-shadow: none !important;
	user-select: text;
	overflow-wrap: break-word;
	word-wrap: break-word;
	max-height: 180px;
}
[contenteditable]:empty::before {
	content: attr(placeholder);
	color: gray;
	cursor: text;
}
.rounded-top-start-0 { border-top-left-radius: 0 !important; }
.rounded-top-end-0 { border-top-right-radius: 0 !important; }
.rounded-bottom-start-0 { border-bottom-left-radius: 0 !important; }
.rounded-bottom-end-0 { border-bottom-right-radius: 0 !important; }

.chat-item > .chat-item-drop { display: none; } 
.chat-item:hover > .chat-item-drop { display: flex; }
.chat-form { z-index: 1080 !important; }

.message-list,
.message-room {
	width: 100%;
	height: 100vh !important;
}
.message-wrapper {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.message-header,
.message-chatbox {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
.message-header {
	position: absolute;
	top: 0;
	justify-content: space-between;
	background-color: var(--bs-switch-bg);
	border-bottom: 1px solid var(--bs-border-color);
	padding: 0 1rem;
	width: 100%;
	height: var(--mobile-sidebar-header);
	z-index: 4;
}
.message-body {
	display: flex;
	flex-direction: column;
	padding-top: var(--mobile-sidebar-header);
	width: 100%;
	height: 100%;
	max-height: 100vh;
	z-index: 3 !important;
}
.message-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	background-color: var(--bs-body-bg);
	gap: .5rem;
	padding: .5rem 0;
	overflow: scroll;
	width: 100%;
	height: 100%;
}
.message-chatbox {
	bottom: 0;
	gap: .5rem;
	background-color: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color);
	padding: .5rem 1rem;
	width: 100%;
	height: auto;
	z-index: 5 !important;
}
@media (min-width: 992px) {
	.message-list { width: 400px; }
	.message-room { width: calc(100% - 400px); }
	.message-header { width: calc(100% - calc(var(--mobile-sidebar-w) + 400px)); }
}