/* region 01. base */
.bx-im-message {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	margin: 10px 0 5px;
	outline: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}
.bx-im-message.bx-im-message-type-self {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	margin-right: 15px;
	margin-left: 0;
}

.bx-im-dialog-list-item+.bx-im-dialog-list-item .bx-im-message {
	margin-top: 0;
}

.bx-im-message-without-avatar {
	margin-left: 15px;
}
.bx-im-message-without-menu {
	margin-right: 15px;
}
.bx-im-message-without-menu.bx-im-message-type-opponent {
	margin-right: 30px;
}

/* endregion */

/* region 02. avatar */
.bx-im-message-avatar {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 65px;
    height: 52px;
	text-align: center;
}

.bx-im-message-avatar-image {
	width: 40px;
    height: 40px;
	border-radius: 50%;
	background-size: cover;
	margin: 15px auto 0;
	cursor: pointer;
}
.bx-im-message-avatar-image-source {
	width: 40px;
    height: 40px;
	border-radius: 50%;
}
.bx-im-message-avatar-image-default {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M72.7857%2062.254c0-2.311-3.029-4.951-9-6.489a20.3%2020.3%200%200%201-5.7-2.584c-.383-.218-.325-2.236-.325-2.236l-1.922-.292c0-.164-.164-2.584-.164-2.584%202.3-.77%202.063-5.314%202.063-5.314%201.46.807%202.411-2.784%202.411-2.784%201.728-4.994-.86-4.693-.86-4.693.822-3.738%200-9.2001%200-9.2001-1.15-10.116-18.47-7.37-16.417-4.065-5.062-.934-3.907%2010.551-3.907%2010.551l1.1%202.969c-2.156%201.392-.658%203.079-.585%205.02.106%202.865%201.861%202.272%201.861%202.272.109%204.7281%202.446%205.3501%202.446%205.3501.44%202.969.166%202.464.166%202.464l-2.082.25a8.2231%208.2231%200%200%201-.164%202.013c-2.449%201.093-2.971%201.727-5.406%202.793-4.7%202.053-9.808%204.723-10.715%208.3171-.907%203.594-2.585%2011.983-2.585%2011.983h53l-3.215-13.741z%22/%3E%0A%3C/svg%3E%0A');
	background-repeat: no-repeat;
}

.bx-im-dialog-list-item+.bx-im-dialog-list-item .bx-im-message-avatar-image {
	display: none;
}
/* endregion */

.bx-im-message-box {
	/*overflow: hidden; comment for reaction*/
}

