[data-onscreenchat-inact-userid] {
	opacity: .3 !important;
}

.ilOnScreenChatWindowHeaderTooltip {
	ul {
		text-align: left;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
}

#onscreenchat-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	/*height: 100px;*/
	overflow: visible;
	pointer-events: none;
	z-index: 1039;

	.iosOnScreenChat{
		margin-right: -3px;
	}

	.popover {
		max-width: 200px;
		min-height: 100px;
		word-break: break-word;
		a {
			border: 1px solid white;
			padding: 1px 0 1px 2px;

			&:hover {
				border: 1px solid silver;
			}

			img {
				max-width: 19px;
				max-height: 19px;
			}
		}
	}

	.row{
		position: relative;
	}

	.chat-window-wrapper {
		bottom: 0;
		padding-left: 5px;
		padding-right: 5px;
		width: 278px;
		height: 377px;
		background-color: @body-bg;

		&:last-child {
			padding-left: 0;
		}

		.chat-img img {
			height: 30px;
			width: 30px;
		}

		li.left .chat-img {
			margin-right: 5px;
		}

		li.right .chat-img {
			margin-left: 5px;
		}

		.iosOnScreenChatBodyMsg {
			overflow-x: hidden;
			overflow-wrap: break-word;
			word-wrap: break-word;
			-ms-hyphens: auto;
			-moz-hyphens: auto;
			-webkit-hyphens: auto;
			hyphens: auto;
		}

                .panel-footer-for-shadow
                {
                    height: 0;
                    width: 0;
                }

		.iosOnScreenChatMessageContainer {
                    resize: none;
                    width: 100%;
                    border: 1px solid;
                    background: white;
                    height: 25px;
		}

		.osc_truncate_username{
			width: 150px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
		}
		.text-muted-left{
			width: 160px;
			margin-top: -4px;
			text-align: right;
		}
		.text-muted-right{
			width: 160px;
			margin-top: -4px;
			text-align: left;
		}
		.osc_truncate_username_left{
			width: 160px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			margin-bottom: -5px;
			text-align: right;
		}

		.osc_truncate_username_right{
			width: 160px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
		}

		.chat {
			list-style: none;
			margin: 0;
			padding: 0;

			li.separator:not(:first-child) {
				margin-top: 10px;
			}

			li.header:not(:first-child) {
				margin-top: 15px;
			}

			li {
				padding-bottom: 5px;

				&.separator {
					text-align: center;
					background-color: @il-main-dark-bg;

					p {
						font-size: .9em;
					}
				}

				&.header, &.message {
					padding-left: 15px;
					padding-right: 15px;
				}

				&.message.right {
					.chat-body {
						text-align: justify;
						float: right;
						max-width: 85%;
					}
				}

				&.message.left {
					.chat-body {
						text-align: justify;
						width: 85%;
					}
				}

				.chat-body {
					.header {
						strong {
							font-size: .8em;
						}
					}

					p {
						margin: 0;
						color: #777;
						font-size: .9em;
					}
				}
			}
		}

		.panel {
			pointer-events: auto;
			margin: 0;
			border: 1px solid #dcdcdc;

			.panel-heading {
				font-size: 80%;
				display: block;
				padding: 5px 5px 5px 15px;
				pointer-events: auto;
				margin: 0;
				vertical-align: middle;

				.btn {
					padding: 0 4px;
				}

				img {
					width: 16px;
					height: 16px;
					vertical-align: sub;
				}

				.close {
					margin-top: -2px;
					margin-left: 5px;
				}
			}

			.panel .slidedown .glyphicon, .chat .glyphicon {
				margin-right: 5px;
			}

			.panel-body {
				height: auto;
				overflow-y: scroll;
				position: relative;
				height: 250px;
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 0;

				.fader {
					position: -webkit-sticky;
					position: sticky;
					bottom: 0;
					width: 100%;
					height: 30px;
					background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
					background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
				}
			}

			.panel-footer {
				position: relative;
				border-top: none;
				padding-top: 15px ;
				padding-bottom: 15px;
			}
		}

		.iosOnScreenChatEmoticonsPanel {
			position: absolute;
			float: right;
			bottom: 21px;
			z-index: 3;
			right: 28px;

			> a {
				display: block;
				height: 14px;
				width: 14px;
				background: url("@{il-background-images-path}emoticons_trigger.png") no-repeat;
				background-size: cover;
				z-index: 1000;
			}
		}
	}
}

.iosOnScreenChatModalBody {
	.ui-menu-item {
		padding: 5px;
	}
	.ui-menu-item-wrapper {
		cursor: pointer !important;
	}
}

.ilOnScreenChatSearchLoader {
	vertical-align: middle;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	display: inline-block;
}
