.group-messages {

	.group-subnav {
		margin-bottom: var(--bb-rl-space-200);

		.subnav {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-100);
			flex-wrap: wrap;
			list-style: none;
			padding: 0;
			margin: 0;

			a {
				display: inline-block;
				font-size: var(--bb-rl-font-size-sm);
				font-weight: 500;
				line-height: var(--bb-rl-base-line-small);
				border: 1px solid var(--bb-rl-border-secondary-color);
				border-radius: var(--bb-rl-radius-full);
				padding: 6px var(--bb-rl-space-200);
				color: var(--bb-rl-text-secondary-color);
				text-transform: lowercase;

				&::first-letter {
					text-transform: uppercase;
				}
			}

			li.selected {

				a {
					background-color: var(--bb-rl-background-color);
					color: var(--bb-rl-text-color);
					border-color: var(--bb-rl-border-quinery-color);
				}
			}
		}
	}
}

#group-messages-container {
	display: flex;
	background: var(--bb-rl-background-color);
	border-radius: var(--bb-rl-radius-lg);
	margin: 0 auto;
	padding: var(--bb-rl-space-200) var(--bb-rl-space-200) 0;
	border: 1px solid var(--bb-rl-border-secondary-color);

	.bp-messages-feedback {
		margin-bottom: var(--bb-rl-space-200);
	}

	.bp-messages-feedback-hide {
		display: none;
	}

	.bp-select-members-wrap {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.bp-invites-feedback {
			width: 100%;
		}

		.group-messages-helper-text {
			font-size: 16px;
			font-weight: 500;
			color: var(--bb-rl-text-secondary-color);
			margin-right: var(--bb-rl-space-50);
		}

		.select2.select2-container {
			flex: 1;

			.select2-selection--multiple {
				background-color: transparent;
				border: 0;
			}

			.select2-selection__rendered .select2-selection__choice {
				font-size: var(--bb-rl-font-size-sm);
				font-weight: 500;
				background-color: var(--bb-rl-background-color);
				border: 1px solid var(--bb-rl-border-secondary-color);
				border-radius: var(--bb-rl-radius-full);
				padding: var(--bb-rl-space-50) var(--bb-rl-space-100);
			}

			.bb-rl-select2-selection-user {
				display: flex;
				align-items: center;
				gap: var(--bb-rl-space-50);

				.select2-user-avatar {
					height: 24px;
					width: 24px;
					border-radius: var(--bb-rl-radius-full);
				}
			}

			.select2-selection__choice__remove {
				display: none;
			}

			body.private-message & {

				.select2-selection__choice__remove {
					display: block;
					font-size: 0;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 5px;
					cursor: pointer;
					left: inherit;
					border: 0;
					line-height: 1 !important;
					margin: 0 5px 0 0 !important;

					&:before {
						content: "\e4f6";
						color: var(--bb-rl-icon-secondary-color);
						font-family: bb-icons-rl;
						font-size: 16px;
						line-height: 1;
					}
				}

				.select2-selection__rendered .select2-selection__choice {
					position: relative;
					padding-right: 30px;
				}
			}
		}
	}
}

#send_group_message_form .select2-search__field {
	display: none;
}

.messages .select2-dropdown .select2-results__option[aria-selected="true"] {
	display: none;
}

body.groups.messages span.select2-dropdown {
	display: none;
}

div#bp-group-message-content {
	height: 100%;
	display: flex;
	flex-flow: column;
}