.bx-im-message-command-wrap { display: inline-block; }
.bx-im-message-command { border-bottom: 1px dashed #2067B0; cursor: pointer; color: #2067B0; display: inline-block; }
.bx-im-message-command-data { display: none; }

/* region 03. status: sending, retry, menu  */

.bx-im-message-box-status {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 33px;
    height: 52px;
	position: relative;
}

.bx-im-message-sending {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%2010c0%204.9706%204.0294%209%209%209s9-4.0294%209-9-4.0294-9-9-9c-2.4048%200-4.5893.9432-6.2038%202.4798%22%20stroke%3D%22%2380868E%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	-webkit-animation: bx-im-message-sending .8s linear infinite;
	animation: bx-im-message-sending .8s linear infinite;
	margin-top: 16px;
	margin-left: 7px;
	opacity: 1;
	position: absolute;
}
@-webkit-keyframes bx-im-message-sending {
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}
@keyframes bx-im-message-sending {
	0% {
		-webkit-transform:rotate(0deg);
		        transform:rotate(0deg);
	}
	100%
	{
		-webkit-transform:rotate(360deg);
		        transform:rotate(360deg);
	}
}
.bx-im-message-sending-enter-active {
	-webkit-animation: bx-im-message-sending-show 10s linear;
	animation: bx-im-message-sending-show 10s linear;
}
.bx-im-message-sending-leave-active {
	opacity: 0;
}

@-webkit-keyframes bx-im-message-sending-show {
	0% {
		opacity: 0;
	}
	92% {
		opacity: 0;
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		opacity: 1;
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}
@keyframes bx-im-message-sending-show {
	0% {
		opacity: 0;
	}
	92% {
		opacity: 0;
		-webkit-transform:rotate(0deg);
		        transform:rotate(0deg);
	}
	100% {
		opacity: 1;
		-webkit-transform:rotate(360deg);
		        transform:rotate(360deg);
	}
}

.bx-im-message-status-retry {
	width: 33px;
	height: 52px;
	text-align: center;
	position: absolute;
}

.bx-im-message-retry-icon {
	display: inline-block;
	width: 19px;
	height: 19px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2219%22%20height%3D%2219%22%3E%0A%20%20%3Cpath%20fill%3D%22%2380868E%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.5%2019C4.2533%2019%200%2014.7467%200%209.5S4.2533%200%209.5%200%2019%204.2533%2019%209.5%2014.7467%2019%209.5%2019zm5.5291-9.9206V4.77l-1.2384%201.2388c-1.0083-1.2414-2.5432-2.037-4.2676-2.037-3.0412%200-5.5064%202.4653-5.5064%205.5065s2.4652%205.506%205.5064%205.506c1.2971%200%202.487-.4515%203.4282-1.2017l-1.3953-1.7122c-.5604.44-1.2653.705-2.033.705-1.8208%200-3.297-1.4762-3.297-3.297%200-1.821%201.4762-3.2975%203.297-3.2975%201.1142%200%202.0986.5538%202.6951%201.4l-1.4983%201.4984h4.3093z%22/%3E%0A%3C/svg%3E%0A');
	background-repeat: no-repeat;
	opacity: .8;
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
	transition: opacity .1s ease-out;
	cursor: pointer;
	margin-top: 17px;
}
.bx-im-message-retry-icon:hover .bx-im-message-retry-icon:hover {
	opacity: 1;
}

.bx-im-message-status-retry-enter-active {
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
	transition: opacity .1s ease-out;
}
.bx-im-message-status-retry-enter {
	opacity: 0;
}

.bx-im-message-status-retry-leave-active {
	-webkit-animation: bx-im-message-status-retry .2s linear;
	animation: bx-im-message-status-retry .2s linear;
}

@-webkit-keyframes bx-im-message-status-retry {
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform:rotate(180deg);
		transform:rotate(180deg);
	}
}
@keyframes bx-im-message-status-retry {
	0% {
		-webkit-transform:rotate(0deg);
		        transform:rotate(0deg);
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform:rotate(180deg);
		        transform:rotate(180deg);
	}
}

.bx-im-message-status-menu {
	width: 33px;
	height: 52px;
}

/* endregion message status */

/* region 04. menu */
.bx-im-message-menu {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 33px;
	height: 52px;
	text-align: center;
	position: relative;
}

.bx-im-message-menu-icon {
	display: inline-block;
	width: 19px;
	height: 19px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2219%22%20height%3D%2219%22%3E%0A%20%20%3Cpath%20fill%3D%22%2380868E%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.5%2019C4.2533%2019%200%2014.7467%200%209.5S4.2533%200%209.5%200%2019%204.2533%2019%209.5%2014.7467%2019%209.5%2019zm0-8.6806L5.6053%206.4247%203.658%208.372%209.5%2014.214l5.842-5.842-1.9473-1.9473L9.5%2010.3194z%22/%3E%0A%3C/svg%3E%0A');
	background-repeat: no-repeat;
	opacity: 0;
	-webkit-transition: opacity .05s ease-out;
	-o-transition: opacity .05s ease-out;
	transition: opacity .05s ease-out;
	cursor: pointer;
	margin-top: 16px;
}
.bx-im-message:hover .bx-im-message-menu-icon {
	opacity: .5;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}
.bx-im-message:hover .bx-im-message-menu-icon:hover {
	opacity: 1;
}

/*
.bx-messenger-content-item-menu-with-apps {  background-position: 0 -30px;  opacity: .8;  }
.bx-messenger-content-item-menu-with-apps:hover {  background-position: 0 -15px;  }
.bx-messenger-content-item:hover .bx-messenger-content-item-menu { opacity: 0.6 }
.bx-messenger-content-item:hover .bx-messenger-content-item-menu-with-apps { opacity: .8 }
.bx-messenger-content-item-menu-hover .bx-messenger-content-item-menu { opacity: 1!important; }
.bx-im-message-type-opponent .bx-messenger-content-item-menu { float: right; margin-left: 0; margin-right: -42px; }
.bx-messenger-chat-guest .bx-messenger-content-item-menu { display: none; }
*/

/* endregion */

/* region 05. reply */
.bx-im-message-reply {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 0;
	height: 52px;
	text-align: center;
	position: relative;
}

.bx-im-message-reply-left {
	position: absolute;
	left: -60px;
}
.bx-im-message-type-other .bx-im-message-reply-left {
	position: relative;
	left: -60px;
}
.bx-im-message-type-other.bx-im-message-without-avatar .bx-im-message-reply-left {
	position: relative;
	left: -65px;
}

.bx-im-message-reply-right {
	position: absolute;
	right: -25px;
}
.bx-im-message-type-other .bx-im-message-reply-right {
	right: -40px;
}
.bx-im-message-without-avatar .bx-im-message-reply-right {
	right: 0;
}
.bx-im-message-type-other.bx-im-message-without-avatar .bx-im-message-reply-right {
	right: -30px;
}

.bx-im-message-reply-icon {
	position: absolute;
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2227%22%20height%3D%2223%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20d%3D%22M26.532%2022.975c-.416-1.804-1.298-3.169-2.312-4.521a11.577%2011.577%200%200%200-3.603-3.178%2010.267%2010.267%200%200%200-4.138-1.29c-.351-.03-.7-.04-1.041-.03-.325.009-1.338-.037-1.524%200v4.996L6.28%2013.419.828%209.476l5.453-4.033L13.914%200v4.975c.178.043%201.721.279%202.264.468%201.144.398%202.192.978%203.175%201.61a16.635%2016.635%200%200%201%204.803%204.685%2015.385%2015.385%200%200%201%202.376%205.759c.37%201.979.419%203.677%200%205.478z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22/%3E%0A%3C/svg%3E%0A');
	background-repeat: no-repeat;
	background-color: rgba(7, 5, 27, 0.62);
	background-position: center center;
	background-size: 16px;
	cursor: pointer;
	border-radius: 50%;
	margin-top: 10px;
	margin-left: 15px;
	-webkit-animation: bx-im-message-reply-icon-show .5s linear 1;
	        animation: bx-im-message-reply-icon-show .5s linear 1;
}

@-webkit-keyframes bx-im-message-reply-icon-show {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}

	20% {
		opacity: 0;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}

	40% {
		opacity: 0.5;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.4);
		        transform: scale(1.4);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

@keyframes bx-im-message-reply-icon-show {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}

	20% {
		opacity: 0;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}

	40% {
		opacity: 0.5;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.4);
		        transform: scale(1.4);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

/* endregion */