@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;
		background:white;
		padding:10px;
		padding-right: 24px; /* reserve room so the scrollbar doesn't sit under the reply badge */
		border: 1px solid #ccc;
		max-height: 50vh;
		overflow-y: auto;
	}
	ul.popover-ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		padding: 4px 8px;
		border-radius: 4px;
		border: 1px solid transparent;
		transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
	}
	ul.popover-ul li a,
	ul.popover-ul li a:visited,
	ul.popover-ul li a:hover,
	ul.popover-ul li a:active {
		color: inherit !important;
		text-decoration: none !important;
	}
	ul.popover-ul li a:hover {
		background-color: #fafafa;
		border-color: #ccc;
		box-shadow: 0 1px 3px rgba(0,0,0,.15);
	}
	.popover-recipient i.fa-comment-o {
		color: #888;
		margin-right: 6px;
	}
	.recipient-dropdown {
		position: relative;
		display: inline-block;
	}
	.recipient-dropdown-toggle {
		background: white;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 2px 8px;
		line-height: 1.4;
		cursor: pointer;
	}
	#sender-details-section {
		align-items: center;
		margin-left: 0px;
		margin-top: 10px;
		width: 100%;
		background: #f5f6f8;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 8px 16px;
	}
	/* Was its own Bootstrap .card - now just a divider inside the shared
	   report/conversation card. position:relative is still needed here
	   (not inherited from the outer card) since the Send button inside is
	   position:absolute against this specific box, not the whole card. */
	#conversation-message-section {
		position: relative;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid #eee;
	}
	.recipient-dropdown-toggle .fa-caret-down {
		color: #888;
		margin-left: 4px;
	}
	ul.recipient-dropdown-list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		width: max-content;
	}
	#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;
	}
	/* Sits inside a .broadcast-datetime paragraph for its text-align:right - cancel the
	   italic that rule applies to the (usually date/text) content around it, since it
	   doesn't suit a button label. */
	.broadcast-datetime .view-recipients {
		font-style: normal;
	}
	.row_selected {
		background-color: #cecece !important;
	}
	.popover {
		--bs-popover-border-color: none !important;
		--bs-popover-bg: none !important;
	}
	span.replied {
		display: inline-block;
		height: 12px;
		width: 12px;
		background-color: #cd2222;
		border-radius: 6px;
		margin-left: 5px;
		font-size: 60%;
		text-align: center;
		color: white;
		line-height: 12px;
	}

	/* M E N U */
	td.td-center {
		cursor: pointer;
	}
	.menu {
		background: #f5f6f8;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		-webkit-touch-callout: 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;

	}
	/* Fax/Voice/Email/TTS content (member_default.js's LoadBroadcastDetail) doesn't need
	   the SMS thread's fixed scroll height - it's usually a couple of lines, so the fixed
	   350px left a large empty box underneath. Class toggled by LoadBroadcastDetail/
	   LoadSmsConversation depending on which content is currently loaded. */
	div#chat-message.compact-detail {
		height: auto;
	}
	div#sender-details {
		background: #dedede;
		height: 30px;
		padding: 5px;
	}
	#conversation-area {
		border-radius: 5px;
		overflow-y: auto;
		overflow-x: hidden;
		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;
	}
	.job-report-link {
		margin: 6px 0 0 0 !important;
	}
	.job-report-link a {
		font-size: 0.85rem;
		font-weight: normal;
		color: #0954c9;
		text-decoration: none;
	}
	.job-report-link a:hover {
		text-decoration: underline;
	}

	/* Shown below the conversation thread in #chat-message when there's no
	   usable reply number for this job (one-way SMS, or 2-way where no real
	   sender id could be found) - the conversation itself still renders
	   normally, this just explains why there's no reply option below it.
	   See .no-sender-message in smsconversation.asp. */
	.no-sender-message {
		color: #888;
		font-style: italic;
		font-size: 0.85rem;
		text-align: center;
		padding: 10px 20px;
		margin: 8px 0 0 0;
	}

	/* Section label above Fax/Voice/Email attachment content (members/broadcastdetail.asp) -
	   "Documents", "Sound Files", "Attachments". */
	.detail-section-title {
		font-weight: 600;
		color: #333;
		margin: 4px 0 8px 0;
	}

	/* Document link list - Fax documents (members/broadcastdetail.asp) and,
	   from Phase 3, Email attachments - reused unchanged for both. */
	.document-link-list {
		list-style: none;
		padding-left: 0;
		margin: 0;
	}
	.document-link-list li {
		margin-bottom: 6px;
	}
	.document-link-list a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: #0954c9;
		text-decoration: none;
	}
	.document-link-list a:hover {
		text-decoration: underline;
	}
	.document-link-list a i {
		color: #888;
		width: 16px;
		text-align: center;
	}

	/* Voice recording player (members/broadcastdetail.asp) */
	.voice-player-wrap {
		margin: 8px 0;
	}
	.voice-player-wrap audio {
		display: block;
		width: 100%;
		max-width: 400px;
	}
	.voice-player-wrap div {
		margin-top: 8px;
	}

	/* Merged email display (members/broadcastdetail.asp) */
	.email-meta {
		font-size: 0.85rem;
		color: #444;
		margin-bottom: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
	}
	.email-frame {
		width: 100%;
		border: 1px solid #ccc;
		min-height: 300px;
	}
	.email-frame-plaintext {
		padding: 10px;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}

	/* Merged TTS message text (members/broadcastdetail.asp) */
	.tts-message-text {
		padding: 10px;
		line-height: 1.5;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}

	/* Job type badge, recent jobs list - colour-coded by channel family */
	.job-type-badge {
		display: inline-block;
		font-size: 0.6rem;
		font-weight: 700 !important;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		padding: 1px 5px;
		border-radius: 10px;
		line-height: 1.6;
	}
	.job-type-badge-sms { background:#e7f1ff; color:#0954c9; }
	.job-type-badge-email { background:#fff2e0; color:#a35b00; }
	.job-type-badge-fax { background:#fdf1f1; color:#a81810; }
	.job-type-badge-voice { background:#e6f7f1; color:#0a7a53; }
	.job-type-badge-tts { background:#f3e8fd; color:#6b21a8; }
	.job-type-badge-default { background:#eee; color:#555; }
	td.sorting_asc.sorting_disabled.td-center {
		display: none !important;
	}
	/* Chart.js with maintainAspectRatio:false needs its *parent* height fixed,
	   not the canvas itself - Chart.js manages the canvas's own width/height
	   via a resize observer on this container, and setting height directly
	   on the canvas fights that observer (symptom: canvas growing forever). */
	.chart-container {
		position: relative;
		height: 230px;
	}
	/* Was in-flow (d-flex justify-content-end mb-2), pushing the chart down by
	   its own row height. Lifted out of flow instead - the card (its nearest
	   positioned ancestor, Bootstrap's .card is position:relative by default)
	   has enough free space top-right of Chart.js's own legend that this
	   doesn't overlap real chart content. Revisit if the legend ever grows
	   (e.g. more datasets) into that corner. */
	.chart-type-toggle {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		z-index: 5;
	}
	.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;
    }