.group-messages {

	.bb-groups-messages-left {
		flex: 0 0 300px;
		min-width: 0;
	}

	.bb-groups-messages-right {
		flex: 1;

		.bb-title,
		.group-messages-compose {
			display: none;
		}

		.bb-groups-messages-right-top {
			margin-left: calc(var(--bb-rl-space-200) * -1);
			margin-right: calc(var(--bb-rl-space-200) * -1);
			margin-bottom: var(--bb-rl-space-300);
			padding: 0 var(--bb-rl-space-200) var(--bb-rl-space-100);
			border-bottom: 1px solid var(--bb-rl-border-secondary-color);
		}

		&.full_width {

			.bb-groups-messages-right-top {
				padding-bottom: var(--bb-rl-space-200);
			}

			.bb-title-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: var(--bb-rl-space-100);
				margin-top: -5px;
			}

			.group-messages-compose {
				font-size: 0;

				&:before {
					content: "\e34c";
					color: var(--bb-rl-icon-color);
					font-size: 24px;
					font-family: bb-icons-rl;
				}
			}

			#send_group_message_form {
				min-height: auto;
				height: auto;

				.group-messages-helper-text {
					display: none;
				}
			}

			.bb-title {
				display: block;
				font-size: 16px;
				font-weight: 500;
				border: 0;
				padding-bottom: 0;
			}
		}

		#send_group_message_form {
			min-height: 50vh;
			min-height: 500px;
			height: auto;
			display: flex;
			flex-direction: column;
		}

		.medium-editor-element {
			outline: none;

			&:not(.emojionearea) {
				font-size: 14px;
				max-height: 300px;
				min-height: 55px;
				overflow-y: auto;
				overflow-x: hidden;
				padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
			}

			p:last-child {
				margin-bottom: 0;
			}

			&:after {
				color: var(--bb-rl-text-tertiary-color);
				pointer-events: none;
			}

			img.emoji,
			img.emojioneemoji {
				vertical-align: middle;
			}
		}
	}

	&.public-message {

		.bb-title {
			display: block;
			color: var(--bb-rl-text-color);
			font-size: var(--bb-rl-font-size-base);
			font-weight: 500;
			padding: 0 var(--bb-rl-space-200) var(--bb-rl-space-200);
			border-bottom: 1px solid var(--bb-rl-border-secondary-color);
			margin: 0 calc(var(--bb-rl-space-200) * -1) 0 calc(var(--bb-rl-space-200) * -1);
		}

		.group-messages-compose {
			display: none;
		}

		.bp-select-members-wrap {
			padding: var(--bb-rl-space-100) 0 0 var(--bb-rl-space-100);
		}

		.bp-select-members-wrap .bp-invites-feedback .bp-messages-feedback {
			margin-top: var(--bb-rl-space-100);
		}
	}

	&.private-message {

		#group-messages-container {
			padding: 0 var(--bb-rl-space-200) 0;
		}

		.bb-groups-messages-right {

			#send_group_message_form {
				min-height: 50vh;
				height: auto;
			}

			.bb-groups-messages-right-bottom {
				margin: auto var(--bb-rl-space-300) var(--bb-rl-space-400);
			}

			.group-messages-type {
				margin-left: auto;
				background-color: var(--bb-rl-background-secondary-color);
				border-color: var(--bb-rl-border-secondary-color);
				padding: 4px var(--bb-rl-space-400) 4px var(--bb-rl-space-100);
				background-position: right 10px center;
			}

			#group-messages-new-submit {
				margin-left: var(--bb-rl-space-300);
			}

			.bb-groups-messages-right-top {
				margin: 0;
				margin-bottom: var(--bb-rl-space-300);

				.bp-messages-feedback {
					width: 100%;
					margin: var(--bb-rl-space-100);
				}
			}

			.bb-title {
				display: block;
				color: var(--bb-rl-text-color);
				font-size: var(--bb-rl-font-size-base);
				font-weight: 500;
				padding: var(--bb-rl-space-200);
				border-bottom: 1px solid var(--bb-rl-border-secondary-color);
				margin: 0 calc(var(--bb-rl-space-400) * -1) 0 calc(var(--bb-rl-space-200) * -1);
			}

			.add-more-members {
				display: none;
			}

			.bp-select-members-wrap {
				padding: var(--bb-rl-space-100) 0 0;
				min-height: 50px;
			}

			.bp-group-message-wrap {
				color: var(--bb-rl-text-color);
				font-size: var(--bb-rl-font-size-base);
				font-weight: 500;
			}
		}

		span.select2-dropdown.select2-dropdown--below {
			display: none;
		}

		@media screen and (max-width: 1400px) {

			.bb-groups-messages-right-bottom {

				#whats-new-toolbar {
					justify-content: center;
					padding: var(--bb-rl-space-100) var(--bb-rl-space-100);
				}

				.bb-rl-separator {
					width: 100%;
					height: 0;
				}

				.group-messages-type {
					margin-left: 0;
				}

				#bb-rl-editor-toolbar:has(.medium-editor-toolbar.active):has(.medium-editor-toolbar-active) {
					bottom: 80px;
				}
			}
		}

	}
}

