@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
	::selection {
		background: rgba(82,179,217,0.3);
		color: inherit;
	}
	.fade:not(.show) {
		opacity: 1 !important;
	}

	div#myTableMainWrap li {
		margin-top: 5px;
		margin-bottom: 0;
	}
	ul.popover-ul {
		margin-bottom: 0px !important;
		padding-left:9px;
	}
	#content ul li {
		list-style-image: none !important;
	}
	#content a, #bemenu a {
		cursor: pointer !important;
		font-weight: 500 !important;
	}
	.StandardButton {
		background: #e20000 !important;
		color: white !important;
	}
	.row_selected {
		background-color: #cecece !important;
	}
	.popover {
		--bs-popover-border-color: none !important;
		--bs-popover-bg: none !important;
	}
	span.replied {
		height: 12px;
		width: 12px;
		background-color: #cd2222;
		border-radius: 6px;
		margin-left: 5px;
		font-size: 60%;
		text-align: center;
		color: white;
		line-height: 12px;
		position: absolute;
	}

	/* M E N U */
	td.td-center {
		cursor: pointer;
	}
	.menu {
		top: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		max-height: 100px;	
		background: #adb5bd;
		z-index: 100;
		-webkit-touch-callout: none;
	/*	-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	*/
	}
	.back {
		position: absolute;
		width: 90px;
		height: 50px;
		top: 0px;
		left: 0px;
		color: #fff;
		line-height: 50px;
		font-size: 30px;
		padding-left: 10px;
		cursor: pointer;
	}
	.back img {
		position: absolute;
		top: 5px;
		left: 30px;
		width: 40px;
		height: 40px;
		background-color: rgba(255,255,255,0.98);
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		margin-left: 15px;
	}
	.back:active {
		background: rgba(255,255,255,0.2);
	}
	.name {
		position: absolute;
		top: 6px;
		left: 10px;
		font-family: 'Lato';
		font-size: 25px;
		font-weight: 300;
		color: rgba(255,255,255,0.98);
		cursor: default;
	}
	.last {
		position: absolute;
		top: 30px;
		left: 115px;
		font-family: 'Lato';
		font-size: 11px;
		font-weight: 400;
		color: rgba(255,255,255,0.6);
		cursor: default;
	}
	/* M E S S A G E S */
	div#chat-message {
		height: 350px;
		
	}
	div#sender-details {
		background: #dedede;
		height: 30px;
		padding: 5px;
	}
	#conversation-area {
		border-radius: 5px;
		overflow: scroll;
		height: 350px;
	}
	.chat {
		list-style: none;
		background: none;
		margin: 0;
		padding: 0 0 50px 0;
		margin-top: 60px;
		/* margin-bottom: 10px; */
		height: 350px;
		overflow: scroll;
	}
	.chat li {
		padding: 0.5rem;
		overflow: hidden;
		display: flex;
	}
	.chat .avatar {
		width: 40px;
		height: 40px;
		position: relative;
		display: block;
		z-index: 2;
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		background-color: rgba(255,255,255,0.9);
	}
	.chat .avatar img {
		width: 40px;
		height: 40px;
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		background-color: rgba(255,255,255,0.9);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}
	.chat .day {
		position: relative;
		display: block;
		text-align: center;
		color: #c0c0c0;
		height: 20px;
		text-shadow: 7px 0px 0px #e5e5e5, 6px 0px 0px #e5e5e5, 5px 0px 0px #e5e5e5, 4px 0px 0px #e5e5e5, 3px 0px 0px #e5e5e5, 2px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 0px 0px 0px #e5e5e5, -1px 0px 0px #e5e5e5, -2px 0px 0px #e5e5e5, -3px 0px 0px #e5e5e5, -4px 0px 0px #e5e5e5, -5px 0px 0px #e5e5e5, -6px 0px 0px #e5e5e5, -7px 0px 0px #e5e5e5;
		box-shadow: inset 20px 0px 0px #e5e5e5, inset -20px 0px 0px #e5e5e5, inset 0px -2px 0px #d7d7d7;
		line-height: 38px;
		margin-top: 5px;
		margin-bottom: 20px;
		cursor: default;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}
	.other .msg {
		order: 1;
		border-top-left-radius: 0px;/* box-shadow: -1px 2px 0px #D4D4D4; */
	}
	.other:before {
		content: "";
		position: relative;
		top: 0px;
		right: 0px;
		left: 40px;
		width: 0px;
		height: 0px;
		border: 5px solid #fff;
		border-left-color: transparent;
		border-bottom-color: transparent;
	}
	.self {
		justify-content: flex-end;
		align-items: flex-end;
	}
	.self .msg {
		order: 1;
		border-bottom-right-radius: 0px;
		box-shadow: 1px 2px 0px #D4D4D4;
	}
	.self .avatar {
		order: 2;
	}
	.self .avatar:after {
		content: "";
		position: relative;
		display: inline-block;
		bottom: 19px;
		right: 0px;
		width: 0px;
		height: 0px;
		border: 5px solid #fff;
		border-right-color: transparent;
		border-top-color: transparent;
		box-shadow: 0px 2px 0px #D4D4D4;
	}
	.msg {
		background: #efefef;
		min-width: 50px;
		padding: 10px;
		border-radius: 2px;
		box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
	}
	.msg p {
		font-size: 0.8rem;
		margin: 0 0 0.2rem 0;
		color: #777;
	}
	.msg img {
		position: relative;
		display: block;
		width: 450px;
		border-radius: 5px;
		box-shadow: 0px 0px 3px #eee;
		transition: all .4s cubic-bezier(0.565, -0.260, 0.255, 1.410);
		cursor: default;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	@media screen and (max-width: 800px) {
	.msg img {
		width: 300px;
	}
	}

	@media screen and (max-width: 550px) {
	.msg img {
		width: 200px;
	}
	}
	.msg time {
		font-size: 0.7rem;
		color: #ccc;
		margin-top: 3px;
		float: right;
		cursor: default;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}
	.msg time:before {
		content: "\f017";
		color: #ddd;
		font-family: FontAwesome;
		display: inline-block;
		margin-right: 4px;
	}
	emoji {
		display: inline-block;
		height: 18px;
		width: 18px;
		background-size: cover;
		background-repeat: no-repeat;
		margin-top: -7px;
		margin-right: 2px;
		transform: translate3d(0px, 3px, 0px);
	}
	emoji.user {
		height: 30px !important;
		width: 30px !important;
		background: url(../../images/user.png) center/contain no-repeat;
	}
	emoji.customersupport {
		height: 30px !important;
		width: 30px !important;
		background: url(../../images/customer-support.png) center/contain no-repeat;
	}
	emoji.please {
		background-image: url(http://imgur.com/ftowh0s.png);
	}
	emoji.lmao {
		background-image: url(http://i.imgur.com/MllSy5N.png);
	}
	emoji.happy {
		background-image: url(http://imgur.com/5WUpcPZ.png);
	}
	emoji.pizza {
		background-image: url(http://imgur.com/voEvJld.png);
	}
	emoji.cryalot {
		background-image: url(http://i.imgur.com/UUrRRo6.png);
	}
	emoji.books {
		background-image: url(http://i.imgur.com/UjZLf1R.png);
	}
	emoji.moai {
		background-image: url(http://imgur.com/uSpaYy8.png);
	}
	emoji.suffocated {
		background-image: url(http://i.imgur.com/jfTyB5F.png);
	}
	emoji.scream {
		background-image: url(http://i.imgur.com/tOLNJgg.png);
	}
	emoji.hearth_blue {
		background-image: url(http://i.imgur.com/gR9juts.png);
	}
	emoji.funny {
		background-image: url(http://i.imgur.com/qKia58V.png);
	}
	@-webikt-keyframes pulse {
	from {
	opacity: 0;
	}
	to {
	opacity: 0.5;
	}
	}
	/* T Y P E */

	textarea.textarea {
		position: sticky;
		bottom: 0;
		/* margin-bottom: 15px; */
		left: 0px;
		right: 0px;
		width: 100%;
		height: 50px;
		z-index: 99;
		background: #efefef;
		border: none;
		outline: none;
		padding-left: 20px;
		padding-right: 55px;
		color: #666;
		font-weight: 400;
		border-top: 2px solid #e0dcdc;
	}
	.input-group-text {
		border-radius: 0px;
	}
	input {
		border: 1px solid #efefef
	}
	#bemenu {
		position: relative;
		z-index: 999;
	}

	body{font-family: "Trebuchet MS", arial, courier, serif;}

	#nav li ul li a:visited, #nav li ul li a:link, #nav li ul li a:active {
		width: 173px;
	}
	.broadcast-destination{
		margin-bottom:0px !important;
		font-weight:800 !important;
	}
	.broadcast-datetime{
		margin-bottom:0px !important;
		font-style:italic !important;
		text-align:right !important;
	}
	td.sorting_asc.sorting_disabled.td-center {
		display: none !important;
	}
	canvas#myChart {
	height: 230px;
	}
	.quicklinkbutton{
		background: #e20000 !important;
		margin-right: 10px;
		color:white !important;
	}
	.notice-text{
		color: black !important;
		font-weight: 700 !important;
	}

	#AntiSpam {
		position: absolute;
		top: 15%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		background: white;
		z-index: 10000;
		padding: 10px;
		border: 1px solid #444;
		border-radius: 5px;
		font-size: 1rem;
	}

    /* Base style for conversation bubbles */
    .conversation-bubble {
        background-color: #e2f9e0;
        padding: 10px;
        border-radius: 10px;
        margin: 10px 0;
        display: inline-block; /* Added this line */
        max-width: 60%; /* Set maximum width to 60% */
        clear: both; /* Clear floating elements */
    }

    /* Style for right-aligned conversation bubble */
    .conversation-bubble.right {
        text-align: right;
        float: right;
    }

    /* Style for image attachments */
    .attachment-image {
        width: 100%;
        background-color:#ffffff;
    }

    .chat-message{
        overflow-y: scroll;
        height: 350px;
        scroll-behavior: smooth;
    }