.bb-groups-messages-right-bottom {
	border: 1px solid var(--bb-rl-border-tertiary-color);
	border-radius: var(--bb-rl-radius-lg);
	margin: var(--bb-rl-space-200) var(--bb-rl-space-100);
	margin-top: auto;

	#whats-new-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-top: 1px solid var(--bb-rl-border-secondary-color);
		padding: var(--bb-rl-space-100) var(--bb-rl-space-300);
		position: relative;
	}

	.post-elements-buttons-item {
		display: flex;
		margin-right: var(--bb-rl-space-100);

		.toolbar-button {
			display: flex;
			border: 0.5px solid transparent;
			padding: var(--bb-rl-space-50);

			&.active {
				background-color: var(--bb-rl-background-secondary-hover-color);
				border-color: var(--bb-rl-border-secondary-color);
				border-radius: var(--bb-rl-radius-md);

				[class*="bb-icons-"] {
					color: var(--bb-rl-icon-color);
				}
			}
		}

		[class*="bb-icons-"] {
			color: var(--bb-rl-icon-secondary-color);
			font-size: 24px;
		}

		.emojionearea .emojionearea-button {
			border: 0.5px solid transparent;
			padding: var(--bb-rl-space-50);

			&:before {
				content: "\e436";
				color: var(--bb-rl-icon-secondary-color);
				font-family: bb-icons-rl;
				font-size: 24px;
			}

			&.active {
				background-color: var(--bb-rl-background-secondary-hover-color);
				border-color: var(--bb-rl-border-secondary-color);
				border-radius: var(--bb-rl-radius-md);

				&:before {
					color: var(--bb-rl-icon-color);
				}
			}
		}
	}

	.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom {
		top: auto;
		bottom: 40px;
	}

	.bb-rl-separator {
		display: inline-flex;
		align-self: center;
		width: 1px;
		height: 16px;
		background-color: var(--bb-rl-border-tertiary-color);
		margin: 0 8px 2px 0;
	}

	#group-messages-new-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		width: 24px;
		cursor: pointer;
		position: relative;
		margin-left: auto;

		&:before {
			display: block;
			content: "\e396";
			color: var(--bb-rl-icon-secondary-color);
			font-family: bb-icons-rl;
			font-size: 24px;
			line-height: 1;
		}

		&:has(.loading) {
			pointer-events: none;

			&:before {
				content: "";
				display: inline-block;
				height: 22px;
				width: 22px;
				border: 2px solid var(--bb-rl-border-quaternary-color);
				border-top-color: var(--bb-rl-border-tertiary-color);
				border-radius: var(--bb-rl-radius-full);
				animation: spin 3s infinite linear;
			}
		}

		#send_group_message_button {
			position: absolute;
			inset: 0;
			opacity: 0;
			width: auto;
			min-width: auto;
			margin: 0;
			padding: 0;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
		}
	}

	[class*="attached-gif-container"] {
		margin-bottom: 0;
		background: none !important;
		height: auto !important;
		width: auto !important;
		min-height: auto !important;
		display: table;
		position: relative;

		&.closed {
			display: none;
		}

		.gif-image-container img {
			background-color: var(--bb-rl-background-secondary-color);
			height: 100px;
			width: 100px;
			object-fit: cover;
			border-radius: var(--bb-rl-radius-md);
			margin: 0 0 var(--bb-rl-space-200) var(--bb-rl-space-200);
		}

		.gif-image-remove {
			box-shadow: none;
			right: -8px;
			top: -8px;
			position: absolute;
			background-color: var(--bb-rl-background-color);
			border-radius: var(--bb-rl-radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			font-size: 14px;
			padding: 2px;
			cursor: pointer;
		}
	}

	#whats-new-toolbar:has(.medium-editor-toolbar.active) {
		margin-top: 45px;
		visibility: visible;
	}

	#bb-rl-editor-toolbar {
		position: absolute;
		left: 0;
		bottom: 45px;
		visibility: hidden;
	}

	@media screen and (max-width: 440px) {

		#whats-new-toolbar {
			flex-wrap: wrap;
			justify-content: center;
		}

		.bb-rl-separator {
			width: 100%;
			height: 0;
		}

		#group-messages-new-submit {
			margin-left: 0;
		}
	}
}

.bb-groups-messages-left {

	.total-members-text {
		font-size: var(--bb-rl-font-size-base);
		font-weight: 500;
		color: var(--bb-rl-text-color);
		border-bottom: 1px solid var(--bb-rl-border-secondary-color);
		margin: 0 0 var(--bb-rl-space-100) calc(var(--bb-rl-space-200) * -1);
		padding: var(--bb-rl-space-200);
	}

	.bp-messages-search-form {
		border: 1px solid var(--bb-rl-border-tertiary-color);
		border-radius: var(--bb-rl-radius-full);
		padding: var(--bb-rl-space-50) var(--bb-rl-space-100);
		margin: 0 var(--bb-rl-space-200) var(--bb-rl-space-100) 0;
		position: relative;

		&:before {
			content: "\e30c";
			color: var(--bb-rl-icon-secondary-color);
			font-family: bb-icons-rl;
			font-size: 16px;
			line-height: 1;
			position: absolute;
			left: 9px;
			top: 50%;
			transform: translateY(-50%);
		}

		#group_messages_search {
			color: var(--bb-rl-text-tertiary-color);
			font-size: var(--bb-rl-font-size-sm);
			line-height: 1.2;
			border: 0;
			padding: 0 0 0 25px;
			outline: none;
		}

		button[type="submit"] {
			position: absolute;
			opacity: 0;
			left: 7px;
			top: 7px;
			height: 20px;
			width: 20px;
			cursor: pointer;
		}

		.search-form_reset {
			font-size: 15px;
			line-height: 1;
			color: var(--bb-rl-icon-secondary-color);
			background-color: transparent;
			border: 0;
			padding: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 12px;
			cursor: pointer;
			display: none;
		}
	}

	.bp-group-message-wrap {
		margin: var(--bb-rl-space-200) 0 var(--bb-rl-space-200);

		.bp-group-message-label {
			display: flex;
			align-items: center;
			color: var(--bb-rl-text-color);
			font-size: 14px;
			font-weight: 500;
		}
	}

	.all-members {
		max-height: 550px;
		overflow-y: auto;
		overflow-x: hidden;

		li {
			display: flex;
			align-items: center;
			margin-bottom: var(--bb-rl-space-100);
			padding: var(--bb-rl-space-50) 0;
			position: relative;
			padding-left: 30px;

			> .action {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);

				button {
					border: 0;
					background-color: transparent;
					padding: 0;
					cursor: pointer;

					span.icons:before {
						content: "";
						margin-right: var(--bb-rl-space-100);
						display: inline-block;
						vertical-align: text-top;
						width: 16px;
						height: 16px;
						background: var(--bb-rl-background-color);
						border-radius: var(--bb-rl-radius-sm);
						border: 1px solid var(--bb-rl-border-tertiary-color);
					}
				}
			}

			&.selected {

				> .action {

					button {

						span.icons {

							&:before {
								background: var(--bb-rl-background-brand-primary-color);
								border-color: var(--bb-rl-background-brand-primary-color);
							}

							&:after {
								content: "\e182";
								position: absolute;
								left: 3px;
								top: 3px;
								font-family: bb-icons-rl;
								font-weight: 400;
								color: var(--bb-rl-text-white-color);
								font-size: 10px;
								display: block;
							}
						}
					}
				}
			}
		}

		.item-avatar img {
			height: 32px;
			width: 32px;
			border-radius: var(--bb-rl-radius-full);
			object-fit: cover;
			margin-right: var(--bb-rl-space-100);
		}

		.member-name a {
			color: var(--bb-rl-text-color);
			font-size: 14px;
			font-weight: 500;
		}
	}

	.bb-panel-footer {
		display: none;
	}
}

@media screen and (max-width: 1650px) {

	.bb-rl-content-wrapper:has(.bb-rl-secondary-container .bb-rl-widget-sidebar) {

		#group-messages-container {

			.group-messages.private-message & {
				flex-direction: column;
			}
		}

		.bb-groups-messages-left {

			.group-messages & {
				flex: 0 0 100%;
				border-right: 0;
				border-bottom: 1px solid var(--bb-rl-border-secondary-color);
				padding-bottom: var(--bb-rl-space-200);
			}
		}

		.bb-groups-messages-left .total-members-text {
			margin-right: calc(var(--bb-rl-space-200) * -1);
		}
	}

}

@media screen and (max-width: 1200px) {

	.group-messages.private-message #group-messages-container {
		flex-direction: column;
	}

	.group-messages .bb-groups-messages-left {
		flex: 0 0 100%;
		border-right: 0;
		border-bottom: 1px solid var(--bb-rl-border-secondary-color);
		padding-bottom: var(--bb-rl-space-200);
	}

	.bb-groups-messages-left .total-members-text {
		margin-right: calc(var(--bb-rl-space-200) * -1);
	}
}

@media screen and (min-width: 1081px) {

	.bb-groups-messages-left {
		border-right: 1px solid var(--bb-rl-border-secondary-color);
	}
}
